baqing-shop/shop-app/subpackage/account/entry-apply.vue

<template>
	<view class="entry-apply-wrap">
		<safe-nav-bar title="商家入驻" />
		<view class="entry-apply-page">
		<view v-if="!entryOpen" class="entry-closed">
			<text>{{ agreement.message || '商家入驻暂未开放' }}</text>
		</view>
		<view v-else-if="blocked" class="entry-closed">
			<text>您有待审核或公示中的申请，请先在「我的入驻申请」查看进度</text>
			<button class="mine-btn-outline entry-closed__btn" @click="goList">查看申请</button>
		</view>
		<view v-else-if="shopOnlyBlocked" class="entry-closed">
			<text>{{ entryContext.blockReason || '当前无法申请开设新店铺' }}</text>
			<button class="mine-btn-outline entry-closed__btn" @click="goList">查看申请</button>
		</view>
		<template v-else>
			<view v-if="shopOnlyMode" class="entry-shop-only-banner">
				<text class="entry-shop-only-banner__title">仅开店铺模式</text>
				<text class="entry-shop-only-banner__tip">您已是商户管理员，本次仅需填写拟开设店铺信息，主体与经营信息沿用已有商户。</text>
				<text v-if="entryContext.merchantName" class="entry-shop-only-banner__line">商户名称：{{ entryContext.merchantName }}</text>
				<text v-if="entryContext.subjectLabel" class="entry-shop-only-banner__line">主体：{{ entryContext.subjectLabel }}</text>
			</view>
			<view class="entry-steps">
				<text
					v-for="(s, i) in stepTitles"
					:key="s"
					:class="['entry-steps__item', { 'entry-steps__item--on': stepIndex === i }]"
				>{{ s }}</text>
			</view>
			<scroll-view class="entry-scroll" scroll-y>
				<!-- 主体类型（新主体申请） -->
				<view v-if="!shopOnlyMode && currentStep === 'type'" class="form-card">
					<view
						:class="['type-card', { 'type-card--on': form.merchantType === '1' }]"
						@click="selectType('1')"
					>
						<text class="type-card__title">个人入驻</text>
						<text class="type-card__sub">身份证 + 个人账户</text>
					</view>
					<view
						:class="['type-card', { 'type-card--on': form.merchantType === '2' }]"
						@click="selectType('2')"
					>
						<text class="type-card__title">企业入驻</text>
						<text class="type-card__sub">法人 + 企业对公账户</text>
					</view>
				</view>

				<!-- 个人：主体信息 -->
				<view v-else-if="isPerson && currentStep === 'subject'" class="form-card">
					<entry-person-subject :subject="form.subject" />
				</view>
				<view v-else-if="isPerson && currentStep === 'biz'" class="form-card">
					<entry-person-biz :biz="form.biz" :region="regionBiz" @update:region="onBizRegion" />
				</view>

				<!-- 企业 -->
				<view v-else-if="!isPerson && currentStep === 'subject'" class="form-card">
					<entry-enterprise-subject
						:subject="form.subject"
						:region-reg="regionReg"
						@update:region-reg="onRegRegion"
					/>
				</view>
				<view v-else-if="!isPerson && currentStep === 'biz'" class="form-card">
					<entry-enterprise-biz :biz="form.biz" :region="regionBiz" @update:region="onBizRegion" />
				</view>

				<!-- 店铺 -->
				<view v-else-if="currentStep === 'shop'" class="form-card">
					<entry-shop-fields :shop="form.shop" />
				</view>

				<!-- 提交 -->
				<view v-else-if="currentStep === 'submit'" class="form-card">
					<text class="submit-tip">请确认信息无误后勾选协议并提交</text>
					<agreement-block
						v-model="form.agreementAccepted"
						:enabled="agreement.enabled"
						:checkbox-label="agreement.checkboxLabel"
						:agreement-title="agreement.agreementTitle"
						:version-label="agreement.versionLabel"
						:content="agreement.content"
					/>
				</view>
			</scroll-view>
			<view class="entry-actions">
				<button v-if="stepIndex > 0" class="mine-btn-outline entry-actions__prev" @click="prevStep">
					上一步
				</button>
				<button class="form-footer__btn entry-actions__next" :disabled="submitting" @click="nextStep">
					{{ nextBtnText }}
				</button>
			</view>
		</template>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import SafeNavBar from '@/components/common/SafeNavBar.vue'
