shishichen
/
qimall


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
							<?php

use common\helpers\ComponentHelper;
use yii\helpers\Url;

try {
    $this->title  = \Yii::$app->services->setting->get('system.name');
} catch (Exception $exception) {
} ?>
<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="UTF-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
        <meta name="format-detection" content="telephone=no,email=no,address=no">
        <title><?= $this->title ? ($this->title . ' - ') : '' ?>商城管理</title>
        <link rel="stylesheet" href="<?= Yii::$app->request->baseUrl ?>/resources/unpkg/element-ui@2.15.14/lib/theme-chalk/index.css">
        <link href="<?= Yii::$app->request->baseUrl ?>/../favicon.ico" mce_href="<?= Yii::$app->request->baseUrl ?>/../favicon.ico" rel="shortcut icon" />
        <script src="<?= Yii::$app->request->baseUrl ?>/resources/unpkg/vue@2.6.10/dist/vue.js"></script>
        <script src="<?= Yii::$app->request->baseUrl ?>/resources/unpkg/qs@6.5.2/dist/qs.js"></script>
        <script src="<?= Yii::$app->request->baseUrl ?>/resources/unpkg/axios@0.18.0/dist/axios.min.js"></script>
        <script src="<?= Yii::$app->request->baseUrl ?>/resources/unpkg/element-ui@2.12.0/lib/index.js"></script>
        <!-- <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script> -->
        <script src="/resources/unpkg/clipboard@1.5.12/dist/clipboard.min.js"></script>
        <script>
            let _layout = null;
            let _aside = null;
            const _csrf = '<?= Yii::$app->request->csrfToken ?>';
            const _scriptUrl = '<?= Yii::$app->request->scriptUrl ?>';
            const _baseUrl = '<?= \Yii::$app->request->hostInfo . \Yii::$app->request->baseUrl ?>';
            const _requestRoute = '<?= Yii::$app->requestedRoute ?>';
        </script>
        <script src="<?= Yii::$app->request->baseUrl ?>/resources/js/common.js"></script>
    </head>

    <body>
        <div id="app" v-cloak>
            <div v-if="loginBoo">
                <el-form :rules="registerRules" :model="registerFrom" label-width="80px" ref="ruleForm">
                    <el-form-item label="手机号码" prop="username">
                        <el-input prefix-icon="el-icon-mobile-phone" placeholder="请输入手机号码" v-model="registerFrom.username" size="medium"></el-input>
                    </el-form-item>
                    <el-form-item label="验证码" prop="mobile_captcha">
                        <div class="ver_code">
                            <el-input prefix-icon="el-icon-chat-dot-square" placeholder="请输入验证码" v-model="registerFrom.mobile_captcha" size="medium"></el-input>
                            <el-button type="primary" size="mini" @click="getCode" :disabled="timeBoo">{{timeBoo?timeCount+'s':'获取验证码'}}</el-button>
                        </div>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="registerFrom.password" size="medium" show-password></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="confirm_password">
                        <el-input prefix-icon="el-icon-lock" placeholder="请再次输入密码" v-model="registerFrom.confirm_password" size="medium" show-password></el-input>
                    </el-form-item>
                    <el-form-item label="商城名称" prop="name">
                        <el-input prefix-icon="el-icon-house" placeholder="请输入商城名称" v-model="registerFrom.name" size="medium"></el-input>
                    </el-form-item>
                </el-form>
                <div style="text-align: center;">
                    <el-button class="sub-btn" type="primary" @click="addUser" :loading="lodding == 'sub'">注册</el-button>
                </div>
            </div>
            <div class="register-suc" v-else>
                <i class="register-suc-icon el-icon-success"></i>
                <div style="margin-bottom: 30px;">注册成功</div>
                <el-input style="margin-bottom: 30px;" placeholder="请输入内容" v-model="sucUrl"  :disabled="true"></el-input>
                <el-button class="sub-btn copy_btn" type="primary" @click="copyInput">复制链接</el-button>
            </div>
        </div>
    </body>

    <script>
        const app = new Vue({
            el: '#app',
            data() {
                var validateUserName = (rule, value, callback) => {
                    var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
                    if(!myreg.test(value)){
                        callback(new Error("请输入正确的手机号码"));
                    }
                    callback();
                }
                var validatePassword = (rule, value, callback) => {
                    let strVal = String(value);
                    if(strVal.length < 6 || strVal.length > 20){
                        callback(new Error("请输入6-20位密码"));
                    }
                    callback();
                }
                var validateMallName = (rule, value, callback) => {
                    let strVal = String(value);
                    if(strVal.length > 15){
                        callback(new Error("最多只能输入15位"));
                    }
                    callback();
                }
                return {
                    registerFrom: {
                        username: '',
                        mobile_captcha: '',
                        password: '',
                        confirm_password: '',
                        name: '',
                    },
                    getCodeTime: null,
                    registerRules: {
                        username: [
                            { required: true, message: '请输入手机号码', trigger: 'blur' },
                            { validator: validateUserName, trigger: 'change' },
                        ],
                        mobile_captcha: [
                            { required: true, message: '请输入验证码', trigger: 'blur' },
                        ],
                        password: [
                            { required: true, message: '请输入密码', trigger: 'blur' },
                            { validator: validatePassword, trigger: 'change' },
                            { validator: validatePassword, trigger: 'blur' },
                        ],
                        confirm_password: [
                            { required: true, message: '请再次输入密码', trigger: 'blur' },
                        ],
                        name: [
                            { required: true, message: '请输入商城名称', trigger: 'blur' },
                            { validator: validateMallName, trigger: 'change' },
                        ],
                    },
                    timeCount: 60,
                    timeBoo: false,
                    lodding: '',
                    loginBoo: true,
                    sucUrl: '',
                }
            },
            methods: {
                getCode(){
                    let that = this;
                    if(!this.registerFrom.username.length){
                        that.$message.warning("请输入手机号码");
                        return;
                    }
                    request({
                        params: {
                            r: 'admin/auth/register-sms-code'
                        },
                        method: 'post',
                        data: {
                            mobile: this.registerFrom.username
                        }
                    }).then(e => {
                        if (e.data.code == 0) {
                            this.timeBoo = true;
                            that.getCodeTime = setInterval(() => {
                            that.timeCount--;
                                if(that.timeCount == 0){
                                    clearInterval(that.getCodeTime);
                                    that.timeBoo = false;
                                    that.timeCount = 60
                                }
                            },1000)
                        } else {
                            that.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                },
                addUser(){
                    let that = this;
                    this.$refs['ruleForm'].validate((valid) => {
                        if (valid) {
                            that.lodding = 'sub';
                            request({
                                params: {
                                    r: 'admin/auth/register'
                                },
                                method: 'post',
                                data: this.registerFrom,
                            }).then(e => {
                                if (e.data.code == 0) {
                                    that.registerFrom = {
                                        username: '',
                                        mobile_captcha: '',
                                        password: '',
                                        confirm_password: '',
                                        name: '',
                                    }
                                    that.sucUrl = e.data.data.login_url;
                                    that.loginBoo = false;
                                    that.$message.success(e.data.msg);
                                } else {
                                    that.$message.error(e.data.msg);
                                }
                            }).catch(e => {
                                console.log(e);
                            }).finally(() => {
                                that.lodding = '';
                            })
                        } else {
                            return false;
                        }
                    });
                },
                copyInput(){
                    let src = this.sucUrl
                    var clipboard = new Clipboard('.copy_btn', {
                        text: function() {
                            return src;
                        }
                    });
                    var self = this;
                    clipboard.on('success', function(e) {
                        // console.log("success")
                        self.$message.success('复制成功');
                        e.clearSelection();
                        clipboard.destroy()
                    });
                    clipboard.on('error', function(e) {
                        // console.log("error")
                        self.$message.error('复制失败，请手动复制');
                    });
                }
            }
        })
    </script>
    <style>
        .ver_code{
            display: flex;
        }

        .ver_code button{
            margin-left: 10px;
        }

        .sub-btn{
            width: 80%;
            border-radius: 40px;
        }

        .register-suc-icon{
            font-size: 90px;
            color: #34CB0F;
        }

        .register-suc{
            text-align: center;
            margin-top: 40px;
            font-size: 22px;
        }
    </style>
</html>