495 lines
12 KiB
Vue
495 lines
12 KiB
Vue
|
<template>
|
||
|
|
<view class="user-center" v-if="flag">
|
||
|
|
<view class="top-bg" />
|
||
|
|
<!-- 页面内容 -->
|
||
|
|
<view class="page">
|
||
|
|
<!-- 用户信息 -->
|
||
|
|
<view v-if="userInfo?.id" class="user-info" @tap.stop="navToPage('profile')">
|
||
|
|
<view class="info-content">
|
||
|
|
<view class="avatar">
|
||
|
|
<image class="tn-image" :src="userInfo?.avatar" mode="aspectFill" />
|
||
|
|
</view>
|
||
|
|
<view class="content">
|
||
|
|
<view class="nickname">{{ userInfo.nickname?userInfo.nickname:userInfo.username }}</view>
|
||
|
|
<view class="uid">
|
||
|
|
<view class="text">uid: {{ userInfo?.id }}</view>
|
||
|
|
<view class="copy">
|
||
|
|
<tn-icon name="copy" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="setting-icon">
|
||
|
|
<tn-icon name="install" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view v-else class="tn-flex">
|
||
|
|
<!-- #ifdef MP -->
|
||
|
|
<view class="login-btn tn-shadow tn-mr-xs" @tap.stop="loginHandle('MP')">
|
||
|
|
<view class="icon">
|
||
|
|
<tn-icon name="wechat" />
|
||
|
|
</view>
|
||
|
|
<view class="text">授权登录</view>
|
||
|
|
</view>
|
||
|
|
<!-- #endif -->
|
||
|
|
<view class="login-btn tn-shadow" @tap.stop="loginHandle('H5')">
|
||
|
|
<view class="icon">
|
||
|
|
<tn-icon name="login" />
|
||
|
|
</view>
|
||
|
|
<view class="text">账号登录</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 会员等级、权益 -->
|
||
|
|
<view class="member-rights tn-shadow-blur">
|
||
|
|
<view class="member-content">
|
||
|
|
<view class="grade tn-text-transparent">
|
||
|
|
<span v-if="userInfo && userInfo.isAdmin === 1">管理员</span>
|
||
|
|
<span v-else-if="userInfo">普通用户</span>
|
||
|
|
<span v-else>游客</span>
|
||
|
|
</view>
|
||
|
|
<view class="desc">
|
||
|
|
<span v-if="userInfo && userInfo.openid">已绑定微信</span>
|
||
|
|
<span v-else>未绑定微信</span>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="rights-btn tn-shadow-blur tn-flex-center">
|
||
|
|
<span v-if="userInfo && userInfo.right === 1">有权访问</span>
|
||
|
|
<span v-else>限制访问</span>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 图片波浪 -->
|
||
|
|
<view class="image-wave-container">
|
||
|
|
<view class="image-wave" />
|
||
|
|
<view class="image-wave" />
|
||
|
|
<view class="image-wave" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="list tn-shadow">
|
||
|
|
<view v-if="userInfo?.id" class="list-item" @click="navToPage('profile')">
|
||
|
|
<view class="left">
|
||
|
|
<view class="icon">
|
||
|
|
<tn-icon name="my-fill" />
|
||
|
|
</view>
|
||
|
|
<view class="text"> 个人资料 </view>
|
||
|
|
</view>
|
||
|
|
<view class="right">
|
||
|
|
<view class="icon">
|
||
|
|
<tn-icon name="right" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view v-if="userInfo && userInfo.isAdmin === 1" class="list-item" @click="navToPage('member')">
|
||
|
|
<view class="left">
|
||
|
|
<view class="icon">
|
||
|
|
<tn-icon name="plane-fill" />
|
||
|
|
</view>
|
||
|
|
<view class="text"> 访客管理 </view>
|
||
|
|
</view>
|
||
|
|
<view class="right">
|
||
|
|
<view class="icon">
|
||
|
|
<tn-icon name="right" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<TnPopup v-model="showPopup">
|
||
|
|
<view class="tn-p-lg" style="width: 520rpx;">
|
||
|
|
<view class="title tn-text-bold tn-text-xl tn-text-center tn-border-bottom tn-type-success_border tn-pb">
|
||
|
|
资料填写
|
||
|
|
</view>
|
||
|
|
<view class="form tn-mt-sm tn-mb-sm">
|
||
|
|
<TnInput v-model="inputValue" underline placeholder="请输入姓名" clearable />
|
||
|
|
</view>
|
||
|
|
<view class="btn tn-flex tn-flex-center-center tn-mb-sm">
|
||
|
|
<TnButton type="primary" shadow shadow-color="#27b93a" debounce bg-color="#27b93a" font-size="32rpx" text-color="#ffffff" width="320" size="lg" @click="saveName">确 定</TnButton>
|
||
|
|
</view>
|
||
|
|
<view class="intro tn-type-error_text tn-text-sm tn-text-center">
|
||
|
|
{{popInfo}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</TnPopup>
|
||
|
|
<tab-bar :current="3"/>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { ref } from 'vue';
|
||
|
|
import baseUrl from '@/config/config';
|
||
|
|
import TnPopup from '@/uni_modules/tuniaoui-vue3/components/popup/src/popup.vue'
|
||
|
|
import TnInput from '@/uni_modules/tuniaoui-vue3/components/input/src/input.vue'
|
||
|
|
import storage from '@/utils/storage'
|
||
|
|
import TabBar from '@/pages/components/tab-bar.vue';
|
||
|
|
|
||
|
|
const flag = ref(false)
|
||
|
|
|
||
|
|
const userInfo = ref();
|
||
|
|
|
||
|
|
const showPopup = ref(false);
|
||
|
|
|
||
|
|
const popInfo = ref('')
|
||
|
|
|
||
|
|
const inputValue = ref('')
|
||
|
|
|
||
|
|
const navToPage = (name:string) => {
|
||
|
|
let url = ''
|
||
|
|
if(name === 'profile'){
|
||
|
|
url = '/pages/ucenter/profile';
|
||
|
|
}
|
||
|
|
if(name === 'member'){
|
||
|
|
url = '/pages/ucenter/member';
|
||
|
|
}
|
||
|
|
uni.navigateTo({
|
||
|
|
url:url
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const saveName = () => {
|
||
|
|
if(!inputValue.value){
|
||
|
|
uni.showToast({
|
||
|
|
icon:'none',
|
||
|
|
title:'表单不能为空！'
|
||
|
|
})
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
uni.request({
|
||
|
|
url:baseUrl + '/front/saveUser',
|
||
|
|
method:'POST',
|
||
|
|
data:{'name':inputValue.value},
|
||
|
|
success: (res:any) => {
|
||
|
|
if(res.data.code === 0){
|
||
|
|
storage.set('isLogin',true)
|
||
|
|
storage.set('storageUser',res.data.data.user)
|
||
|
|
storage.set('token',res.data.data.access_token)
|
||
|
|
getUserInfo()
|
||
|
|
uni.redirectTo({
|
||
|
|
url:'/pages/index/index'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const loginHandle = (platform:string) => {
|
||
|
|
if(platform === 'H5'){
|
||
|
|
uni.navigateTo({
|
||
|
|
url:'/pages/login/login'
|
||
|
|
})
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if(platform === 'MP'){
|
||
|
|
uni.login({
|
||
|
|
provider:'weixin',
|
||
|
|
success: (loginRes) => {
|
||
|
|
uni.getUserInfo({
|
||
|
|
provider:'weixin',
|
||
|
|
success: (infoRes) => {
|
||
|
|
uni.request({
|
||
|
|
url:baseUrl + '/front/wxlogin',
|
||
|
|
data:{
|
||
|
|
code:loginRes.code,
|
||
|
|
iv:infoRes.iv,
|
||
|
|
encryptedData:infoRes.encryptedData
|
||
|
|
},
|
||
|
|
method:'POST',
|
||
|
|
success: (res:any) => {
|
||
|
|
if(res.data.code === 0){
|
||
|
|
storage.set('isLogin',true)
|
||
|
|
storage.set('storageUser',res.data.data.user)
|
||
|
|
storage.set('token',res.data.data.access_token)
|
||
|
|
getUserInfo()
|
||
|
|
uni.redirectTo({
|
||
|
|
url:'/pages/index/index'
|
||
|
|
})
|
||
|
|
}else if(res.data.code == -1){
|
||
|
|
showPopup.value = true
|
||
|
|
popInfo.value = res.data.message
|
||
|
|
}else{
|
||
|
|
uni.showToast({
|
||
|
|
icon:'none',
|
||
|
|
title:res.data.message
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const getUserInfo = () => {
|
||
|
|
let storageUser = storage.get('storageUser');
|
||
|
|
let isLogin = storage.get('isLogin');
|
||
|
|
if(!isLogin || !storageUser){
|
||
|
|
uni.showToast({
|
||
|
|
icon:'none',
|
||
|
|
title:'你还未登录！',
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
userInfo.value = storageUser
|
||
|
|
}
|
||
|
|
flag.value = true
|
||
|
|
}
|
||
|
|
getUserInfo()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
/* 顶部背景 start */
|
||
|
|
.top-bg {
|
||
|
|
position: fixed;
|
||
|
|
top: 0rpx;
|
||
|
|
left: 0rpx;
|
||
|
|
width: 100%;
|
||
|
|
background: url('https://resource.tuniaokj.com/images/my/my-bg4.png')
|
||
|
|
no-repeat;
|
||
|
|
background-size: 100% auto;
|
||
|
|
&::before {
|
||
|
|
content: '';
|
||
|
|
display: block;
|
||
|
|
padding-top: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* 顶部背景 end */
|
||
|
|
.page {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
padding: 0rpx 30rpx;
|
||
|
|
padding-top: 200rpx;
|
||
|
|
|
||
|
|
/* 用户信息 start */
|
||
|
|
.user-info {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
|
||
|
|
.info-content {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.avatar {
|
||
|
|
position: relative;
|
||
|
|
width: 110rpx;
|
||
|
|
height: 110rpx;
|
||
|
|
border-radius: 50%;
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
top: 50%;
|
||
|
|
width: 116%;
|
||
|
|
height: 116%;
|
||
|
|
background-color: rgba(255, 255, 255, 0.5);
|
||
|
|
border-radius: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
margin-left: 28rpx;
|
||
|
|
|
||
|
|
.nickname {
|
||
|
|
font-size: 38rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 12rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.uid {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.text {
|
||
|
|
font-size: 34rpx;
|
||
|
|
color: var(--tn-color-gray);
|
||
|
|
}
|
||
|
|
|
||
|
|
.copy {
|
||
|
|
color: var(--tn-color-grey);
|
||
|
|
margin-left: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.setting-icon {
|
||
|
|
color: var(--tn-color-gray);
|
||
|
|
font-size: 50rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* 用户信息 end */
|
||
|
|
|
||
|
|
/* 授权登录 start */
|
||
|
|
.login-btn {
|
||
|
|
background-color: #1d2541;
|
||
|
|
color: #fff;
|
||
|
|
padding: 20rpx 0rpx;
|
||
|
|
width: 40%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
border-radius: 1000rpx;
|
||
|
|
line-height: 1;
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
margin-right: 20rpx;
|
||
|
|
font-size: 42rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* 授权登录 end */
|
||
|
|
|
||
|
|
/* 会员权益 start */
|
||
|
|
.member-rights {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
padding: 30rpx 40rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
background: linear-gradient(-120deg, #3e445a, #31374a, #2b3042, #262b3c);
|
||
|
|
margin-top: 60rpx;
|
||
|
|
border-radius: 20rpx;
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.member-content {
|
||
|
|
position: relative;
|
||
|
|
z-index: 3;
|
||
|
|
.grade {
|
||
|
|
font-family: 'tuniao-xiaowei';
|
||
|
|
font-size: 42rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
background-image: linear-gradient(360deg, #ffe3a3, #feeacc);
|
||
|
|
}
|
||
|
|
.desc {
|
||
|
|
font-size: 26rpx;
|
||
|
|
margin-top: 16rpx;
|
||
|
|
color: rgba(255, 255, 255, 0.7);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.rights-btn {
|
||
|
|
position: relative;
|
||
|
|
width: 160rpx;
|
||
|
|
border-radius: 1000rpx;
|
||
|
|
background-color: #f1c68e;
|
||
|
|
color: #634738;
|
||
|
|
padding: 14rpx 0;
|
||
|
|
z-index: 3;
|
||
|
|
font-weight: bold;
|
||
|
|
|
||
|
|
&::before {
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
text {
|
||
|
|
z-index: inherit;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 图片波浪 start */
|
||
|
|
.image-wave-container {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
z-index: 1;
|
||
|
|
border-radius: inherit;
|
||
|
|
|
||
|
|
.image-wave {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
width: 200%;
|
||
|
|
height: 100%;
|
||
|
|
background: url('https://resource.tuniaokj.com/images/wave/wave-2.png');
|
||
|
|
background-repeat: repeat no-repeat;
|
||
|
|
background-position: 0 bottom;
|
||
|
|
animation-name: waveAnimation;
|
||
|
|
animation-timing-function: linear;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
|
||
|
|
&:nth-child(1) {
|
||
|
|
opacity: 0.1;
|
||
|
|
background-size: 50% 45px;
|
||
|
|
animation-duration: 4s;
|
||
|
|
}
|
||
|
|
&:nth-child(2) {
|
||
|
|
opacity: 0.2;
|
||
|
|
background-size: 50% 50px;
|
||
|
|
animation-duration: 3.5s;
|
||
|
|
}
|
||
|
|
&:nth-child(3) {
|
||
|
|
opacity: 0.3;
|
||
|
|
background-size: 50% 35px;
|
||
|
|
animation-duration: 2s;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* 图片波浪 end */
|
||
|
|
}
|
||
|
|
/* 会员权益 end */
|
||
|
|
|
||
|
|
/* 列表 start */
|
||
|
|
.list {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
margin-top: 40rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
padding: 20rpx 30rpx;
|
||
|
|
|
||
|
|
.list-item {
|
||
|
|
width: 100%;
|
||
|
|
padding: 20rpx 0rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.left {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
.icon {
|
||
|
|
font-size: 40rpx;
|
||
|
|
color: #7c8191;
|
||
|
|
}
|
||
|
|
.text {
|
||
|
|
margin-left: 12rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.right {
|
||
|
|
flex-grow: 0;
|
||
|
|
flex-shrink: 0;
|
||
|
|
.icon {
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: var(--tn-color-gray);
|
||
|
|
}
|
||
|
|
.text {
|
||
|
|
font-size: 26rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* 列表 end */
|
||
|
|
}
|
||
|
|
/* 页面内容 end */
|
||
|
|
@keyframes waveAnimation {
|
||
|
|
0% {
|
||
|
|
transform: translateX(0);
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
transform: translateX(-25%);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: translateX(-50%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|