create:足浴项目（80%）

app.js

@@ -0,0 +1,39 @@
+//app.js
+App({
+  onLaunch: function () {
+    // 展示本地存储能力
+    var logs = wx.getStorageSync('logs') || []
+    logs.unshift(Date.now())
+    wx.setStorageSync('logs', logs)
+
+    // 登录
+    wx.login({
+      success: res => {
+        // 发送 res.code 到后台换取 openId, sessionKey, unionId
+      }
+    })
+    // 获取用户信息
+    wx.getSetting({
+      success: res => {
+        if (res.authSetting['scope.userInfo']) {
+          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
+          wx.getUserInfo({
+            success: res => {
+              // 可以将 res 发送给后台解码出 unionId
+              this.globalData.userInfo = res.userInfo
+
+              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
+              // 所以此处加入 callback 以防止这种情况
+              if (this.userInfoReadyCallback) {
+                this.userInfoReadyCallback(res)
+              }
+            }
+          })
+        }
+      }
+    })
+  },
+  globalData: {
+    userInfo: null
+  }
+})

app.json

@@ -0,0 +1,55 @@
+{
+  "pages":[
+    
+    "pages/person/person",
+    "pages/order/order",
+    "pages/appointment/appointment",
+    "pages/personorder/personorder",
+    "pages/index/index",
+    "pages/shopinfo/shopinfo",
+    "pages/product/product",
+    "pages/shop/shop",
+    "pages/personinfo/personinfo",
+    "pages/comments/comments"
+
+   
+  ],
+  "window":{
+    "navigationBarBackgroundColor": "#343434",
+    "navigationBarTextStyle": "white",
+    "navigationBarTitleText": "首页",
+    "backgroundColor": "#fff",
+    "backgroundTextStyle": "light"
+  
+ 
+  },
+  "tabBar": {
+    "color": "#444",
+    "selectedColor": "#1296db",
+    "backgroundColor": "#ffffff",
+    "list": [{
+      "pagePath": "pages/index/index",
+      "text": "首页",
+      "iconPath": "images/index.jpg",
+      "selectedIconPath": "images/index-active.jpg"
+    },
+    {
+      "pagePath": "pages/personorder/personorder",
+      "text": "订单",
+      "iconPath": "images/order.jpg",
+      "selectedIconPath": "images/order-active.jpg"
+    },
+    {
+      "pagePath": "pages/person/person",
+      "text": "我的",
+      "iconPath": "images/person.jpg",
+      "selectedIconPath": "images/person-active.jpg"
+    }]
+  },
+  "style": "v2",
+  "sitemapLocation": "sitemap.json",
+  "useExtendedLib": {
+    "kbone": true,
+    "weui": true
+  }
+}

app.wxss

@@ -0,0 +1,60 @@
+/**app.wxss**/
+Page{
+  /* background-color: #F7F7F7; */
+  
+}
+
+.c-e40360{
+  color: #e40360;
+}
+.c-202020{
+  color: #202020;
+}
+
+.c-707070{
+  color: #707070;
+}
+
+.f12{
+  /* font-size: 25rpx; */
+  font-size: 12px;
+}
+.f13{
+  font-size: 13px;
+}
+
+.f15{
+  font-size: 15px;
+}
+.f17{
+  font-size: 17px;
+}
+::-webkit-scrollbar {
+  display:none;
+  width:0;
+  height:0;
+  color:transparent;
+}
+.card{
+  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+  border: 1px solid #ebeef5;
+}
+
+.f18{
+  font-size: 18px;
+}
+.f14{
+  font-size: 14px;
+}
+.fw300{
+  font-weight: 300;
+}
+.fw400{
+  font-weight: 400;
+}
+.fw500{
+  font-weight: 500;
+}
+.fw600{
+  font-weight: 600;
+}

componets/comments/index.js

@@ -0,0 +1,32 @@
+//Component Object
+Component({
+    properties: {
+        commentsList:{
+            type:Array,
+            value:[],
+            observer: function(){}
+        },
+
+    },
+    data: {
+       
+    },
+    methods: {
+        
+    },
+    created: function(){
+       
+    },
+    attached: function(){
+
+    },
+    ready: function(){
+        console.log(this.properties)
+    },
+    moved: function(){
+
+    },
+    detached: function(){
+
+    },
+});

componets/comments/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "mp-icon": "weui-miniprogram/icon/icon"
+    }
+}

componets/comments/index.scss

@@ -0,0 +1,80 @@
+.container {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    padding: 20rpx 20rpx;
+    background-color: #fff;
+    border-bottom: 1rpx solid #ECECEC;
+
+    /* 头像 */
+    .photo {
+        flex: 1;
+
+        .head-img {
+            width: 100rpx;
+            height: 100rpx;
+        }
+    }
+
+    .comments {
+        flex: 5;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        padding: 0 20rpx;
+
+        .product {
+            width: 95%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+        }
+
+        .comment-content {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+
+            .imgs {
+                width: 100%;
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+                flex-wrap: wrap;
+                .comment-img {
+                    width: 32%;
+                    padding-right: 1.333333%;
+                    height: 158rpx;
+                    .comm-img {
+                        width: 100%;
+                        height: 150rpx;
+
+                    }
+                }
+            }
+
+        }
+
+    }
+}
+
+.f13 {
+    font-size: 13px;
+}
+
+.fw300 {
+    font-weight: 300;
+}
+
+.fw400 {
+    font-weight: 400;
+}
+
+.color-gray {
+    color: #999
+}
+
+.padding5 {
+    padding: 5rpx 0;
+}

componets/comments/index.wxml

@@ -0,0 +1,33 @@
+<view class="container" wx:for="{{commentsList}}" wx:key="id">
+    <view class="photo">
+        <image class="head-img" src="{{item.headImg}}" >
+            
+        </image>
+        
+    </view>
+    <view class="comments">
+        <view class="product padding5">
+            <view class="product-name fw400">{{item.product}}</view>
+            <view class="assess-date f13 .color-gray fw300">{{item.assessDate}}</view>
+        </view>
+        <view class="stars padding5" >
+            <mp-icon icon="star" color="#E15F3D" size="18" type="{{item.stars>0?'filled':'outline'}}"></mp-icon>
+            <mp-icon icon="star" color="#E15F3D" size="18" type="{{item.stars>1?'filled':'outline'}}"></mp-icon>
+            <mp-icon icon="star" color="#E15F3D" size="18" type="{{item.stars>2?'filled':'outline'}}"></mp-icon>
+            <mp-icon icon="star" color="#E15F3D" size="18" type="{{item.stars>3?'filled':'outline'}}"></mp-icon>
+            <mp-icon icon="star" color="#E15F3D" size="18" type="{{item.stars>4?'filled':'outline'}}"></mp-icon>
+        </view>
+        <view class="comment-content padding5">
+            <view class=" fw300 padding5">{{item.comments.content}}</view>
+            <view class="imgs">
+                <view class="comment-img " hidden="{{item.comments.imgs.length<1}}" wx:for="{{item.comments.imgs}}" wx:key="imgurl">
+                        <image class="comm-img" src="{{item.imgurl}}" >
+                            
+                        </image>
+                </view>
+            </view>
+        </view>
+    </view>
+</view>
+
+{{id}}

componets/comments/index.wxss

@@ -0,0 +1,79 @@
+@charset "UTF-8";
+.container {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  padding: 20rpx 20rpx;
+  background-color: #fff;
+  border-bottom: 1rpx solid #ECECEC;
+  /* 头像 */
+}
+
+.container .photo {
+  flex: 1;
+}
+
+.container .photo .head-img {
+  width: 100rpx;
+  height: 100rpx;
+}
+
+.container .comments {
+  flex: 5;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  padding: 0 20rpx;
+}
+
+.container .comments .product {
+  width: 95%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.container .comments .comment-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.container .comments .comment-content .imgs {
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.container .comments .comment-content .imgs .comment-img {
+  width: 32%;
+  padding-right: 1.333333%;
+  height: 158rpx;
+}
+
+.container .comments .comment-content .imgs .comment-img .comm-img {
+  width: 100%;
+  height: 150rpx;
+}
+
+.f13 {
+  font-size: 13px;
+}
+
+.fw300 {
+  font-weight: 300;
+}
+
+.fw400 {
+  font-weight: 400;
+}
+
+.color-gray {
+  color: #999;
+}
+
+.padding5 {
+  padding: 5rpx 0;
+}

componets/shop/index.js

@@ -0,0 +1,28 @@
+//Component Object
+Component({
+    properties: {
+        shops: { type: Array, value: [] },
+
+    },
+    data: {
+
+    },
+    methods: {
+        
+    },
+    created: function(){
+
+    },
+    attached: function(){
+
+    },
+    ready: function(){
+
+    },
+    moved: function(){
+
+    },
+    detached: function(){
+
+    },
+});

componets/shop/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "mp-icon": "weui-miniprogram/icon/icon"
+    }
+}

componets/shop/index.scss

@@ -0,0 +1,89 @@
+.shop-info {
+    width: 100%;
+    height: 220rpx;
+    border: 1rpx solid #ECECEC;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20rpx 30rpx;
+    box-sizing: border-box;
+    margin-bottom: 10rpx;
+    background-color: #fff;
+
+    >.shopimg {
+        width: 150rpx;
+        height: 150rpx;
+
+        >.img {
+            width: 100%;
+            height: 100%;
+        }
+
+    }
+
+    .shopmsg {
+        flex: 2;
+        height: 200rpx;
+        margin-left: 50rpx;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+
+        >.shopview {
+            display: flex;
+            justify-content: space-between;
+
+        }
+
+        /* 处理定位图标上移的问题 */
+        >.shop-address {
+            position: relative;
+            padding-left: 45rpx;
+
+            .address-icon {
+                position: absolute;
+                top: -6rpx;
+                left: 0;
+            }
+        }
+
+        /* 新品促销标签 */
+        .mark {
+
+            width: 105rpx;
+            height: 30rpx;
+            line-height: 30rpx;
+            text-align: center;
+            border-radius: 30rpx;
+        }
+
+        .discount {
+            color: #E359A8;
+            border: 1px solid#E359A8;
+        }
+
+        .new {
+            border: 1px solid #80CB5F;
+            color: #80CB5F;
+        }
+    }
+
+}
+
+
+.c-202020 {
+    color: #202020;
+}
+
+.c-707070 {
+    color: #707070;
+}
+
+.f12 {
+    font-size: 12px;
+}
+
+.f15 {
+    font-size: 15px;
+}

componets/shop/index.wxml

@@ -0,0 +1,40 @@
+    <navigator url="../../pages/shopinfo/shopinfo?id={{item.id}}" wx:for="{{shops}}" wx:key="id" hover-class="none">
+        <view class="shop-info">
+            <view class="shopimg">
+                <image src="{{item.imgurl}}" mode="aspectFill" lazy-load="false" class="img">
+
+                </image>
+            </view>
+            <view class="shopmsg">
+                <view class="shopview">
+                    <view class="c-202020">
+                        {{item.shopname}}
+                    </view>
+                    <view class="c-202020 mark f12 {{item.new?'new':''}} {{item.discount?'discount':''}}" wx:if="{{item.mark}}">
+                        {{item.marktext}}
+                    </view>
+                </view>
+                <view class="shopview">
+                    <view>
+
+                        <mp-icon icon="star" color="#E15F3D" size="18" type="{{item.stars>0?'filled':'outline'}}"></mp-icon>
+                        <mp-icon icon="star" color="#E15F3D" size="18" type="{{item.stars>1?'filled':'outline'}}"></mp-icon>
+                        <mp-icon icon="star" color="#E15F3D" size="18" type="{{item.stars>2?'filled':'outline'}}"></mp-icon>
+                        <mp-icon icon="star" color="#E15F3D" size="18" type="{{item.stars>3?'filled':'outline'}}"></mp-icon>
+                        <mp-icon icon="star" color="#E15F3D" size="18" type="{{item.stars>4?'filled':'outline'}}"></mp-icon>
+                    </view>
+                </view>
+                <view class="shop-address shopview">
+
+                    <view class="c-707070 f12">
+                        <mp-icon icon="location" color="#707070" size="20" class="address-icon" ></mp-icon>
+                        {{item.shop_address}}
+                    </view>
+                    <view class="c-707070 f12">
+                        {{item.shop_distance}}
+                    </view>
+                </view>
+            </view>
+
+        </view>
+    </navigator>

componets/shop/index.wxss

