qimall/backend/modules/mall/views/set-mobile/index.php

<div id="app" v-cloak>
    <el-card class="box-card" shadow="never" style="border:0;min-width: 1250px;"
             body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <span style="color: #409EFF;cursor: pointer"
                          @click="$navigate({r:'mall/set-mobile/index'})">设置</span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>修改登录手机号</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="form-body" style="padding: 20px 45% 0 10px">
            <el-form :model="ruleForm" size="small" ref="ruleForm" label-width="160px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item :label="ruleForm.login.old_mobile.title">
                            <el-col :span="6">
                                <el-input v-model="ruleForm.login.old_mobile.value" disabled='disabled'></el-input>
                                <div class="tips-text" v-if="ruleForm.login.old_mobile.remark">
                                    {{ruleForm.login.old_mobile.remark}}
                                </div>
                            </el-col>
                        </el-form-item>

                        <el-form-item :label="ruleForm.login.old_mobile.code_title">
                            <el-col :span="6" style="display:flex">
                                <el-input v-model="ruleForm.login.old_mobile.verify_code"
                                          style="margin-right:10px;"></el-input>
                                <el-button @click="getVerificationCode('old')" :disabled="is_disabled_old">获取验证码
                                </el-button>
                            </el-col>
                        </el-form-item>
                        <el-form-item :label="ruleForm.login.new_mobile.title">
                            <el-col :span="6">
                                <el-input v-model="ruleForm.login.new_mobile.value"></el-input>
                                <div class="tips-text" v-if="ruleForm.login.new_mobile.remark">
                                    {{ruleForm.login.new_mobile.remark}}
                                </div>
                            </el-col>
                        </el-form-item>
                        <el-form-item :label="ruleForm.login.new_mobile.code_title">
                            <el-col :span="6" style="display:flex">
                                <el-input v-model="ruleForm.login.new_mobile.verify_code"
                                          style="margin-right:10px;"></el-input>
                                <el-button @click="getVerificationCode('new')" :disabled="is_disabled_new">获取验证码
                                </el-button>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="开启短信登录">
                            <el-col :span="14">
                                <el-switch :disabled="!is_super" v-model="ruleForm.login.open_sms_login.value" :active-value="1"
                                           :inactive-value="0"></el-switch>
                            </el-col>
                        </el-form-item>
                        <el-form-item>
                            <div class="tips-text">开启短信验证码登录，需要开启短信服务，请在"设置->商城设置->短信提醒"中开启短信服务,及在"设置->员工管理->员工列表"确认账户已经填写了手机号码。</div>
                        </el-form-item>
                        <el-form-item>
                        <el-button :loading="btnLoading" class="button-item" type="primary" style="margin-top: 24px;" @click="submit" size="small">保存
                        </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </el-card>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                mall_id: <?= $mall_id ?>,
                is_super: <?=$is_super ?>,
                is_disabled_old:false,
                is_disabled_new:false,
                btnLoading:false,
                ruleForm: {
                    login: {
                        old_mobile:{title:"旧手机号",value:'',remark:"",code_title:"手机验证码",verify_code:""},
                        new_mobile:{title:"新手机号",value:'',remark:"",code_title:"手机验证码",verify_code:""},
                        open_sms_login:{value:0},
                    }
                }
            }
        },
        mounted() {
            this.loadData()
        },
        methods: {
            getVerificationCode(type) {
                let mobile = ''
                if(type == 'old'){
                    mobile = this.ruleForm.login.old_mobile.value
                    this.setDisabled(type,true)
                }
                if(type == 'new'){
                    mobile = this.ruleForm.login.new_mobile.value
                    this.setDisabled(type,true)
                }

                if(!mobile){
                    this.$message.error('请填写手机号再获取验证码');
                    return
                }

                request({
                    params: {
                        r: 'common/sms/send',
                    },
                    method: 'post',
                    data: {
                        mobile : mobile,
                        sms_type : 'EditAdminMobile',
                        valid_time : 60,
                        mall_id : this.mall_id
                    }

                }).then(e => {
                    this.setDisabled(type,false)
                    if (e.data.code == 0) {
                        this.$message.success(e.data.msg+'，验证码已发送到：'+mobile);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {

                });
            },
            loadData() {
                if(this.loading === true) return;
                this.loading = true;
                request({
                    params: {
                        r: 'mall/set-mobile/index'
                    },
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        if(e.data.data) {//有选中的
                            let data = e.data.data
                            this.mall_sign = data.mall_sign;
                            Object.keys(this.ruleForm).forEach((key) => {
                                Object.keys(this.ruleForm[key]).forEach((k) => {
                                    if (!isEmpty(data[key][k])) {
                                        var dataValue = data[key][k].value;
                                        if(data[key][k].value!==null&&data[key][k].value!==""){
                                            if (typeof dataValue == 'string' && (dataValue.indexOf("{") !== -1 || dataValue.indexOf("[") !== -1)) {
                                                // 将json字符串转为对象
                                                this.ruleForm[key][k].value = JSON.parse(data[key][k].value);
                                            }else{
                                                this.ruleForm[key][k].value = data[key][k].value;
                                            }
                                        }
                                    }
                                });
                            });
                        }
                    }
                }).catch(e => {
                    this.loading = false;
                })
            },
            submit() {
                let InitDataPara = {}
                // 对象深拷贝
                InitDataPara = JSON.parse(JSON.stringify(this.ruleForm));

                this.btnLoading = true;
                this.$request({
                    params: {
                        r: 'mall/set-mobile/index',
                    },
                    method: 'post',
                    data: {
                        setting: InitDataPara,
                    },
                }).then(e => {
                    this.btnLoading = false;
                    if (e.data.code === 0) {
                        this.$message.success(e.data.msg);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.btnLoading = false;
                });
            },
            setDisabled(type,disabled){
                if(type == 'old'){
                    this.is_disabled_old = disabled
                }
                if(type == 'new'){
                    this.is_disabled_new = disabled
                }
            },
        }
    })
    </script>