mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-06 17:36:45 +08:00
387 lines
10 KiB
Vue
387 lines
10 KiB
Vue
<template>
|
||
<view>
|
||
<page-title :showBack="true" backUrl="/pages/my/index">个人设置</page-title>
|
||
<view class="settingDetail">
|
||
<view class="setInfoItem">
|
||
<view class="u-demo-block">
|
||
<text class="u-demo-block__title">基础信息</text>
|
||
<view class="u-demo-block__content">
|
||
<u-cell-group >
|
||
<u-cell title="头像" :isLink="true" @click="updateHeadImg">
|
||
<u-avatar v-if="userInfoObj.account.avatar!=''" slot="value" @click="updateHeadImg" shape="circle" size="58pt" :src="imgurl"></u-avatar>
|
||
</u-cell>
|
||
<u-cell title="姓名" v-model="userInfoObj.name"></u-cell>
|
||
<u-cell title="性别" v-model="userInfoObj.gender==1?'男':'女'"></u-cell>
|
||
<!-- <u-cell title="邮箱" v-model="userInfoObj.account.email"></u-cell> -->
|
||
<!-- <u-cell title="身份证" v-model="userInfoObj.idNumber"></u-cell> -->
|
||
<u-cell title="生日" v-model="userInfoObj.birthday"></u-cell>
|
||
<u-cell title="手机号" v-model="userInfoObj.account.mobile"></u-cell>
|
||
<!-- <u-cell @click="toRouter('nickName')" title="昵称" :isLink="true" arrow-direction="left" v-model="userInfoObj.account.nickName"></u-cell> -->
|
||
<!-- <u-cell @click="toRouter('newBirt')" title="生日" :isLink="true" arrow-direction="left" v-model="userInfoObj.birthday"></u-cell> -->
|
||
<!-- <u-cell @click="toRouter('indLabels')" title="个人标签" :isLink="true" arrow-direction="left" v-model="userInfoObj.rank"></u-cell> -->
|
||
</u-cell-group>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 企业信息 -->
|
||
<view class="setInfoItem">
|
||
<view class="u-demo-block">
|
||
<text class="u-demo-block__title">企业信息</text>
|
||
<view class="u-demo-block__content">
|
||
<u-cell-group>
|
||
<!-- 内容为姓名的话代表没有对应字段 -->
|
||
<!-- 语言设置和位置设置个人觉得应该有进行选择的功能 -->
|
||
<!-- 个人标签的字段也存在问题，rank是职级标签，没有对应字段 -->
|
||
<!-- <u-cell title="企业名称" v-model="userInfoObj.companyName"></u-cell>
|
||
<u-cell title="所属区域" v-model="userInfoObj.name"></u-cell> -->
|
||
<u-cell title="邮箱" v-model="userInfoObj.account.email"></u-cell>
|
||
<u-cell title="部门" v-model="userInfoObj.departName"></u-cell>
|
||
<u-cell title="岗位" v-model="userInfoObj.duty"></u-cell>
|
||
</u-cell-group>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 其他设置 -->
|
||
<view class="setInfoItem">
|
||
<view class="u-demo-block">
|
||
<text class="u-demo-block__title">其他设置</text>
|
||
<view class="u-demo-block__content">
|
||
<u-cell-group>
|
||
<!-- <u-cell title="语言设置" v-model="userInfoObj.name"></u-cell>
|
||
<u-cell title="位置" v-model="userInfoObj.name"></u-cell> -->
|
||
<u-cell @click="toRouter('next')" title="修改密码" :isLink="true" arrow-direction="left" v-model="userInfoObj.account.passValue"></u-cell>
|
||
<u-cell title="解除绑定">
|
||
<view slot="value" :class="!relieveStatus ? 'relieveLogin noRelieveLogin' : 'relieveLogin activeRelieveLogin'" @click="relieveLogin(relieveStatus)">
|
||
<text>解除</text>
|
||
</view>
|
||
</u-cell>
|
||
</u-cell-group>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-button type="error" text="退 出" @click="logout()"></u-button>
|
||
</view>
|
||
<u-modal :show="clearShow" @confirm="confirmClear" @cancel="clearShow=false"
|
||
:showCancelButton="true" ref="uModal" content="您确认要退出当前账号吗？" :asyncClose="true"></u-modal><view style="height: 50upx;"></view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import userApi from "@/api/system/user";
|
||
import apiUserbasic from '@/api/boe/userbasic.js'
|
||
import uploadUtil from '@/utils/upload.js'
|
||
import accountApi from '@/api/account';
|
||
import config from '@/config/index.js'
|
||
import cropper from "@/components/x-cropper/x-cropper.vue"
|
||
import { mapGetters } from 'vuex';
|
||
import {getToken} from '@/utils/token.js'
|
||
import userBasic from '@/api/boe/userbasic.js'
|
||
export default {
|
||
components: {cropper},
|
||
data() {
|
||
return {
|
||
fileUrl:this.$config.fileUrl,
|
||
aid:'',
|
||
userInfoObj:{
|
||
account:{nickName:'',mobile:'',avatar:'',email:'',passValue:'',sex:''},
|
||
},
|
||
clearShow:false,
|
||
imgurl:"",
|
||
relieveStatus:false
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(['userInfo'])
|
||
},
|
||
onShow(){
|
||
this.$store.dispatch('GetUserInfo').then(rs=>{
|
||
this.aid=rs.aid;
|
||
this.imgurl = rs.avatar;
|
||
this.load();
|
||
this.getRelieveStatus();
|
||
})
|
||
},
|
||
onLoad(){
|
||
//this.load()
|
||
},
|
||
methods: {
|
||
relieveLogin(relieveStatus){
|
||
if(relieveStatus){
|
||
userBasic.UnOpenId().then(res=>{
|
||
if(res.status==200){
|
||
uni.showToast({
|
||
title: "解绑成功",
|
||
icon:'none'
|
||
});
|
||
this.getRelieveStatus();
|
||
}else{
|
||
uni.showToast({
|
||
title: "解绑失败",
|
||
icon:'none'
|
||
});
|
||
}
|
||
})
|
||
}
|
||
},
|
||
// 解绑状态
|
||
getRelieveStatus(){
|
||
userBasic.hasOpenId().then(res=>{
|
||
if(res.status==200){
|
||
this.relieveStatus = res.result
|
||
}else{
|
||
uni.showToast({
|
||
title: "获取数据失败",
|
||
icon:'none'
|
||
});
|
||
}
|
||
})
|
||
},
|
||
logout() {
|
||
this.clearShow=true;
|
||
},
|
||
updateHeadImg() {
|
||
let self=this;
|
||
if (this.fSelecting) return;
|
||
this.fSelecting = true;
|
||
setTimeout(() => {
|
||
this.fSelecting = false;
|
||
}, 500);
|
||
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['original', 'compressed'],
|
||
sourceType: ['camera', 'album'],
|
||
success: (r) => {
|
||
uni.showLoading({
|
||
mask: true
|
||
});
|
||
|
||
uploadUtil.uploadFile(r.tempFilePaths[0]).then(rs=>{
|
||
if(rs.status==200){
|
||
this.imgurl = rs.result.httpPath;
|
||
accountApi.updateAvatar({id:this.aid,avatar:rs.result.filePath}).then(rs2=>{
|
||
if(rs2.status == 200){
|
||
// 更新下页面缓存
|
||
this.$store.dispatch('InitData');
|
||
// uni.navigateBack(-1);
|
||
uni.showToast({
|
||
title:'更新成功',
|
||
image:'../../static/images/icon/ok-icon.png'
|
||
})
|
||
//同步保存到用户中心的数据库
|
||
let upinfo={
|
||
aid:this.aid,
|
||
sign:'',
|
||
avatar:rs.result.filePath
|
||
}
|
||
apiUserBasic.updateUser(upinfo).then(rs=>{
|
||
if(rs.status!=200){
|
||
console.error('更新用户中心用户像头失败');
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title:'更新失败'
|
||
})
|
||
}
|
||
})
|
||
|
||
}
|
||
});
|
||
uni.hideLoading();
|
||
}
|
||
})
|
||
},
|
||
confirmClear(){
|
||
let that = this;
|
||
that.$store.dispatch("LogOut").then(rs =>{
|
||
that.clearShow=false;
|
||
if(rs.status==200){
|
||
let loginPath=this.$config.loginPathLogin;
|
||
if(loginPath.startsWith('http')){
|
||
// #ifdef APP-PLUS
|
||
plus.runtime.openURL(loginPath) //这里默认使用外部浏览器打开而不是内部web-view组件打开
|
||
// #endif
|
||
// #ifdef H5
|
||
//window.open(loginPath)
|
||
location.href=loginPath;
|
||
// #endif
|
||
}else{
|
||
uni.redirectTo({
|
||
url:loginPath
|
||
})
|
||
}
|
||
}else{
|
||
that.$refs.loginToast.show({message:'退出失败',type:'error'});
|
||
}
|
||
}).catch(() => {
|
||
that.clearShow=false;
|
||
});
|
||
},
|
||
// 跳转到对应修改页面
|
||
toRouter(name) {
|
||
let router={
|
||
nickName:'nickName',
|
||
newBirt:'newBirt',
|
||
indLabels:'indLabels',
|
||
next:'next'
|
||
}
|
||
if(name==='headimg'){
|
||
uni.navigateTo({
|
||
url: '/pages/my/headimg'
|
||
})
|
||
}else{
|
||
uni.navigateTo({
|
||
url: `/pages/login/${router[name]}`
|
||
})
|
||
}
|
||
},
|
||
async load(){
|
||
uni.showLoading({ title: '加载中...' });
|
||
await userApi.detail(this.aid).then(res=>{
|
||
if(res.status==200){
|
||
if(res.result.account.avatar){
|
||
res.result.account.avatar=this.$config.fileUrl+res.result.account.avatar
|
||
}
|
||
this.userInfoObj=res.result
|
||
}else{
|
||
uni.showToast({
|
||
title: "获取数据失败",
|
||
icon:'none'
|
||
});
|
||
}
|
||
})
|
||
uni.hideLoading();
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.relieveLogin{
|
||
width: 40px;
|
||
text-align: center;
|
||
border-radius: 3px;
|
||
text {
|
||
font-size: 14px;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
.activeRelieveLogin{
|
||
color: red;
|
||
border: 1px solid red;
|
||
text{
|
||
color: red !important;
|
||
}
|
||
}
|
||
.noRelieveLogin{
|
||
border: 1px solid #ccc;
|
||
color: #ccc;
|
||
text{
|
||
color: #ccc !important;
|
||
}
|
||
}
|
||
/deep/ .u-modal{
|
||
width: 288px !important;
|
||
border-radius: 28upx;
|
||
}
|
||
/deep/ .u-modal__content{
|
||
text-align: center;
|
||
font-size: 36upx;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
padding: 33px 25px 33px 25px;
|
||
}
|
||
.uavatar{
|
||
border:1px solid #73adfe;
|
||
color:#73adfe;
|
||
text-align: center;
|
||
font-size: 6pt;
|
||
line-height: 20px;
|
||
vertical-align: middle;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 20px;
|
||
}
|
||
.settingDetail {
|
||
|
||
.u-demo-block__content{
|
||
margin-top: 10px;
|
||
font-family: PingFangSC-Regular;
|
||
}
|
||
|
||
/deep/.u-cell__body{
|
||
padding: 17px 18px;
|
||
}
|
||
|
||
/deep/.u-form-item__body__left__content__label {
|
||
width: 100px;
|
||
}
|
||
|
||
.u-input {
|
||
margin-left: 50px;
|
||
}
|
||
|
||
.setInfoItem {
|
||
// padding: 0 20px;
|
||
padding-top: 20px;
|
||
background: white;
|
||
|
||
.u-demo-block__title{
|
||
margin-left: 35upx;
|
||
font-size: 18px;
|
||
color: rgba(51, 51, 51, 1);
|
||
font-family: PingFangSC-Medium;
|
||
}
|
||
|
||
text {
|
||
font-weight: 600;
|
||
}
|
||
|
||
>view {
|
||
margin: 10px 2px;
|
||
|
||
|
||
>text {
|
||
font-weight: 400;
|
||
}
|
||
|
||
view {
|
||
text {
|
||
color: #101010;
|
||
font-weight: 400;
|
||
align-items: center;
|
||
}
|
||
|
||
text:last-of-type {
|
||
// margin-left: 6px;
|
||
}
|
||
|
||
.hideStyle {
|
||
font-size: 12px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.arrow-right {
|
||
margin-top: 6px;
|
||
}
|
||
}
|
||
}
|
||
|
||
//虚线
|
||
// >view:not(:last-of-type) {
|
||
// border-bottom: 1px solid #eaecef;
|
||
// }
|
||
}
|
||
|
||
.u-button {
|
||
//background-color: blue;
|
||
}
|
||
|
||
.exitBtn {
|
||
padding-top: 25upx;
|
||
}
|
||
}
|
||
</style>
|