@@ -0,0 +1,85 @@
+@charset "UTF-8";
+.shop-info {
+  width: 100%;
+  height: 220rpx;
+  border: 1rpx solid #ECECEC;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20rpx 30rpx;
+  box-sizing: border-box;
+  margin-bottom: 10rpx;
+  background-color: #fff;
+}
+
+.shop-info > .shopimg {
+  width: 150rpx;
+  height: 150rpx;
+}
+
+.shop-info > .shopimg > .img {
+  width: 100%;
+  height: 100%;
+}
+
+.shop-info .shopmsg {
+  flex: 2;
+  height: 200rpx;
+  margin-left: 50rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  /* 处理定位图标上移的问题 */
+  /* 新品促销标签 */
+}
+
+.shop-info .shopmsg > .shopview {
+  display: flex;
+  justify-content: space-between;
+}
+
+.shop-info .shopmsg > .shop-address {
+  position: relative;
+  padding-left: 45rpx;
+}
+
+.shop-info .shopmsg > .shop-address .address-icon {
+  position: absolute;
+  top: -6rpx;
+  left: 0;
+}
+
+.shop-info .shopmsg .mark {
+  width: 105rpx;
+  height: 30rpx;
+  line-height: 30rpx;
+  text-align: center;
+  border-radius: 30rpx;
+}
+
+.shop-info .shopmsg .discount {
+  color: #E359A8;
+  border: 1px solid #E359A8;
+}
+
+.shop-info .shopmsg .new {
+  border: 1px solid #80CB5F;
+  color: #80CB5F;
+}
+
+.c-202020 {
+  color: #202020;
+}
+
+.c-707070 {
+  color: #707070;
+}
+
+.f12 {
+  font-size: 12px;
+}
+
+.f15 {
+  font-size: 15px;
+}

componets/tabs/index.js

@@ -0,0 +1,52 @@
+
+Component({
+    options: {
+        addGlobalClass: true,
+        pureDataPattern: /^_/,
+        multipleSlots: true
+    },
+    properties: {
+        tabs: { type: Array, value: [] },
+        tabClass: { type: String, value: '' },
+        swiperClass: { type: String, value: '' },
+        activeClass: { type: String, value: '' },
+        tabUnderlineColor: { type: String, value: '#E32490' },
+        tabActiveTextColor: { type: String, value: '#323232' },
+        tabInactiveTextColor: { type: String, value: '#323232' },
+        tabBackgroundColor: { type: String, value: '#ffffff' },
+        activeTab: { type: Number, value: 0 },
+        swipeable: { type: Boolean, value: true },
+        animation: { type: Boolean, value: true },
+        duration: { type: Number, value: 500 },
+        swiperHeight:{type:String,value:500}
+    },
+    data: {
+        currentView: 0
+    },
+    observers: {
+        activeTab: function activeTab(_activeTab) {
+            var len = this.data.tabs.length;
+            if (len === 0) return;
+            var currentView = _activeTab - 1;
+            if (currentView < 0) currentView = 0;
+            if (currentView > len - 1) currentView = len - 1;
+            this.setData({ currentView: currentView });
+        }
+    },
+    lifetimes: {
+        created: function created() {}
+    },
+    methods: {
+        handleTabClick: function handleTabClick(e) {
+            var index = e.currentTarget.dataset.index;
+            this.setData({ activeTab: index });
+            this.triggerEvent('tabclick', { index: index });
+        },
+        handleSwiperChange: function handleSwiperChange(e) {
+            var index = e.detail.current;
+            this.setData({ activeTab: index });
+            this.triggerEvent('change', { index: index });
+        }
+    }
+});
+

componets/tabs/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

componets/tabs/index.wxml

@@ -0,0 +1,29 @@
+<view class="weui-tabs">
+  <view class="weui-tabs-bar__wrp">
+    <scroll-view scroll-x scroll-into-view="item_{{currentView}}" scroll-with-animation="{{animation}}">
+      <view class="weui-tabs-bar__content ">
+        <block wx:for="{{tabs}}" wx:key="title">
+          <view id="item_{{index}}" class="weui-tabs-bar__item"
+            style="background-color: {{tabBackgroundColor}}; color: {{activeTab === index ? tabActiveTextColor : tabInactiveTextColor}};"
+            bindtap="handleTabClick" data-index="{{index}}">
+            <view class="weui-tabs-bar__title {{tabClass}} {{activeTab === index ? activeClass : ''}}"
+              style="border-bottom-color: {{activeTab === index ? tabUnderlineColor : 'transparent'}}">
+              <text class="">{{item.title}}</text>
+            </view>
+          </view>
+        </block>
+      </view>
+    </scroll-view>
+  </view>
+  <swiper class="{{swiperClass}}" current="{{activeTab}}" duration="{{duration}}" bindchange="handleSwiperChange"
+    style="height: {{swiperHeight}}rpx;">
+    <swiper-item wx:for="{{tabs}}" wx:key="title">
+
+      <view style="height: {{swiperHeight}}rpx;">
+
+        <slot name="tab-content-{{index}}"></slot>
+      </view>
+    </swiper-item>
+  </swiper>
+
+</view>

componets/tabs/index.wxss

@@ -0,0 +1,36 @@
+.weui-tabs {
+    width: 100%;
+    /* height: 2500rpx; */
+}
+
+.weui-tabs-bar__wrp {
+    width: 100%;
+    background: #fff
+}
+
+.weui-tabs-bar__content {
+    width: 100%;
+    
+
+}
+.tab-content{
+    height: 100rpx;
+    line-height: 100rpx;
+    white-space: nowrap;
+    display: flex;
+    justify-content: space-around;
+    border-bottom: 1rpx solid #ECECEC;
+}
+
+.weui-tabs-bar__item {
+    display: inline-block;
+    letter-spacing: 2rpx;
+}
+
+.weui-tabs-bar__title {
+    display: inline-block;
+    border-bottom-width: 2px;
+    border-bottom-style: solid;
+    border-bottom-color: transparent
+}
+

jsconfig.json

@@ -0,0 +1,6 @@
+{
+	"compilerOptions": {
+		"target": "es2015",
+		"module": "commonjs"
+	}	
+}

pages/appointment/appointment.js

@@ -0,0 +1,337 @@
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    peopleNum: 1,
+    activeTab: 0,
+    productInfo: {
+      title: "葛优躺（北京躺）电影足疗",
+      shop: "大华店",
+    },
+    tabs: [],
+    orderTime: "",
+    orderTimeHeight: 0
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: async function (options) {
+    var tabs = await this.createTimeList(268);
+    this.setData({
+      tabs
+    });
+    this.getOrderHeight();
+    this.checkedTime()
+  },
+  onSlideChangeEnd: function (e) {
+    var that = this;
+    that.setData({
+      activeTab: e.detail.index
+    })
+  },
+  //动态生成产品的父盒子高度
+  getOrderHeight: function () {
+    var activeTab = this.data.activeTab;
+    var orderTimeHeight = (this.data.tabs[activeTab].list.length) / 5 * 130;
+    this.setData({
+      orderTimeHeight
+    })
+  },
+  createTimeList: async function (price) {
+    var titles = ["今天", "明天", "12-23", "12-24", "12-25", "12-26", "12-27"];
+    var day = ["12-21", "12-22", "12-23", "12-24", "12-25", "12-26", "12-27"];
+    const tabs = [];
+    let list = [{
+        id: "1",
+        time: "8:00",
+        price: price,
+
+      },
+      {
+        id: "2",
+        time: "8:30",
+        price: price,
+
+      },
+      {
+        id: "3",
+        time: "9:00",
+        price: price,
+
+      },
+      {
+        id: "4",
+        time: "9:30",
+        price: price,
+
+      },
+      {
+        id: "5",
+        time: "10:00",
+        price: price,
+
+      },
+      {
+        id: "6",
+        time: "10:30",
+        price: price,
+
+      },
+      {
+        id: "7",
+        time: "11:00",
+        price: price,
+
+      },
+      {
+        id: "8",
+        time: "11:30",
+        price: price,
+
+      }, {
+        id: "9",
+        time: "12:00",
+        price: price,
+
+      },
+      {
+        id: "10",
+        time: "12:30",
+        price: price,
+
+      },
+      {
+        id: "11",
+        time: "13:00",
+        price: price,
+
+      },
+      {
+        id: "12",
+        time: "13:30",
+        price: price,
+
+      },
+      {
+        id: "13",
+        time: "14:00",
+        price: price,
+
+      },
+      {
+        id: "14",
+        time: "14:30",
+        price: price,
+
+      },
+      {
+        id: "15",
+        time: "15:00",
+        price: price,
+
+      },
+      {
+        id: "16",
+        time: "15:30",
+        price: price,
+
+      }, {
+        id: "17",
+        time: "16:00",
+        price: price,
+
+      },
+      {
+        id: "18",
+        time: "16:30",
+        price: price,
+
+      },
+      {
+        id: "19",
+        time: "17:00",
+        price: price,
+
+      },
+      {
+        id: "20",
+        time: "17:30",
+        price: price,
+
+      },
+      {
+        id: "21",
+        time: "18:00",
+        price: price,
+
+      },
+      {
+        id: "22",
+        time: "18:30",
+        price: price,
+
+      },
+      {
+        id: "23",
+        time: "19:00",
+        price: price,
+
+      },
+      {
+        id: "24",
+        time: "19:30",
+        price: price,
+
+      },
+      {
+        id: "25",
+        time: "20:00",
+        price: price,
+
+      }
+    ];
+
+    titles.forEach(function (item, i, array) {
+      list.forEach(function (item, i, array) {
+        array[i].timeId = i;
+        array[i].inTime = true;
+        array[i].checked = false;
+      })
+
+      tabs.push({
+        title: titles[i],
+        day: day[i],
+        list
+      })
+    })
+    // tabs[2].list.splice(7,7)
+    return tabs;
+
+
+  },
+
+  //判断产品是否过时间
+  checkedTime: function (e) {
+    // 设置一小时内订单不能购买
+    var timeLimit = 1;
+    var nowTime = new Date(2020, 11, 21, 18, 29, 0);
+    var hour = nowTime.getHours();
+    var tabs = this.data.tabs[0];
+    var list = firstTabs.list;
+    // console.log(tabs[5].list)
+    list.forEach(function (item, i, array) {
+      var orderHour = item.time.split(":")[0];
+      if (parseInt(orderHour) <= parseInt(hour)) {
+        item.inTime = false;
+      }
+    })
+    this.setData({
+      tabs:nowTabs
+    })
+  },
+
+  getOrderTime: function (e) {
+    // var date = document.getElementById("orderDate");
+    // console.log(date.target)
+    // console.log(e.currentTarget)
+    //选中日期的下标
+    var i = this.data.activeTab;
+    //选中时间的下标
+    var index = e.currentTarget.dataset.i;
+    //获取选中的日期
+    var date = this.data.tabs[i].day;
+    var time = e.currentTarget.dataset.time;
+    var oTime = date + '/' + time;
+
+    //设置选中的样式
+    var tabs = this.data.tabs;
+    var list = tabs[i].list;
+    //先清空其他选中的样式
+    list.forEach(function (item, i, array) {
+      item.checked = false;
+    })
+    if (list[index].inTime) {
+      list[index].checked = true;
+      this.data.tabs[i].list = list;
+    }
+    this.setData({
+      orderTime: oTime,
+      tabs
+    })
+  },
+
+  addPeopleNum: function (e) {
+    var num = e.currentTarget.dataset.num;
+    var maxNum = 9;
+    if (num < maxNum) {
+      num++;
+    }
+    this.setData({
+      peopleNum: num
+    })
+  },
+
+  reducePeopleNum: function (e) {
+    var num = e.currentTarget.dataset.num;
+    if (num > 1) {
+      num--;
+    }
+    this.setData({
+      peopleNum: num
+    })
+  },
+
+
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/appointment/appointment.json

@@ -0,0 +1,11 @@
+{
+  "usingComponents": {
+    "mp-icon": "weui-miniprogram/icon/icon",
+    "mp-tabs": "/componets/tabs/index"
+  },
+  "navigationBarBackgroundColor": "#343434",
+  "navigationBarTextStyle": "white",
+  "navigationBarTitleText": "提交订单",
+  "backgroundColor": "#fff",
+  "backgroundTextStyle": "light"
+}

pages/appointment/appointment.scss

