You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
367 lines
7.4 KiB
367 lines
7.4 KiB
<template>
|
|
<LoginPrompt ref="loginPrompt"></LoginPrompt>
|
|
<view class="main">
|
|
<view class="top">
|
|
<view class="bell">
|
|
<!-- <image class="image-bell" src="/static/my/bell.png" /> -->
|
|
</view>
|
|
<view class="msg">
|
|
<view class="msg-left">
|
|
<image class="avatar"
|
|
:src="avatarUrl || 'https://d31zlh4on95l9h.cloudfront.net/default/1961d9d2e31e78e47e885231e7514a35.png'"
|
|
mode="aspectFill" />
|
|
</view>
|
|
<view class=" msg-center">
|
|
<view style="display: flex;">
|
|
<template v-if="!isEditingName">
|
|
<view class="userInfo">{{ username }}</view>
|
|
<image class="image-editName" src="/static/my/editName.png" @click="startEditName" />
|
|
</template>
|
|
<template v-else>
|
|
<input v-model="editingName" class="edit-input" @blur="finishEditName"
|
|
@keyup.enter="finishEditName" autofocus placeholder="请输入用户名" />
|
|
</template>
|
|
</view>
|
|
<view class="userId">ID:{{ dccode }}</view>
|
|
</view>
|
|
<!-- <view class="msg-right">
|
|
<image class="image-attendance" src="/static/my/Check-in.png"/>
|
|
<span style="font-size:10px;">签到</span>
|
|
</view> -->
|
|
</view>
|
|
|
|
<view class="settings-buttons">
|
|
<view class="setting-btn" @click="goToMarket">
|
|
<image src="/static/my/MarketSettings.png" class="setting-icon" />
|
|
<text>行情设置</text>
|
|
</view>
|
|
<view class="setting-btn" @click="goToGeneral">
|
|
<image src="/static/my/Settings.png" class="setting-icon" />
|
|
<text>通用设置</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="share" @click="goToShare">
|
|
<image class="img-share" src="/static/my/share.png" mode="widthFix" />
|
|
</view>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="list-item" @click="goToAccount">
|
|
<image src="/static/my/security.png" class="list-icon" />
|
|
<text>账号与安全</text>
|
|
<uni-icons type="arrowright" size="16" class="arrow" />
|
|
</view>
|
|
<!-- <view class="list-item">
|
|
<image src="/static/my/connection.png" class="list-icon" />
|
|
<text>联系我们</text>
|
|
<uni-icons type="arrowright" size="16" class="arrow" />
|
|
</view>
|
|
<view class="list-item" @click="goToNewVersion">
|
|
<image src="/static/my/update.png" class="list-icon" />
|
|
<text>新版本更新</text>
|
|
<view class="update-tip">有新版本可更新
|
|
<view class="circle"></view>
|
|
</view>
|
|
<uni-icons type="arrowright" size="16" class="arrow" />
|
|
</view>
|
|
<view class="list-item">
|
|
<image src="/static/my/opinion.png" class="list-icon" />
|
|
<text>意见反馈</text>
|
|
<uni-icons type="arrowright" size="16" class="arrow" />
|
|
</view> -->
|
|
<view class="list-item" @click="goToAbout">
|
|
<image src="/static/my/about.png" class="list-icon" />
|
|
<text>关于DeepChart</text>
|
|
<uni-icons type="arrowright" size="16" class="arrow" />
|
|
</view>
|
|
</view>
|
|
<footerBar class="static-footer" :type="type"></footerBar>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
onMounted
|
|
} from 'vue'
|
|
import {
|
|
ArrowRight
|
|
} from '@element-plus/icons-vue'
|
|
import footerBar from '../../components/footerBar.vue'
|
|
import {
|
|
getUserInfo,
|
|
updateUserInfo
|
|
} from "@/api/member"
|
|
import {
|
|
useUserStore
|
|
} from "../../stores/modules/userInfo"
|
|
const userStore = useUserStore()
|
|
|
|
const type = ref('member')
|
|
const iSMT = ref(0)
|
|
const username = ref('')
|
|
const dccode = ref('')
|
|
const avatarUrl = ref('')
|
|
const isEditingName = ref(false)
|
|
const editingName = ref('')
|
|
|
|
const userInfoRes = ref() // 用户身份信息
|
|
userInfoRes.value = getUserInfo()
|
|
userInfoRes.value.then(res => {
|
|
username.value = res.data.dcname
|
|
dccode.value = res.data.dccode
|
|
avatarUrl.value = res.data.avatar
|
|
console.log('用户信息', userInfoRes.value)
|
|
})
|
|
|
|
const startEditName = () => {
|
|
isEditingName.value = true
|
|
editingName.value = username.value
|
|
}
|
|
|
|
const finishEditName = async () => {
|
|
if (editingName.value.trim() === '' || editingName.value === username.value) {
|
|
isEditingName.value = false
|
|
return
|
|
}
|
|
try {
|
|
await updateUserInfo({
|
|
dcname: editingName.value
|
|
})
|
|
uni.showToast({
|
|
title: '昵称修改成功',
|
|
icon: 'none'
|
|
})
|
|
} catch (err) {
|
|
uni.showToast({
|
|
title: '修改失败，请重试',
|
|
icon: 'none'
|
|
})
|
|
} finally {
|
|
isEditingName.value = false
|
|
}
|
|
}
|
|
|
|
|
|
const goToGeneral = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/setting/general'
|
|
})
|
|
}
|
|
|
|
const goToMarket = () => {
|
|
uni.navigateTo({
|
|
url: '../setting/market'
|
|
})
|
|
}
|
|
|
|
const goToAccount = () => {
|
|
uni.navigateTo({
|
|
url: '../setting/account'
|
|
})
|
|
}
|
|
|
|
const goToNewVersion = () => {
|
|
uni.navigateTo({
|
|
url: '../setting/newVersion'
|
|
})
|
|
}
|
|
|
|
const goToAbout = () => {
|
|
uni.navigateTo({
|
|
url: '../setting/about'
|
|
})
|
|
}
|
|
|
|
const goToShare = () => {
|
|
console.log('用户信息==========',userStore.userInfo.isVisitor)
|
|
if (userStore.userInfo.isVisitor) {
|
|
uni.showToast({
|
|
title: '请先登录',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
uni.navigateTo({
|
|
url: '../setting/share'
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
// 状态栏高度
|
|
iSMT.value = uni.getSystemInfoSync().statusBarHeight
|
|
console.log('??????????????', iSMT.value)
|
|
console.log('通信来的用户身份', userStore.userInfo)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.static-footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
}
|
|
|
|
.top {
|
|
height: 50vh;
|
|
background-color: white;
|
|
}
|
|
|
|
.bell {
|
|
height: 9.6vh;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: flex-end;
|
|
padding-right: 50rpx;
|
|
}
|
|
|
|
.image-bell {
|
|
width: 26rpx;
|
|
height: 32rpx;
|
|
}
|
|
|
|
.msg {
|
|
height: 10.7vh;
|
|
display: flex;
|
|
margin-top: 3vh;
|
|
margin-bottom: 3vh;
|
|
}
|
|
|
|
.msg-left {
|
|
width: 252rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.avatar {
|
|
width: 175rpx;
|
|
height: 175rpx;
|
|
border-radius: 50%;
|
|
background-color: black;
|
|
}
|
|
|
|
.msg-center {
|
|
width: 388rpx;
|
|
padding-left: 2.5vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.userInfo {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.userId {
|
|
font-size: 14px;
|
|
margin-top: 1vh;
|
|
}
|
|
|
|
.image-editName {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-left: 15rpx;
|
|
}
|
|
|
|
.msg-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.image-attendance {
|
|
width: 43rpx;
|
|
height: 43rpx;
|
|
}
|
|
|
|
.settings-buttons {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.setting-btn {
|
|
width: 349rpx;
|
|
height: 135rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: rgb(243, 243, 243);
|
|
border-radius: 8%;
|
|
margin-bottom: 1vh;
|
|
}
|
|
|
|
.setting-icon {
|
|
width: 64.7rpx;
|
|
height: 64.7rpx;
|
|
margin-right: 25rpx;
|
|
}
|
|
|
|
.setting-btn text {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.share {
|
|
height: 12.6vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.img-share {
|
|
width: 720rpx;
|
|
height: 160rpx;
|
|
}
|
|
|
|
.bottom {
|
|
height: 44.5vh;
|
|
margin-top: 1vh;
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
|
|
.list-item {
|
|
width: 670rpx;
|
|
height: 7vh;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0rpx 40rpx;
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
|
|
.list-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.list-icon {
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
margin-right: 18rpx;
|
|
}
|
|
|
|
.arrow {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.update-tip {
|
|
display: flex;
|
|
color: #999;
|
|
font-size: 24rpx;
|
|
align-items: center;
|
|
margin-left: 200rpx;
|
|
justify-content: center;
|
|
}
|
|
|
|
.circle {
|
|
width: 10rpx;
|
|
height: 10rpx;
|
|
border-radius: 50%;
|
|
background-color: red;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.edit-input {
|
|
background-color: #999;
|
|
}
|
|
</style>
|