jacobxu666andClaude
5524d78229
- 详情页：地图按钮改为复制地址，电话点击直接拨号 - 详情页：移除免X次/年徽章，增加信息卡片与卡种卡片间距 - 详情页：运营状态实时判断（根据营业时间自动显示营业中/已闭园） - 详情页：轮播圆点仅多图时显示，加大尺寸+投影，z-index置顶 - 详情页：景区电话箭头靠右对齐 - 首页：热门景点两列布局改用padding方案，修复小屏手机单列显示 - 代码质量：card/order API移入分包，消除主包未使用JS文件 - 代码质量：manifest启用minified和lazyCodeLoading - 构建：vite配置静默Sass弃用警告 Co-Authored-By: Claude <noreply@anthropic.com>
106 lines
3.4 KiB
Vue
106 lines
3.4 KiB
Vue
<template>
|
|
<view class="page">
|
|
<!-- 年卡信息头部 -->
|
|
<view class="card-info">
|
|
<text class="card-name">{{ cardName }}</text>
|
|
<text class="card-tip">请填写实名信息以激活年卡</text>
|
|
</view>
|
|
<!-- 实名表单 -->
|
|
<view class="form-card">
|
|
<view class="form-item">
|
|
<text class="label">真实姓名</text>
|
|
<input class="input" v-model="form.realName" placeholder="请输入真实姓名" />
|
|
</view>
|
|
<view class="form-item">
|
|
<text class="label">身份证号</text>
|
|
<input class="input" v-model="form.idCard" placeholder="请输入身份证号" />
|
|
</view>
|
|
<view class="form-item">
|
|
<text class="label">手机号码</text>
|
|
<input class="input" v-model="form.phone" placeholder="请输入手机号码" type="number" />
|
|
</view>
|
|
</view>
|
|
<!-- 激活按钮 -->
|
|
<view class="btn-area">
|
|
<button class="btn-activate" @click="handleActivate" :disabled="activating">
|
|
{{ activating ? '激活中...' : '立即激活' }}
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive } from 'vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { activateCard } from '../../api/card'
|
|
import { showToast } from '../../../../utils'
|
|
|
|
const cardId = ref('')
|
|
const cardName = ref('')
|
|
const activating = ref(false)
|
|
|
|
/** 实名信息表单 */
|
|
const form = reactive({
|
|
realName: '',
|
|
idCard: '',
|
|
phone: ''
|
|
})
|
|
|
|
/** 页面加载时解析路由参数 */
|
|
onLoad((options) => {
|
|
cardId.value = options?.cardId || ''
|
|
cardName.value = decodeURIComponent(options?.name || '')
|
|
})
|
|
|
|
/** 表单校验 */
|
|
function validate(): boolean {
|
|
if (!form.realName.trim()) {
|
|
showToast('请输入真实姓名')
|
|
return false
|
|
}
|
|
if (!/^\d{17}[\dXx]$/.test(form.idCard)) {
|
|
showToast('请输入正确的身份证号')
|
|
return false
|
|
}
|
|
if (!/^1\d{10}$/.test(form.phone)) {
|
|
showToast('请输入正确的手机号码')
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
/** 提交激活 */
|
|
async function handleActivate() {
|
|
if (!validate()) return
|
|
if (!cardId.value) return
|
|
activating.value = true
|
|
try {
|
|
await activateCard(cardId.value, form)
|
|
showToast('激活成功', 'success')
|
|
// 激活成功后跳转入园码页
|
|
setTimeout(() => {
|
|
uni.redirectTo({ url: `/packages/user/pages/card/qrcode?cardId=${cardId.value}` })
|
|
}, 1500)
|
|
} catch (err: any) {
|
|
showToast(err.message || '激活失败')
|
|
} finally {
|
|
activating.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page { min-height: 100vh; background: #f5f5f5; padding: 20rpx; box-sizing: border-box; }
|
|
.card-info { background: #4A90D9; border-radius: 16rpx; padding: 30rpx; margin-bottom: 20rpx; }
|
|
.card-name { font-size: 34rpx; font-weight: bold; color: #fff; display: block; margin-bottom: 8rpx; }
|
|
.card-tip { font-size: 24rpx; color: rgba(255,255,255,0.8); }
|
|
.form-card { background: #fff; border-radius: 16rpx; padding: 10rpx 30rpx; }
|
|
.form-item { padding: 24rpx 0; border-bottom: 1rpx solid #f0f0f0; }
|
|
.form-item:last-child { border-bottom: none; }
|
|
.label { display: block; font-size: 26rpx; color: #666; margin-bottom: 12rpx; }
|
|
.input { width: 100%; height: 80rpx; font-size: 30rpx; color: #333; box-sizing: border-box; }
|
|
.btn-area { padding: 40rpx 20rpx; }
|
|
.btn-activate { width: 100%; height: 96rpx; line-height: 96rpx; background: #4A90D9; color: #fff; border-radius: 48rpx; font-size: 32rpx; border: none; }
|
|
.btn-activate[disabled] { background: #A5C8E8; }
|
|
</style>
|