订单评价, WIP

pages/rate/rate.js

@@ -0,0 +1,97 @@
+// pages/rate/rate.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    stars: 0,
+    description: ""
+  },
+  setStarNum(e) {
+    const { stars } = e.currentTarget.dataset
+    this.setData({
+      stars
+    })
+  },
+  handleTextInput(e) {
+    this.setData({
+      description: e.detail.value
+    })
+  },
+  submitRate() {
+    const { stars, description } = this.data
+    if (stars === 0) {
+      wx.showToast({
+        title: '请选择评分',
+        icon: "error"
+      })
+      return
+    }
+    if (!description) {
+      wx.showToast({
+        title: '请输入评价内容',
+        icon: "error"
+      })
+      return
+    }
+    wx.showToast({
+      title: 'TODO: WIP',
+    })
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

pages/rate/rate.json

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

pages/rate/rate.wxml

@@ -0,0 +1,13 @@
+<!--pages/rate/rate.wxml-->
+<view style="padding: 48rpx;">
+  <view class="star-rate">
+    <text class="title">商品评价</text>
+    <view class="stars">
+      <image wx:for="{{5}}" wx:key="item" data-stars="{{item+1}}" bind:tap="setStarNum" src="{{item >= stars ? '/icon/star-gray.svg' : '/icon/star-solid.svg'}}" class="star" />
+    </view>
+  </view>
+  <view class="rate-description">
+    <textarea placeholder="请输入评价详情" bindinput="handleTextInput" value="{{description}}"></textarea>
+  </view>
+  <button style="margin-top: 48rpx;" bind:tap="submitRate" type="primary">发布评价</button>
+</view>

pages/rate/rate.wxss

@@ -0,0 +1,31 @@
+/* pages/rate/rate.wxss */
+
+.star-rate {
+  display: flex;
+  align-items: center;
+}
+
+.star-rate .stars {
+  display: flex;
+  margin-left: 16rpx;
+}
+
+.star-rate .title {
+  font-size: 36rpx;
+}
+
+.star-rate .stars .star {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.star-rate .stars .star:not(:first-of-type) {
+  margin-left: 12rpx;
+}
+
+.rate-description {
+  margin-top: 48rpx;
+  border: 1px solid rgb(209 213 219);
+  border-radius: 12rpx;
+  padding: 16rpx
+}