mashangyoujiu/Application/Vip/View/Set/changepersonal2.html

<!doctype html>
<html lang="en">
<!--[1.1.51]-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人设置</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="__PUBLIC__/css/css-comment.css">
    <script src="__PUBLIC__/rem/js/rem.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/vip/css/templateA/settings.css">
    <style type="text/css">
        #app {
            box-sizing: border-box;
            padding: 20px;
        }

        .subset {
            width: 100%;
            background: #6FA1FB;
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
<div id="app" v-cloak>
    <form action="##">
        <div style="box-sizing: border-box; padding: 0px 10px; background: white; border-radius: 6px;">
            <div class="form-item">
                <label class="form-label">昵称：</label>
                <div class="form-input-block">
                    <input class="form-input" type="text" v-model='username' placeholder="用户昵称">
                </div>
            </div>
            <div class="form-item">
                <label class="form-label">姓名：</label>
                <div class="form-input-block">
                    <input class="form-input" type="text" v-model='fullName' placeholder="输入您的姓名">
                </div>
            </div>
            <div class="form-item">
                <label class="form-label">性别：</label>
                <div class="form-input-block">
                    <select class="form-input" v-model='sex' @change='changeSex'>
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
                </div>
            </div>
            <div class="form-item">
                <label class="form-label">电话：</label>
                <div class="form-input-block">
                    <input class="form-input" disabled type="number" maxlength="11" v-model='phone'
                           placeholder="输入您的电话">
                </div>
            </div>
            <div class="form-item BirthdayIcon">
                <label class="form-label">生日：</label>
                <div class="form-input-block">
                    <div class="block">
                        <el-date-picker class='form-input' value-format="yyyy-MM-dd" prefix-icon='none'
                                        v-model="Birthday" type="date" placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-btn">
            <button type="button" class="subset" @click='subset'>提交</button>
        </div>
    </form>

</div>
</body>
<script src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
<script src="__PUBLIC__/vip/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            username: "{$vip['nickname']}",
            fullName: "{$vip['name']}",
            sex: "{$vip['sex']}" == 1 ? 1 : "{$vip['sex']}" == 2 ? 2 : 0,
            phone: "{$vip['mobile_phone']}",
            Birthday: "{$vip['birthday']}"
        },
        created: function () {
        },
        methods: {
            changeSex: function () {
                console.log(this.sex)
            },
            subset: function (e) {
                console.log(this.Birthday)
                if (!this.username) {
                    this.$message({
                        message: '昵称不能为空',
                        duration: 1500,
                        customClass: 'tip'
                    });
                } else if (!this.fullName) {
                    this.$message({
                        message: '姓名不能为空',
                        duration: 1500,
                        customClass: 'tip'
                    });
                } else if (!this.call(this.phone)) {
                    this.$message({
                        message: '手机号码输入有误',
                        duration: 1500,
                        customClass: 'tip'
                    });
                } else {
                    this.submitSet();
                }
                e.preventDefault();

            },
            call: function (phone) {
                var re = /^1(3|4|5|7|8)\d{9}$/;
                return re.test(phone);
            },

            submitSet: function () {
                var that = this;
                $.post("/index.php/Vip/Set/changeperson", {
                    nickname: this.username,
                    name: this.fullName,
                    sex: this.sex,
                    phone: this.phone,
                    birthday: this.Birthday
                }, function (data) {
                    if (data.success) {
                        that.$message({
                            message: data.msg,
                            duration: 1500,
                            type: 'success',
                            customClass: 'tip',
                            onClose: function () {
                                window.history.go(-1);
                            }
                        });

                    } else {
                        that.$message({
                            message: data.msg,
                            duration: 1500,
                            customClass: 'tip'
                        })
                    }
                })
            },

        }
    })
</script>

</html>