售后取消功能完成

pages/DetailsOfRefund/DetailsOfRefund.js

@@ -1,66 +1,669 @@
 // pages/DetailsOfRefund/DetailsOfRefund.js
+var http = require('../../utils/http.js');
+var util = require('../../utils/util.js');
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-    
+    showView: true, //隐藏是展示
+    applyTime: '', //申请时间
+    applyType: 1, //申请类型:1,仅退款,2退款退货
+    goodsNum: '', //退货数量
+    handelTime: '', //卖家处理时间
+    orderAmount: '', //订单总金额
+    orderItems: {}, //订单项 
+    refundAmount: '', //退款金额
+    refundDelivery: [], //收货地址对象
+    refundId: '', //记录ID
+    refundTime: '', //退款时间
+    returnMoneySts: 1, //处理退款状态:(1.买家申请 2.卖家接受 3.买家发货 4.卖家收货 5.退款成功 6.买家撤回申请 7.商家拒绝 -1.退款关闭)
+    updateTime: '', //更新时间
+    refundSn: '', //退款编号
+    rejectMessage: '', //拒绝理由
+    buyerReason: '', //退款原因
+    shopName: '', //店铺名称
+    refundScore: 0, // 退款积分
+    addCarshow: false,
+    selectTimeshow: false,
+    flowShow: false,
+    userAddrDto: {},
+    payer: '',
+    sendPay:'',
+    sts: 0,
+    nomDay: '',
+    tomorrowDay: '',
+    timeIntervals: [],
+    columns: [],
+    combinedTextValue: '',
+    sendInfo: {},
+    currentSelectedIndex: -1, // 初始没有选中项，索引设为 -1
+    steps: [{
+        text: '步骤一',
+        desc: '描述信息',
+        inactiveIcon: 'location-o',
+        activeIcon: 'success',
+      },
+      {
+        text: '步骤二',
+        desc: '描述信息',
+        inactiveIcon: 'circle',
+        activeIcon: 'plus',
+      },
+      {
+        text: '步骤三',
+        desc: '描述信息',
+        inactiveIcon: 'circle',
+        activeIcon: 'cross',
+      },
+      {
+        text: '步骤四',
+        desc: '描述信息',
+        inactiveIcon: 'circle',
+        activeIcon: 'fail',
+      },
+    ],
+    cancelPay: false,
+    remainingTime: '',
+    timeFormat: '',
+    orderNumSend:'',
+    countdown_hours:'',
+    countdown_minutes:''
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad(options) {
+  onLoad: function (options) {
+    this.setData({
+      orderNumSend:options.orderNumber
+    })
+    this.getTime()
+    this.setData({
+      refundSn: options.refundSn,
+    });
+    if(options.userAddrDto){
+      this.setData({
+        userAddrDto: JSON.parse(options.userAddrDto)
+      })
+    }
+    //获取退款申请详情
+    this.getRefundDetail()
+  },
+
+  /**
+   * 更多说明&收起
+   */
+  onChangeShowState: function () {
+    var that = this;
+    that.setData({
+      showView: (!that.data.showView)
+    })
+  },
+  // 发起配送
+  sendDistribution: function () {
+    this.setData({
+      addCarshow: true
+    })
+  },
+  onClose: function () {
+    this.setData({
+      addCarshow: false
+    })
+  },
+  timeOnClose: function () {
+    this.setData({
+      selectTimeshow: false
+    })
+  },
+  submitBtn:function(){
+    if (Object.keys(this.data.sendInfo).length === 0) {
+      wx.showToast({
+        title: '请先选择取件时间',
+        icon: 'none'
+      })
+      return
+    }
+    this.submitExpress()
+  },
+  submitExpress:function(){
+    var params = {
+      url: `/p/orderRefund/submitExpress/${this.data.refundSn}`,
+      method: "GET",
+      callBack: res => {
+        wx.showToast({
+          title: '提交成功',
+          icon: 'none',
+        })
+        this.setData({
+          addCarshow:false
+        })
+        this.getRefundDetail()
+      }
+    };
+    http.request(params);
+  },
+  // 辅助函数，将中文日期格式转换为YYYY-MM-DD格式
+  formatDate: function (dateStr) {
+    let parts = dateStr.match(/(\d+)月(\d+)日/);
+    if (parts) {
+      let month = parseInt(parts[1]);
+      let day = parseInt(parts[2]);
+      let year = new Date().getFullYear();
+      return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
+    }
+    return dateStr;
+  },
+  selectUpTime: function () {
+    this.getDayTime()
+    this.getTime()
+    let day = []
+    day.push({
+      id: 1,
+      text: this.data.nomDay
+    }, {
+      id: 2,
+      text: this.data.tomorrowDay
+    })
+    let data = []
+    data.push({
+      values: day,
+      className: 'column1',
+    }, {
+      values: this.data.timeIntervals,
+      defaultIndex: 2,
+      className: 'column2',
+    })
+    this.setData({
+      selectTimeshow: true,
+      columns: data
+    })
+  },
 
+  // 获取今明天并转换
+  getDayTime: function () {
+    const today = new Date();
+    const month = (today.getMonth() + 1).toString().padStart(2, '0');
+    const day = today.getDate().toString().padStart(2, '0');
+    const todayFormat = `${month}月${day}日`;
+    const tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000);
+    const tomorrowMonth = (tomorrow.getMonth() + 1).toString().padStart(2, '0');
+    const tomorrowDay = tomorrow.getDate().toString().padStart(2, '0');
+    const tomorrowFormat = `${tomorrowMonth}月${tomorrowDay}日`;
+    this.setData({
+      nomDay: todayFormat,
+      tomorrowDay: tomorrowFormat
+    })
+  },
+
+  // 时间段转换
+  getTime: function (selectedDate) {
+    const timeIntervals = [];
+    // 如果没有传入日期参数（首次加载等情况），则使用当前日期
+    const now = selectedDate ? new Date(selectedDate) : new Date();
+    if (isNaN(now.getTime())) {
+      console.error('传入的日期格式不正确，无法解析为有效日期');
+      return;
+    }
+    const currentTimeStamp = now.getTime();
+    for (let hour = 0; hour < 23; hour++) {
+      const start = hour.toString().padStart(2, '0') + ':00';
+      const end = (hour + 1).toString().padStart(2, '0') + ':00';
+      const interval = start + '~' + end;
+      // 创建对应时间段开始时间的日期对象
+      const startDate = new Date(now);
+      startDate.setHours(hour, 0, 0, 0);
+      const startTimestamp = startDate.getTime();
+      // 通过比较时间戳来判断时间段是否已过去
+      const hidden = startTimestamp < currentTimeStamp;
+      timeIntervals.push({
+        text: interval,
+        disabled: hidden
+      });
+    }
+    this.setData({
+      timeIntervals
+    });
+  },
+
+  // 日期转换方法
+  convertDateToNumber: function (dateStr) {
+    if (!dateStr) {
+      throw new Error('日期字符串不能为空');
+    }
+    dateStr = dateStr.trim();
+    let parts = dateStr.match(/(\d+)月(\d+)日/);
+    if (!parts) {
+      throw new Error('日期格式不正确，请按照XX月XX日的格式输入');
+    }
+    return new Date(2024, parseInt(parts[1]) - 1, parseInt(parts[2]));
+  },
+
+  // 选择器change事件
+  onChange(event) {
+    const {
+      picker,
+      value,
+      index
+    } = event.detail;
+    value.map((item, index) => {
+      if (index === 0) {
+        var date1 = this.convertDateToNumber(item.text);
+        var date2 = new Date();
+        if (date1 > date2) {
+          this.updateTimeIntervalsDisabled(item.id);
+        } else {
+          this.updateTimeIntervalsDisabled(item.id);
+        }
+      }
+    })
+  },
+  onConfirm(event) {
+    const {
+      picker,
+      value,
+      index
+    } = event.detail;
+    var currentDate = new Date();
+    var currentYear = currentDate.getFullYear();
+    if (value.length >= 2) {
+      const text1 = value[0].text; //text1为12月25日
+      const text2 = value[1].text.slice(0, 5); //text2为15:00
+      const month = ("0" + (parseInt(text1.split("月")[0]))).slice(-2); // 将中文月格式转换为数字（注意要减1，因为月份是从0开始计数），并补0
+      const day = text1.split("月")[1].split("日")[0];
+      const hour = text2.split(":")[0];
+      const minute = text2.split(":")[1];
+      const combinedText = `${currentYear}-${month}-${day} ${hour}:${minute}:00`;
+      let dateObj = new Date(combinedText);
+      let timestamp = Math.floor(dateObj.getTime() / 1000);
+      // 获取配送费
+      let that = this
+      var params = {
+        url: "/p/orderRefund/refundPrice",
+        method: "GET",
+        data: {
+          refundSn: this.data.refundSn, //退款编号
+          deliveryTime: timestamp
+        },
+        callBack: function (res) {
+          that.setData({
+            sendInfo: res
+          })
+        }
+      };
+      http.request(params);
+      this.setData({
+        combinedTextValue: combinedText,
+        selectTimeshow: false
+      });
+    }
+  },
+  onCancel: function () {
+    this.setData({
+      selectTimeshow: false
+    })
+  },
+  toPaySend: function () {
+    if (Object.keys(this.data.sendInfo).length === 0) {
+      wx.showToast({
+        title: '请先选择取件时间',
+        icon: 'none'
+      })
+      return
+    } else {
+      let that = this
+      wx.showLoading({
+        mask: true
+      });
+      var params = {
+        url: "/p/order/refundPay",
+        method: "POST",
+        data: {
+          payType: 1,
+          orderType: 1,
+          orderNumbers: this.data.refundSn
+        },
+        callBack: (res) => {
+          wx.hideLoading();
+          wx.requestPayment({
+            timeStamp: res.timeStamp,
+            nonceStr: res.nonceStr,
+            package: res.package,
+            signType: res.signType,
+            paySign: res.paySign,
+            success: e => {
+              wx.showModal({
+                title: '支付成功',
+                content: '',
+                showCancel: false,
+                success: () => {
+                  this.setData({
+                    addCarshow:false
+                  })
+                  this.submitExpress()
+                }
+              })
+            },
+            fail: err => {
+              // this.countdownTime()
+              // that.setData({
+              //   cancelPay: true,
+              //   addCarshow:false
+              // })
+            }
+          })
+        }
+      };
+      http.request(params);
+    }
+  },
+  atoncePaySend: function () {
+    wx.showLoading({
+      mask: true
+    });
+    var params = {
+      url: "/p/order/refundPay",
+      method: "POST",
+      data: {
+        payType: 1,
+        orderType: 1,
+        orderNumbers: this.data.refundSn
+      },
+      callBack: (res) => {
+        wx.hideLoading();
+        wx.requestPayment({
+          timeStamp: res.timeStamp,
+          nonceStr: res.nonceStr,
+          package: res.package,
+          signType: res.signType,
+          paySign: res.paySign,
+          success: e => {
+            wx.showModal({
+              title: '支付成功',
+              content: '',
+              showCancel: false,
+              success: () => {
+                // this.setData({
+                //   cancelPay: false
+                // })
+                this.getRefundDetail()
+              }
+            })
+          },
+          fail: err => {}
+        })
+      }
+    };
+    http.request(params);
+  },
+  // 倒计时
+  countdownTime: function () {
+    // 十五分钟对应的毫秒数
+    const fifteenMinutesInMs = 15 * 60 * 1000;
+    const targetTimeStamp = this.data.sendInfo.touchTime;
+    // 计算增加十五分钟后的时间戳
+    const newTimeStamp = targetTimeStamp + fifteenMinutesInMs;
+    const currentTimeStamp = newTimeStamp;
+    const diff = currentTimeStamp - targetTimeStamp;
+    if (diff > 0) {
+      this.setData({
+        remainingTime: diff,
+      });
+      this.countdown();
+    } else {
+    }
   },
