|
|
<script setup>
|
|
|
/**
|
|
|
* name：
|
|
|
* user：sa0ChunLuyu
|
|
|
* date：2022-04-23 21:25:04
|
|
|
*/
|
|
|
|
|
|
import {
|
|
|
ref,
|
|
|
onMounted
|
|
|
} from 'vue'
|
|
|
import config from '@/config.js'
|
|
|
|
|
|
import {
|
|
|
bindUserPhoneAction,
|
|
|
setUserAccountAction,
|
|
|
editUserNicknameAction,
|
|
|
uploadUserAvatarAction,
|
|
|
getUserInfoAction,
|
|
|
getConfigAction
|
|
|
} from '@/api/index.js'
|
|
|
import {
|
|
|
loginJump
|
|
|
} from '@/tool/login.js'
|
|
|
import {
|
|
|
useStore
|
|
|
} from 'vuex'
|
|
|
const $store = useStore()
|
|
|
|
|
|
const user_info = ref(false)
|
|
|
const edit_nickname = ref(false)
|
|
|
onMounted(() => {
|
|
|
getUserInfo()
|
|
|
})
|
|
|
|
|
|
const getConfigPhone = () => {
|
|
|
getConfigAction("'设置手机号'", (list) => {
|
|
|
if (Number(list["设置手机号"].content) === 1) {
|
|
|
uni.$lu.toast('根据规定，请绑定手机号');
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const getUserInfo = () => {
|
|
|
getUserInfoAction((info) => {
|
|
|
user_info.value = info
|
|
|
if (!user_info.value.phone) getConfigPhone()
|
|
|
if (user_info.value.account) user_account.value = user_info.value.account.account
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const uploadUserAvatar = (toast = true) => {
|
|
|
$store.commit('loadingStart')
|
|
|
uploadUserAvatarAction(user_info.value.info.avatar, () => {
|
|
|
$store.commit('loadingDone')
|
|
|
if (toast) uni.$lu.toast('上传成功');
|
|
|
getUserInfo()
|
|
|
}, () => {
|
|
|
$store.commit('loadingDone')
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const onChooseAvatar = (e) => {
|
|
|
checkAvatarUrl(e.detail.avatarUrl)
|
|
|
}
|
|
|
|
|
|
const checkAvatarUrl = (avatar, toast = true) => {
|
|
|
if (avatar.indexOf('thirdwx.qlogo.cn') === -1) {
|
|
|
wx.getFileSystemManager().readFile({
|
|
|
filePath: avatar,
|
|
|
encoding: 'base64',
|
|
|
success: res => {
|
|
|
let base64 = 'data:image/png;base64,' + res.data;
|
|
|
user_info.value.info.avatar = base64
|
|
|
uploadUserAvatar(toast)
|
|
|
}
|
|
|
});
|
|
|
} else {
|
|
|
uni.request({
|
|
|
url: avatar,
|
|
|
method: 'GET',
|
|
|
responseType: 'arraybuffer',
|
|
|
success: res => {
|
|
|
let base64 = 'data:image/png;base64,' + uni.arrayBufferToBase64(res.data);
|
|
|
user_info.value.info.avatar = base64
|
|
|
uploadUserAvatar(toast)
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const updateUserInfo = (res) => {
|
|
|
wx.getUserProfile({
|
|
|
desc: '新用户完善用户资料',
|
|
|
success: (res) => {
|
|
|
let d = res.userInfo
|
|
|
user_info.value.info.nickname = d.nickName
|
|
|
editUserNickname()
|
|
|
user_info.value.info.avatar = d.avatarUrl
|
|
|
checkAvatarUrl(user_info.value.info.avatar, false)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const phoneLoginButtonClick = (e) => {
|
|
|
uni.login({
|
|
|
provider: 'weixin',
|
|
|
success: (loginRes) => {
|
|
|
bindUserPhone({
|
|
|
code: loginRes.code,
|
|
|
iv: e.detail.iv,
|
|
|
encrypted_data: e.detail.encryptedData,
|
|
|
})
|
|
|
},
|
|
|
});
|
|
|
}
|
|
|
|
|
|
const user_account = ref('')
|
|
|
const edit_account = ref(false)
|
|
|
const user_password = ref('')
|
|
|
const check_password = ref('')
|
|
|
const old_password = ref('')
|
|
|
|
|
|
const editAccountClick = () => {
|
|
|
if (!user_info.value.account) {
|
|
|
edit_account.value = true
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const editUserNickname = () => {
|
|
|
$store.commit('loadingStart')
|
|
|
editUserNicknameAction(user_info.value.info.nickname, () => {
|
|
|
$store.commit('loadingDone')
|
|
|
uni.$lu.toast('设置成功');
|
|
|
getUserInfo()
|
|
|
}, () => {
|
|
|
$store.commit('loadingDone')
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const editNicknameDone = () => {
|
|
|
if (!user_info.value.info.nickname) return uni.$lu.toast('请输入昵称');
|
|
|
if (user_info.value.info.nickname.length < 2 || user_info.value.info.nickname.length > 20) return uni.$lu.toast('昵称长度应在2-20字符之间');
|
|
|
edit_nickname.value = false
|
|
|
editUserNickname()
|
|
|
}
|
|
|
|
|
|
const bindUserPhone = (data) => {
|
|
|
$store.commit('loadingStart')
|
|
|
bindUserPhoneAction(data, () => {
|
|
|
$store.commit('loadingDone')
|
|
|
uni.$lu.toast('设置成功');
|
|
|
getUserInfo()
|
|
|
let jump_path = uni.getStorageSync('JUMP_PATH')
|
|
|
if (jump_path) loginJump()
|
|
|
}, () => {
|
|
|
$store.commit('loadingDone')
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const setUserAccount = () => {
|
|
|
if (!user_password.value) return uni.$lu.toast('请输入密码');
|
|
|
if (user_password.value.length < 6 || user_password.value.length > 20) return uni.$lu.toast('密码长度应在6-20字符之间');
|
|
|
if (user_password.value !== check_password.value) return uni.$lu.toast('两次输入的密码不一致');
|
|
|
let data = {}
|
|
|
if (user_info.value.account) {
|
|
|
if (!old_password.value) return uni.$lu.toast('请输入旧密码');
|
|
|
data.old_password = old_password.value
|
|
|
data.password = user_password.value
|
|
|
} else {
|
|
|
if (!user_account.value) return uni.$lu.toast('请输入账号');
|
|
|
if (user_account.value.length < 2 || user_account.value.length > 20) return uni.$lu.toast(
|
|
|
'账号长度应在2-20字符之间');
|
|
|
data.account = user_account.value
|
|
|
data.password = user_password.value
|
|
|
}
|
|
|
$store.commit('loadingStart')
|
|
|
setUserAccountAction(data, () => {
|
|
|
$store.commit('loadingDone')
|
|
|
uni.$lu.toast('设置成功');
|
|
|
old_password.value = ''
|
|
|
user_password.value = ''
|
|
|
check_password.value = ''
|
|
|
getUserInfo()
|
|
|
}, () => {
|
|
|
$store.commit('loadingDone')
|
|
|
})
|
|
|
}
|
|
|
</script>
|
|
|
<template>
|
|
|
<Loading></Loading>
|
|
|
<view v-if="user_info">
|
|
|
<view class="info_line_wrapper user_avatar_wrapper">
|
|
|
<view class="info_title_wrapper">头像</view>
|
|
|
<view class="user_info_avatar_wrapper">
|
|
|
<u-image :src="user_info.info.avatar" width="140rpx" height="140rpx">
|
|
|
</u-image>
|
|
|
<button class="opentype_button_wrapper" open-type="chooseAvatar"
|
|
|
@chooseavatar="onChooseAvatar">获取头像</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="info_line_wrapper user_nickname_wrapper">
|
|
|
<view class="info_title_wrapper">昵称</view>
|
|
|
<view class="info_content_wrapper">
|
|
|
<view v-if="!edit_nickname" @click="edit_nickname = true">
|
|
|
{{ user_info.info.nickname?user_info.info.nickname:'未设置' }}
|
|
|
</view>
|
|
|
<view v-else>
|
|
|
<input :focus="edit_nickname" @blur="editNicknameDone()" type="nickname"
|
|
|
v-model="user_info.info.nickname" placeholder="请输入昵称" />
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view>
|
|
|
<view class="primary_button_wrapper get_wx_info_wrapper">
|
|
|
<button class="opentype_button_wrapper" @tap="updateUserInfo" withCredentials="true">获取信息</button>
|
|
|
授权获取微信头像和昵称
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="info_line_wrapper user_nickname_wrapper">
|
|
|
<button class="opentype_button_wrapper" open-type="getPhoneNumber" @getphonenumber="phoneLoginButtonClick"
|
|
|
withCredentials="true">获取手机号</button>
|
|
|
<view class="info_title_wrapper">手机号</view>
|
|
|
<view class="info_content_wrapper">
|
|
|
<view>
|
|
|
{{ user_info.phone?user_info.phone.account:'未设置，点击此处设置' }}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="info_line_wrapper user_nickname_wrapper">
|
|
|
<view class="info_title_wrapper">账号</view>
|
|
|
<view class="info_content_wrapper">
|
|
|
<view v-if="!edit_account" @click="editAccountClick()">
|
|
|
{{ user_account?user_account:'未设置' }}
|
|
|
</view>
|
|
|
<view v-else>
|
|
|
<input :focus="edit_account" @blur="edit_account = false" v-model="user_account"
|
|
|
placeholder="请输入账号" />
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-if="user_info.account" class="info_line_wrapper user_nickname_wrapper">
|
|
|
<view class="info_title_wrapper">旧密码</view>
|
|
|
<view class="info_content_wrapper">
|
|
|
<input v-model="old_password" placeholder="请输入旧密码" />
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="info_line_wrapper user_nickname_wrapper">
|
|
|
<view class="info_title_wrapper">{{ user_info.account?'新密码':'密码' }}</view>
|
|
|
<view class="info_content_wrapper">
|
|
|
<input v-model="user_password" placeholder="请输入密码" />
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="info_line_wrapper user_nickname_wrapper">
|
|
|
<view class="info_title_wrapper">确认密码</view>
|
|
|
<view class="info_content_wrapper">
|
|
|
<input v-model="check_password" placeholder="请确认密码" />
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view>
|
|
|
<view @click="setUserAccount()" class="primary_button_wrapper get_wx_info_wrapper">
|
|
|
{{ user_info.account?'修改密码':'创建账号' }}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="info_line_wrapper user_phone_wrapper"></view>
|
|
|
</template>
|
|
|
<style scoped>
|
|
|
.get_wx_info_wrapper {
|
|
|
margin: 50rpx auto;
|
|
|
}
|
|
|
|
|
|
.info_content_wrapper {
|
|
|
text-align: right;
|
|
|
}
|
|
|
|
|
|
.user_info_avatar_wrapper {
|
|
|
width: 140rpx;
|
|
|
height: 140rpx;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.info_title_wrapper {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.info_line_wrapper {
|
|
|
position: relative;
|
|
|
padding: 30rpx;
|
|
|
display: flex;
|
|
|
min-height: 110rpx;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
</style>
|