|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | 天诚科技 [ 刘海东 17600099397赋能开发者，助力企业发展 ] -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | Copyright (c) 2016～2022 https://www.crmeb.com All rights reserved. -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | Licensed 该系统并不是自由软件，未经许可不能去掉相关版权 -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | Author:甘肃天诚志信电子商务有限公司 刘海东 联系电话维系17600099397 -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
{extend name="public/container"}
|
|
|
{block name="title"}{$userInfo.nickname} - 个人资料{/block}
|
|
|
{block name="head_top"}
|
|
|
<script src="{__WAP_PATH}zsff/js/md5.js"></script>
|
|
|
<style>
|
|
|
body {
|
|
|
background-color: #f5f5f5;
|
|
|
}
|
|
|
|
|
|
.user-info .avatar {
|
|
|
display: -webkit-box;
|
|
|
display: -webkit-flex;
|
|
|
display: flex;
|
|
|
-webkit-box-align: center;
|
|
|
-webkit-align-items: center;
|
|
|
align-items: center;
|
|
|
padding: .3rem;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
|
|
|
.user-info .avatar .name {
|
|
|
-webkit-box-flex: 1;
|
|
|
-webkit-flex: 1;
|
|
|
flex: 1;
|
|
|
font-weight: 500;
|
|
|
font-size: .3rem;
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
.user-info .avatar .image {
|
|
|
width: .9rem;
|
|
|
height: .9rem;
|
|
|
border-radius: 50%;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.user-info .avatar .img {
|
|
|
display: block;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
|
|
|
.user-info .avatar .iconfont {
|
|
|
margin-left: .3rem;
|
|
|
font-size: .24rem;
|
|
|
color: #999;
|
|
|
}
|
|
|
|
|
|
.user-info .avatar .input {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.user-info .list {
|
|
|
margin-top: .3rem;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
|
|
|
.user-info .list .item {
|
|
|
display: -webkit-box;
|
|
|
display: -webkit-flex;
|
|
|
display: flex;
|
|
|
-webkit-box-align: center;
|
|
|
-webkit-align-items: center;
|
|
|
align-items: center;
|
|
|
height: .98rem;
|
|
|
padding-right: .3rem;
|
|
|
padding-left: .3rem;
|
|
|
}
|
|
|
|
|
|
.user-info .list .item~.item {
|
|
|
border-top: 1px solid #f5f5f5;
|
|
|
}
|
|
|
|
|
|
.user-info .list .item .name {
|
|
|
-webkit-box-flex: 1;
|
|
|
-webkit-flex: 1;
|
|
|
flex: 1;
|
|
|
font-weight: 500;
|
|
|
font-size: .3rem;
|
|
|
color: #333;
|
|
|
}
|
|
|
|
|
|
.user-info .list .item .value {
|
|
|
font-size: .3rem;
|
|
|
color: #666;
|
|
|
}
|
|
|
|
|
|
.user-info .list .item .iconfont {
|
|
|
margin-left: .3rem;
|
|
|
font-size: .24rem;
|
|
|
color: #999;
|
|
|
}
|
|
|
|
|
|
.user-info .list .item .input {
|
|
|
font-family: inherit;
|
|
|
text-align: right;
|
|
|
}
|
|
|
|
|
|
.user-info .btn-group {
|
|
|
padding: .8rem .3rem 0;
|
|
|
}
|
|
|
|
|
|
.user-info .btn-group .btn {
|
|
|
width: 100%;
|
|
|
height: .9rem;
|
|
|
border-radius: .45rem;
|
|
|
margin-bottom: .3rem;
|
|
|
background-color: #2C8EFF;
|
|
|
font-size: .32rem;
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
|
|
|
|
.user-info .btn-group .btn:last-child {
|
|
|
margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
.user-info .btn-group .out-btn {
|
|
|
border: 1px solid #2C8EFF;
|
|
|
background-color: #FFFFFF;
|
|
|
color: #2C8EFF;
|
|
|
}
|
|
|
|
|
|
.user-info .group .link {
|
|
|
display: block;
|
|
|
width: 100%;
|
|
|
height: .86rem;
|
|
|
border: 1px solid #ccc;
|
|
|
border-radius: .43rem;
|
|
|
margin-top: .3rem;
|
|
|
font-weight: 500;
|
|
|
font-size: .3rem;
|
|
|
line-height: .82rem;
|
|
|
text-align: center;
|
|
|
color: #999;
|
|
|
}
|
|
|
|
|
|
.user-info .list .item.password {
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
|
|
|
.popup {
|
|
|
position: fixed;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
z-index: 60;
|
|
|
border-radius: .2rem .2rem 0 0;
|
|
|
background: #FFFFFF;
|
|
|
transform: translateY(100%);
|
|
|
transition: 0.3s;
|
|
|
}
|
|
|
|
|
|
.popup.on {
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
|
|
|
.popup>a {
|
|
|
position: absolute;
|
|
|
top: .3rem;
|
|
|
right: .3rem;
|
|
|
z-index: 2;
|
|
|
}
|
|
|
|
|
|
.popup a .iconfont {
|
|
|
font-size: .27rem;
|
|
|
color: #8A8A8A;
|
|
|
}
|
|
|
|
|
|
.popup>div:nth-child(2) {
|
|
|
padding: .4rem 0 .34rem;
|
|
|
font-weight: bold;
|
|
|
font-size: .36rem;
|
|
|
line-height: .5rem;
|
|
|
text-align: center;
|
|
|
color: #282828;
|
|
|
}
|
|
|
|
|
|
.popup>div:nth-child(3) {
|
|
|
padding: 0 .3rem .3rem;
|
|
|
}
|
|
|
|
|
|
.popup .item {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
height: 1.19rem;
|
|
|
padding: 0 .15rem;
|
|
|
}
|
|
|
|
|
|
.popup .item::after {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
right: .15rem;
|
|
|
bottom: 0;
|
|
|
left: .15rem;
|
|
|
z-index: 2;
|
|
|
height: 1px;
|
|
|
border-bottom: 1px solid #CCCCCC;
|
|
|
}
|
|
|
|
|
|
.popup .item .iconfont {
|
|
|
font-size: .4rem;
|
|
|
}
|
|
|
|
|
|
.popup .item input {
|
|
|
flex: 1;
|
|
|
min-width: 0;
|
|
|
margin-left: .25rem;
|
|
|
}
|
|
|
|
|
|
.popup .item:nth-child(2) {
|
|
|
padding-right: 0;
|
|
|
}
|
|
|
|
|
|
.popup .item:nth-child(2) label {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
min-width: 0;
|
|
|
}
|
|
|
|
|
|
.popup .item button {
|
|
|
width: 2rem;
|
|
|
font-size: .26rem;
|
|
|
color: #2C8EFF;
|
|
|
}
|
|
|
|
|
|
.popup .item button img {
|
|
|
width: 1.4rem;
|
|
|
height: .58rem;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
|
|
|
.popup>div>button {
|
|
|
width: 100%;
|
|
|
height: .86rem;
|
|
|
border-radius: .43rem;
|
|
|
margin-top: .5rem;
|
|
|
background: #2C8EFF;
|
|
|
font-size: .3rem;
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
|
</style>
|
|
|
{/block}
|
|
|
{block name="content"}
|
|
|
<div v-cloak id="app">
|
|
|
<div class="user-info">
|
|
|
<label class="avatar">
|
|
|
<div class="name">头像</div>
|
|
|
<div class="image">
|
|
|
<img class="img" :src="userInfo.avatar">
|
|
|
</div>
|
|
|
<div class="iconfont iconxiangyou"></div>
|
|
|
<input ref="avatar" class="input" type="file" accept="image/png,image/jpeg">
|
|
|
</label>
|
|
|
<div class="list">
|
|
|
<label class="item">
|
|
|
<span class="name">ID</span>
|
|
|
<input v-model="userInfo.uid" class="value input" type="text" disabled>
|
|
|
</label>
|
|
|
<label class="item">
|
|
|
<span class="name">昵称</span>
|
|
|
<input v-model="userInfo.nickname" class="value input" type="text">
|
|
|
</label>
|
|
|
<a v-if="userInfo.phone" class="item" href="{:Url('save_phone')}">
|
|
|
<span class="name">手机号</span>
|
|
|
<span class="value">{{ userInfo.phone }}</span>
|
|
|
<span class="iconfont iconxiangyou"></span>
|
|
|
</a>
|
|
|
<div v-if="userInfo.phone && !isWechat" class="item password" @click="popupShow = true">
|
|
|
<div>密码</div>
|
|
|
<div>******</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="btn-group">
|
|
|
<button class="btn" type="button" @click="save_user_info">保存修改</button>
|
|
|
<button class="btn out-btn" type="button" @click="logout">退出登录</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div :class="{ mask: popupShow }" @click="popupShow = false"></div>
|
|
|
<div :class="{ on: popupShow }" class="popup">
|
|
|
<a href="javascript:" @click="popupShow = false">
|
|
|
<i class="iconfont iconguanbi"></i>
|
|
|
</a>
|
|
|
<div>修改密码</div>
|
|
|
<div>
|
|
|
<label class="item">
|
|
|
<i class="iconfont iconshouji"></i>
|
|
|
<input :value="userInfo.phone" type="text" readonly>
|
|
|
</label>
|
|
|
<div class="item">
|
|
|
<label>
|
|
|
<i class="iconfont iconyanzhengma"></i>
|
|
|
<input v-model.trim="code" type="text" placeholder="请填写验证码">
|
|
|
</label>
|
|
|
<button v-if="isCaptcha" type="button" @click="getCaptcha"><img :src="'../auth_api/captcha?' + timestamp" alt="验证码"></button>
|
|
|
<button v-else :disabled="count >= 0" type="button" @click="getCode">{{ count < 0 ? '获取验证码' : '重新获取(' + count + 's)' }}</button>
|
|
|
</div>
|
|
|
<label v-show="!isCaptcha" class="item">
|
|
|
<i class="iconfont iconmima"></i>
|
|
|
<input v-model.trim="pwd" type="password" placeholder="请填写8-16位字母加数字组合密码">
|
|
|
</label>
|
|
|
<button v-if="isCaptcha" type="button" @click="del_redis_phone">提交验证</button>
|
|
|
<button v-else type="button" @click="submitPassword">确认</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<quick-menu></quick-menu>
|
|
|
</div>
|
|
|
{/block}
|
|
|
{block name='foot'}
|
|
|
<script>
|
|
|
var userInfo = {:json_encode($userInfo)}, isWechat = {$isWechat? 'true': 'false'}, phone = '{$phone}';
|
|
|
require(['vue', 'axios', 'helper', 'store', 'layer', '{__WAP_PATH}zsff/js/quick.js'], function (Vue, axios, $h, app) {
|
|
|
new Vue({
|
|
|
el: '#app',
|
|
|
data: {
|
|
|
userInfo: userInfo,
|
|
|
popupShow: false,
|
|
|
count: -1,
|
|
|
COUNT_TIME: 60,
|
|
|
code: '',
|
|
|
pwd: '',
|
|
|
isWechat: isWechat,
|
|
|
phone: phone,
|
|
|
isCaptcha: false,
|
|
|
timestamp: 0
|
|
|
},
|
|
|
watch: {
|
|
|
'userInfo.nickname': function (n) {
|
|
|
document.title = n + ' - 个人资料';
|
|
|
}
|
|
|
},
|
|
|
mounted: function () {
|
|
|
var that = this;
|
|
|
$(this.$refs.avatar).change(function (e) {
|
|
|
var formdata = new FormData();
|
|
|
if (e.target.files[0]) {
|
|
|
formdata.append('file', e.target.files[0]);
|
|
|
app.basePost($h.U({c: 'auth_api', a: 'upload'}), formdata, function (res) {
|
|
|
that.userInfo.avatar = res.data.data.url;
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
upload: function () {
|
|
|
var that = this;
|
|
|
if (!isWechat) {
|
|
|
return;
|
|
|
}
|
|
|
mapleWx($jssdk(), function () {
|
|
|
app.wechatUploadImg(this, 1, function (res) {
|
|
|
that.userInfo.avatar = res[0];
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
save_user_info: function () {
|
|
|
var that = this;
|
|
|
app.basePost($h.U({c: 'my', a: 'save_user_info'}), {
|
|
|
avatar: that.userInfo.avatar,
|
|
|
nickname: that.userInfo.nickname
|
|
|
}, function (res) {
|
|
|
$h.pushMsgOnce(res.data.msg)
|
|
|
})
|
|
|
},
|
|
|
getCode: function () {
|
|
|
var vm = this;
|
|
|
vm.count = vm.COUNT_TIME;
|
|
|
vm.timer = setInterval(function () {
|
|
|
vm.count--;
|
|
|
if (vm.count < 0) {
|
|
|
clearInterval(vm.timer);
|
|
|
vm.timer = null;
|
|
|
}
|
|
|
}, 1000);
|
|
|
var index = layer.load(1);
|
|
|
axios.get('../auth_api/code', {
|
|
|
params: {
|
|
|
phone: this.userInfo.phone
|
|
|
}
|
|
|
}).then(function (res) {
|
|
|
layer.msg(res.data.msg, {anim: 0}, function () {
|
|
|
vm.isCaptcha = res.data.data.code === 1000;
|
|
|
});
|
|
|
if (res.data.code === 400) {
|
|
|
if (vm.timer) {
|
|
|
clearInterval(vm.timer);
|
|
|
vm.timer = null;
|
|
|
vm.count = -1;
|
|
|
}
|
|
|
}
|
|
|
}).catch(function (err) {
|
|
|
console.error(err);
|
|
|
}).then(function () {
|
|
|
layer.close(index);
|
|
|
});
|
|
|
},
|
|
|
// 点击密码弹窗确认按钮
|
|
|
submitPassword: function () {
|
|
|
var vm = this;
|
|
|
if (!vm.code) {
|
|
|
$h.pushMsg('请填写验证码');
|
|
|
return;
|
|
|
}
|
|
|
if (!vm.pwd) {
|
|
|
$h.pushMsg('请填写新密码');
|
|
|
return;
|
|
|
}
|
|
|
if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/.test(vm.pwd)) {
|
|
|
$h.pushMsg('请填写8-16位字母加数字组合密码');
|
|
|
return;
|
|
|
}
|
|
|
app.basePost($h.U({
|
|
|
c: 'login',
|
|
|
a: 'register'
|
|
|
}), {
|
|
|
account: vm.userInfo.phone,
|
|
|
pwd: hex_md5(vm.pwd),
|
|
|
code: vm.code,
|
|
|
type: 2
|
|
|
}, function () {
|
|
|
vm.popupShow = false;
|
|
|
vm.code = '';
|
|
|
vm.pwd = '';
|
|
|
layer.alert('密码修改成功！<br>请确定去个人中心重新登陆。', {
|
|
|
title: false,
|
|
|
closeBtn: false
|
|
|
}, function (index) {
|
|
|
app.baseGet($h.U({
|
|
|
c: 'my',
|
|
|
a: 'logout'
|
|
|
}), function () {
|
|
|
window.location.replace($h.U({
|
|
|
c: 'my',
|
|
|
a: 'index'
|
|
|
}));
|
|
|
});
|
|
|
layer.close(index);
|
|
|
});
|
|
|
}, function () {
|
|
|
vm.count = -1;
|
|
|
});
|
|
|
},
|
|
|
// 退出登录
|
|
|
logout: function () {
|
|
|
layer.confirm('确定退出登录？', {
|
|
|
title: false,
|
|
|
closeBtn: false
|
|
|
}, function () {
|
|
|
app.baseGet($h.U({
|
|
|
c: 'my',
|
|
|
a: 'logout'
|
|
|
}), function (res) {
|
|
|
layer.msg(res.data.msg, {
|
|
|
anim: 0
|
|
|
}, function () {
|
|
|
window.history.back();
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
del_redis_phone: function () {
|
|
|
var vm = this;
|
|
|
if (!this.code) {
|
|
|
return layer.msg('请填写验证码');
|
|
|
}
|
|
|
var index = layer.load(1);
|
|
|
axios.get('../auth_api/del_redis_phone', {
|
|
|
params: {
|
|
|
phone: this.userInfo.phone,
|
|
|
verify: this.code
|
|
|
}
|
|
|
}).then(function (res) {
|
|
|
layer.msg(res.data.msg, {anim: 0}, function () {
|
|
|
vm.isCaptcha = res.data.code !== 200;
|
|
|
});
|
|
|
if (res.data.code === 200) {
|
|
|
vm.code = '';
|
|
|
}
|
|
|
}).catch(function (err) {
|
|
|
console.error(err);
|
|
|
}).then(function () {
|
|
|
layer.close(index);
|
|
|
});
|
|
|
},
|
|
|
getCaptcha: function () {
|
|
|
this.timestamp = new Date().getTime();
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
})
|
|
|
</script>
|
|
|
{/block} |