import { onLoad } from '@dcloudio/uni-app'
import { getEntryAgreement, getEntryStatus, getMyEntryApplies, getEntryContext, submitEntryApply } from '@/api/merchantEntry'
import { ensureApiToken } from '@/utils/apiAuth'
import { hasBlockingApply } from '@/utils/entryConstants'
import {
  createEntryForm,
  validateEntryStep,
  buildEntrySubmitPayload,
  buildShopOnlySubmitPayload,
  applyRegion,
  applyRegRegion
} from '@/utils/entryForm'
import { MERCHANT_TYPE_PERSON } from '@/utils/entryConstants'
import AgreementBlock from '@/components/account/AgreementBlock.vue'
import EntryPersonSubject from '@/components/mine/entry/EntryPersonSubject.vue'
import EntryPersonBiz from '@/components/mine/entry/EntryPersonBiz.vue'
import EntryEnterpriseSubject from '@/components/mine/entry/EntryEnterpriseSubject.vue'
import EntryEnterpriseBiz from '@/components/mine/entry/EntryEnterpriseBiz.vue'
import EntryShopFields from '@/components/mine/entry/EntryShopFields.vue'
import { PAGE_ENTRY_LIST, PAGE_PROFILE } from '@/utils/pageRoute'
import { useUserStore } from '@/store/user'
import { useActionGuard } from '@/utils/actionGuard'

const submitGuard = useActionGuard()
const submitting = submitGuard.locked

const form = reactive(createEntryForm(MERCHANT_TYPE_PERSON))
const agreement = reactive({
  enabled: false,
  message: '',
  agreementTitle: '',
  versionLabel: '',
  content: '',
  checkboxLabel: '我已阅读并同意《商城入驻协议》'
})

const stepIndex = ref(0)
const entryOpen = ref(true)
const blocked = ref(false)
const entryContext = ref({
  shopOnlyMode: false,
  canShopOnlyApply: false,
  blockReason: '',
  merchantId: null,
  merchantType: '',
  subjectLabel: '',
  merchantName: ''
})
const regionBiz = ref({ regionCode: '', regionName: '', pathCodes: [] })
const regionReg = ref({ regionCode: '', regionName: '', pathCodes: [] })
const userStore = useUserStore()

/** 可仅填店铺提交（路径 A2） */
const shopOnlyMode = computed(() => !!entryContext.value.shopOnlyMode && !!entryContext.value.canShopOnlyApply)
/** 已是商户管理员但不可仅开店铺 */
const shopOnlyBlocked = computed(() => !!entryContext.value.shopOnlyMode && !entryContext.value.canShopOnlyApply)

const stepKeys = computed(() => {
  if (shopOnlyMode.value) return ['shop', 'submit']
  return ['type', 'subject', 'biz', 'shop', 'submit']
})
const stepTitles = computed(() => {
  if (shopOnlyMode.value) return ['店铺', '提交']
  return ['类型', '主体', '经营', '店铺', '提交']
})
const currentStep = computed(() => stepKeys.value[stepIndex.value])
const isPerson = computed(() => form.merchantType === MERCHANT_TYPE_PERSON)
const nextBtnText = computed(() => {
  if (submitting.value) return '提交中…'
  return currentStep.value === 'submit' ? '提交申请' : '下一步'
})

onLoad(() => {
  if (!ensureApiToken()) return
  initPage()
})

function initPage() {
  Promise.all([getEntryAgreement(), getEntryStatus(), getMyEntryApplies(), getEntryContext()])
    .then(([agRes, stRes, myRes, ctxRes]) => {
      const ag = agRes.data || {}
      agreement.enabled = !!ag.enabled
      agreement.message = ag.message || ''
      agreement.agreementTitle = ag.agreementTitle || '商城入驻协议'
      agreement.versionLabel = ag.versionLabel || ''
      agreement.content = ag.content || ''
      agreement.checkboxLabel = ag.checkboxLabel || agreement.checkboxLabel
      entryOpen.value = stRes.data?.entryOpen !== false && agreement.enabled
      blocked.value = hasBlockingApply(myRes.data || [])
      entryContext.value = {
        shopOnlyMode: !!ctxRes.data?.shopOnlyMode,
        canShopOnlyApply: !!ctxRes.data?.canShopOnlyApply,
        blockReason: ctxRes.data?.blockReason || '',
        merchantId: ctxRes.data?.merchantId,
        merchantType: ctxRes.data?.merchantType || '',
        subjectLabel: ctxRes.data?.subjectLabel || '',
        merchantName: ctxRes.data?.merchantName || ''
      }
      if (shopOnlyMode.value) {
        form.merchantType = entryContext.value.merchantType || MERCHANT_TYPE_PERSON
        form.shop = createEntryForm(form.merchantType).shop
        form.agreementAccepted = false
        stepIndex.value = 0
      }
      if (entryOpen.value && !blocked.value && !shopOnlyBlocked.value) {
        ensureMemberNickName()
      }
    })
    .catch(() => {})
}

