kxmall-ui/kxmall-app-ui/pages/order/refund.vue

<!-- 售后提交 -->
<template>
  <view class="apply-return">
    <!-- 申请售后 -->
    <view class="container" v-if="selected">
      <view class="goodsStyle acea-row row-between"
            v-for="cart in selectProduct"
            :key="cart.id"
      >
        <view class="pictrue">
          <image :src="JSON.parse(cart.img)[0].url" class="image"/>
        </view>
        <view class="text acea-row row-between">
          <view class="name line2">{{ cart.productTitle }}</view>
          <view class="money">
            <view>
              ￥{{ cart.price }}
            </view>
            <view class="num">x{{ cart.num }}</view>
          </view>
        </view>
      </view>
      <view class="list">
        <view v-if="serviceType === 1" class="item acea-row row-between-wrapper">
          <view>退货件数</view>
          <view class="num">{{ totalNum || 0 }}</view>
        </view>
        <view class="item acea-row row-between-wrapper">
          <view>退款金额</view>
          <view class="num currency-input-row">
            <text class="currency-symbol">￥</text>
            <input class="currency-input" type="number" v-model.number="totalMoney"
                   placeholder="请输入退款金额" />
          </view>
        </view>
        <picker :value="reason" :range="reasonList" @change="changeReason">
          <view class="item acea-row row-between-wrapper">
            <view>退款原因</view>
            <view class="num">{{ reason }}</view>
            <text class="iconfont icon-jiantou"></text>
          </view>
        </picker>
        <view class="item textarea acea-row row-between">
          <view>备注说明</view>
          <textarea class="num"
                    placeholder="填写备注信息，100字以内"
                    v-model="refund_reason_wap_explain"
          ></textarea>
        </view>
      </view>
      <view v-if="serviceType === 0"
            class="returnBnt bg-color-red"
            @click="submit"
      >申请退款
      </view>
      <view v-if="serviceType === 1"
            class="returnBnt bg-color-red"
            @click="submit"
      >申请退货
      </view>
    </view>
    <!-- 选择商品 -->
    <view class="selectProduct" v-else>
      <view class="selectContainer"
            v-for="(cart, index) in selectProduct"
            :key="cart.id"
      >
        <view class="checkbox-wrapper">
          <checkbox-group @change="switchSelect(index)">
            <label class="well-check">
              <checkbox color="#eb3729" value :checked="cart.checked"></checkbox>
            </label>
          </checkbox-group>
        </view>
        <view class="pictrue">
          <image :src="JSON.parse(cart.img)[0].url" class="image"/>
        </view>
        <view class="content">
          <view class="title">{{ cart.productTitle || '' }}</view>
          <view class="skus">
            <view class="sku">
              {{ cart.productAttrTitle || '' }}
            </view>
            <view class="num">x{{ cart.num || 0 }}</view>
          </view>
          <view class="money">
            ￥
            <view>
              {{ cart.price }}
            </view>
          </view>
        </view>
      </view>
      <view class="choose">
        <view class="checkTotal">
          <checkbox-group @change="allChecked">
            <label class="well-check">
              <checkbox
                  color="#eb3729"
                  value="allSelect"
                  :checked="isAllSelect"
              ></checkbox>
              <text class="checkAll">全选 ({{ cartCount || 0 }})</text>
            </label>
          </checkbox-group>
          <view class="total">
            <view class="proTotal">
              {{ totalNum || 0 }}件商品
            </view>
            <view class="moneyTotal">
              合计 ￥ {{ orderInfo.totalPrice || 0 }}
            </view>
          </view>
        </view>
        <view class="typeBtn">
          <view class="button def" @click="chooseType(0)">确认</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  name: "goodsReturn",
  data() {
    return {
      id: 0,
      selected: false,
      orderInfo: {},
      rebackList: [],
      reasonList: ['收货地址填错了', '与描述不符', '信息填错了，重新拍', '收到商品损坏了', '未按预定时间发货', '其它原因'],
      reason: "",
      refund_reason_wap_explain: '',
      refund_reason_wap_img: [],
      serviceType: null,
      // 选中售后商品
      selectProduct: [],
      productParamList: [],
      totalNum: 0,
      totalMoney: 0,
      isAllSelect: false,
      cartCount: 0,
    };
  },
  onLoad(option) {
    const that = this
    uni.showLoading({
      title: '正在加载'
    })
    
    that.$api.request('get', 'order/app/getOrderDetail', {
      orderId: option.id
    }, failres => {
      uni.hideLoading()
      that.$api.msg(failres.msg)
    }).then(res => {
      uni.hideLoading()
      that.orderInfo = res.data
      that.selectProduct = res.data.productList
      that.totalNum = 0
      that.orderInfo.productList.forEach(item => {
        that.totalNum = item.num + that.totalNum
        item.imgs = []
      })
    })
    
  },
  methods: {
    changeReason(e) {
      this.reason = this.reasonList[e.mp.detail.value];
    },
    imageuploaded(res) {
      if (res.status !== 200) {
        uni.showToast({
          title: err.msg || err.response.data.msg || err.response.data.message,
          icon: 'none',
          duration: 2000
        });
        return
      }
      this.refund_reason_wap_img.push(res.data.url);
    },
    getAfterSalesMoney() {
      this.$api.request('post', 'order/app/storeAfterSales/getRefundAmount', {
        orderCode: this.orderInfo.orderId,
        productParamList: this.productParamList
      }).then(res => {
            this.totalMoney = res.data
          }
      )
    },
    getOrderDetail() {
      uni.showLoading({
        title: '正在查询商品',
        duration: 2000,
      })
      orderDetail(this.id)
          .then(res => {
            this.orderInfo = res.data;
            
            this.selectProduct = res.data.cartInfo.map(item => {
              item.checked = false
              return item
            })
            if (res.data.cartInfo.length === 0) {
              uni.showToast({
                title: "订单无可售后商品",
                icon: 'none',
                duration: 2000
              });
              return
            }
            uni.hideLoading()
          })
          .catch(err => {
            uni.hideLoading()
            // uni.showToast({
            // 	title: err.msg || err.response.data.msg|| err.response.data.message,
            // 	icon: 'none',
            // 	duration: 2000
            // });
          });
    },
    getRefundReason() {
      getRefundReason().then(res => {
        this.reasonList = res.data;
      });
    },
    // 选择退款商品
    switchSelect(index) {
      let isAll = true
      this.selectProduct[index].checked = !this.selectProduct[index].checked
      this.selectProduct.forEach(item => {
        if (!item.checked) {
          isAll = false
        }
      })
      this.isAllSelect = isAll
      
      this.cartCount = this.selectProduct.filter(item => item.checked).length
    },
    // 全选
    allChecked() {
      this.isAllSelect = !this.isAllSelect
      this.selectProduct.forEach(item => {
        item.checked = this.isAllSelect
      })
      
      this.cartCount = this.selectProduct.filter(item => item.checked).length
    },
    // 选择退款类型
    chooseType(val) {
      if (!this.cartCount) {
        uni.showToast({
          title: "请至少选择一个商品",
          icon: 'none',
          duration: 2000
        });
      } else {
        this.selectProduct = this.selectProduct.map(item => {
          if (item.checked) {
            this.productParamList.push({
              productId: item.productId
            })
            return item
          }
        }).filter(r => r)
        this.selected = true;
        this.serviceType = val;
        
        this.getAfterSalesMoney();
      }
    },
    submit() {
      const refund_reason_wap_explain = this.refund_reason_wap_explain;
      if (!this.reason) {
        uni.showToast({
          title: "请选择退款原因",
          icon: 'none',
          duration: 2000
        });
        return
      }
      this.$api.request('post', 'order/app/storeAfterSales/applyForAfterSales', {
        orderCode: this.orderInfo.orderId,
        serviceType: this.serviceType,
        reasonForApplication: this.reason,
        applicationInstructions: refund_reason_wap_explain,
        applicationDescriptionPicture: this.refund_reason_wap_img.join(","),
        productParamList: this.productParamList
      }).then(res => {
        if (res.code === 200) {
          uni.showToast({
            title: res.msg,
            icon: "success",
            duration: 2000
          });
          setTimeout(() => {
            uni.navigateTo({
              url: "/pages/refund/index"
            })
          }, 1500)
        }
      })
          .catch(err => {
            uni.showToast({
              title: err.msg || err.response.data.msg || err.response.data.message,
              icon: 'none',
              duration: 2000
            });
          });
    }
  }
};
</script>