+  // 倒计时
+  countdown: function () {
+    const interval = setInterval(() => {
+      if (this.data.remainingTime <= 0) {
+        clearInterval(interval);
+        this.setData({
+          cancelPay: false
+        })
+        return;
+      }
+      this.setData({
+        remainingTime: this.data.remainingTime - 1000,
+      });
+      // 将剩余时间（毫秒）转换为时分秒格式
+      const hours = Math.floor(this.data.remainingTime / (1000 * 60 * 60));
+      const minutes = Math.floor((this.data.remainingTime % (1000 * 60 * 60)) / (1000 * 60));
+      const seconds = Math.floor((this.data.remainingTime % (1000 * 60)) / 1000);
+      const timeFormat = `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`;
+      this.setData({
+        timeFormat: timeFormat
+      });
+    }, 1000);
+  },
+  // 辅助函数，用于将数字转换为两位数格式（不足两位前面补0）
+  padZero(num) {
+    return num < 10 ? '0' + num : num.toString();
+  },
+  // 根据id判断是否开启disabled
+  updateTimeIntervalsDisabled(id) {
+    let datatime = this.data.timeIntervals.map(subItem => {
+      if (id === 2) {
+        subItem.disabled = false;
+      } else if (id === 1) {
+        // 选中当天重新调用getTime方法判断当前时间
+        this.getTime()
+      }
+      return subItem;
+    });
+    // copy上面的数据结构，待优化
+    let day = []
+    day.push({
+      id: 1,
+      text: this.data.nomDay
+    }, {
+      id: 2,
+      text: this.data.tomorrowDay
+    })
+    let data = []
+    data.push({
+      values: day,
+      className: 'column1',
+    }, {
+      values: this.data.timeIntervals,
+      defaultIndex: 2,
+      className: 'column2',
+    })
+    this.setData({
+      timeIntervals: datatime,
+      columns: data
+    });
+  },
+  flowBution: function () {
+    wx.navigateTo({
+      url: '/pages/MaterialFlowInfo/MaterialFlowInfo?refundSn=' + this.data.refundSn
+    })
+    // this.setData({
+    //   flowShow: true
+    // })
+    // wx.navigateTo({
+    //   url: '/pages/MaterialFlow/MaterialFlow',
+    // })
+  },
+  flowOnClose: function () {
+    this.setData({
+      flowShow: false
+    })
+  },
+  /**
+   * 获取退款申请详情
+   */
+  getRefundDetail: function (e) {
+    var ths = this;
+    // wx.showLoading({})
+    var params = {
+      url: "/p/orderRefund/info",
+      method: "GET",
+      data: {
+        refundSn: this.data.refundSn //退款编号
+      },
+      callBack: function (res) {
+        let img=''
+        res.orderItems.map(item=>{
+          img=item.pic.split(',')
+          item.pic=img[0]
+        })
+        ths.setData({
+          applyTime: res.applyTime, //申请时间
+          applyType: res.applyType, //申请类型:1,仅退款,2退款退货
+          goodsNum: res.goodsNum, //退货数量
+          handelTime: res.handelTime, //卖家处理时间
+          orderAmount: res.orderAmount, //订单总金额
+          orderItems: res.orderItems, //订单项 
+          refundSn: res.refundSn, //退款编号
+          refundAmount: res.refundAmount, //退款金额
+          refundDelivery: res.refundDelivery, //收货地址对象
+          refundId: res.refundId, //记录ID
+          refundTime: res.refundTime, //退款时间
+          returnMoneySts: res.returnMoneySts, //处理退款状态:(1.买家申请 2.卖家接受 3.买家发货 4.卖家收货 5.退款成功 6.买家撤回申请 7.商家拒绝 -1.退款关闭)
+          updateTime: res.updateTime, //更新时间
+          rejectMessage: res.rejectMessage, //拒绝理由
+          buyerReason: res.buyerReason, //退款原因
+          shopName: res.shopName,
+          refundScore: res.refundScore, // 退款积分
+          payer: res.refundDelivery.payer,//运费承担方
+          sendPay:res.refundDelivery.deyNu //物流编号，判断是否提交成功
+        })
+        wx.hideLoading();
+        ths.get_countDown()
+      }
+    };
+    http.request(params);
+  },
+/**
+ * 同意后倒计时
+ * @param {*} e 
+ */
+get_countDown:function(){
+  const start = new Date(this.data.handelTime);
+    const end = new Date(start.getTime() + 48 * 60 * 60 * 1000);
+    const interval = setInterval(() => {
+      const now = new Date();
+      const diff = end - now;
+      if (diff <= 0) {
+        clearInterval(interval);
+        this.setData({
+          countdown_hours: '00天',
+          countdown_minutes:'00分钟'
+        });
+      } else {
+        const hours = Math.floor(diff / (1000 * 60 * 60));
+        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+        this.setData({
+          countdown_hours:String(hours).padStart(2, '0'),
+          countdown_minutes:String(minutes).padStart(2, '0')
+          // countdown_time:`${String(hours).padStart(2, '0')}小时${String(minutes).padStart(2, '0')}分钟`
+        });
+      }
+    }, 1000);
+},
+  /**
+   * 撤销退货退款申请
+   */
+  cancelApplication: function (e) {
+    wx.showModal({
+      title: '撤销',
+      content: '确定要撤销本次申请？',
+      success: (res) => {
+        if (res.confirm) {
+          wx.showLoading({})
+          var params = {
+            url: "/p/orderRefund/cancel",
+            method: "GET",
+            data: {refundSn:this.data.refundSn} , //退款订单编号
+            callBack: function (res) {
+              wx.hideLoading();
+              wx.navigateTo({
+                url: '/pages/afterSales/afterSales',
+              })
+            }
+          };
+          http.request(params);
+        } else {
+          console.log('取消')
+        }
+      }
+    })
+
+  },
+
+
+  /**
+   * 跳转修改退款申请
+   */
+  // toAlterRefundApply: function (e) {
+  //   var refundSn = e.currentTarget.dataset.refundsn;
+  //   console.log(e.currentTarget.dataset.refundsn)
+  //   wx.navigateTo({
+  //     url: '/pages/applyRefund/applyRefund?refundSn=' + refundSn,
+  //   })
+  // },
+
+
+  /**
+   * 填写物流信息
+   */
+  toLogisticsPage: function (e) {
+    var refundSn = e.currentTarget.dataset.refundsn;
+    console.log(e.currentTarget.dataset.refundsn)
+    wx.navigateTo({
+      url: '/pages/writeReturnLogistics/writeReturnLogistics?refundSn=' + refundSn,
+    })
+  },
+
 
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
-  onReady() {
+  onReady: function () {
 
   },
 
   /**
    * 生命周期函数--监听页面显示
    */
-  onShow() {
+  onShow: function () {
 
   },
 
   /**
    * 生命周期函数--监听页面隐藏
    */
-  onHide() {
+  onHide: function () {
 
   },
 
   /**
    * 生命周期函数--监听页面卸载
    */
-  onUnload() {
+  onUnload: function () {
 
   },
 
   /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
-  onPullDownRefresh() {
+  onPullDownRefresh: function () {
 
   },
 
   /**
    * 页面上拉触底事件的处理函数
    */
-  onReachBottom() {
+  onReachBottom: function () {
 
   },
 
   /**
    * 用户点击右上角分享
    */
-  onShareAppMessage() {
+  onShareAppMessage: function () {
 
   }
 })

pages/DetailsOfRefund/DetailsOfRefund.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {},
+  "backgroundTextStyle": "light",
+  "navigationBarTitleText": "退款详情"
 }

pages/DetailsOfRefund/DetailsOfRefund.wxml

@@ -1,161 +1,268 @@
-<view class="DetailsOfRefund">
-  <view class="result-box box">
-    <view class="result">
-      <view class="title">退款成功</view>
-      <view class="desc">已完成退款，具体到账时间请查询支付宝</view>
+<!-- 退款详情 -->
+<!--pages/DetailsOfRefund/DetailsOfRefund.wxml-->
+
+<view class="page">
+  <!-- 头部状态 -->
+  <view class="describe-box">
+    <!-- 申请行进流程 -->
+    <view class="process">
+      <!-- 提交申请 -->
+      <view class="current-process" wx:if="{{returnMoneySts == 1}}">退款申请待商家处理</view>
+      <view class="acount-for-process" wx:if="{{returnMoneySts == 1}}">
+        你已成功发起退款申请，等待商家处理
+      </view>
+      <view class="acount-for-process" wx:if="{{returnMoneySts == 1}}">
+        {{updateTime}}
+      </view>
+      <!-- 商家拒绝 -->
+      <view class="current-process" wx:if="{{returnMoneySts == 7}}">商家不同意退款申请</view>
+      <view class="acount-for-process" wx:if="{{returnMoneySts == 7}}">
+        你可以修改退款申请
+      </view>
+      <view class="acount-for-process" wx:if="{{returnMoneySts == 7}}">
+        {{updateTime}}
+      </view>
+      <!-- 商家同意退款 -->
+      <view class="current-process" wx:if="{{returnMoneySts == 2}}">商家同意退款</view>
+      <view class="acount-for-process" wx:if="{{returnMoneySts == 2 && applyType == 1}}">
+        商家已同意，等待系统退款
+      </view>
+      <view class="acount-for-process" wx:if="{{returnMoneySts == 2 && applyType == 2}}">
+        商家已同意，请按照商家给出的退货地址寄回商品
+      </view>
+      <view class="acount-for-process" wx:if="{{returnMoneySts == 2}}">
+        {{updateTime}}
+      </view>
+      <!-- 寄出商品（退货退款情况下） -->
+      <view class="current-process" wx:if="{{returnMoneySts == 3}}">等待商家确认收货并退款</view>
+      <view class="acount-for-process" wx:if="{{returnMoneySts == 3}}">
+        你已退货，商家将在收货后尽快处理
+      </view>
+      <view class="acount-for-process" wx:if="{{returnMoneySts == 3}}">
+        {{updateTime}}
+      </view>
+      <!-- 商家确认收货 -->
+      <view class="current-process" wx:if="{{returnMoneySts == 4}}">商家确认收货</view>
+      <view class="acount-for-process" wx:if="{{returnMoneySts == 4}}">
+        商家已确认收货，等待系统退款
+      </view>
+      <view class="acount-for-process" wx:if="{{returnMoneySts == 4}}">
+        {{updateTime}}
+      </view>
+      <!-- 退款成功 -->
+      <view class="current-process" wx:if="{{returnMoneySts == 5}}">退款成功</view>
+      <view class="acount-for-process" wx:if="{{returnMoneySts == 5}}">
+        {{refundTime}}
+      </view>
+      <!-- 退款申请关闭 -->
+      <view class="current-process" wx:if="{{returnMoneySts == -1}}">退款申请关闭</view>
+      <view class="acount-for-process" wx:if="{{returnMoneySts == -1}}">
+        <!-- 由于你超时未处理，系统已关闭本次退款申请 -->
+        {{rejectMessage?rejectMessage:''}}
+      </view>
+      <view class="acount-for-process" wx:if="{{returnMoneySts == -1}}">
+        {{updateTime}}
+      </view>
+      <!-- 买家撤回申请 -->
+      <view class="current-process" wx:if="{{returnMoneySts == 6}}">申请已撤回</view>
+      <view class="acount-for-process" wx:if="{{returnMoneySts == 6}}">
+        你已撤回本次退款申请
+      </view>
+      <view class="acount-for-process" wx:if="{{returnMoneySts == 6}}">
+        {{updateTime}}
+      </view>
+      <!-- 隐藏内容（仅退款） -->
+      <view class="{{showView?'display':'more-content'}}" wx:if="{{returnMoneySts == 1}}">
+        <view class="cont">如果商家同意，申请将达成并退款给你</view>
+        <view class="cont">如果商家拒绝，你可以修改退款申请重新尝试</view>
+        <!-- <view class="cont">如果商家逾期未处理，退款申请将自动达成并退款给你</view> -->
+      </view>
+      <!-- 隐藏内容（退货退款申请商品未寄出） -->
+      <view class="{{showView?'display':'more-content'}}" wx:if="{{returnMoneySts == 2}}">
+        <view class="cont">如果商家同意，请按照给出的退货地址退货</view>
+        <view class="cont">如果商家拒绝，你可以修改退款申请重新尝试</view>
+        <!-- <view class="cont">如果商家逾期未处理，请按照系统给出的退货地址退货</view> -->
+      </view>
+      <!-- 隐藏内容（退货退款并已寄出货物） -->
+      <view class="{{showView?'display':'more-content'}}" wx:if="{{returnMoneySts == 3}}">
+        <view class="cont">如果商家确认收货，申请将达成并退款给你</view>
+        <view class="cont">如果商家拒绝收货，你可以修改退货物流信息重新尝试</view>
+        <!-- <view class="cont">如果商家逾期未处理，系统将自动确认收货并退款给你</view> -->
+      </view>
     </view>
-    <view class="result">
-    <view class="title-box">
-      <view class="title small">退款成功</view>
-      <view class="price">￥21</view>
+    <!-- 申请行进流程end -->
+
+    <!-- 更多说明 -->
+    <view class="{{showView?'more-instructions':'display'}}" bindtap="onChangeShowState" wx:if="{{returnMoneySts < 4 && returnMoneySts !== -1 && applyType == 2}}">
+      <text class="more-txt">更多说明</text>
+      <view class="down-arrow-icon">
+        <image src="../../images/icon/down-arrow.png"></image>
+      </view>
     </view>
-      <view class="desc">已完成退款，具体到账时间请查询支付宝</view>
+    <!-- 收起 -->
+    <view class="{{showView?'display':'more-instructions'}}" bindtap="onChangeShowState" wx:if="{{returnMoneySts < 4 && returnMoneySts !== -1 && applyType == 2}}">
+      <text class="more-txt">收起</text>
+      <view class="down-arrow-icon">
+        <image src="../../images/icon/up-arrow.png"></image>
+      </view>
     </view>
   </view>
+  <!-- 头部状态end -->
 
-  <view class="oprate-box box">
-      <view class="item">
-        <image class="icon" src="../../images/icon/del-icon.png" mode=""/>
-        <view class="label">
-          删除订单
+  <!-- 【退款申请被拒绝时显示】拒绝理由 -->
+  <view class="refuse-reason" wx:if="{{returnMoneySts == 7}}">
+    拒绝理由：{{rejectMessage}}
+  </view>
+  <!-- 退货方式 -->
+  <!-- wx:if="{{returnMoneySts == 2 && applyType == 2}}" -->
+  <view class="return-address" wx:if="{{returnMoneySts == 3||returnMoneySts == 2 && applyType == 2}}">
+    <view class="addr-tit">退货方式</view>
+    <view class="address">
+      <view class="return-shop-box">
+        <view>
+          <view class="shop-title">{{payer==1?'商家':'用户'}}承担运费</view>
+          <view class="shop-text" wx:if="{{returnMoneySts==3}}">已发起配送</view>
+          <view class="shop-text" wx:else>请在{{countdown_hours}}小时{{countdown_minutes}}分钟内，发起配送，将货品退回给商家。</view>
         </view>
+        <view class="shop-btn" bindtap="sendDistribution" wx:if="{{sendPay==null}}">发起配送</view>
+        <view class="shop-btn" bindtap="flowBution" wx:else>查看物流</view>
       </view>
-      <!-- <button class='item' open-type="contact" >
-        <image class="icon" src="../../images/icon/chat-icon.png" mode=""/>
-        <view class="label">
-          联系商家
-        </view>
-     </button>
-      <view class="item" >
-        <image class="icon" src="../../images/icon/buy-icon.png" mode=""/>
-        <view class="label">
-          再次购买
-        </view>
-      </view> -->
     </view>
-
-    <view class="process-box box">
-      <view class="sub-title">退款流程</view>
-      
-      <view class="step-box">
-        <view class="step-item" wx:for="{{4}}">
-          <view class="point {{index == 0?'active':''}}"></view>
-          <view class="line"></view>
-          <view class="title">退款成功</view>
-          <view class="desc">已完成退款，具体到账时间请查询支付宝</view>
-          <view class="time">2024-12-13 11：12：30</view>
-          <view class="img-list" wx:if="{{index == 3}}">
-            <view class="img"></view>
-            <view class="img"></view>
-            <view class="img"></view>
-            <view class="img"></view>
-            <view class="img"></view>
-            <view class="img"></view>
-            <view class="img"></view>
-            <view class="img"></view>
-            <view class="img"></view>
+  </view>
+  <!-- <view wx:if="{{cancelPay}}">
+    <view class="pay-card">
+      <view class="loading-time">等待支付，剩余<text style="color: #FF4D3A;">{{timeFormat}}</text></view>
+      <view class="time-out">超过15分钟未支付，订单将自动取消。</view>
+      <view class="pay-btn" bindtap="atoncePaySend">立即支付￥{{sendInfo.price}}</view>
+    </view>
+  </view> -->
+  <van-popup show="{{ addCarshow }}" closeable round position="bottom" custom-style="height: 45%" bind:close="onClose">
+    <view class="popup-box">
+      <view class="popup-title">寄回商品</view>
+      <view class="info-card-box">
+        <view class="card-address">顾客地址</view>
+        <view class="card-info">{{userAddrDto.address}}{{userAddrDto.addressName}}{{userAddrDto.addrDetail}}</view>
+        <view class="card-user">{{userAddrDto.receiver}} {{userAddrDto.mobile}}</view>
+        <view class="card-line"></view>
+        <view class="card-time-box" bindtap="selectUpTime">
+          <view class="card-time">*取件时间</view>
+          <view class="up-time">{{combinedTextValue||'请选择上门时间'}}
+            <van-icon name="arrow" />
           </view>
         </view>
       </view>
-
-    </view>
-
-    <view class="refund-goods box">
-      <view class="title-box">
-        <view class="title">退款商品</view>
-        <view class="price">退款金额：￥21</view>
-      </view>
-      <view class="good-list">
-        <view class="good-item">
-          <view class="img"></view>
-          <view class="info">
-            <view class="good-name">赶海季生鲜大闸蟹</view>
-            <view class="desc">规格：5kg，盒</view>
-            <view class="price">单价：￥1.8</view>
-          </view>
-          <view class="price-box">
-            <view class="price">￥103.95</view>
-            <view class="num">x1</view>
-          </view>
+      <view class="costSide-card">
+        <view>配送费支付方</view>
+        <view>{{payer==1?'商家':'用户'}}</view>
+      </view>
+      <view class="bottom-button-box">
+        <!-- 支付方:payer=1店铺，2买家 -->
+        <view class="bottom-button" wx:if="{{payer==1}}" bindtap="submitBtn">提交</view>
+        <view class="send-pay-box" wx:else>
+          <view class="sendpay-text">配送费 <text style="color: #FF4D3A;">￥{{sendInfo.price||'0'}}</text></view>
+          <view class="sendpay-btn" bindtap="toPaySend">支付</view>
         </view>
-        <view class="good-item">
-          <view class="img"></view>
-          <view class="info">
-            <view class="good-name">赶海季生鲜大闸蟹</view>
-            <view class="desc">规格：5kg，盒</view>
-            <view class="price">单价：￥1.8</view>
-          </view>
-          <view class="price-box">
-            <view class="price">￥103.95</view>
-            <view class="num">x1</view>
-          </view>
+      </view>
+    </view>
+  </van-popup>
+  <van-popup show="{{ selectTimeshow }}" overlay="{{false}}" round position="bottom" custom-style="height: 45%" bind:close="timeOnClose">
+    <view class="popup-box">
+      <view class="popup-title">选择上门时间</view>
+      <van-picker columns="{{ columns }}" show-toolbar bind:cancel="onCancel" bind:confirm="onConfirm" bind:change="onChange" />
+      <!-- <view class="popup-select-day">
+        <view class="day-left">
+          <view class="{{sts==0?'now-day':'tomorrow-day'}}" data-sts="0" data-time="{{nomDay}}" bindtap="selectday">{{nomDay+'(今天)'}}</view>
+          <view style="margin-top: 28rpx;" class="{{sts==1?'now-day':'tomorrow-day'}}" data-sts="1" data-time="{{tomorrowDay}}" bindtap="selectday">{{tomorrowDay+'(明天)'}}</view>
         </view>
-        <view class="good-item">
-          <view class="img"></view>
-          <view class="info">
-            <view class="good-name">赶海季生鲜大闸蟹</view>
-            <view class="desc">规格：5kg，盒</view>
-            <view class="price">单价：￥1.8</view>
-          </view>
-          <view class="price-box">
-            <view class="price">￥103.95</view>
-            <view class="num">x1</view>
-          </view>
+        <view class="time-right">
+          <view class="sel-time{{currentSelectedIndex === index? 'selected' : ''}}" wx:for="{{timeIntervals}}" bindtap="selectTime" data-time="{{item}}" data-index="{{index}}">
+          <text wx:if="{{!item.hidden}}">{{item.interval}}</text></view>
         </view>
-
+      </view> -->
+    </view>
+  </van-popup>
+  <van-popup show="{{ flowShow }}" closeable round position="bottom" custom-style="height: 45%" bind:close="flowOnClose">
+    <van-steps custom-class="steps-style" steps="{{ steps }}" active="{{ active }}" direction="vertical" active-color="#FF941A" />
+  </van-popup>
+  <!-- 【退货退款状态下，买家同意后】退货地址 -->
+  <view class="return-address" wx:if="{{returnMoneySts == 2 && applyType == 2}}">
+    <view class="addr-tit">退货地址</view>
+    <view class="address">
+      <view class="recipient">
+        <text class="addr-cont">收件人：{{refundDelivery.receiverName}}</text>
+        <text class="mobile">{{refundDelivery.receiverMobile}}</text>
       </view>
-        <view class="open-btn">
-          展开（共7件） <image class="arrow" src="../../images/icon/black-down-arrow.png" mode=""/>
-        </view>
+      <view class="addr">详细地址：{{refundDelivery.receiverAddr}}</view>
     </view>
+  </view>
 
-    <view class="goods-info box">
-      <view class="item">
-        <view class="label">商品金额</view>
-        <view class="value">￥54.00</view>
-      </view>
-      <view class="item">
-        <view class="label">运费（快递）</view>
-        <view class="value">￥54.00</view>
-      </view>
-      <view class="item">
-        <view class="label">积分（1400）</view>
-        <view class="value">￥54.00</view>
+
+  <!-- 退款信息 -->
+  <view class="refund-message">
+    <view class="refund-txt">退款信息</view>
+    <view class="goods-msg-box">
+      <!-- 店铺 -->
+      <!-- <view class="shop-box">
+        <view class="shop-img"><image src="../../images/icon/shop.png"></image></view>
+        <view class="shopname">店铺：{{shopName}}</view>
+      </view> -->
+      <!-- 图片 -->
+      <view class="img-box" wx:if="{{orderItems.length==1}}">
+        <image src="{{orderItems[0].pic}}"></image>
       </view>
-      <view class="total">
-        <view class="label">总计：</view>
-        <view class="value">￥54.00</view>
+      <!-- 信息 -->
+      <view class="goods-text" wx:if="{{orderItems.length==1}}">
+        <view class="goods-title">{{orderItems[0].prodName}}</view>
+        <view class="goods-quantity">数量：{{orderItems[0].prodCount}}件</view>
       </view>
-    </view>
 
-    <view class="order-info box">
-      <view class="title">订单信息</view>
-      <view class="item">
-        <view class="label">订单编号</view>
-        <view class="value-box">
-          <view class="value">1867402054587256856</view>
-          <image class="icon" src="../../images/icon/copy.png" mode=""/>
-        </view>
-      </view>
-      <view class="item">
-        <view class="label">售后编号</view>
-        <view class="value-box">
-          <view class="value">1867402054587256856</view>
-          <image class="icon" src="../../images/icon/copy.png" mode=""/>
+      <block wx:if="{{orderItems.length>1}}">
+        <view class="refund-goods-item" wx:for="{{orderItems}}" wx:key="*this">
+          <!-- 图片 -->
+          <view class="img-box">
+            <image src="{{item.pic}}"></image>
+          </view>
+          <!-- 信息 -->
+          <view class="goods-text">
+            <view class="goods-title">{{item.prodName}}</view>
+            <view class="goods-quantity">数量：{{item.prodCount}}件</view>
+          </view>
         </view>
-      </view>
-      <view class="item">
-        <view class="label">申请时间</view>
-        <view class="value">1867402054587256856</view>
-      </view>
-      <view class="item">
-        <view class="label">服务类型</view>
-        <view class="value">仅退款</view>
-      </view>
-      <view class="item">
-        <view class="label">申请原因</view>
-        <view class="value">实物与图片不符合</view>
-      </view>
+      </block>
+    </view>
+    <!-- 具体信息 -->
+    <view class="refund-cont">退款方式：{{['','仅退款','退货退款'][applyType]}}</view>
+    <view class="refund-cont">退款原因：{{buyerReason}}</view>
+    <view class="refund-cont">退款金额：
+      <text class="red" wx:if="{{refundAmount && refundAmount > 0}}">￥{{wxs.toPrice(refundAmount?refundAmount:0)}}</text>
+      <text class="red" wx:if="{{(refundScore && refundScore > 0) && (refundAmount && refundAmount > 0)}}">+</text>
+      <text class="red" wx:if="{{refundScore && refundScore > 0}}">{{refundScore}}积分</text>
+    </view>
+    <view class="refund-cont">退款编号：{{refundSn}}</view>
+    <view class="refund-cont">申请时间：{{applyTime}}</view>
+    <!-- 【退货申请显示】 -->
+    <view class="refund-cont" wx:if="{{goodsNum>0}}">退货数量：{{goodsNum}}</view>
+    <!-- 联系商家 -->
+    <!-- <view class="contact-merchant">联系商家</view> -->
+    <button class='contact-merchant' open-type="contact">联系客服</button>
+  </view>
+
+
+  <!-- 脚部撤销申请 -->
+  <!-- applyType: 1,  //申请类型:1,仅退款,2退款退货 -->
+  <!-- returnMoneySts： 处理退款状态:(1.买家申请 2.卖家接受 3.买家发货 4.卖家收货 5.退款成功 6.买家撤回申请 7.商家拒绝 -1.退款关闭) -->
+  <view class="foot-box">
+    <view class="footer">
+      <!-- 【申请后-申请完成前】 -->
+      <!-- <text class="undo-apply" bindtap="cancelApplication" wx:if="{{returnMoneySts ==1 || returnMoneySts == 7 || (returnMoneySts ==2 && applyType == 2)}}">撤销申请</text> -->
+      <text class="undo-apply" bindtap="cancelApplication" >撤销申请</text>
+      <!-- 【商家拒绝时显示】 -->
+      <!-- <text class="undo-apply apply-current" bindtap="toAlterRefundApply" wx:if="{{returnMoneySts ==1 || returnMoneySts == 7}}" data-refundsn="{{refundSn}}">修改申请</text> -->
+      <!-- 【商家同意后-货物寄出前】 -->
+      <!-- <text class="undo-apply apply-current" bindtap="toLogisticsPage" wx:if="{{returnMoneySts == 2 && applyType == 2}}" data-refundsn="{{refundSn}}">填写退货物流</text> -->
     </view>
+  </view>
+
+</view>
 
-</view>
+<wxs module="wxs" src="../../wxs/number.wxs" />

pages/DetailsOfRefund/DetailsOfRefund.wxss

@@ -1,296 +1,633 @@
 /* pages/DetailsOfRefund/DetailsOfRefund.wxss */
-.DetailsOfRefund{
-  padding: 20rpx 24rpx 120rpx;
-  background: #F6F6F6;
+.display {
+  display: none;
 }
 
-.DetailsOfRefund .result-box{
-  padding: 0 28rpx ;
+image {
+  width: 100%;
+  height: 100%;
 }
 
-.DetailsOfRefund .result-box .result{
-  position: relative;
-  padding: 24rpx 0;
-  
+.page {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background: #f7f7f7;
+}
+
+/* 头部状态 */
+.describe-box {
+  background: #fff;
+  margin-bottom: 20rpx;
+}
+
+.process {
+  padding: 20rpx 25rpx;
+  border-bottom: 1rpx solid #f2f2f2;
 }
 
-.DetailsOfRefund .result-box .result .title{
+.current-process {
+  font-size: 30rpx;
   font-weight: bold;
-  font-size: 32rpx;
-  color: #222222;
+  padding: 10rpx 0;
 }
-.DetailsOfRefund .result-box .result .title.small{
+
+.acount-for-process {
   font-size: 28rpx;
+  color: #444;
+  line-height: 1.5em;
 }
 
-.DetailsOfRefund .result-box .result .desc{
-  font-size: 24rpx;
-  color: #AAAAAA;
-  margin-top: 20rpx;
+.red {
+  color: #e43130;
 }
-.DetailsOfRefund .result-box .result .title-box{
-  display: flex;
-  justify-content: space-between;
+
+/* 隐藏内容 */
+.more-content {
+  border-top: 1rpx dashed #ebebeb;
+  margin-top: 15rpx;
+  padding-top: 10rpx;
 }
 
-.DetailsOfRefund .result-box .result .price{
-  font-weight: bold;
+.cont {
   font-size: 28rpx;
-  color: #FF4D3A;
+  color: #666666;
+  line-height: 1.8em
 }
 
-.box{
-  background: #FFFFFF;
-  border-radius: 16rpx 16rpx 16rpx 16rpx;
+/* 更多说明 */
+.more-instructions {
+  padding: 18rpx 0;
+  padding-bottom: 22rpx;
+  text-align: center;
+  font-size: 27rpx;
+}
+
+.more-txt {
+  vertical-align: middle;
+}
+
+.down-arrow-icon {
+  display: inline-block;
+  width: 40rpx;
+  height: 25rpx;
+  vertical-align: middle;
+}
+
+
+/* 退款流程 */
+.refund-schedule {
+  background: #fff;
   margin-bottom: 20rpx;
+  padding: 0 25rpx;
+}
+
+.refund-sum {
+  font-size: 28rpx;
+  padding: 25rpx 0;
+  border-bottom: 1rpx solid #f2f2f2;
 }
 
-.DetailsOfRefund .oprate-box{
+.progress-bar {
+  position: relative;
   display: flex;
-  padding: 0 24rpx;
-  
+  justify-content: space-around;
+  padding: 20rpx 0;
 }
-.DetailsOfRefund .oprate-box .item{
-  width: 25%;
+
+.block {
+  display: inline-block;
   text-align: center;
-  margin: 0;
-  border: none;
-  background-color: #fff !important;
-  padding: 24rpx 0;
-  display: block!important;
-  -webkit-tap-highlight-color: transparent;
-  outline: none;
-  line-height: normal;
-}
-.DetailsOfRefund wx-button:after {
-  border: none;
-}
-.DetailsOfRefund .oprate-box .item .icon{
-  width: 40rpx;
-  height: 40rpx;
 }
 
-.DetailsOfRefund .oprate-box .item .label{
+.round {
+  display: block;
+  width: 13rpx;
+  height: 13rpx;
+  border-radius: 50%;
+  background: #999999;
+  margin: 0 auto;
+  margin-top: 15rpx;
+}
+
+/* 激活状态圆点 */
+.round-current {
+  background: #3388ff;
+}
+
+.block-text {
+  margin-top: 15rpx;
+  text-align: center;
+}
+
+.block-text-tit {
+  font-size: 26rpx;
+  line-height: 2em;
+  color: #777;
+}
+
+.block-text-time {
+  font-size: 22rpx;
+  color: #aaa;
+}
+
+.line {
+  position: absolute;
+  top: 39rpx;
+  display: inline-block;
+  width: 215rpx;
+  height: 5rpx;
+  background: #bdbdbd;
+}
+
+/* 激活状态直线 */
+.line-current {
+  background: #3388ff;
+}
+
+.line01 {
+  left: 145rpx;
+}
+
+.line02 {
+  right: 115rpx;
+}
+
+/* 拒绝理由 */
+.refuse-reason {
   font-size: 28rpx;
-  color: #222222;
-  margin-top: 20rpx;
+  background: #fff;
+  padding: 20rpx;
+  margin-bottom: 20rpx;
 }
-.DetailsOfRefund .process-box{
-  padding: 24rpx;
+
+
+/* 退货地址 */
+.return-address {
+  background: #fff;
+  margin-bottom: 20rpx;
 }
-.DetailsOfRefund .process-box .sub-title{
+
+.addr-tit {
+  padding: 10rpx 20rpx;
+  border-bottom: 1rpx solid #f2f2f2;
+  font-size: 30rpx;
   font-weight: bold;
-  font-size: 32rpx;
-  color: #222222;
-  padding-bottom: 20rpx;
 }
 
-.DetailsOfRefund .process-box .step-box{
+.addr {
+  padding-right: .5em;
+}
 
+.address {
+  padding: 20rpx;
+  font-size: 28rpx;
 }
 
-.DetailsOfRefund .process-box .step-box .step-item{
-  position: relative;
+.recipient {
+  padding-bottom: 10rpx;
+}
+
+.mobile {
+  margin-left: 50rpx;
+}
+
+.pay-card {
+  background: #fff;
   margin-bottom: 20rpx;
-  padding-left: 34rpx;
+  padding: 20rpx;
 }
 
-.DetailsOfRefund .process-box .step-box .step-item .title{
+.loading-time {
+  font-family: PingFang SC, PingFang SC;
   font-weight: bold;
   font-size: 28rpx;
   color: #181818;
 }
-.DetailsOfRefund .process-box .step-box .step-item .desc{
+
+.time-out {
+  margin-top: 20rpx;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: normal;
   font-size: 24rpx;
   color: #AAAAAA;
+}
+
+.pay-btn {
   margin-top: 20rpx;
+  width: 220rpx;
+  height: 64rpx;
+  border-radius: 40rpx;
+  border: 2rpx solid #FF4D3A;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: normal;
+  font-size: 28rpx;
+  color: #FF4D3A;
+  text-align: center;
+  line-height: 64rpx;
 }
 
-.DetailsOfRefund .process-box .step-box .step-item .time{
+/* 退货方式 */
+.return-shop-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.shop-title {
+  font-family: PingFang SC, PingFang SC;
+  font-weight: bold;
+  font-size: 28rpx;
+  color: #181818;
+}
+
+.shop-text {
+  margin-top: 20rpx;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: normal;
   font-size: 24rpx;
   color: #AAAAAA;
-  margin-top: 12rpx;
 }
 
-.DetailsOfRefund .process-box .step-box .step-item .point{
-  width: 14rpx;
-  height: 14rpx;
-  border-radius: 50%;
-  background: #CCCCCC;
-  position: absolute;
-  top: 0rpx;
-  left: -7rpx;
-  z-index: 9;
+.shop-btn {
+  width: 136rpx;
+  height: 64rpx;
+  background: #FFFFFF;
+  border-radius: 40rpx;
+  border: 2rpx solid #FF4D3A;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: normal;
+  font-size: 28rpx;
+  color: #FF4D3A;
+  line-height: 64rpx;
+  text-align: center;
 }
-.DetailsOfRefund .process-box .step-box .step-item .point.active{
-  background: #FF941A;
+
+.popup-box {
+  padding: 20rpx;
 }
 
-.DetailsOfRefund .process-box .step-box .step-item .line{
-  width: 2rpx;
-  height: 115rpx;
-  background: #AAAAAA;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 8;
+.popup-title {
+  margin-top: 28rpx;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 800;
+  font-size: 32rpx;
+  text-align: center;
 }
-.DetailsOfRefund .process-box .step-box .step-item .img-list{
+
+.popup-select-day {
   display: flex;
-  overflow: auto;
-  margin-top: 12rpx;
 }
-.DetailsOfRefund .process-box .step-box .step-item .img-list .img{
-  width: 120rpx;
-  height: 120rpx;
-  background: #F6F6F6;
-  border-radius: 32rpx 32rpx 32rpx 32rpx;
-  margin-right: 16rpx;
-  flex-shrink: 0;
+
+.day-left {
+  margin-top: 50rpx;
 }
 
-.DetailsOfRefund .refund-goods{
-  padding: 24rpx;
+.now-day {
+  font-weight: normal;
+  font-size: 28rpx;
+  color: #222222;
 }
 
-.DetailsOfRefund .refund-goods .title-box{
-  display: flex;
-  justify-content: space-between;
-  padding-bottom: 24rpx;
-  font-weight: bold;
+.tomorrow-day {
+  font-weight: normal;
   font-size: 28rpx;
+  color: #AAAAAA;
 }
-.DetailsOfRefund .refund-goods .title-box .title{
+
+.time-right {
+  margin-top: 50rpx;
+  margin-left: 300rpx;
+  height: 500rpx;
+  overflow-y: auto; 
+  font-weight: normal;
+  font-size: 28rpx;
   color: #222222;
 }
-.DetailsOfRefund .refund-goods .title-box .price{
-  color: #FF4D3A;
+.time-right::-webkit-scrollbar {
+  display: none;
 }
-
-.DetailsOfRefund .refund-goods .good-list{
+.sel-time {
+  margin-bottom:28rpx;
+  font-weight: normal;
+  font-size: 28rpx;
+  color: #AAAAAA;
 }
-.DetailsOfRefund .refund-goods .good-list .good-item{
-  border-top:1rpx solid #F0F0F0;
-  padding: 20rpx 0;
-  display: flex;
-
+.sel-timeselected{
+  margin-bottom:28rpx;
+  color: #222222;
 }
-.DetailsOfRefund .refund-goods .good-list .good-item .img{
-  width: 120rpx;
-  height: 120rpx;
+.info-card-box {
+  margin-top: 20rpx;
+  background-color: #F9F9F9;
   border-radius: 16rpx;
-  background: #F6F6F6;
+  padding: 20rpx;
 }
-.DetailsOfRefund .refund-goods .good-list .good-item .info{
-  margin-left: 20rpx;
-  flex: 1;
+
+.card-address {
+  font-family: PingFang SC, PingFang SC;
+  font-weight: normal;
+  font-size: 28rpx;
+  color: #222222;
 }
-.DetailsOfRefund .refund-goods .good-list .good-item .info .good-name{
+
+.card-info {
+  margin-top: 20rpx;
+  font-family: PingFang SC, PingFang SC;
   font-weight: bold;
   font-size: 28rpx;
   color: #222222;
 }
-.DetailsOfRefund .refund-goods .good-list .good-item .info .desc{
+
+.card-user {
+  margin-top: 20rpx;
+  font-family: PingFang SC, PingFang SC;
+  font-weight: normal;
   font-size: 24rpx;
   color: #AAAAAA;
-  margin-top: 10rpx;
 }
-.DetailsOfRefund .refund-goods .good-list .good-item .info .price{
-  color: #AAAAAA;
-  font-size: 24rpx;
+
+.card-line {
+  margin-top: 20rpx;
+  border: 2rpx solid #F0F0F0;
 }
-.DetailsOfRefund .refund-goods .good-list .good-item .price-box{
+
+.card-time-box {
+  margin-top: 20rpx;
   display: flex;
-  flex-direction: column;
+  align-items: center;
   justify-content: space-between;
-  align-items: flex-end;
 }
-.DetailsOfRefund .refund-goods .good-list .good-item .price-box .price{
-  font-weight: bold;
-  font-size: 32rpx;
-  color: #FF4D3A;
+
+.card-time {
+  font-family: PingFang SC, PingFang SC;
+  font-weight: normal;
+  font-size: 28rpx;
+  color: #222222;
 }
-.DetailsOfRefund .refund-goods .good-list .good-item .price-box .num{
-  font-size: 24rpx;
+
+.up-time {
+  font-family: PingFang SC, PingFang SC;
+  font-weight: normal;
+  font-size: 28rpx;
   color: #AAAAAA;
 }
-.DetailsOfRefund .refund-goods .open-btn{
+
+.costSide-card {
+  margin-top: 20rpx;
+  background-color: #F9F9F9;
+  border-radius: 16rpx;
+  padding: 20rpx;
   display: flex;
   align-items: center;
-  justify-content: center;
-  font-size: 24rpx;
-  color: #222222;
-  margin-top: 20rpx;
-}
-.DetailsOfRefund .refund-goods .open-btn .arrow{
-  width: 20rpx;
-  height: 20rpx;
+  justify-content: space-between;
 }
 
-.DetailsOfRefund .goods-info{
-  padding: 24rpx;
+.costSide-card>view:first-child {
+  font-family: PingFang SC, PingFang SC;
+  font-weight: normal;
+  font-size: 28rpx;
+  color: #222222;
 }
-.DetailsOfRefund .goods-info .item{
-  display: flex;
-  justify-content: space-between;
-  padding-bottom: 28rpx;
 
-}
-.DetailsOfRefund .goods-info .item .label{
+.costSide-card>view:last-child {
+  font-family: PingFang SC, PingFang SC;
+  font-weight: normal;
   font-size: 28rpx;
-  color: #222222;
+  color: #AAAAAA;
 }
 
-.DetailsOfRefund .goods-info .item .value{
+.bottom-button-box {
+  background: #FFFFFF;
+  box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0, 0, 0, 0.09);
+  border-radius: 32rpx 32rpx 0rpx 0rpx;
+  display: flex;
+  justify-content: center;
+}
+
+.bottom-button {
+  width: 702rpx;
+  height: 80rpx;
+  background: #FF941A;
+  border-radius: 40rpx;
+  margin-top: 30rpx;
+  font-family: PingFang SC, PingFang SC;
   font-weight: bold;
   font-size: 28rpx;
-  color: #FF4D3A;
+  color: #FFFFFF;
+  text-align: center;
+  line-height: 80rpx;
 }
-.DetailsOfRefund .goods-info .total{
+
+.picker-style {
+  font-size: 16rpx !important;
+  margin-left: -80rpx;
+}
+
+.send-pay-box {
   display: flex;
-  justify-content: space-between;
-  padding-top: 28rpx ;
-  border-top: 2rpx solid #F0F0F0;
+  align-items: center;
+  margin-top: 30rpx;
 }
-.DetailsOfRefund .goods-info .total .label{
-  font-weight: bold;
+
+.sendpay-text {
+  font-family: PingFang SC, PingFang SC;
+  font-weight: normal;
   font-size: 28rpx;
-  color: #222222;
+  width: 400rpx;
 }
-.DetailsOfRefund .goods-info .total .value{
+
+.sendpay-btn {
+  width: 220rpx;
+  height: 80rpx;
+  background: #FF941A;
+  border-radius: 40rpx;
+  font-family: PingFang SC, PingFang SC;
   font-weight: bold;
   font-size: 28rpx;
-  color: #FF4D3A;
+  color: #FFFFFF;
+  line-height: 80rpx;
+  text-align: center;
 }
 
-.DetailsOfRefund .order-info{
-  padding: 28rpx 24rpx;
+/* 查看协商记录 */
+/* .negotiate-record {
+  position: relative;
+  font-size: 25rpx;
+  text-align: left;
+  background: #fff;
+  padding: 20rpx 25rpx;
+  margin-bottom: 20rpx;
 }
-.DetailsOfRefund .order-info .title{
+.more-arrow {
+  position: absolute;
+  right: 20rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 22rpx;
+  height: 22rpx;
+} */
+
+
+/* 退款信息 */
+.refund-message {
+  background: #fff;
+  padding: 20rpx 25rpx;
+}
+
+.refund-txt {
+  font-size: 30rpx;
+  margin-bottom: 25rpx;
   font-weight: bold;
-  font-size: 32rpx;
-  color: #222222;
 }
-.DetailsOfRefund .order-info .item{
-  padding-top: 28rpx;
-  display: flex;
-  justify-content: space-between;
+
+/* 店铺 */
+.shop-box {
+  display: block;
+  padding-bottom: 20rpx;
+  margin-bottom: 20rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.shop-img {
+  display: inline-block;
+  width: 36rpx;
+  height: 36rpx;
+  vertical-align: middle;
+  margin-right: 10rpx;
+}
+
+.shop-img>iamge {
+  display: block;
+  width: 100%;
+  height: 100%;
 }
-.DetailsOfRefund .order-info .item .label{
+
+.shopname {
+  display: inline-block;
   font-size: 28rpx;
-  color: #AAAAAA;
+  line-height: 1em;
+  vertical-align: middle;
+  color: #444444;
 }
-.DetailsOfRefund .order-info .item .value-box{
-  display: flex;
-  align-items: center;
+
+/* 商品信息 */
+.goods-msg-box {
+  background: #f9f9f9;
+  padding: 15rpx 20rpx;
+  margin: 15rpx 0;
 }
-.DetailsOfRefund .order-info .item .value-box .icon{
-  width: 30rpx;
-  height: 30rpx;
-  margin-left: 20rpx;
+
+.img-box {
+  display: inline-block;
+  width: 150rpx;
+  height: 150rpx;
+  margin-right: 20rpx;
+  background: #eee;
+  vertical-align: top;
 }
-.DetailsOfRefund .order-info .item .value{
-  font-weight: bold;
+
+.goods-text {
+  display: inline-block;
+  vertical-align: top;
+  width: 70%;
+}
+
+.goods-title {
   font-size: 28rpx;
-  color: #222222;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  /*设定显示行数*/
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.goods-quantity {
+  font-size: 28rpx;
+  color: #888888;
+  margin-top: 20rpx;
+}
+
+/* 具体信息 */
+.refund-cont {
+  font-size: 28rpx;
+  color: #666666;
+  line-height: 2em;
+}
+
+/* 联系商家 */
+.contact-merchant {
+  font-size: 28rpx;
+  color: #FF941A;
+  text-align: center;
+  padding-top: 20rpx;
+  margin-top: 20rpx;
+  border-top: 1rpx solid #f2f2f2;
+}
+
+button.contact-merchant {
+  background: #fff;
+}
+
+button.contact-merchant::after {
+  border: 0;
+}
+
+/* 整单退款商品列表 */
+.refund-goods-item {
+  padding: 20rpx 0;
+  border-bottom: 2rpx solid #ddd;
+}
+
+.refund-goods-item:last-child {
+  border-bottom: none;
+}
+
+/* 脚部撤销 */
+.foot-box {
+  display: block;
+  margin-top: 150rpx;
+}
+
+.footer {
+  display: block;
+  box-sizing: border-box;
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  font-size: 28rpx;
+  background: #fff;
+  padding: 0 30rpx;
+  text-align: right;
+  box-shadow: 1rpx 10rpx 10rpx 10rpx rgb(236, 236, 236);
+}
+
+.undo-apply {
+  display: inline-block;
+  box-sizing: border-box;
+  padding: 15rpx 20rpx;
+  font-size: 25rpx;
+  border-radius: 5rpx;
+  margin: 25rpx 0;
+  margin-left: 15rpx;
+  border-radius: 40rpx;
+  border: 1rpx solid #aaaaaa;
+  color: #555555;
+}
+
+.undo-apply-end {
+  display: inline-block;
+  box-sizing: border-box;
+  margin-left: 15rpx;
+  color: #777;
+  font-size: 30rpx;
+
+}
+
+.apply-current {
+  border: 1rpx solid rgb(0, 173, 0);
+  color: rgb(0, 173, 0);
+
 }

pages/DetailsOfRefund1/DetailsOfRefund.js

@@ -1,670 +1,66 @@
 // pages/DetailsOfRefund/DetailsOfRefund.js
-var http = require('../../utils/http.js');
-var util = require('../../utils/util.js');
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-    showView: true, //隐藏是展示
-    applyTime: '', //申请时间
-    applyType: 1, //申请类型:1,仅退款,2退款退货
-    goodsNum: '', //退货数量
-    handelTime: '', //卖家处理时间
-    orderAmount: '', //订单总金额
-    orderItems: {}, //订单项 
-    refundAmount: '', //退款金额
-    refundDelivery: [], //收货地址对象
-    refundId: '', //记录ID
-    refundTime: '', //退款时间
-    returnMoneySts: 1, //处理退款状态:(1.买家申请 2.卖家接受 3.买家发货 4.卖家收货 5.退款成功 6.买家撤回申请 7.商家拒绝 -1.退款关闭)
-    updateTime: '', //更新时间
-    refundSn: '', //退款编号
-    rejectMessage: '', //拒绝理由
-    buyerReason: '', //退款原因
-    shopName: '', //店铺名称
-    refundScore: 0, // 退款积分
-    addCarshow: false,
-    selectTimeshow: false,
-    flowShow: false,
-    userAddrDto: {},
-    payer: '',
-    sendPay:'',
-    sts: 0,
-    nomDay: '',
-    tomorrowDay: '',
-    timeIntervals: [],
-    columns: [],
-    combinedTextValue: '',
-    sendInfo: {},
-    currentSelectedIndex: -1, // 初始没有选中项，索引设为 -1
-    steps: [{
-        text: '步骤一',
-        desc: '描述信息',
-        inactiveIcon: 'location-o',
-        activeIcon: 'success',
-      },
-      {
-        text: '步骤二',
-        desc: '描述信息',
-        inactiveIcon: 'circle',
-        activeIcon: 'plus',
-      },
-      {
-        text: '步骤三',
-        desc: '描述信息',
-        inactiveIcon: 'circle',
-        activeIcon: 'cross',
-      },
-      {
-        text: '步骤四',
-        desc: '描述信息',
-        inactiveIcon: 'circle',
-        activeIcon: 'fail',
-      },
-    ],
-    cancelPay: false,
-    remainingTime: '',
-    timeFormat: '',
-    orderNumSend:'',
-    countdown_hours:'',
-    countdown_minutes:''
+    
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad: function (options) {
-    this.setData({
-      orderNumSend:options.orderNumber
-    })
-    this.getTime()
-    this.setData({
-      refundSn: options.refundSn,
-    });
-    if(options.userAddrDto){
-      this.setData({
-        userAddrDto: JSON.parse(options.userAddrDto)
-      })
-    }
-    //获取退款申请详情
-    this.getRefundDetail()
-  },
-
-  /**
-   * 更多说明&收起
-   */
-  onChangeShowState: function () {
-    var that = this;
-    that.setData({
-      showView: (!that.data.showView)
-    })
-  },
-  // 发起配送
-  sendDistribution: function () {
-    this.setData({
-      addCarshow: true
-    })
-  },
-  onClose: function () {
-    this.setData({
-      addCarshow: false
-    })
-  },
-  timeOnClose: function () {
-    this.setData({
-      selectTimeshow: false
-    })
-  },
-  submitBtn:function(){
-    if (Object.keys(this.data.sendInfo).length === 0) {
-      wx.showToast({
-        title: '请先选择取件时间',
-        icon: 'none'
-      })
-      return
-    }
-    this.submitExpress()
-  },
-  submitExpress:function(){
-    var params = {
-      url: `/p/orderRefund/submitExpress/${this.data.refundSn}`,
-      method: "GET",
-      callBack: res => {
-        wx.showToast({
-          title: '提交成功',
-          icon: 'none',
-        })
-        this.setData({
-          addCarshow:false
-        })
-        this.getRefundDetail()
-      }
-    };
-    http.request(params);
-  },
-  // 辅助函数，将中文日期格式转换为YYYY-MM-DD格式
-  formatDate: function (dateStr) {
-    let parts = dateStr.match(/(\d+)月(\d+)日/);
-    if (parts) {
-      let month = parseInt(parts[1]);
-      let day = parseInt(parts[2]);
-      let year = new Date().getFullYear();
-      return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
-    }
-    return dateStr;
-  },
-  selectUpTime: function () {
-    this.getDayTime()
-    this.getTime()
-    let day = []
-    day.push({
-      id: 1,
-      text: this.data.nomDay
-    }, {
-      id: 2,
-      text: this.data.tomorrowDay
-    })
-    let data = []
-    data.push({
-      values: day,
-      className: 'column1',
-    }, {
-      values: this.data.timeIntervals,
-      defaultIndex: 2,
-      className: 'column2',
-    })
-    this.setData({
-      selectTimeshow: true,
-      columns: data
-    })
-  },
+  onLoad(options) {
 
-  // 获取今明天并转换
-  getDayTime: function () {
-    const today = new Date();
-    const month = (today.getMonth() + 1).toString().padStart(2, '0');
-    const day = today.getDate().toString().padStart(2, '0');
-    const todayFormat = `${month}月${day}日`;
-    const tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000);
-    const tomorrowMonth = (tomorrow.getMonth() + 1).toString().padStart(2, '0');
-    const tomorrowDay = tomorrow.getDate().toString().padStart(2, '0');
-    const tomorrowFormat = `${tomorrowMonth}月${tomorrowDay}日`;
-    this.setData({
-      nomDay: todayFormat,
-      tomorrowDay: tomorrowFormat
-    })
-  },
-
-  // 时间段转换
-  getTime: function (selectedDate) {
-    const timeIntervals = [];
-    // 如果没有传入日期参数（首次加载等情况），则使用当前日期
-    const now = selectedDate ? new Date(selectedDate) : new Date();
-    if (isNaN(now.getTime())) {
-      console.error('传入的日期格式不正确，无法解析为有效日期');
-      return;
-    }
-    const currentTimeStamp = now.getTime();
-    for (let hour = 0; hour < 23; hour++) {
-      const start = hour.toString().padStart(2, '0') + ':00';
-      const end = (hour + 1).toString().padStart(2, '0') + ':00';
-      const interval = start + '~' + end;
-      // 创建对应时间段开始时间的日期对象
-      const startDate = new Date(now);
-      startDate.setHours(hour, 0, 0, 0);
-      const startTimestamp = startDate.getTime();
-      // 通过比较时间戳来判断时间段是否已过去
-      const hidden = startTimestamp < currentTimeStamp;
-      timeIntervals.push({
-        text: interval,
-        disabled: hidden
-      });
-    }
-    this.setData({
-      timeIntervals
-    });
-  },
-
-  // 日期转换方法
-  convertDateToNumber: function (dateStr) {
-    if (!dateStr) {
-      throw new Error('日期字符串不能为空');
-    }
-    dateStr = dateStr.trim();
-    let parts = dateStr.match(/(\d+)月(\d+)日/);
-    if (!parts) {
-      throw new Error('日期格式不正确，请按照XX月XX日的格式输入');
-    }
-    return new Date(2024, parseInt(parts[1]) - 1, parseInt(parts[2]));
-  },
-
-  // 选择器change事件
-  onChange(event) {
-    const {
-      picker,
-      value,
-      index
-    } = event.detail;
-    value.map((item, index) => {
-      if (index === 0) {
-        var date1 = this.convertDateToNumber(item.text);
-        var date2 = new Date();
-        if (date1 > date2) {
-          this.updateTimeIntervalsDisabled(item.id);
-        } else {
-          this.updateTimeIntervalsDisabled(item.id);
-        }
-      }
-    })
-  },
-  onConfirm(event) {
-    const {
-      picker,
-      value,
-      index
-    } = event.detail;
-    var currentDate = new Date();
-    var currentYear = currentDate.getFullYear();
-    if (value.length >= 2) {
-      const text1 = value[0].text; //text1为12月25日
-      const text2 = value[1].text.slice(0, 5); //text2为15:00
-      const month = ("0" + (parseInt(text1.split("月")[0]))).slice(-2); // 将中文月格式转换为数字（注意要减1，因为月份是从0开始计数），并补0
-      const day = text1.split("月")[1].split("日")[0];
-      const hour = text2.split(":")[0];
-      const minute = text2.split(":")[1];
-      const combinedText = `${currentYear}-${month}-${day} ${hour}:${minute}:00`;
-      let dateObj = new Date(combinedText);
-      let timestamp = Math.floor(dateObj.getTime() / 1000);
-      // 获取配送费
-      let that = this
-      var params = {
-        url: "/p/orderRefund/refundPrice",
-        method: "GET",
-        data: {
-          refundSn: this.data.refundSn, //退款编号
-          deliveryTime: timestamp
-        },
-        callBack: function (res) {
-          that.setData({
-            sendInfo: res
-          })
-        }
-      };
-      http.request(params);
-      this.setData({
-        combinedTextValue: combinedText,
-        selectTimeshow: false
-      });
-    }
-  },
-  onCancel: function () {
-    this.setData({
-      selectTimeshow: false
-    })
-  },
-  toPaySend: function () {
-    if (Object.keys(this.data.sendInfo).length === 0) {
-      wx.showToast({
-        title: '请先选择取件时间',
-        icon: 'none'
-      })
-      return
-    } else {
-      let that = this
-      wx.showLoading({
-        mask: true
-      });
-      var params = {
-        url: "/p/order/refundPay",
-        method: "POST",
-        data: {
-          payType: 1,
-          orderType: 1,
-          orderNumbers: this.data.refundSn
-        },
-        callBack: (res) => {
-          wx.hideLoading();
-          wx.requestPayment({
-            timeStamp: res.timeStamp,
-            nonceStr: res.nonceStr,
-            package: res.package,
-            signType: res.signType,
-            paySign: res.paySign,
-            success: e => {
-              wx.showModal({
-                title: '支付成功',
-                content: '',
-                showCancel: false,
-                success: () => {
-                  this.setData({
-                    addCarshow:false
-                  })
-                  this.submitExpress()
-                }
-              })
-            },
-            fail: err => {
-              // this.countdownTime()
-              // that.setData({
-              //   cancelPay: true,
-              //   addCarshow:false
-              // })
-            }
-          })
-        }
-      };
-      http.request(params);
-    }
-  },
-  atoncePaySend: function () {
-    wx.showLoading({
-      mask: true
-    });
-    var params = {
-      url: "/p/order/refundPay",
-      method: "POST",
-      data: {
-        payType: 1,
-        orderType: 1,
-        orderNumbers: this.data.refundSn
-      },
-      callBack: (res) => {
-        wx.hideLoading();
-        wx.requestPayment({
-          timeStamp: res.timeStamp,
-          nonceStr: res.nonceStr,
-          package: res.package,
-          signType: res.signType,
-          paySign: res.paySign,
-          success: e => {
-            wx.showModal({
-              title: '支付成功',
-              content: '',
-              showCancel: false,
-              success: () => {
-                // this.setData({
-                //   cancelPay: false
-                // })
-                this.getRefundDetail()
-              }
-            })
-          },
-          fail: err => {}
-        })
-      }
-    };
-    http.request(params);
-  },
-  // 倒计时
-  countdownTime: function () {
-    // 十五分钟对应的毫秒数
-    const fifteenMinutesInMs = 15 * 60 * 1000;
-    const targetTimeStamp = this.data.sendInfo.touchTime;
-    // 计算增加十五分钟后的时间戳
-    const newTimeStamp = targetTimeStamp + fifteenMinutesInMs;
-    const currentTimeStamp = newTimeStamp;
-    const diff = currentTimeStamp - targetTimeStamp;
-    if (diff > 0) {
-      this.setData({
-        remainingTime: diff,
-      });
-      this.countdown();
-    } else {
-    }
   },
-  // 倒计时
-  countdown: function () {
-    const interval = setInterval(() => {
-      if (this.data.remainingTime <= 0) {
-        clearInterval(interval);
-        this.setData({
-          cancelPay: false
-        })
-        return;
-      }
-      this.setData({
-        remainingTime: this.data.remainingTime - 1000,
-      });
-      // 将剩余时间（毫秒）转换为时分秒格式
-      const hours = Math.floor(this.data.remainingTime / (1000 * 60 * 60));
-      const minutes = Math.floor((this.data.remainingTime % (1000 * 60 * 60)) / (1000 * 60));
-      const seconds = Math.floor((this.data.remainingTime % (1000 * 60)) / 1000);
-      const timeFormat = `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`;
-      this.setData({
-        timeFormat: timeFormat
-      });
-    }, 1000);
-  },
-  // 辅助函数，用于将数字转换为两位数格式（不足两位前面补0）
-  padZero(num) {
-    return num < 10 ? '0' + num : num.toString();
-  },
-  // 根据id判断是否开启disabled
-  updateTimeIntervalsDisabled(id) {
-    let datatime = this.data.timeIntervals.map(subItem => {
-      if (id === 2) {
-        subItem.disabled = false;
-      } else if (id === 1) {
-        // 选中当天重新调用getTime方法判断当前时间
-        this.getTime()
-      }
-      return subItem;
-    });
-    // copy上面的数据结构，待优化
-    let day = []
-    day.push({
-      id: 1,
-      text: this.data.nomDay
-    }, {
-      id: 2,
-      text: this.data.tomorrowDay
-    })
-    let data = []
-    data.push({
-      values: day,
-      className: 'column1',
-    }, {
-      values: this.data.timeIntervals,
-      defaultIndex: 2,
-      className: 'column2',
-    })
-    this.setData({
-      timeIntervals: datatime,
-      columns: data
-    });
-  },
-  flowBution: function () {
-    wx.navigateTo({
-      url: '/pages/MaterialFlowInfo/MaterialFlowInfo?refundSn=' + this.data.refundSn
-    })
-    // this.setData({
-    //   flowShow: true
-    // })
-    // wx.navigateTo({
-    //   url: '/pages/MaterialFlow/MaterialFlow',
-    // })
-  },
-  flowOnClose: function () {
-    this.setData({
-      flowShow: false
-    })
-  },
-  /**
-   * 获取退款申请详情
-   */
-  getRefundDetail: function (e) {
-    var ths = this;
-    // wx.showLoading({})
-    var params = {
-      url: "/p/orderRefund/info",
-      method: "GET",
-      data: {
-        refundSn: this.data.refundSn //退款编号
-      },
-      callBack: function (res) {
-        let img=''
-        res.orderItems.map(item=>{
-          img=item.pic.split(',')
-          item.pic=img[0]
-        })
-        ths.setData({
-          applyTime: res.applyTime, //申请时间
-          applyType: res.applyType, //申请类型:1,仅退款,2退款退货
-          goodsNum: res.goodsNum, //退货数量
-          handelTime: res.handelTime, //卖家处理时间
-          orderAmount: res.orderAmount, //订单总金额
-          orderItems: res.orderItems, //订单项 
-          refundSn: res.refundSn, //退款编号
-          refundAmount: res.refundAmount, //退款金额
-          refundDelivery: res.refundDelivery, //收货地址对象
-          refundId: res.refundId, //记录ID
-          refundTime: res.refundTime, //退款时间
-          returnMoneySts: res.returnMoneySts, //处理退款状态:(1.买家申请 2.卖家接受 3.买家发货 4.卖家收货 5.退款成功 6.买家撤回申请 7.商家拒绝 -1.退款关闭)
-          updateTime: res.updateTime, //更新时间
-          rejectMessage: res.rejectMessage, //拒绝理由
-          buyerReason: res.buyerReason, //退款原因
-          shopName: res.shopName,
-          refundScore: res.refundScore, // 退款积分
-          payer: res.refundDelivery.payer,//运费承担方
-          sendPay:res.refundDelivery.deyNu //物流编号，判断是否提交成功
-        })
-        wx.hideLoading();
-        ths.get_countDown()
-      }
-    };
-    http.request(params);
-  },
-/**
- * 同意后倒计时
- * @param {*} e 
- */
-get_countDown:function(){
-  const start = new Date(this.data.handelTime);
-    const end = new Date(start.getTime() + 48 * 60 * 60 * 1000);
-    const interval = setInterval(() => {
-      const now = new Date();
-      const diff = end - now;
-      if (diff <= 0) {
-        clearInterval(interval);
-        this.setData({
-          countdown_hours: '00天',
-          countdown_minutes:'00分钟'
-        });
-      } else {
-        const hours = Math.floor(diff / (1000 * 60 * 60));
-        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-        this.setData({
-          countdown_hours:String(hours).padStart(2, '0'),
-          countdown_minutes:String(minutes).padStart(2, '0')
-          // countdown_time:`${String(hours).padStart(2, '0')}小时${String(minutes).padStart(2, '0')}分钟`
-        });
-      }
-    }, 1000);
-},
-  /**
-   * 撤销退货退款申请
-   */
-  cancelApplication: function (e) {
-    console.log('撤销申请')
-    wx.showModal({
-      title: '撤销',
-      content: '确定要撤销本次申请？',
-      success: (res) => {
-        if (res.confirm) {
-          wx.showLoading({})
-          var params = {
-            url: "/p/orderRefund/cancel",
-            method: "PUT",
-            data: this.data.refundSn, //退款订单编号
-            callBack: function (res) {
-              wx.hideLoading();
-              wx.navigateTo({
-                url: '/pages/afterSales/afterSales',
-              })
-            }
-          };
-          http.request(params);
-        } else {
-          console.log('取消')
-        }
-      }
-    })
-
-  },
-
-
-  /**
-   * 跳转修改退款申请
-   */
-  // toAlterRefundApply: function (e) {
-  //   var refundSn = e.currentTarget.dataset.refundsn;
-  //   console.log(e.currentTarget.dataset.refundsn)
-  //   wx.navigateTo({
-  //     url: '/pages/applyRefund/applyRefund?refundSn=' + refundSn,
-  //   })
-  // },
-
-
-  /**
-   * 填写物流信息
-   */
-  toLogisticsPage: function (e) {
-    var refundSn = e.currentTarget.dataset.refundsn;
-    console.log(e.currentTarget.dataset.refundsn)
-    wx.navigateTo({
-      url: '/pages/writeReturnLogistics/writeReturnLogistics?refundSn=' + refundSn,
-    })
-  },
-
 
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
-  onReady: function () {
+  onReady() {
 
   },
 
   /**
    * 生命周期函数--监听页面显示
    */
-  onShow: function () {
+  onShow() {
 
   },
 
   /**
    * 生命周期函数--监听页面隐藏
    */
-  onHide: function () {
+  onHide() {
 
   },
 
   /**
    * 生命周期函数--监听页面卸载
    */
-  onUnload: function () {
+  onUnload() {
 
   },
 
   /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
-  onPullDownRefresh: function () {
+  onPullDownRefresh() {
 
   },
 
   /**
    * 页面上拉触底事件的处理函数
    */
-  onReachBottom: function () {
+  onReachBottom() {
 
   },
 
   /**
    * 用户点击右上角分享
    */
-  onShareAppMessage: function () {
+  onShareAppMessage() {
 
   }
 })

pages/DetailsOfRefund1/DetailsOfRefund.json

@@ -1,5 +1,3 @@
 {
-  "usingComponents": {},
-  "backgroundTextStyle": "light",
-  "navigationBarTitleText": "退款详情"
+  "usingComponents": {}
 }

pages/DetailsOfRefund1/DetailsOfRefund.wxml

@@ -1,267 +1,161 @@
-<!-- 退款详情 -->
-<!--pages/DetailsOfRefund/DetailsOfRefund.wxml-->
-
-<view class="page">
-  <!-- 头部状态 -->
-  <view class="describe-box">
-    <!-- 申请行进流程 -->
-    <view class="process">
-      <!-- 提交申请 -->
-      <view class="current-process" wx:if="{{returnMoneySts == 1}}">退款申请待商家处理</view>
-      <view class="acount-for-process" wx:if="{{returnMoneySts == 1}}">
-        你已成功发起退款申请，等待商家处理
-      </view>
-      <view class="acount-for-process" wx:if="{{returnMoneySts == 1}}">
-        {{updateTime}}
-      </view>
-      <!-- 商家拒绝 -->
-      <view class="current-process" wx:if="{{returnMoneySts == 7}}">商家不同意退款申请</view>
-      <view class="acount-for-process" wx:if="{{returnMoneySts == 7}}">
-        你可以修改退款申请
-      </view>
-      <view class="acount-for-process" wx:if="{{returnMoneySts == 7}}">
-        {{updateTime}}
-      </view>
-      <!-- 商家同意退款 -->
-      <view class="current-process" wx:if="{{returnMoneySts == 2}}">商家同意退款</view>
-      <view class="acount-for-process" wx:if="{{returnMoneySts == 2 && applyType == 1}}">
-        商家已同意，等待系统退款
-      </view>
-      <view class="acount-for-process" wx:if="{{returnMoneySts == 2 && applyType == 2}}">
-        商家已同意，请按照商家给出的退货地址寄回商品
-      </view>
-      <view class="acount-for-process" wx:if="{{returnMoneySts == 2}}">
-        {{updateTime}}
-      </view>
-      <!-- 寄出商品（退货退款情况下） -->
-      <view class="current-process" wx:if="{{returnMoneySts == 3}}">等待商家确认收货并退款</view>
-      <view class="acount-for-process" wx:if="{{returnMoneySts == 3}}">
-        你已退货，商家将在收货后尽快处理
-      </view>
-      <view class="acount-for-process" wx:if="{{returnMoneySts == 3}}">
-        {{updateTime}}
-      </view>
-      <!-- 商家确认收货 -->
-      <view class="current-process" wx:if="{{returnMoneySts == 4}}">商家确认收货</view>
-      <view class="acount-for-process" wx:if="{{returnMoneySts == 4}}">
-        商家已确认收货，等待系统退款
-      </view>
-      <view class="acount-for-process" wx:if="{{returnMoneySts == 4}}">
-        {{updateTime}}
-      </view>
-      <!-- 退款成功 -->
-      <view class="current-process" wx:if="{{returnMoneySts == 5}}">退款成功</view>
-      <view class="acount-for-process" wx:if="{{returnMoneySts == 5}}">
-        {{refundTime}}
-      </view>
-      <!-- 退款申请关闭 -->
-      <view class="current-process" wx:if="{{returnMoneySts == -1}}">退款申请关闭</view>
-      <view class="acount-for-process" wx:if="{{returnMoneySts == -1}}">
-        <!-- 由于你超时未处理，系统已关闭本次退款申请 -->
-        {{rejectMessage?rejectMessage:''}}
-      </view>
-      <view class="acount-for-process" wx:if="{{returnMoneySts == -1}}">
-        {{updateTime}}
-      </view>
-      <!-- 买家撤回申请 -->
-      <view class="current-process" wx:if="{{returnMoneySts == 6}}">申请已撤回</view>
-      <view class="acount-for-process" wx:if="{{returnMoneySts == 6}}">
-        你已撤回本次退款申请
-      </view>
-      <view class="acount-for-process" wx:if="{{returnMoneySts == 6}}">
-        {{updateTime}}
-      </view>
-      <!-- 隐藏内容（仅退款） -->
-      <view class="{{showView?'display':'more-content'}}" wx:if="{{returnMoneySts == 1}}">
-        <view class="cont">如果商家同意，申请将达成并退款给你</view>
-        <view class="cont">如果商家拒绝，你可以修改退款申请重新尝试</view>
-        <!-- <view class="cont">如果商家逾期未处理，退款申请将自动达成并退款给你</view> -->
-      </view>
-      <!-- 隐藏内容（退货退款申请商品未寄出） -->
-      <view class="{{showView?'display':'more-content'}}" wx:if="{{returnMoneySts == 2}}">
-        <view class="cont">如果商家同意，请按照给出的退货地址退货</view>
-        <view class="cont">如果商家拒绝，你可以修改退款申请重新尝试</view>
-        <!-- <view class="cont">如果商家逾期未处理，请按照系统给出的退货地址退货</view> -->
-      </view>
-      <!-- 隐藏内容（退货退款并已寄出货物） -->
-      <view class="{{showView?'display':'more-content'}}" wx:if="{{returnMoneySts == 3}}">
-        <view class="cont">如果商家确认收货，申请将达成并退款给你</view>
-        <view class="cont">如果商家拒绝收货，你可以修改退货物流信息重新尝试</view>
-        <!-- <view class="cont">如果商家逾期未处理，系统将自动确认收货并退款给你</view> -->
-      </view>
+<view class="DetailsOfRefund">
+  <view class="result-box box">
+    <view class="result">
+      <view class="title">退款成功1</view>
+      <view class="desc">已完成退款，具体到账时间请查询支付宝</view>
     </view>
-    <!-- 申请行进流程end -->
-
-    <!-- 更多说明 -->
-    <view class="{{showView?'more-instructions':'display'}}" bindtap="onChangeShowState" wx:if="{{returnMoneySts < 4 && returnMoneySts !== -1 && applyType == 2}}">
-      <text class="more-txt">更多说明</text>
-      <view class="down-arrow-icon">
-        <image src="../../images/icon/down-arrow.png"></image>
-      </view>
+    <view class="result">
+    <view class="title-box">
+      <view class="title small">退款成功</view>
+      <view class="price">￥21</view>
     </view>
-    <!-- 收起 -->
-    <view class="{{showView?'display':'more-instructions'}}" bindtap="onChangeShowState" wx:if="{{returnMoneySts < 4 && returnMoneySts !== -1 && applyType == 2}}">
-      <text class="more-txt">收起</text>
-      <view class="down-arrow-icon">
-        <image src="../../images/icon/up-arrow.png"></image>
-      </view>
+      <view class="desc">已完成退款，具体到账时间请查询支付宝</view>
     </view>
   </view>
-  <!-- 头部状态end -->
 
-  <!-- 【退款申请被拒绝时显示】拒绝理由 -->
-  <view class="refuse-reason" wx:if="{{returnMoneySts == 7}}">
-    拒绝理由：{{rejectMessage}}
-  </view>
-  <!-- 退货方式 -->
-  <!-- wx:if="{{returnMoneySts == 2 && applyType == 2}}" -->
-  <view class="return-address" wx:if="{{returnMoneySts == 3||returnMoneySts == 2 && applyType == 2}}">
-    <view class="addr-tit">退货方式</view>
-    <view class="address">
-      <view class="return-shop-box">
-        <view>
-          <view class="shop-title">{{payer==1?'商家':'用户'}}承担运费</view>
-          <view class="shop-text" wx:if="{{returnMoneySts==3}}">已发起配送</view>
-          <view class="shop-text" wx:else>请在{{countdown_hours}}小时{{countdown_minutes}}分钟内，发起配送，将货品退回给商家。</view>
+  <view class="oprate-box box">
+      <view class="item">
+        <image class="icon" src="../../images/icon/del-icon.png" mode=""/>
+        <view class="label">
+          删除订单
         </view>
-        <view class="shop-btn" bindtap="sendDistribution" wx:if="{{sendPay==null}}">发起配送</view>
-        <view class="shop-btn" bindtap="flowBution" wx:else>查看物流</view>
       </view>
+      <!-- <button class='item' open-type="contact" >
+        <image class="icon" src="../../images/icon/chat-icon.png" mode=""/>
+        <view class="label">
+          联系商家
+        </view>
+     </button>
+      <view class="item" >
+        <image class="icon" src="../../images/icon/buy-icon.png" mode=""/>
+        <view class="label">
+          再次购买
+        </view>
+      </view> -->
     </view>
-  </view>
-  <!-- <view wx:if="{{cancelPay}}">
-    <view class="pay-card">
-      <view class="loading-time">等待支付，剩余<text style="color: #FF4D3A;">{{timeFormat}}</text></view>
-      <view class="time-out">超过15分钟未支付，订单将自动取消。</view>
-      <view class="pay-btn" bindtap="atoncePaySend">立即支付￥{{sendInfo.price}}</view>
-    </view>
-  </view> -->
-  <van-popup show="{{ addCarshow }}" closeable round position="bottom" custom-style="height: 45%" bind:close="onClose">
-    <view class="popup-box">
-      <view class="popup-title">寄回商品</view>
-      <view class="info-card-box">
-        <view class="card-address">顾客地址</view>
-        <view class="card-info">{{userAddrDto.address}}{{userAddrDto.addressName}}{{userAddrDto.addrDetail}}</view>
-        <view class="card-user">{{userAddrDto.receiver}} {{userAddrDto.mobile}}</view>
-        <view class="card-line"></view>
-        <view class="card-time-box" bindtap="selectUpTime">
-          <view class="card-time">*取件时间</view>
-          <view class="up-time">{{combinedTextValue||'请选择上门时间'}}
-            <van-icon name="arrow" />
+
+    <view class="process-box box">
+      <view class="sub-title">退款流程</view>
+      
+      <view class="step-box">
+        <view class="step-item" wx:for="{{4}}">
+          <view class="point {{index == 0?'active':''}}"></view>
+          <view class="line"></view>
+          <view class="title">退款成功</view>
+          <view class="desc">已完成退款，具体到账时间请查询支付宝</view>
+          <view class="time">2024-12-13 11：12：30</view>
+          <view class="img-list" wx:if="{{index == 3}}">
+            <view class="img"></view>
+            <view class="img"></view>
+            <view class="img"></view>
+            <view class="img"></view>
+            <view class="img"></view>
+            <view class="img"></view>
+            <view class="img"></view>
+            <view class="img"></view>
+            <view class="img"></view>
           </view>
         </view>
       </view>
-      <view class="costSide-card">
-        <view>配送费支付方</view>
-        <view>{{payer==1?'商家':'用户'}}</view>
-      </view>
-      <view class="bottom-button-box">
-        <!-- 支付方:payer=1店铺，2买家 -->
-        <view class="bottom-button" wx:if="{{payer==1}}" bindtap="submitBtn">提交</view>
-        <view class="send-pay-box" wx:else>
-          <view class="sendpay-text">配送费 <text style="color: #FF4D3A;">￥{{sendInfo.price||'0'}}</text></view>
-          <view class="sendpay-btn" bindtap="toPaySend">支付</view>
-        </view>
-      </view>
+
     </view>
-  </van-popup>
-  <van-popup show="{{ selectTimeshow }}" overlay="{{false}}" round position="bottom" custom-style="height: 45%" bind:close="timeOnClose">
-    <view class="popup-box">
-      <view class="popup-title">选择上门时间</view>
-      <van-picker columns="{{ columns }}" show-toolbar bind:cancel="onCancel" bind:confirm="onConfirm" bind:change="onChange" />
-      <!-- <view class="popup-select-day">
-        <view class="day-left">
-          <view class="{{sts==0?'now-day':'tomorrow-day'}}" data-sts="0" data-time="{{nomDay}}" bindtap="selectday">{{nomDay+'(今天)'}}</view>
-          <view style="margin-top: 28rpx;" class="{{sts==1?'now-day':'tomorrow-day'}}" data-sts="1" data-time="{{tomorrowDay}}" bindtap="selectday">{{tomorrowDay+'(明天)'}}</view>
+
+    <view class="refund-goods box">
+      <view class="title-box">
+        <view class="title">退款商品</view>
+        <view class="price">退款金额：￥21</view>
+      </view>
+      <view class="good-list">
+        <view class="good-item">
+          <view class="img"></view>
+          <view class="info">
+            <view class="good-name">赶海季生鲜大闸蟹</view>
+            <view class="desc">规格：5kg，盒</view>
+            <view class="price">单价：￥1.8</view>
+          </view>
+          <view class="price-box">
+            <view class="price">￥103.95</view>
+            <view class="num">x1</view>
+          </view>
         </view>
-        <view class="time-right">
-          <view class="sel-time{{currentSelectedIndex === index? 'selected' : ''}}" wx:for="{{timeIntervals}}" bindtap="selectTime" data-time="{{item}}" data-index="{{index}}">
-          <text wx:if="{{!item.hidden}}">{{item.interval}}</text></view>
+        <view class="good-item">
+          <view class="img"></view>
+          <view class="info">
+            <view class="good-name">赶海季生鲜大闸蟹</view>
+            <view class="desc">规格：5kg，盒</view>
+            <view class="price">单价：￥1.8</view>
+          </view>
+          <view class="price-box">
+            <view class="price">￥103.95</view>
+            <view class="num">x1</view>
+          </view>
         </view>
-      </view> -->
-    </view>
-  </van-popup>
-  <van-popup show="{{ flowShow }}" closeable round position="bottom" custom-style="height: 45%" bind:close="flowOnClose">
-    <van-steps custom-class="steps-style" steps="{{ steps }}" active="{{ active }}" direction="vertical" active-color="#FF941A" />
-  </van-popup>
-  <!-- 【退货退款状态下，买家同意后】退货地址 -->
-  <view class="return-address" wx:if="{{returnMoneySts == 2 && applyType == 2}}">
-    <view class="addr-tit">退货地址</view>
-    <view class="address">
-      <view class="recipient">
-        <text class="addr-cont">收件人：{{refundDelivery.receiverName}}</text>
-        <text class="mobile">{{refundDelivery.receiverMobile}}</text>
+        <view class="good-item">
+          <view class="img"></view>
+          <view class="info">
+            <view class="good-name">赶海季生鲜大闸蟹</view>
+            <view class="desc">规格：5kg，盒</view>
+            <view class="price">单价：￥1.8</view>
+          </view>
+          <view class="price-box">
+            <view class="price">￥103.95</view>
+            <view class="num">x1</view>
+          </view>
+        </view>
+
       </view>
-      <view class="addr">详细地址：{{refundDelivery.receiverAddr}}</view>
+        <view class="open-btn">
+          展开（共7件） <image class="arrow" src="../../images/icon/black-down-arrow.png" mode=""/>
+        </view>
     </view>
-  </view>
 
-
-  <!-- 退款信息 -->
-  <view class="refund-message">
-    <view class="refund-txt">退款信息</view>
-    <view class="goods-msg-box">
-      <!-- 店铺 -->
-      <!-- <view class="shop-box">
-        <view class="shop-img"><image src="../../images/icon/shop.png"></image></view>
-        <view class="shopname">店铺：{{shopName}}</view>
-      </view> -->
-      <!-- 图片 -->
-      <view class="img-box" wx:if="{{orderItems.length==1}}">
-        <image src="{{orderItems[0].pic}}"></image>
+    <view class="goods-info box">
+      <view class="item">
+        <view class="label">商品金额</view>
+        <view class="value">￥54.00</view>
       </view>
-      <!-- 信息 -->
-      <view class="goods-text" wx:if="{{orderItems.length==1}}">
-        <view class="goods-title">{{orderItems[0].prodName}}</view>
-        <view class="goods-quantity">数量：{{orderItems[0].prodCount}}件</view>
+      <view class="item">
+        <view class="label">运费（快递）</view>
+        <view class="value">￥54.00</view>
+      </view>
+      <view class="item">
+        <view class="label">积分（1400）</view>
+        <view class="value">￥54.00</view>
+      </view>
+      <view class="total">
+        <view class="label">总计：</view>
+        <view class="value">￥54.00</view>
       </view>
-
-      <block wx:if="{{orderItems.length>1}}">
-        <view class="refund-goods-item" wx:for="{{orderItems}}" wx:key="*this">
-          <!-- 图片 -->
-          <view class="img-box">
-            <image src="{{item.pic}}"></image>
-          </view>
-          <!-- 信息 -->
-          <view class="goods-text">
-            <view class="goods-title">{{item.prodName}}</view>
-            <view class="goods-quantity">数量：{{item.prodCount}}件</view>
-          </view>
-        </view>
-      </block>
-    </view>
-    <!-- 具体信息 -->
-    <view class="refund-cont">退款方式：{{['','仅退款','退货退款'][applyType]}}</view>
-    <view class="refund-cont">退款原因：{{buyerReason}}</view>
-    <view class="refund-cont">退款金额：
-      <text class="red" wx:if="{{refundAmount && refundAmount > 0}}">￥{{wxs.toPrice(refundAmount?refundAmount:0)}}</text>
-      <text class="red" wx:if="{{(refundScore && refundScore > 0) && (refundAmount && refundAmount > 0)}}">+</text>
-      <text class="red" wx:if="{{refundScore && refundScore > 0}}">{{refundScore}}积分</text>
     </view>
-    <view class="refund-cont">退款编号：{{refundSn}}</view>
-    <view class="refund-cont">申请时间：{{applyTime}}</view>
-    <!-- 【退货申请显示】 -->
-    <view class="refund-cont" wx:if="{{goodsNum>0}}">退货数量：{{goodsNum}}</view>
-    <!-- 联系商家 -->
-    <!-- <view class="contact-merchant">联系商家</view> -->
-    <button class='contact-merchant' open-type="contact">联系客服</button>
-  </view>
 
-
-  <!-- 脚部撤销申请 -->
-  <!-- applyType: 1,  //申请类型:1,仅退款,2退款退货 -->
-  <!-- returnMoneySts： 处理退款状态:(1.买家申请 2.卖家接受 3.买家发货 4.卖家收货 5.退款成功 6.买家撤回申请 7.商家拒绝 -1.退款关闭) -->
-  <view class="foot-box">
-    <view class="footer">
-      <!-- 【申请后-申请完成前】 -->
-      <text class="undo-apply" bindtap="cancelApplication" wx:if="{{returnMoneySts ==1 || returnMoneySts == 7 || (returnMoneySts ==2 && applyType == 2)}}">撤销申请</text>
-      <!-- 【商家拒绝时显示】 -->
-      <!-- <text class="undo-apply apply-current" bindtap="toAlterRefundApply" wx:if="{{returnMoneySts ==1 || returnMoneySts == 7}}" data-refundsn="{{refundSn}}">修改申请</text> -->
-      <!-- 【商家同意后-货物寄出前】 -->
-      <!-- <text class="undo-apply apply-current" bindtap="toLogisticsPage" wx:if="{{returnMoneySts == 2 && applyType == 2}}" data-refundsn="{{refundSn}}">填写退货物流</text> -->
+    <view class="order-info box">
+      <view class="title">订单信息</view>
+      <view class="item">
+        <view class="label">订单编号</view>
+        <view class="value-box">
+          <view class="value">1867402054587256856</view>
+          <image class="icon" src="../../images/icon/copy.png" mode=""/>
+        </view>
+      </view>
+      <view class="item">
+        <view class="label">售后编号</view>
+        <view class="value-box">
+          <view class="value">1867402054587256856</view>
+          <image class="icon" src="../../images/icon/copy.png" mode=""/>
+        </view>
+      </view>
+      <view class="item">
+        <view class="label">申请时间</view>
+        <view class="value">1867402054587256856</view>
+      </view>
+      <view class="item">
+        <view class="label">服务类型</view>
+        <view class="value">仅退款</view>
+      </view>
+      <view class="item">
+        <view class="label">申请原因</view>
+        <view class="value">实物与图片不符合</view>
+      </view>
     </view>
-  </view>
-
-</view>
 
-<wxs module="wxs" src="../../wxs/number.wxs" />
+</view>

pages/DetailsOfRefund1/DetailsOfRefund.wxss

@@ -1,633 +1,296 @@
 /* pages/DetailsOfRefund/DetailsOfRefund.wxss */
-.display {
-  display: none;
+.DetailsOfRefund{
+  padding: 20rpx 24rpx 120rpx;
+  background: #F6F6F6;
 }
 
-image {
-  width: 100%;
-  height: 100%;
+.DetailsOfRefund .result-box{
+  padding: 0 28rpx ;
 }
 
-.page {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background: #f7f7f7;
-}
-
-/* 头部状态 */
-.describe-box {
-  background: #fff;
-  margin-bottom: 20rpx;
-}
-
-.process {
-  padding: 20rpx 25rpx;
-  border-bottom: 1rpx solid #f2f2f2;
+.DetailsOfRefund .result-box .result{
+  position: relative;
+  padding: 24rpx 0;
+  
 }
 
-.current-process {
-  font-size: 30rpx;
+.DetailsOfRefund .result-box .result .title{
   font-weight: bold;
-  padding: 10rpx 0;
+  font-size: 32rpx;
+  color: #222222;
 }
-
-.acount-for-process {
+.DetailsOfRefund .result-box .result .title.small{
   font-size: 28rpx;
-  color: #444;
-  line-height: 1.5em;
 }
 
-.red {
-  color: #e43130;
+.DetailsOfRefund .result-box .result .desc{
+  font-size: 24rpx;
+  color: #AAAAAA;
+  margin-top: 20rpx;
 }
-
-/* 隐藏内容 */
-.more-content {
-  border-top: 1rpx dashed #ebebeb;
-  margin-top: 15rpx;
-  padding-top: 10rpx;
+.DetailsOfRefund .result-box .result .title-box{
+  display: flex;
+  justify-content: space-between;
 }
 
-.cont {
+.DetailsOfRefund .result-box .result .price{
+  font-weight: bold;
   font-size: 28rpx;
-  color: #666666;
-  line-height: 1.8em
-}
-
-/* 更多说明 */
-.more-instructions {
-  padding: 18rpx 0;
-  padding-bottom: 22rpx;
-  text-align: center;
-  font-size: 27rpx;
-}
-
-.more-txt {
-  vertical-align: middle;
-}
-
-.down-arrow-icon {
-  display: inline-block;
-  width: 40rpx;
-  height: 25rpx;
-  vertical-align: middle;
+  color: #FF4D3A;
 }
 
-
-/* 退款流程 */
-.refund-schedule {
-  background: #fff;
+.box{
+  background: #FFFFFF;
+  border-radius: 16rpx 16rpx 16rpx 16rpx;
   margin-bottom: 20rpx;
-  padding: 0 25rpx;
-}
-
-.refund-sum {
-  font-size: 28rpx;
-  padding: 25rpx 0;
-  border-bottom: 1rpx solid #f2f2f2;
 }
 
-.progress-bar {
-  position: relative;
+.DetailsOfRefund .oprate-box{
   display: flex;
-  justify-content: space-around;
-  padding: 20rpx 0;
+  padding: 0 24rpx;
+  
 }
-
-.block {
-  display: inline-block;
+.DetailsOfRefund .oprate-box .item{
+  width: 25%;
   text-align: center;
+  margin: 0;
+  border: none;
+  background-color: #fff !important;
+  padding: 24rpx 0;
+  display: block!important;
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+  line-height: normal;
+}
+.DetailsOfRefund wx-button:after {
+  border: none;
+}
+.DetailsOfRefund .oprate-box .item .icon{
+  width: 40rpx;
+  height: 40rpx;
 }
 
-.round {
-  display: block;
-  width: 13rpx;
-  height: 13rpx;
-  border-radius: 50%;
-  background: #999999;
-  margin: 0 auto;
-  margin-top: 15rpx;
-}
-
-/* 激活状态圆点 */
-.round-current {
-  background: #3388ff;
-}
-
-.block-text {
-  margin-top: 15rpx;
-  text-align: center;
-}
-
-.block-text-tit {
-  font-size: 26rpx;
-  line-height: 2em;
-  color: #777;
-}
-
-.block-text-time {
-  font-size: 22rpx;
-  color: #aaa;
-}
-
-.line {
-  position: absolute;
-  top: 39rpx;
-  display: inline-block;
-  width: 215rpx;
-  height: 5rpx;
-  background: #bdbdbd;
-}
-
-/* 激活状态直线 */
-.line-current {
-  background: #3388ff;
-}
-
-.line01 {
-  left: 145rpx;
-}
-
-.line02 {
-  right: 115rpx;
-}
-
-/* 拒绝理由 */
-.refuse-reason {
+.DetailsOfRefund .oprate-box .item .label{
   font-size: 28rpx;
-  background: #fff;
-  padding: 20rpx;
-  margin-bottom: 20rpx;
+  color: #222222;
+  margin-top: 20rpx;
 }
-
-
-/* 退货地址 */
-.return-address {
-  background: #fff;
-  margin-bottom: 20rpx;
+.DetailsOfRefund .process-box{
+  padding: 24rpx;
 }
-
-.addr-tit {
-  padding: 10rpx 20rpx;
-  border-bottom: 1rpx solid #f2f2f2;
-  font-size: 30rpx;
+.DetailsOfRefund .process-box .sub-title{
   font-weight: bold;
+  font-size: 32rpx;
+  color: #222222;
+  padding-bottom: 20rpx;
 }
 
-.addr {
-  padding-right: .5em;
-}
-
-.address {
-  padding: 20rpx;
-  font-size: 28rpx;
-}
-
-.recipient {
-  padding-bottom: 10rpx;
-}
+.DetailsOfRefund .process-box .step-box{
 
-.mobile {
-  margin-left: 50rpx;
 }
 
-.pay-card {
-  background: #fff;
+.DetailsOfRefund .process-box .step-box .step-item{
+  position: relative;
   margin-bottom: 20rpx;
-  padding: 20rpx;
+  padding-left: 34rpx;
 }
 
-.loading-time {
-  font-family: PingFang SC, PingFang SC;
+.DetailsOfRefund .process-box .step-box .step-item .title{
   font-weight: bold;
   font-size: 28rpx;
   color: #181818;
 }
-
-.time-out {
-  margin-top: 20rpx;
-  font-family: PingFang SC, PingFang SC;
-  font-weight: normal;
+.DetailsOfRefund .process-box .step-box .step-item .desc{
   font-size: 24rpx;
   color: #AAAAAA;
-}
-
-.pay-btn {
   margin-top: 20rpx;
-  width: 220rpx;
-  height: 64rpx;
-  border-radius: 40rpx;
-  border: 2rpx solid #FF4D3A;
-  font-family: PingFang SC, PingFang SC;
-  font-weight: normal;
-  font-size: 28rpx;
-  color: #FF4D3A;
-  text-align: center;
-  line-height: 64rpx;
 }
 
-/* 退货方式 */
-.return-shop-box {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.shop-title {
-  font-family: PingFang SC, PingFang SC;
-  font-weight: bold;
-  font-size: 28rpx;
-  color: #181818;
-}
-
-.shop-text {
-  margin-top: 20rpx;
-  font-family: PingFang SC, PingFang SC;
-  font-weight: normal;
+.DetailsOfRefund .process-box .step-box .step-item .time{
   font-size: 24rpx;
   color: #AAAAAA;
+  margin-top: 12rpx;
 }
 
-.shop-btn {
-  width: 136rpx;
-  height: 64rpx;
-  background: #FFFFFF;
-  border-radius: 40rpx;
-  border: 2rpx solid #FF4D3A;
-  font-family: PingFang SC, PingFang SC;
-  font-weight: normal;
-  font-size: 28rpx;
-  color: #FF4D3A;
-  line-height: 64rpx;
-  text-align: center;
+.DetailsOfRefund .process-box .step-box .step-item .point{
+  width: 14rpx;
+  height: 14rpx;
+  border-radius: 50%;
+  background: #CCCCCC;
+  position: absolute;
+  top: 0rpx;
+  left: -7rpx;
+  z-index: 9;
 }
-
-.popup-box {
-  padding: 20rpx;
+.DetailsOfRefund .process-box .step-box .step-item .point.active{
+  background: #FF941A;
 }
 
-.popup-title {
-  margin-top: 28rpx;
-  font-family: PingFang SC, PingFang SC;
-  font-weight: 800;
-  font-size: 32rpx;
-  text-align: center;
+.DetailsOfRefund .process-box .step-box .step-item .line{
+  width: 2rpx;
+  height: 115rpx;
+  background: #AAAAAA;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 8;
 }
-
-.popup-select-day {
+.DetailsOfRefund .process-box .step-box .step-item .img-list{
   display: flex;
+  overflow: auto;
+  margin-top: 12rpx;
 }
-
-.day-left {
-  margin-top: 50rpx;
+.DetailsOfRefund .process-box .step-box .step-item .img-list .img{
+  width: 120rpx;
+  height: 120rpx;
+  background: #F6F6F6;
+  border-radius: 32rpx 32rpx 32rpx 32rpx;
+  margin-right: 16rpx;
+  flex-shrink: 0;
 }
 
-.now-day {
-  font-weight: normal;
-  font-size: 28rpx;
-  color: #222222;
+.DetailsOfRefund .refund-goods{
+  padding: 24rpx;
 }
 
-.tomorrow-day {
-  font-weight: normal;
+.DetailsOfRefund .refund-goods .title-box{
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 24rpx;
+  font-weight: bold;
   font-size: 28rpx;
-  color: #AAAAAA;
 }
-
-.time-right {
-  margin-top: 50rpx;
-  margin-left: 300rpx;
-  height: 500rpx;
-  overflow-y: auto; 
-  font-weight: normal;
-  font-size: 28rpx;
+.DetailsOfRefund .refund-goods .title-box .title{
   color: #222222;
 }
-.time-right::-webkit-scrollbar {
-  display: none;
+.DetailsOfRefund .refund-goods .title-box .price{
+  color: #FF4D3A;
 }
-.sel-time {
-  margin-bottom:28rpx;
-  font-weight: normal;
-  font-size: 28rpx;
-  color: #AAAAAA;
+
+.DetailsOfRefund .refund-goods .good-list{
 }
-.sel-timeselected{
-  margin-bottom:28rpx;
-  color: #222222;
+.DetailsOfRefund .refund-goods .good-list .good-item{
+  border-top:1rpx solid #F0F0F0;
+  padding: 20rpx 0;
+  display: flex;
+
 }
-.info-card-box {
-  margin-top: 20rpx;
-  background-color: #F9F9F9;
+.DetailsOfRefund .refund-goods .good-list .good-item .img{
+  width: 120rpx;
+  height: 120rpx;
   border-radius: 16rpx;
-  padding: 20rpx;
+  background: #F6F6F6;
 }
-
-.card-address {
-  font-family: PingFang SC, PingFang SC;
-  font-weight: normal;
-  font-size: 28rpx;
-  color: #222222;
+.DetailsOfRefund .refund-goods .good-list .good-item .info{
+  margin-left: 20rpx;
+  flex: 1;
 }
-
-.card-info {
-  margin-top: 20rpx;
-  font-family: PingFang SC, PingFang SC;
+.DetailsOfRefund .refund-goods .good-list .good-item .info .good-name{
   font-weight: bold;
   font-size: 28rpx;
   color: #222222;
 }
-
-.card-user {
-  margin-top: 20rpx;
-  font-family: PingFang SC, PingFang SC;
-  font-weight: normal;
+.DetailsOfRefund .refund-goods .good-list .good-item .info .desc{
   font-size: 24rpx;
   color: #AAAAAA;
+  margin-top: 10rpx;
 }
-
-.card-line {
-  margin-top: 20rpx;
-  border: 2rpx solid #F0F0F0;
-}
-
-.card-time-box {
-  margin-top: 20rpx;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.card-time {
-  font-family: PingFang SC, PingFang SC;
-  font-weight: normal;
-  font-size: 28rpx;
-  color: #222222;
-}
-
-.up-time {
-  font-family: PingFang SC, PingFang SC;
-  font-weight: normal;
-  font-size: 28rpx;
+.DetailsOfRefund .refund-goods .good-list .good-item .info .price{
   color: #AAAAAA;
+  font-size: 24rpx;
 }
-
-.costSide-card {
-  margin-top: 20rpx;
-  background-color: #F9F9F9;
-  border-radius: 16rpx;
-  padding: 20rpx;
+.DetailsOfRefund .refund-goods .good-list .good-item .price-box{
   display: flex;
-  align-items: center;
+  flex-direction: column;
   justify-content: space-between;
+  align-items: flex-end;
 }
-
-.costSide-card>view:first-child {
-  font-family: PingFang SC, PingFang SC;
-  font-weight: normal;
-  font-size: 28rpx;
-  color: #222222;
+.DetailsOfRefund .refund-goods .good-list .good-item .price-box .price{
+  font-weight: bold;
+  font-size: 32rpx;
+  color: #FF4D3A;
 }
-
-.costSide-card>view:last-child {
-  font-family: PingFang SC, PingFang SC;
-  font-weight: normal;
-  font-size: 28rpx;
+.DetailsOfRefund .refund-goods .good-list .good-item .price-box .num{
+  font-size: 24rpx;
   color: #AAAAAA;
 }
-
-.bottom-button-box {
-  background: #FFFFFF;
-  box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0, 0, 0, 0.09);
-  border-radius: 32rpx 32rpx 0rpx 0rpx;
+.DetailsOfRefund .refund-goods .open-btn{
   display: flex;
+  align-items: center;
   justify-content: center;
+  font-size: 24rpx;
+  color: #222222;
+  margin-top: 20rpx;
 }
-
-.bottom-button {
-  width: 702rpx;
-  height: 80rpx;
-  background: #FF941A;
-  border-radius: 40rpx;
-  margin-top: 30rpx;
-  font-family: PingFang SC, PingFang SC;
-  font-weight: bold;
-  font-size: 28rpx;
-  color: #FFFFFF;
-  text-align: center;
-  line-height: 80rpx;
+.DetailsOfRefund .refund-goods .open-btn .arrow{
+  width: 20rpx;
+  height: 20rpx;
 }
 
-.picker-style {
-  font-size: 16rpx !important;
-  margin-left: -80rpx;
+.DetailsOfRefund .goods-info{
+  padding: 24rpx;
 }
-
-.send-pay-box {
+.DetailsOfRefund .goods-info .item{
   display: flex;
-  align-items: center;
-  margin-top: 30rpx;
-}
+  justify-content: space-between;
+  padding-bottom: 28rpx;
 
-.sendpay-text {
-  font-family: PingFang SC, PingFang SC;
-  font-weight: normal;
-  font-size: 28rpx;
-  width: 400rpx;
 }
-
-.sendpay-btn {
-  width: 220rpx;
-  height: 80rpx;
-  background: #FF941A;
-  border-radius: 40rpx;
-  font-family: PingFang SC, PingFang SC;
-  font-weight: bold;
+.DetailsOfRefund .goods-info .item .label{
   font-size: 28rpx;
-  color: #FFFFFF;
-  line-height: 80rpx;
-  text-align: center;
-}
-
-/* 查看协商记录 */
-/* .negotiate-record {
-  position: relative;
-  font-size: 25rpx;
-  text-align: left;
-  background: #fff;
-  padding: 20rpx 25rpx;
-  margin-bottom: 20rpx;
-}
-.more-arrow {
-  position: absolute;
-  right: 20rpx;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 22rpx;
-  height: 22rpx;
-} */
-
-
-/* 退款信息 */
-.refund-message {
-  background: #fff;
-  padding: 20rpx 25rpx;
+  color: #222222;
 }
 
-.refund-txt {
-  font-size: 30rpx;
-  margin-bottom: 25rpx;
+.DetailsOfRefund .goods-info .item .value{
   font-weight: bold;
-}
-
-/* 店铺 */
-.shop-box {
-  display: block;
-  padding-bottom: 20rpx;
-  margin-bottom: 20rpx;
-  border-bottom: 1rpx solid #f0f0f0;
-}
-
-.shop-img {
-  display: inline-block;
-  width: 36rpx;
-  height: 36rpx;
-  vertical-align: middle;
-  margin-right: 10rpx;
-}
-
-.shop-img>iamge {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.shopname {
-  display: inline-block;
-  font-size: 28rpx;
-  line-height: 1em;
-  vertical-align: middle;
-  color: #444444;
-}
-
-/* 商品信息 */
-.goods-msg-box {
-  background: #f9f9f9;
-  padding: 15rpx 20rpx;
-  margin: 15rpx 0;
-}
-
-.img-box {
-  display: inline-block;
-  width: 150rpx;
-  height: 150rpx;
-  margin-right: 20rpx;
-  background: #eee;
-  vertical-align: top;
-}
-
-.goods-text {
-  display: inline-block;
-  vertical-align: top;
-  width: 70%;
-}
-
-.goods-title {
   font-size: 28rpx;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  /*设定显示行数*/
-  -webkit-box-orient: vertical;
-  word-break: break-all;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  color: #FF4D3A;
 }
-
-.goods-quantity {
-  font-size: 28rpx;
-  color: #888888;
-  margin-top: 20rpx;
+.DetailsOfRefund .goods-info .total{
+  display: flex;
+  justify-content: space-between;
+  padding-top: 28rpx ;
+  border-top: 2rpx solid #F0F0F0;
 }
-
-/* 具体信息 */
-.refund-cont {
+.DetailsOfRefund .goods-info .total .label{
+  font-weight: bold;
   font-size: 28rpx;
-  color: #666666;
-  line-height: 2em;
+  color: #222222;
 }
-
-/* 联系商家 */
-.contact-merchant {
+.DetailsOfRefund .goods-info .total .value{
+  font-weight: bold;
   font-size: 28rpx;
-  color: #FF941A;
-  text-align: center;
-  padding-top: 20rpx;
-  margin-top: 20rpx;
-  border-top: 1rpx solid #f2f2f2;
-}
-
-button.contact-merchant {
-  background: #fff;
-}
-
-button.contact-merchant::after {
-  border: 0;
+  color: #FF4D3A;
 }
 
-/* 整单退款商品列表 */
-.refund-goods-item {
-  padding: 20rpx 0;
-  border-bottom: 2rpx solid #ddd;
+.DetailsOfRefund .order-info{
+  padding: 28rpx 24rpx;
 }
-
-.refund-goods-item:last-child {
-  border-bottom: none;
+.DetailsOfRefund .order-info .title{
+  font-weight: bold;
+  font-size: 32rpx;
+  color: #222222;
 }
-
-/* 脚部撤销 */
-.foot-box {
-  display: block;
-  margin-top: 150rpx;
+.DetailsOfRefund .order-info .item{
+  padding-top: 28rpx;
+  display: flex;
+  justify-content: space-between;
 }
-
-.footer {
-  display: block;
-  box-sizing: border-box;
-  position: fixed;
-  width: 100%;
-  bottom: 0;
+.DetailsOfRefund .order-info .item .label{
   font-size: 28rpx;
-  background: #fff;
-  padding: 0 30rpx;
-  text-align: right;
-  box-shadow: 1rpx 10rpx 10rpx 10rpx rgb(236, 236, 236);
+  color: #AAAAAA;
 }
-
-.undo-apply {
-  display: inline-block;
-  box-sizing: border-box;
-  padding: 15rpx 20rpx;
-  font-size: 25rpx;
-  border-radius: 5rpx;
-  margin: 25rpx 0;
-  margin-left: 15rpx;
-  border-radius: 40rpx;
-  border: 1rpx solid #aaaaaa;
-  color: #555555;
+.DetailsOfRefund .order-info .item .value-box{
+  display: flex;
+  align-items: center;
 }
-
-.undo-apply-end {
-  display: inline-block;
-  box-sizing: border-box;
-  margin-left: 15rpx;
-  color: #777;
-  font-size: 30rpx;
-
+.DetailsOfRefund .order-info .item .value-box .icon{
+  width: 30rpx;
+  height: 30rpx;
+  margin-left: 20rpx;
 }
-
-.apply-current {
-  border: 1rpx solid rgb(0, 173, 0);
-  color: rgb(0, 173, 0);
-
+.DetailsOfRefund .order-info .item .value{
+  font-weight: bold;
+  font-size: 28rpx;
+  color: #222222;
 }

pages/afterSales/afterSales.js

@@ -61,6 +61,37 @@ Page({
     };
     http.request(params);
   },
+
+    /**
+   * 撤销退货退款申请
+   */
+  cancelApplication: function (e) {
+    let refundSn = e.currentTarget.dataset.refundsn
+    wx.showModal({
+      title: '撤销',
+      content: '确定要撤销本次申请？',
+      success: (res) => {
+        if (res.confirm) {
+          wx.showLoading({})
+          var params = {
+            url: "/p/orderRefund/cancel",
+            method: "GET",
+            data: {refundSn} , //退款订单编号
+            callBack: function (res) {
+              wx.hideLoading();
+              wx.navigateTo({
+                url: '/pages/afterSales/afterSales',
+              })
+            }
+          };
+          http.request(params);
+        } else {
+          console.log('取消')
+        }
+      }
+    })
+
+  },
   
 
 

pages/afterSales/afterSales.wxml

@@ -1,6 +1,6 @@
 <!-- 退款/售后 -->
 <!--pages/afterSales/afterSales.wxml-->
-<view class="page">
+<view class="afterSales">
   <view class="goods-list">
 
     <view class="goods-item" wx:for="{{list}}" wx:key="item.refundId">
@@ -50,16 +50,21 @@
         <!-- 处理退款状态:(1.买家申请 2.卖家接受 3.买家发货 4.卖家收货 5.退款成功 6.买家撤回申请 7.商家拒绝 -1.退款关闭) -->
         <view class="refund-type" wx:if="{{item.applyType == 1}}">仅退款</view>
         <view class="refund-type" wx:if="{{item.applyType == 2}}">退货退款</view>
-        <view class="refund-process" wx:if="{{item.returnMoneySts == 1}}">你已提交退款申请，等待商家处理</view>
-        <view class="refund-process" wx:if="{{item.returnMoneySts == 2  && item.applyType == 1}}">商家已同意，等待退款</view>
-        <view class="refund-process" wx:if="{{item.returnMoneySts == 2 && item.applyType == 2}}">商家已同意，请按照给出地址寄回商品</view>
-        <view class="refund-process" wx:if="{{item.returnMoneySts == 3 && item.applyType == 2}}">等待商家确认收货并退款</view>
-        <view class="refund-process" wx:if="{{item.returnMoneySts == 4 && item.applyType == 2}}">商家已确认收货，等待退款到账</view>
-        <view class="refund-process" wx:if='{{item.returnMoneySts == 5}}'>退款成功！</view>
-        <view class="refund-process" wx:if='{{item.returnMoneySts == 6}}'>退款申请已撤销</view>
-        <view class="refund-process" wx:if="{{item.returnMoneySts == 7}}">商家拒绝，可修改退款申请或申请客服介入处理</view>
+        <view class="refund-process" wx:if="{{item.returnMoneySts == 10}}">你已提交退款申请，等待商家处理</view>
+        <view class="refund-process" wx:if="{{item.returnMoneySts == 20}}">处理中</view>
+        <view class="refund-process" wx:if="{{item.returnMoneySts == 60}}">商家已同意，请按照给出地址寄回商品</view>
+        <view class="refund-process" wx:if="{{item.returnMoneySts == 65}}">等待商家确认收货并退款</view>
+        <!-- <view class="refund-process" wx:if="{{item.returnMoneySts == 4 && item.applyType == 2}}">商家已确认收货，等待退款到账</view> -->
+        <view class="refund-process" wx:if='{{item.returnMoneySts == 70}}'>退款成功！</view>
+        <view class="refund-process" wx:if='{{item.returnMoneySts == 40}}'>退款申请已撤销</view>
+        <view class="refund-process" wx:if="{{item.returnMoneySts == 30}}">商家拒绝，可修改退款申请或申请客服介入处理</view>
         <view class="refund-process" wx:if='{{item.returnMoneySts == -1}}'>退款申请已关闭</view>  
       </view>
+
+      <!-- <view class="btn-box" wx:if="{{item.returnMoneySts == 10}}"> -->
+      <view class="btn-box" >
+        <view class="cancel-btn" data-refundSn="{{item.refundSn}}" bindtap="cancelApplication">取消申请</view>
+      </view>
       
     </view>
 

pages/afterSales/afterSales.wxss

@@ -18,10 +18,14 @@ image {
   background: #f7f7f7;
   overflow: auto;
 }
-
+.goods-list{
+  padding: 20rpx 24rpx 200rpx;
+  background: #F9F9F9;
+}
 .goods-item {
   background: #fff;
   margin-bottom: 20rpx;
+  border-radius: 16rpx;
 }
 .goods-item:first-child {
   margin-top: 20rpx;
@@ -67,7 +71,7 @@ image {
 .goods-text {
   display: inline-block;
   vertical-align: top;
-  width: 75%;
+  width: 70%;
 }
 .goods-title {
   font-size: 28rpx;
@@ -92,6 +96,24 @@ image {
   border-bottom: 1rpx solid #f2f2f2;
   line-height: 1em;
 }
+
+.btn-box{
+  display: flex;
+  justify-content: flex-end;
+  margin: 28rpx 28rpx 0 0;
+  padding-bottom: 20rpx;
+}
+.btn-box .cancel-btn{
+  font-size: 24rpx;
+  color: #AAAAAA;
+  width: 128rpx;
+  height: 48rpx;
+  line-height: 48rpx;
+  text-align: center;
+  background: #FFFFFF;
+  border-radius: 32rpx 32rpx 32rpx 32rpx;
+  border: 1rpx solid #AAAAAA;
+}
 .rmb-icon {
   display: inline-block;
   width: 35rpx;

pages/applyRefund/applyRefund.js

@@ -1,26 +1,21 @@
 // pages/applyRefund/applyRefund.js
+var http = require('../../utils/http.js');
+
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
+
+    applyType: 1, //退款方式(1:仅退款 2退款退货)
+    refundItem: {}, //订单项数据
     show:false,
     isAll:false,
-    goodList:[
-      {
-        name:'赶海季生鲜大闸蟹',
-        checked:false
-      },
-      {
-        name:'水果纯甜柿子',
-        checked:false
-      },
-      {
-        name:'空运鲜牛肉',
-        checked:true
-      }
-    ],
+    photoFiles: [], //凭证图片列表
+    buyerDesc: '', //备注说明
+
+    goodList:[],
     reasonList:[
       {name:'暂不需要商品(买错/多买/漏买)'},
       {name:'冰品融化'},
@@ -36,14 +31,104 @@ Page({
       {name:'订单少选且商家未通知我'},
       {name:'未在约定时间送达'},
     ],
+    buyerReason: '', //退款原因
+    total:0
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad(options) {
-
+    var refundItem = wx.getStorageSync("refundItem");
+    console.log('拿到缓存里的订单项数据refundItem:',refundItem)
+    refundItem.orderItemDtos.forEach(item=>{
+      item.num = 1
+      item.checked = true
+    })
+    this.setData({
+      refundItem: refundItem,
+      orderNumber: refundItem.orderNumber,
+      goodsNum: refundItem.prodCount,
+      actualTotal: refundItem.actualTotal,  //总额
+      isLastProd: refundItem.isLastProd,  //是否最后一样商品
+      addTransfee: refundItem.addTransfee, //只有一件商品可以退运费
+      orderScore: refundItem.useScore // 单个退积分
+    })
+    this.totalPrice()
+    this.checkAll()
   },
+  // 实时监听输入
+  onInput: function(e) {
+    // e.detail.value 即为当前输入的内容
+    this.setData({
+      buyerDesc: e.detail.value
+    });
+  },
+   /**
+   * 提交退款
+   */
+  apply(){
+     // 检查数据完整性
+     if (this.data.buyerReason === '') {
+        return wx.showToast({
+          icon: 'none',
+          title: '请选择退款原因',
+        })
+      }else if(!this.data.refundItem.orderItemDtos.every(i=>i.checked)){
+        return wx.showToast({
+          icon: 'none',
+          title: '请选择退款商品',
+        })
+      }
+    wx.showLoading();
+    var pics = '';
+    this.data.photoFiles.forEach(function (item) {
+      pics += item.path + ',';
+    });
+    if (pics != '') {
+      pics = pics.substring(0, pics.length - 1)
+    }
+    let goodsNum = 0
+    let orderRefundSkuList = []
+    this.data.refundItem.orderItemDtos.forEach(item=>{
+      if(item.checked){
+        orderRefundSkuList.push({
+          "productCount": item.num,
+          "skuId": item.skuId,
+          "skuPrice": item.price,
+          "orderItemId": item.orderItemId,
+        })
+        goodsNum+=num
+      }
+    })
+   
+    var params = {
+      url: "/p/orderRefund/apply",
+      method: "POST",
+      data: {
+        orderNumber: this.data.orderNumber, //订单编号
+        applyType: this.data.applyType, //退款方式(1:仅退款 2退款退货)
+        isReceiver: this.data.applyType == 1?0:1, //货物状态(1:已收到货 0:未收到货)
+        buyerReason: this.data.reasonList[this.data.buyerReason].name, //退款原因
+        goodsNum: this.data.goodsNum, //退款数量（0或不传值则为全部数量）
+        refundAmount: this.data.refundItem.actualTotal, //退款金额
+        buyerMobile: this.data.refundItem.userAddrDto.mobile, //手机号码（默认当前订单手机号码）
+        buyerDesc: this.data.buyerDesc, //备注说明
+        photoFiles: pics, //凭证图片列表
+        refundType: 1, //退款单类型（1:整单退款,2:单个物品退款）
+        orderRefundSkuList: orderRefundSkuList
+      },
+      callBack: (res) => {
+        wx.hideLoading();
+        // 去到我的退款订单页面
+        wx.redirectTo({
+          url: '/pages/afterSales/afterSales',
+        })
+      }
+    };
+    http.request(params);
+  },
+
   /**
    * 打开选择原因弹窗
    */
@@ -61,14 +146,41 @@ Page({
  /**
    * 选择原因
    */
-  chooseReason(){
-   
+  chooseReason(e){
+   console.log(e);
+    this.setData({
+      buyerReason:Number(e.detail.value)
+    })
+  },
+  /**
+   * 确认原因
+   */
+  submitReason(){
+   this.setData({
+     show:false
+   })
+  },
+  
+  /** */
+  delImg(e){
+    let index = e.currentTarget.dataset.index
+    let photoFiles = this.data.photoFiles
+    photoFiles.splice(index,1)
+    this.setData({
+      photoFiles: photoFiles
+    })
   },
 
    /**
    * 上传图片
    */
   getUploadImg: function(e) {
+    console.log(this.data.photoFiles);
+    if(this.data.photoFiles.length == 5){
+      return wx.showToast({
+        title: '最多可上传5张图片',
+      })
+    }
     var ths = this;
     wx.chooseMedia({
       count: 1, // 默认9
@@ -107,6 +219,9 @@ Page({
    */
   radioChange(e){
     console.log(e);
+    this.setData({
+      applyType:e.detail.value
+    })
   },
 
   /**
@@ -116,14 +231,84 @@ Page({
     console.log(e,this.data);
 
     let isAll = !this.data.isAll
-    let goodList = this.data.goodList
-    goodList.forEach(item=>{
+    let refundItem =  this.data.refundItem
+    refundItem.orderItemDtos.forEach(item=>{
       item.checked = isAll
     })
     this.setData({
       isAll,
-      goodList
+      refundItem
+    })
+    this.totalPrice()
+
+  },
+/**
+ * 单选
+ */
+  onSelectedItem(e){
+    let index = e.currentTarget.dataset.index
+    let refundItem =  this.data.refundItem
+    refundItem.orderItemDtos[index].checked = !refundItem.orderItemDtos[index].checked
+    this.setData({
+      refundItem
+    })
+    this.checkAll()
+    this.totalPrice()
+  },
+
+  /**
+   * 检查全选状态
+   */
+
+   checkAll(){
+    let isAll = this.data.refundItem.orderItemDtos.every(i=>i.checked)
+    this.setData({
+      isAll
+    })
+   },
+
+  /**
+   * 计算总价
+   */
+
+   totalPrice(){
+     let total = 0
+      this.data.refundItem.orderItemDtos.forEach(item=>{
+        if(item.checked){
+          total+=item.price*item.num
+        }
+      })
+      
+      this.setData({
+        total
+      })
+   },
+
+  /**
+   * 操作数量
+   */
+  changeNum(e){
+    let index = e.currentTarget.dataset.index
+    let num = e.currentTarget.dataset.num
+    let refundItem =  this.data.refundItem
+    if(num == -1&&refundItem.orderItemDtos[index].num == 1){
+     return wx.showToast({
+        title: '数量不能小于1',
+        duration: 1200,
+        icon: 'none',
+      })
+    }else if(num == 1&&refundItem.orderItemDtos[index].num == refundItem.orderItemDtos[index].prodCount){
+      return wx.showToast({
+        title: '不能超过购买数量',
+        duration: 1200,
+        icon: 'none',
+      })
+    }
+    refundItem.orderItemDtos[index].num +=num
+    this.setData({
+      refundItem
     })
+    this.totalPrice()
   },
 
   /**

pages/applyRefund/applyRefund.wxml

@@ -10,14 +10,14 @@
     <view class="title">售后类型</view>
     <radio-group bindchange="radioChange">
       <view class="item">
-          <radio class="radio" value="1" color="#FF941A" />
+          <radio class="radio" checked="{{applyType == 1}}" value="1" color="#FF941A" />
           <view class="info">
             <view class="title">我要退款</view>
             <view class="desc">没收到货，货已收到货与商家协商后无需退货只退款</view>
           </view>
       </view>
       <view class="item">
-          <radio class="radio" value="2" color="#FF941A"/>
+          <radio class="radio" value="2" checked="{{applyType == 2}}" color="#FF941A"/>
           <view class="info">
             <view class="title">我要退货退款</view>
             <view class="desc">已收到货，需要退还已收到的商品</view>
@@ -30,44 +30,50 @@
   <view class="refund-goods box">
       <view class="title-box">
         <view class="title">退款商品</view>
-        <view class="price">退款金额：￥21</view>
+        <view class="price">退款金额：￥{{total}}</view>
       </view>
       <view class="good-list">
         <view class="all">
           <checkbox bindtap='onSelectedAll'  checked="{{isAll}}" color="#105c3e" />全选
         </view>
-        <view class="good-item" wx:for="{{goodList}}">
+        <view class="good-item" wx:for="{{refundItem.orderItemDtos}}">
         	<checkbox bindtap='onSelectedItem' data-index="{{index}}" value="{{index}}" checked="{{item.checked}}" color="#105c3e" />
-          <view class="img"></view>
+          <image src="{{item.pic}}" mode="" class="img"/>
           <view class="info">
-            <view class="good-name">赶海季生鲜大闸蟹</view>
-            <view class="desc">规格：5kg，盒</view>
-            <view class="price">单价：￥1.8</view>
+            <view class="good-name">{{item.prodName}}</view>
+            <view class="desc">{{item.skuName}}</view>
+            <view class="price">单价：￥{{item.price}}</view>
           </view>
           <view class="price-box">
-            <view class="price">￥103.95</view>
+            <view class="price">￥{{item.price*item.num}}</view>
             <view class="num-box">
-              <view class="btn">-</view>
-              <view class="num">1</view>
-              <view class="btn">+</view>
+              <view class="btn" bind:tap="changeNum" data-index="{{index}}" data-num="{{-1}}">-</view>
+              <view class="num">{{item.num}}</view>
+              <view class="btn" bind:tap="changeNum" data-index="{{index}}" data-num="{{1}}">+</view>
             </view>
           </view>
         </view>
       </view>
-        <view class="open-btn">
+        <!-- <view class="open-btn">
           展开（共7件） <image class="arrow" src="../../images/icon/black-down-arrow.png" mode=""/>
-        </view>
+        </view> -->
     </view>
 
     <view class="reason-box box">
       <view class="title-box">
         <view class="title">退款原因</view>
-        <view class="choose" bindtap="choose" >请选择退款原因 <image class="icon" src="../../images/icon/more.png" mode=""/> </view>
+        <view class="choose" bindtap="choose" >{{reasonList[buyerReason].name||'请选择退款原因'}} <image class="icon" src="../../images/icon/more.png" mode=""/> </view>
       </view>
       <view class="content">
-        <textarea class="reason" placeholder="补充描述和凭证，有助于提高退款效率" value=""/> 
-        <view class="upload"  bindtap="getUploadImg">
-          <image src="../../images/icon/photo.png" mode="" class="photo"/>
+        <textarea class="reason" maxlength="200" placeholder="补充描述和凭证，有助于提高退款效率" bindinput="onInput"  value="{{buyerDesc}}"/> 
+        <view class="img-box">
+          <view class="img-item"  wx:for="{{photoFiles}}">
+            <image src="../../images/icon/del.png" bind:tap="delImg" data-index="{{index}}" mode="" class="del"/>
+            <image src="{{item.url}}" mode="aspectFit" class="img"/>
+          </view>
+          <view class="upload"  bindtap="getUploadImg">
+            <image src="../../images/icon/photo.png" mode="" class="photo"/>
+          </view>
         </view>
       </view>
     </view>
@@ -88,19 +94,19 @@
           </view>
           <radio-group bindchange="chooseReason">
             <view class="item" wx:for="{{reasonList}}" wx:key="{{index}}">
-              <radio class="radio" value="1" color="#FF941A" />
+              <radio class="radio" checked="{{buyerReason === index}}" value="{{index}}" color="#FF941A" />
               <view class="text">{{item.name}}</view>
             </view>
           </radio-group>
         </view>
         <view class="submit-box">
-          <view class="btn">确认</view>
+          <view class="btn" bind:tap="submitReason">确认</view>
         </view>
       </view>
     </van-action-sheet>
 
     <view class="submit-box">
-      <view class="btn">提交</view>
+      <view class="btn" bind:tap="apply">提交</view>
     </view>
 
 </view>

pages/applyRefund/applyRefund.wxss

@@ -185,15 +185,41 @@
 }
 .applyRefund .reason-box .content{
   position: relative;
+  background: #F6F6F6;
+
 }
 .applyRefund .reason-box textarea{
   width: 100%;
   height: 300rpx;
-  background: #F6F6F6;
   border-radius: 16rpx 16rpx 16rpx 16rpx;
   box-sizing: border-box;
   padding: 24rpx;
 }
+.applyRefund .reason-box .content .img-box{
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 24rpx;
+
+}
+.applyRefund .reason-box .content .img-box .img-item{
+  position: relative;
+}
+.applyRefund .reason-box .content .img-box .img-item .del{
+  position: absolute;
+  top: -15rpx;
+  right: 15rpx;
+  width: 30rpx;
+  height: 30rpx;
+}
+.applyRefund .reason-box .content .img-box .img{
+  width: 120rpx;
+  height: 120rpx;
+  background: #FFFFFF;
+  margin-right: 34rpx;
+  border-radius: 32rpx 32rpx 32rpx 32rpx;
+  margin-bottom: 24rpx;
+
+}
 .applyRefund .reason-box .content .upload{
   width: 120rpx;
   height: 120rpx;
@@ -202,10 +228,9 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  position: absolute;
-  left: 24rpx;
-  bottom: 24rpx;
-  z-index: 9;
+  margin-bottom: 24rpx;
+
+  
 }
 .applyRefund .reason-box .content .photo{
   width: 40rpx;

pages/order-detail/order-detail.js

@@ -171,6 +171,7 @@ Page({
       item.status = this.data.status; //订单状态
       item.orderItemDtos = this.data.orderItemDtos;
       item.orderScore = this.data.orderScore,  // 整单积分
+      item.userAddrDto = this.data.userAddrDto,  // 用户信息
       //拿到存储在本地的订单项数据
       wx.setStorageSync("refundItem", item);
       // console.log('订单详情页获取到的整单退item：',item)
@@ -198,15 +199,15 @@ Page({
      */
     var type = e.currentTarget.dataset.type;
     
-    if (status == 2) {   //待发货，直接跳转到申请页，不需要选择退货方式
+    // if (status == 2) {   //待发货，直接跳转到申请页，不需要选择退货方式
       wx.redirectTo({ //通过wx.redirectTo实现跳转（关闭当前页面，跳转到应用内某个页面）
         url: '/pages/applyRefund/applyRefund?type=' + type + '&refundType=' + refundType,
       })
-    } else  {  //已发货，跳转到选择退货方式页
-      wx.redirectTo({
-        url: '/pages/chooseRefundWay/chooseRefundWay?refundType=' + refundType
-      })
-    }
+    // } else  {  //已发货，跳转到选择退货方式页
+    //   wx.redirectTo({
+    //     url: '/pages/chooseRefundWay/chooseRefundWay?refundType=' + refundType
+    //   })
+    // }
   },
 
 

pages/order-detail/order-detail.wxml

@@ -186,7 +186,8 @@
     <view class='order-detail-footer'>
       <!-- <text class='dele-order' wx:if="{{status==5||status==6}}" bindtap='delOrderList' data-ordernum="{{orderNumber}}">删除订单</text> -->
       <view class='footer-box'>
-        <text class="apply-refund-btn refund-full" data-refundtype="1" catchtap="applyRefund" wx:if="{{canAllRefund && orderType!=3}}" data-type="{{status == 2?'1':'2'}}">整单退款</text>
+        <!-- <text class="apply-refund-btn refund-full" data-refundtype="1" catchtap="applyRefund" wx:if="{{canAllRefund && orderType!=3}}" data-type="{{status == 2?'1':'2'}}">整单退款</text> -->
+        <text class="apply-refund-btn refund-full" data-refundtype="1" catchtap="applyRefund" data-type="{{status == 2?'1':'2'}}">整单退款</text>
         <button class='apply-service foot-btn' open-type="contact">联系客服</button>
         <!-- <text class='buy-again'>再次购买</text> -->
 

project.private.config.json

@@ -23,12 +23,19 @@
     "miniprogram": {
       "list": [
         {
-          "name": "售后详情页",
-          "pathName": "pages/DetailsOfRefund/DetailsOfRefund",
+          "name": "pages/chooseRefundWay/chooseRefundWay",
+          "pathName": "pages/chooseRefundWay/chooseRefundWay",
           "query": "",
           "scene": null,
           "launchMode": "default"
         },
+        {
+          "name": "售后详情页",
+          "pathName": "pages/DetailsOfRefund/DetailsOfRefund",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
         {
           "name": "申请售后",
           "pathName": "pages/applyRefund/applyRefund",