/** 入驻须会员昵称非空（经营账号登录名） */
function ensureMemberNickName() {
  const cached = (userStore.state.nickName || '').trim()
  if (cached) return Promise.resolve(true)
  return userStore.fetchUserInfo().then(() => {
      const nick = (userStore.state.nickName || '').trim()
      if (nick) return true
      uni.showModal({
        title: '提示',
        content: '请先完善个人资料中的昵称，方可提交入驻申请',
        confirmText: '去完善',
        success: (r) => {
          if (r.confirm) uni.navigateTo({ url: PAGE_PROFILE })
        }
      })
      return false
    })
    .catch(() => false)
}

function selectType(type) {
  form.merchantType = type
  const next = createEntryForm(type)
  form.subject = next.subject
  form.biz = next.biz
  form.shop = next.shop
  form.agreementAccepted = false
  regionBiz.value = { regionCode: '', regionName: '', pathCodes: [] }
  regionReg.value = { regionCode: '', regionName: '', pathCodes: [] }
}

function onBizRegion(v) {
  regionBiz.value = v
  applyRegion(form.biz, v)
}

function onRegRegion(v) {
  regionReg.value = v
  applyRegRegion(form.subject, v)
}

function prevStep() {
  if (stepIndex.value > 0) stepIndex.value -= 1
}

function nextStep() {
  const key = currentStep.value
  const err = validateEntryStep(form, key)
  if (err) {
    uni.showToast({ title: err, icon: 'none' })
    return
  }
  if (key === 'submit') {
    doSubmit()
    return
  }
  if (stepIndex.value < stepKeys.value.length - 1) {
    stepIndex.value += 1
  }
}

function doSubmit() {
  const nick = (userStore.state.nickName || '').trim()
  if (!nick) {
    ensureMemberNickName()
    return
  }
  const confirmTip = shopOnlyMode.value
    ? '提交后不可修改，将复用已有商户并申请开设新店铺，是否确认？'
    : '提交后不可修改，是否确认？'
  uni.showModal({
    title: '确认提交',
    content: confirmTip,
    success: (res) => {
      if (!res.confirm) return
      submitGuard.run(async () => {
        const payload = shopOnlyMode.value
          ? buildShopOnlySubmitPayload(form)
          : buildEntrySubmitPayload(form)
        await submitEntryApply(payload)
        uni.showToast({ title: '提交成功，请等待审核', icon: 'none', duration: 2500 })
        setTimeout(() => {
          uni.redirectTo({ url: PAGE_ENTRY_LIST })
        }, 1500)
      })
    }
  })
}

function goList() {
  uni.navigateTo({ url: PAGE_ENTRY_LIST })
}
</script>

<style lang="scss" scoped>
@import '@/styles/mine.scss';

.entry-apply-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f0ebe5;
}
.entry-apply-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.entry-closed {
  padding: 80rpx 40rpx;
  text-align: center;
  font-size: 28rpx;
  color: #666;
}
.entry-closed__btn {
  margin-top: 32rpx;
  width: 100%;
}
.entry-steps {
  display: flex;
  padding: 20rpx 16rpx;
  background: #fff;
}
.entry-steps__item {
  flex: 1;
  text-align: center;
  font-size: 24rpx;
  color: #999;
}
.entry-steps__item--on {
  color: #2e7d32;
  font-weight: 600;
}
.entry-scroll {
  flex: 1;
  // height: 0;
  padding: 24rpx;
  box-sizing: border-box;
}
.entry-actions {
  display: flex;
  gap: 20rpx;
  padding: 20rpx 24rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background: #fff;
}
.entry-actions__prev {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
}
.entry-actions__next {
  flex: 2;
  height: 88rpx;
  line-height: 88rpx;
}
.type-card {
  margin-bottom: 20rpx;
  padding: 32rpx;
  border: 2rpx solid #e5ded6;
  border-radius: 16rpx;
}
.type-card--on {
  border-color: #2e7d32;
  background: #f1f8f4;
}
.type-card__title {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}
.type-card__sub {
  display: block;
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #999;
}
.submit-tip {
  display: block;
  padding: 16rpx 0 24rpx;
  font-size: 26rpx;
  color: #666;
}
.entry-shop-only-banner {
  margin: 16rpx 24rpx 0;
  padding: 24rpx;
  background: #e8f5e9;
  border-radius: 12rpx;
}
.entry-shop-only-banner__title {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #2e7d32;
}
.entry-shop-only-banner__tip {
  display: block;
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #4a6b4f;
  line-height: 1.5;
}
.entry-shop-only-banner__line {
  display: block;
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #5c5652;
}
</style>