CZKJ.XKJ.Helper/src/pages/index/refund.vue

<template>
    <div class="page" :class="{ 'page--iphoneX': iphoneX }">
        <div class="tips">温馨提示：请优先联系用户协商处理</div>
        <div class="black-tit">请选择退款商品</div>
        <div v-if="orderData">
            <checkbox-group class="item-list" @change="itemChange">
                <label
                    class="item"
                    v-for="(item, index) of orderData.orderItems"
                    :key="index"
                    :class="{ invalid: item.invalid }"
                >
                    <div class="check">
                        <checkbox
                            v-if="!item.invalid"
                            class="checkbox"
                            :value="item.id"
                        />
                    </div>
                    <div class="main">
                        <div class="info">
                            <my-image
                                :src="item.productImage"
                                class="img"
                            ></my-image>
                            <div class="data">
                                <div class="tit">
                                    {{ item.productName }}
                                </div>
                                <div>
                                    <span class="num"
                                        >数量：x {{ item.count }}</span
                                    >
                                    <span class="num" v-if="item.skuName"
                                        >规格： {{ item.skuName }}</span
                                    >
                                </div>
                                <div class="des">
                                    支付金额：
                                    <span class="price"
                                        >￥{{
                                            item.payAmount | minuteToRmb
                                        }}</span
                                    >
                                </div>
                            </div>
                        </div>
                        <div
                            class="difference"
                            v-if="item.refundAmount && item.actualPickingWeight"
                        >
                            <div class="name">
                                已退差价：￥{{
                                    item.refundAmount | minuteToRmb
                                }}
                            </div>
                            <div class="">
                                已退重量：{{ item.actualPickingWeight || "0" }}g
                            </div>
                        </div>
                    </div>
                </label>
            </checkbox-group>
        </div>
        <div class="refund-info">
            <div class="head">
                <div class="tit">退款金额</div>
                <div class="money">￥{{ refundNum | minuteToRmb }}</div>
            </div>
            <!-- <div class="des">
                备注：
            </div> -->
        </div>
        <div class="black-tit">请选择退款原因</div>
        <radio-group @change="radioChange" class="info-list">
            <label class="item" v-for="item of radioList" :key="item.key">
                <div class="radio">
                    <radio class="radio-inp" :value="item.value" />
                </div>
                <div class="info">{{ item.key }}</div>
            </label>
        </radio-group>
        <div class="btn-box">
            <span class="btn all-btn" @click="cancelOrder">取消订单</span>
            <!-- <span class="btn all-btn" @click="disparity">退差价</span> -->
            <span class="btn" @click="submit">退款已选中</span>
        </div>
    </div>
</template>

<script>
import MyImage from "../../components/image/index";

