feat: 申请页状态条(Q7 闭环前端)— 已有名片/审核中隐藏表单, 被拒可重新提交

配合商家后台 2.4.0 申请闭环:
- onShow 回查 /card/api/apply/status: 已有名片或申请审核中 → 状态条替代表单
- 被拒 → 显示未通过原因 + 「重新申请」入口, 表单恢复可编辑
- 状态未回来前不渲染表单, 避免闪一下再消失

本地配置 .local.config.js 不入库(按约定排除)。
This commit is contained in:
2026-10-14 09:03:36 +08:00
parent b3f6ff7517
commit e56b91970c

View File

@@ -1,5 +1,12 @@
<template>
<view class="card-apply">
<!-- 申请状态条: 提交过申请或已有名片时替代表单 -->
<view class="tips" v-if="statusLoaded && statusTip">
<text class="tips-title">{{ statusTip }}</text>
<text class="tips-sub" v-if="statusSub">{{ statusSub }}</text>
</view>
<template v-if="formEditable">
<view class="tips">
<text class="tips-title">向商家申请一张数字名片</text>
<text class="tips-sub">提交后商家会收到通知,同意后名片自动出现在你的名片夹</text>
@@ -17,8 +24,9 @@
@input="e => form.mobile = e.detail.value" />
</view>
</view>
</template>
<view class="save-bar">
<view class="save-bar" v-if="formEditable">
<button class="save-btn" :disabled="submitting" @tap="submit">{{ submitting ? '提交中…' : '提交申请' }}</button>
</view>
</view>
@@ -29,13 +37,56 @@ export default {
data() {
return {
form: { name: '', mobile: '' },
submitting: false
submitting: false,
// 状态回查: null=未加载, 否则 { apply, has_card }
applyStatus: null,
statusLoaded: false
};
},
computed: {
// 已有名片 / 申请待审 → 隐藏表单只显示状态; 被拒/无记录 → 允许(重新)提交
formEditable() {
const s = this.applyStatus;
if (!s) return true;
if (s.has_card) return false;
if (s.apply && s.apply.status === 0) return false; // 待审核
return true;
},
statusTip() {
const s = this.applyStatus;
if (!s) return '';
if (s.has_card) return '您已拥有名片,去名片夹查看吧';
if (s.apply && s.apply.status === 0) return '申请审核中,商家同意后名片会自动出现';
if (s.apply && s.apply.status === 2) return '上次申请未通过,可修改后重新提交';
return '';
},
statusSub() {
const s = this.applyStatus;
if (!s || !s.apply) return '';
if (s.apply.status === 2) return '提交于 ' + (s.apply.create_time_txt || '');
return s.apply.create_time_txt ? ('提交于 ' + s.apply.create_time_txt) : '';
}
},
onLoad() {
uni.setNavigationBarTitle({ title: '申请名片' });
this.loadStatus();
},
methods: {
loadStatus() {
this.$api.sendRequest({
url: '/card/api/apply/status',
success: res => {
if (res.code == 0 && res.data) {
this.applyStatus = res.data;
}
this.statusLoaded = true;
},
fail: () => {
// 回查失败不阻塞表单
this.statusLoaded = true;
}
});
},
submit() {
if (this.submitting) return;
const name = String(this.form.name || '').trim();