dykj-football/pages/user/index.vue

<template>
	<view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px' }" class="index-page">
		<!-- 自定义导航 -->
		<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">我的</view>
	</view>
	<view class="back-color">
		<view class="userInfo">
			<view class="userInfo-text">
				<span style="font-size: 20px; font-weight: 600;">{{'Mr.wang'}}</span>
				<span style="font-size: 10px;">{{'元宝：100.00'}}</span>
				<span style="font-size: 10px;">{{'积分:40'}}</span>
			</view>
			<view class="user-img">
				<u-avatar shape="circle" size="55" :src="src" customStyle="margin: -3px 5px -3px 0" />
				<u-icon name="arrow-right" color="#646668" size="28"></u-icon>
			</view>
		</view>
		<view class="contentInfo">
			<view class="gridBox">
				<view class="gridBox-top">
					<view class="gridBox-spuare" @click="VIPMember">
						<u-avatar shape="circle" size="55" :src="srcOne" customStyle="margin: -3px 5px -3px 0" />
						<span>vip</span>
					</view>
					<view class="gridBox-spuare" @click="recharge">
						<u-avatar shape="circle" size="55" :src="srcOne" customStyle="margin: -3px 5px -3px 0" />
						<span>充值</span>
					</view>
					<view class="gridBox-spuare">
						<u-avatar shape="circle" size="55" :src="srcOne" customStyle="margin: -3px 5px -3px 0" />
						<span>消息提醒</span>
					</view>
				</view>
				<view class="gridBox-bottom">
					<view class="gridBox-rectangle" @click="signIn">
						<span>签到</span>
						<u-avatar shape="circle" size="35" :src="srcOne" customStyle="margin: -3px 5px -3px 0" />
					</view>
					<view class="gridBox-rectangle" @click="discount">
						<span>打折活动</span>
						<u-avatar shape="circle" size="35" :src="srcOne" customStyle="margin: -3px 5px -3px 0" />
					</view>
				</view>
			</view>
			<u-cell-group>
				<u-cell title="我的关注" @click="URLto" :titleStyle="{'font-size': '16px','font-weight': '600'}"
					:isLink="true"></u-cell>
				<u-cell title="方案购买记录" @click="purchasedPlan" :titleStyle="{'font-size': '16px','font-weight': '600'}" :isLink="true"></u-cell>
				<u-cell title="积分兑换商城" @click="integralShop" :titleStyle="{'font-size': '16px','font-weight': '600'}" :isLink="true"></u-cell>
				<u-cell title="我的优惠卷" :titleStyle="{'font-size': '16px','font-weight': '600'}" :isLink="true"></u-cell>
				<u-cell title="绑定手机号" :titleStyle="{'font-size': '16px','font-weight': '600'}" value="绑定送168奖门令"
					:isLink="true"></u-cell>
				<u-cell title="客服微信/电话" :titleStyle="{'font-size': '16px','font-weight': '600'}" value="1300200000"
					:isLink="true"></u-cell>
				<u-cell title="退出登录" :titleStyle="{'font-size': '16px','font-weight': '600'}" :isLink="true"></u-cell>
			</u-cell-group>
		</view>
		<u-overlay :show="popupShow" @click="popupShow = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<u-icon name="checkmark-circle" color="#fedbc5" size="70"></u-icon>
					<span style="font-size: 18px; font-weight: 600;">{{'签到成功'}}</span>
					<span style="font-size: 14px; font-weight: 600; color: #c6c6c6;">{{'积分+20'}}</span>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
	const srcOne = ref();
	const popupShow = ref(false)
	const {
		safeAreaInsets
	} = uni.getSystemInfoSync();

	const show = ref(false)
	const content = ref('赛事已经开场,确认要选购么')

	// 我的关注
	const URLto = () => {
		uni.navigateTo({
			url: './compontents/attention'
		});
	}
	
	// 签到
	const signIn = () => {
		popupShow.value = true
	}
	
	// 充值
	const recharge =()=>{
		uni.navigateTo({
			url: './compontents/recharge'
		});
	}
	// 打折活动
	const discount = ()=>{
		uni.navigateTo({
			url: './compontents/discount'
		});
	}
	// 已购方案
	const	purchasedPlan = ()=>{
		uni.navigateTo({
			url: './compontents/purchasedPlan'
		});
	}
	// 积分商城
	const integralShop = ()=>{
		uni.navigateTo({
			url: './compontents/integralShop'
		});
	}
	// vip
	const VIPMember = ()=>{
		uni.navigateTo({
			url: './compontents/VIPMember'
		});
	}
</script>

<style lang="scss" scoped>
	.back-color {
		width: 100vw;
		height: 87.2vh;
		background-color: #051963;
	}

	.userInfo {
		width: 89vw;
		padding: 8% 5%;
		display: flex;
		justify-content: space-between;

		.userInfo-text {
			color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		.user-img {
			display: flex;
			align-items: center;
		}
	}

	.contentInfo {
		width: 100vw;
		height: 87%;
		background-color: #fff;
		border-radius: 15px 15px 0 0;

		.gridBox {
			width: 89.4vw;
			height: 24vh;
			padding: 5% 5%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.gridBox-top {
				display: flex;
				justify-content: space-between;

				.gridBox-spuare {
					width: 30%;
					height: 14vh;
					border: 1px solid #f0f0f0;
					border-radius: 10rpx;
					font-weight: 600;
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					flex-direction: column;
				}
			}

			.gridBox-bottom {
				display: flex;
				justify-content: space-between;

				.gridBox-rectangle {
					width: 47%;
					height: 8vh;
					border: 1px solid #f0f0f0;
					font-size: 14px;
					font-weight: 600;
					display: flex;
					align-items: center;
					justify-content: space-around;
				}
			}
		}
	}

	:deep(.u-cell__value) {
		font-size: 12px;
		font-weight: 600;
		color: #b0b0b0;
	}

	:deep(.u-cell-group) {
		display: flex;
		justify-content: center;
	}

	:deep(.u-cell-group__wrapper) {
		width: 89vw;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 60%;
		height: 20%;
		border-radius: 10px;
		background-color: #fff;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-evenly;
	}
</style>