64 lines
2.0 KiB
Vue
64 lines
2.0 KiB
Vue
<template>
|
|
<view class="card whitelist-card">
|
|
<view class="card-header flex-row-sb mb-lg">
|
|
<view class="title">语音白名单</view>
|
|
<view class="flex-row-g20">
|
|
<button class="btn-apple btn-secondary btn-mini" @tap="$emit('refresh')">刷新</button>
|
|
<button class="btn-apple btn-primary btn-mini" @tap="$emit('add')">添加白名单</button>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="whitelistData.length === 0" class="empty-whitelist">
|
|
<text class="caption">暂无白名单</text>
|
|
</view>
|
|
|
|
<view v-else class="whitelist-list">
|
|
<view class="whitelist-item" v-for="(item, index) in whitelistData" :key="index">
|
|
<view class="whitelist-info flex-col-g8">
|
|
<view class="flex-row-sb">
|
|
<text class="subtitle">{{ item.name }}</text>
|
|
<view class="tag-apple" :class="getStateClass(item.state)">
|
|
{{ getStateText(item.state) }}
|
|
</view>
|
|
</view>
|
|
<text class="caption">{{ item.phone }}</text>
|
|
<text class="caption caption-sm">{{ item.createTime }}</text>
|
|
<button v-if="item.state === '5' || item.state === '3'"
|
|
class="btn-apple btn-warning btn-mini mt-10"
|
|
@tap="$emit('showSms', item.phone, item.state)">
|
|
上传短信码
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
whitelistData: { type: Array, default: () => [] }
|
|
});
|
|
|
|
defineEmits(['refresh', 'add', 'showSms']);
|
|
|
|
const getStateText = (state) => ({ '1': '添加中', '2': '已添加', '3': '添加失败', '5': '短信确认中' })[state] || '未知';
|
|
const getStateClass = (state) => ({ '1': 'tag-warning', '2': 'tag-success', '3': 'tag-danger', '5': 'tag-primary' })[state] || '';
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.whitelist-card {
|
|
.empty-whitelist { padding: 40rpx; text-align: center; }
|
|
.whitelist-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16rpx;
|
|
.whitelist-item {
|
|
padding: 20rpx;
|
|
background: var(--gray-100);
|
|
border-radius: var(--radius-small);
|
|
.caption-sm { font-size: 20rpx; }
|
|
}
|
|
}
|
|
}
|
|
</style>
|