qimall/addons/Alitopay/backend/views/apply/index.php

<div id="app" v-cloak>
	<el-card shadow="never" style="border:0;min-width: 1000px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
		<div slot="header">
			<span>配置</span>
		</div>
        <div class="form_box" style="background: #ffffff;padding: 10px 30px;">
            <el-steps :active="active" :finish-status="result">
                <el-step :title="step_title"></el-step>
                <el-step title="授权"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>

            <el-form v-if="active <= 1" ref="elForm" :disabled="disabled" :model="formData" :rules="rules" size="medium" label-width="100px" style="padding-top: 20px">
                <el-form-item label="应用ID" prop="alipay_app_id">
                    <el-input v-model="formData.alipay_app_id" placeholder="请输入支付宝应用ID" clearable :style="{width: '100%'}">
                    </el-input>
                </el-form-item>
                <el-form-item label="公司名称" prop="company">
                    <el-input v-model="formData.company" placeholder="请输入公司名称" clearable :style="{width: '100%'}"></el-input>
                </el-form-item>
                <el-form-item label="联系人" prop="contacts">
                    <el-input v-model="formData.contacts" placeholder="请输入联系人" clearable :style="{width: '100%'}"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="formData.phone" placeholder="请输入联系电话" clearable :style="{width: '100%'}"></el-input>
                </el-form-item>

                <el-form-item label="状态" prop="phone" v-if="formData.status > 0">
                    <span v-if="formData.status == 1" style="font-size: 18px">审核中</span>
                    <span v-if="formData.status == 2" style="font-size: 18px">审核成功</span>
                    <span v-if="formData.status == 3" style="font-size: 18px;color: red">审核失败：{{formData.reason}}</span>
                </el-form-item>


                <el-form-item size="large">
                    <el-button
                            :loading="submitLoading"
                            class="button-item"
                            size="small"
                            type="primary"
                            @click="submitForm">提交
                    </el-button>
                </el-form-item>
            </el-form>

            <el-row v-if="active == 2" style="text-align:center">
                <img width="10%" src="https://pre.shuzixiangdao.com/web/uploads/images/thumbs/20211113/委托授权-1636797588887.png"/>
                <div>
                    <div style="font-size: 18px;padding: 10px">审核通过</div>
                    <a style="font-size: 18px" :href="formData.auth_url" target="_blank">点击前往授权</a>
                </div>
            </el-row>

            <el-row v-if="active == 3" style="font-size: 18px;font-weight: 600;padding-top: 15px">
                <el-row style="padding: 5px 0">
                    <el-col :span="2"><div class="grid-content bg-purple">应用ID</div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple">{{formData.alipay_app_id}}</div></el-col>
                </el-row>
                <el-row style="padding: 5px 0">
                    <el-col :span="2"><div class="grid-content bg-purple">公司名称</div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple">{{formData.company}}</div></el-col>
                </el-row>
                <el-row style="padding: 5px 0">
                    <el-col :span="2"><div class="grid-content bg-purple">联系人</div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple">{{formData.contacts}}</div></el-col>
                </el-row>
                <el-row style="padding: 5px 0">
                    <el-col :span="2"><div class="grid-content bg-purple">联系方式</div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple">{{formData.phone}}</div></el-col>
                </el-row>
                <hr>

                <el-row style="padding: 5px 0">
                    <el-col :span="2"><div class="grid-content bg-purple">状态</div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple">{{formData.statusText}}</div></el-col>
                </el-row>
                <el-row style="padding: 5px 0">
                    <el-col :span="2"><div class="grid-content bg-purple">授权状态</div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple">{{formData.authStatusText}}</div></el-col>
                </el-row>
                <el-row style="padding: 5px 0">
                    <el-col :span="2"><div class="grid-content bg-purple">授权时间</div></el-col>
                    <el-col :span="8"><div class="grid-content bg-purple">{{formData.auth_time|dateTimeFormat('Y-m-d H:i:s')}}</div></el-col>
                </el-row>
            </el-row>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                active: 0,
                result: 'success',
                disabled: false,
                step_title: '申请',
                submitLoading: false,
                formData: {
                    alipay_app_id: undefined,
                    company: undefined,
                    contacts: undefined,
                    phone: undefined,
                },
                rules: {
                    alipay_app_id: [{
                        required: true,
                        message: '请输入支付宝应用ID',
                        trigger: 'blur'
                    }],
                    company: [{
                        required: true,
                        message: '请输入公司名称',
                        trigger: 'blur'
                    }],
                    contacts: [{
                        required: true,
                        message: '请输入联系人',
                        trigger: 'blur'
                    }],
                    phone: [{
                        required: true,
                        message: '请输入联系电话',
                        trigger: 'blur'
                    }],
                },
            };
        },
        created() {
            this.getConfig();
        },
        methods: {
            next() {
                if (this.active++ > 2) this.active = 0;
            },
            submitForm() {
                this.$refs['elForm'].validate(valid => {
                    // TODO 提交表单
                    if (valid) {
                        this.submitLoading = true;
                        this.formData.active = this.active;
                        request({
                            params: {
                                r: 'alitopay/apply/edit',
                            },
                            method: 'post',
                            data: this.formData,
                        }).then(e => {
                            this.submitLoading = false;
                            if (e.data.code === 0) {
                                this.$message.success(e.data.msg);
                                this.getConfig();
                            } else {
                                this.$message.error(e.data.msg);
                            }
                        }).catch(e => {
                            this.submitLoading = false;
                        });
                    } else {
                        this.$message.error('部分参数验证不通过');
                    }
                })
            },
            resetForm() {
                this.$refs['elForm'].resetFields()
            },
            getConfig(){
                this.submitLoading = true;
                request({
                    params: {
                        r: 'alitopay/apply/index',
                    },
                    method: 'get',
                }).then(e => {
                    this.submitLoading = false;
                    if (e.data.code === 0) {
                        let data = e.data.data;

                        console.log(data);
                        this.formData = data;

                        if(data.status == 1){
                            // 申请中
                            this.disabled = true
                            this.active = 1;
                            this.result = 'success';
                            this.step_title = '审核中';
                        }
                        if(data.status == 3){
                            // 申请失败
                            this.active = 1;
                            this.result = 'error';
                            this.step_title = '审核失败';
                        }
                        // 授权
                        if(data.status == 2 && data.auth_status == 1){
                            //授权中
                            this.active = 2;
                        }

                        if(data.status == 2 && data.auth_status == 2){
                            //授权中
                            this.active = 3;
                        }

                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.submitLoading = false;
                });
            }
        }
    })
</script>