device-voice-h5/components/FunctionCard.vue

<template>
	<view class="card function-card">
		<view class="card-header">
			<view class="title">功能菜单</view>
			<!-- <view class="header-actions">
				<button class="btn-apple btn-primary" @tap="$emit('sync')">运营商数据同步</button>
			</view> -->
		</view>
		<view class="function-grid">
			<view class="function-item interactive card-interactive" @tap="$emit('enter', 'authentication')"
				role="button" tabindex="0">
				<view class="function-icon">
					<image src="/static/authentication.png" mode="aspectFit" alt="实名认证"></image>
				</view>
				<view :class="['function-name', realNameStatus === '已实名' ? 'text-primary' : '']">
					{{ realNameStatus || '实名认证' }}
				</view>
			</view>
			<view class="function-item interactive card-interactive" @tap="$emit('sync')" role="button" tabindex="0">
				<view class="function-icon">
					<image src="/static/shop.png" mode="aspectFit" alt="运营商数据同步"></image>
				</view>
				<view class="function-name">运营商数据同步</view>
			</view>
			<view class="function-item interactive card-interactive" @tap="$emit('enter', 'package-order')"
				role="button" tabindex="0">
				<view class="function-icon">
					<image src="/static/shop.png" mode="aspectFit" alt="套餐订购"></image>
				</view>
				<view class="function-name">套餐订购</view>
			</view>
			<view class="function-item interactive card-interactive" @tap="$emit('enter', 'order-list')" role="button"
				tabindex="0">
				<view class="function-icon">
					<image src="/static/order.png" mode="aspectFit" alt="我的订单"></image>
				</view>
				<view class="function-name">我的订单</view>
			</view>
			<view class="function-item interactive card-interactive" v-if="isDevice" @tap="$emit('enter', 'back')"
				role="button" tabindex="0">
				<view class="function-icon">
					<image src="/static/back.png" mode="aspectFit" alt="后台管理"></image>
				</view>
				<view class="function-name">后台管理</view>
			</view>
			<view class="function-item interactive card-interactive" v-if="isDevice" @tap="$emit('enter', 'switch')"
				role="button" tabindex="0">
				<view class="function-icon">
					<image src="/static/change.png" mode="aspectFit" alt="切换运营商"></image>
				</view>
				<view class="function-name">切换运营商</view>
			</view>
			<view class="function-item interactive card-interactive" @tap="$emit('enter', 'asset-package')"
				role="button" tabindex="0">
				<view class="function-icon">
					<image src="/static/shop.png" mode="aspectFit" alt="资产套餐历史"></image>
				</view>
				<view class="function-name">资产套餐历史</view>
			</view>
			<view class="function-item interactive card-interactive" @tap="handleBindPhone" role="button" tabindex="0">
				<view class="function-icon">
					<image src="/static/bind-phone.png" mode="aspectFit" alt="绑定手机号"></image>
				</view>
				<view :class="['function-name', alreadyBindPhone ? 'text-primary' : '']">
					{{ alreadyBindPhone ? '已绑定' : '绑定手机号' }}
				</view>
			</view>
			<view class="function-item interactive card-interactive" @tap="$emit('enter', 'change-phone')" role="button"
				tabindex="0">
				<view class="function-icon">
					<image src="/static/change-phone.png" mode="aspectFit" alt="更换手机号"></image>
				</view>
				<view class="function-name">更换手机号</view>
			</view>
			<view class="function-item interactive card-interactive" v-if="isDevice"
				@tap="$emit('enter', 'device-exchange')" role="button" tabindex="0">
				<view class="function-icon">
					<image src="/static/change.png" mode="aspectFit" alt="设备换货"></image>
				</view>
				<view class="function-name">设备换货</view>
			</view>
			<view class="function-item interactive card-interactive" @tap="$emit('enter', 'wallet')" role="button"
				tabindex="0">
				<view class="function-icon">
					<image src="/static/wallet.png" mode="aspectFit" alt="我的钱包"></image>
				</view>
				<view class="function-name">我的钱包</view>
			</view>
			<view class="function-item interactive card-interactive" v-if="isDevice" @tap="$emit('enter', 'recover')"
				role="button" tabindex="0">
				<view class="function-icon">
					<image src="/static/recover.png" mode="aspectFit" alt="重启设备"></image>
				</view>
				<view class="function-name">重启设备</view>
			</view>
			<view class="function-item interactive card-interactive" v-if="isDevice" @tap="$emit('enter', 'restart')"
				role="button" tabindex="0">
				<view class="function-icon">
					<image src="/static/restart.png" mode="aspectFit" alt="恢复出厂"></image>
				</view>
				<view class="function-name">恢复出厂</view>
			</view>
			<view class="function-item interactive card-interactive" @tap="$emit('enter', 'out')" role="button"
				tabindex="0">
				<view class="function-icon">
					<image src="/static/out.png" mode="aspectFit" alt="退出登录"></image>
				</view>
				<view class="function-name">退出登录</view>
			</view>
		</view>

		<slot></slot>
	</view>
</template>

<script setup>
	const props = defineProps({
		realNameStatus: {
			type: String,
			default: ''
		},
		alreadyBindPhone: {
			type: Boolean,
			default: false
		},
		isDevice: {
			type: Boolean,
			default: true
		}
	});

	const emit = defineEmits(['enter', 'sync']);

	const handleBindPhone = () => {
		if (props.alreadyBindPhone) {
			// 已绑定，不可点击
			return;
		}
		// 未绑定，可以点击进入绑定页面
		emit('enter', 'bind');
	};
</script>

<style scoped lang="scss">
	.function-card {
		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.function-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 16rpx;
			width: 100%;

			.function-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 20rpx;

				.function-icon {
					width: 120rpx;
					height: 120rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.function-name {
					font-size: 28rpx;
					font-weight: 500;
					color: var(--text-primary);
					text-align: center;
					margin-top: 15rpx;
				}
			}
		}
	}

	.text-primary {
		color: var(--primary) !important;
	}
</style>