|
|
@@ -0,0 +1,480 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+
|
|
|
+ <view class="apply-return">
|
|
|
+ <view class="apply-return-top">
|
|
|
+ <view class="apply-return-list">
|
|
|
+ <view class="apply-return-card" v-for="(item, idx) in orderInfo.orderInfoList" :key="idx">
|
|
|
+ <image :src="item.image" mode="aspectFill"></image>
|
|
|
+ <view class="con">
|
|
|
+ <view class="name">
|
|
|
+ <view class="">{{ item.storeName }}</view>
|
|
|
+ <view class="">￥{{ item.price }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="num">
|
|
|
+ <view class="">{{ item.sku }}</view>
|
|
|
+ <view class="">X{{ item.cartNum }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="apply-return-b">
|
|
|
+ <view class="item">
|
|
|
+ <view>退货件数</view>
|
|
|
+ <view class="num">{{ orderInfo.totalNum }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view>订单金额</view>
|
|
|
+ <view class="red">￥{{ orderInfo.payPrice }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="list">
|
|
|
+
|
|
|
+ <view class="item acea-row row-between-wrapper" @tap="toggleTab('region')">
|
|
|
+ <view>退货原因</view>
|
|
|
+ <picker class="num" @change="bindPickerChange" :value="index" :range="RefundArray">
|
|
|
+ <view class="picker acea-row row-between-wrapper">
|
|
|
+ <view class="reason">{{ RefundArray[index] }}</view>
|
|
|
+ <image class="iconfont" src="/static/images/shop/go@2x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view>快递单号</view>
|
|
|
+ <input v-model="form.returnDeliveryId" placeholder-class="express-num" placeholder="请输入快递单号" />
|
|
|
+ </view>
|
|
|
+ <view class="textarea">
|
|
|
+ <view>退货物流截图</view>
|
|
|
+ <up-upload @afterRead="async (e) => {
|
|
|
+ await afterRead(e);
|
|
|
+ getImage();
|
|
|
+ }" @delete="onImageDelete" name="product" multiple :maxCount="1" :fileList="previewImages">
|
|
|
+ <view class="upload-btn">
|
|
|
+ <up-icon name="plus" size="20" color="#ccc"></up-icon>
|
|
|
+ <text class="upload-tip">点击上传</text>
|
|
|
+ </view>
|
|
|
+ </up-upload>
|
|
|
+ <text class="format-tip">支持上传PNG、JPG格式的图片，每张不超过5MB。</text>
|
|
|
+ </view>
|
|
|
+ <view class="textarea">
|
|
|
+ <view>备注说明</view>
|
|
|
+ <textarea v-model="form.refund_reason_wap_explain" count placeholder="填写备注信息，100字以内" class="num"></textarea>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="kong"></view>
|
|
|
+ <view class="footer">
|
|
|
+ <button @click="subRefund" class="returnBnt" form-type="submit">
|
|
|
+ 申请退货
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import {
|
|
|
+ ref,
|
|
|
+ reactive,
|
|
|
+ watch,
|
|
|
+ } from "vue";
|
|
|
+ import {
|
|
|
+ useAppStore
|
|
|
+ } from "@/stores/app";
|
|
|
+ import {
|
|
|
+ onLoad
|
|
|
+ } from "@dcloudio/uni-app";
|
|
|
+ import {
|
|
|
+ ordeRefundReason,
|
|
|
+ applyRefund,
|
|
|
+ exchangeDelivery
|
|
|
+ } from "@/api/order.js";
|
|
|
+ import {
|
|
|
+ toLogin
|
|
|
+ } from "@/libs/login.js";
|
|
|
+ import {
|
|
|
+ useImageUpload
|
|
|
+ } from "@/hooks/useImageUpload";
|
|
|
+
|
|
|
+ const appStore = useAppStore();
|
|
|
+ import {
|
|
|
+ useToast
|
|
|
+ } from "@/hooks/useToast";
|
|
|
+ import {applyExchangeInfo} from "../../../api/order";
|
|
|
+
|
|
|
+ const refund_reason_wap_imgPath = ref([]);
|
|
|
+ const orderInfo = reactive({});
|
|
|
+ const RefundArray = ref([]);
|
|
|
+ const index = ref(0);
|
|
|
+ const orderId = ref(0);
|
|
|
+
|
|
|
+ const {
|
|
|
+ Toast
|
|
|
+ } = useToast();
|
|
|
+
|
|
|
+ const form = ref({
|
|
|
+ text:'',
|
|
|
+ returnDeliveryId: '',
|
|
|
+ refund_reason_wap_explain: '',
|
|
|
+ uni: '',
|
|
|
+ refund_reason_wap_img: ''
|
|
|
+ })
|
|
|
+ const previewImages = ref([]);
|
|
|
+
|
|
|
+ const {
|
|
|
+ imageList,
|
|
|
+ afterRead,
|
|
|
+ deletePic,
|
|
|
+ uploadLoading
|
|
|
+ } = useImageUpload({
|
|
|
+ pid: 1,
|
|
|
+ model: "product",
|
|
|
+ });
|
|
|
+
|
|
|
+ watch(() => appStore.isLogin, (newV) => {
|
|
|
+ if (newV) {
|
|
|
+ getOrderInfo();
|
|
|
+ getRefundReason();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ onLoad((options) => {
|
|
|
+ if (!options.orderId)
|
|
|
+ return Toast({
|
|
|
+ title: "缺少订单id,无法退款"
|
|
|
+ }, {
|
|
|
+ tab: 3,
|
|
|
+ url: 1
|
|
|
+ });
|
|
|
+ form.value.uni = options.orderId
|
|
|
+ orderId.value = options.orderId;
|
|
|
+ if (appStore.isLogin) {
|
|
|
+ getOrderInfo();
|
|
|
+ getRefundReason();
|
|
|
+ } else {
|
|
|
+ toLogin();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ function onLoadFun() {
|
|
|
+ getOrderInfo();
|
|
|
+ getRefundReason();
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 获取订单详情
|
|
|
+ */
|
|
|
+ function getOrderInfo() {
|
|
|
+ applyExchangeInfo(orderId.value).then((res) => {
|
|
|
+ Object.assign(orderInfo, res.data);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 获取退款理由
|
|
|
+ */
|
|
|
+ function getRefundReason() {
|
|
|
+ ordeRefundReason().then((res) => {
|
|
|
+ RefundArray.value = res.data;
|
|
|
+ if (res.data.length) {
|
|
|
+ form.value.text = res.data[index.value]
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 申请退货
|
|
|
+ */
|
|
|
+ function subRefund(e) {
|
|
|
+ form.value.id = orderInfo.id;
|
|
|
+ form.value.returnDeliveryImgUrl = previewImages.value[0]?.info?.url || previewImages.value[0]?.url;
|
|
|
+ console.log(form.value)
|
|
|
+ exchangeDelivery(form.value)
|
|
|
+ .then((res) => {
|
|
|
+ return Toast({
|
|
|
+ title: "申请成功",
|
|
|
+ icon: "success"
|
|
|
+ }, {
|
|
|
+ tab: 5,
|
|
|
+ url: "/pages/users/user_return_list/index?isT=1"
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ return Toast({
|
|
|
+ title: err
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function bindPickerChange(e) {
|
|
|
+ index.value = e.detail.value;
|
|
|
+ form.value.text = RefundArray.value[e.detail.value]
|
|
|
+ }
|
|
|
+
|
|
|
+ function toggleTab() {
|
|
|
+ // 保留原逻辑
|
|
|
+ }
|
|
|
+ async function getImage() {
|
|
|
+ if (imageList.value.length > 0) {
|
|
|
+ if (imageList.value[0].status == "success") {
|
|
|
+ previewImages.value = imageList.value;
|
|
|
+ } else {
|
|
|
+ Toast({
|
|
|
+ title: "上传失败"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ imageList.value = [];
|
|
|
+ }
|
|
|
+ const onImageDelete = (e) => {
|
|
|
+ previewImages.value.splice(e.index, 1);
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ page {
|
|
|
+ background: #F9F7F0;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style scoped lang="scss">
|
|
|
+ .apply-return {
|
|
|
+ padding: 16rpx;
|
|
|
+
|
|
|
+ .apply-return-top {
|
|
|
+ padding: 16rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+
|
|
|
+ .apply-return-card {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .con {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ display: flex;
|
|
|
+ font-weight: bold;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num {
|
|
|
+ margin-top: 8rpx;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .apply-return-top {
|
|
|
+ .item {
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ color: #333333;
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ .red {
|
|
|
+ color: #FD5F3C;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .item {
|
|
|
+ padding: 0 16rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #333333;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ input {
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .num {
|
|
|
+ color: #282828;
|
|
|
+ width: 427rpx;
|
|
|
+ text-align: right;
|
|
|
+
|
|
|
+ .picker {
|
|
|
+ .reason {
|
|
|
+ width: 385rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .express-num {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .placeholder {
|
|
|
+ color: #bbb;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ height: 95rpx;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #bbb;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload {
|
|
|
+ padding-bottom: 36rpx;
|
|
|
+
|
|
|
+ .pictrue {
|
|
|
+ border-radius: 14rpx;
|
|
|
+ margin: 22rpx 23rpx 0 0;
|
|
|
+ width: 156rpx;
|
|
|
+ height: 156rpx;
|
|
|
+ position: relative;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #bbb;
|
|
|
+
|
|
|
+ &:nth-of-type(4n) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 14rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-guanbi1 {
|
|
|
+ position: absolute;
|
|
|
+ font-size: 45rpx;
|
|
|
+ top: -10rpx;
|
|
|
+ right: -10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-icon25201 {
|
|
|
+ color: #bfbfbf;
|
|
|
+ font-size: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-last-child(1) {
|
|
|
+ border: 1rpx solid #ddd;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .textarea {
|
|
|
+ padding: 16rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+
|
|
|
+ view {
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ textarea {
|
|
|
+ width: 100%;
|
|
|
+ padding: 16rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ height: 264rpx;
|
|
|
+ background: #F9F7F0;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .kong {
|
|
|
+ height: calc(132rpx + constant(safe-area-inset-bottom));
|
|
|
+ height: calc(132rpx + env(safe-area-inset-bottom));
|
|
|
+ background: #F9F7F0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer {
|
|
|
+ padding: 22rpx 32rpx calc(22rpx + constant(safe-area-inset-bottom));
|
|
|
+ padding: 22rpx 32rpx calc(22rpx + env(safe-area-inset-bottom));
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ z-index: 277;
|
|
|
+ box-shadow: inset 0rpx 1rpx 0rpx 0rpx #F1F3F8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .returnBnt {
|
|
|
+ text-align: center;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 32rpx;
|
|
|
+ line-height: 88rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background: #F8C008;
|
|
|
+ font-weight: bold;
|
|
|
+ &::after {
|
|
|
+ width: 0;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .upload-btn {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 150rpx;
|
|
|
+ height: 150rpx;
|
|
|
+ border: 1rpx dashed #DCDFE6;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-tip {
|
|
|
+ font-size: 20rpx;
|
|
|
+ color: #666;
|
|
|
+ margin-top: 6rpx;
|
|
|
+ }
|
|
|
+</style>
|
ext.liuqiwen3
