359 lines
8.8 KiB
Vue
359 lines
8.8 KiB
Vue
|
<template>
|
||
|
|
<view class="mine-pages-setting">
|
||
|
|
<view class="flex-center flex-column pd-lg fill-base">
|
||
|
|
<view class="space-lg"></view>
|
||
|
|
<view class="space-lg"></view>
|
||
|
|
<!-- #ifdef H5 -->
|
||
|
|
<view class="avatar radius">
|
||
|
|
<view class="h5-image avatar radius" :style="{ backgroundImage : `url('${user_info.avatarUrl}')`}">
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- #endif -->
|
||
|
|
<!-- #ifndef H5 -->
|
||
|
|
<image mode="aspectFill" class="avatar radius" :src="user_info.avatarUrl"></image>
|
||
|
|
<!-- #endif -->
|
||
|
|
|
||
|
|
<view @tap.stop="toResetPhone" class="flex-y-center f-title c-caption mt-md" v-if="user_info.phone">
|
||
|
|
{{user_info.split_phone}}
|
||
|
|
<view class="ml-md f-caption" :style="{color:primaryColor}" v-if="configInfo.short_code_status">
|
||
|
|
更换手机号</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="flex-between pd-lg fill-base f-paragraph">
|
||
|
|
<view>昵称</view>
|
||
|
|
<view class="c-caption">{{user_info.nickName}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="flex-between pd-lg fill-base f-paragraph">
|
||
|
|
<view>注册时间</view>
|
||
|
|
<view class="c-caption">{{user_info.create_date || '-'}}</view>
|
||
|
|
</view>
|
||
|
|
<!-- #ifndef MP-WEIXIN -->
|
||
|
|
<view @tap.stop="$util.goUrl({url:`/user/pages/alipay-account`})"
|
||
|
|
class="flex-between pd-lg fill-base f-paragraph">
|
||
|
|
<view>支付宝账号</view>
|
||
|
|
<view class="flex-y-center c-caption">{{user_info.split_alipay_number || '暂无'}}
|
||
|
|
<view class="ml-md" :style="{color:primaryColor}">{{user_info.alipay_number?'修改':'去设置'}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- #endif -->
|
||
|
|
<view class="space-md"></view>
|
||
|
|
<view @tap.stop="goDetail(index,'infoList')" class="flex-between pd-lg fill-base f-paragraph"
|
||
|
|
v-for="(item,index) in infoList" :key="index">
|
||
|
|
<view>{{item.text}}</view>
|
||
|
|
<i class="iconfont icon-right"></i>
|
||
|
|
</view>
|
||
|
|
<view class="space-max-footer"></view>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- #ifdef H5 -->
|
||
|
|
<fix-bottom-button @confirm="toLoginOut" :text="[{ text: '退出登录', type: 'confirm' }]" bgColor="#fff">
|
||
|
|
</fix-bottom-button>
|
||
|
|
<!-- #endif -->
|
||
|
|
|
||
|
|
<!-- #ifdef APP-PLUS -->
|
||
|
|
<fix-bottom-button @cancel="$util.goUrl({url:`/user/pages/logout`})" @confirm="toLoginOut"
|
||
|
|
:text="[{ text: '注销账户', type: 'cancel' },{ text: '退出登录', type: 'confirm' }]" bgColor="#fff">
|
||
|
|
</fix-bottom-button>
|
||
|
|
<!-- #endif -->
|
||
|
|
|
||
|
|
<uni-popup ref="show_phone_item" :maskClick="false">
|
||
|
|
<view @tap.stop.prevent class="common-popup-content popup-phone pd-lg flex-center flex-column fill-base">
|
||
|
|
<view class="f-md-title c-black">请输入手机号</view>
|
||
|
|
<view class="space-lg pb-lg"></view>
|
||
|
|
<view class="space-lg pb-lg"></view>
|
||
|
|
<view class="flex-center mb-lg">
|
||
|
|
<view class="input-info sm mr-md radius-16">
|
||
|
|
<input v-model="subForm.phone" type="number"
|
||
|
|
class="item-input flex-y-center pl-lg pr-lg f-sm-title c-title"
|
||
|
|
placeholder-class="c-placeholder" :placeholder="rule[0].errorMsg" />
|
||
|
|
</view>
|
||
|
|
<view @tap="toSend" class="send-btn flex-center c-base radius-16"
|
||
|
|
:style="{background:primaryColor}">
|
||
|
|
{{authTime>0?`(${authTime}s)`:'发送'}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="input-info radius-16">
|
||
|
|
<input v-model="subForm.short_code" type="number"
|
||
|
|
class="item-input flex-y-center pl-lg pr-lg f-sm-title c-title" maxlength="6"
|
||
|
|
placeholder-class="c-placeholder" :placeholder="rule[1].errorMsg" />
|
||
|
|
</view>
|
||
|
|
<view class="button">
|
||
|
|
<view @tap.stop="toResetItem" class="item-child">
|
||
|
|
取消
|
||
|
|
</view>
|
||
|
|
<view @tap.stop="submit" class="item-child" :style="{background: primaryColor,color:'#fff'}">
|
||
|
|
确定
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</uni-popup>
|
||
|
|
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
mapState,
|
||
|
|
mapActions,
|
||
|
|
mapMutations
|
||
|
|
} from "vuex"
|
||
|
|
import siteInfo from '@/siteinfo.js';
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
isLoad: false,
|
||
|
|
options: {},
|
||
|
|
infoList: [{
|
||
|
|
text: '隐私政策',
|
||
|
|
url: `/user/pages/protocol`
|
||
|
|
}, {
|
||
|
|
text: '服务协议',
|
||
|
|
url: `/user/pages/information`
|
||
|
|
}, {
|
||
|
|
text: '屏蔽列表',
|
||
|
|
url: `/user/pages/shield`
|
||
|
|
}],
|
||
|
|
user_info: {},
|
||
|
|
authTime: 0,
|
||
|
|
timer: null,
|
||
|
|
subForm: {
|
||
|
|
phone: '',
|
||
|
|
short_code: ''
|
||
|
|
},
|
||
|
|
rule: [{
|
||
|
|
name: "phone",
|
||
|
|
checkType: "isMobile",
|
||
|
|
errorMsg: "请输入手机号",
|
||
|
|
regText: "手机号"
|
||
|
|
}, {
|
||
|
|
name: "short_code",
|
||
|
|
checkType: "isNotNull",
|
||
|
|
errorMsg: "请输入短信验证码",
|
||
|
|
regText: "短信验证码"
|
||
|
|
}],
|
||
|
|
lockTap: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: mapState({
|
||
|
|
primaryColor: state => state.config.configInfo.primaryColor,
|
||
|
|
subColor: state => state.config.configInfo.subColor,
|
||
|
|
configInfo: state => state.config.configInfo,
|
||
|
|
userInfo: state => state.user.userInfo,
|
||
|
|
}),
|
||
|
|
async onLoad() {
|
||
|
|
this.initIndex()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...mapActions(['getUserInfo']),
|
||
|
|
...mapMutations(['updateConfigItem', 'updateServiceItem', 'updateTechnicianItem', 'updateOrderItem',
|
||
|
|
'updateUserItem'
|
||
|
|
]),
|
||
|
|
async initIndex(refresh = false) {
|
||
|
|
// #ifdef H5
|
||
|
|
if (!refresh && this.$jweixin.isWechat()) {
|
||
|
|
await this.$jweixin.initJssdk();
|
||
|
|
this.$jweixin.wxReady(() => {
|
||
|
|
this.$jweixin.hideOptionMenu()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
// #endif
|
||
|
|
await this.getUserInfo()
|
||
|
|
this.$util.setNavigationBarColor({
|
||
|
|
bg: this.primaryColor
|
||
|
|
})
|
||
|
|
this.user_info = this.$util.deepCopy(this.userInfo)
|
||
|
|
},
|
||
|
|
initRefresh() {
|
||
|
|
this.initIndex(true)
|
||
|
|
},
|
||
|
|
toResetPhone() {
|
||
|
|
let {
|
||
|
|
short_code_status = 0
|
||
|
|
} = this.configInfo
|
||
|
|
if (!short_code_status) return
|
||
|
|
this.$refs.show_phone_item.open()
|
||
|
|
},
|
||
|
|
toResetItem() {
|
||
|
|
this.$refs.show_phone_item.close()
|
||
|
|
this.timer && clearTimeout(this.timer)
|
||
|
|
this.authTime = 0
|
||
|
|
this.subForm = {
|
||
|
|
phone: '',
|
||
|
|
short_code: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//表单验证
|
||
|
|
validate(param, is_send = false) {
|
||
|
|
let validate = new this.$util.Validate();
|
||
|
|
this.rule.map(item => {
|
||
|
|
let {
|
||
|
|
name,
|
||
|
|
} = item
|
||
|
|
if (name == 'short_code' && is_send) return
|
||
|
|
validate.add(param[name], item);
|
||
|
|
})
|
||
|
|
let message = validate.start();
|
||
|
|
return message;
|
||
|
|
},
|
||
|
|
async toSend() {
|
||
|
|
let {
|
||
|
|
authTime
|
||
|
|
} = this
|
||
|
|
if (authTime) return
|
||
|
|
let {
|
||
|
|
phone = ''
|
||
|
|
} = this.subForm
|
||
|
|
let msg = this.validate({
|
||
|
|
phone
|
||
|
|
}, true);
|
||
|
|
if (msg) {
|
||
|
|
this.$util.showToast({
|
||
|
|
title: msg
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (this.lockTap) return
|
||
|
|
this.lockTap = true
|
||
|
|
this.$util.showLoading()
|
||
|
|
try {
|
||
|
|
await this.$api.user.sendShortMsg({
|
||
|
|
phone
|
||
|
|
})
|
||
|
|
this.$util.hideAll()
|
||
|
|
this.lockTap = false
|
||
|
|
let time = 60
|
||
|
|
this.timer = setInterval(() => {
|
||
|
|
if (time === 0) {
|
||
|
|
clearInterval(this.timer)
|
||
|
|
return
|
||
|
|
}
|
||
|
|
time--
|
||
|
|
this.authTime = time
|
||
|
|
}, 1000)
|
||
|
|
} catch (e) {
|
||
|
|
setTimeout(() => {
|
||
|
|
this.lockTap = false
|
||
|
|
this.$util.hideAll()
|
||
|
|
}, 2000)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async submit() {
|
||
|
|
let param = this.$util.deepCopy(this.subForm)
|
||
|
|
let msg = this.validate(param);
|
||
|
|
if (msg) {
|
||
|
|
this.$util.showToast({
|
||
|
|
title: msg
|
||
|
|
});
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (param.short_code.length != 6) {
|
||
|
|
this.$util.showToast({
|
||
|
|
title: `请输入6位数短信验证码`
|
||
|
|
})
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.lockTap) return
|
||
|
|
this.lockTap = true
|
||
|
|
this.$util.showLoading()
|
||
|
|
try {
|
||
|
|
await this.$api.user.bindUserPhone(param)
|
||
|
|
this.$util.hideAll()
|
||
|
|
this.lockTap = false
|
||
|
|
this.toResetItem()
|
||
|
|
await this.getUserInfo()
|
||
|
|
} catch (e) {
|
||
|
|
setTimeout(() => {
|
||
|
|
this.lockTap = false
|
||
|
|
this.$util.hideAll()
|
||
|
|
}, 2000)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
goDetail(index, key) {
|
||
|
|
let {
|
||
|
|
url
|
||
|
|
} = this[key][index]
|
||
|
|
this.$util.goUrl({
|
||
|
|
url
|
||
|
|
})
|
||
|
|
},
|
||
|
|
toLoginOut() {
|
||
|
|
let methodArr = ['updateServiceItem', 'updateTechnicianItem']
|
||
|
|
methodArr.map(item => {
|
||
|
|
this[item]({
|
||
|
|
key: 'pageActive',
|
||
|
|
val: false
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
let arr = ['autograph', 'userInfo', 'location', 'appLogin', 'loginType',
|
||
|
|
'isGzhLogin', 'isShowLogin', 'mineInfo', 'coachInfo', 'userPageType', 'commonOptions'
|
||
|
|
]
|
||
|
|
arr.map(key => {
|
||
|
|
this.updateUserItem({
|
||
|
|
key,
|
||
|
|
val: key === 'isShowLogin' ? true : key === 'isGzhLogin' ? false : key ===
|
||
|
|
'userPageType' ? 1 : ''
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
this.$util.showToast({
|
||
|
|
title: `退出登录`
|
||
|
|
})
|
||
|
|
setTimeout(() => {
|
||
|
|
// #ifdef H5
|
||
|
|
let {
|
||
|
|
siteroot
|
||
|
|
} = siteInfo
|
||
|
|
let url = siteroot.split('/index.php')[0]
|
||
|
|
let href = `${url}/h5/#/pages/service`
|
||
|
|
window.location.href = href
|
||
|
|
// #endif
|
||
|
|
// #ifdef APP-PLUS
|
||
|
|
this.$util.goUrl({
|
||
|
|
url: `/pages/service`,
|
||
|
|
openType: `reLaunch`
|
||
|
|
})
|
||
|
|
// #endif
|
||
|
|
}, 1000)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.mine-pages-setting {
|
||
|
|
.iconfont {
|
||
|
|
color: #999
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup-phone {
|
||
|
|
width: 630rpx;
|
||
|
|
|
||
|
|
.input-info {
|
||
|
|
width: 570rpx;
|
||
|
|
height: 90rpx;
|
||
|
|
background: #F7F7F7;
|
||
|
|
|
||
|
|
.item-input {
|
||
|
|
height: 90rpx;
|
||
|
|
font-size: 32rpx;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.input-info.sm {
|
||
|
|
width: 400rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.send-btn {
|
||
|
|
width: 150rpx;
|
||
|
|
height: 90rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|