fix：首页获取位置信息切换按钮

app.json

@@ -1,9 +1,9 @@
 {
   "pages":[
     
+    "pages/index/index",
     "pages/commentinfo/commentinfo",
     "pages/product/product",
-    "pages/index/index",
     "pages/person/person",
     "pages/personinfo/personinfo",
     "pages/order/order",

pages/commentinfo/commentinfo.js

@@ -5,56 +5,121 @@ Page({
    * 页面的初始数据
    */
   data: {
-    shopStars:0,
-    productStars:0,
-    textWidth:0,
-    wordsNum:0,
-    limitNum:100,
-    outLimit:false,
-    commentText:"w d "
+    shopStars: 0,
+    productStars: 0,
+    textWidth: 0,
+    wordsNum: 0,
+    limitNum: 100,
+    outLimit: false,
+    commentText: "",
+    imgs: [],
   },
 
-  changeShopStars:function (e) {  
+  // 上传图片
+  chooseImg: function (e) {
+    var that = this;
+    var imgs = this.data.imgs;
+    if (imgs.length >= 9) {
+      this.setData({
+        lenMore: 1
+      });
+      setTimeout(function () {
+        that.setData({
+          lenMore: 0
+        });
+      }, 2500);
+      return false;
+    }
+    wx.chooseImage({
+      // count: 1, // 默认9
+      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
+      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+      success: function (res) {
+        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
+        var tempFilePaths = res.tempFilePaths;
+        var imgs = that.data.imgs;
+        // console.log(tempFilePaths + '----');
+        for (var i = 0; i < tempFilePaths.length; i++) {
+          if (imgs.length >= 9) {
+            that.setData({
+              imgs: imgs
+            });
+            return false;
+          } else {
+            imgs.push(tempFilePaths[i]);
+          }
+        }
+        // console.log(imgs);
+        that.setData({
+          imgs: imgs
+        });
+      }
+    });
+  },
+  // 删除图片
+  deleteImg: function (e) {
+    var imgs = this.data.imgs;
+    var index = e.currentTarget.dataset.index;
+    imgs.splice(index, 1);
     this.setData({
-      shopStars:e.currentTarget.dataset.i
+      imgs: imgs
+    });
+  },
+  // 预览图片
+  previewImg: function (e) {
+    //获取当前图片的下标
+    var index = e.currentTarget.dataset.index;
+    //所有图片
+    var imgs = this.data.imgs;
+    wx.previewImage({
+      //当前显示图片
+      current: imgs[index],
+      //所有图片
+      urls: imgs
+    })
+  },
+
+  changeShopStars: function (e) {
+    this.setData({
+      shopStars: e.currentTarget.dataset.i
 
     })
   },
-  changeProductStars:function (e) {  
+  changeProductStars: function (e) {
     this.setData({
-      productStars:e.currentTarget.dataset.i
+      productStars: e.currentTarget.dataset.i
 
     })
   },
-  changeComment:function (e) {  
+  changeComment: function (e) {
     // console.log(e.detail)
     // console.log(e.detail.value.length)
     var length = e.detail.value.length;
-    if(length>this.data.limitNum){
+    if (length > this.data.limitNum) {
       this.setData({
-        outLimit:true
+        outLimit: true
       })
     }
     this.setData({
-      wordsNum:e.detail.value.length
+      wordsNum: e.detail.value.length
     })
   },
-  setCommenText:function (e) {  
+  setCommenText: function (e) {
     console.log("调用了")
     console.log(e.detail)
     this.setData({
-      commentText:e.detail.value
+      commentText: e.detail.value
     })
   },
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-    var textWidth =wx.getSystemInfoSync().windowWidth * (750 / wx.getSystemInfoSync().windowWidth)*0.9;
+    var textWidth = wx.getSystemInfoSync().windowWidth * (750 / wx.getSystemInfoSync().windowWidth) * 0.9;
     this.setData({
       textWidth
     })
-    
+
   },
 
   /**

pages/commentinfo/commentinfo.wxml

@@ -52,7 +52,7 @@
         <view class="words f14">
 
             <textarea bindblur="setCommenText" style="height: 200rpx;width: {{textWidth}}rpx;" auto-focus="true"
-                class="comm-text" placeholder="对产品跟服务满意吗？（评论限制{{limitNum}}字以内）" bindinput="changeComment"/>
+                class="comm-text" placeholder="对产品跟服务满意吗？（评论限制{{limitNum}}字以内）" bindinput="changeComment" />
             <view class="words-num">
                     <view class="word {{outLimit?'red':''}}">
                         {{wordsNum}}
@@ -62,7 +62,23 @@
                     </view>
                 </view>
             </view>
-        <view class="comment-img"></view>
+        </view>
+    <view class="comment-img">
+        <view class="weui-uploader">
+            <view class="img-v weui-uploader__bd">
+              <view class='pic' wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
+                  <image class='weui-uploader__img '
+                          src="{{item}}"
+                          data-index="{{index}}" mode="aspectFill" bindtap="previewImg">
+                            <icon type='cancel' class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></icon>
+                  </image>
+              </view>
+               
+                <!-- 用来提示用户上传图片 -->
+                <view class="weui-uploader__input-box pic" bindtap="chooseImg"> </view>
+            </view>
+            <button class="upload-img-btn" bindtap="chooseImg" type='primary'>拍照  / 上传</button>
+        </view>
     </view>
     
     <view class="comment-btn"></view>

pages/index/index.js

@@ -14,8 +14,41 @@ Page({
     }],
     tabs: [],
     activeTab: 0,
-    productHeight: 0
-
+    productHeight: 0,
+    productList: [{
+        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"
+      }
+    ],
+    locationFlag:false
 
   },
 
@@ -29,7 +62,7 @@ Page({
     this.getProductHeight()
   },
 
- 
+
   //动态生成产品的父盒子高度
   getProductHeight: function () {
     var h = wx.getSystemInfoSync().windowHeight * (750 / wx.getSystemInfoSync().windowWidth);

pages/index/index.scss

@@ -23,14 +23,108 @@ Page {
       height: 80rpx;
       line-height: 80rpx;
     }
+    .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;
+          }
+      }
+  
+  }
 
+  /* 未获得授权时显示获取授权按钮 */
+  .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;
 
-    .weui-tabs {
+    /* .weui-tabs {
       .weui-tabs-bar__wrp {
         .weui-tabs-bar__content {
           height: 100rpx;
@@ -42,7 +136,7 @@ Page {
 
         }
       }
-    }
+    } */
 
     .productinfo {
       width: 95%;

pages/index/index.wxml

@@ -15,12 +15,57 @@
         </navigator>
       </view>
       <!-- 店铺 -->
-      <shop shops="{{shopList}}"></shop>
+      <view wx:if="{{locationFlag}}">
+
+        <navigator url="../../pages/shopinfo/shopinfo?id={{item.id}}" wx:for="{{shopList}}" 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>
+      </view>
+      <view class="user-location-btn" wx:if="{{!locationFlag}}" >
+        <button class="location-btn" >授权获取附近门店</button>
+      </view>
     </view>
     <!-- 产品信息 -->
-    <view class="product">
+    <view class="product" style="height: {{productHeight+100}}rpx;">
 
-      <mp-tabs tabs="{{tabs}}" activeTab="{{activeTab}}" swiperClass="weui-tabs-swiper" bindtabclick="onTabClick"
+    <!--   <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">
 
@@ -49,8 +94,28 @@
           </view>
         </block>
       </mp-tabs>
+ -->
+    
+ <block wx:for="{{productList}}" wx:key="id">
+  <view class="productinfo">
+    <view class="product-item" style="background-image: url({{item.imgurl}});">
 
+      <view class="product-desc" >
+        <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>
 

pages/index/index.wxss

@@ -16,6 +16,7 @@ Page {
   background-color: #fff;
   border-top: 1rpx solid #ECECEC;
   margin-top: 20rpx;
+  /* 未获得授权时显示获取授权按钮 */
 }
 
 .container .shop > .title {
@@ -26,13 +27,111 @@ Page {
   line-height: 80rpx;
 }
 
-.container .product .weui-tabs .weui-tabs-bar__wrp .weui-tabs-bar__content {
-  height: 100rpx;
-  line-height: 99rpx;
-  white-space: nowrap;
+.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%;
+}
+
+.container .shop .shop-info .shopmsg {
+  flex: 2;
+  height: 200rpx;
+  margin-left: 50rpx;
+  display: flex;
+  flex-direction: column;
   justify-content: space-around;
-  border-bottom: 1rpx solid #ECECEC;
+  /* 处理定位图标上移的问题 */
+  /* 新品促销标签 */
+}
+
+.container .shop .shop-info .shopmsg > .shopview {
+  display: flex;
+  justify-content: space-between;
+}
+
+.container .shop .shop-info .shopmsg > .shop-address {
+  position: relative;
+  padding-left: 45rpx;
+}
+
+.container .shop .shop-info .shopmsg > .shop-address .address-icon {
+  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;
+}
+
+.container .shop .shop-info .shopmsg .discount {
+  color: #E359A8;
+  border: 1px solid #E359A8;
+}
+
+.container .shop .shop-info .shopmsg .new {
+  border: 1px solid #80CB5F;
+  color: #80CB5F;
+}
+
+.container .shop .user-location-btn {
+  width: 100%;
+  height: 220rpx;
+  border-top: 1rpx solid #ECECEC;
+  background-color: #fff;
+  position: relative;
+}
+
+.container .shop .user-location-btn .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%);
+}
+
+.container .product {
+  overflow-y: auto;
+  /* .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 {