<template>
|
<view class="container-page" style="min-height: calc(100vh - 150rpx)">
|
<view>
|
<view class="form-item">
|
<view class="label">头像</view>
|
<!-- @click="uploadImg" -->
|
<view class="m-l-a m-r-0 flex">
|
<button type="balanced" open-type="chooseAvatar" class="img-button" @chooseavatar="onChooseavatar">
|
<!-- <image :src="avatarUrl" class="refreshIcon"></image> -->
|
<image class="image-size image-icon flex " style="margin-right: 0;margin-bottom: 20rpx;"
|
:src="dto.picture || '../../../../../static/icons/icon_header.png'"></image>
|
</button>
|
|
<!-- <image class="image-size image-icon flex " style="margin-right: 0;margin-bottom: 20rpx;"
|
:src="dto.picture || '../../../../../static/icons/icon_header.png'"></image> -->
|
</view>
|
</view>
|
<view class="form-item">
|
<view class="label">昵称</view>
|
|
<view class="m-l-a m-r-0 flex text-right">
|
<!-- {{dto.nickName || '-'}} -->
|
<input v-model="dto.nickName" type="nickname" placeholder="请输入昵称" @blur="bindblur"
|
@input="bindinput" style="margin-top: 16px;text-align: right;"></input>
|
</view>
|
</view>
|
|
<view label="手机号" class="form-item">
|
<view class="label require">手机号</view>
|
<view class="m-l-a m-r-0 flex">
|
<!-- {{dto.tel || '-'}} -->
|
<!-- @click="dto.tel = '13914014930'" -->
|
<!-- -->
|
<!-- #ifdef MP -->
|
<button v-if="!dto.tel" open-type="getPhoneNumber" @getphonenumber="getPhone"
|
style="background: none; border: none; font-size: 12px; box-sizing: 0px; height: 30px; outline: none; border-inline: none; margin-top: 16px;">
|
{{ dto.tel || '点击获取手机号'}}
|
</button>
|
<input v-model="dto.tel" disabled v-if="dto.tel" placeholder="请输入手机号"
|
style="margin-top: 16px;text-align: right;"></input>
|
|
<!-- #endif -->
|
<!-- #ifndef MP -->
|
<input v-model="dto.tel" placeholder="请输入手机号" style="margin-top: 16px;text-align: right;"></input>
|
|
<!-- #endif -->
|
|
<!-- <button @click="dto.tel = '13914014930'">
|
{{ dto.tel || '点击获取手机号'}}
|
</view> -->
|
</view>
|
</view>
|
|
|
</view>
|
<view class="button-green-1 m-t-20 button-fixed-bottom" @click="update">
|
保存
|
</view>
|
</view>
|
</template>
|
|
<script>
|
const appId = 'wx1441324401626290'; //需要替换成实际的
|
import WXBizDataCrypt from '@/plugins/WXBizDataCrypt.js';
|
import {
|
mapState
|
} from 'vuex'
|
|
export default {
|
|
data() {
|
return {
|
dto: {}
|
}
|
},
|
async mounted() {
|
// await this.$store.dispatch('getCurrentInfo');
|
this.dto = {
|
...this.currentInfo,
|
}
|
},
|
methods: {
|
bindblur(e) {
|
this.dto.nickName = e.detail.value; // 获取微信昵称
|
},
|
bindinput(e) {
|
this.dto.nickName = e.detail.value; // 获取微信昵称
|
},
|
async update() {
|
|
if (!this.dto.nickName) {
|
this.$message.showToast('请填写姓名')
|
return
|
}
|
// "/api/current/user/update"
|
this.$message.showLoading()
|
if (this.dto.picture && this.dto.picture.indexOf('http://tmp/') >= 0) {
|
//上传
|
const res = await this.$http.upload(this.dto.picture)
|
var picture = res.data && res.data.length > 0 && res.data[0].url || ''
|
this.dto.picture = picture
|
}
|
|
|
const {
|
code
|
} = await this.$http.request('post', "/api/current/user/update", {
|
data: {
|
...this.dto,
|
nickName: this.dto.nickName,
|
// fullName: this.dto.nickName
|
}
|
})
|
|
// // #ifndef MP
|
// if (!!this.dto.email) {
|
// if (!this.$util.isEmail(this.dto.email)) {
|
// this.$message.showToast('邮箱格式不正确')
|
// return
|
// }
|
// }
|
// const {
|
// code
|
// } = await this.$http.request('post', '/api/personnel/employee/update', {
|
// data: {
|
// ...this.dto,
|
// nickName: this.dto.nickName,
|
// // fullName: this.dto.nickName
|
// }
|
// })
|
// // #endif
|
this.$message.hideLoading()
|
|
if (code == 0) {
|
this.$message.showToast('更新成功')
|
// this.$store.commit('updateInfo',this.dto)
|
// }
|
await this.$store.dispatch('getCurrentInfo');
|
}
|
|
|
|
},
|
uploadImg() {
|
const that = this
|
uni.chooseImage({
|
count: 1, // 最多可以选择的图片张数，默认9
|
sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
|
sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
|
success: function({
|
errMsg,
|
tempFiles
|
}) {
|
if (errMsg === 'chooseImage:ok') {
|
// console.log(tempFiles[0])
|
that.$http.upload(tempFiles[0].path).then(res => {
|
// console.log('resupload',res)
|
that.dto.picture = res.data && res.data.length > 0 && res.data[0]
|
.url || ''
|
})
|
}
|
}
|
})
|
},
|
onChooseavatar(e) {
|
let self = this;
|
let {
|
avatarUrl
|
} = e.detail;
|
this.dto.picture = avatarUrl
|
console.log('avatarUrl', avatarUrl)
|
// that.$http.upload(tempFiles[0].path).then(res => {
|
// // console.log('resupload',res)
|
// that.dto.picture = res.data && res.data.length > 0 && res.data[0]
|
// .url || ''
|
// })
|
},
|
async decodetel(jsCode, encry, iv) {
|
// this.dto.tel = '13914014930';
|
// return
|
this.$message.showLoading();
|
const resp = await this.$http.request('get', '/api/wx/jscode2session', {
|
params: {
|
jsCode: jsCode
|
}
|
});
|
this.$message.hideLoading();
|
console.log('resp', resp)
|
if (resp && resp.data) {
|
var cts = resp.data;
|
var openid = cts.openid; //openid 用户唯一标识
|
if (cts && cts.openid) {
|
this.$storage.setItem('openid', cts.openid);
|
}
|
|
var session_key = cts.session_key; //session_key 会话密钥
|
|
if (true) {
|
if (!!cts.errmsg) {
|
// this.dto.tel = '13914014930';
|
this.$message.showToast('获取失败' + cts.errmsg);
|
} else {
|
//成功了，再调用
|
try {
|
console.log('data1', encry, iv, appId, session_key)
|
let pc = new WXBizDataCrypt(appId, session_key); //wxXXXXXXX为你的小程序APPID
|
console.log('data2', pc)
|
let data = pc.decryptData(encry, iv);
|
console.log('var', data)
|
// console.log(data) //data就是最终解密的用户信息
|
this.dto.tel = data.phoneNumber;
|
console.log('var', data)
|
this.$forceUpdate()
|
// this.update()
|
this.$message.showToast('获取成功');
|
|
// this.$storage.setItem('tel', this.tel);
|
|
// this.toLogin();
|
} catch (e) {
|
this.errorMsg += JSON.stringify(e);
|
console.log(e, this.errorMsg)
|
this.$message.showToast('登录过期，请重新授权');
|
// this.dto.tel = '13914014930';
|
}
|
}
|
}
|
}
|
},
|
async getPhone(e) {
|
const encry = e.detail.encryptedData;
|
const iv = e.detail.iv;
|
console.log('jsCode', e);
|
console.log('encry iv', encry, iv)
|
// this.dto.tel = '13914014930';
|
|
if (e.target && e.target.errMsg === 'getPhoneNumber:fail user deny') {
|
// this.dto.tel = '13914014930';
|
this.$message.showToast('拒绝授权手机号');
|
return;
|
}
|
|
if (e.detail && e.detail.errMsg === 'getPhoneNumber:fail no permission') {
|
// this.dto.tel = '13914014930';
|
this.$message.showToast('拒绝授权手机号');
|
return;
|
}
|
|
// return
|
let tmp = this
|
// // var jsCode = this.jsCode;
|
wx.login({
|
success: async res => {
|
console.log(res)
|
if (res.code) {
|
this.decodetel(res.code, encry, iv)
|
} else {
|
tmp.$message.showToast('wx登录失败');
|
// this.dto.tel = '13914014930';
|
}
|
},
|
error: res => {
|
console.log('wx.login error', res)
|
// this.dto.tel = '13914014930';
|
tmp.$message.showToast('微信登录失败:' + res);
|
}
|
});
|
|
},
|
|
},
|
computed: {
|
...mapState(['currentInfo'])
|
},
|
}
|
</script>
|
|
<style lang="scss">
|
.form-item {
|
// padding: 40rpx;
|
border-bottom: 1px solid #F3F3F3;
|
display: flex;
|
// height: 100px;
|
|
.label {
|
width: 200px;
|
line-height: 60px;
|
|
}
|
|
.flex {
|
line-height: 60px;
|
|
}
|
}
|
|
.container-page {
|
padding: 40rpx;
|
background-color: #FFFFFF;
|
// min-height: calc(100vh - 80rpx);
|
min-height: 100%;
|
}
|
|
.img-button {
|
background-color: #fff !important;
|
border: 1px solid #fff;
|
// border-radius: 200%;
|
color: #fff;
|
|
&::after {
|
border: none;
|
}
|
}
|
</style>
|