<style lang="scss" scoped>
.apply-return {
  .selectProduct {
    margin-bottom: 180rpx;
    
    .selectContainer {
      padding: 20rpx 32rpx;
      background-color: #FFF;
      display: flex;
      align-items: center;
      
      .pictrue {
        .image {
          width: 180rpx;
          height: 180rpx;
        }
      }
      
      .content {
        width: 100%;
        height: 100%;
        margin-left: 16rpx;
        font-size: 24rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .title {
          width: 100%;
          height: 80rpx;
          text-overflow: ellipsis;
          font-size: 28rpx;
        }
        
        .skus {
          display: flex;
          justify-content: space-between;
          color: #999999;
        }
        
        .money {
          margin-top: 10rpx;
          display: flex;
          
          view {
            color: #EB3729;
          }
        }
      }
    }
    
    .choose {
      width: 100%;
      padding: 20rpx 30rpx;
      background-color: #FFF;
      position: fixed;
      bottom: 0;
      height: 180rpx;
      
      .checkTotal {
        height: 80rpx;
        font-size: 28rpx;
        border-bottom: 2rpx solid #F3F4F5;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .total {
          display: flex;
          
          .proTotal {
            color: #666;
          }
          
          .moneyTotal {
            color: #333;
            margin-left: 30rpx;
          }
        }
      }
      
      .typeBtn {
        margin-top: 10rpx;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        
        .button {
          width: 160rpx;
          height: 60rpx;
          margin: 0 10rpx;
          line-height: 60rpx;
          text-align: center;
          font-size: 24rpx;
          border-radius: 180rpx;
        }
        
        .def {
          color: #AAAAAA;
          border: 2rpx solid #DDDDDD;
        }
        
        .greenBtn {
          color: #FFF;
          background-color: #EB3729;
        }
      }
    }
  }
}

