You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

360 lines
9.9 KiB

<template>
<view class="personal-data">
<view class="wrapper">
<view class="wrapList">
<view class="item acea-row row-between-wrapper on">
<view class="picTxt acea-row row-between-wrapper">
<view class="pictrue" @tap="chooseImage">
<div class="pictrue">
<img :src="avatar" />
</div>
<!-- <image :src="`${$VUE_APP_RESOURCES_URL}/images/alter.png`" class="alter" /> -->
</view>
<view class="text">
<view class="name line1">{{ userInfo.nickname }}</view>
<view class="phone">
绑定手机号
<text v-if="userInfo.phone">{{ userInfo.phone }}</text>
<text v-else>未绑定</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="list">
<view class="item acea-row row-between-wrapper">
<view>昵称</view>
<view class="input">
<input type="text" disabled v-model="userInfo.nickname" />
</view>
</view>
<view class="item acea-row row-between-wrapper">
<view>真实姓名</view>
<view class="input">
<input type="text" placeholder="请填写真实姓名" placeholder-style="color:#EA533E" v-model="userInfo.realName" />
</view>
</view>
<view class="item acea-row row-between-wrapper">
<view>身份证号码</view>
<view class="input">
<input type="idcard" placeholder="请填写真实身份证号码" maxlength="18" v-model="userInfo.idCard" />
</view>
</view>
<!-- <view class="item acea-row row-between-wrapper">
<view>ID号</view>
<view class="input acea-row row-between-wrapper">
<input type="text" :value="userInfo.uid" disabled class="id" />
<text class="iconfont icon-suozi"></text>
</view>
</view> -->
<view class="item acea-row row-between-wrapper">
<view>手机号</view>
<view class="input">
<input type="text" v-if="userInfo.phone" v-model="userInfo.phone" />
<input type="text" v-else placeholder="未绑定" v-model="userInfo.phone" disabled class="id" />
</view>
</view>
<view class="item acea-row row-between-wrapper">
<view>验证码</view>
<view class="acea-row row-middle ">
<view class="input-box acea-row row-middle row-right">
<input type="text" v-model="verifyCode" maxlength="6" placeholder="请输入短信验证码" />
</view>
<view class="countdown" :class="disabled ? 'default' : ''" @click="sendCode">
{{disabled ? second + '秒后重新发送' : '发送验证码'}}
</view>
</view>
</view>
<view class="item acea-row row-between-wrapper">
<view>区域</view>
<view class="input">
<picker @change="bindPickerChange" mode="region" :range="array">
<view class="uni-input">{{city}}</view>
</picker>
</view>
</view>
<!--
<view class="item acea-row row-between-wrapper" @click="goChangePassword()">
<view>密码</view>
<view class="input acea-row row-between-wrapper">
<text>点击修改密码</text>
<text class="iconfont icon-suozi"></text>
</view>
</view>
-->
</view>
<view class="tips">会员信息仅用于身份确认不做他用</view>
<view class="modifyBnt" @click="submit">保存修改</view>
<!-- #ifndef MP-WEIXIN -->
<view
class="logOut cart-color acea-row row-center-wrapper"
@click="logout"
>退出登录</view>
<!-- #endif -->
</view>
</template>
<script>
import { mapGetters } from "vuex";
import { trim, isWeixin, chooseImage } from "@/utils";
import { getVerificationCode } from "@/api/serverTeacher"
import { VUE_APP_API_URL } from "@/config";
import {
postUserEdit,
getLogout,
switchH5Login,
getUserInfo,
} from "@/api/user";
import cookie from "@/utils/store/cookie";
import store from "@//store";
import dayjs from "dayjs";
export default {
name: "PersonalData",
components: {
// VueCoreImageUpload
},
data: function () {
return {
avatar: "",
isWeixin: false,
currentAccounts: 0,
switchUserInfo: [],
userIndex: 0,
disabled: false,
second: 60,
time: null,
city: '省/市/区',
verifyCode:''
};
},
computed: mapGetters(["userInfo"]),
mounted: function () {
this.avatar = this.userInfo.avatar;
this.isWeixin = isWeixin();
this.getUserInfo();
this.userInfo.city ? this.city = this.userInfo.city : this.userInfo.city = '省/市/区';
},
methods: {
bindPickerChange(e){
this.city = e.detail.value.join(' ')
},
sendCode(){
var reg=/^1[3456789]\d{9}$/;
if (this.userInfo.phone === '') {
uni.showModal({
title: '手机号码不能为空',
type: 'none'
});
return
} else if(!reg.test(this.userInfo.phone)){
uni.showModal({
title: '请输入有效的手机号码',
type: 'none'
});
return
} else{
getVerificationCode({phone:this.userInfo.phone}).then((res)=>{
if(res.success){
uni.showToast({
title:'短信已发送!'
})
if(this.disabled == false){
clearInterval(this.timer)
this.disabled = true;
this.timer = setInterval(()=>{ //设置延迟执行
this.timeup()
},1000);
}
} else{
uni.showToast({
title:res.msg,
icon:'none'
})
}
})
}
},
timeup(){
this.second = this.second - 1;
if (this.second == 0) {
this.second = 60;
this.disabled = false
clearInterval(this.timer)
return;
}
},
goChangePassword() {
this.$yrouter.push("/pages/user/ChangePassword/index");
},
switchAccounts: function (index) {
let that = this;
this.userIndex = index;
let userInfo = this.switchUserInfo[this.userIndex];
if (this.switchUserInfo.length <= 1) return true;
if (userInfo === undefined) {
uni.showToast({
title: "切换的账号不存在",
icon: "none",
duration: 2000,
});
return;
}
if (userInfo.user_type === "h5") {
switchH5Login()
.then(({ data }) => {
uni.hideLoading();
const expires_time = dayjs(data.expires_time);
store.commit("login", data.token, expires_time);
that.$emit("changeswitch", false);
location.reload();
})
.catch((err) => {
uni.hideLoading();
uni.showToast({
title:
err.msg || err.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000,
});
});
} else {
cookie.set("loginType", "wechat", 60);
uni.hideLoading();
this.$store.commit("logout");
this.$emit("changeswitch", false);
}
},
getUserInfo: function () {
let that = this;
getUserInfo().then((res) => {
// let switchUserInfo = res.data.switchUserInfo;
// for (let i = 0; i < switchUserInfo.length; i++) {
// if (switchUserInfo[i].uid == that.userInfo.uid) that.userIndex = i;
// if (
// !that.isWeixin &&
// switchUserInfo[i].user_type != "h5" &&
// switchUserInfo[i].phone === ""
// )
// switchUserInfo.splice(i, 1);
// }
// that.$set(this, "switchUserInfo", switchUserInfo);
});
},
chooseImage() {
chooseImage((img) => {
console.log(img);
this.avatar = img;
});
},
submit: function () {
let userInfo = this.userInfo;
console.log(userInfo)
if(userInfo.realName == '' || userInfo.realName == null){
uni.showToast({
title:'请填写真实姓名',
icon: "none"
})
return
}
if(this.verifyCode == ''){
uni.showModal({
title: '请输入手机短信验证码',
type: 'none'
});
return
}
postUserEdit({
nickname: trim(this.userInfo.nickname),
avatar: this.avatar,
realName: trim(this.userInfo.realName),
idCard: this.userInfo.idCard,
code: this.verifyCode,
phone: this.userInfo.phone,
city: this.city
}).then(
(res) => {
if(res.success){
this.$store.dispatch("userInfo", true);
uni.showToast({
title: res.msg,
icon: "none",
duration: 2000,
});
setTimeout(()=>{
this.$yrouter.back();
},2000)
}
},
(err) => {
uni.showToast({
title:
err.msg || err.response.data.msg || err.response.data.message,
icon: "none",
duration: 2000,
});
}
);
},
logout: function () {
uni.showModal({
title: "提示",
content: "确认退出登录?",
success: (res) => {
if (res.confirm) {
getLogout()
.then((res) => {
this.$store.commit("logout");
this.$yrouter.replace({
path: "/pages/user/Login/index",
query: {},
});
})
.catch((err) => {});
} else if (res.cancel) {
// console.log("用户点击取消");
}
},
});
},
},
};
</script>
<style scoped lang="less">
.modifyBnt{
height: 80rpx !important;
line-height: 80rpx !important;
font-size: 32rpx !important;
background: #F99C10;
}
.countdown{
min-width: 140rpx;
height: 58rpx;
padding: 0 10rpx;
font-size: 24rpx;
background-color: #F99C10;
color: #fff;
line-height: 58rpx;
text-align: center;
border-radius: 10rpx;
}
.tips{
color: #F99C10;
font-size: 28rpx;
line-height: 34rpx;
padding: 24rpx;
box-sizing: border-box;
}
.default{
background: #999;
color: #fff;
}
.input-box{
text-align: right;
input{
width: 80%;
margin-right: 10rpx;
}
}
</style>