334 lines
9.0 KiB
Vue
334 lines
9.0 KiB
Vue
<template>
|
|
<view class="mine-setting-container" :style="{height: `${windowHeight}px`}" >
|
|
<tui-list-view class="mine-menu-list" unlined="all">
|
|
<tui-list-cell :arrow="true" >
|
|
<view class="tui-item-box align-center">
|
|
<view class="tui-list-cell_name">头像</view>
|
|
<view class="tui-right">
|
|
<cloud-image v-if="userInfo.avatar_file" class="avatar"
|
|
:src="userInfo.avatar_file.url"></cloud-image>
|
|
<image class="cu-avatar"
|
|
src="https://env-00jxt5y29hrd.normal.cloudstatic.cn/static/center/avatar.png?expire_at=1741157497&er_sign=9b8381ae7875137d28c57d502762691b"
|
|
mode=""
|
|
v-else></image>
|
|
</view>
|
|
</view>
|
|
</tui-list-cell>
|
|
<tui-list-cell :arrow="true" @click="handleShowModal(0)">
|
|
<view class="tui-item-box">
|
|
<view class="tui-list-cell_name">昵称</view>
|
|
<view class="tui-right">{{ userInfo.nickname }}</view>
|
|
</view>
|
|
</tui-list-cell>
|
|
<tui-list-cell :arrow="true" @click="handleShowModal(2)" >
|
|
<view class="tui-item-box">
|
|
<view class="tui-list-cell_name" >性别</view>
|
|
<view class="tui-right">
|
|
{{renderGener()}}
|
|
</view>
|
|
</view>
|
|
</tui-list-cell>
|
|
<tui-list-cell :arrow="true" @click="handleShowModal(1)" >
|
|
<view class="tui-item-box">
|
|
<view class="tui-list-cell_name" >个人简介</view>
|
|
<view class="tui-right">{{'' || '这个人很神秘，什么都没写'}}</view>
|
|
</view>
|
|
</tui-list-cell>
|
|
</tui-list-view>
|
|
|
|
<tui-list-view class="mine-menu-list" marginTop="15px" unlined="all">
|
|
<tui-list-cell>
|
|
<view class="tui-item-box">
|
|
<view class="tui-list-cell_name">邮箱</view>
|
|
<view class="tui-right">{{userInfo.email || '暂无'}}</view>
|
|
</view>
|
|
</tui-list-cell>
|
|
<tui-list-cell :arrow="true" @click="handleBindMobile">
|
|
<view class="tui-item-box">
|
|
<view class="tui-list-cell_name">手机号</view>
|
|
<view class="tui-right">{{userInfo.mobile || '暂无'}}</view>
|
|
</view>
|
|
</tui-list-cell>
|
|
<tui-list-cell >
|
|
<view class="tui-item-box">
|
|
<view class="tui-list-cell_name">UID</view>
|
|
<view class="tui-right">
|
|
{{userInfo._id}}
|
|
</view>
|
|
</view>
|
|
</tui-list-cell>
|
|
</tui-list-view>
|
|
<tui-list-view class="mine-menu-list" marginTop="15px" unlined="all">
|
|
<tui-list-cell :arrow="true" @click="handleToRepassword" >
|
|
<view class="tui-item-box">
|
|
<view class="tui-list-cell_name">重置密码</view>
|
|
<view class="tui-right">前往</view>
|
|
</view>
|
|
</tui-list-cell>
|
|
</tui-list-view>
|
|
<view class="cu-list menu">
|
|
<view class="cu-item" >
|
|
<view class="content text-center" @click="handleLogout">
|
|
<text class="text-black">退出登录</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<tui-modal :show="modal1" :custom="true" @cancel="modal1 = !modal1" fadeIn >
|
|
<view class="tui-modal-custom">
|
|
<view class="tui-prompt-title">请输入昵称</view>
|
|
<input v-show="currentEdit === 0" placeholder="请输入新昵称" class="tui-modal-input"
|
|
:class="{'tui-hidden-input':!modal1}"
|
|
v-model="updateForm.nickname" />
|
|
<input v-show="currentEdit === 1" placeholder="请编辑简介" class="tui-modal-input"
|
|
:class="{'tui-hidden-input':!modal1}"
|
|
v-model="updateForm.comment" />
|
|
<view v-if="currentEdit === 2" class="gender-content flex">
|
|
<view :class="updateForm.gender === 1 ? 'active': ''"
|
|
@click="updateForm.gender = 1"
|
|
class="cu-tag lg line-grey radius">男</view>
|
|
<view :class="updateForm.gender === 2 ? 'active': ''"
|
|
@click="updateForm.gender = 2"
|
|
class="cu-tag lg line-grey radius">女</view>
|
|
<view :class="updateForm.gender === 0 ? 'active': ''"
|
|
@click="updateForm.gender = 0"
|
|
class="cu-tag lg line-grey radius">保密</view>
|
|
</view>
|
|
<tui-button height="72rpx" :size="28" shape="circle" @click="updateUserInfo">立即提交</tui-button>
|
|
</view>
|
|
</tui-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
const uniIdCo = uniCloud.importObject("uni-id-co")
|
|
import {
|
|
store,
|
|
mutations
|
|
} from '@/uni_modules/uni-id-pages/common/store.js';
|
|
|
|
import tuiListView from "@/components/thorui/tui-list-view/tui-list-view.vue";
|
|
import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell.vue";
|
|
import tuiButton from "@/components/thorui/tui-button/tui-button.vue";
|
|
import tuiModal from "@/components/thorui/tui-modal/tui-modal.vue";
|
|
|
|
const db = uniCloud.database();
|
|
const usersTable = db.collection('uni-id-users')
|
|
export default {
|
|
components: {
|
|
tuiButton,
|
|
tuiListCell,
|
|
tuiListView,
|
|
tuiModal
|
|
},
|
|
computed: {
|
|
userInfo() {
|
|
return store.userInfo
|
|
},
|
|
realNameStatus () {
|
|
if (!this.userInfo.realNameAuth) {
|
|
return 0
|
|
}
|
|
|
|
return this.userInfo.realNameAuth.authStatus
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
statusBarHeight: uni.getSystemInfoSync()['statusBarHeight'],
|
|
windowHeight: uni.getSystemInfoSync().windowHeight,
|
|
modal1: false,
|
|
currentEdit: 0,
|
|
updateForm: {
|
|
nickname: '',
|
|
gender: '',
|
|
comment: ''
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
// this.updateForm.gender = this.loginUser.gender;
|
|
},
|
|
methods: {
|
|
handleToRepassword () {
|
|
// if (!this.userInfo.mobile) {
|
|
// console.log("需要绑定手机号!");
|
|
// return;
|
|
// }
|
|
uni.navigateTo({url: `../../uni_modules/uni-id-pages/pages/userinfo/change_pwd/change_pwd` })
|
|
},
|
|
handleShowModal (index) {
|
|
this.currentEdit = index
|
|
this.modal1 = true;
|
|
},
|
|
updateUserInfo() {
|
|
let updates = {};
|
|
if (this.updateForm.nickname) updates.nickname = this.updateForm.nickname;
|
|
if (this.updateForm.gender ||this.updateForm.gender === 0) updates.gender = this.updateForm.gender;
|
|
if (this.updateForm.comment) updates.comment = this.updateForm.comment;
|
|
usersTable.where({
|
|
_id: this.userInfo._id
|
|
}).update(updates).then(e => {
|
|
if (e.result.updated) {
|
|
uni.showToast({ title: '更新成功', icon: 'none' });
|
|
mutations.setUserInfo(updates);
|
|
} else {
|
|
uni.showToast({ title: '没有变化', icon: 'none' });
|
|
}
|
|
})
|
|
this.modal1 = false;
|
|
},
|
|
handleLogout () {
|
|
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定退出登录吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
mutations.logout()
|
|
uni.switchTab({ url: '/pages/my/my' })
|
|
}
|
|
}
|
|
});
|
|
},
|
|
renderGener () {
|
|
console.log(this.userInfo);
|
|
if (!this.userInfo) return "保密";
|
|
if (this.userInfo.gender === 0) return '保密';
|
|
if (this.userInfo.gender === 1) return '男';
|
|
if (this.userInfo.gender === 2) return '女';
|
|
return '保密';
|
|
},
|
|
// 绑定手机号
|
|
handleBindMobile () {
|
|
uni.navigateTo({
|
|
url: `../../uni_modules/uni-id-pages/pages/userinfo/bind-mobile/bind-mobile`
|
|
})
|
|
},
|
|
// 更换头像
|
|
setAvatar() {
|
|
uni.chooseImage({
|
|
count: 1,
|
|
success: (res) => {
|
|
// 头像剪裁尺寸
|
|
let options = {
|
|
width: 600,
|
|
height: 600
|
|
}
|
|
// 剪裁并上传头像
|
|
uni.navigateTo({
|
|
url: '/pages/mine/setting/cutImage?path=' +
|
|
res.tempFilePaths[0] +
|
|
`&options=${JSON.stringify(options)}`,
|
|
animationType: "fade-in",
|
|
events: {
|
|
uploadAvatarAfter: ({
|
|
url
|
|
}) => {
|
|
console.log(url);
|
|
// 使用 clientDB 提交数据
|
|
usersTable.where('_id==$env.uid').update({
|
|
avatar: url
|
|
}).then((res) => {
|
|
console.log(res);
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '修改成功'
|
|
})
|
|
this.setUserInfo({
|
|
avatar: url
|
|
});
|
|
}).catch((err) => {
|
|
uni.showModal({
|
|
content: err.message ||
|
|
'请求服务失败',
|
|
showCancel: false
|
|
})
|
|
}).finally(() => {
|
|
uni.hideLoading()
|
|
})
|
|
}
|
|
}
|
|
});
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
uni-page-wrapper {
|
|
background-color: #f5f6f7;
|
|
}
|
|
.mine-setting-container {
|
|
width: 100%;
|
|
background-color: #f5f6f7;
|
|
.mine-menu-list {
|
|
margin-top: 15px;
|
|
border-radius: 8px;
|
|
.tui-item-box {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
.tui-list-cell_name {
|
|
padding-left: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tui-ml-auto {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.menu-icon {
|
|
color: #007AFF;
|
|
font-size: 16px;
|
|
margin-right: 5px;
|
|
}
|
|
.tui-right {
|
|
margin-left: auto;
|
|
margin-right: 34rpx;
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tui-modal-custom {
|
|
.tui-modal-input {
|
|
height: 44px;
|
|
border-bottom: 1px solid #ccc;
|
|
margin: 20px 10px;
|
|
}
|
|
.gender-content {
|
|
margin: 20px 0px;
|
|
.cu-tag {
|
|
padding: 15px 20px;
|
|
margin: 0px 10px;
|
|
&.active {
|
|
background-color: #007AFF;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.cu-avatar{
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 12rpx;
|
|
// border: 3px solid #3a5fb6;
|
|
}
|
|
.text-center {
|
|
|
|
text-align: center;
|
|
}
|
|
.cu-list {
|
|
background-color: #fff;
|
|
margin-top: 50rpx;
|
|
padding: 20rpx
|
|
}
|
|
</style>
|
|
|