退款

src/app.json

@@ -27,7 +27,9 @@
     "pages/confirmOrder/confirmOrder",
     "pages/myAddress/myAddress",
     "pages/addAddress/addAddress",
-    "pages/order/order"
+    "pages/order/order",
+    "pages/refundDetail/refundDetail",
+    "pages/refund/refund"
   ],
   "subPackages": [
     {

src/app.wxss

@@ -35,7 +35,7 @@ page {
   margin-right: 0;
   padding-left: 0;
   padding-right: 0;
-
+  border-radius: 0;
 }
 .btn:active{
   opacity: 0.5;
@@ -50,6 +50,7 @@ page {
   background-color: #CB3C3C;
   color: #ffffff;
   border: 1px solid #CB3C3C;
+  font-size: 25rpx;
 }
 .btn-outline{
   background: none;
@@ -69,7 +70,6 @@ page {
 .btn-lg{
   height: 88rpx;
   line-height: 88rpx;
-
 }
 
 

src/pages/refund/refund.js

+// pages/refund/refund.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    cartList: [
+      {
+        imgUrl: '',
+        name: '1111',
+        sku: '1',
+        price: '￥456',
+        shows: '',
+      },
+      {
+        imgUrl: '',
+        name: '222',
+        sku: '2',
+        price: '￥222',
+        shows: ''
+      }
+    ],
+    reasonList:[
+      {
+        id:'0',
+        name:'111'
+      },
+      {
+        id: '2',
+        name: '222'
+      }
+    ],
+    reasonIndex:'0'
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})
\ No newline at end of file

src/pages/refund/refund.json

+{
+  "navigationBarTitleText": "退款/售后",
+  "usingComponents": {}
+}
\ No newline at end of file

src/pages/refund/refund.wxml

+<!--pages/refund/refund.wxml-->
+<view class="page-refund">
+  <view class="select-pro">选择商品</view>
+   <view class="cart-content">
+    <view class="cart-item" wx:for="{{cartList}}" wx:key="{{index}}">
+      <view class="cart-list" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" style="{{item.shows}}" data-index="{{index}}">
+        <view class="select-radio" catchtap="selectPro" data-index="{{index}}">
+          <view class="{{item.isSelect ? 'theme-color' : ''}} circle-radio"  >
+            <image wx:if="{{item.isSelect}}" class="tick-success" src="/assets/imgs/7_1_0/tick-success.png" mode="widthFix"></image>
+          </view>
+        </view>
+        <view class="pro-info">
+          <image class="pro-img" src="/assets/imgs/7_1_0/icon.png" mode="widthFix"></image>
+          <view class="pro-right-info">
+            <view class="pro-name">{{item.name}}</view>
+            <view class="pro-sku">{{item.sku}}</view>
+            <view class="pro-price">
+              <view class="price">{{item.price}}</view>
+              <view class="pro-num-edit">
+                    <button class="redus-num" data-index="{{j}}" catchtap="minusNum">-</button>
+                    <input class="pro-num-edit-input" type="number" data-index="{{j}}" catchtap bindblur="blurNum" bindinput="inputNum" value="{{product.quantity}}"></input>
+                    <button class="add-num" data-index="{{j}}" catchtap="addNum">+</button>
+                  </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+   
+  </view>
+  <view class="refund-info">
+    <view class="form">
+      <view class="form-label">退款原因</view>
+      <view class="form-picker">
+        <picker bindchange="bindSelectRefundReason" value="{{reasonIndex}}" range="{{reasonList}}" range-key="name" class="reason-picker">
+        <view class="picker">
+          当前选择：{{reasonList[reasonIndex].name}}
+        </view>
+      </picker>
+      </view>
+    </view>
+    <view class="form">
+      <view class="form-label">退款金额</view>
+      <view class="form-picker">
+        <text class="refund-price">￥398</text>
+      </view>
+    </view>
+    <view class="form">
+      <view class="form-label block-label">申请说明</view>
+      <view class="form-input">
+        <input type="textarea" class="desc" placeholder="请您详细填写退款说明（最多200字）" maxlength="200"></input>
+      </view>
+    </view>
+    <view class="form">
+      <view class="form-label">上传凭证 <text class="img-number">最多5张</text></view>
+      <view class="form-input">
+        <input type="textarea"></input>
+      </view>
+    </view>
+  </view>
+  <view class="submit">
+    <button class="btn btn-primary btn-lg">提交申请</button>
+  </view>
+</view>

src/pages/refund/refund.wxss

+/* pages/refund/refund.wxss */
+page{
+  background-color: #f9f9f9;
+}
+.select-pro{
+  padding: 20rpx 40rpx;
+  color: #333333;
+  font-size: 26rpx;
+  background-color: #ffffff;
+}
+.cart-content{
+  background-color: #ffffff;
+}
+.cart-list,.overdue-list{
+  width: 692rpx;
+  display: flex;
+  padding: 30rpx 32rpx 0 30rpx;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.pro-img{
+  width: 180rpx;
+  height: 180rpx;
+}
+.pro-info{
+  margin-left: 24rpx;
+  flex: 1;
+  display: flex;
+  border-bottom: 1rpx solid rgba(151,151,151,0.3);
+  padding-bottom: 32rpx;
+  align-items: center;
+}
+.cart-item:last-child .pro-info{
+  border-bottom: none;
+}
+.overdue-list:last-child .pro-info{
+  border-bottom: none;
+}
+
+.pro-right-info{
+  flex: 1;
+  margin-left: 26rpx;
+}
+.pro-name{
+  font-size: 25rpx;
+  width: 425rpx;
+  color: #333333;
+}
+.pro-sku{
+  color: #aaaaaa;
+  font-size: 22rpx;
+  margin-top: 10rpx;
+}
+.pro-price{
+  display: flex;
+  justify-content: space-between;
+  margin-top: 16rpx;
+}
+.pro-num-edit{
+  display: flex;
+  width:107rpx;
+}
+ .pro-num-edit button {
+  padding: 4rpx;
+  width: 80rpx;
+  height: 40rpx;
+  line-height: 40rpx;
+  color: #868686;
+  font-size: 28rpx;
+  background-color: #ffffff;
+}
+ .pro-num-edit button::after {
+  border-radius: 0;
+  border: 0;
+}
+ .pro-num-edit-input {
+  line-height: 40rpx;
+  height: 40rpx ;
+  text-align: center;
+  color: #666660;
+  font-size: 28rpx;
+}
+.pro-price .price{
+  font-size: 32rpx;
+  color: #cb3c3c;
+  font-weight: 600;
+}
+.circle-radio{
+  width: 32rpx;
+  height: 32rpx;
+  border-radius: 50%;
+  border: 1rpx solid rgba(0, 0, 0, 0.2);
+  line-height: 26rpx;
+  text-align: center;
+}
+.tick-success{
+  width: 18rpx;
+}
+.refund-info{
+  margin-top: 22rpx;
+  background-color: #ffffff;
+  padding: 26rpx 30rpx 35rpx;
+}
+.form{
+  margin-top: 27rpx;
+}
+.form-label{
+  font-size: 26rpx;
+  color: #333333;
+  height: 68rpx;
+  line-height: 68rpx;
+  display: inline-block;
+}
+.img-number{
+  font-size: 18rpx;
+  color: #bbbbbb;
+  margin-left: 15rpx;
+}
+.reason-picker{
+  width: 499rpx;
+  height: 68rpx;
+  line-height: 68rpx;
+  border-radius: 5rpx;
+  border: 1px solid rgba(170, 170, 170, 1);
+  padding: 0 20rpx;
+  color: #aaaaaa;
+  font-size: 22rpx;
+}
+.form-picker{
+  display: inline-block;
+  margin-left: 25rpx;
+}
+.refund-price{
+  font-size: 28rpx;
+  color: #cb3c3c;
+}
+.desc{
+  width: 632rpx;
+  height: 104rpx;
+  border-radius: 5rpx;
+  border: 1px solid rgba(170, 170, 170, 1);
+  padding: 21rpx 29rpx;
+}
\ No newline at end of file

src/pages/refundDetail/refundDetail.js

+// pages/refundDetail/refundDetail.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})
\ No newline at end of file

src/pages/refundDetail/refundDetail.json

+{
+  "navigationBarTitleText": "退单详情",
+  "usingComponents": {}
+}
\ No newline at end of file

src/pages/refundDetail/refundDetail.wxml

+<!--pages/refundDetail/refundDetail.wxml-->
+<view class="page-refund-detail">
+  <view>
+  </view>
+</view>

src/pages/refundDetail/refundDetail.wxss

+/* pages/refundDetail/refundDetail.wxss */
\ No newline at end of file

src/project.config.json

@@ -39,7 +39,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 22,
+			"current": 24,
 			"list": [
 				{
 					"id": -1,
@@ -185,6 +185,20 @@
 					"id": -1,
 					"name": "我的",
 					"pathName": "pages/my/my",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "退单详情",
+					"pathName": "pages/refundDetail/refundDetail",
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "退款",
+					"pathName": "pages/refund/refund",
 					"scene": null
 				}
 			]