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 btn-mini" @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('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" v-if="isDevice" @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="$emit('enter', 'bind')" role="button" tabindex="0">
				<view class="function-icon">
					<image src="/static/bind-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', '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" v-if="isDevice" @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>
	defineProps({
		realNameStatus: { type: String, default: '' },
		alreadyBindPhone: { type: Boolean, default: false },
		isDevice: { type: Boolean, default: true }
	});

	defineEmits(['enter', 'sync']);
</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>