uniapp-ZHSQ/packages/myOrders/afterSale/index.vue

<template>
    <view class="container">
        <view v-for="(item, index) in currentAfterSale" :key="index">
            <view class="after-sale-item">
                <!-- 头部信息 -->
                <view class="header">
                    <view class="company-info">
                        <text class="company-name">{{ item.commodity_order_item[0].goods_name }}</text>
                        <text class="after-sale-no">{{ item.after_sales_type === 1 ? '退款' : (item.after_sales_type === 2
                            ? '退货瑞款' : '换货') }}</text>
                    </view>
                    <text class="order-time">提交订单：{{ formatDate(item.create_time) }}</text>
                </view>

                <!-- 商品信息 -->
                <view class="goods-info" v-for="(ite, index) in item.commodity_order_item" :key="index">
                    <view class="asGoodTag tag-img" v-if="ite.is_support_same_day === 1">当日达</view>
                    <image :src="ite.commodity_pic" class="goods-image"></image>
                    <view class="goods-details">
                        <text class="goods-name">
                            <text class="asGoodTag asGoodTag1" v-if="ite.is_support_same_day === 1">当日达</text>
                            {{ ite.goods_name }}
                            <text class="refund-amount">退款：¥{{ ite.sales_price }}</text>
                        </text>
                        <text class="goods-desc">{{ ite.goods_spec }}</text>
                        <view class="price-count">
                            <text class="goods-price">¥{{ ite.sales_price }}/个</text>
                            <text class="goods-count">x{{ ite.count }}</text>
                        </view>
                    </view>
                </view>

                <!-- 退款状态 -->
                <view class="status-container">
                    <view class="status-item" @click="pendingPage(item)">
                        <text class="status-label">{{ getStatusText(item.after_sales_status) }}</text>
                        <text class="status-desc">商家将在<text style="color: #e73b05;">{{
                            calculateProcessingTime(item.create_time) }}</text>内处理</text>
                        <view class="arrow-right"></view>
                    </view>
                </view>

                <!-- 操作按钮 -->
                <view class="action-buttons">
                    <button class="modify-btn" @click="modifyApplication(item)">修改申请</button>
                    <button class="cancel-btn" @click="cancelApplication(item)">撤销申请</button>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
import afterSaleData from './afterSale.json';
import { apiArr } from "../../../api/afterSale";
import {
    isPhone,
    picUrl,
    request,
    upload,
    NavgateTo
} from '../../../utils';

export default {
    props: {
        afterSaleList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            // currentAfterSale: afterSaleData
            currentAfterSale: this.afterSaleList,
        };
    },
    watch: {
        afterSaleList: {
            handler(newVal) {
                this.currentAfterSale = newVal;
            },
            deep: true
        }
    },
    methods: {
        getList() {
            const params = {
                user_id: uni.getStorageSync('userId'),
            }
            request(apiArr.afterSalesList, "POST", params).then((res) => {
                res.after_sales_list.forEach(item => {
                    item.commodity_order_item?.forEach(good => {
                        good.commodity_pic = picUrl + good.commodity_pic;
                    })
                })
                this.currentAfterSale = res.after_sales_list;
            });
        },
        getStatusText(status) {
            // 根据状态码返回对应的状态文本
            const statusMap = {
                1: '商家待处理',
                2: '已撤销',
                3: '已完成',
                4: '已拒绝'
            };
            return statusMap[status] || '未知状态';
        },
        calculateProcessingTime(createTime) {
            return '2天';
        },
        formatDate(dateString) {
            if (!dateString) return '';
            const date = new Date(dateString);
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        modifyApplication(item) {
            NavgateTo(`../apply/index?item=${JSON.stringify(item)}`);
        },
        cancelApplication(item) {
            uni.showModal({
                title: '提示',
                content: '确定要撤销退款申请吗？',
                success: (res) => {
                    if (res.confirm) {
                        const params = {
                            id: item.id,
                        }
                        request(apiArr.revokeApply, "POST", params).then((res) => {
                            this.getList();
                            uni.showToast({
                                title: '订单撤销成功',
                                icon: 'success',
                                // duration: 1500,
                                // success: () => {
                                //     this.$emit('revokeApply');
                                // }
                            });
                        });
                    }
                }
            });
        },
        pendingPage(item) {
            console.log("🚀 ~ pendingPage ~ item:", item)
            if (item.after_sales_type === 3) {
                NavgateTo(`/packages/myOrders/changeInfo/index?item=${JSON.stringify(item)}`)
            } else {
                NavgateTo(`/packages/myOrders/pending/index?item=${JSON.stringify(item)}`); //拒绝申请
                // NavgateTo(`/packages/myOrders/sendBack/index?item=${JSON.stringify(item)}`); //自行寄回
                // NavgateTo(`/packages/myOrders/refundOver/index?item=${JSON.stringify(item)}`); //退款成功
                // NavgateTo(`/packages/myOrders/changeInfo/index?item=${JSON.stringify(item)}`); //换货
            }
        }
    },
};
</script>

<style scoped>
@import url(./index.css);
</style>