111

src/pages/order/detail.vue

@@ -4,7 +4,7 @@ import { onLoad, onShow } from "@dcloudio/uni-app";
 import { isEmpty } from "radash"
 
 import { hooks, constant, router } from "@@/index"
-import { orderApi } from "@@/api"
+import { orderApi, refundApi } from "@@/api"
 
 const data = {
 
@@ -12,6 +12,7 @@ const data = {
 const state = reactive<any>({
     detailId: null,
     detail: {},
+    refundDetail: {},
     shopCarList: [],
 })
 
@@ -30,6 +31,9 @@ const getDetail = async () => {
     const _pa = { id: state.detailId };
     const { data } = await orderApi.detail(_pa)
     state.detail = data
+    if (state.detail.orderStatus == 10) {
+        getRefundDetail()
+    }
 }
 
 const getShopCarList = async () => {
@@ -39,6 +43,24 @@ const getShopCarList = async () => {
     state.shopCarList = data
 }
 
+const getRefundDetail = async () => {
+    if (isEmpty(state.detailId)) return
+    const _pa = { id: state.detailId };
+    const { data } = await refundApi.get(_pa)
+    state.refundDetail = data
+}
+
+const doCancelRefund = async () => {
+    uni.showModal({
+        title: '提示',
+        content: '是否确定取消申请退款',
+        confirmColor: '#0094ff',
+        success: async (res) => {
+
+        }
+    })
+}
+
 </script>
 
 
@@ -89,7 +111,7 @@ const getShopCarList = async () => {
                 <view class="flex-row items-start justify-between" v-for="(v, i) in state.shopCarList" :key="i"
                     @tap.stop="router.jump('/pages/merchant/product-detail', { id: v.productId })">
                     <view class="flex-row items-center">
-                        <image class="w-160rpx h-160rpx" :src="v.productPic" mode="aspectFill" />
+                        <image class="w-160rpx h-160rpx rounded-8rpx" :src="v.productPic" mode="aspectFill" />
                         <view class="flex-col m-l-15rpx second-text-26">
                             <view class="sub-text-28">{{ v.productName }}</view>
                             <view class="m-t-5rpx">¥ {{ hooks.useMoney(v.productPrice) }}</view>
@@ -110,6 +132,52 @@ const getShopCarList = async () => {
                 </view>
             </view>
         </view>
+        <!-- start 退款相关 start -->
+        <slot v-if="state.detail.orderStatus == 10">
+            <view class="flex-row items-center justify-between card p-x-20rpx p-y-30rpx m-b-20rpx"
+                @tap="router.jump('/pages/refund/history', { id: state.refundDetail.id })">
+                <view>
+                    <view class="sub-text-28">
+                        <view>退款申请待商家处理</view>
+                    </view>
+                    <view class="m-t-10rpx second-text-26">
+                        {{ hooks.useTime(state.refundDetail.updateTime, "") }}
+                    </view>
+                </view>
+                <view class="m-l-15rpx color-#999 font-size-26rpx! iconfont icon-youjiantou" />
+            </view>
+            <view class="flex-row items-center justify-between card p-x-20rpx p-y-30rpx m-b-20rpx">
+                <view class="sub-text-28">退款金额</view>
+                <view class="sub-text-28 color-red!">¥{{ hooks.useMoney(state.refundDetail.refundPrice) }}</view>
+            </view>
+            <view class="card p-x-20rpx p-y-30rpx space-y-10rpx m-b-20rpx second-text-24">
+                <view class="flex-row items-center">
+                    <view>服务单号：</view>
+                    <view>{{ state.refundDetail.no }}</view>
+                </view>
+                <view class="flex-row items-center">
+                    <view>申请时间：</view>
+                    <view>{{ hooks.useTime(state.refundDetail.createTime, "") }}</view>
+                </view>
+                <view class="flex-row items-center">
+                    <view>售后类型：</view>
+                    <view>{{ state.refundDetail.applyReason }}</view>
+                </view>
+                <view class="flex-row items-center">
+                    <view>相关描述：</view>
+                    <view>{{ state.refundDetail.applyDescription }}</view>
+                </view>
+            </view>
+        </slot>
+        <!-- end 退款相关 end -->
+        <view class="h-30rpx" />
+        <template #main-bottom>
+            <view v-if="state.detail.orderStatus == 10"
+                class="bg-#999 p-y-20rpx text-center rounded-40rpx m-x-30rpx m-y-30rpx sub-text-30 color-white!"
+                @tap="doCancelRefund">
+                取消申请
+            </view>
+        </template>
     </crud-layout>
 </template>
 

src/pages/refund/apply.vue

@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { onLoad, onShow } from "@dcloudio/uni-app";
+import { isEmpty } from "radash"
+
+import { hooks, router } from "@@/index"
+import { orderApi, refundApi, commonApi } from "@@/api"
+
+const data = {
+    payType: [
+        { text: "仅退款", disabled: false, type: "10", value: "10" },
+        { text: "退款退货", disabled: false, type: "20", value: "20" },
+    ]
+}
+const state = reactive<any>({
+    detailId: null,
+    detail: {},
+    shopCarList: [],
+    setting: {},
+    selectList: []
+})
+
+const applyForm = reactive<any>({
+    way: data.payType[0].type,
+    remark: "",
+    reason: "",
+    reasonStr: "",
+})
+
+onLoad((options: any) => {
+    if (!isEmpty(options.id)) {
+        state.detailId = options.id
+    }
+});
+onShow(() => {
+    getDetail()
+    getSetting()
+    getShopCarList()
+})
+
+const getSetting = async () => {
+    const _pa = {};
+    const { data } = await commonApi.setting(_pa)
+    state.setting = data
+    state.selectList = data.afterSaleRefundReasons.map(v => {
+        return {
+            id: v,
+            title: v,
+        }
+    })
+}
+const getDetail = async () => {
+    if (isEmpty(state.detailId)) return
+    const _pa = { id: state.detailId };
+    const { data } = await orderApi.detail(_pa)
+    state.detail = data
+}
+const getShopCarList = async () => {
+    if (isEmpty(state.detailId)) return
+    const _pa = { orderId: state.detailId };
+    const { data } = await orderApi.shopCarList(_pa)
+    state.shopCarList = data
+}
+
+const radioChange = (e: any) => {
+    switch (e) {
+        case "10":
+            state.selectList = state.setting.afterSaleRefundReasons.map(v => {
+                return {
+                    id: v,
+                    title: v,
+                }
+            })
+            break
+        case "20":
+            state.selectList = state.setting.afterSaleReturnReasons.map(v => {
+                return {
+                    id: v,
+                    title: v,
+                }
+            })
+            break
+    }
+}
+
+const doSubmit = async () => {
+    if (isEmpty(applyForm.reasonStr)) {
+        uni.showToast({ title: '请选择申请原因', icon: "none" });
+        return
+    }
+    const _pa = {
+        way: applyForm.way,
+        refundPrice: state.detail.practicalTotalPrice,
+        orderItemId: state.detailId,
+        images: [],
+        applyReason: applyForm.reasonStr,
+        applyDescription: applyForm.remark,
+    }
+    try {
+        uni.showLoading({ title: '申请中...', mask: false });
+        const data = await refundApi.create(_pa)
+        uni.hideLoading()
+        uni.showToast({ title: '申请成功', icon: "none" });
+    } catch (error) {
+        console.error(error);
+        uni.hideLoading()
+    }
+}
+
+</script>
+
+
+<template>
+    <crud-layout title="申请售后" mainIsScroll bg="/static/page/blue-bg.png">
+        <view class="h-30rpx" />
+        <view class="flex-col justify-center card p-x-20rpx p-y-30rpx m-b-20rpx">
+            <view class="m-t-15rpx">
+                <view class="flex-row items-start justify-between" v-for="(v, i) in state.shopCarList" :key="i"
+                    @tap.stop="router.jump('/pages/merchant/product-detail', { id: v.productId })">
+                    <view class="flex-row items-center">
+                        <image class="w-160rpx h-160rpx rounded-8rpx" :src="v.productPic" mode="aspectFill" />
+                        <view class="flex-col m-l-15rpx second-text-26">
+                            <view class="sub-text-28">{{ v.productName }}</view>
+                            <view class="m-t-5rpx">¥ {{ hooks.useMoney(v.productPrice) }}</view>
+                            <view class="m-t-5rpx">x {{ v.productCount }}</view>
+                        </view>
+                    </view>
+                    <view class="flex-row-center">
+                        <view class="sub-text-32">¥ {{ hooks.useMoney(v.totalPrice) }}</view>
+                    </view>
+                </view>
+                <view class="m-y-15rpx h-1px bg-#999 bg-opacity-5" />
+                <view class="flex-row items-center justify-between">
+                    <view class="sub-text-28">实付款</view>
+                    <view class="flex-row items-end">
+                        <view class="sub-text-28">¥</view>
+                        <view class="m-l-5rpx sub-text-28">{{ hooks.useMoney(state.detail.practicalTotalPrice) }}</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <view class="card p-x-20rpx p-y-30rpx m-b-20rpx">
+            <view class="sub-text-28">售后类型</view>
+            <view class="m-t-20rpx">
+                <tm-radio-group @change="radioChange" direction="column" gap="20" v-model="applyForm.way">
+                    <tm-radio :disabled="v.disabled" v-for="(v, i) in data.payType" :key="i" :value="v.type"
+                        :label="v.text" />
+                </tm-radio-group>
+            </view>
+        </view>
+        <view class="flex-row items-center justify-between card p-x-20rpx p-y-30rpx m-b-20rpx">
+            <view class="sub-text-28">退款金额</view>
+            <view class="sub-text-28 color-red!">¥{{ hooks.useMoney(state.detail.practicalTotalPrice) }}</view>
+        </view>
+        <view class="card p-x-20rpx p-y-30rpx m-b-20rpx">
+            <tm-picker rang-key="title" rang-text="title" v-model="applyForm.reason"
+                v-model:model-str="applyForm.reasonStr" :list="state.selectList">
+                <view class="flex-row items-center justify-between">
+                    <view class="sub-text-28">申请原因</view>
+                    <view class="flex-row items-center second-text-24">
+                        <text>{{ applyForm.reasonStr || '请选择申请原因' }} </text>
+                        <text class="m-l-10rpx color-#b1b1b1 iconfont icon-xiangxiajiantouxiao" />
+                    </view>
+                </view>
+            </tm-picker>
+        </view>
+        <view class="flex-col justify-center card p-x-20rpx p-y-30rpx m-b-20rpx">
+            <view class="sub-text-28">相关描述</view>
+            <view class="m-t-20rpx">
+                <tm-input v-model="applyForm.remark" type="textarea" :showClear="false"
+                    placeholder="客官～请描述您遇到的问题"></tm-input>
+            </view>
+        </view>
+        <view class="h-30rpx" />
+        <template #main-bottom>
+            <view v-if="state.detailType != 'view'"
+                class="bg-#0094ff p-y-20rpx text-center rounded-40rpx m-x-30rpx m-y-30rpx sub-text-30 color-white!"
+                @tap="doSubmit">
+                提交申请
+            </view>
+        </template>
+    </crud-layout>
+</template>
+
+<style lang="scss" scoped></style>

src/pages/refund/history.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import { onLoad, onShow } from "@dcloudio/uni-app";
+
+import { hooks } from "@@/index"
+import { foodApi } from "@@/api"
+
+const data = {
+
+}
+const state = reactive<any>({
+
+})
+
+onLoad(() => {
+
+});
+onShow(() => {
+
+})
+
+</script>
+
+
+<template>
+    <crud-layout mainIsScroll title="售后进度" bg="/static/page/blue-bg.png">
+        <view class="h-30rpx" />
+        <view class="h-30rpx" />
+    </crud-layout>
+</template>
+
+<style lang="scss" scoped></style>

src/pages/tabbar/order.vue

@@ -12,7 +12,7 @@ const data = {
         { id: null, name: '全部', disabled: false },
         { id: 1, name: '未支付', disabled: false },
         { id: 5, name: '待核销', disabled: false },
-        { id: 10, name: '已退款', disabled: false },
+        { id: 10, name: '售后中', disabled: false },
         { id: 15, name: '已核销', disabled: false },
     ]
 }
@@ -51,6 +51,8 @@ const doAppraise = () => {
 }
 
 const doRefund = (v: any) => {
+    router.jump("/pages/refund/apply", { id: v.id })
+    return
     uni.showModal({
         title: '提示',
         content: '是否确定退款',
@@ -100,7 +102,7 @@ const doRefund = (v: any) => {
                             </view>
                             <tm-tag v-if="v.orderStatus == 1" color="info" size="xs">未支付</tm-tag>
                             <tm-tag v-if="v.orderStatus == 5" color="success" size="xs">待核销</tm-tag>
-                            <tm-tag v-if="v.orderStatus == 10" color="error" size="xs">已退款</tm-tag>
+                            <tm-tag v-if="v.orderStatus == 10" color="error" size="xs">售后中</tm-tag>
                             <tm-tag v-if="v.orderStatus == 15" size="xs">已核销</tm-tag>
                         </view>
                         <view class="m-t-5rpx">