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.goods_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>{{ goodsDetail.goods.unit_price.split(".")[0] }}</text
            >.
            <text style="font-size: 20rpx">{{
              goodsDetail.goods.unit_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>{{ goodsDetail.goods.amount.split(".")[0] }}</text
          >.
          <text style="font-size: 20rpx">{{
            goodsDetail.goods.amount.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="1"
          width="250"
          height="150"
        >
          <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: [],
    };
  },
  onLoad(options) {
    this.orderId = options.orderId;
  },
  methods: {
    //打开退货理由弹窗
    openReason() {
      this.show = true;
    },

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

    //上传图片
    afterRead(e) {
      console.log(e);
      this.imgList.push(e.file[0].url);
    },

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

    //提交申请
    submitApplication() {
      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,
          image: this.imgList.join(","),
        })
        .then((res) => {
          console.log(res);
        });
    },
  },
  mounted() {
    this.getDetail();
    uni.setNavigationBarTitle({
      title: "申请退款",
    });
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx 24rpx;
  position: relative;
  .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;
}
</style>