fix:评论页面上传图片问题

add:评论列表中图片预览功能

app.json

@@ -1,7 +1,8 @@
 {
   "pages":[
-    "pages/index/index",
+    "pages/comments/comments",
     "pages/commentinfo/commentinfo",
+    "pages/index/index",
     "pages/product/product",
     "pages/person/person",
     "pages/personinfo/personinfo",
@@ -9,8 +10,7 @@
     "pages/appointment/appointment",
     "pages/personorder/personorder",
     "pages/shopinfo/shopinfo",
-    "pages/shop/shop",
-    "pages/comments/comments"
+    "pages/shop/shop"
 
   ],
   "window":{

componets/comments/index.js

@@ -1,32 +1,51 @@
 //Component Object
 Component({
     properties: {
-        commentsList:{
-            type:Array,
-            value:[],
-            observer: function(){}
+        commentsList: {
+            type: Array,
+            value: [],
+            observer: function () {}
         },
-
+        
     },
+    
     data: {
-       
+        
     },
     methods: {
-        
+        // 预览图片
+        previewImg: function (e) {
+            
+            //获取当前图片的下标
+            var index = e.currentTarget.dataset.index;
+            var active = e.currentTarget.dataset.active;
+            //所有图片
+            var imgurls = this.properties.commentsList[active].comments.imgs;
+            var imgs = []
+            imgurls.forEach(function (item,i,array) {
+                imgs.push(item.imgurl);
+            })
+            wx.previewImage({
+                //当前显示图片
+                current: imgs[index],
+                //所有图片
+                urls: imgs
+            })
+        },
     },
-    created: function(){
-       
+    created: function () {
+
     },
-    attached: function(){
+    attached: function () {
 
     },
-    ready: function(){
-        console.log(this.properties)
+    ready: function () {
+       
     },
-    moved: function(){
+    moved: function () {
 
     },
-    detached: function(){
+    detached: function () {
 
     },
 });

componets/comments/index.wxml

@@ -1,4 +1,4 @@
-<view class="container" wx:for="{{commentsList}}" wx:key="id">
+<view class="container" wx:for="{{commentsList}}" wx:key="id" wx:for-index="fatherindex" >
     <view class="photo">
         <image class="head-img" src="{{item.headImg}}" >
             
@@ -20,8 +20,8 @@
         <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}}" >
+                <view class="comment-img " hidden="{{item.comments.imgs.length<1}}" wx:for-index="index" wx:for="{{item.comments.imgs}}" wx:key="imgurl">
+                        <image class="comm-img" src="{{item.imgurl}}"  data-index="{{index}}"  data-active="{{fatherindex}}"  bindtap = "previewImg">
                             
                         </image>
                 </view>

pages/commentinfo/commentinfo.js

@@ -5,8 +5,8 @@ Page({
    * 页面的初始数据
    */
   data: {
-    shopStars: 0,
-    productStars: 0,
+    shopStars: 5,
+    productStars: 5,
     textWidth: 0,
     wordsNum: 0,
     limitNum: 100,
@@ -78,19 +78,34 @@ Page({
       urls: imgs
     })
   },
+  sendComment: function (e) {
 
+    wx.showModal({
+      title: '评论成功！',
+      content: '评论可以在我的评论中查看',
+      showCancel: false,
+      confirmText: "确定"
+    })
+
+
+  },
+
+  //给店铺评分
   changeShopStars: function (e) {
     this.setData({
       shopStars: e.currentTarget.dataset.i
 
     })
   },
+  //给产品评分
   changeProductStars: function (e) {
     this.setData({
       productStars: e.currentTarget.dataset.i
 
     })
   },
+
+  //根据当前的评论字数更改字数的num
   changeComment: function (e) {
     // console.log(e.detail)
     // console.log(e.detail.value.length)
@@ -104,9 +119,8 @@ Page({
       wordsNum: e.detail.value.length
     })
   },
+  //填写评论文字内容
   setCommenText: function (e) {
-    console.log("调用了")
-    console.log(e.detail)
     this.setData({
       commentText: e.detail.value
     })

pages/commentinfo/commentinfo.json

@@ -2,7 +2,8 @@
   "disableScroll": true,
   "usingComponents": {
     "mp-icon": "weui-miniprogram/icon/icon",
-    "mp-tabs": "/componets/tabs/index"
+    "mp-dialog": "weui-miniprogram/dialog/dialog"
+    
   },
   "navigationBarBackgroundColor": "#343434",
   "navigationBarTextStyle": "white",

pages/commentinfo/commentinfo.scss

@@ -1,48 +1,147 @@
 .container {
-    background-color: #F7F7F7;
+    // background-color: #F7F7F7;
     letter-spacing: 8rpx;
-    .shop-stars,.product-stars {
+
+    .shop-stars,
+    .product-stars {
         height: 100rpx;
         display: flex;
         justify-content: flex-start;
         margin: 10rpx 0;
         background-color: #fff;
-        .title{
-            margin:0 30rpx;
+
+        .title {
+            margin: 0 30rpx;
             line-height: 100rpx;
         }
+
         .info {
             display: flex;
             justify-content: flex-start;
             margin: 20rpx;
-            .star{
+
+            .star {
                 margin: 0 5rpx;
             }
         }
     }
-    .comment-text{
+
+    .comment-text {
         width: 100%;
         background-color: #fff;
-        .words{
+
+        .words {
             width: 90%;
             margin: 10rpx auto;
             padding-top: 20rpx;
             background-color: #fcfcfc;
-            .commtext{
-                
-            }
-            .words-num{
+
+            .commtext {}
+
+            .words-num {
                 display: flex;
                 justify-content: flex-end;
                 margin-bottom: 20rpx;
                 color: #707070;
-                .red{
+
+                .red {
                     color: red;
                 }
             }
-            
+
+        }
+    }
+
+    .comment-img {
+        background-color: #fff;
+        margin-top: 30rpx;
+        padding-top: 10rpx;
+        min-height: 400rpx;
+        position: relative;
+        .weui-uploader {
+            .weui-uploader__bd {
+                display: flex;
+                justify-content:flex-start;
+                flex-wrap: wrap;
+                padding-top: 30rpx;
+                .pic {
+                    width: 30%;
+                    height: 200rpx;
+                    margin-left: 1.111111%;
+                    margin-bottom: 1%;
+                    position: relative;
+                    .weui-uploader__img {
+                        width: 100%;
+                        height: 100%;
+                        position: relative;
+                    }
+                    .delete-btn{
+                        width: 35rpx;
+                        height: 35rpx;
+                        border-radius: 50%;
+                        z-index: 9;
+                        position: absolute;
+                        right: -10rpx;
+                        top: -7rpx;
+                        background-color: red;
+                        text-align: center;
+                        line-height: 35rpx;
+                        color: #fff;
+                        &::after{
+                            content: '';
+                            width: 20rpx;
+                            height: 2rpx;
+                            background-color: #fff;
+                            position: absolute;
+                            top: 16rpx;
+                            left: 8rpx;
+                        }
+                    }
+                    
+                }
+                .add{
+                    width: 200rpx;
+                    height: 200rpx;
+                    color: #999;
+                    margin-left: 10rpx;
+                    background-color: rgb(238, 238, 238);
+                    position: relative;
+                    >.title{
+                        width: 100%;
+                        text-align: center;
+                        position: absolute;
+                        top: 60%;
+                        left: 105rpx;
+                        transform: translateX(-50%);
+                    }
+                    >.camera{
+                        width: 80rpx;
+                        height: 80rpx;
+                        margin: 0 auto;
+                        position: absolute;
+                        left: 50%;
+                        top: 20%;
+                        transform: translateX(-50%);
+                    }
+                    
+                }
+               
+                
+            }
         }
+        .upload-img-btn{
+           
+        }
+    }
+
+    .comment-btn{
+        width: 80%;
+        height: 110rpx;
+        background-color: #DF3361;
+        color: #fff;
+        margin: 30rpx auto;
+        text-align: center;
+        line-height: 110rpx;
     }
 
-  
 }

pages/commentinfo/commentinfo.wxml

@@ -63,23 +63,32 @@
                 </view>
             </view>
         </view>
-    <view class="comment-img">
+    <view class="comment-img card">
         <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>
+                        </image>
+                        <view  class="delete-btn"  data-index="{{index}}"  catchtap="deleteImg">
+                            <!-- <image src="../../images/icons/close.png"></image> -->
+                              
+                        </view>
               </view>
                
                 <!-- 用来提示用户上传图片 -->
-                <view class="weui-uploader__input-box pic" bindtap="chooseImg"> </view>
+                <view class=" add " bindtap="chooseImg"> 
+                   <view class="title">添加图片</view>
+                   <image class="camera" src="../../images/icons/camera.png"  >
+                       
+                   </image>
+                </view>
             </view>
-            <button class="upload-img-btn" bindtap="chooseImg" type='primary'>拍照  / 上传</button>
+            
         </view>
+        <!-- <button class="upload-img-btn" bindtap="chooseImg" type='primary'>拍照  / 上传</button> -->
     </view>
     
-    <view class="comment-btn"></view>
+    <view class="comment-btn f18" bindtap = "sendComment">发布评论</view>
 </view>

pages/commentinfo/commentinfo.wxss

@@ -1,9 +1,9 @@
 .container {
-  background-color: #F7F7F7;
   letter-spacing: 8rpx;
 }
 
-.container .shop-stars, .container .product-stars {
+.container .shop-stars,
+.container .product-stars {
   height: 100rpx;
   display: flex;
   justify-content: flex-start;
@@ -11,18 +11,21 @@
   background-color: #fff;
 }
 
-.container .shop-stars .title, .container .product-stars .title {
+.container .shop-stars .title,
+.container .product-stars .title {
   margin: 0 30rpx;
   line-height: 100rpx;
 }
 
-.container .shop-stars .info, .container .product-stars .info {
+.container .shop-stars .info,
+.container .product-stars .info {
   display: flex;
   justify-content: flex-start;
   margin: 20rpx;
 }
 
-.container .shop-stars .info .star, .container .product-stars .info .star {
+.container .shop-stars .info .star,
+.container .product-stars .info .star {
   margin: 0 5rpx;
 }
 
@@ -48,3 +51,94 @@
 .container .comment-text .words .words-num .red {
   color: red;
 }
+
+.container .comment-img {
+  background-color: #fff;
+  margin-top: 30rpx;
+  padding-top: 10rpx;
+  min-height: 400rpx;
+  position: relative;
+}
+
+.container .comment-img .weui-uploader .weui-uploader__bd {
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  padding-top: 30rpx;
+}
+
+.container .comment-img .weui-uploader .weui-uploader__bd .pic {
+  width: 30%;
+  height: 200rpx;
+  margin-left: 1.111111%;
+  margin-bottom: 1%;
+  position: relative;
+}
+
+.container .comment-img .weui-uploader .weui-uploader__bd .pic .weui-uploader__img {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.container .comment-img .weui-uploader .weui-uploader__bd .pic .delete-btn {
+  width: 35rpx;
+  height: 35rpx;
+  border-radius: 50%;
+  z-index: 9;
+  position: absolute;
+  right: -10rpx;
+  top: -7rpx;
+  background-color: red;
+  text-align: center;
+  line-height: 35rpx;
+  color: #fff;
+}
+
+.container .comment-img .weui-uploader .weui-uploader__bd .pic .delete-btn::after {
+  content: '';
+  width: 20rpx;
+  height: 2rpx;
+  background-color: #fff;
+  position: absolute;
+  top: 16rpx;
+  left: 8rpx;
+}
+
+.container .comment-img .weui-uploader .weui-uploader__bd .add {
+  width: 200rpx;
+  height: 200rpx;
+  color: #999;
+  margin-left: 10rpx;
+  background-color: #eeeeee;
+  position: relative;
+}
+
+.container .comment-img .weui-uploader .weui-uploader__bd .add > .title {
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  top: 60%;
+  left: 105rpx;
+  transform: translateX(-50%);
+}
+
+.container .comment-img .weui-uploader .weui-uploader__bd .add > .camera {
+  width: 80rpx;
+  height: 80rpx;
+  margin: 0 auto;
+  position: absolute;
+  left: 50%;
+  top: 20%;
+  transform: translateX(-50%);
+}
+
+.container .comment-btn {
+  width: 80%;
+  height: 110rpx;
+  background-color: #DF3361;
+  color: #fff;
+  margin: 30rpx auto;
+  text-align: center;
+  line-height: 110rpx;
+}

pages/comments/comments.js

@@ -14,15 +14,15 @@ Page({
       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"},
+              {imgurl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608485845363&di=e7d98132fabd3cff8c6af84706dabbd3&imgtype=0&src=http%3A%2F%2Fdpic.tiankong.com%2F13%2Fsi%2FQJ6552879374.jpg"},
+              {imgurl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608485845364&di=51f1ef89c02857c1187ba1abb7d0afb4&imgtype=0&src=http%3A%2F%2Fpicnew11.photophoto.cn%2F20170225%2Fzhongyiyangshengjiamubiao-zhongyituinaanmo-24406997_1.jpg"},
+              {imgurl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608485845364&di=f3d84d43be664894c7a7666198a98055&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100827%2F3079353_153325059762_2.jpg"},
+              {imgurl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608485845364&di=f3d84d43be664894c7a7666198a98055&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100827%2F3079353_153325059762_2.jpg"},
+              {imgurl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608485845364&di=f3d84d43be664894c7a7666198a98055&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100827%2F3079353_153325059762_2.jpg"},
+              {imgurl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608485845364&di=f3d84d43be664894c7a7666198a98055&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100827%2F3079353_153325059762_2.jpg"},
+              {imgurl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608485845364&di=f3d84d43be664894c7a7666198a98055&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100827%2F3079353_153325059762_2.jpg"},
+              {imgurl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608485845364&di=f3d84d43be664894c7a7666198a98055&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100827%2F3079353_153325059762_2.jpg"},
+              {imgurl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608485845364&di=f3d84d43be664894c7a7666198a98055&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100827%2F3079353_153325059762_2.jpg"},
           ]
       }
   },{
@@ -34,7 +34,7 @@ Page({
       comments:{
           content:"3号技师特别好~~~赞一个，下次还来。",
           imgs:[
-              {imgurl:"../../images/commentsImg01.jpg"},
+              {imgurl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608485845364&di=f3d84d43be664894c7a7666198a98055&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100827%2F3079353_153325059762_2.jpg"},
               
           ]
       }
@@ -57,10 +57,10 @@ Page({
       comments:{
           content:"3号技师特别好~~~赞一个，下次还来。",
           imgs:[
-              {imgurl:"../../images/commentsImg01.jpg"},
-              {imgurl:"../../images/commentsImg02.jpg"},
-              {imgurl:"../../images/commentsImg01.jpg"},
-              {imgurl:"../../images/commentsImg03.jpg"},
+              {imgurl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608485845364&di=f3d84d43be664894c7a7666198a98055&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100827%2F3079353_153325059762_2.jpg"},
+              {imgurl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608485845364&di=f3d84d43be664894c7a7666198a98055&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100827%2F3079353_153325059762_2.jpg"},
+              {imgurl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608485845364&di=f3d84d43be664894c7a7666198a98055&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100827%2F3079353_153325059762_2.jpg"},
+              {imgurl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608485845364&di=f3d84d43be664894c7a7666198a98055&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100827%2F3079353_153325059762_2.jpg"},
               
           ]
       }
@@ -73,13 +73,12 @@ Page({
       comments:{
           content:"3号技师特别好~~~赞一个，下次还来。",
           imgs:[
-              {imgurl:"../../images/commentsImg01.jpg"},
-              {imgurl:"../../images/commentsImg02.jpg"},
-              {imgurl:"../../images/commentsImg03.jpg"},
-              {imgurl:"../../images/commentsImg02.jpg"},
-              {imgurl:"../../images/commentsImg01.jpg"},
-              
-          ]
+            {imgurl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608485845364&di=f3d84d43be664894c7a7666198a98055&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100827%2F3079353_153325059762_2.jpg"},
+            {imgurl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608485845364&di=f3d84d43be664894c7a7666198a98055&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100827%2F3079353_153325059762_2.jpg"},
+            {imgurl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608485845364&di=f3d84d43be664894c7a7666198a98055&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100827%2F3079353_153325059762_2.jpg"},
+            {imgurl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608485845364&di=f3d84d43be664894c7a7666198a98055&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100827%2F3079353_153325059762_2.jpg"},
+            {imgurl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608485845364&di=f3d84d43be664894c7a7666198a98055&imgtype=0&src=http%3A%2F%2Fpic9.nipic.com%2F20100827%2F3079353_153325059762_2.jpg"},
+        ]
       }
   }],
 
@@ -89,6 +88,7 @@ Page({
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
+      
     wx.setNavigationBarTitle({
       title: options.title
     })

pages/index/index.js

@@ -48,7 +48,7 @@ Page({
         imgurl: "../../images/product01.jpg"
       }
     ],
-    locationFlag:false
+    isLocation:false
 
   },
 
@@ -214,7 +214,6 @@ Page({
   },
   getLocation: function(){
     const self = this
-    console.log('sss')
     wx.getLocation({
       type: 'wgs84',
       success (res) {
@@ -227,6 +226,6 @@ Page({
           isLocation: true
         })
       }
-     })     
+     })
   }
 })

pages/index/index.wxml

@@ -13,7 +13,7 @@
         </navigator>
       </view>
       <!-- 店铺 -->
-      <view wx:if="{{locationFlag}}">
+      <view wx:if="{{isLocation}}">
 
         <navigator url="../../pages/shopinfo/shopinfo?id={{item.id}}" wx:for="{{shopList}}" wx:key="id"
           hover-class="none">
@@ -58,8 +58,8 @@
           </view>
         </navigator>
       </view>
-      <view class="user-location-btn" wx:if="{{!locationFlag}}">
-        <button class="location-btn" >授权获取附近门店</button>
+      <view class="user-location-btn" wx:if="{{!isLocation}}">
+        <button class="location-btn" bindtap="getLocation">授权获取附近门店</button>
       </view>
     </view>
     <!-- 产品信息 -->