pay-video-applet-uniapp-24-8-22/pages/index/center.vue

<template>
	<view style="display: flex;flex-direction: column; width: 100vw;height: 100vh;">
		<tabber :select="2" />
		<!-- 顶部 -->
		<view style="width: 100%;height: 30%;">
			<image src="https://tennis-oss.xzaiyp.top/2024-09-07/05cbb032-8177-478e-8fbe-0a3797096890.png"
				style="width: 100%;height: 100%;"></image>
		</view>

		<!--中部 用户信息-->
		<view
			style="box-shadow: 0 0 10px rgba(47, 125, 125, 0.5);border-radius: 20rpx;position: absolute;top: 20%;left: 10%;   width:80%;height: 12%;z-index: 1;background: white;">
			<!--头像-->
			<view style="box-shadow: 0 0 10px rgba(47, 125, 125, 0.5);position: absolute;z-index:2;width:30%;height:90%;border-radius: 50%;
				overflow: hidden;top: -32%;left: 5%;">
				<image :src="userInfo.headImage || '微信用户'" style="width: 100%;height: 100%;"></image>
			</view>
			<!--福利中心-->
			<!-- <view style="position: absolute;z-index:2;width:33%;height:30%;top: 13%;right: 2%;">
				<image src="/static/image/center/flzx.png" style="width: 100%;height: 100%;"></image>
			</view> -->
			<!--  未认证-->
			<view style="position: absolute;z-index:2;width:20%;height:25%;top: 38%;left: 31%;">
				<image src="/static/image/center/wrz.svg" style="width: 100%;height: 100%;"></image>
			</view>
			<!--  去认证  -->
			<view style="position: absolute;z-index:2;height:20%;top: 39%;left: 52%;">
				<span style="font-size: 26rpx;font-weight: 700;" class="textColor" @click="toAuthPage">去认证</span>
			</view>
			<!--  用户信息  -->
			<view style="position: absolute;z-index:2;width:55%;height:20%;top: 65%;left: 7%;">
				<view>
					<span style="font-size: 35rpx;margin-right: 5rpx">{{ userInfo.nickName || '微信用户' }}</span>
					<span style="font-size: 18rpx">{{ userInfo.phone||'暂无联系方式' }}</span>
				</view>
			</view>
			<!--  点赞量  -->
			<!-- <view
				style="display: flex;flex-direction: column;gap:2rpx ;position: absolute;z-index:2;width:15%;height:40%;top: 55%;right: 3%;">
				<view style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;">
					<image src="/static/image/center/dianZan.svg" style="width: 40%;height: 84%;"></image>
				</view>
				<view style="display: flex;justify-content: center ;font-size: 20rpx;color:#777777">点赞量</view>
			</view> -->
		</view>

		<!-- 下部 -->
		<view style="width: 100%;height: 70%;padding-top:150rpx">
			<view>
				<!--上GridView-->
				<view>
					<uv-grid :col="4">
						<uv-grid-item v-for="(item,index) in baseList" :key="index" @click="goToPage(item)">
							<img :src="item.imageUrl" :alt="item.title"
								:style="{ width: '60rpx', height: '60rpx',marginBottom: '10rpx'}" />
							<text style="font-size: 28rpx;color: #333333;">{{ item.title }}
							</text>
						</uv-grid-item>
					</uv-grid>
				</view>


				<!--其他-->
				<view style="margin:50rpx 0  0 50rpx;font-size: 40rpx;color: #333333;">其他</view>

				<!--下GridView-->
				<view style="margin-top: 50rpx;">
					<uv-grid :col="4">
						<uv-grid-item v-for="(item,index) in otherList" :key="index" @click="goToPage(item)">
							<img :src="item.imageUrl" :alt="item.title"
								:style="{ width: '60rpx', height: '60rpx',marginBottom: '10rpx'}" />
							<text style="font-size: 28rpx;color: #333333;">{{ item.title }}
							</text>
						</uv-grid-item>
					</uv-grid>
				</view>
			</view>
		</view>


		<!--  退出弹框-->
		<confirmationPopup ref="confirmationPopup" title="提示" :cancel="true" @confirm="handleConfirm"
			@cancel="handleCancel" confirmText="确认">
			<view class="confirmationPopup">
				<view style="text-align:center">
					确认退出登录吗？
				</view>
			</view>
		</confirmationPopup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import tabber from '@/components/base/tabbar.vue'
	import confirmationPopup from "@/components/toast/confirmationPopup.vue";

	export default {
		components: {
			confirmationPopup,
			tabber,
		},
		computed: {
			...mapState(['userInfo']),
		},
		data() {
			return {
				// 基础列表
				baseList: [{
						name: 'photo',
						imageUrl: 'https://tennis-oss.xzaiyp.top/2024-09-09/f9d757ca-a95a-42d7-86aa-38c288f2c54f.svg',
						title: '我的发布',
						gotoPageUrl: '/mine/releaseRecord'
					},
					{
						name: 'lock',
						imageUrl: 'https://tennis-oss.xzaiyp.top/2024-09-09/f6fbb99f-c381-498a-8367-e91fc5e05cd6.svg',
						title: '我的推广',
						gotoPageUrl: '/mine/promotionRecord'
					},
					{
						name: 'star',
						imageUrl: 'https://tennis-oss.xzaiyp.top/2024-09-09/85fe8ad3-5094-473f-b184-ef4cf5c1db6e.svg',
						title: '我的银行卡',
						gotoPageUrl: '/mine/addBankCard'
					},
					{
						name: 'star',
						imageUrl: 'https://tennis-oss.xzaiyp.top/2024-09-09/45ec00a0-3c12-4246-bfe3-a658ccf1f912.svg',
						title: '我的钱包',
						gotoPageUrl: '/mine/purse'
					},
				],
				// 其他列表
				otherList: [{
						name: 'photo',
						imageUrl: 'https://tennis-oss.xzaiyp.top/2024-09-09/8bc56d2e-380a-4656-8a33-592d374d246a.svg',
						title: '实名信息',
						gotoPageUrl: '/mine/certifiedIndividual'
					},
					{
						name: 'lock',
						imageUrl: 'https://tennis-oss.xzaiyp.top/2024-09-09/cd007424-1336-402c-8390-26c4f21deb80.svg',
						title: '帮助反馈'
					},
					{
						name: 'lock',
						imageUrl: 'https://tennis-oss.xzaiyp.top/2024-09-09/ef58bc0b-ead6-4053-83b4-339aa02805d2.svg',
						title: '修改个人信息',
						gotoPageUrl: '/mine/updateUserInfo'
					},
					{
						name: 'outLogin',
						imageUrl: 'https://tennis-oss.xzaiyp.top/2024-09-09/4ae3829e-7b07-4d6d-843b-2b7fd21ba346.svg',
						title: '退出登录',
					},
				],
			}
		},
		onShow() {
			// 获取用户个人信息
			this.$store.commit('getUserInfo')
		},
		methods: {
			toAuthPage() {
				uni.navigateTo({
					url: '/pages_mine/mine/authOption'
				})
			},
			// 点击列表跳转页面
			goToPage(item) {
				if (item.name == 'outLogin') {
					//
					this.$refs.confirmationPopup.open()
					return
				}
				uni.navigateTo({
					url: '/pages_mine' + item.gotoPageUrl
				})

			},
			handleConfirm() {
				// 退出登录
				console.log("退出登录")
				this.$api('loginLogout', res => {
					if (res.code == 200) {
						uni.removeStorageSync('token')
						this.$store.state.userInfo = {}
						uni.redirectTo({
							url: '/pages/index/index'
						})
					}
				})
				this.$refs.confirmationPopup.close()
			},
			handleCancel() {
				// 取消退出登录
				console.log("取消退出登录")
				this.$refs.confirmationPopup.close()
			}

		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.textColor {
		background: $uni-linear-gradient-color;
		-webkit-background-clip: text;
		/*将设置的背景颜色限制在文字中*/
		-webkit-text-fill-color: transparent;
		/*给文字设置成透明*/
	}

	.confirmationPopup {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 200rpx;

		image {
			margin-top: 40rpx;
		}

		.info {
			margin-top: 40rpx;
			font-size: 26rpx;
		}
	}
</style>