wx-qhb/pageC/applicationRefund/applicationRefund.vue

<template>
  <view class="page">
    <view class="commodity-information">
      <view class="commodity-1">
        <image
          class="commodity-img"
          :src="goodsDetail.goods.sku_item.image"
          mode=""
        ></image>
        <view class="commodity-right">
          <view class="commodity-2">
            <view class="commodity-title"
              >{{ goodsDetail.goods.goods_name }}
            </view>
          </view>

          <view class="commodity-3">
            <view class="specifications">
              {{ goodsDetail.goods.sku_item.item }}
            </view>
            <view style="font-size: 24rpx">
              x{{ goodsDetail.goods.goods_num }}
            </view>
          </view>
          <view class="commodity-price" v-if="goodsDetail.goods">
            <text style="font-size: 20rpx">￥</text>
            <text>{{ refund_price.split(".")[0] }}</text
            >.
            <text style="font-size: 20rpx">{{
              refund_price.split(".")[1]
            }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="reason">
      <view class="application-reason">
        <view class=""> 申请原因 </view>
        <view class="right" @click="openReason">
          <text>{{ refundText }}</text>
          <image
            class="right-icon"
            src="../../static/mine/325.png"
            mode=""
          ></image>
        </view>
      </view>

      <view class="application-reason">
        <view class=""> 退款金额 </view>
        <view
          class="commodity-price"
          style="font-weight: 600"
          v-if="goodsDetail.goods"
        >
          <text style="font-size: 20rpx">￥</text>
          <text>{{ refund_price.split(".")[0] }}</text
          >.
          <text style="font-size: 20rpx">{{ refund_price.split(".")[1] }}</text>
        </view>
      </view>
    </view>

    <view class="application-explain">
      <view class="application-title"> 申请说明 </view>
      <view class="textarea">
        <u--textarea
          v-model="value1"
          border="none"
          placeholder="请您详细填写申请说明"
        ></u--textarea>

        <u-upload
          :fileList="fileList6"
          @afterRead="afterRead"
          @delete="deletePic"
          name="6"
          multiple
          :maxCount="10"
        >
          <view class="unload">
            <view class="text-content"> 上传凭证<br />(最多9张) </view>
          </view>
        </u-upload>
      </view>
      <!-- <view class="img-list">
        <image
          v-for="(item, index) in imgList"
          :src="item"
          :key="index"
          mode="scaleToFill"
          class="upload-img"
        />
      </view> -->
    </view>
    <reasonPopupVue :show="show" @close="close"></reasonPopupVue>

    <view class="footer">
      <button class="btn" @click="submitApplication">提交申请</button>
    </view>
  </view>
</template>

<script>
import reasonPopupVue from "./component/reasonPopup.vue";
export default {
  components: {
    reasonPopupVue,
  },
  data() {
    return {
      show: false,
      value1: "",
      refundText: "请选择退款原因",
      orderId: "",
      goodsDetail: {},
      imgList: [],
      fileList6: [],
      btnShow: true, //上传图片时，该字段改为false，用来判断图片是否上传完毕
      refund_price: "", //计算后的退款金额
    };
  },
  onLoad(options) {
    this.orderId = options.orderId;
  },
  methods: {
    //打开退货理由弹窗
    openReason() {
      this.show = true;
    },

    //关闭弹窗
    close(value) {
      this.refundText = value;
      this.show = false;
    },

    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
      this.imgList.splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      console.log(event);
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          // status: "uploading",
          // message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url) {
      this.btnShow = false;
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: `${uni.$u.http.config.baseURL}/api/upload/images`, // 接口地址
          filePath: url,
          name: "file",
          formData: {
            user: "test",
          },
          success: (res) => {
            this.imgList.push(JSON.parse(res.data).data.filePath);
            setTimeout(() => {
              resolve(res.data.data);
            }, 1000);
            this.btnShow = true;
          },
        });
      });
    },

    //获取退款金额
    getRefundMoney(orderId) {
      uni.$u.http
        .post(`/api/order/calculate_refund_weight`, {
          order_id: orderId,
          order_goods_id: this.orderId,
        })
        .then((res) => {
          this.refund_price = res.refund_price;
        });
    },

    //获取订单商品信息
    getDetail() {
      uni.$u.http
        .post(`/api/order/order_goods_details`, {
          order_goods_id: this.orderId,
        })
        .then((res) => {
          this.goodsDetail = res;
          this.getRefundMoney(res.id);
        });
    },

    //提交申请
    submitApplication() {
      if (!this.btnShow) {
        uni.showToast({
          title: "请等待图片上传完毕",
          icon: "none",
        });
        return;
      }
      uni.$u.http
        .post(`/api/order/refund`, {
          order_id: this.goodsDetail.id,
          order_goods_id: this.orderId,
          refund_reason: this.refundText,
          refund_illustrate: this.value1,
          images: this.imgList.join(","),
        })
        .then((res) => {
          uni.showToast({
            title: "已申请，请等待审核",
            icon: "none",
          });
          uni.navigateBack({ delta: 1 });
        });
    },
  },
  mounted() {
    this.getDetail();
    uni.setNavigationBarTitle({
      title: "申请退款",
    });
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx 24rpx;
  position: relative;
  padding-bottom: 166rpx;
  .commodity-information {
    padding: 28rpx 20rpx;
    background-color: #fff;
    border-radius: 16rpx;

    .commodity-1 {
      display: flex;

      .commodity-img {
        width: 156rpx;
        height: 156rpx;
        margin-right: 20rpx;
        border-radius: 10rpx;
      }

      .commodity-right {
        width: 73%;
      }

      .commodity-2 {
        display: flex;
        justify-content: space-between;
        width: 100%;

        .commodity-title {
          width: 328rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-right: 38rpx;
        }
      }

      .commodity-3 {
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        color: #777;

        .specifications {
          font-size: 28rpx;
          color: #777;
        }
      }

      .commodity-price {
        margin-top: 24rpx;
        font-weight: 600;
      }
    }
  }

  .reason {
    background-color: #fff;
    padding: 0 20rpx;
    border-radius: 16rpx;
    margin-top: 20rpx;

    .application-reason {
      display: flex;
      justify-content: space-between;
      height: 104rpx;
      align-items: center;
      font-size: 28rpx;

      .right {
        display: flex;
        align-items: center;
        color: rgba(34, 34, 34, 0.6);
        font-size: 28rpx;
      }

      .right-icon {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
  .application-explain {
    margin-top: 20rpx;
    padding: 28rpx 20rpx;
    background-color: #fff;
    border-radius: 16rpx;
    .application-title {
      font-size: 28rpx;
      color: #222;
      margin-bottom: 18rpx;
    }
    .textarea {
      background-color: #f4f4f4;
      padding: 24rpx;
      border-radius: 16rpx;
    }
    .img-list {
      display: flex;
      margin-top: 20rpx;
      flex-wrap: wrap;
      .upload-img {
        width: 186rpx;
        height: 186rpx;
        border-radius: 16rpx;
        margin-right: 20rpx;
      }
    }
    .unload {
      width: 614rpx;
      height: 152rpx;
      text-align: center;
      border-radius: 16rpx;
      color: #929292;
      border: 2rpx dashed #979797;
      font-size: 20rpx;
      .text-content {
        margin-top: 80rpx;
      }
    }
  }
  .footer {
    position: fixed;
    bottom: 0;
    padding: 20rpx 24rpx 60rpx;
    background-color: #fff;
    left: 0;
    width: 100%;
    .btn {
      margin: 0;
      padding: 0;
      background-color: #f83224;
      color: #fff;
      border-radius: 44rpx;
      width: 94%;
      height: 88rpx;
      line-height: 88rpx;
    }
  }
}
.u-textarea {
  background-color: #f4f4f4;
  padding: 0;
}

::v-deep .u-upload__deletable {
  width: 22px !important;
  height: 22px !important;
}
::v-deep .u-upload__deletable__icon {
  top: 3px !important;
}
::v-deep .u-icon__icon {
  font-size: 18px !important;
}
</style>