250 行
9.0 KiB
HTML
可执行文件
250 行
9.0 KiB
HTML
可执行文件
<!doctype html>
|
|
<html lang="en">
|
|
<!--[1.4.8]-->
|
|
<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-1 {
|
|
width: 100%;
|
|
background: #ff877e;
|
|
}
|
|
|
|
.subset-2 {
|
|
width: 100%;
|
|
background: #6FA1FB;
|
|
}
|
|
|
|
.subset-3 {
|
|
width: 100%;
|
|
background: #FA6573;
|
|
}
|
|
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
.form-label {
|
|
width: .6rem;
|
|
}
|
|
.form-input::placeholder{
|
|
color: #C0C4CC;
|
|
}
|
|
</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" type="number" maxlength="11" v-model='mobile_phone'
|
|
placeholder="输入您的电话">
|
|
</div>
|
|
</div>
|
|
<div class="form-item" v-if="mobile_phone!=phone">
|
|
<label class="form-label">验证码：</label>
|
|
<div class="form-input-block" style="display: flex;align-items: center;">
|
|
<input style="flex: 1" class="form-input input-small" type="number" maxlength="4" v-model='code'
|
|
placeholder="输入验证码">
|
|
<el-button v-if="count>0" size="small" disabled type="info" round plain>
|
|
{{count}} s
|
|
</el-button>
|
|
<el-button v-else-if="verifyMobile()" size="small" @click="getCode" round plain>获取验证码</el-button>
|
|
</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"
|
|
:class="style_model==1?'subset-1':(style_model==2?'subset-2':'subset-3')" @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']}",
|
|
mobile_phone: "{$vip['mobile_phone']}",
|
|
Birthday: "{$vip['birthday']}",
|
|
style_model: "{$style_model}",
|
|
count: 0,
|
|
timer: null,
|
|
code: '',
|
|
},
|
|
created: function () {
|
|
},
|
|
methods: {
|
|
verifyMobile: function () {
|
|
if (this.mobile_phone.match(/^1[3456789]\d{9}$/)) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
//获取验证码
|
|
getCode: function () {
|
|
var that = this;
|
|
that.$loading({
|
|
lock: true,
|
|
text: '发送中，请等待',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(255, 255, 255, 0.7)'
|
|
});
|
|
$.ajax({
|
|
url: "{:U('getMobileCode')}",
|
|
type: 'post',
|
|
data: {
|
|
mobile_phone: that.mobile_phone,
|
|
},
|
|
success: function (res) {
|
|
that.$loading().close();
|
|
console.log(res.msg);
|
|
if (res.status == 1) {
|
|
that.$message.success(res.msg);
|
|
that.countDown();
|
|
} else {
|
|
that.$message.error(res.msg);
|
|
}
|
|
},
|
|
error: function (res) {
|
|
that.$loading().close();
|
|
console.log(res);
|
|
that.$message.error({massage: '请求发生错误'});
|
|
}
|
|
})
|
|
},
|
|
//开始倒计时
|
|
countDown: function () {
|
|
var that = this;
|
|
that.count = 60;
|
|
that.timer = setInterval(function () {
|
|
that.count--;
|
|
if (that.count <= 0) {
|
|
clearInterval(that.timer);
|
|
}
|
|
}, 1000)
|
|
},
|
|
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.verifyMobile()) {
|
|
this.$message({
|
|
message: '手机号码输入有误',
|
|
duration: 1500,
|
|
customClass: 'tip'
|
|
});
|
|
} else if (this.mobile_phone != this.phone && !this.code) {
|
|
this.$message({
|
|
message: '请输入验证码',
|
|
duration: 1500,
|
|
customClass: 'tip'
|
|
});
|
|
} else {
|
|
this.submitSet();
|
|
}
|
|
e.preventDefault();
|
|
|
|
},
|
|
|
|
submitSet: function () {
|
|
var that = this;
|
|
$.post("/index.php/Vip/Set/changeperson", {
|
|
nickname: this.username,
|
|
name: this.fullName,
|
|
sex: this.sex,
|
|
phone: this.mobile_phone,
|
|
birthday: this.Birthday,
|
|
code: this.code,
|
|
}, function (data) {
|
|
if (data.status == 1) {
|
|
that.phone = that.mobile_phone;
|
|
that.$message({
|
|
message: data.msg,
|
|
duration: 1500,
|
|
type: 'success',
|
|
customClass: 'tip',
|
|
});
|
|
|
|
} else {
|
|
that.$message({
|
|
message: data.msg,
|
|
duration: 1500,
|
|
customClass: 'tip'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
}
|
|
})
|
|
</script>
|
|
|
|
</html> |