381 lines
11 KiB
Vue
381 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 && userInfo.avatar_file.url) || 'https://qnycdn.mymoyu.top/static/avatar.jpg'"></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">{{ renderGender() }}</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">{{ userInfo.signature || '这个人很神秘，什么都没写' }}</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>
|
|
import { ref, computed, reactive } from 'vue'
|
|
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"
|
|
|
|
const db = uniCloud.database()
|
|
const usersTable = db.collection('uni-id-users')
|
|
|
|
export default {
|
|
components: {
|
|
tuiButton,
|
|
tuiListCell,
|
|
tuiListView,
|
|
tuiModal,
|
|
cloudImage
|
|
},
|
|
setup() {
|
|
const statusBarHeight = ref(uni.getSystemInfoSync()['statusBarHeight'])
|
|
const windowHeight = ref(uni.getSystemInfoSync().windowHeight)
|
|
const modal1 = ref(false)
|
|
const currentEdit = ref(0)
|
|
const updateForm = reactive({
|
|
nickname: '',
|
|
gender: '',
|
|
comment: ''
|
|
})
|
|
|
|
const userInfo = computed(() => store.userInfo)
|
|
|
|
const realNameStatus = computed(() => {
|
|
if (!userInfo.value.realNameAuth) return 0
|
|
return userInfo.value.realNameAuth.authStatus
|
|
})
|
|
|
|
function getFileInfo(path) {
|
|
const parts = path.split('/').pop()
|
|
const [filename, ...extParts] = parts.split('.')
|
|
const ext = extParts.length ? extParts.pop() : ''
|
|
return { name: filename, extname: ext }
|
|
}
|
|
|
|
function 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 function updateUserAvatat() {
|
|
uni.chooseImage({
|
|
type: "image",
|
|
count: 1,
|
|
async success(res) {
|
|
if (res.tempFilePaths.length > 0) {
|
|
let filePath = res.tempFilePaths[0]
|
|
let { name, extname } = getFileInfo(filePath)
|
|
const uniCloudStorageExtCo = uniCloud.importObject("ext-storage-co")
|
|
const uploadFileOptionsRes = await uniCloudStorageExtCo.getUploadFileOptions({
|
|
cloudPath: `avatar/${name}`
|
|
})
|
|
await uniCloud.uploadFile({
|
|
...uploadFileOptionsRes.uploadFileOptions,
|
|
filePath: filePath,
|
|
cloudPath: uploadFileOptionsRes.cloudPath,
|
|
success: () => {
|
|
const result = {
|
|
cloudPath: uploadFileOptionsRes.cloudPath,
|
|
fileID: uploadFileOptionsRes.fileID,
|
|
fileURL: uploadFileOptionsRes.fileURL
|
|
}
|
|
let updates = {
|
|
avatar_file: { name, extname, url: result.fileID }
|
|
}
|
|
usersTable.where({ _id: userInfo.value._id }).update(updates).then(e => {
|
|
if (e.result.updated) {
|
|
uni.showToast({ title: '更新成功', icon: 'none' })
|
|
mutations.setUserInfo(updates)
|
|
} else {
|
|
uni.showToast({ title: '没有变化', icon: 'none' })
|
|
}
|
|
})
|
|
modal1.value = false
|
|
},
|
|
fail: (err) => {
|
|
console.log("上传失败", err)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
function 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'
|
|
}
|
|
}
|
|
|
|
function getMessage(editIndex) {
|
|
if (editIndex === 0) return "请输入你的昵称"
|
|
else if (editIndex === 1) return "请填写你的个人简介"
|
|
else if (editIndex === 2) return "请选择你的性别"
|
|
}
|
|
|
|
function handleToRepassword() {
|
|
if (!userInfo.value.mobile) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '修改密码需要先绑定手机号，是否前往绑定？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.navigateTo({
|
|
url: `../../pages3/uni_modules/uni-id-pages/pages/userinfo/bind-mobile/bind-mobile`
|
|
})
|
|
}
|
|
}
|
|
})
|
|
return
|
|
}
|
|
uni.navigateTo({
|
|
url: `../../pages3/uni_modules/uni-id-pages/pages/userinfo/change_pwd/change_pwd`
|
|
})
|
|
}
|
|
|
|
function handleShowModal(index) {
|
|
currentEdit.value = index
|
|
modal1.value = true
|
|
}
|
|
|
|
function updateUserInfo() {
|
|
let updates = {}
|
|
if (updateForm.nickname) updates.nickname = updateForm.nickname
|
|
if (updateForm.gender || updateForm.gender === 0) updates.gender = updateForm.gender
|
|
if (updateForm.comment) updates.signature = updateForm.comment
|
|
usersTable.where({ _id: userInfo.value._id }).update(updates).then(e => {
|
|
if (e.result.updated) {
|
|
uni.showToast({ title: '更新成功', icon: 'none' })
|
|
mutations.setUserInfo(updates)
|
|
} else {
|
|
uni.showToast({ title: '没有变化', icon: 'none' })
|
|
}
|
|
})
|
|
modal1.value = false
|
|
}
|
|
|
|
function handleLogout() {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定退出登录吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
mutations.logout()
|
|
uni.switchTab({ url: '/pages/my/my' })
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
function renderGender() {
|
|
if (!userInfo.value) return "保密"
|
|
if (userInfo.value.gender === 0) return '保密'
|
|
if (userInfo.value.gender === 1) return '男'
|
|
if (userInfo.value.gender === 2) return '女'
|
|
return '保密'
|
|
}
|
|
|
|
function handleBindMobile() {
|
|
uni.navigateTo({
|
|
url: `../../pages3/uni_modules/uni-id-pages/pages/userinfo/bind-mobile/bind-mobile`
|
|
})
|
|
}
|
|
|
|
return {
|
|
statusBarHeight,
|
|
windowHeight,
|
|
modal1,
|
|
currentEdit,
|
|
updateForm,
|
|
userInfo,
|
|
realNameStatus,
|
|
getFileInfo,
|
|
formatBytes,
|
|
updateUserAvatat,
|
|
checkUrlProtocol,
|
|
getMessage,
|
|
handleToRepassword,
|
|
handleShowModal,
|
|
updateUserInfo,
|
|
handleLogout,
|
|
renderGender,
|
|
handleBindMobile
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.cu-list {
|
|
background-color: #fff;
|
|
margin-top: 50rpx;
|
|
padding: 20rpx
|
|
}
|
|
</style>
|