ruoyi-miniapp/pages/user/index.vue

<template>
	<view class="wrap">
		<!-- 我的头像 -->
		<view class="item" @tap="goToOff">
			<view class="avatar">
				<view class="user">
					<text>张三丰</text>
					<text class="dept">执法一队</text>
				</view>
				<text class="tel">18604161212</text>
			</view>
			<view class="right">
				<image class="avatar" :src="vuex_user.avatar" mode="aspectFill"></image>
				<u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon>
			</view>
		</view>
		<!-- 消息通知 -->
		<view class="item" @tap="goToNotif">
			<view class="box">
				<u-icon name="photo" color="#99A1B7" size="20"></u-icon>
				<text>消息通知</text>
			</view>
			<view class="right">
				<text>2</text>
				<u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon>
			</view>
		</view>
		<!-- 执法记录 -->
		<view class="item" @tap="goToTask">
			<view class="box">
				<u-icon name="photo" color="#99A1B7" size="20"></u-icon>
				<text>执法记录</text>
			</view>
			<view class="right">
				<text>8</text>
				<u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon>
			</view>
		</view>
		<!-- 政策法规 -->
		<view class="item" @tap="goToLaw">
			<view class="box">
				<u-icon name="photo" color="#99A1B7" size="20"></u-icon>
				<text>政策法规</text>
			</view>
			<view class="right">
				<!-- <text>8</text> -->
				<u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon>
			</view>
		</view>
		<!-- 企业入驻 -->
		<view class="item" @tap="goToEnt">
			<view class="box">
				<u-icon name="photo" color="#99A1B7" size="20"></u-icon>
				<text>企业入驻</text>
			</view>
			<view class="right">
				<!-- <text>8</text> -->
				<u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon>
			</view>
		</view>
		<!-- 内部专线 -->
		<view class="item" @tap="makePhoneCall">
			<view class="box">
				<u-icon name="photo" color="#99A1B7" size="20"></u-icon>
				<text>内部专线</text>
			</view>
			<view class="right">
				<text>点击拨打</text>
				<u-icon name="arrow-right" color="#99A1B7" size="16"></u-icon>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			goToOff() {
				uni.$u.route('/pages/index/off_reg');
			},
			goToNotif() {
				uni.$u.route('/pages/user/notif');
			},
			goToTask() {
				uni.$u.route('/pages/user/task');
			},
			goToLaw() {
				uni.$u.route('/pages/user/law');
			},
			goToEnt() {
				uni.$u.route('/pages/index/ent_reg');
			},
			// 拨打内部专线
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: '114' // 内部专线
				});
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		background-color: #F9F9F9;
		min-height: 100vh;
		padding: 32rpx;
		display: flex;
		flex-direction: column;
		gap: 32rpx;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 48rpx;
			border-radius: 16rpx;
			background: #FFF;
			font-size: 30rpx;
			color: #252F4A;

			text {
				font-weight: bold;
			}

			.avatar {
				display: flex;
				flex-direction: column;
				gap: 12rpx;
				font-weight: bold;

				.user {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 16rpx;
					font-size: 40rpx;

					.dept {
						font-size: 24rpx;
						padding: 4rpx 16rpx;
						background: #252F4A;
						color: #FFF;
						border-radius: 100px;
					}
				}

				.tel {
					font-size: 28rpx;
					font-weight: normal;
					color: #4B5675;
				}
			}

			.box {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 12rpx;
			}

			.right {
				display: flex;
				align-self: center;
				justify-content: center;
				gap: 8rpx;

				.avatar {
					width: 112rpx;
					height: 112rpx;
					border-radius: 100px;
				}

				text {
					color: #99A1B7;
				}

			}
		}
	}
</style>