@@ -0,0 +1,131 @@
+.container {
+
+    background-color: #F7F7F7;
+    max-height: 699px;
+    .product-title,
+    .shop-name {
+        width: 100%;
+        height: 90rpx;
+        background-color: #fff;
+        padding: 10rpx 20rpx;
+        margin-bottom: 10rpx;
+        line-height: 90rpx;
+    }
+
+    .people-num{
+        display: flex;
+        justify-content: space-between;
+        height: 90rpx;
+        background-color: #fff;
+        line-height: 90rpx;
+        align-items: center;
+        margin-bottom: 10rpx;
+        padding-left: 20rpx;
+        .num-box{
+            width:250rpx ;
+            display: flex;
+            justify-content: space-around;
+            >view{
+                width: 40rpx;
+                height: 40rpx;
+                margin: 5rpx 0;
+                background-color: #fff;
+                >image{
+                    width: 30rpx;
+                    height: 30rpx;
+                    margin-left: 10rpx;
+                }
+            }
+            .num-text{
+                width: 50rpx;
+                height: 90rpx;
+                line-height: 90rpx;
+                text-align: center;
+            }
+        }
+    }
+
+    .order-time{
+        background-color: #fff;
+        margin-bottom: 20rpx;
+        display: flex;
+        justify-content: flex-start;
+        position: relative;
+        .weui-tabs {
+            width: 100%;
+            height: 800rpx;
+            .weui-tabs-bar__wrp {
+                .weui-tabs-bar__content {
+                    height: 95rpx;
+                    line-height: 94rpx;
+                    white-space: nowrap;
+                    display: flex;
+                    justify-content: space-around;
+                    border-bottom: 1rpx solid #ECECEC;
+    
+                    .weui-tabs-bar__item {
+                        width: 14.2857%;
+    
+                        .weui-tabs-bar__title {
+                            width: 100rpx;
+                            text-align: center;
+                            border-bottom-width: 6rpx;
+                            font-size: 13px;
+                        }
+                    }
+    
+                }
+            }
+            .weui-tabs-swiper{
+                height: 800rpx;
+            }
+        }
+        .tab-content{
+            .orders{
+                display: flex;
+                flex-wrap: wrap;
+                background-color: #fff;
+                margin: 10rpx 15rpx 0;
+                .time-info{
+                    width: 20%;
+                    height: 110rpx;
+                    line-height: 50rpx;
+                    background-color: #E6E6E6;
+                    margin: 10rpx 0;
+                    text-align: center;
+                }
+                .select-time{
+                    background-color: #DF3361;
+                    color:#fff
+                }
+                .out-time{
+                    color:#acacac;
+                }
+            }
+        }
+    }
+
+   
+    .appointment {
+        width: 90%;
+        height: 100rpx;
+        margin: 10rpx auto;
+        background-color: #DF3361;
+
+        color: #fff;
+
+        .btn {
+            font-size: 17px;
+            line-height: 100rpx;
+            text-align: center;
+            letter-spacing: 2rpx;
+        }
+    }
+
+    .appointment-hover {
+        background-color: #fff;
+        border: 2rpx solid #DF3361;
+        color: rgb(54, 54, 54);
+    }
+
+}

pages/appointment/appointment.wxml

@@ -0,0 +1,48 @@
+<view class="container">
+    <view class="product-title card f17">{{productInfo.title}}</view>
+    <view class="shop-name card f17">门店·{{productInfo.shop}}</view>
+    <view class="people-num card">
+        <view class="title">选择人数</view>
+        <view class="num-box">
+            <view bindtap="reducePeopleNum" class="" data-num="{{peopleNum}}">
+                <image class="" src="../../images/icons/reduce.png" lazy-load="false" binderror="" bindload="">
+                </image>
+            </view>
+            <input type="text" value="{{peopleNum}}" disabled="true" class="num-text" />
+            <view bindtap="addPeopleNum" class="" data-num="{{peopleNum}}">
+                <image class="" src="../../images/icons/add.png" mode="aspectFit|aspectFill|widthFix" lazy-load="false"
+                    binderror="" bindload="">
+
+                </image>
+            </view>
+        </view>
+    </view>
+    <view class="order-time card">
+        <mp-tabs tabs="{{tabs}}" style="width: 100%;" data-active="{{activeTab}}" activeTab="{{activeTab}}" swiperClass="weui-tabs-swiper" bindtabclick="onTabClick"
+        bindchange="onSlideChangeEnd" activeClass="tab-bar-title__selected" tabActiveTextColor="#E32490" swiperHeight="{{(tabs[activeTab].list.length)/5*140}}">
+        <block wx:for="{{tabs}}" wx:key="title">
+
+            <view class="tab-content" data-set="{{item}}" slot="tab-content-{{index}}" bind:tap="handleClick" style="height: {{orderTimeHeight}}rpx;">
+                <view  class="orders" style="height: {{orderTimeHeight}}rpx;overflow-y: auto;">
+                    <block wx:for="{{tabs[index].list}}"wx:for-index="index" wx:key="id">
+                        
+                       <view class="time-info {{item.checked&&item.inTime?'select-time':''}}  {{item.inTime?'':'out-time'}}"  data-time="{{item.time}}"  data-i="{{index}}"  bindtap = "getOrderTime" >
+                           <view class="time fw300" >{{item.time}}</view>
+                           <view class="price fw300" >¥{{item.price}}</view>
+                       </view>
+                    </block>
+
+                </view>
+            </view>
+        </block>
+    </mp-tabs>
+
+    </view>
+    <navigator class="appointment card" url="" hover-class="appointment-hover" open-type="navigate">
+        <view class="btn" >
+            确认预约
+        </view>
+    </navigator>
+
+    
+</view>

pages/appointment/appointment.wxss

@@ -0,0 +1,134 @@
+.container {
+  background-color: #F7F7F7;
+  max-height: 699px;
+}
+
+.container .product-title,
+.container .shop-name {
+  width: 100%;
+  height: 90rpx;
+  background-color: #fff;
+  padding: 10rpx 20rpx;
+  margin-bottom: 10rpx;
+  line-height: 90rpx;
+}
+
+.container .people-num {
+  display: flex;
+  justify-content: space-between;
+  height: 90rpx;
+  background-color: #fff;
+  line-height: 90rpx;
+  align-items: center;
+  margin-bottom: 10rpx;
+  padding-left: 20rpx;
+}
+
+.container .people-num .num-box {
+  width: 250rpx;
+  display: flex;
+  justify-content: space-around;
+}
+
+.container .people-num .num-box > view {
+  width: 40rpx;
+  height: 40rpx;
+  margin: 5rpx 0;
+  background-color: #fff;
+}
+
+.container .people-num .num-box > view > image {
+  width: 30rpx;
+  height: 30rpx;
+  margin-left: 10rpx;
+}
+
+.container .people-num .num-box .num-text {
+  width: 50rpx;
+  height: 90rpx;
+  line-height: 90rpx;
+  text-align: center;
+}
+
+.container .order-time {
+  background-color: #fff;
+  margin-bottom: 20rpx;
+  display: flex;
+  justify-content: flex-start;
+  position: relative;
+}
+
+.container .order-time .weui-tabs {
+  width: 100%;
+  height: 800rpx;
+}
+
+.container .order-time .weui-tabs .weui-tabs-bar__wrp .weui-tabs-bar__content {
+  height: 95rpx;
+  line-height: 94rpx;
+  white-space: nowrap;
+  display: flex;
+  justify-content: space-around;
+  border-bottom: 1rpx solid #ECECEC;
+}
+
+.container .order-time .weui-tabs .weui-tabs-bar__wrp .weui-tabs-bar__content .weui-tabs-bar__item {
+  width: 14.2857%;
+}
+
+.container .order-time .weui-tabs .weui-tabs-bar__wrp .weui-tabs-bar__content .weui-tabs-bar__item .weui-tabs-bar__title {
+  width: 100rpx;
+  text-align: center;
+  border-bottom-width: 6rpx;
+  font-size: 13px;
+}
+
+.container .order-time .weui-tabs .weui-tabs-swiper {
+  height: 800rpx;
+}
+
+.container .order-time .tab-content .orders {
+  display: flex;
+  flex-wrap: wrap;
+  background-color: #fff;
+  margin: 10rpx 15rpx 0;
+}
+
+.container .order-time .tab-content .orders .time-info {
+  width: 20%;
+  height: 110rpx;
+  line-height: 50rpx;
+  background-color: #E6E6E6;
+  margin: 10rpx 0;
+  text-align: center;
+}
+
+.container .order-time .tab-content .orders .select-time {
+  background-color: #DF3361;
+  color: #fff;
+}
+
+.container .order-time .tab-content .orders .out-time {
+  color: #acacac;
+}
+
+.container .appointment {
+  width: 90%;
+  height: 100rpx;
+  margin: 10rpx auto;
+  background-color: #DF3361;
+  color: #fff;
+}
+
+.container .appointment .btn {
+  font-size: 17px;
+  line-height: 100rpx;
+  text-align: center;
+  letter-spacing: 2rpx;
+}
+
+.container .appointment-hover {
+  background-color: #fff;
+  border: 2rpx solid #DF3361;
+  color: #363636;
+}

pages/comments/comments.js

