fix:修改首页跟预约样式

componets/tabs/index.wxss

@@ -24,7 +24,7 @@
 
 .weui-tabs-bar__item {
     display: inline-block;
-    letter-spacing: 2rpx;
+    /* letter-spacing: 2rpx; */
 }
 
 .weui-tabs-bar__title {

pages/appointment/appointment.js

@@ -24,7 +24,9 @@ Page({
     orderTimeHeight: 0,
     days: [],
     hasMobile: false,
-    mobile: ''
+    mobile: '',
+    address:'',
+    shopName:''
   },
 
   /**
@@ -34,6 +36,8 @@ Page({
     console.log(options)
     let shopId = options.shopId;
     let productId = options.productId
+    let address = options.address;
+    let shopName = options.shopName;
     let product = await productApi.getProductById(productId);
     let productImg = product.info.productImg;
     let productName = product.info.productName;
@@ -43,7 +47,9 @@ Page({
       productId,
       productImg,
       productName,
-      price
+      price,
+      address,
+      shopName
     })
     let userInfo = await app.getWxUserInfo()
     if (userInfo) {

pages/appointment/appointment.scss

@@ -3,24 +3,99 @@
     height: 100%;
     background-color: #F7F7F7;
 
-    .product-img {
-        width: 100%;
+    .shop-info,
+    .product-desc,
+    .order-time,
+    .product-mobile {
+        width: 93%;
+        margin: 15rpx auto;
+        background-color: #fff;
+    }
 
-        >image {
-            width: 100%;
+    .shop-info {
+        position: relative;
+        height: 180rpx;
+        width: 93%;
+        margin: 10rpx auto;
+        background-color: #fff;
+
+        .address-icon {
+            width: 50rpx;
+            height: 53rpx;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            left: 70rpx;
+        }
+
+        .shop {
+            height: 180rpx;
+            text-align: left;
+            margin-left: 180rpx;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+            .shop-name {
+                font-size: 17px;
+                color: #000;
+                font-weight: 500;
+                letter-spacing: 2rpx;
+            }
+
+            .address {
+                font-size: 13px;
+                color: #999;
+                font-weight: 400;
+                margin-top: 20rpx;
+                letter-spacing: 1rpx;
+            }
         }
     }
 
-    .product-title,
-    .shop-name {
-        width: 100%;
-        height: 90rpx;
-        background-color: #fff;
-        padding: 10rpx 20rpx;
-        margin-bottom: 10rpx;
-        line-height: 90rpx;
+    .product-desc {
+        display: flex;
+        flex-direction: column;
+
+        .product {
+            display: flex;
+            justify-content: flex-start;
+            height: 200rpx;
+            padding: 20rpx;
+            border-bottom: 1rpx solid #ECECEC;
+
+            .product-img {
+                width: 270rpx;
+
+                image {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+            .product-name {
+                margin-left: 20rpx;
+                position: relative;
+                padding-top: 10rpx;
+
+                .title {
+                    font-size: 17px;
+
+                }
+
+                .price {
+                    font-size: 18px;
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                }
+            }
+
+        }
+
     }
 
+
     .people-num {
         display: flex;
         justify-content: space-between;
@@ -58,10 +133,18 @@
         }
     }
 
+    .desc-title {
+        width: 100%;
+        text-align: center;
+        color: rgb(100, 100, 100);
+        line-height: 100rpx;
+        letter-spacing: 4rpx;
+    }
+
     .order-time {
         background-color: #fff;
         margin-bottom: 20rpx;
-        padding-bottom: 20rpx;
+        // padding-bottom: 20rpx;
         display: flex;
         justify-content: flex-start;
         position: relative;
@@ -106,9 +189,9 @@
 
                 .time-info {
                     width: 20%;
-                    height: 110rpx;
-                    line-height: 50rpx;
-                    background-color: #E6E6E6;
+                    height: 80rpx;
+                    line-height: 80rpx;
+                    // background-color: #E6E6E6;
                     margin: 10rpx 0;
                     text-align: center;
                 }
@@ -126,10 +209,9 @@
     }
 
     .product-mobile {
-        background-color: #fff;
-        width: 100%;
         height: 100rpx;
         position: relative;
+        margin-bottom: 50rpx;
         >button {
             background-color: rgba(0, 0, 0, 0);
             color: #202020;
@@ -145,19 +227,25 @@
     }
 
     .appointment {
-        width: 90%;
+        width: 100%;
         height: 100rpx;
-        margin: 10rpx auto;
-        background-color: #DF3361;
-
-        color: #fff;
-
-        .btn {
-            font-size: 17px;
+        display: flex;
+        justify-content:flex-start;
+        .price{
+            flex: 1;
+            background-color: #222224;
+            color: #fff;
+            padding-left: 36rpx;
             line-height: 100rpx;
-            text-align: center;
+            font-weight: 300;
             letter-spacing: 2rpx;
         }
+        .btn{
+            width: 300rpx;
+            background-color: #BA9D6E;
+            text-align: center;
+            line-height: 100rpx;
+        }
     }
 
     .appointment-hover {

pages/appointment/appointment.wxml

@@ -1,62 +1,66 @@
 <view class="container">
-    <view class="product-img">
-        <image src="{{productImg}}"></image>
+    <view class="shop-info card">
+        <image class="address-icon" src="../../images/icons/location.png"></image>
+        <view class="shop">
+            <view class="shop-name">品牌名{{shopName}}</view>
+            <view class="address">{{address}}</view>
+        </view>
     </view>
-    <view class="product-title card f17">{{productName}}</view>
-
-    <!-- <view class="shop-name card f17">门店·{{storeName}}</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 class="product-desc card">
+        <view class="product">
+            <view class="product-img">
+                <image src="{{productImg}}"></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 class="product-name">
+                <view class="title">{{productName}}</view>
+                <view class="price">
+                    <text style="font-size:12px;color:#424242">¥</text>
+                    {{price}}
+                </view>
+            </view>
+        </view>
+        <view class="people-num ">
+            <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>
+    <view class="desc-title">预约时间</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}}">
+        <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: {{(tabs[activeTab].list.length)/5*140}}rpx;">
+                <view class="tab-content" data-set="{{item}}" slot="tab-content-{{index}}" bind:tap="handleClick" style="height: {{(tabs[activeTab].list.length)/5*140}}rpx;">
                     <view class="orders" style="height: {{(tabs[activeTab].list.length)/5*140}}rpx;overflow-y: auto;">
                         <block wx:for="{{tabs[activeTab].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-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 class="price fw300">¥{{item.price}}</view> -->
                             </view>
                         </block>
-
                     </view>
                 </view>
             </block>
         </mp-tabs>
-
     </view>
+
+    <view class="desc-title">预留手机号</view>
     <view class="product-mobile card f17">
-        <button type="primary" wx:if="{{!hasMobile}}" bindgetphonenumber = "getMobile" open-type="getPhoneNumber">获取手机号</button>
+        <button type="primary" wx:if="{{!hasMobile}}" bindgetphonenumber="getMobile" open-type="getPhoneNumber">
+            获取手机号
+        </button>
         <button type="primary" wx:if="{{hasMobile}}">{{mobile}}</button>
     </view>
-
-    <view class="appointment card" url="" hover-class="appointment-hover" open-type="navigate">
-        <view class="btn" bindtap="checkAuth">
-            确认预约
-        </view>
+    <view class="appointment " >
+        <view class="price">价格：¥{{peopleNum*price}}</view>
+        <view class="btn" bindtap="checkAuth">提交预约</view>
     </view>
 
-
+    
 </view>

pages/appointment/appointment.wxss

@@ -4,22 +4,93 @@
   background-color: #F7F7F7;
 }
 
-.container .product-img {
-  width: 100%;
+.container .shop-info,
+.container .product-desc,
+.container .order-time,
+.container .product-mobile {
+  width: 93%;
+  margin: 15rpx auto;
+  background-color: #fff;
 }
 
-.container .product-img > image {
-  width: 100%;
+.container .shop-info {
+  position: relative;
+  height: 180rpx;
+  width: 93%;
+  margin: 10rpx auto;
+  background-color: #fff;
 }
 
-.container .product-title,
-.container .shop-name {
+.container .shop-info .address-icon {
+  width: 50rpx;
+  height: 53rpx;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 70rpx;
+}
+
+.container .shop-info .shop {
+  height: 180rpx;
+  text-align: left;
+  margin-left: 180rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.container .shop-info .shop .shop-name {
+  font-size: 17px;
+  color: #000;
+  font-weight: 500;
+  letter-spacing: 2rpx;
+}
+
+.container .shop-info .shop .address {
+  font-size: 13px;
+  color: #999;
+  font-weight: 400;
+  margin-top: 20rpx;
+  letter-spacing: 1rpx;
+}
+
+.container .product-desc {
+  display: flex;
+  flex-direction: column;
+}
+
+.container .product-desc .product {
+  display: flex;
+  justify-content: flex-start;
+  height: 200rpx;
+  padding: 20rpx;
+  border-bottom: 1rpx solid #ECECEC;
+}
+
+.container .product-desc .product .product-img {
+  width: 270rpx;
+}
+
+.container .product-desc .product .product-img image {
   width: 100%;
-  height: 90rpx;
-  background-color: #fff;
-  padding: 10rpx 20rpx;
-  margin-bottom: 10rpx;
-  line-height: 90rpx;
+  height: 100%;
+}
+
+.container .product-desc .product .product-name {
+  margin-left: 20rpx;
+  position: relative;
+  padding-top: 10rpx;
+}
+
+.container .product-desc .product .product-name .title {
+  font-size: 17px;
+}
+
+.container .product-desc .product .product-name .price {
+  font-size: 18px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
 }
 
 .container .people-num {
@@ -59,10 +130,17 @@
   text-align: center;
 }
 
+.container .desc-title {
+  width: 100%;
+  text-align: center;
+  color: #646464;
+  line-height: 100rpx;
+  letter-spacing: 4rpx;
+}
+
 .container .order-time {
   background-color: #fff;
   margin-bottom: 20rpx;
-  padding-bottom: 20rpx;
   display: flex;
   justify-content: flex-start;
   position: relative;
@@ -105,9 +183,8 @@
 
 .container .order-time .tab-content .orders .time-info {
   width: 20%;
-  height: 110rpx;
-  line-height: 50rpx;
-  background-color: #E6E6E6;
+  height: 80rpx;
+  line-height: 80rpx;
   margin: 10rpx 0;
   text-align: center;
 }
@@ -122,10 +199,9 @@
 }
 
 .container .product-mobile {
-  background-color: #fff;
-  width: 100%;
   height: 100rpx;
   position: relative;
+  margin-bottom: 50rpx;
 }
 
 .container .product-mobile > button {
@@ -142,18 +218,27 @@
 }
 
 .container .appointment {
-  width: 90%;
+  width: 100%;
   height: 100rpx;
-  margin: 10rpx auto;
-  background-color: #DF3361;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.container .appointment .price {
+  flex: 1;
+  background-color: #222224;
   color: #fff;
+  padding-left: 36rpx;
+  line-height: 100rpx;
+  font-weight: 300;
+  letter-spacing: 2rpx;
 }
 
 .container .appointment .btn {
-  font-size: 17px;
-  line-height: 100rpx;
+  width: 300rpx;
+  background-color: #BA9D6E;
   text-align: center;
-  letter-spacing: 2rpx;
+  line-height: 100rpx;
 }
 
 .container .appointment-hover {

pages/index/index.js

@@ -89,7 +89,7 @@ Page({
       this.setData({
         pageNo
       })
-    }else {
+    } else {
       pageNo = this.data.pageNo;
     }
 
@@ -98,12 +98,12 @@ Page({
     let list = proList.list;
     if (pageNo == 1) {
       productList = list
-    }else {
-      list.forEach((item)=>{
+    } else {
+      list.forEach((item) => {
         productList.push(item)
       })
     }
-    
+
     self.setData({
       productList,
       pageSum: proList.pageCount
@@ -249,4 +249,25 @@ Page({
     })
 
   },
+
+
+  gotoAppointment: async function (e) {
+
+    const self = this
+    console.log(e.currentTarget.dataset.productid)
+    let productId = e.currentTarget.dataset.productid;
+    let shopId = this.data.storeInfo.id;
+    let address = self.data.storeInfo.address;
+    let shopName = self.data.storeInfo.storeName;
+    const isAuth = await app.isAuth()
+    if (!isAuth) {
+      wx.redirectTo({
+        url: '/pages/prompt/prompt?page=' + this.route + `&shopId=${shopId}&productId=${productId}`,
+      })
+      return
+    }
+    wx.navigateTo({
+      url: '../appointment/appointment?' + 'shopId=' + shopId + '&productId=' + productId + '&address=' + address+"&shopName="+shopName,
+    })
+  }
 })

pages/index/index.scss

@@ -16,7 +16,6 @@ Page {
     border-top: 1rpx solid #ECECEC;
     width: 100%;
     background-color: #F7F7F7;
-    padding-top: 20rpx;
     position: fixed;
     z-index: 99;
 
@@ -27,108 +26,63 @@ Page {
       height: 80rpx;
       line-height: 80rpx;
       background-color: #fff;
+
+      .title-left {
+        position: relative;
+        padding-left: 40rpx;
+
+        .shop-icon {
+          width: 40rpx;
+          height: 40rpx;
+          position: absolute;
+          top: 50%;
+          left: -10rpx;
+          transform: translateY(-50%);
+        }
+      }
+
     }
+
     .shop-info {
       width: 100%;
+      height: 500rpx;
+
+      >image {
+        width: 100%;
+
+      }
+    }
+
+
+    /* 未获得授权时显示获取授权按钮 */
+    .user-location-btn {
+      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;
+      border-top: 1rpx solid #ECECEC;
       background-color: #fff;
-  
-      >.shopimg {
-          width: 150rpx;
-          height: 150rpx;
-  
-          >.img {
-              width: 100%;
-              height: 100%;
-          }
-  
+      position: relative;
+
+      .location-btn {
+        background-color: #ECECEC;
+        padding: 0;
+        width: 50%;
+        height: 50%;
+        line-height: 100rpx;
+        color: #21ad50;
+        position: absolute;
+        left: 50%;
+        top: 28%;
+        transform: translate(-50%);
       }
-  
-      .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;
-          }
-      }
-  
-  }
-
-  /* 未获得授权时显示获取授权按钮 */
-  .user-location-btn{
-    width: 100%;
-    height: 220rpx;
-    border-top:1rpx solid #ECECEC ;
-    background-color: #fff;
-    position: relative;
-    .location-btn{
-      background-color: #ECECEC;
-      padding: 0;
-      width: 50%;
-      height: 50%;
-      line-height: 100rpx;
-      color: #21ad50;
-      position: absolute;
-      left: 50%;
-      top: 28%;
-      transform: translate(-50%);
     }
-  }
-  
+
 
   }
 
 
   .product {
     overflow-y: auto;
-    padding-top: 320rpx;
+    padding-top: 590rpx;
     /* .weui-tabs {
       .weui-tabs-bar__wrp {
         .weui-tabs-bar__content {
@@ -145,52 +99,45 @@ Page {
 
     .productinfo {
       width: 95%;
-      height: 380rpx;
+      height: 550rpx;
       padding: 10rpx 0;
       margin: 0 auto;
 
       .product-item {
-        position: relative;
         width: 100%;
-        height: 380rpx;
-        border-radius: 20rpx;
-        background-size: cover;
-        background-position: center;
+        height: 550rpx;
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 20rpx;
+
+        .product-img {
+          width: 100%;
+          height: 400rpx;
+        }
+
         .product-desc {
-          height: 380rpx;
-          color: #fff;
-          position: absolute;
-          color: #fff;
-          top: 210rpx;
-          left: 20rpx;
+          height: 150rpx;
           letter-spacing: 2rpx;
           font-weight: 100;
-        }
+          display: flex;
+          flex-direction: column;
 
-        .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;
+          .product-name {
+            line-height: 70rpx;
           }
-        }
 
-        .gray {
-          background-color: #999;
+          .price {
+            display: flex;
+            justify-content: flex-start;
+            line-height: 50rpx;
+
+            & :last-child {
+              margin-left: 20rpx;
+            }
+          }
         }
+
+
       }
 
       &:first-child {
@@ -203,5 +150,15 @@ Page {
 
 .fw700 {
   font-weight: 500;
-  font-size: 18px;
+  font-size: 17px;
+}
+
+.gold {
+  font-size: 15px;
+  color: #b1a384;
+}
+
+.gray {
+  font-size: 13px;
+  color: #999;
 }

pages/index/index.wxml

@@ -1,87 +1,45 @@
 <view class="content">
-  <view>
-    
-  </view>
+  <view></view>
 </view>
-
-<!--index.wxml-->
+<!-- index.wxml -->
 <view class="container">
-    <!-- 店铺信息 -->
-    <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/icons/right.png" style="width: 25rpx;height: 25rpx;">
-          </image>
-        </navigator>
-      </view>
-      <!-- 店铺 -->
-      <view wx:if="{{locationFlag}}">
-
-        <navigator url="../../pages/shopinfo/shopinfo?id={{storeInfo.id}}" 
-          hover-class="none">
-          <view class="shop-info">
-              <view class="shopimg">
-                  <image src="{{storeInfo.logo}}" mode="aspectFill" lazy-load="false" class="img">
-                  </image>
-              </view>
-              <view class="shopmsg">
-                  <view class="shopview">
-                      <view class="c-202020">
-                          {{storeInfo.storeName}}
-                      </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="{{parseInt(storeInfo.storeScore)>0?'filled':'outline'}}"></mp-icon>
-                          <mp-icon icon="star" color="#E15F3D" size="18" type="{{parseInt(storeInfo.storeScore)>1?'filled':'outline'}}"></mp-icon>
-                          <mp-icon icon="star" color="#E15F3D" size="18" type="{{parseInt(storeInfo.storeScore)>2?'filled':'outline'}}"></mp-icon>
-                          <mp-icon icon="star" color="#E15F3D" size="18" type="{{parseInt(storeInfo.storeScore)>3?'filled':'outline'}}"></mp-icon>
-                          <mp-icon icon="star" color="#E15F3D" size="18" type="{{parseInt(storeInfo.storeScore)>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>
-                          {{storeInfo.address}}
-                      </view>
-                      <view class="c-707070 f12">
-                          {{storeInfo.distance}}
-                      </view>
-                  </view>
-              </view>
-          </view>
-        </navigator>
-      </view>
-      <view class="user-location-btn" wx:if="{{!locationFlag}}" >
-        <button class="location-btn" open-type="getLocation" catchtap="getLocation" >授权获取附近门店</button>
+  <!-- 店铺信息 -->
+  <view class="shop">
+    <view class="title">
+      <view class="c-202020 title-left" user-select="false" space="false" decode="false">
+        <image class="shop-icon" src="../../images/icons/shop-icon.png" lazy-load="false"></image>
+        品牌名
       </view>
+      <navigator class="c-202020 f15" url="../shop/shop" hover-class="none" open-type="navigate">
+        {{storeInfo.storeName}}
+        <image class="" src="../../images/icons/next.png" style="width: 25rpx;height: 25rpx;"></image>
+      </navigator>
     </view>
-    <!-- 产品信息 -->
-    <view class="product" >
-
- <block wx:for="{{productList}}" wx:key="id" >
-  <view class="productinfo">
-    <view class="product-item" data-productid="{{item.id}}" bindtap = "showProduct" style="background-image: url({{item.productImg}});">
-      <view class="product-desc" >
-        <view class="f17">{{item.productName}}</view>
-        <view class=".fw700">¥{{item.currentPrice}}/人</view>
-        <!-- <view class="f13">{{item.productContent}}</view> -->
+    <!-- 店铺 -->
+    <view wx:if="{{locationFlag}}">
+      <view class="shop-info">
+        <image class="shop-img" src="{{storeInfo.logo}}" lazy-load="false"></image>
       </view>
-      <view class="order {{item.status==1?'':'gray'}}">
-        <view >
-          立即预约
+    </view>
+    <view class="user-location-btn" wx:if="{{!locationFlag}}">
+      <button class="location-btn" open-type="getLocation" catchtap="getLocation">授权获取附近门店</button>
+    </view>
+  </view>
+  <!-- 产品信息 -->
+  <view class="product">
+    <block wx:for="{{productList}}" wx:key="id">
+      <view class="productinfo">
+        <view class="product-item" data-productid="{{item.id}}" bindtap="gotoAppointment">
+          <image class="product-img" src="{{item.productImg}}" lazy-load="false" binderror="" bindload=""></image>
+          <view class="product-desc">
+            <view class="fw700 product-name">{{item.productName}}</view>
+            <view class="price">
+              <view class="gold">会员价：¥{{item.currentPrice}}</view>
+              <view class="gray">非会员价：¥{{item.oldPrice}}</view>
+            </view>
+          </view>
         </view>
       </view>
-    </view>
+    </block>
   </view>
-</block>
-    </view>
-
-
-</view>
+</view>

pages/index/index.wxss

@@ -16,7 +16,6 @@ Page {
   border-top: 1rpx solid #ECECEC;
   width: 100%;
   background-color: #F7F7F7;
-  padding-top: 20rpx;
   position: fixed;
   z-index: 99;
   /* 未获得授权时显示获取授权按钮 */
@@ -31,74 +30,27 @@ Page {
   background-color: #fff;
 }
 
-.container .shop .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;
-}
-
-.container .shop .shop-info > .shopimg {
-  width: 150rpx;
-  height: 150rpx;
-}
-
-.container .shop .shop-info > .shopimg > .img {
-  width: 100%;
-  height: 100%;
-  border-radius: 28rpx;
-}
-
-.container .shop .shop-info .shopmsg {
-  flex: 2;
-  height: 200rpx;
-  margin-left: 50rpx;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  /* 处理定位图标上移的问题 */
-  /* 新品促销标签 */
-}
-
-.container .shop .shop-info .shopmsg > .shopview {
-  display: flex;
-  justify-content: space-between;
-}
-
-.container .shop .shop-info .shopmsg > .shop-address {
+.container .shop > .title .title-left {
   position: relative;
-  padding-left: 45rpx;
+  padding-left: 40rpx;
 }
 
-.container .shop .shop-info .shopmsg > .shop-address .address-icon {
+.container .shop > .title .title-left .shop-icon {
+  width: 40rpx;
+  height: 40rpx;
   position: absolute;
-  top: -6rpx;
-  left: 0;
-}
-
-.container .shop .shop-info .shopmsg .mark {
-  width: 105rpx;
-  height: 30rpx;
-  line-height: 30rpx;
-  text-align: center;
-  border-radius: 30rpx;
+  top: 50%;
+  left: -10rpx;
+  transform: translateY(-50%);
 }
 
-.container .shop .shop-info .shopmsg .discount {
-  color: #E359A8;
-  border: 1px solid #E359A8;
+.container .shop .shop-info {
+  width: 100%;
+  height: 500rpx;
 }
 
-.container .shop .shop-info .shopmsg .new {
-  border: 1px solid #80CB5F;
-  color: #80CB5F;
+.container .shop .shop-info > image {
+  width: 100%;
 }
 
 .container .shop .user-location-btn {
@@ -124,7 +76,7 @@ Page {
 
 .container .product {
   overflow-y: auto;
-  padding-top: 320rpx;
+  padding-top: 590rpx;
   /* .weui-tabs {
       .weui-tabs-bar__wrp {
         .weui-tabs-bar__content {
@@ -142,54 +94,44 @@ Page {
 
 .container .product .productinfo {
   width: 95%;
-  height: 380rpx;
+  height: 550rpx;
   padding: 10rpx 0;
   margin: 0 auto;
 }
 
 .container .product .productinfo .product-item {
-  position: relative;
   width: 100%;
-  height: 380rpx;
-  border-radius: 20rpx;
-  background-size: cover;
-  background-position: center;
+  height: 550rpx;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20rpx;
+}
+
+.container .product .productinfo .product-item .product-img {
+  width: 100%;
+  height: 400rpx;
 }
 
 .container .product .productinfo .product-item .product-desc {
-  height: 380rpx;
-  color: #fff;
-  position: absolute;
-  color: #fff;
-  top: 210rpx;
-  left: 20rpx;
+  height: 150rpx;
   letter-spacing: 2rpx;
   font-weight: 100;
+  display: flex;
+  flex-direction: column;
 }
 
-.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 .product-desc .product-name {
+  line-height: 70rpx;
 }
 
-.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 .product-desc .price {
+  display: flex;
+  justify-content: flex-start;
+  line-height: 50rpx;
 }
 
-.container .product .productinfo .product-item .gray {
-  background-color: #999;
+.container .product .productinfo .product-item .product-desc .price :last-child {
+  margin-left: 20rpx;
 }
 
 .container .product .productinfo:first-child {
@@ -198,5 +140,15 @@ Page {
 
 .fw700 {
   font-weight: 500;
-  font-size: 18px;
+  font-size: 17px;
+}
+
+.gold {
+  font-size: 15px;
+  color: #b1a384;
+}
+
+.gray {
+  font-size: 13px;
+  color: #999;
 }

pages/person/person.wxml

@@ -7,7 +7,7 @@
                 </image>
             </view>
             <view class="tel c-707070 fw300">{{userInfo.mobile}}</view>
-            <button open-type="getPhoneNumber" bindgetphonenumber="getMobile" class="login-btn" wx:if="{{!userInfo.mobile}}" >获取手机号</button>
+            <button open-type="getPhoneNumber" catchgetphonenumber="getMobile" class="login-btn" wx:if="{{!userInfo.mobile}}" >获取手机号</button>
         </view>
         <view class="head-img">
             <image class="" src="{{userInfo.avatar}}">

project.private.config.json

@@ -0,0 +1,47 @@
+{
+  "condition": {
+    "plugin": {
+      "list": []
+    },
+    "game": {
+      "list": []
+    },
+    "gamePlugin": {
+      "list": []
+    },
+    "miniprogram": {
+      "list": [
+        {
+          "name": "pages/shoplist/shoplist",
+          "pathName": "pages/shoplist/shoplist",
+          "query": "",
+          "scene": null
+        },
+        {
+          "name": "pages/person/person",
+          "pathName": "pages/person/person",
+          "query": "",
+          "scene": null
+        },
+        {
+          "name": "pages/prompt/prompt",
+          "pathName": "pages/prompt/prompt",
+          "query": "",
+          "scene": null
+        },
+        {
+          "name": "pages/prompt/prompt",
+          "pathName": "pages/prompt/prompt",
+          "query": "",
+          "scene": null
+        },
+        {
+          "name": "pages/appointment/appointment",
+          "pathName": "pages/appointment/appointment",
+          "query": "shopId=1&productId=1&address=上海普陀&shopName=测试门店",
+          "scene": null
+        }
+      ]
+    }
+  }
+}