jjx-web/pages/order/components/makePay.vue

<template>
    <view>
        <div class="font-bold">
            <span>订单编号: {{ orderInfo.orderNo }}</span>
            <span class="ml-20 text-main" v-if="orderInfo.orderStatus > 1">(已发货)</span>
        </div>
        <div class="font-bold my-25">订单总额: {{ orderInfo.amount }}元</div>
        <div class="text-main text-25 my-25" style="line-height: 1.9;">
            <p>情况1、如遇有大额多车次，多批次交易，应涉及进度款，如100万合同，前期到两车，可以申请进度款；</p>
            <p>情况2、如果单次可一次性送达则实行全款。</p>
            <p>情况3、如为定制产品，双方协商可给协商比例的进度款。</p>
            <p>情况4、有可能有剩余款项，交易完成可申请平台退款。</p>
            <p>情况5、有可能实际发货量大于订货量，货款不足。</p>
        </div>
        <el-form ref="form" label-width="80px">
            <el-form-item label="支付类型" required >
                <el-select v-model="payInfo.type" @change="changeType">
                    <el-option
                        v-for="item in payTypeList"
                        :key="item"
                        :label="item"
                        :value="item"
                        :disabled="isPayTypeDisabled(item)"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="payInfo.type" required>
                <el-input v-model="payInfo.amount" placeholder="请输入金额"/>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="payInfo.remark"/>
            </el-form-item>
            <el-form-item label="凭证">
                <vk-data-upload v-model="payInfo.photos"></vk-data-upload>
            </el-form-item>
            <el-form-item label="附件">
                <vk-data-upload v-model="payInfo.ext"></vk-data-upload>
            </el-form-item>
        </el-form>
        <el-row>
            <el-col :span="24" class="text-center">
                <el-button type="primary" size="mini" @click="setPayList">提交</el-button>
                <el-button type="warning" size="mini" @click="close">取消
                </el-button>
            </el-col>
        </el-row>
    </view>
</template>

<script>
export default {
    name: "makePay",
    props: {
        info: {
            type: Object,
            default: () => {
                return {}
            }
        },
        payTypeList: {
            type: Array,
            default: () => {
                return []
            }
        },

    },
    data() {
        return {
            payInfo: {
                orderId: this.info._id,
                amount: null,
                type: null,
                remark: '',
                buyerRemark: '',
                photos: [],
                payerUid: null,
                hasPaid: false,
                paidVoucher: '',
                paidAt: '',
                sellerConfirm: false,
                confirmAt: '',
                buyerUid: this.info.uid,
                sellerUid: this.info.sellerUid,
                status: 0,
                buyerRefuse: false,
                refuseReason: null,
                buyerPhotos: [],
                expressPhoto: [],
                isExpress: false,
                expressName: null,
                expressNo: null,
                ext: [],
            },
            orderInfo: {
                payStatus: 0
            }
        }
    },
    methods: {
        close() {
            this.$emit("close")
        },
        async getOrderInfo() {
            this.orderInfo = await vk.callFunction({
                url: 'client/order/kh/getInfo',
                data: {
                    id: this.info._id
                }
            })
        },
        async setPayList() {
            if (!this.payInfo.type) return this.$message({
                type: 'error',
                message: '请选择支付类型'
            })
            if (!this.payInfo.amount) return this.$message({
                type: 'error',
                message: '请输入支付金额'
            })
            await vk.callFunction({
                url: 'client/order/kh/makePay',
                title: '请求中...',
                data: {payInfo: this.payInfo}
            })
            this.$message({
                type: 'success',
                message: '支付单创建成功'
            })
            this.close()
        },
        changeType() {
            if (['尾款', '全款'].includes(this.payInfo.type)) {
                this.$confirm(
                    '选择尾款或全款支付申请，均代表本次交易已完结，对应本次交易最终货款的结算完成。提交申请后，系统无法再次发起付款申请；若发生误申请情形，仅可通过交易双方协商线下渠道协商办理支付，请您谨慎选择。',
                    '重要提示',
                    {
                        confirmButtonText: '确认为最终结算',
                        showCancelButton: false,
                        type: 'warning'
                    }
                )
            }
        },
        isNotaryPaidOrder() {
            return Number(this.orderInfo.signMethod) === 0
                && Number(this.orderInfo.type) > 3
                && Number(this.orderInfo.notaryPayStatus) === 1
        },
        isPayTypeDisabled(item) {
            if (this.isNotaryPaidOrder()) return false
            return (!['预付款', '全款'].includes(item) && this.orderInfo.payStatus === 0)
                || (['预付款', '全款'].includes(item) && this.orderInfo.payStatus > 0)
        }
    },
    mounted() {
        this.getOrderInfo()
    }
}
</script>