/**/
.goodsStyle {
  background-color: #fff;
  padding: 0.22 * 100rpx 0.3 * 100rpx;
}

.goodsStyle .pictrue {
  width: 1.2 * 100rpx;
  height: 1.2 * 100rpx;
}

.goodsStyle .pictrue .image {
  width: 100%;
  height: 100%;
  border-radius: 0.06 * 100rpx;
}

.goodsStyle .text {
  width: 5.45 * 100rpx;
  font-size: 0.28 * 100rpx;
  color: #999;
}

.goodsStyle .text .name {
  width: 3.6 * 100rpx;
  color: #282828;
}

.goodsStyle .text .money {
  text-align: right;
}

.goodsStyle .text .money .num {
  margin-top: 0.07 * 100rpx;
}

/* layout */
.acea-row {
  display: flex;
  flex-wrap: wrap;
  /* 辅助类 */
}

.acea-row.row-between {
  justify-content: space-between;
}

/*申请退货*/
.apply-return .list {
  background-color: #fff;
  margin-top: 0.18 * 100rpx;
}

.apply-return .list .item {
  margin-left: 0.3 * 100rpx;
  padding-right: 0.3 * 100rpx;
  min-height: 0.9 * 100rpx;
  border-bottom: 1px solid #eee;
  font-size: 0.3 * 100rpx;
  color: #333;
}

.apply-return .list .item .num {
  color: #282828;
  flex: 1;
  text-align: right;
  position: relative;
}

.apply-return .list .item .num .picker {
  text-align: right;
}

.apply-return .list .item .num .iconfont {
  color: #666;
  font-size: 0.3 * 100rpx;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.apply-return .list .item.textarea {
  padding: 0.3 * 100rpx 0.3 * 100rpx 0.3 * 100rpx 0;
}

.apply-return .list .item textarea {
  height: 1 * 100rpx;
  font-size: 0.3 * 100rpx;
}

.apply-return .list .item textarea::placeholder {
  color: #bbb;
}

.apply-return .list .item .title {
  height: 0.95 * 100rpx;
  width: 100%;
}

.apply-return .list .item .title .tip {
  font-size: 0.3 * 100rpx;
  color: #bbb;
}

.apply-return .list .item .upload {
  padding-bottom: 0.36 * 100rpx;
}

.apply-return .list .item .upload .pictrue {
  margin: 0.22 * 100rpx 0.23 * 100rpx 0 0;
  width: 1.56 * 100rpx;
  height: 1.56 * 100rpx;
  position: relative;
  font-size: 0.24 * 100rpx;
  color: #bbb;
  border: 1px solid #bbb;
}

.apply-return .list .item .upload .pictrue:nth-of-type(4n) {
  margin-right: 0;
}

.apply-return .list .item .upload .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 0.03 * 100rpx;
}

.apply-return .list .item .upload .pictrue .icon-guanbi1 {
  position: absolute;
  font-size: 0.45 * 100rpx;
  top: -0.1 * 100rpx;
  right: -0.1 * 100rpx;
  width: 0.45 * 100rpx;
  height: 0.45 * 100rpx;
  line-height: 0.45 * 100rpx;
}

.apply-return .list .item .upload .pictrue .icon-icon25201 {
  color: #bfbfbf;
  font-size: 0.5 * 100rpx;
  width: 0.5 * 100rpx;
  height: 0.6 * 100rpx;
  line-height: 0.6 * 100rpx;
}

.apply-return .list .item .upload .pictrue:nth-last-child(1) {
  border: 1px solid #ddd;
}

.apply-return .returnBnt {
  font-size: 0.32 * 100rpx;
  color: #fff;
  width: 6.9 * 100rpx;
  height: 0.86 * 100rpx;
  border-radius: 0.5 * 100rpx;
  text-align: center;
  line-height: 0.86 * 100rpx;
  margin: 0.43 * 100rpx auto;
}

.acea-row.row-between-wrapper {
  align-items: center;
  justify-content: space-between;
}

.bg-color-red {
  background-color: #eb3729 !important;
}

.currency-input-row {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 400px;
  justify-content: flex-end; /* 内容靠右 */
}

.currency-symbol {
  border-radius: 6px;
  margin-right: 10px;
}

.currency-input {
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  width: 150px;
  text-align: center; /* 输入值居中 */
  transition: border-color 0.3s;
}

</style>