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="saoma" v-if="roleType==0" @click="saomaH">扫一扫</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'
import { myRequest } from '@/utils/api.ts'
import { useTabParamStore } from '@/utils/tabParams.js';
const tabParamStore = useTabParamStore();

// 用户信息
const userInfo1 = uni.getStorageSync('carUserInfo')

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

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

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

// 全部订单数组
const typeList = [
	{
		text: '待支付',
		imgUrl: '/static/images/mine/nopay.png',
		path: '/pages/order/order',
		type:6,
		isChcek: true
	},
	{
		text: '未乘车',
		imgUrl: '/static/images/mine/noriding.png',
		path: '/pages/order/order',
		type:3,
		isChcek: true
	},
	{
		text: '已乘车',
		imgUrl: '/static/images/mine/riding.png',
		path: '/pages/order/order',
		type:2,
		isChcek: true
	},
	{
		text: '已取消',
		imgUrl: '/static/images/mine/cancel.png',
		path: '/pages/order/order',
		type:4,
		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
	}
]
//客服信息 
const worktime = ref('')
const workTele = ref('')

//人员身份
const roleType = ref(1)
//扫码参数
const saoNum = ref('')

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

// 点击每一个菜单的回调
function clickItem(item) {
	if (item.isChcek) {
		if (userInfo.value) {
			if (item.type) {
				// 1. 存储参数到全局状态
				tabParamStore.setType(item.type); // 替换为实际要传递的type值
				uni.switchTab({
					url: item.path
				})
			}else{
				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: '拨打客服电话:'+workTele.value,
				content: '工作时间:'+worktime.value, 
				cancelText: '关闭',
				confirmText: '拨打',
				confirmColor: '#FF8205',
				success: (res) => {
					if (res.confirm) {
						uni.makePhoneCall({
						  phoneNumber: workTele.value, // 仅支持数字，固定号码需加引号
						  success: () => console.log("拨号功能调用成功"),
						  fail: (err) => console.error("拨号失败：", err)
						});
					}
				}
			})
		}
	}
}

//客服电话
async function getTuigai() {
	const res = await myRequest({
		url: '/carBook/cnqueryHb.action',
		data: {
		}
	})
	if(res.code==200){  
		worktime.value=res.data.workTime
		workTele.value=res.data.workMobile   
	}else{
		uni.showToast({   
		  title: res.message,
		  icon: 'none'
		});
	}
}

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

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

//查询人员身份
async function getShen() {
	const res = await myRequest({
		url: '/tAppgetUserByMobile.action',
		data: {
			mobile:userInfo1.mobile
		}
	})
	if(res.code==200){  
		roleType.value=res.data.type
	}else{
		uni.showToast({   
		  title: res.message,
		  icon: 'none'
		});
	}
}
//扫码核销
const saomaH = (val) => {
	uni.showLoading({
		title: '扫码中...',
		mask: true // 是否显示透明蒙层，防止触摸穿透
	})
	wx.scanCode({ 
		onlyFromCamera: false, // 只允许从相机扫码
		success(res) {
			console.log('扫码成功：' + JSON.stringify(res) + res.result)
			saoNum.value = res.result
			setTimeout(function () {
				saomaCha()
			}, 700)
		}
	})
	uni.hideLoading()
}
//查询人员身份
async function saomaCha() {
	console.log('oo')
	const res = await myRequest({
		url: '/tAppvertifyTicket.action',
		data: { 
			id:saoNum.value,
			vertifyManMobile:userInfo1.mobile
		}
	})
	if(res.code==200){
		uni.showToast({
		  title: '扫码成功',
		  icon: 'none'
		});
	}else{
		uni.showToast({   
		  title: res.message,
		  icon: 'none'
		});
	}
}
const onShareAppMessage = (res) => { //发送给朋友
	return {
		// title: this.tuiguang,
		path: '/pages/home/home',
		// imageUrl: this.tuiguangImg,
	}
}
</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;
	}
	.saoma{
		position: absolute;
		left: 578rpx;
		top: 232rpx;
		font-size: 36rpx;
	}

	.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>