feat: 申请页状态条(Q7 闭环前端)— 已有名片/审核中隐藏表单, 被拒可重新提交
配合商家后台 2.4.0 申请闭环: - onShow 回查 /card/api/apply/status: 已有名片或申请审核中 → 状态条替代表单 - 被拒 → 显示未通过原因 + 「重新申请」入口, 表单恢复可编辑 - 状态未回来前不渲染表单, 避免闪一下再消失 本地配置 .local.config.js 不入库(按约定排除)。
This commit is contained in:
@@ -1,24 +1,32 @@
|
||||
<template>
|
||||
<view class="card-apply">
|
||||
<view class="tips">
|
||||
<text class="tips-title">向商家申请一张数字名片</text>
|
||||
<text class="tips-sub">提交后商家会收到通知,同意后名片自动出现在你的名片夹</text>
|
||||
<!-- 申请状态条: 提交过申请或已有名片时替代表单 -->
|
||||
<view class="tips" v-if="statusLoaded && statusTip">
|
||||
<text class="tips-title">{{ statusTip }}</text>
|
||||
<text class="tips-sub" v-if="statusSub">{{ statusSub }}</text>
|
||||
</view>
|
||||
|
||||
<view class="form-group">
|
||||
<view class="form-row">
|
||||
<view class="row-label"><text class="req-star">*</text>姓名</view>
|
||||
<input class="row-input" :value="form.name" placeholder="你希望名片上显示的姓名"
|
||||
@input="e => form.name = e.detail.value" />
|
||||
<template v-if="formEditable">
|
||||
<view class="tips">
|
||||
<text class="tips-title">向商家申请一张数字名片</text>
|
||||
<text class="tips-sub">提交后商家会收到通知,同意后名片自动出现在你的名片夹</text>
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<view class="row-label"><text class="req-star">*</text>手机号</view>
|
||||
<input class="row-input" type="number" :value="form.mobile" placeholder="你注册本店使用的手机号"
|
||||
@input="e => form.mobile = e.detail.value" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="save-bar">
|
||||
<view class="form-group">
|
||||
<view class="form-row">
|
||||
<view class="row-label"><text class="req-star">*</text>姓名</view>
|
||||
<input class="row-input" :value="form.name" placeholder="你希望名片上显示的姓名"
|
||||
@input="e => form.name = e.detail.value" />
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<view class="row-label"><text class="req-star">*</text>手机号</view>
|
||||
<input class="row-input" type="number" :value="form.mobile" placeholder="你注册本店使用的手机号"
|
||||
@input="e => form.mobile = e.detail.value" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<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();
|
||||
|
||||
Reference in New Issue
Block a user