qimall/addons/Store/client/views/merchant/setting.php

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div class="flex flex-x-between flex-y-center">
                <span>商户号设置</span>
            </div>
        </div>
    </el-card>

    <div class="content">
        <el-form
            :model="formData"
            ref="elForm"
            label-width="180px"
            style="position: relative"
            size="small"
            :rules="rules"
        >
            <el-row>
                <el-col :span="24">
                    <div class="form-body">
                        <!-- 银典分账 -->
                        <div class="title padding-top">
                            <span class="title-line"></span>
                            <span>银典分账</span>
                        </div>
                        <el-col :span="24">
                            <!-- 分账账户申请链接 -->
                            <el-form-item label="分账账户申请链接">
                                <div class="link">
                                    <el-input :disabled="true" v-model="link"></el-input>
                                    <span @click="jump">打开链接</span>
                                </div>
                                <span class="tip">
                                    此链接用作申请银典子商户号，子商户号用作接收用户货款，请您务必进行账号申请；
                                    进行账号申请后，请将申请的商户编号填入下方，为确保交易无误，请确保填入的商户编号无误！否则因为填写错误造成的损失将由您自行承担！
                                </span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <!-- 商户编号 -->
                            <el-form-item label="商户编号" prop="mcht_cd">
                                <el-input v-model="formData.mcht_cd"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="24">
                            <!-- 银行卡账户 -->
                            <el-form-item label="银行卡账户" prop="bank_account">
                                <el-input v-model="formData.bank_account"></el-input>
                                <span class="tip">
                                    用于快速到账，银行卡账户账号必须是和商户编号对应的账号，如填写错误会导致无法快速到账
                                </span>
                            </el-form-item>
                        </el-col>

                        <el-col :span="24">
                            <!-- 账户名称 -->
                            <el-form-item label="账户名称" prop="name">
                                <el-input v-model="formData.name"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="24">
                            <!-- 账户名称 -->
                            <el-form-item label="账户类型" prop="bank_account_type">
                                <el-radio-group v-model="formData.bank_account_type">
                                    <el-radio :label="1">对私</el-radio>
                                    <el-radio :label="2">对公</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>

                        <div></div>
                        <el-col :span="24">
                            <el-form-item size="large">
                                <el-button type="primary" size="small" @click="submitForm">提交</el-button>
                                <el-button size="small" @click="resetForm">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </div>
</div>

<script>
const app = new Vue({
    el: '#app',
    data() {
        return {
            rules: {
                mcht_cd: [
                    {
                        required: true,
                        message: '商户编号不能为空'
                    }
                ],
                bank_account: [
                    {
                        required: true,
                        message: '银行卡账户不能为空'
                    }
                ],
                name: [
                    {
                        required: true,
                        message: '账户名称不能为空'
                    }
                ],
                bank_account_type: [
                    {
                        required: true,
                        message: '请选择账户类型'
                    }
                ],
            },
            formData: {
                mcht_cd: '',
                bank_account: '',
                name: '',
                bank_account_type: 1,
            },
            link: '',
        }
    },
    methods: {
        jump() {
            this.link && window.open(this.link)
        },
        readConfig() {
            request({
                params: {
                    r: 'store/client/merchant/setting',
                },
                method: 'get',
            }).then(e => {
                this.submitLoading = false
                if (e.data.code === 0 && e.data.data) {
                    this.formData   = e.data.data.setting
                    this.link       = e.data.data.link
                    this.formData.bank_account_type = parseInt(this.formData.bank_account_type)
                }
            }).catch(e => {
            })
        },
        resetForm() {
            this.$refs['elForm'].resetFields()
        },
        submitForm() {
            this.$refs['elForm'].validate(valid => {
                if (valid) {
                    this.submitLoading = true;
                    request({
                        params: {
                            r: 'store/client/merchant/save-setting',
                        },
                        method: 'post',
                        data: this.formData,
                    }).then(e => {
                        this.submitLoading = false
                        if (e.data.code === 0) {
                            this.$message.success(e.data.msg)
                        } else {
                            this.$message.error(e.data.msg)
                        }
                    }).catch(e => {
                    })
                } else {
                    this.$message.error('部分参数验证不通过')
                }
            })
        },
    },
    created() {
        this.readConfig()
    },
})
</script>

<style>
    .form-body {
        padding-bottom: 5px;
        display: flex;
        flex-direction: column;
    }
    
    .title {
        display: flex;
        align-items: center;
        padding: 18px 20px;
        /* border-top: 1px solid #F3F3F3; */
        border-bottom: 1px solid #F3F3F3;
        background-color: #fff;
    }

    .title-line {
        width: 4px;
        height: 20px;
        background-color: #1479F0;
        margin-right: 10px;
    }

    .padding-top {
        margin-bottom: 10px;
    }

    .tip {
        color: #c72a29;
    }

    .link {
        display: flex;
    }

    .link span {
        cursor: pointer;
        color: #5eaae9;
        text-align: center;
        width: 100px;
    }
</style>