export default {
    name: "",
    components: { MyImage },

    // 数据
    data() {
        return {
            orderData: {},
            radioList: [
                { key: "商品已售完", value: "商品已售完" },
                { key: "店铺太忙", value: "店铺太忙" },
                { key: "其他", value: "其他" },
            ],
            curReason: "",
            curGoodItemIds: [],
            submitLoading: false,
        };
    },

    onLoad() {
        let curOrder = this.$store.state.common.curOrder;
        this.orderData = this.initData(curOrder);
        console.log(curOrder);
        this.$store.commit("common/update", {
            curOrder: null,
        });
        if (!curOrder) {
            this.router.back();
        }
    },
    async onShow() {},
    // 函数
    methods: {
        // 初始化订单数据
        initData(data) {
            let d = JSON.parse(JSON.stringify(data));
            console.log(d);
            //没有现有售后则不处理
            if (!d.afterSaleList) {
                return d;
            }
            // 判断是否有退款
            let num = 0;
            for (let orderItem of d.orderItems) {
                for (let afterSale of d.afterSaleList) {
                    if (afterSale.orderInfo.orderItemId === orderItem.id) {
                        orderItem.invalid = true;
                        num += 1;
                    }
                }
            }
            d.validItemNum = d.orderItems.length - num;
            console.log(d.validItemNum);
            d.orderItems.sort((a, b) => (a.invalid ? 1 : -1));
            return d;
        },

        radioChange(e) {
            this.curReason = e.detail.value;
        },
        itemChange(e) {
            this.curGoodItemIds = e.detail.value;
        },

        submit() {
            if (this.submitLoading) {
                return;
            }
            if (this.curGoodItemIds.length === 0) {
                return this.fn.showToast("请选择退货项");
            }
            if (this.curGoodItemIds.length === this.orderData.validItemNum) {
                // return this.fn.showToast("退款所有请选择全部退款");
                return this.cancelOrder(true);
            }
            if (!this.curReason) {
                return this.fn.showToast("请选择退货原因");
            }
            let sendData = {
                orderItemIds: this.curGoodItemIds,
                reason: this.curReason,
                remark: this.curReason,
            };
            this.fn
                .showModal({
                    content: "确认退款选中商品项",
                })
                .then((res) => {
                    if (res.confirm) {
                        this.submitLoading = true;
                        uni.showLoading({
                            title: "提交中...",
                            mask: true,
                        });
                        this.api
                            .post("/order/partialRefundApply", sendData, {
                                pass: true,
                            })
                            .then((res) => {
                                uni.hideLoading();
                                this.submitLoading = false;
                                if (res.success) {
                                    this.fn.showToast("提交成功");
                                    this.router.back();
                                } else {
                                    this.fn.showToast(
                                        "提交失败：" + res.message
                                    );
                                }
                            });
                    }
                });
        },

        // 退差价
        disparity() {
            if (this.submitLoading) {
                return;
            }
            if (this.curGoodItemIds.length === 0) {
                return this.fn.showToast("请选择退货项");
            }
            let arr = [];
            for (id of this.curGoodItemIds) {
                for (let item of this.orderData.orderItems) {
                    if (item.id === id) {
                        arr.push(item);
                    }
                }
            }
            this.$store.commit("common/update", {
                disparityData: arr,
            });
            let id = this.orderData.orderInfo.id;
            console.log(this.orderData, id);
            this.router.replace({
                path: "/pages/index/disparity",
                query: {
                    orderId: id,
                },
            });
        },

        // 取消订单
        cancelOrder(flag) {
            let str = "确认取消该订单，并全部退款";
            if (flag === true) {
                str = "你已选中所有商品，确认后将取消订单全部退款";
            }
            let val = this.orderData;
            this.fn
                .showModal({
                    content: str,
                })
                .then((res) => {
                    if (res.confirm) {
                        if (val.loading) {
                            return;
                        }
                        val.loading = true;
                        uni.showLoading({
                            title: "提交中...",
                            mask: true,
                        });

                        this.api
                            .post(
                                "/Order/Cancel",
                                {
                                    query: true,
                                    id: val.orderInfo.id,
                                },
                                { pass: true }
                            )
                            .then((res) => {
                                uni.hideLoading();
                                val.loading = false;
                                if (res.success) {
                                    this.fn.showToast("取消成功");
                                    this.router.back();
                                } else {
                                    this.fn.showToast(
                                        "取消失败：" + res.message
                                    );
                                }
                            });
                    }
                });
        },
    },

    // 数据计算
    computed: {
        user() {
            return this.$store.state.user.user;
        },
        refundNum() {
            let num = 0;
            for (let id of this.curGoodItemIds) {
                for (let item of this.orderData.orderItems) {
                    if (item.id === id) {
                        num += item.payAmount;
                        if(item.refundAmount){
                            num-=item.refundAmount;
                        }
                    }
                }
            }
            num = num.toFixed(2);
            return num;
        },
    },

    // 数据监听
    watch: {},
};
</script>

<style lang="scss" scoped>
.page {
    padding-bottom: px(180);
}
.tips {
    background-color: #fef9f3;
    font-size: px(40);
    padding: 0 px(40);
    height: px(100);
    line-height: px(100);
    color: #ec883d;
}
.black-tit {
    padding: px(50) px(40) px(30);
    background-color: #f1f0f5;
    font-size: px(42);
}
.btn-box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: #fff;
    padding: px(40);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn {
        display: block;
        width: 47%;
        height: px(110);
        border-radius: px(10);
        color: #fff;
        text-align: center;
        line-height: px(110);
        background-color: rgb(0, 188, 38);
    }
    .all-btn {
        background-color: #f3f3f3;
        color: #666;
    }
}
.item-list {
    padding: px(20) px(40);
    .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: px(40) 0;
        border-bottom: 1px solid #f1f1f1;
        &.invalid {
            background-color: #efefef;
        }
    }
    .check {
        width: px(100);
        flex-shrink: 0;
        margin-right: px(20);
    }
    .checkbox {
        transform: scale(0.8);
    }
    
    .main {
        width: 100%;
    }
    .info {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: stretch;
    }
    .img {
        width: px(180);
        height: px(180);
        flex-shrink: 0;
        margin-right: px(20);
        /deep/ img {
            width: px(180);
            height: px(180);
            background: #f1f1f1;
        }
    }
    .data {
        width: 100%;
    }
    .tit {
        font-size: px(44);
        @include omits(1);
    }
    .des {
        margin-top: px(10);
        font-size: px(40);
    }
    .price {
        font-size: px(40);
        color: #ff475f;
    }
    .num {
        font-size: px(36);
        color: #666;
        display: inline-block;
        width: px(300);
    }
}
.refund-info {
    padding: px(50) px(40) px(30);
    .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .tit {
        font-size: px(44);
        font-weight: 700;
        color: #666;
    }
    .money {
        font-size: px(48);
        color: #ff475f;
        font-weight: 700;
    }
}
.info-list {
    background-color: #fff;
    .item {
        padding: px(30) px(40);
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .radio {
        width: px(100);
        flex-shrink: 0;
        .radio-inp {
            transform: scale(0.8);
        }
    }
    .info {
        width: 100%;
        font-size: px(44);
    }
}
.difference {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #e9e9e9;
    color: #666;
    padding: px(20) px(10);
    font-size: px(38);
    .link {
        text-decoration: underline;
    }
}
</style>