football/pages/order/refund/refund.vue

<template>
    <app-layout>
        <view v-if="is_show" class="refund-box">
            <view class='goods-box'>
                <app-jump-button :url="`/pages/goods/goods?id=${refundDetail.goods_id}`">
                    <app-order-goods-info style="width:100%;" :goods='refundDetail.goods_info'></app-order-goods-info>
                </app-jump-button>
            </view>

            <view class='tab-box' v-if="switchBool">
                <app-switch-tab :currentIndex="type" :list='tabList' @tabEvent='tabClick'></app-switch-tab>
            </view>
            <form class='form-box'>
                <view class='dir-left-nowrap remark-box'>
                    <view class='box-grow-0 label'>
                        {{type == 0 ? '退款' : '换货'}}原因
                    </view>
                    <view class='box-grow-1'>
                        <app-textarea
                                padding-y="0"
                                padding-x="20"
                                v-model="remark"
                                font-size="32"
                                :show-border="false"
                                :placeholder="`请输入${type == 0 ? '退款' : '换货'}原因`">
                        </app-textarea>
                    </view>
                </view>
                <block v-if='type == 0'>
                    <view class='dir-left-nowrap price-box'>
                        <view>退款金额</view>
                        <input v-model="refund_price" name='refund_price'
                               placeholder-style="color:#aaa"
                               :placeholder="`最多可退款${refundDetail.refund_price}`" class='price'/>
                    </view>
                </block>
                <view class='image-box'>
                    <view class="label">上传凭证</view>
                    <app-upload-image
                            backgroundColor="#fff"
                            @imageEvent='imageEvent'
                            :maxNum='maxNum'>
                    </app-upload-image>
                </view>
                <view>
                    <app-jump-button>
                        <view @click="formSubmit" class="btn main-center cross-center">提交</view>
                    </app-jump-button>
                </view>
            </form>
        </view>
    </app-layout>
</template>

<script>
    import appSwitchTab from "../../../components/basic-component/app-switch-tab/app-switch-tab.vue";
    import appOrderGoodsInfo from "../../../components/page-component/app-order-goods-info/app-order-goods-info.vue";
    import appUploadImage from "../../../components/basic-component/app-upload-image/app-upload-image.vue";
    import appTextarea from "../../../components/basic-component/app-textarea/app-textarea.vue";

    export default {
        components: {
            "app-textarea": appTextarea,
            "app-order-goods-info": appOrderGoodsInfo,
            "app-switch-tab": appSwitchTab,
            'app-upload-image': appUploadImage
        },
        data() {
            return {
                id: 0,
                refundDetail: {},
                tabList: [
                    {
                        'name': '退货退款'
                    },
                    {
                        'name': '换货'
                    },
                ],
                type: 0, // 售后类型
                maxNum: 6, // 图片上传最大数量
                imageList: [],
                is_show: false,
	            switchBool: true,
            }
        },
        methods: {
            tabClick(e) {
                this.type = e.currentIndex;
            },
            getRefundDetail() {
                let self = this;
                self.$showLoading();
                self.$request({
                    url: this.$api.order.apply_refund,
                    data: {
                        id: self.id,
                    }
                }).then(response => {
                    self.$hideLoading();
                    self.is_show = true;
                    if (response.code === 0) {
                        self.refundDetail = response.data.detail;
                    } else {
                        uni.showModal({
                            title: '',
                            content: response.msg,
                            showCancel: false,
                        });
                    }
                }).catch(() => {
                    self.$hideLoading();
                });
            },
            formSubmit() {
                let self = this;
                this.$subscribe(this.refundDetail.template_message_list).then(response => {
                    self.submitAction();
                }).catch(res => {
                    self.submitAction();
                });
            },
            submitAction() {
                let self = this;
                if (!self.remark) {
                    let text = self.type == 0 ? '退款' : '换货';
                    uni.showModal({
                        title: '',
                        content: '请填写' + text + '原因',
                        showCancel: false,
                    });
                    return;
                }
                let refundPrice = self.type == 0 ? self.refund_price : 0;
                if (self.type == 0 && !refundPrice || refundPrice < 0) {
                    uni.showModal({
                        title: '',
                        content: '请填写退款金额',
                        showCancel: false,
                    });
                    return;
                }

                uni.showLoading({
                    title: '提交中'
                });
                self.$request({
                    url: self.$api.order.refund_submit,
                    method: "post",
                    data: {
                        id: self.id,
                        type: self.type + 1,
                        pic_list: JSON.stringify(self.imageList),
                        refund_price: refundPrice,
                        remark: this.remark,
                    },
                }).then(response => {
                    uni.hideLoading();
                    if (response.code === 0) {
                        uni.redirectTo({
                            url: '/pages/order/refund/index'
                        })
                    } else {
                        uni.showModal({
                            title: '',
                            content: response.msg,
                            showCancel: false,
                        });
                    }
                }).catch(() => {
                    uni.hideLoading();
                });
            },
            imageEvent(e) {
                this.imageList = e.imageList
            }
        },
        onLoad(options) {
            this.id = options.id;
            if (options.sign === 'gift') {
                this.type = 1;
                this.switchBool = false;
            }
            this.getRefundDetail();
        },
    }
</script>

<style lang="scss" scoped>
    .refund-box {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .goods-box {
        padding: 30#{rpx} 24#{rpx};
        border-top: 1#{rpx} solid #e3e3e3;
        background-color: #fff;
        margin-bottom: 20#{rpx};
    }

    .form-box .btn {
        background-color: #ff4544;
        color: #fff;
        margin-top: 100#{rpx};
        width: 90%;
        border-radius: 46#{rpx};
        height: 92#{rpx};
    }

    .form-box .remark-box {
        background-color: #fff;
        margin-top: 20#{rpx};
        padding: 20#{rpx};
    }

    .form-box .price-box {
        background-color: #fff;
        padding: 30#{rpx} 20#{rpx};
        margin-top: 20#{rpx};
    }

    .form-box .price-box .price {
        color: #ff4544;
        margin-left: 20#{rpx};
    }

    .form-box .image-box {
        padding: 20#{rpx};
        background-color: #fff;
        margin-top: 20#{rpx};

        .label {
            margin-bottom: 20#{rpx};
            color: $uni-important-color-black;
            font-size: $uni-font-size-general-one;
        }
    }
</style>