yueche_app/pages/mine/mine.vue

<template>
	<view class="container">
		<image class="banner" src="@/static/images/mine/back.png" mode="aspectFill" />
		<view class="title" :style="{ top: `${paddingTop * 2}rpx` }">我的</view>

		<!-- 头像区域 -->
		<image class="author" src="@/static/images/mine/author.png" mode="aspectFill" />

		<!-- 微信名区域 -->
		<view class="name" v-if="userInfo.username">{{ userInfo.username }}</view>
		<view class="name" v-else @click="handleLogin">登录</view>

		<!-- 电话区域 -->
		<view class="phone" v-if="userInfo.mobile">{{ userInfo.mobile }}</view>

		<!-- 全部订单区域 -->
		<view class="box">
			<view class="box_title">全部订单</view>

			<view class="box_list">
				<view v-for="(item, index) in typeList" :key="index" class="list_item" @click="clickItem(item)">
					<image class="item_img" :src="item.imgUrl" mode="aspectFill" />
					{{ item.text }}
				</view>
			</view>
		</view>

		<!-- 常用功能区域 -->
		<view class="box top">
			<view class="box_title">常用功能</view>

			<view class="box_list">
				<view v-for="(item, index) in commonList" :key="index" class="list_item" @click="clickItem(item)">
					<image class="item_img" :src="item.imgUrl" mode="aspectFill" />
					{{ item.text }}
				</view>
			</view>
		</view>
	</view>

	<!-- 授权手机号 -->
	<AuthorizePopup :show="show" @close="handleClose" />
</template>

<script setup>
import { onMounted, ref } from 'vue'
import AuthorizePopup from '@/components/AuthorizePopup.vue'

// 胶囊按钮距离页面顶部的距离
const paddingTop = ref(0)

// 用户信息
const userInfo = ref({})

// 授权弹窗显示隐藏控制
const show = ref(false)

// 全部订单数组
const typeList = [
	{
		text: '待支付',
		imgUrl: '/static/images/mine/nopay.png',
		path: '',
		isChcek: true
	},
	{
		text: '未乘车',
		imgUrl: '/static/images/mine/noriding.png',
		path: '',
		isChcek: true
	},
	{
		text: '已乘车',
		imgUrl: '/static/images/mine/riding.png',
		path: '',
		isChcek: true
	},
	{
		text: '已取消',
		imgUrl: '/static/images/mine/cancel.png',
		path: '',
		isChcek: true
	}
]

// 常用功能数组
const commonList = [
	{
		text: '常用旅客',
		imgUrl: '/static/images/mine/people.png',
		path: '/pages/commonPeople/commonPeople',
		isChcek: true
	},
	{
		text: '优惠券',
		imgUrl: '/static/images/mine/coupon.png',
		path: '/pages/coupon/coupon',
		isChcek: true
	},
	{
		text: '联系客服',
		imgUrl: '/static/images/mine/service.png',
		path: '',
		isChcek: false
	},
	{
		text: '客服电话',
		imgUrl: '/static/images/mine/phone.png',
		path: '',
		isChcek: false
	},
	{
		text: '电子交通卡',
		imgUrl: '/static/images/mine/card.png',
		path: '/pages/transportation/transportation',
		isChcek: true
	}
]

onMounted(() => {
	paddingTop.value = uni.getMenuButtonBoundingClientRect().top
	userInfo.value = uni.getStorageSync('carUserInfo')
})

// 点击每一个菜单的回调
function clickItem(item) {
	if (item.isChcek) {
		if (userInfo.value) {
			if (item.path) {
				uni.navigateTo({
					url: item.path
				})
			}
		} else {
			uni.showModal({
				title: '提示',
				content: '请先登录',
				success: (res) => {
					if (res.confirm) {
						show.value = true
					}
				}
			})
		}
	} else {
		if (item.text === '联系客服' || item.text === '客服电话') {
			uni.showModal({
				title: '拨打客服电话',
				content: '工作时间:9:00:00—18:00:00',
				cancelText: '关闭',
				confirmText: '拨打',
				confirmColor: '#FF8205',
				success: (res) => {
					if (res.confirm) {
						console.log('用户点击确定')
					}
				}
			})
		}
	}
}

const handleClose = (val) => {
	show.value = false
	if (val) {
		userInfo.value = uni.getStorageSync('carUserInfo')
	}
}

// 点击登录的回调
const handleLogin = () => {
	show.value = true
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	height: 100vh;
	color: #001713;
	background-color: #fff;
	overflow-y: auto;

	.banner {
		width: 100%;
		height: 482rpx;
	}

	.title {
		position: absolute;
		left: 354rpx;
		font-size: 40rpx;
	}

	.author {
		position: absolute;
		left: 32rpx;
		top: 214rpx;
		width: 126rpx;
		height: 126rpx;
		border-radius: 50%;
	}

	.name {
		position: absolute;
		left: 178rpx;
		top: 232rpx;
		font-size: 36rpx;
	}

	.phone {
		position: absolute;
		left: 178rpx;
		top: 282rpx;
		font-size: 28rpx;
		color: #616267;
	}

	.box {
		position: absolute;
		top: 370rpx;
		left: 26rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		width: 700rpx;
		min-height: 300rpx;
		border-radius: 12rpx;
		background-color: #fff;
		box-shadow: 0 3rpx 6rpx #ccc;

		.box_title {
			display: flex;
			align-items: center;
			height: 134rpx;
			font-size: 32rpx;
		}

		.box_list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			// height: 130rpx;

			.list_item {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 40rpx;
				width: 160rpx;
				height: 130rpx;
				font-size: 28rpx;

				.item_img {
					width: 68rpx;
					height: 68rpx;
				}
			}
		}
	}

	.top {
		top: 690rpx;
	}
}
</style>