420 lines
11 KiB
Vue
420 lines
11 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" @click="updateUserAvatat()">
|
|
<view class="tui-item-box align-center">
|
|
<view class="tui-list-cell_name">头像</view>
|
|
<view class="tui-right">
|
|
<cloud-image
|
|
class="avatar" :src="userInfo.avatar_file.url"></cloud-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">{{ getMessage(currentEdit) }}</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 '@/pages3/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";
|
|
import cloudImage from "@/components/cloud-image.vue"
|
|
|
|
import { onUpdated } from "vue";
|
|
|
|
const db = uniCloud.database();
|
|
const usersTable = db.collection('uni-id-users')
|
|
export default {
|
|
components: {
|
|
tuiButton,
|
|
tuiListCell,
|
|
tuiListView,
|
|
tuiModal,
|
|
cloudImage
|
|
},
|
|
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: {
|
|
getFileInfo(path) {
|
|
const parts = path.split('/').pop();
|
|
const [filename, ...extParts] = parts.split('.');
|
|
const ext = extParts.length ? extParts.pop() : '';
|
|
return {
|
|
name: filename,
|
|
extname: ext
|
|
};
|
|
},
|
|
formatBytes(bytes) {
|
|
if (bytes === 0) return '0 Bytes';
|
|
const k = 1024;
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
|
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
|
|
if (i >= sizes.length) return '> 1 TB';
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
},
|
|
async updateUserAvatat() {
|
|
const that = this;
|
|
uni.chooseImage({
|
|
type: "image",
|
|
count: 1,
|
|
async success(res) {
|
|
console.log(res);
|
|
if (res.tempFilePaths.length > 0) {
|
|
let filePath = res.tempFilePaths[0];
|
|
let {
|
|
name,
|
|
extname
|
|
} = that.getFileInfo(filePath)
|
|
const uniCloudStorageExtCo = uniCloud.importObject("ext-storage-co");
|
|
console.log(`avatar/${name}`)
|
|
const uploadFileOptionsRes = await uniCloudStorageExtCo.getUploadFileOptions({
|
|
cloudPath: `avatar/${name}`
|
|
});
|
|
console.log({...uploadFileOptionsRes})
|
|
console.log(uploadFileOptionsRes.uploadFileOptions)
|
|
await uniCloud.uploadFile({
|
|
...uploadFileOptionsRes.uploadFileOptions,
|
|
filePath: filePath,
|
|
cloudPath: uploadFileOptionsRes.cloudPath,
|
|
success: () => {
|
|
const res = {
|
|
cloudPath: uploadFileOptionsRes.cloudPath,
|
|
fileID: uploadFileOptionsRes.fileID,
|
|
fileURL: uploadFileOptionsRes.fileURL
|
|
};
|
|
|
|
let updates = {
|
|
avatar_file: {
|
|
name: name,
|
|
extname: extname,
|
|
url: res.fileID
|
|
}
|
|
}
|
|
|
|
usersTable.where({
|
|
_id: that.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;
|
|
|
|
console.log("上传成功", res);
|
|
},
|
|
fail: (err) => {
|
|
console.log("上传失败", err);
|
|
}
|
|
});
|
|
|
|
|
|
|
|
} else {
|
|
console.log("未选中文件")
|
|
}
|
|
}
|
|
});
|
|
},
|
|
checkUrlProtocol(url) {
|
|
try {
|
|
const protocolSeparatorIndex = url.indexOf('://');
|
|
if (protocolSeparatorIndex === -1) {
|
|
return 'invalid';
|
|
}
|
|
const protocol = url.substring(0, protocolSeparatorIndex).toLowerCase();
|
|
|
|
if (protocol === 'http' || protocol === 'https') {
|
|
return 'http/https';
|
|
} else if (protocol === 'cloud') {
|
|
return 'cloud';
|
|
} else {
|
|
return 'other';
|
|
}
|
|
} catch (error) {
|
|
return 'invalid';
|
|
}
|
|
},
|
|
getMessage(currentEdit) {
|
|
if (currentEdit === 0) {
|
|
return "请输入你的昵称";
|
|
} else if (currentEdit === 1) {
|
|
return "请填写你的个人简介";
|
|
} else if (currentEdit === 2) {
|
|
return "请选择你的性别";
|
|
}
|
|
},
|
|
handleToRepassword() {
|
|
if (!this.userInfo.mobile) {
|
|
console.log("需要绑定手机号!");
|
|
return;
|
|
}
|
|
uni.navigateTo({
|
|
url: `../../pages3/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: `../../pages3/uni_modules/uni-id-pages/pages/userinfo/bind-mobile/bind-mobile`
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</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> |