v1.0

pages/refund/refund.vue

@@ -0,0 +1,263 @@
+<template>
+  <layout>
+    <uv-navbar
+      :fixed="false"
+      :title="title"
+      left-arrow
+      @leftClick="$onClickLeft"
+    />
+    <div v-if="orderInfoData">
+      <div class="mb-20">
+        <card v-for="(item, index) in goodsList">
+          <goods
+            list
+            interval
+            showAction
+            model
+            :price="item.cartInfo.productInfo.price"
+            :data="item.cartInfo.productInfo"
+          >
+          </goods>
+        </card>
+      </div>
+
+      <view class="y-list">
+        <uv-list border>
+          <!-- <uv-list-item
+            border
+            clickable
+            show-arrow
+            @click=""
+          >
+            <view class="y-list-content">
+              <view class="y-list-label">货物状态</view>
+              <view class="y-list-select">
+                请选择
+              </view>
+            </view>
+          </uv-list-item> -->
+          <uv-list-item
+            border
+            title="退款原因"
+            clickable
+            right-text="请选择"
+            show-arrow
+            @click=""
+          >
+            <view class="y-list-content">
+              <view class="y-list-label">退款原因</view>
+              <view
+                class="y-list-select-placeholder"
+                @tap="openReasonForApplicationPicker"
+                v-if="!data.reasonForApplication"
+              >
+                请选择
+              </view>
+              <view
+                class="y-list-select"
+                @tap="openReasonForApplicationPicker"
+                v-if="data.reasonForApplication"
+              >
+                {{ data.reasonForApplication }}
+              </view>
+            </view>
+          </uv-list-item>
+        </uv-list>
+        <uv-picker
+          ref="reasonForApplicationPicker"
+          :columns="reasonForApplication"
+          @confirm="reasonForApplicationConfirm"
+        ></uv-picker>
+      </view>
+      <view class="y-list">
+        <uv-list border>
+          <uv-list-item border>
+            <view class="y-list-content">
+              <view class="y-list-label">退款金额</view>
+              <view class="y-list-value">
+                ¥{{ totalPrice }}
+              </view>
+            </view>
+          </uv-list-item>
+          <uv-list-item border>
+            <view class="y-list-content">
+              <view class="y-list-label">申请说明</view>
+              <view class="y-list-input">
+                <uv-input
+                  placeholder="请输入内容"
+                  border="none"
+                  v-model="data.applicationInstructions"
+                ></uv-input>
+              </view>
+            </view>
+          </uv-list-item>
+        </uv-list>
+      </view>
+      <view class="card noBorder full">
+        <view class="card-head">
+          <div class="card-title">上传凭证</div>
+        </view>
+        <view class="card-content">
+          <upload-file v-model="list" />
+        </view>
+      </view>
+
+    </div>
+    <div class="form-buttons">
+      <uv-button
+        round
+        block
+        type="primary"
+        @tap="handleApplyForAfterSales"
+      >
+        提交
+      </uv-button>
+    </div>
+  </layout>
+</template>
+
+<script setup>
+
+import { ref, watch, computed } from 'vue'
+import { applyForAfterSalesInfo, applyForAfterSales } from '@/api/order'
+import { navigateTo, back } from '@/utils/router'
+import { onLoad } from '@dcloudio/uni-app'
+
+const goodsList = ref([])
+const goodsSelect = ref([])
+const totalPrice = ref(0);
+const orderInfoData = ref(null)
+const reasonForApplicationPicker = ref(null)
+
+const refundType = ref(null)
+const list = ref([])
+const reasonForApplication = ref([
+  [
+    "收货地址填错了",
+    "与描述不符",
+    "信息填错了，重新拍",
+    "收到商品损坏了",
+    "未按预定时间发货",
+    "其它原因"
+  ]
+])
+
+const data = ref({
+  "orderId": "",
+  // 服务类型 0仅退款1退货退款 serviceType;
+  "serviceType": '',
+  // 申请原因
+  "reasonForApplication": "",
+  // 申请说明
+  "applicationInstructions": "",
+  // 申请说明图片
+  "applicationDescriptionPicture": "",
+  "productParamList": []
+})
+
+
+const title = computed(() => {
+  return refundType.value == 0 ? `申请退款` : '申请退货退款';
+});
+
+const openReasonForApplicationPicker = () => {
+  reasonForApplicationPicker.value.open();
+}
+
+const reasonForApplicationConfirm = (e) => {
+  data.value.reasonForApplication = e.value[0]
+  reasonForApplicationPicker.value.close();
+}
+
+
+
+const handleOrderInfo = async (option) => {
+  const res = await applyForAfterSalesInfo(option)
+  orderInfoData.value = res
+  goodsList.value = res.filter(item => goodsSelect.value.includes(item.id))
+
+  let price = 0
+  let productParamList = []
+
+  goodsList.value.forEach(item => {
+    price += item.cartInfo.truePrice * item.cartInfo.cartNum
+    productParamList.push({
+      productId: item.id
+    })
+  })
+
+  totalPrice.value = price
+  data.value.orderId = option.orderId
+  data.value.serviceType = refundType.value
+  data.value.productParamList = productParamList
+
+}
+
+
+const handleApplyForAfterSales = async () => {
+
+  if (!data.value.reasonForApplication) {
+    uni.showToast({
+      icon: "none",
+      title: '请选择申请原因',
+      duration: 2000
+    });
+    return
+  }
+  if (!data.value.applicationInstructions) {
+    uni.showToast({
+      icon: "none",
+      title: '请选择申请说明',
+      duration: 2000
+    });
+    return
+  }
+
+  console.log("--> % handleApplyForAfterSales % data.value:\n", data.value)
+  console.log("gxs --> % handleApplyForAfterSales % list.value:\n", list.value)
+  let res = await applyForAfterSales({
+    ...data.value,
+    applicationDescriptionPicture: list.value.join(',')
+  })
+  back()
+  console.log("--> % handleApplyForAfterSales % res:\n", res)
+}
+
+onLoad((option) => {
+  handleOrderInfo({
+    key: option.id
+  })
+  goodsSelect.value = option.goods
+  refundType.value = option.refundType
+
+
+})
+
+
+</script>
+
+<style lang="less">
+.shopping-checkbox {}
+
+.shopping-action {
+  padding-left: 34rpx;
+  flex: 1;
+  display: flex;
+  justify-content: space-between;
+
+  &-checkbox {
+    flex: 1
+  }
+
+  &-total {
+    line-height: 48rpx;
+    font-size: 34rpx;
+    color: #333333;
+    margin-right: 10rpx;
+  }
+
+  &-btn {
+    width: 224rpx;
+  }
+}
+</style>