@@ -0,0 +1,145 @@
+// pages/comments/comments.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    commentsList:[{
+      id:1,
+      headImg:"../../images/headImg.jpg",
+      product:"葛优躺（北京躺）电影足疗",
+      assessDate:"2020-02-02",
+      stars:5,
+      comments:{
+          content:"3号技师特别好~~~赞一个，下次还来。",
+          imgs:[
+              {imgurl:"../../images/commentsImg01.jpg"},
+              {imgurl:"../../images/commentsImg02.jpg"},
+              {imgurl:"../../images/commentsImg03.jpg"},
+              {imgurl:"../../images/commentsImg03.jpg"},
+              {imgurl:"../../images/commentsImg02.jpg"},
+              {imgurl:"../../images/commentsImg01.jpg"},
+              {imgurl:"../../images/commentsImg02.jpg"},
+              {imgurl:"../../images/commentsImg01.jpg"},
+              {imgurl:"../../images/commentsImg03.jpg"},
+          ]
+      }
+  },{
+      id:2,
+      headImg:"../../images/headImg.jpg",
+      product:"葛优躺（北京躺）电影足疗",
+      assessDate:"2020-02-02",
+      stars:5,
+      comments:{
+          content:"3号技师特别好~~~赞一个，下次还来。",
+          imgs:[
+              {imgurl:"../../images/commentsImg01.jpg"},
+              
+          ]
+      }
+  },{
+      id:3,
+      headImg:"../../images/headImg.jpg",
+      product:"葛优躺（北京躺）电影足疗",
+      assessDate:"2020-02-02",
+      stars:4,
+      comments:{
+          content:"3号技师特别好~~~赞一个，下次还来。",
+          imgs:[ ]
+      }
+  },{
+      id:4,
+      headImg:"../../images/headImg.jpg",
+      product:"葛优躺（北京躺）电影足疗",
+      assessDate:"2020-02-02",
+      stars:5,
+      comments:{
+          content:"3号技师特别好~~~赞一个，下次还来。",
+          imgs:[
+              {imgurl:"../../images/commentsImg01.jpg"},
+              {imgurl:"../../images/commentsImg02.jpg"},
+              {imgurl:"../../images/commentsImg01.jpg"},
+              {imgurl:"../../images/commentsImg03.jpg"},
+              
+          ]
+      }
+  },{
+      id:5,
+      headImg:"../../images/headImg.jpg",
+      product:"葛优躺（北京躺）电影足疗",
+      assessDate:"2020-02-02",
+      stars:5,
+      comments:{
+          content:"3号技师特别好~~~赞一个，下次还来。",
+          imgs:[
+              {imgurl:"../../images/commentsImg01.jpg"},
+              {imgurl:"../../images/commentsImg02.jpg"},
+              {imgurl:"../../images/commentsImg03.jpg"},
+              {imgurl:"../../images/commentsImg02.jpg"},
+              {imgurl:"../../images/commentsImg01.jpg"},
+              
+          ]
+      }
+  }],
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    wx.setNavigationBarTitle({
+      title: options.title
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/comments/comments.json

@@ -0,0 +1,11 @@
+{
+  "usingComponents": {
+    "comments":"../../componets/comments/index",
+    "mp-icon": "weui-miniprogram/icon/icon"
+   },
+   "navigationBarBackgroundColor": "#343434",
+   "navigationBarTextStyle": "white",
+   "navigationBarTitleText": "全部评论",
+   "backgroundColor": "#fff",
+   "backgroundTextStyle": "light"
+}

pages/comments/comments.wxml

@@ -0,0 +1,3 @@
+<!--pages/comments/comments.wxml-->
+<comments commentsList="{{commentsList}}"></comments>
+

pages/comments/comments.wxss

@@ -0,0 +1 @@
+/* pages/comments/comments.wxss */

pages/index/index.js

@@ -0,0 +1,171 @@
+Page({
+  data: {
+    shopList: [{
+      id: 1,
+      imgurl: "../../images/shop.jpg",
+      shopname: "大华店",
+      stars: 4,
+      mark: true,
+      new: true,
+      discount: false,
+      marktext: "新店促销",
+      shop_address: "上海市宝山区大华虎城A座10L",
+      shop_distance: "6.5KM"
+    }],
+    tabs: [],
+    activeTab: 0,
+    productHeight: 0
+
+
+  },
+
+
+  onLoad: async function () {
+
+    var tabs = await this.getProductList();
+    this.setData({
+      tabs
+    });
+    this.getProductHeight()
+  },
+
+ 
+  //动态生成产品的父盒子高度
+  getProductHeight: function () {
+    var h = wx.getSystemInfoSync().windowHeight * (750 / wx.getSystemInfoSync().windowWidth);
+    var productHeight = h - 430;
+    this.setData({
+      productHeight
+    })
+  },
+
+  getProductList: async function () {
+    const self = this
+    var titles = ["全部项目", "SPA", "泡浴", "推拿", "足浴"];
+    const tabs = [];
+    var list = [{
+        id: "1",
+        title: "葛优躺（北京躺）电影足疗",
+        price: "299",
+        desc: "全店通用",
+        open: true,
+        imgurl: "../../images/product01.jpg"
+      },
+      {
+        id: "2",
+        title: "中式古法推拿",
+        price: "299",
+        desc: "暂未开放",
+        open: false,
+        imgurl: "../../images/product02.jpg"
+      },
+      {
+        id: "3",
+        title: "中式古法推拿",
+        price: "299",
+        desc: "暂未开放",
+        open: false,
+        imgurl: "../../images/product02.jpg"
+      },
+      {
+        id: "4",
+        title: "葛优躺（北京躺）电影足疗",
+        price: "299",
+        desc: "暂未开放",
+        open: false,
+        imgurl: "../../images/product01.jpg"
+      }
+    ]
+    /* for (let i = 0; i < titles.length; i++) {
+      let title = titles[i]
+      let rs = await self.requestAll('https://example.com/ajax?index=0', { // \
+        mock: true // - 添加这三行
+      }, {}, 'get')
+      tabs.push({
+        title,
+        productList: rs.list
+      })
+    } */
+
+
+    for (let i = 0; i < titles.length; i++) {
+      let title = titles[i];
+      tabs.push({
+        title,
+        list
+      })
+    }
+    tabs[2].list = [{
+      id: "1",
+      title: "葛优躺（北京躺）电影足疗",
+      price: "299",
+      desc: "全店通用",
+      open: true,
+      imgurl: "../../images/product01.jpg"
+    }]
+    return tabs;
+
+  },
+  requestAll(url, data, header = {}, method) {
+    const _self = this
+    wx.showLoading()
+    return new Promise((resolve, reject) => {
+      wx.request({
+        url: url,
+        data: data,
+        header: header,
+        dataType: 'json',
+        method: method,
+        success: (res => {
+          wx.hideLoading()
+          if (res.data.code === 1) {
+            //200: 服务端业务处理正常结束
+            resolve(res.data)
+          } else {
+            if (res.data.code === 0) {
+              wx.showToast({
+                title: res.data.message,
+              })
+            }
+            if (res.data.code === 901) {
+              console.log(res.data)
+            }
+            //其它错误，提示用户错误信息
+            if (this._errorHandler != null) {
+              //如果有统一的异常处理，就先调用统一异常处理函数对异常进行处理
+              this._errorHandler(res)
+            }
+            reject(res)
+          }
+        }),
+        fail: (res => {
+          if (this._errorHandler != null) {
+            this._errorHandler(res)
+          }
+          wx.showToast({
+            title: '网络异常请,稍后再试~',
+          })
+          reject(res)
+        })
+      })
+    })
+  },
+  onTabClick(e) {
+    const index = e.detail.index
+    this.setData({
+      activeTab: index
+    })
+  },
+
+  onChange(e) {
+    const index = e.detail.index
+    this.setData({
+      activeTab: index
+    })
+  },
+  handleClick(e) {
+    wx.navigateTo({
+      url: './webview',
+    })
+  }
+})

pages/index/index.json

@@ -0,0 +1,14 @@
+{
+  "disableScroll": true,
+  "usingComponents": {
+    "mp-icon": "weui-miniprogram/icon/icon",
+    "shop":"/componets/shop/index",
+    "mp-tabs": "/componets/tabs/index"
+  },
+  "navigationBarBackgroundColor": "#343434",
+  "navigationBarTextStyle": "white",
+  "navigationBarTitleText": "首页",
+  "backgroundColor": "#fff",
+  "backgroundTextStyle": "light"
+
+}

pages/index/index.scss

@@ -0,0 +1,108 @@
+Page {
+  width: 100%;
+  height: 100%;
+  background-color: #F7F7F7;
+
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  background-color: #F7F7F7;
+
+  /* 门店的标题 */
+  .shop {
+    background-color: #fff;
+    border-top: 1rpx solid #ECECEC;
+    margin-top: 20rpx;
+
+    >.title {
+      display: flex;
+      justify-content: space-between;
+      padding: 0 40rpx;
+      height: 80rpx;
+      line-height: 80rpx;
+    }
+
+
+  }
+
+
+  .product {
+
+    .weui-tabs {
+      .weui-tabs-bar__wrp {
+        .weui-tabs-bar__content {
+          height: 100rpx;
+          line-height: 99rpx;
+          white-space: nowrap;
+          display: flex;
+          justify-content: space-around;
+          border-bottom: 1rpx solid #ECECEC;
+
+        }
+      }
+    }
+
+    .productinfo {
+      width: 95%;
+      height: 380rpx;
+      padding: 10rpx 0;
+      margin: 0 auto;
+
+      .product-item {
+        position: relative;
+        width: 100%;
+        height: 380rpx;
+        border-radius: 20rpx;
+        background-size: cover;
+
+        .product-desc {
+          height: 380rpx;
+          color: #fff;
+          position: absolute;
+          color: #fff;
+          top: 210rpx;
+          left: 20rpx;
+          letter-spacing: 2rpx;
+          font-weight: 100;
+        }
+
+        .order {
+          position: absolute;
+          right: 40rpx;
+          bottom: 20rpx;
+          width: 100rpx;
+          height: 100rpx;
+          border-radius: 50%;
+          background-color: #098932;
+          color: #fff;
+
+          >view {
+            width: 70rpx;
+            height: 70rpx;
+            line-height: 35rpx;
+            letter-spacing: 5rpx;
+            text-align: center;
+            font-size: 14px;
+            margin: 18rpx;
+          }
+        }
+
+        .gray {
+          background-color: #999;
+        }
+      }
+
+      &:first-child {
+        margin-top: 10rpx;
+      }
+
+    }
+  }
+}
+
+.fw700 {
+  font-weight: 500;
+  font-size: 18px;
+}

pages/index/index.wxml

@@ -0,0 +1,59 @@
+<!--index.wxml-->
+<view class="container">
+
+  <view>
+    <!-- 店铺信息 -->
+    <view class="shop">
+      <view class="title">
+        <view class="c-202020" user-select="false" space="false" decode="false">附近门店
+        </view>
+        <navigator class="c-202020 f15" url="../shop/shop" hover-class="none" open-type="navigate">
+          查看全部
+          <image class="" src="../../images/right.png" style="width: 25rpx;height: 25rpx;">
+
+          </image>
+        </navigator>
+      </view>
+      <!-- 店铺 -->
+      <shop shops="{{shopList}}"></shop>
+    </view>
+    <!-- 产品信息 -->
+    <view class="product">
+
+      <mp-tabs tabs="{{tabs}}" activeTab="{{activeTab}}" swiperClass="weui-tabs-swiper" bindtabclick="onTabClick"
+        bindchange="swiperChange" activeClass="tab-bar-title__selected" swiperHeight="{{(tabs[activeTab].list.length)*420}}">
+        <block wx:for="{{tabs}}" wx:key="title">
+
+          <view class="tab-content" data-set="{{item}}" slot="tab-content-{{index}}" bind:tap="handleClick">
+            <view style="overflow-y: auto;height:{{productHeight}}rpx">
+              <block wx:for="{{tabs[index].list}}" wx:key="id">
+                <view class="productinfo">
+                  <view class="product-item" style="background-image: url({{item.imgurl}});">
+
+                    <view class="product-desc" style="height:390rpx">
+                      <view class="f17">{{item.title}}</view>
+                      <view class=".fw700">¥{{item.price}}/人</view>
+                      <view class="f13">{{item.desc}}</view>
+                    </view>
+                   
+                    <view class="order {{item.open?'':'gray'}}">
+                      <view >
+                        立即预约
+                      </view>
+                    </view>
+                  </view>
+                </view>
+              </block>
+
+            </view>
+          </view>
+        </block>
+      </mp-tabs>
+
+    </view>
+
+  </view>
+
+
+
+</view>

pages/index/index.wxss

@@ -0,0 +1,96 @@
+@charset "UTF-8";
+Page {
+  width: 100%;
+  height: 100%;
+  background-color: #F7F7F7;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  background-color: #F7F7F7;
+  /* 门店的标题 */
+}
+
+.container .shop {
+  background-color: #fff;
+  border-top: 1rpx solid #ECECEC;
+  margin-top: 20rpx;
+}
+
+.container .shop > .title {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 40rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+}
+
+.container .product .weui-tabs .weui-tabs-bar__wrp .weui-tabs-bar__content {
+  height: 100rpx;
+  line-height: 99rpx;
+  white-space: nowrap;
+  display: flex;
+  justify-content: space-around;
+  border-bottom: 1rpx solid #ECECEC;
+}
+
+.container .product .productinfo {
+  width: 95%;
+  height: 380rpx;
+  padding: 10rpx 0;
+  margin: 0 auto;
+}
+
+.container .product .productinfo .product-item {
+  position: relative;
+  width: 100%;
+  height: 380rpx;
+  border-radius: 20rpx;
+  background-size: cover;
+}
+
+.container .product .productinfo .product-item .product-desc {
+  height: 380rpx;
+  color: #fff;
+  position: absolute;
+  color: #fff;
+  top: 210rpx;
+  left: 20rpx;
+  letter-spacing: 2rpx;
+  font-weight: 100;
+}
+
+.container .product .productinfo .product-item .order {
+  position: absolute;
+  right: 40rpx;
+  bottom: 20rpx;
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+  background-color: #098932;
+  color: #fff;
+}
+
+.container .product .productinfo .product-item .order > view {
+  width: 70rpx;
+  height: 70rpx;
+  line-height: 35rpx;
+  letter-spacing: 5rpx;
+  text-align: center;
+  font-size: 14px;
+  margin: 18rpx;
+}
+
+.container .product .productinfo .product-item .gray {
+  background-color: #999;
+}
+
+.container .product .productinfo:first-child {
+  margin-top: 10rpx;
+}
+
+.fw700 {
+  font-weight: 500;
+  font-size: 18px;
+}

pages/order/order.js

@@ -0,0 +1,90 @@
+import {
+  drawById
+} from "../../utils/qrcode"
+
+// pages/order/order.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    order: {
+      orderId: 202020058792,
+      title: "葛优躺（北京躺）电影足疗",
+      price: 298,
+      orderTime: "12-12 17:00~18:00",
+
+    },
+    shop: {
+      name: "大华店",
+      address: "上海市徐汇区漕溪北路88号",
+      tel: "021-1234567"
+    }
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    drawById.call(wx, "qrCode", {
+      text: this.data.order.orderId, // 二维码内容
+    })
+  },
+
+  createQrcode: function () {
+    drawById.call(wx, "qrCode", {
+      text: "1233", // 二维码内容
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/order/order.json

@@ -0,0 +1,13 @@
+{
+  "disableScroll": true,
+  "usingComponents": {
+    "mp-icon": "weui-miniprogram/icon/icon",
+    "mp-tabs": "/componets/tabs/index"
+  },
+  "navigationBarBackgroundColor": "#343434",
+  "navigationBarTextStyle": "white",
+  "navigationBarTitleText": "订单详细",
+  "backgroundColor": "#fff",
+  "backgroundTextStyle": "light"
+
+}

pages/order/order.scss

@@ -0,0 +1,86 @@
+.container{
+    background-color: #F7F7F7;
+    .code-info{
+        width: 100%;
+        height: 390rpx;
+        background-color: #fff;
+        .code{
+            width: 320rpx;
+            height: 320rpx;
+            border: 1px solid #ebeef5;
+            margin: 20rpx auto;
+            .canvas-code{
+                background-color: #fff;
+                width: 280rpx;
+                height: 280rpx;
+                margin: 20rpx auto;
+            }
+            .code-text{
+                text-align: center;
+                margin: 30rpx auto;
+            }
+        }
+    }
+
+    .order{
+        margin-top: 20rpx;
+        display: flex;
+        height: 250rpx;
+        background-color: #fff;
+        justify-content: flex-start;
+        .order-img{
+            width: 200rpx;
+            height: 190rpx;
+            margin: 20rpx 20rpx;
+            padding-top: 25rpx;
+            image{
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .order-info{
+            flex: 1;
+            padding-top: 10rpx;
+            padding-left: 30rpx;
+            .order-id{
+                height: 50rpx;
+                text-align: right;
+            }
+            .order-title{
+                height: 60rpx;
+                
+            }
+            .order-price{
+                height: 80rpx;
+            }
+            .order-date{
+                height: 50rpx;
+            }
+        }
+    }
+
+    .shop-info{
+        height: 250rpx;
+        margin-top: 20rpx;
+        padding: 20rpx 30rpx;
+        background-color: #fff;
+        .shop{
+            height: 50rpx;
+            line-height: 50rpx;
+        }
+        .address,.tel{
+            height: 30rpx;
+            line-height: 30rpx;
+            margin: 20rpx;
+            position: relative;
+            image{
+                width: 40rpx;
+                height: 40rpx;
+                position: absolute;
+                right: 0;
+                bottom: 0;
+            }
+        }
+    }
+}
+

pages/order/order.wxml

@@ -0,0 +1,50 @@
+<!--pages/order/order.wxml-->
+<view class="container">
+    <view class="code-info" >
+        
+        <view class="code card">
+            <canvas class="canvas-code" type="2d" id="qrCode" />
+            <view class="code-text f13 c-707070">
+                进店请出示二维码进行核销
+            </view>
+        </view>
+    </view>
+    <view class="order card">
+        <view class="order-img">
+            <image class="" src="../../images/order-img01.jpg">
+
+            </image>
+        </view>
+        <view class="order-info">
+
+            <view class="order-id f13 c-707070">{{order.orderId}}</view>
+            <view class="order-title c-202020">
+                {{order.title}}
+
+            </view>
+            <view class="order-price f18">¥{{order.price}}</view>
+
+            <view class="order-date f13 c-707070">
+                <mp-icon icon="time" size="18" class="icon" color="#707070"></mp-icon>
+                {{order.orderTime}}
+            </view>
+
+        </view>
+    </view>
+    <view class="shop-info card">
+        <view class="shop f17">
+            {{ shop.name}}
+        </view>
+        <view class="address f14 c-707070 ">
+            <image src="../../images/icons/location.png"></image>
+            {{shop.address}}
+        </view>
+        <view class="f17 shop">
+            场馆电话
+        </view>
+        <view class="tel f14 c-707070 ">
+            <image src="../../images/icons/tel.png"></image>
+            {{shop.tel}}
+        </view>
+    </view>
+</view>

pages/order/order.wxss

@@ -0,0 +1,98 @@
+.container {
+  background-color: #F7F7F7;
+}
+
+.container .code-info {
+  width: 100%;
+  height: 390rpx;
+  background-color: #fff;
+}
+
+.container .code-info .code {
+  width: 320rpx;
+  height: 320rpx;
+  border: 1px solid #ebeef5;
+  margin: 20rpx auto;
+}
+
+.container .code-info .code .canvas-code {
+  background-color: #fff;
+  width: 280rpx;
+  height: 280rpx;
+  margin: 20rpx auto;
+}
+
+.container .code-info .code .code-text {
+  text-align: center;
+  margin: 30rpx auto;
+}
+
+.container .order {
+  margin-top: 20rpx;
+  display: flex;
+  height: 250rpx;
+  background-color: #fff;
+  justify-content: flex-start;
+}
+
+.container .order .order-img {
+  width: 200rpx;
+  height: 190rpx;
+  margin: 20rpx 20rpx;
+  padding-top: 25rpx;
+}
+
+.container .order .order-img image {
+  width: 100%;
+  height: 100%;
+}
+
+.container .order .order-info {
+  flex: 1;
+  padding-top: 10rpx;
+  padding-left: 30rpx;
+}
+
+.container .order .order-info .order-id {
+  height: 50rpx;
+  text-align: right;
+}
+
+.container .order .order-info .order-title {
+  height: 60rpx;
+}
+
+.container .order .order-info .order-price {
+  height: 80rpx;
+}
+
+.container .order .order-info .order-date {
+  height: 50rpx;
+}
+
+.container .shop-info {
+  height: 250rpx;
+  margin-top: 20rpx;
+  padding: 20rpx 30rpx;
+  background-color: #fff;
+}
+
+.container .shop-info .shop {
+  height: 50rpx;
+  line-height: 50rpx;
+}
+
+.container .shop-info .address, .container .shop-info .tel {
+  height: 30rpx;
+  line-height: 30rpx;
+  margin: 20rpx;
+  position: relative;
+}
+
+.container .shop-info .address image, .container .shop-info .tel image {
+  width: 40rpx;
+  height: 40rpx;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}

pages/person/person.js

@@ -0,0 +1,69 @@
+// pages/person/person.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    person:{
+      tel:"18822224444",
+      userName:"伊布"
+    }
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/person/person.json

@@ -0,0 +1,8 @@
+{
+  "usingComponents": {},
+  "navigationBarBackgroundColor": "#343434",
+  "navigationBarTextStyle": "white",
+  "navigationBarTitleText": "个人",
+  "backgroundColor": "#fff",
+  "backgroundTextStyle": "light"
+}

pages/person/person.scss

@@ -0,0 +1,69 @@
+.container {
+    .person {
+        display: flex;
+        height: 260rpx;
+        padding: 10rpx 30rpx;
+        justify-content: space-between;
+        align-items: center;
+        .person-info{
+            padding-left: 40rpx;
+            .user-name{
+                position: relative;
+                margin-top: 10rpx;
+                image{
+                    width: 35rpx;
+                    height: 35rpx;
+                    position: absolute;
+                    left: 88rpx;
+                    top: 12rpx;
+                }
+            }
+            .tel{
+                margin-top: 20rpx;
+            }
+        }
+        .head-img{
+            width: 200rpx;
+            height: 200rpx;
+            border-radius: 50%;
+            image{
+                width: 200rpx;
+                height: 200rpx;
+            }
+        }
+    }
+    .order{
+        display: flex;
+        width: 100%;
+        height: 120rpx;
+        background-color: #fff;
+        border-bottom: 1px solid #ebeef5;
+        justify-content: flex-start;
+        .icons{
+            width: 40rpx;
+            height: 40rpx;
+            margin: 40rpx 30rpx;
+        }
+        .order-text{
+            line-height: 120rpx;
+            letter-spacing: 3rpx;
+        }
+    }
+    .assess{
+        display: flex;
+        width: 100%;
+        height: 120rpx;
+        background-color: #fff;
+        border-bottom: 1px solid #ebeef5;
+        justify-content: flex-start;
+        .icons{
+            width: 55rpx;
+            height: 55rpx;
+            margin: 32rpx 23rpx;
+        }
+        .assess-text{
+            line-height: 120rpx;
+            letter-spacing: 3rpx;
+        }
+    }
+}

pages/person/person.wxml

@@ -0,0 +1,28 @@
+<!--pages/person/person.wxml-->
+<view class="container">
+    <view class="person card">
+        <view class="person-info">
+            <view class="user-name f18 c-202020">{{person.userName}}
+                <image class="" src="../../images/icons/next.png" >
+                    
+                </image>
+            </view>
+            <view class="tel c-707070 fw300">{{person.tel}}</view>
+        </view>
+        <view class="head-img">
+            <image class="" src="../../images/headImg.jpg">
+
+            </image>
+        </view>
+    </view>
+    <view class="order">
+        <image class="icons" src="../../images/icons/order.png">
+
+        </image>
+        <view class="order-text">我的订单</view>
+    </view>
+    <navigator class="assess">
+        <image class="icons" src="../../images/icons/assess.png"></image>
+        <view class="assess-text">我的点评</view>
+    </navigator>
+</view>

pages/person/person.wxss

@@ -0,0 +1,79 @@
+.container .person {
+  display: flex;
+  height: 260rpx;
+  padding: 10rpx 30rpx;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.container .person .person-info {
+  padding-left: 40rpx;
+}
+
+.container .person .person-info .user-name {
+  position: relative;
+  margin-top: 10rpx;
+}
+
+.container .person .person-info .user-name image {
+  width: 35rpx;
+  height: 35rpx;
+  position: absolute;
+  left: 88rpx;
+  top: 12rpx;
+}
+
+.container .person .person-info .tel {
+  margin-top: 20rpx;
+}
+
+.container .person .head-img {
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 50%;
+}
+
+.container .person .head-img image {
+  width: 200rpx;
+  height: 200rpx;
+}
+
+.container .order {
+  display: flex;
+  width: 100%;
+  height: 120rpx;
+  background-color: #fff;
+  border-bottom: 1px solid #ebeef5;
+  justify-content: flex-start;
+}
+
+.container .order .icons {
+  width: 40rpx;
+  height: 40rpx;
+  margin: 40rpx 30rpx;
+}
+
+.container .order .order-text {
+  line-height: 120rpx;
+  letter-spacing: 3rpx;
+}
+
+.container .assess {
+  display: flex;
+  width: 100%;
+  height: 120rpx;
+  background-color: #fff;
+  border-bottom: 1px solid #ebeef5;
+  justify-content: flex-start;
+}
+
+.container .assess .icons {
+  width: 55rpx;
+  height: 55rpx;
+  margin: 32rpx 23rpx;
+}
+
+.container .assess .assess-text {
+  line-height: 120rpx;
+  letter-spacing: 3rpx;
+}

pages/personinfo/personinfo.js

@@ -0,0 +1,66 @@
+// pages/personinfo/personinfo.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/personinfo/personinfo.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/personinfo/personinfo.wxml

@@ -0,0 +1,2 @@
+<!--pages/personinfo/personinfo.wxml-->
+<text>pages/personinfo/personinfo.wxml</text>

pages/personinfo/personinfo.wxss

@@ -0,0 +1 @@
+/* pages/personinfo/personinfo.wxss */

pages/personorder/personorder.js

@@ -0,0 +1,171 @@
+// pages/personorder/personorder.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    activeTab: 0,
+    orderHeight: 0,
+    tabs:[]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: async function () {
+
+    var tabs = await this.getOrderList();
+    this.setData({
+      tabs
+    });
+    this.getOrderHeight()
+  },
+  //动态生成产品的父盒子高度
+  getOrderHeight: function () {
+    var h = wx.getSystemInfoSync().windowHeight * (750 / wx.getSystemInfoSync().windowWidth);
+    var orderHeight = h - 95;
+    this.setData({
+      orderHeight
+    })
+  },
+
+  getOrderList: async function () {
+    const self = this
+    var titles = ["全部", "代消费", "待评价", "已完成"];
+    const tabs = [];
+    // 订单的三个状态，0是未付款，是未完成订单，1是未评价，待评价订单，2是已评价的完成订单
+    var list = [{
+        id: "1",
+        orderId: "20200625118",
+        orderStatus:1,
+        title: "中式古法推拿",
+        price: "1299",
+        orderTime: "8-26 16:26",
+        shopAddress: "上海市普陀区中江路3600号",
+        distance: ">6km",
+        imgurl: "../../images/order-img01.jpg"
+      },
+      {
+        id: "2",
+        orderId: "20200625118",
+        orderStatus:0,
+        title: "中式古法推拿",
+        price: "1299",
+        orderTime: "8-26 16:26",
+        shopAddress: "上海市普陀区中江路3600号",
+        distance: ">6km",
+        imgurl: "../../images/order-img02.jpg"
+      },
+      {
+        id: "3",
+        orderId: "20200625118",
+        orderStatus:2,
+        title: "中式古法推拿",
+        price: "1299",
+        orderTime: "8-26 16:26",
+        shopAddress: "上海市普陀区中江路3600号",
+        distance: ">6km",
+        imgurl: "../../images/order-img01.jpg"
+      },
+      {
+        id: "4",
+        orderId: "20200625118",
+        orderStatus:1,
+        title: "中式古法推拿",
+        price: "1299",
+        orderTime: "8-26 16:26",
+        shopAddress: "上海市普陀区中江路3600号",
+        distance: ">6km",
+        imgurl: "../../images/order-img02.jpg"
+      }
+    ];
+
+    for (let i = 0; i < titles.length; i++) {
+      let title = titles[i];
+      tabs.push({
+        title,
+        list
+      })
+    }
+    tabs[2].list = [{
+      id: "1",
+      orderId: "20200625118",
+      title: "中式古法推拿",
+      price: "1299",
+      orderTime: "8-26 16:26",
+      shopAddress: "上海市普陀区中江路3600号",
+      distance: ">6km",
+      imgurl: "../../images/order-img02.jpg"
+    }];
+    return tabs;
+
+  },
+  onTabClick(e) {
+    const index = e.detail.index
+    this.setData({
+      activeTab: index
+    })
+  },
+
+
+  onChange(e) {
+    const index = e.detail.index
+    this.setData({
+      activeTab: index
+    })
+  },
+  handleClick(e) {
+    wx.navigateTo({
+      url: './webview',
+    })
+  },
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/personorder/personorder.json

@@ -0,0 +1,13 @@
+{
+  "disableScroll": true,
+  "usingComponents": {
+    "mp-icon": "weui-miniprogram/icon/icon",
+    "mp-tabs": "/componets/tabs/index"
+  },
+  "navigationBarBackgroundColor": "#343434",
+  "navigationBarTextStyle": "white",
+  "navigationBarTitleText": "订单",
+  "backgroundColor": "#fff",
+  "backgroundTextStyle": "light"
+
+}

pages/personorder/personorder.scss

@@ -0,0 +1,121 @@
+.container {
+
+    .tab-content {
+        height: 95rpx;
+        line-height: 95rpx;
+    }
+
+    .weui-tabs {
+        .weui-tabs-bar__wrp {
+            .weui-tabs-bar__content {
+                height: 95rpx;
+                line-height: 94rpx;
+                white-space: nowrap;
+                display: flex;
+                justify-content: space-around;
+                border-bottom: 1rpx solid #ECECEC;
+
+                .weui-tabs-bar__item {
+                    width: 100rpx;
+
+                    .weui-tabs-bar__title {
+                        width: 100rpx;
+                        text-align: center;
+                        border-bottom-width: 6rpx;
+                    }
+                }
+
+            }
+        }
+    }
+
+    .orders {
+        margin-top: 20rpx;
+        .orderinfo {
+            margin: 0 20rpx 20rpx;
+          
+
+            .order-item {
+                display: flex;
+                justify-content: flex-start;
+                position: relative;
+                border-bottom: 1px solid #ebeef5;
+                .order-img {
+                    width: 210rpx;
+                    height: 200rpx;
+                    margin: 15rpx 15rpx;
+
+                    image {
+                        width: 210rpx;
+                        height: 200rpx;
+                    }
+                }
+
+                .order-desc {
+                    flex: 1;
+                    margin: 15rpx 15rpx;
+                    .order-id {
+                        height: 40rpx;
+                        line-height: 40rpx;
+                        text-align: right;
+                    }
+
+                    .order-title {
+                        height: 40rpx;
+                        line-height: 40rpx;
+                    }
+
+                    .order-price {
+                        height: 80rpx;
+                        line-height: 80rpx;
+                    }
+
+                    .order-date{
+                        height: 30rpx;
+                        line-height: 30rpx;
+                        margin-bottom: 10rpx;
+                        position: relative;
+                        padding-left: 40rpx;
+                    }
+                    .order-shop-address {
+                        height: 30rpx;
+                        line-height: 30rpx;
+                        display: flex;
+                        justify-content: space-between;
+                        position: relative;
+                        padding-left: 35rpx;
+                    }
+
+                }
+
+            }
+
+            .operate-btn{
+                display: flex;
+                justify-content: flex-end;
+                height: 100rpx;
+                .btn{
+                    width: 150rpx;
+                    height: 60rpx;
+                    line-height: 60rpx;
+                    text-align: center;
+                    margin: 20rpx 25rpx;
+                    border-radius: 10rpx;
+                }
+                .buy-again{
+                    border: 1rpx solid #c7c7c7;
+                }
+                .comment,.pay{
+                    background-color: #DF3361;
+                    color: #fff;
+                }
+            }
+        }
+    }
+}
+
+.icon{
+    position: absolute;
+    top: -2rpx;
+    left: 0;
+}

pages/personorder/personorder.wxml

@@ -0,0 +1,55 @@
+<!--pages/personorder/personorder.wxml-->
+<view class="container">
+    <mp-tabs tabs="{{tabs}}" activeTab="{{activeTab}}" swiperClass="weui-tabs-swiper" bindtabclick="onTabClick"
+        bindchange="onChange" activeClass="tab-bar-title__selected" tabActiveTextColor="#E32490" swiperHeight="{{(tabs[activeTab].list.length)*420}}">
+        <block wx:for="{{tabs}}" wx:key="title">
+
+            <view class="tab-content" data-set="{{item}}" slot="tab-content-{{index}}" bind:tap="handleClick">
+                <view style="overflow-y: auto;height:{{orderHeight}}rpx" class="orders">
+                    <block wx:for="{{tabs[index].list}}" wx:key="id">
+                        <view class="orderinfo card">
+                            <view class="order-item">
+                                <view class="order-img">
+                                    <image class="" src="{{item.imgurl}}">
+
+                                    </image>
+                                </view>
+                                <view class="order-desc">
+                                    <view class="order-id f13 c-707070">{{item.orderId}}</view>
+                                    <view class="order-title c-202020">
+                                        <view class="title">{{item.title}}</view>
+
+                                    </view>
+                                    <view class="order-price f18">¥{{item.price}}</view>
+
+                                    <view class="order-date f13 c-707070">
+                                        <mp-icon icon="time" size="18" class="icon" color="#707070"></mp-icon>
+                                        {{item.orderTime}}
+                                    </view>
+                                    <view class="order-shop-address">
+                                        <view class="address f13 c-707070">
+                                            <mp-icon icon="location" size="18" class="icon" type="filled"
+                                                color="#707070"></mp-icon>
+                                            {{item.shopAddress}}
+                                        </view>
+                                        <view class="distance f13 ">{{item.distance}}</view>
+                                    </view>
+
+
+
+                                </view>
+                            </view>
+                            <view class="operate-btn">
+                                <view class="buy-again btn f14" wx:if="{{item.orderStatus !==0}}">再来一单</view>
+                                <view class="comment btn f14" wx:if="{{item.orderStatus==1}}">评价</view>
+                                <view class="pay btn f14" wx:if="{{item.orderStatus==0}}">付款</view>
+                            </view>
+                        </view>
+                    </block>
+
+                </view>
+            </view>
+        </block>
+    </mp-tabs>
+
+</view>

pages/personorder/personorder.wxss

@@ -0,0 +1,117 @@
+.container .tab-content {
+  height: 95rpx;
+  line-height: 95rpx;
+}
+
+.container .weui-tabs .weui-tabs-bar__wrp .weui-tabs-bar__content {
+  height: 95rpx;
+  line-height: 94rpx;
+  white-space: nowrap;
+  display: flex;
+  justify-content: space-around;
+  border-bottom: 1rpx solid #ECECEC;
+}
+
+.container .weui-tabs .weui-tabs-bar__wrp .weui-tabs-bar__content .weui-tabs-bar__item {
+  width: 100rpx;
+}
+
+.container .weui-tabs .weui-tabs-bar__wrp .weui-tabs-bar__content .weui-tabs-bar__item .weui-tabs-bar__title {
+  width: 100rpx;
+  text-align: center;
+  border-bottom-width: 6rpx;
+}
+
+.container .orders {
+  margin-top: 20rpx;
+}
+
+.container .orders .orderinfo {
+  margin: 0 20rpx 20rpx;
+}
+
+.container .orders .orderinfo .order-item {
+  display: flex;
+  justify-content: flex-start;
+  position: relative;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.container .orders .orderinfo .order-item .order-img {
+  width: 210rpx;
+  height: 200rpx;
+  margin: 15rpx 15rpx;
+}
+
+.container .orders .orderinfo .order-item .order-img image {
+  width: 210rpx;
+  height: 200rpx;
+}
+
+.container .orders .orderinfo .order-item .order-desc {
+  flex: 1;
+  margin: 15rpx 15rpx;
+}
+
+.container .orders .orderinfo .order-item .order-desc .order-id {
+  height: 40rpx;
+  line-height: 40rpx;
+  text-align: right;
+}
+
+.container .orders .orderinfo .order-item .order-desc .order-title {
+  height: 40rpx;
+  line-height: 40rpx;
+}
+
+.container .orders .orderinfo .order-item .order-desc .order-price {
+  height: 80rpx;
+  line-height: 80rpx;
+}
+
+.container .orders .orderinfo .order-item .order-desc .order-date {
+  height: 30rpx;
+  line-height: 30rpx;
+  margin-bottom: 10rpx;
+  position: relative;
+  padding-left: 40rpx;
+}
+
+.container .orders .orderinfo .order-item .order-desc .order-shop-address {
+  height: 30rpx;
+  line-height: 30rpx;
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+  padding-left: 35rpx;
+}
+
+.container .orders .orderinfo .operate-btn {
+  display: flex;
+  justify-content: flex-end;
+  height: 100rpx;
+}
+
+.container .orders .orderinfo .operate-btn .btn {
+  width: 150rpx;
+  height: 60rpx;
+  line-height: 60rpx;
+  text-align: center;
+  margin: 20rpx 25rpx;
+  border-radius: 10rpx;
+}
+
+.container .orders .orderinfo .operate-btn .buy-again {
+  border: 1rpx solid #c7c7c7;
+}
+
+.container .orders .orderinfo .operate-btn .comment, .container .orders .orderinfo .operate-btn .pay {
+  background-color: #DF3361;
+  color: #fff;
+}
+
+.icon {
+  position: absolute;
+  top: -2rpx;
+  left: 0;
+}

pages/product/product.js

@@ -0,0 +1,186 @@
+// pages/productinfo/productinfo.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    productinfo:{
+      title:"葛优躺（北京躺）电影足疗",
+      price:"666",
+      commentsList:[]
+    }
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    var list = [{
+      id: 1,
+      headImg: "../../images/headImg.jpg",
+      product: "葛优躺（北京躺）电影足疗",
+      assessDate: "2020-02-02",
+      stars: 5,
+      comments: {
+          content: "3号技师特别好~~~赞一个，下次还来。",
+          imgs: [{
+                  imgurl: "../../images/commentsImg01.jpg"
+              },
+              {
+                  imgurl: "../../images/commentsImg02.jpg"
+              },
+              {
+                  imgurl: "../../images/commentsImg03.jpg"
+              },
+              {
+                  imgurl: "../../images/commentsImg03.jpg"
+              },
+              {
+                  imgurl: "../../images/commentsImg02.jpg"
+              },
+              {
+                  imgurl: "../../images/commentsImg01.jpg"
+              },
+              {
+                  imgurl: "../../images/commentsImg02.jpg"
+              },
+              {
+                  imgurl: "../../images/commentsImg01.jpg"
+              },
+              {
+                  imgurl: "../../images/commentsImg03.jpg"
+              },
+          ]
+      }
+  }, {
+      id: 2,
+      headImg: "../../images/headImg.jpg",
+      product: "葛优躺（北京躺）电影足疗",
+      assessDate: "2020-02-02",
+      stars: 5,
+      comments: {
+          content: "3号技师特别好~~~赞一个，下次还来。",
+          imgs: [{
+                  imgurl: "../../images/commentsImg01.jpg"
+              },
+
+          ]
+      }
+  }, {
+      id: 3,
+      headImg: "../../images/headImg.jpg",
+      product: "葛优躺（北京躺）电影足疗",
+      assessDate: "2020-02-02",
+      stars: 4,
+      comments: {
+          content: "3号技师特别好~~~赞一个，下次还来。",
+          imgs: []
+      }
+  }, {
+      id: 4,
+      headImg: "../../images/headImg.jpg",
+      product: "葛优躺（北京躺）电影足疗",
+      assessDate: "2020-02-02",
+      stars: 5,
+      comments: {
+          content: "3号技师特别好~~~赞一个，下次还来。",
+          imgs: [{
+                  imgurl: "../../images/commentsImg01.jpg"
+              },
+              {
+                  imgurl: "../../images/commentsImg02.jpg"
+              },
+              {
+                  imgurl: "../../images/commentsImg01.jpg"
+              },
+              {
+                  imgurl: "../../images/commentsImg03.jpg"
+              },
+
+          ]
+      }
+  }, {
+      id: 5,
+      headImg: "../../images/headImg.jpg",
+      product: "葛优躺（北京躺）电影足疗",
+      assessDate: "2020-02-02",
+      stars: 5,
+      comments: {
+          content: "3号技师特别好~~~赞一个，下次还来。",
+          imgs: [{
+                  imgurl: "../../images/commentsImg01.jpg"
+              },
+              {
+                  imgurl: "../../images/commentsImg02.jpg"
+              },
+              {
+                  imgurl: "../../images/commentsImg03.jpg"
+              },
+              {
+                  imgurl: "../../images/commentsImg02.jpg"
+              },
+              {
+                  imgurl: "../../images/commentsImg01.jpg"
+              },
+
+          ]
+      }
+  }];
+
+  this.setData({
+      // id: options.id,
+      commentsList: list,
+  })
+ 
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/product/product.json

@@ -0,0 +1,11 @@
+{
+  "usingComponents": {
+    "comments":"../../componets/comments/index",
+    "mp-icon": "weui-miniprogram/icon/icon"
+   },
+   "navigationBarBackgroundColor": "#343434",
+   "navigationBarTextStyle": "white",
+   "navigationBarTitleText": "商品",
+   "backgroundColor": "#fff",
+   "backgroundTextStyle": "light"
+}

pages/product/product.scss

@@ -0,0 +1,85 @@
+page {
+    overflow-y: auto;
+    width: 100%;
+    overflow-x: hidden;
+
+}
+
+.container {
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    .product-img {
+        width: 100%;
+        padding-bottom: 10rpx;
+        border-bottom: 1px solid #ebeef5;
+        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+
+        image {
+            width: 100%;
+            height: 500rpx;
+        }
+
+        >view {
+            margin: 10rpx 0 0 20rpx;
+        }
+    }
+
+    .product-desc {
+        margin-top: 10rpx;
+        width: 100%;
+        height: 1000rpx;
+
+        image {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .comments {
+        width: 100%;
+        margin-top: 10rpx;
+
+        .comment-title {
+            display: flex;
+            justify-content: space-between;
+            padding: 15rpx 25rpx;
+            border-bottom: 1px solid #ebeef5;
+        }
+
+        .all-comments {
+            padding-top: 5rpx;
+            padding-right: 30rpx;
+            position: relative;
+
+            .comments-icon {
+                position: absolute;
+                right: 0;
+                top: 3rpx;
+            }
+        }
+    }
+
+    .appointment {
+        width: 90%;
+        height: 100rpx;
+        margin: 10rpx auto;
+        background-color: #DF3361;
+
+        color: #fff;
+
+        .btn {
+            font-size: 17px;
+            line-height: 100rpx;
+            text-align: center;
+            letter-spacing: 2rpx;
+        }
+    }
+
+    .appointment-hover {
+        background-color: #fff;
+        border: 2rpx solid #DF3361;
+        color: rgb(54, 54, 54);
+    }
+}

pages/product/product.wxml

@@ -0,0 +1,37 @@
+<!--pages/product/product.wxml-->
+<view class="container">
+    <!-- 产品图片 -->
+    <view class="product-img ">
+        <image src="../../images/product01.jpg"></image>
+        <view class="title ">{{productinfo.title}}</view>
+        <view class="price c-e40360 fw300">¥{{productinfo.price}}/人</view>
+    </view>
+    <!-- 产品描述 -->
+    <view class="product-desc card">
+        <image class="" src="../../images/richText.png">
+        </image>
+    </view>
+    <!-- 评论 -->
+    <view class="comments card">
+        <view class="comment-title f17 fw300">
+            <view class="title">
+
+                网友点评
+            </view>
+            <navigator class="all-comments f15 .c-707070" target="" url="../comments/comments?title=全部评论"
+                hover-class="navigator-hover" open-type="navigate">
+                全部{{commentsList.length}}条
+                <mp-icon icon="arrow" size="12" class="comments-icon" color="#707070"></mp-icon>
+            </navigator>
+        </view>
+        <comments commentsList="{{[commentsList[0],commentsList[1],commentsList[1]]}}"></comments>
+
+    </view>
+    <!-- 预约 -->
+    <!-- <navigator class="appointment card" url="../appointment/appointment?price={{productinfo.price}}" hover-class="appointment-hover" open-type="navigate"> -->
+    <navigator class="appointment card" url="../appointment/appointment?price=268" hover-class="appointment-hover" open-type="navigate">
+        <view class="btn">
+            立即预约
+        </view>
+    </navigator>
+</view>

pages/product/product.wxss

@@ -0,0 +1,83 @@
+page {
+  overflow-y: auto;
+  width: 100%;
+  overflow-x: hidden;
+}
+
+.container {
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.container .product-img {
+  width: 100%;
+  padding-bottom: 10rpx;
+  border-bottom: 1px solid #ebeef5;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.container .product-img image {
+  width: 100%;
+  height: 500rpx;
+}
+
+.container .product-img > view {
+  margin: 10rpx 0 0 20rpx;
+}
+
+.container .product-desc {
+  margin-top: 10rpx;
+  width: 100%;
+  height: 1000rpx;
+}
+
+.container .product-desc image {
+  width: 100%;
+  height: 100%;
+}
+
+.container .comments {
+  width: 100%;
+  margin-top: 10rpx;
+}
+
+.container .comments .comment-title {
+  display: flex;
+  justify-content: space-between;
+  padding: 15rpx 25rpx;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.container .comments .all-comments {
+  padding-top: 5rpx;
+  padding-right: 30rpx;
+  position: relative;
+}
+
+.container .comments .all-comments .comments-icon {
+  position: absolute;
+  right: 0;
+  top: 3rpx;
+}
+
+.container .appointment {
+  width: 90%;
+  height: 100rpx;
+  margin: 10rpx auto;
+  background-color: #DF3361;
+  color: #fff;
+}
+
+.container .appointment .btn {
+  font-size: 17px;
+  line-height: 100rpx;
+  text-align: center;
+  letter-spacing: 2rpx;
+}
+
+.container .appointment-hover {
+  background-color: #fff;
+  border: 2rpx solid #DF3361;
+  color: #363636;
+}

pages/shop/shop.js

@@ -0,0 +1,198 @@
+// pages/shop/shop.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    shopList:[
+      {
+        id:1,
+        imgurl:"../../images/shop.jpg",
+        shopname:"大华店",
+        stars:4,
+        mark:true,
+        new:true,
+        discount:false,
+        marktext:"新店促销",
+        shop_address:"上海市宝山区大华虎城A座10L",
+        shop_distance:"6.5KM"
+      }, {
+        id:2,
+        imgurl:"../../images/shop.jpg",
+        shopname:"大华店",
+        stars:5,
+        mark:true,
+        new:false,
+        discount:true,
+        marktext:"优惠打折",
+        shop_address:"上海市宝山区大华虎城A座10L",
+        shop_distance:"6.5KM"
+      }, {
+        id:3,
+        imgurl:"../../images/shop.jpg",
+        shopname:"大华店",
+        stars:4,
+        mark:false,
+        new:false,
+        discount:false,
+        marktext:"新店促销",
+        shop_address:"上海市宝山区大华虎城A座10L",
+        shop_distance:"6.5KM"
+      },
+      {
+        id:4,
+        imgurl:"../../images/shop.jpg",
+        shopname:"大华店",
+        stars:4,
+        mark:false,
+        new:false,
+        discount:false,
+        marktext:"新店促销",
+        shop_address:"上海市宝山区大华虎城A座10L",
+        shop_distance:"6.5KM"
+      },
+      {
+        id:5,
+        imgurl:"../../images/shop.jpg",
+        shopname:"大华店",
+        stars:4,
+        mark:false,
+        new:false,
+        discount:false,
+        marktext:"新店促销",
+        shop_address:"上海市宝山区大华虎城A座10L",
+        shop_distance:"6.5KM"
+      },
+      {
+        id:6,
+        imgurl:"../../images/shop.jpg",
+        shopname:"大华店",
+        stars:4,
+        mark:false,
+        new:false,
+        discount:false,
+        marktext:"新店促销",
+        shop_address:"上海市宝山区大华虎城A座10L",
+        shop_distance:"6.5KM"
+      },
+      {
+        id:7,
+        imgurl:"../../images/shop.jpg",
+        shopname:"大华店",
+        stars:4,
+        mark:false,
+        new:false,
+        discount:false,
+        marktext:"新店促销",
+        shop_address:"上海市宝山区大华虎城A座10L",
+        shop_distance:"6.5KM"
+      },
+      {
+        id:8,
+        imgurl:"../../images/shop.jpg",
+        shopname:"大华店",
+        stars:4,
+        mark:false,
+        new:false,
+        discount:false,
+        marktext:"新店促销",
+        shop_address:"上海市宝山区大华虎城A座10L",
+        shop_distance:"6.5KM"
+      },
+      {
+        id:9,
+        imgurl:"../../images/shop.jpg",
+        shopname:"大华店",
+        stars:4,
+        mark:false,
+        new:false,
+        discount:false,
+        marktext:"新店促销",
+        shop_address:"上海市宝山区大华虎城A座10L",
+        shop_distance:"6.5KM"
+      },
+      {
+        id:10,
+        imgurl:"../../images/shop.jpg",
+        shopname:"大华店",
+        stars:4,
+        mark:false,
+        new:false,
+        discount:false,
+        marktext:"新店促销",
+        shop_address:"上海市宝山区大华虎城A座10L",
+        shop_distance:"6.5KM"
+      },
+      {
+        id:11,
+        imgurl:"../../images/shop.jpg",
+        shopname:"大华店",
+        stars:4,
+        mark:false,
+        new:false,
+        discount:false,
+        marktext:"新店促销",
+        shop_address:"上海市宝山区大华虎城A座10L",
+        shop_distance:"6.5KM"
+      }
+
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/shop/shop.json

@@ -0,0 +1,10 @@
+{
+  "usingComponents": {
+    "shop":"/componets/shop/index"
+  },
+  "navigationBarBackgroundColor": "#343434",
+  "navigationBarTextStyle": "white",
+  "navigationBarTitleText": "门店",
+  "backgroundColor": "#fff",
+  "backgroundTextStyle": "light"
+}

pages/shop/shop.wxml

@@ -0,0 +1,4 @@
+<!--pages/shop/shop.wxml-->
+<view class="container">
+    <shop shops="{{shopList}}"></shop>
+</view>

pages/shop/shop.wxss

@@ -0,0 +1,6 @@
+/* pages/shop/shop.wxss */
+.container{
+    background-color: #F7F7F7;
+    margin-top: 20rpx;
+}
+

pages/shopinfo/shopinfo.js

@@ -0,0 +1,248 @@
+// pages/shopinfo/shopinfo.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        id: "",
+        shopInfo: {
+            shopImg: "../../images/shopImg.jpg",
+            shopName: "大华店",
+            stars: 5,
+            shopAddress: "上海市宝山区域大华虎城A座10L",
+            shopTel: "0556-7158735",
+            products: [{
+                    imgurl: "../../images/p1.jpg",
+                    title: "电影足疗60分钟",
+                    oldPrice: "298",
+                    newPrice: "198",
+                    discount: "6.7"
+                },
+                {
+                    imgurl: "../../images/p2.jpg",
+                    title: "中式古法推拿套餐",
+                    oldPrice: "298",
+                    newPrice: "258",
+                    discount: "8.7"
+                }, {
+                    imgurl: "../../images/p3.jpg",
+                    title: "小时代电影足疗90分钟",
+                    oldPrice: "368",
+                    newPrice: "258",
+                    discount: "7.0"
+                }, {
+                    imgurl: "../../images/p4.jpg",
+                    title: "小时代PLUS电影足疗120分钟",
+                    oldPrice: "498",
+                    newPrice: "338",
+                    discount: "6.8"
+                }, {
+                    imgurl: "../../images/p5.jpg",
+                    title: "采耳加钟",
+                    oldPrice: "298",
+                    newPrice: "198",
+                    discount: "6.7"
+                }, {
+                    imgurl: "../../images/p6.jpg",
+                    title: "第六感精油SPA90分钟",
+                    oldPrice: "598",
+                    newPrice: "398",
+                    discount: "6.7"
+                }, {
+                    imgurl: "../../images/p7.jpg",
+                    title: "温阳臀疗/肾疗",
+                    oldPrice: "880",
+                    newPrice: "668",
+                    discount: "7.6"
+                }, {
+                    imgurl: "../../images/p8.jpg",
+                    title: "电全身淋巴排毒（含腹股沟）",
+                    oldPrice: "880",
+                    newPrice: "768",
+                    discount: "8.8"
+                }, {
+                    imgurl: "../../images/p9.jpg",
+                    title: "神秘多巴胺组合套餐",
+                    oldPrice: "1688",
+                    newPrice: "1288",
+                    discount: "7.7"
+                },
+            ],
+            shopDesc: "本店所有商品照片为专业摄影师拍摄，后期起精心修制及色彩调整，尽量与实际商品保持一致，但由于拍摄时的用光、角度、显示器色彩偏差、个人对颜色的认知等方面的差异，导致实物可能会与照片存在一些色差，最终颜色以实际商品为准。"
+        },
+        commentsList: [],
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad: function (options) {
+        var list = [{
+            id: 1,
+            headImg: "../../images/headImg.jpg",
+            product: "葛优躺（北京躺）电影足疗",
+            assessDate: "2020-02-02",
+            stars: 5,
+            comments: {
+                content: "3号技师特别好~~~赞一个，下次还来。",
+                imgs: [{
+                        imgurl: "../../images/commentsImg01.jpg"
+                    },
+                    {
+                        imgurl: "../../images/commentsImg02.jpg"
+                    },
+                    {
+                        imgurl: "../../images/commentsImg03.jpg"
+                    },
+                    {
+                        imgurl: "../../images/commentsImg03.jpg"
+                    },
+                    {
+                        imgurl: "../../images/commentsImg02.jpg"
+                    },
+                    {
+                        imgurl: "../../images/commentsImg01.jpg"
+                    },
+                    {
+                        imgurl: "../../images/commentsImg02.jpg"
+                    },
+                    {
+                        imgurl: "../../images/commentsImg01.jpg"
+                    },
+                    {
+                        imgurl: "../../images/commentsImg03.jpg"
+                    },
+                ]
+            }
+        }, {
+            id: 2,
+            headImg: "../../images/headImg.jpg",
+            product: "葛优躺（北京躺）电影足疗",
+            assessDate: "2020-02-02",
+            stars: 5,
+            comments: {
+                content: "3号技师特别好~~~赞一个，下次还来。",
+                imgs: [{
+                        imgurl: "../../images/commentsImg01.jpg"
+                    },
+
+                ]
+            }
+        }, {
+            id: 3,
+            headImg: "../../images/headImg.jpg",
+            product: "葛优躺（北京躺）电影足疗",
+            assessDate: "2020-02-02",
+            stars: 4,
+            comments: {
+                content: "3号技师特别好~~~赞一个，下次还来。",
+                imgs: []
+            }
+        }, {
+            id: 4,
+            headImg: "../../images/headImg.jpg",
+            product: "葛优躺（北京躺）电影足疗",
+            assessDate: "2020-02-02",
+            stars: 5,
+            comments: {
+                content: "3号技师特别好~~~赞一个，下次还来。",
+                imgs: [{
+                        imgurl: "../../images/commentsImg01.jpg"
+                    },
+                    {
+                        imgurl: "../../images/commentsImg02.jpg"
+                    },
+                    {
+                        imgurl: "../../images/commentsImg01.jpg"
+                    },
+                    {
+                        imgurl: "../../images/commentsImg03.jpg"
+                    },
+
+                ]
+            }
+        }, {
+            id: 5,
+            headImg: "../../images/headImg.jpg",
+            product: "葛优躺（北京躺）电影足疗",
+            assessDate: "2020-02-02",
+            stars: 5,
+            comments: {
+                content: "3号技师特别好~~~赞一个，下次还来。",
+                imgs: [{
+                        imgurl: "../../images/commentsImg01.jpg"
+                    },
+                    {
+                        imgurl: "../../images/commentsImg02.jpg"
+                    },
+                    {
+                        imgurl: "../../images/commentsImg03.jpg"
+                    },
+                    {
+                        imgurl: "../../images/commentsImg02.jpg"
+                    },
+                    {
+                        imgurl: "../../images/commentsImg01.jpg"
+                    },
+
+                ]
+            }
+        }];
+
+        this.setData({
+            id: options.id,
+            commentsList: list,
+        })
+       
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload: function () {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh: function () {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function () {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage: function () {
+
+    }
+})

pages/shopinfo/shopinfo.json

@@ -0,0 +1,13 @@
+{
+  "usingComponents": {
+   "comments":"../../componets/comments/index",
+   "mp-icon": "weui-miniprogram/icon/icon"
+  },
+  "navigationBarBackgroundColor": "#343434",
+  "navigationBarTextStyle": "white",
+  "navigationBarTitleText": "门店",
+  "backgroundColor": "#fff",
+  "backgroundTextStyle": "light"
+
+}
+ 

pages/shopinfo/shopinfo.scss

@@ -0,0 +1,149 @@
+.container {
+
+    // background-color: #F7F7F7;
+    .shop-img {
+        width: 100%;
+        height: 340rpx;
+
+        image {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .shop-info {
+        height: 290rpx;
+        background-color: #fff;
+        display: flex;
+        flex-direction: column;
+        padding-left: 25rpx;
+        padding-top: 15rpx;
+
+        >view {
+            flex: 1;
+            position: relative;
+        }
+
+        .stars {
+            margin-right: 25rpx;
+            border-bottom: 1px solid #ebeef5;
+        }
+
+        .address {
+            display: flex;
+            justify-content: space-between;
+
+            .way {
+                position: relative;
+                padding-right: 10rpx;
+
+                .checkway {
+
+                    margin-right: 40rpx;
+                }
+
+                .discover {
+                    position: absolute;
+                    top: -2rpx;
+                    right: 3rpx;
+                }
+            }
+        }
+        .tel{
+            margin-top: 20rpx;
+        }
+      
+
+
+    }
+
+    .products {
+        margin-top: 10rpx;
+
+        .product {
+            display: flex;
+            justify-content: flex-start;
+            padding: 20rpx 40rpx;
+
+            .product-img {
+                image {
+                    width: 150rpx;
+                    height: 150rpx;
+                }
+            }
+
+            .product-info {
+                padding-left: 20rpx;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+
+                .price {
+                    display: flex;
+                    justify-content: flex-start;
+                    align-items: center;
+
+                    .new-price {
+                        width: 100rpx;
+                        height: 60rpx;
+                        color: #e40360;
+                    }
+
+                    .old-price {
+                        width: 80rpx;
+                        height: 50rpx;
+                        text-decoration: line-through;
+                        padding-top: 5rpx;
+                    }
+
+                }
+            }
+        }
+    }
+
+    .shop-desc {
+        margin: 10rpx 0;
+
+        .desc {
+            padding: 20rpx 40rpx;
+            text-indent: 20rpx;
+            line-height: 50rpx;
+        }
+    }
+
+    .comments {
+        margin-bottom: 10rpx;
+        .all-comments{
+            position: relative;
+            .comments-icon{
+                position: absolute;
+                top: -1rpx;
+                left: 380rpx;
+            }
+        }
+    }
+}
+
+.all-comments {
+    height: 100rpx;
+    line-height: 100rpx;
+    padding-left: 150rpx;
+}
+
+.padding40 {
+    padding-left: 40rpx;
+}
+
+.icon {
+    position: absolute;
+    top: -6rpx;
+    left: 0;
+}
+
+.shop-title {
+    width: 100%;
+    height: 90rpx;
+    line-height: 90rpx;
+    border: 1px solid #ebeef5;
+    padding-left: 20rpx;
+}

pages/shopinfo/shopinfo.wxml

@@ -0,0 +1,79 @@
+<!--pages/shopinfo/shopinfo.wxml-->
+
+<view class="container">
+   <!-- 门店照片 -->
+   <view class="shop-img">
+      <image src="../../images/shopImg.jpg"></image>
+   </view>
+   <!-- 门店信息 -->
+   <view class="shop-info card">
+      <view class="shop-name f18">
+         {{shopInfo.shopName}}
+      </view>
+      <view class="stars">
+
+         <mp-icon icon="star" color="#E15F3D" size="18" type="{{shopInfo.stars>0?'filled':'outline'}}"></mp-icon>
+         <mp-icon icon="star" color="#E15F3D" size="18" type="{{shopInfo.stars>1?'filled':'outline'}}"></mp-icon>
+         <mp-icon icon="star" color="#E15F3D" size="18" type="{{shopInfo.stars>2?'filled':'outline'}}"></mp-icon>
+         <mp-icon icon="star" color="#E15F3D" size="18" type="{{shopInfo.stars>3?'filled':'outline'}}"></mp-icon>
+         <mp-icon icon="star" color="#E15F3D" size="18" type="{{shopInfo.stars>4?'filled':'outline'}}"></mp-icon>
+      </view>
+      <view class="tel f13 fw300 padding40">
+         <mp-icon icon="cellphone" size="18" class="icon"></mp-icon>
+         {{shopInfo.shopTel}}
+      </view>
+      <view class="address f13 fw300 padding40">
+         <view class="">
+
+            <mp-icon icon="location" size="18" class="icon"></mp-icon>
+            {{shopInfo.shopAddress}}
+         </view>
+         <view class="way f13 fw300">
+            <view class="checkway">
+
+               查看路线
+            </view>
+
+            <mp-icon icon="discover" size="18" color="rgb(58, 58, 58)" class="discover"></mp-icon>
+         </view>
+      </view>
+   </view>
+   <!-- 门店产品 -->
+   <view class="products card">
+      <view class="shop-title f17 fw600">
+         门店项目
+      </view>
+      <navigator url="../product/product" hover-class="none" open-type="navigate">
+         <view class="product" wx:for="{{shopInfo.products}}" wx:key="imgurl">
+         <view class="product-img">
+            <image src="{{item.imgurl}}"></image>
+         </view>
+         <view class="product-info">
+            <view class="product-title ">{{item.title}}</view>
+            <view class="price">
+               <view class="new-price">¥{{item.newPrice}}</view>
+               <view class="old-price f13 fw300">¥{{item.oldPrice}}</view>
+            </view>
+         </view>
+      </view>
+      </navigator>
+      
+
+   </view>
+   <!-- 门店描述 -->
+   <view class="shop-desc card">
+      <view class="shop-title f17 fw600">
+         店铺介绍
+      </view>
+      <view class="desc f14">
+         {{shopInfo.shopDesc}}
+      </view>
+   </view>
+   <view class="comments card">
+      <view class="shop-title f17 fw600">
+         全部评论（{{commentsList.length}}）
+      </view>
+      <comments commentsList="{{[commentsList[0],commentsList[1],commentsList[1]]}}"></comments>
+   </view>
+
+</view>

pages/shopinfo/shopinfo.wxss

@@ -0,0 +1,141 @@
+.container .shop-img {
+  width: 100%;
+  height: 340rpx;
+}
+
+.container .shop-img image {
+  width: 100%;
+  height: 100%;
+}
+
+.container .shop-info {
+  height: 290rpx;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  padding-left: 25rpx;
+  padding-top: 15rpx;
+}
+
+.container .shop-info > view {
+  flex: 1;
+  position: relative;
+}
+
+.container .shop-info .stars {
+  margin-right: 25rpx;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.container .shop-info .address {
+  display: flex;
+  justify-content: space-between;
+}
+
+.container .shop-info .address .way {
+  position: relative;
+  padding-right: 10rpx;
+}
+
+.container .shop-info .address .way .checkway {
+  margin-right: 40rpx;
+}
+
+.container .shop-info .address .way .discover {
+  position: absolute;
+  top: -2rpx;
+  right: 3rpx;
+}
+
+.container .shop-info .tel {
+  margin-top: 20rpx;
+}
+
+.container .products {
+  margin-top: 10rpx;
+}
+
+.container .products .product {
+  display: flex;
+  justify-content: flex-start;
+  padding: 20rpx 40rpx;
+}
+
+.container .products .product .product-img image {
+  width: 150rpx;
+  height: 150rpx;
+}
+
+.container .products .product .product-info {
+  padding-left: 20rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.container .products .product .product-info .price {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.container .products .product .product-info .price .new-price {
+  width: 100rpx;
+  height: 60rpx;
+  color: #e40360;
+}
+
+.container .products .product .product-info .price .old-price {
+  width: 80rpx;
+  height: 50rpx;
+  text-decoration: line-through;
+  padding-top: 5rpx;
+}
+
+.container .shop-desc {
+  margin: 10rpx 0;
+}
+
+.container .shop-desc .desc {
+  padding: 20rpx 40rpx;
+  text-indent: 20rpx;
+  line-height: 50rpx;
+}
+
+.container .comments {
+  margin-bottom: 10rpx;
+}
+
+.container .comments .all-comments {
+  position: relative;
+}
+
+.container .comments .all-comments .comments-icon {
+  position: absolute;
+  top: -1rpx;
+  left: 380rpx;
+}
+
+.all-comments {
+  height: 100rpx;
+  line-height: 100rpx;
+  padding-left: 150rpx;
+}
+
+.padding40 {
+  padding-left: 40rpx;
+}
+
+.icon {
+  position: absolute;
+  top: -6rpx;
+  left: 0;
+}
+
+.shop-title {
+  width: 100%;
+  height: 90rpx;
+  line-height: 90rpx;
+  border: 1px solid #ebeef5;
+  padding-left: 20rpx;
+}