glhcp/pc/pages/user/after_sales/apply_sale.vue

<template>
    <div class="apply-sale-list">
        <div class="goods-info">
            <div class="table-head flex">
                <div class="info">商品信息</div>
                <div class="price flex row-center">单价</div>
                <div class="num flex row-center">数量</div>
                <div class="sum flex row-center">合计</div>
                <div class="act-pay flex row-center">实付</div>
            </div>
            <div class="table-content flex m-t-10">
                <div class="info flex">
                    <div class="flex">
                        <el-image style="width: 72px;height: 72px; flex: none" :src="goods.image" />
                        <div class="m-l-10" style="flex: 1; align-self: flex-start">
                            <div class="line2">{{goods.goods_name}}</div>
                            <div class="mt10 muted sm">{{goods.spec_value}}</div>
                        </div>
                    </div>
                </div>
                <div class="price flex row-center" style="align-self: flex-start">
                    <price-formate :price="goods.goods_price" />
                </div>
                <div class="num flex row-center" style="align-self: flex-start">
                    {{goods.goods_num}}
                </div>
                <div class="sum flex row-center" style="align-self: flex-start">
                    <price-formate :price="goods.total_price" />
                </div>
                <div class="act-pay flex row-center" style="align-self: flex-start">
                    <price-formate :price="goods.total_pay_price" />
                </div>
            </div>
        </div>
        <div class="apply-form">
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="退款类型：" prop="applyType">
                    <el-radio-group v-model="applyType" @change="applyRadioChange">
                        <el-radio label="仅退款"></el-radio>
                        <el-radio label="退货退款"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="退款原因：" prop="reason">
                    <el-select v-model="form.reason" placeholder="请选择">
                        <el-option :label="item" :value="item" v-for="(item, index) in reason" :key="index" />
                    </el-select>
                </el-form-item>
                <el-form-item label="退款说明：" prop="desc">
                    <el-input style="width: 600px" type="textarea" v-model="form.desc" placeholder="退款说明（200字以内）"
                        maxlength="200" show-word-limit resize="none" rows="5" />
                </el-form-item>
                <el-form-item>
                    <upload isSlot :file-list="fileList" @remove="uploadSuccess" @success="uploadSuccess" :limit="3">
                        <div class="" style="height: 100%">
                            <i class="el-icon-camera xs" style="font-size: 24px" />
                        </div>
                    </upload>
                    <div class="xs muted">最多可上传3张图片，支持jpg、png格式，图片大小1M以内</div>
                </el-form-item>
                <el-form-item>
                    <div class="flex">
                        <el-button type="primary" @click="onSubmit">提交申请</el-button>
                        <div class="m-l-20">
                            退款金额：<span class="primary">¥{{goods.total_price}}</span>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    head() {
        return {
            title: this.$store.getters.headTitle,
            link: [
                {
                    rel: "icon",
                    type: "image/x-icon",
                    href: this.$store.getters.favicon,
                },
            ],
        };
    },
    layout: "user",
    name: "applySale",
    async asyncData({ $get, $post, query }) {
        let goods = {};
        let reason = [];
        let res = await $get("after_sale/goodsInfo", {
            params: {
                order_id: query.order_id,
                item_id: query.item_id,
            },
        });
        if (res.code == 1) {
            goods = res.data.goods;
            reason = res.data.reason;
        }
        return {
            reason,
            goods,
        };
    },
    data() {
        return {
            applyType: "仅退款",
            form: {
                applyType: 0,
                reason: "",
                desc: "",
            },
            rules: {
                applyType: [{ required: true, message: "请选择退款类型" }],
                reason: [
                    {
                        required: true,
                        message: "请选择退款原因",
                        triggle: "blur",
                    },
                ],
            },
            fileList: [],
        };
    },
    methods: {
        applyRadioChange(value) {
            value == "仅退款"
                ? (this.form.applyType = 0)
                : (this.form.applyType = 1);
        },

        onSubmit(e) {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (this.$route.query.afterSaleId) {
                        this.applyAgainFun();
                    } else {
                        this.$applyAfterSale();
                    }
                } else {
                    return false;
                }
            });
        },

        onUploadChange(e) {
            let fileList = Object.assign([], this.fileList);
            fileList.push(e);
            this.fileList = fileList;
            console.log("onChange", e, " fileList:", this.fileList);
        },

        uploadSuccess(e) {
            this.fileList = e.map((item) => item.response.data.uri);
        },

        // 重新申请
        async $applyAgain() {
            const data = {
                id: this.$route.query.afterSaleId,
                reason: this.form.reason,
                refund_type: this.form.applyType,
                remark: this.form.desc,
                img: fileList.length <= 0 ? "" : this.fileList[0],
            };
            let res = await $post("after_sale/again", data);
            if (res.code == 1) {
                this.$message({
                    message: "提交成功",
                    type: "success",
                });
                this.$router.push(
                    "/user/after_sales/apply_result?afterSaleId=" +
                        res.data.after_sale_id
                );
            }
        },

        // 初次申请售后
        async $applyAfterSale() {
            console.log(this.fileList[0])
            const data = {
                item_id: this.$route.query.item_id,
                order_id: this.$route.query.order_id,
                reason: this.form.reason,
                refund_type: this.form.applyType,
                remark: this.form.desc,
                // 目前只支持单个
                img: this.fileList[0],
            };
            let res = await this.$post("after_sale/add", data);
            if (res.code == 1) {
                this.$message({
                    message: "提交成功",
                    type: "success",
                });
                this.$router.push(
                    "/user/after_sales/apply_result?afterSaleId=" +
                        res.data.after_sale_id
                );
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.apply-sale-list {
    padding: 10px;
    .goods-info {
        .table-head {
            padding: 10px 20px;
            border-bottom: 1px solid #e5e5e5;
        }
        .table-content {
            padding: 10px 20px;
            border-bottom: 1px solid #e5e5e5;
        }
        .info {
            width: 500px;
        }
        .price {
            width: 100px;
        }
        .num {
            width: 100px;
        }
        .sum {
            width: 100px;
        }
        .act-pay {
            width: 100px;
        }
    }
    .apply-form {
        margin-top: 24px;
    }
}
</style>