add:个人信息板块，发表评论页面

app.json

@@ -1,15 +1,16 @@
 {
   "pages":[
     
+    "pages/commentinfo/commentinfo",
+    "pages/product/product",
+    "pages/index/index",
     "pages/person/person",
+    "pages/personinfo/personinfo",
     "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"
 
    
@@ -30,20 +31,20 @@
     "list": [{
       "pagePath": "pages/index/index",
       "text": "首页",
-      "iconPath": "images/index.jpg",
-      "selectedIconPath": "images/index-active.jpg"
+      "iconPath": "images/icons/index.jpg",
+      "selectedIconPath": "images/icons/index-active.jpg"
     },
     {
       "pagePath": "pages/personorder/personorder",
       "text": "订单",
-      "iconPath": "images/order.jpg",
-      "selectedIconPath": "images/order-active.jpg"
+      "iconPath": "images/icons/order.jpg",
+      "selectedIconPath": "images/icons/order-active.jpg"
     },
     {
       "pagePath": "pages/person/person",
       "text": "我的",
-      "iconPath": "images/person.jpg",
-      "selectedIconPath": "images/person-active.jpg"
+      "iconPath": "images/icons/person.jpg",
+      "selectedIconPath": "images/icons/person-active.jpg"
     }]
   },
   "style": "v2",

pages/commentinfo/commentinfo.js

@@ -0,0 +1,108 @@
+// pages/commentinfo/commentinfo.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    shopStars:0,
+    productStars:0,
+    textWidth:0,
+    wordsNum:0,
+    limitNum:100,
+    outLimit:false,
+    commentText:"w d "
+  },
+
+  changeShopStars:function (e) {  
+    this.setData({
+      shopStars:e.currentTarget.dataset.i
+
+    })
+  },
+  changeProductStars:function (e) {  
+    this.setData({
+      productStars:e.currentTarget.dataset.i
+
+    })
+  },
+  changeComment:function (e) {  
+    // console.log(e.detail)
+    // console.log(e.detail.value.length)
+    var length = e.detail.value.length;
+    if(length>this.data.limitNum){
+      this.setData({
+        outLimit:true
+      })
+    }
+    this.setData({
+      wordsNum:e.detail.value.length
+    })
+  },
+  setCommenText:function (e) {  
+    console.log("调用了")
+    console.log(e.detail)
+    this.setData({
+      commentText:e.detail.value
+    })
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    var textWidth =wx.getSystemInfoSync().windowWidth * (750 / wx.getSystemInfoSync().windowWidth)*0.9;
+    this.setData({
+      textWidth
+    })
+    
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/commentinfo/commentinfo.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/commentinfo/commentinfo.scss

@@ -0,0 +1,48 @@
+.container {
+    background-color: #F7F7F7;
+    letter-spacing: 8rpx;
+    .shop-stars,.product-stars {
+        height: 100rpx;
+        display: flex;
+        justify-content: flex-start;
+        margin: 10rpx 0;
+        background-color: #fff;
+        .title{
+            margin:0 30rpx;
+            line-height: 100rpx;
+        }
+        .info {
+            display: flex;
+            justify-content: flex-start;
+            margin: 20rpx;
+            .star{
+                margin: 0 5rpx;
+            }
+        }
+    }
+    .comment-text{
+        width: 100%;
+        background-color: #fff;
+        .words{
+            width: 90%;
+            margin: 10rpx auto;
+            padding-top: 20rpx;
+            background-color: #fcfcfc;
+            .commtext{
+                
+            }
+            .words-num{
+                display: flex;
+                justify-content: flex-end;
+                margin-bottom: 20rpx;
+                color: #707070;
+                .red{
+                    color: red;
+                }
+            }
+            
+        }
+    }
+
+  
+}

pages/commentinfo/commentinfo.wxml

@@ -0,0 +1,69 @@
+<!--pages/commentinfo/commentinfo.wxml-->
+<view class="container">
+    <view class="shop-stars card">
+        <view class="title">店铺评分</view>
+        <view class="info">
+            <view class="star" data-i="1" bindtap="changeShopStars">
+                <mp-icon icon="star" color="#E15F3D" size="25" type="{{shopStars>0?'filled':'outline'}}"></mp-icon>
+            </view>
+            <view class="star" data-i="2" bindtap="changeShopStars">
+
+                <mp-icon icon="star" color="#E15F3D" size="25" type="{{shopStars>1?'filled':'outline'}}"></mp-icon>
+            </view>
+            <view class="star" data-i="3" bindtap="changeShopStars">
+
+                <mp-icon icon="star" color="#E15F3D" size="25" type="{{shopStars>2?'filled':'outline'}}"></mp-icon>
+            </view>
+            <view class="star" data-i="4" bindtap="changeShopStars">
+
+                <mp-icon icon="star" color="#E15F3D" size="25" type="{{shopStars>3?'filled':'outline'}}"></mp-icon>
+            </view>
+            <view class="star" data-i="5" bindtap="changeShopStars">
+
+                <mp-icon icon="star" color="#E15F3D" size="25" type="{{shopStars>4?'filled':'outline'}}"></mp-icon>
+            </view>
+        </view>
+    </view>
+    <view class="product-stars card">
+        <view class="title">产品评分</view>
+        <view class="info">
+            <view class="star" data-i="1" bindtap="changeProductStars">
+                <mp-icon icon="star" color="#E15F3D" size="25" type="{{productStars>0?'filled':'outline'}}"></mp-icon>
+            </view>
+            <view class="star" data-i="2" bindtap="changeProductStars">
+
+                <mp-icon icon="star" color="#E15F3D" size="25" type="{{productStars>1?'filled':'outline'}}"></mp-icon>
+            </view>
+            <view class="star" data-i="3" bindtap="changeProductStars">
+
+                <mp-icon icon="star" color="#E15F3D" size="25" type="{{productStars>2?'filled':'outline'}}"></mp-icon>
+            </view>
+            <view class="star" data-i="4" bindtap="changeProductStars">
+
+                <mp-icon icon="star" color="#E15F3D" size="25" type="{{productStars>3?'filled':'outline'}}"></mp-icon>
+            </view>
+            <view class="star" data-i="5" bindtap="changeProductStars">
+
+                <mp-icon icon="star" color="#E15F3D" size="25" type="{{productStars>4?'filled':'outline'}}"></mp-icon>
+            </view>
+        </view>
+    </view>
+    <view class="comment-text">
+        <view class="words f14">
+
+            <textarea bindblur="setCommenText" style="height: 200rpx;width: {{textWidth}}rpx;" auto-focus="true"
+                class="comm-text" placeholder="对产品跟服务满意吗？（评论限制{{limitNum}}字以内）" bindinput="changeComment"/>
+            <view class="words-num">
+                    <view class="word {{outLimit?'red':''}}">
+                        {{wordsNum}}
+                    </view>
+                    <view >
+                        /{{limitNum}}
+                    </view>
+                </view>
+            </view>
+        <view class="comment-img"></view>
+    </view>
+    
+    <view class="comment-btn"></view>
+</view>

pages/commentinfo/commentinfo.wxss

@@ -0,0 +1,50 @@
+.container {
+  background-color: #F7F7F7;
+  letter-spacing: 8rpx;
+}
+
+.container .shop-stars, .container .product-stars {
+  height: 100rpx;
+  display: flex;
+  justify-content: flex-start;
+  margin: 10rpx 0;
+  background-color: #fff;
+}
+
+.container .shop-stars .title, .container .product-stars .title {
+  margin: 0 30rpx;
+  line-height: 100rpx;
+}
+
+.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 {
+  margin: 0 5rpx;
+}
+
+.container .comment-text {
+  width: 100%;
+  background-color: #fff;
+}
+
+.container .comment-text .words {
+  width: 90%;
+  margin: 10rpx auto;
+  padding-top: 20rpx;
+  background-color: #fcfcfc;
+}
+
+.container .comment-text .words .words-num {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 20rpx;
+  color: #707070;
+}
+
+.container .comment-text .words .words-num .red {
+  color: red;
+}

pages/person/person.js

@@ -6,7 +6,7 @@ Page({
    */
   data: {
     person:{
-      tel:"18822224444",
+      tel:"18822225555",
       userName:"伊布"
     }
   },

pages/person/person.scss

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

pages/person/person.wxml

@@ -1,6 +1,6 @@
 <!--pages/person/person.wxml-->
 <view class="container">
-    <view class="person card">
+    <navigator class="person card" url="../personinfo/personinfo">
         <view class="person-info">
             <view class="user-name f18 c-202020">{{person.userName}}
                 <image class="" src="../../images/icons/next.png" >
@@ -14,15 +14,26 @@
 
             </image>
         </view>
-    </view>
+    </navigator>
     <view class="order">
         <image class="icons" src="../../images/icons/order.png">
 
         </image>
-        <view class="order-text">我的订单</view>
+        <view class="order-text">我的订单
+            
+        </view>
+        <image class="next-gray" src="../../images/icons/next-gray.png">
+                
+        </image>
+
     </view>
-    <navigator class="assess">
+    <navigator class="assess" hover-class="none" url="../comments/comments?title=我的评论">
         <image class="icons" src="../../images/icons/assess.png"></image>
-        <view class="assess-text">我的点评</view>
+        <view class="assess-text">我的点评
+            
+        </view>
+        <image class="next-gray" src="../../images/icons/next-gray.png">
+                
+        </image>
     </navigator>
 </view>

pages/person/person.wxss

@@ -45,6 +45,7 @@
   background-color: #fff;
   border-bottom: 1px solid #ebeef5;
   justify-content: flex-start;
+  position: relative;
 }
 
 .container .order .icons {
@@ -58,6 +59,14 @@
   letter-spacing: 3rpx;
 }
 
+.container .order .next-gray {
+  width: 30rpx;
+  height: 30rpx;
+  position: absolute;
+  right: 30rpx;
+  top: 45rpx;
+}
+
 .container .assess {
   display: flex;
   width: 100%;
@@ -65,6 +74,7 @@
   background-color: #fff;
   border-bottom: 1px solid #ebeef5;
   justify-content: flex-start;
+  position: relative;
 }
 
 .container .assess .icons {
@@ -77,3 +87,11 @@
   line-height: 120rpx;
   letter-spacing: 3rpx;
 }
+
+.container .assess .next-gray {
+  width: 30rpx;
+  height: 30rpx;
+  position: absolute;
+  right: 30rpx;
+  top: 45rpx;
+}

pages/personinfo/personinfo.js

@@ -5,14 +5,62 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    endDate: "",
+    birth: "1993-12-12",
+    sex: 0,
+    array: ["男", "女"],
+    tel: "18822224444",
+    userName: "伊布",
+    imgUrl:"../../images/headImg.jpg"
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
+    var d = new Date();
+    var endDate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
+    this.setData({
+      endDate
+    })
+  },
 
+  changeUserName: function (e) {
+    this.setData({
+      userName: e.detail.value
+    })
+  },
+  changeTel: function (e) {
+    this.setData({
+      tel: e.detail.value
+    })
+  },
+  changeBirth: function (e) {
+    this.setData({
+      birth: e.detail.value
+    })
+  },
+  changeSex: function (e) {
+    console.log(e.detail)
+    this.setData({
+      sex: e.detail.value
+    })
+  },
+  upload: function () {
+    var _this = this;
+    wx.chooseImage({
+      count: 1, // 默认9      
+      sizeType: ['original', 'compressed'],
+      // 指定是原图还是压缩图，默认两个都有      
+      sourceType: ['album', 'camera'],
+      // 指定来源是相册还是相机，默认两个都有    
+      success: function (res) {
+        // 返回选定照片的本地文件路径tempFilePath可以作为img标签的src属性显示图片        
+        _this.setData({
+          imgUrl: res.tempFilePaths
+        })
+      }
+    })
   },
 
   /**

pages/personinfo/personinfo.json

@@ -1,3 +1,14 @@
 {
-  "usingComponents": {}
+  "disableScroll": true,
+  "usingComponents": {
+    "mp-icon": "weui-miniprogram/icon/icon"
+   
+    
+  },
+  "navigationBarBackgroundColor": "#343434",
+  "navigationBarTextStyle": "white",
+  "navigationBarTitleText": "个人",
+  "backgroundColor": "#fff",
+  "backgroundTextStyle": "light"
+
 }

pages/personinfo/personinfo.scss

@@ -0,0 +1,54 @@
+.container {
+    background-color: #F7F7F7;
+    min-height: 1200rpx;
+    letter-spacing: 3rpx;
+    .head-img {
+        height: 200rpx;
+        display: flex;
+        justify-content: space-between;
+        background-color: #fff;
+        padding: 0 50rpx;
+        margin-bottom: 20rpx;
+        .title{
+            height: 200rpx;
+            line-height: 200rpx;
+        }
+        .info {
+            width: 150rpx;
+            height: 150rpx;
+            border-radius: 50%;
+            margin-top: 25rpx;
+            >image {
+                width: 150rpx;
+                height: 150rpx;
+                border-radius: 50%;
+            }
+        }
+    }
+    .user-name,.sex,.birth,.tel{
+        display: flex;
+        justify-content: space-between;
+        height: 100rpx;
+        background-color: #fff;
+        position: relative;
+        padding: 0 50rpx;
+        
+        .title,.info{
+            line-height: 100rpx;
+        }
+        .info{
+            text-align: right;
+            color: #707070;
+            >input{
+                height: 100%;
+            }
+        }
+        .icon{
+            width: 30rpx;
+            height: 30rpx;
+            position: absolute;
+            top: 38rpx;
+            right: 15rpx;
+        }
+    }
+}

pages/personinfo/personinfo.wxml

@@ -1,2 +1,52 @@
 <!--pages/personinfo/personinfo.wxml-->
-<text>pages/personinfo/personinfo.wxml</text>
+<view class="container">
+    <view class="head-img card">
+        <view class="title">头像</view>
+        <view class="info" bindtap='upload'>
+            <image class="" src="{{imgUrl}}">
+
+            </image>
+        </view>
+    </view>
+    <view class="user-name">
+        <view class="title">昵称</view>
+        <view class="info" >
+            <input type="text" value="{{userName}}" name="user" bindblur = "changeUserName"/>
+        </view>
+        <image class="icon" src="../../images/icons/next-gray.png" >
+
+        </image>
+    </view>
+    <view class="sex">
+        <view class="title">性别</view>
+        <view class="info">
+            <picker bindchange="bindPickerChange" value="{{sex}}" range="{{array}}" bindchange="changeSex">
+                {{array[sex]}}
+            </picker>
+        </view>
+        <image class="icon" src="../../images/icons/next-gray.png">
+
+        </image>
+    </view>
+    <view class="birth">
+        <view class="title">生日</view>
+        <view class="info">
+            <picker mode="date" value="{{date}}" start="1970-01-01" end="{{endDate}}" bindchange="changeBirth">
+                {{birth}}
+            </picker>
+        </view>
+        <image class="icon" src="../../images/icons/next-gray.png">
+
+        </image>
+
+    </view>
+    <view class="tel">
+        <view class="title">手机</view>
+        <view class="info">
+            <input type="text" value="{{tel}}" bindblur = "changeTel"/>
+        </view>
+        <image class="icon" src="../../images/icons/next-gray.png">
+
+        </image>
+    </view>
+</view>

pages/personinfo/personinfo.wxss

@@ -1 +1,62 @@
-/* pages/personinfo/personinfo.wxss */
+.container {
+  background-color: #F7F7F7;
+  min-height: 1200rpx;
+  letter-spacing: 3rpx;
+}
+
+.container .head-img {
+  height: 200rpx;
+  display: flex;
+  justify-content: space-between;
+  background-color: #fff;
+  padding: 0 50rpx;
+  margin-bottom: 20rpx;
+}
+
+.container .head-img .title {
+  height: 200rpx;
+  line-height: 200rpx;
+}
+
+.container .head-img .info {
+  width: 150rpx;
+  height: 150rpx;
+  border-radius: 50%;
+  margin-top: 25rpx;
+}
+
+.container .head-img .info > image {
+  width: 150rpx;
+  height: 150rpx;
+  border-radius: 50%;
+}
+
+.container .user-name, .container .sex, .container .birth, .container .tel {
+  display: flex;
+  justify-content: space-between;
+  height: 100rpx;
+  background-color: #fff;
+  position: relative;
+  padding: 0 50rpx;
+}
+
+.container .user-name .title, .container .user-name .info, .container .sex .title, .container .sex .info, .container .birth .title, .container .birth .info, .container .tel .title, .container .tel .info {
+  line-height: 100rpx;
+}
+
+.container .user-name .info, .container .sex .info, .container .birth .info, .container .tel .info {
+  text-align: right;
+  color: #707070;
+}
+
+.container .user-name .info > input, .container .sex .info > input, .container .birth .info > input, .container .tel .info > input {
+  height: 100%;
+}
+
+.container .user-name .icon, .container .sex .icon, .container .birth .icon, .container .tel .icon {
+  width: 30rpx;
+  height: 30rpx;
+  position: absolute;
+  top: 38rpx;
+  right: 15rpx;
+}