@xm-zx/material 1.0.0

package/README.md

@@ -0,0 +1,182 @@
+# @xm-zx/material
+
+企业开户材料提交流程组件，适用于 uni-app Vue3 项目。
+
+## 安装
+
+```bash
+npm install @xm-zx/material
+```
+
+## 使用
+
+### 全局注册
+
+```js
+import { createApp } from 'vue'
+import ZxMaterial from '@xm-zx/material'
+
+const app = createApp(App)
+app.use(ZxMaterial)
+```
+
+### 按需引入
+
+```js
+import { ZxMaterial, Instructions, PayVerify, SmsVerify, Settlement } from '@xm-zx/material'
+```
+
+### 组件使用
+
+```vue
+<template>
+  <ZxMaterial 
+    ref="materialRef"
+    :financeEnterpriseId="financeEnterpriseId"
+    :accountType="accountType"
+    :accountOpeningData="accountOpeningData"
+    @queryEnterprise="handleQueryEnterprise"
+    @queryStatus="handleQueryStatus"
+    @updateSettleStatus="handleUpdateSettleStatus"
+    @smallAmountPayment="handleSmallAmountPayment"
+    @sendVerifySms="handleSendVerifySms"
+    @confirmVerifyCode="handleConfirmVerifyCode"
+    @settleAuthenticApply="handleSettleAuthenticApply"
+    @settleAuthenticConfirm="handleSettleAuthenticConfirm"
+    @authentication="handleAuthentication"
+    @reSubmit="handleReSubmit"
+    @toIndex="handleToIndex"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const materialRef = ref(null)
+const accountOpeningData = ref({})
+
+// 查询企业信息
+const handleQueryEnterprise = async ({ financeEnterpriseId }) => {
+  const res = await yourApi.queryEnterprise(financeEnterpriseId)
+  materialRef.value.setAccountOpeningInfo(res.data)
+}
+
+// 查询开户状态
+const handleQueryStatus = async ({ accountOpeningApplicationId }) => {
+  const res = await yourApi.queryStatus(accountOpeningApplicationId)
+  materialRef.value.setStatus(res.data.accountOpeningStatus)
+}
+
+// 更新结算授权状态
+const handleUpdateSettleStatus = async ({ accountOpeningApplicationId, callback }) => {
+  await yourApi.updateSettleStatus({ accountOpeningApplicationId })
+  callback()
+}
+
+// 小额打款验证
+const handleSmallAmountPayment = async ({ accountOpeningApplicationId, verifyAmount, callback }) => {
+  const res = await yourApi.smallAmountPayment({ accountOpeningApplicationId, verifyAmount })
+  uni.showToast({ title: res.msg, icon: 'none' })
+  callback()
+}
+
+// 发送短信验证码
+const handleSendVerifySms = async ({ accountOpeningApplicationId, verifyType }) => {
+  const res = await yourApi.sendVerifySms({ accountOpeningApplicationId, verifyType })
+  uni.showToast({ title: res.msg, icon: 'none' })
+}
+
+// 确认验证码
+const handleConfirmVerifyCode = async ({ accountOpeningApplicationId, verifyType, verifyCode, callback }) => {
+  const res = await yourApi.confirmVerifyCode({ accountOpeningApplicationId, verifyType, verifyCode })
+  uni.showToast({ title: res.msg, icon: 'none' })
+  callback()
+}
+
+// 结算授权申请
+const handleSettleAuthenticApply = async ({ accountOpeningApplicationId }) => {
+  const res = await yourApi.settleAuthenticApply({ accountOpeningApplicationId })
+  uni.showToast({ title: res.msg, icon: 'none' })
+}
+
+// 结算授权确认
+const handleSettleAuthenticConfirm = async ({ accountOpeningApplicationId, verifyCode, callback }) => {
+  const res = await yourApi.settleAuthenticConfirm({ accountOpeningApplicationId, verifyCode })
+  uni.showToast({ title: res.msg, icon: 'none' })
+  callback()
+}
+
+// 去开户
+const handleAuthentication = ({ financeEnterpriseId, accountType }) => {
+  uni.navigateTo({
+    url: `/subPages/authorization/index?financeEnterpriseId=${financeEnterpriseId}&accountType=${accountType}`
+  })
+}
+
+// 重新提交
+const handleReSubmit = ({ financeEnterpriseId }) => {
+  uni.navigateTo({
+    url: `/subPages/authorization/index?financeEnterpriseId=${financeEnterpriseId}`
+  })
+}
+
+// 返回首页
+const handleToIndex = () => {
+  uni.switchTab({ url: '/pages/tab/tabOne' })
+}
+</script>
+```
+
+## 组件说明
+
+| 组件名 | 说明 |
+|--------|------|
+| ZxMaterial | 完整的开户材料提交流程组件 |
+| Instructions | 材料准备说明组件 |
+| PayVerify | 小额打款验证组件 |
+| SmsVerify | 短信验证组件 |
+| Settlement | 结算授权组件 |
+
+## Props
+
+### ZxMaterial
+
+| 属性 | 类型 | 必填 | 默认值 | 说明 |
+|------|------|------|--------|------|
+| financeEnterpriseId | String | 否 | '' | 企业ID |
+| accountType | String | 否 | '' | 账户类型 |
+| accountOpeningData | Object | 否 | {} | 开户信息（外部传入） |
+
+## Events
+
+| 事件名 | 说明 | 回调参数 |
+|--------|------|----------|
+| queryEnterprise | 查询企业信息 | { financeEnterpriseId } |
+| queryStatus | 查询开户状态 | { accountOpeningApplicationId } |
+| updateSettleStatus | 更新结算状态 | { accountOpeningApplicationId, callback } |
+| smallAmountPayment | 小额打款验证 | { accountOpeningApplicationId, verifyAmount, callback } |
+| sendVerifySms | 发送短信验证码 | { accountOpeningApplicationId, verifyType } |
+| confirmVerifyCode | 确认验证码 | { accountOpeningApplicationId, verifyType, verifyCode, callback } |
+| settleAuthenticApply | 结算授权申请 | { accountOpeningApplicationId } |
+| settleAuthenticConfirm | 结算授权确认 | { accountOpeningApplicationId, verifyCode, callback } |
+| authentication | 去开户 | { financeEnterpriseId, accountType } |
+| reSubmit | 重新提交 | { financeEnterpriseId } |
+| toIndex | 返回首页 | - |
+
+## Expose Methods
+
+| 方法名 | 说明 | 参数 |
+|--------|------|------|
+| getInfo | 触发查询企业信息 | - |
+| setAccountOpeningInfo | 设置开户信息 | data |
+| setStatus | 设置开户状态 | status |
+
+## 设计说明
+
+组件不直接调用 API，而是通过事件将数据抛出，由外部项目处理 API 调用。
+
+## 注意事项
+
+- 本组件依赖 `uv-ui` 组件库
+- 需要在 uni-app Vue3 项目中使用
+- 需要外部实现 API 调用逻辑

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@xm-zx/material",
+  "version": "1.0.0",
+  "description": "企业开户材料提交流程组件，适用于 uni-app Vue3 项目。",
+  "main": "src/index.js",
+  "files": [
+    "src",
+    "types"
+  ],
+  "keywords": [
+    "uni-app",
+    "vue3",
+    "material",
+    "enterprise",
+    "account-opening"
+  ],
+  "author": "zx",
+  "license": "MIT",
+  "private": false
+}

package/src/components/ZxMaterial/Instructions.vue

@@ -0,0 +1,253 @@
+<template>
+  <view>
+    <view class="material-section">
+      <view class="material-section-title">
+        <span>材料准备</span>
+        <image src="/static/icons/b_underline.png" class="g_underline" />
+      </view>
+      <view class="material-section-desc">需要拍摄原件，且在证件有效期内</view>
+      <view class="material-card material-card--light" v-if="type != 'PERSONAL'">
+        <view class="material-card-info">
+          <view class="material-card-title">营业执照</view>
+          <view class="material-card-desc">{{ accountType == 'INDIVIDUAL' ? '个体工商户' : ''}}营业执照（实拍原件）</view>
+        </view>
+        <image class="material-card-img material-card-img--sm" src="https://qiniu-cdn.joinsun.vip/prod/mp-trade-supplier/businessLicense.png" />
+      </view>
+      <view class="material-card material-card--light">
+        <view class="material-card-info">
+          <view class="material-card-title">法人或经营者证件</view>
+          <view class="material-card-desc">身份证或护照等（实拍原件）</view>
+        </view>
+        <image class="material-card-img material-card-img--md" src="https://qiniu-cdn.joinsun.vip/prod/mp-trade-supplier/idCard.png" />
+      </view>
+      <view class="material-card material-card--gray material-card--top">
+        <view class="material-card-info">
+          <view class="material-card-title">实名认证信息</view>
+          <view class="material-card-desc material-card-desc--tall">{{ accountType == 'INDIVIDUAL' ? '法人银行卡信息和法人手机号' : '企业对公银行开户信息或法人(经营者)手机号'}}</view>
+        </view>
+        <image class="material-card-img material-card-img--lg" src="https://qiniu-cdn.joinsun.vip/prod/mp-trade-supplier/bankCard.png" />
+      </view>
+      <view class="material-card material-card--gray material-card--top">
+        <view class="material-card-info">
+          <view class="material-card-title">经办人证件及授权书</view>
+          <view class="material-card-desc material-card-desc--tall">企业经办人开户，需要上传经办人身份证、联系人授权书<text class="download-text" @click="download">{{ isdownload ? '正在下载' : '下载模板'}}</text></view>
+        </view>
+        <image class="material-card-img material-card-img--lg" src="https://qiniu-cdn.joinsun.vip/prod/mp-channel/PowerOfAttorney.png" />
+      </view>
+    </view>
+    <view class="material-btn-box">
+      <button class="material-btn" @click="authentication">立即开户</button>
+    </view>
+    <uv-popup mode="center" ref="popupRef" :safeAreaInsetBottom="false" closeable round="20rpx">
+      <view class="popup-box">
+        <image src="/static/icons/material/download-success.png" class="download-success" />
+        <view class="popup-title">下载成功</view>
+        <view class="popup-desc">授权书盖公章后，拍照上传图片即可</view>
+        <view class="popup-btn" @click="savaCheck">查看文件</view>
+      </view>
+    </uv-popup>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const TEMPLATE_DOWNLOAD_URL = 'https://img-1.joinsun.vip/upload/120407_6c8ed9d8f8213279c612e90405e2e757.doc'
+
+const props = defineProps({
+  financeEnterpriseId: {
+    type: String,
+    default: ''
+  },
+  accountType: {
+    type: String,
+    default: ''
+  },
+  type: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['authentication'])
+
+const isdownload = ref(false)
+const popupRef = ref(null)
+const tempFilePath = ref('')
+
+const showMsg = (msg) => {
+  uni.showToast({ title: msg, icon: 'none' })
+}
+
+const download = () => {
+  isdownload.value = true
+  uni.downloadFile({
+    url: TEMPLATE_DOWNLOAD_URL,
+    success(res) {
+      tempFilePath.value = res.tempFilePath
+      popupRef.value.open()
+      isdownload.value = false
+    },
+    fail() {
+      showMsg('下载失败')
+      isdownload.value = false
+    }
+  })
+}
+
+const savaCheck = () => {
+  uni.getFileSystemManager().saveFile({
+    tempFilePath: tempFilePath.value,
+    success(res) {
+      uni.openDocument({
+        filePath: res.savedFilePath,
+        showMenu: true
+      })
+    }
+  })
+}
+
+const authentication = () => {
+  emit('authentication')
+}
+</script>
+
+<style lang="scss" scoped>
+.material-section {
+  position: relative;
+  z-index: 2;
+  padding: 24rpx 0 0 0;
+  background: #fff;
+  border-radius: 16rpx;
+}
+.material-section-title {
+  font-size: 36rpx;
+  color: #333;
+  height: 40rpx;
+  line-height: 40rpx;
+  font-weight: normal;
+  margin: 0 0 24rpx 24rpx;
+  position: relative;
+  font-family: 'AlibabaBold';
+}
+.g_underline {
+  position: absolute;
+  width: 142rpx;
+  height: 8rpx;
+  bottom: 0;
+  left: 0;
+}
+.material-section-desc {
+  font-size: 28rpx;
+  color: #989899;
+  height: 40rpx;
+  line-height: 40rpx;
+  font-weight: normal;
+  margin: 0 0 40rpx 24rpx;
+}
+.material-card {
+  width: 654rpx;
+  padding: 24rpx;
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 auto 24rpx auto;
+  &--light { background: #f8fbfd; }
+  &--gray { background: #f4f8fa; }
+  &--top { padding-top: 40rpx; }
+}
+.material-card-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.material-card-title {
+  font-size: 32rpx;
+  color: #333;
+  height: 40rpx;
+  line-height: 40rpx;
+  font-weight: normal;
+  font-family: 'AlibabaMedium';
+  margin-bottom: 16rpx;
+}
+.material-card-desc {
+  font-size: 28rpx;
+  color: #989899;
+  height: 40rpx;
+  line-height: 40rpx;
+  font-weight: normal;
+  width: 416rpx;
+  .download-text {
+    color: #188EFE;
+    margin-left: 4rpx;
+  }
+  &--tall { height: 80rpx; }
+}
+.material-card-img {
+  flex-shrink: 0;
+  height: 112rpx;
+  &--sm { width: 150rpx; }
+  &--md { width: 188rpx; }
+  &--lg { width: 178rpx; }
+}
+.material-btn-box {
+  width: 100vw;
+  position: fixed;
+  left: 0;
+  bottom: calc(40rpx + env(safe-area-inset-bottom));
+  display: flex;
+  justify-content: center;
+  z-index: 10;
+}
+.material-btn {
+  width: 702rpx;
+  height: 88rpx;
+  background: #188EFE;
+  color: #fff;
+  border-radius: 10rpx;
+  font-size: 32rpx;
+  font-weight: normal;
+  text-align: center;
+  line-height: 88rpx;
+  border: none;
+}
+.popup-box {
+  width: 654rpx;
+  height: 512rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .download-success {
+    width: 120rpx;
+    height: 120rpx;
+    margin-top: 80rpx;
+  }
+  .popup-title {
+    height: 44rpx;
+    line-height: 44rpx;
+    font-size: 32rpx;
+    font-family: 'AlibabaBold';
+    text-align: center;
+    margin: 24rpx auto 40rpx auto;
+  }
+  .popup-desc {
+    height: 40rpx;
+    line-height: 40rpx;
+    text-align: center;
+    color: #19191980;
+    font-size: 28rpx;
+    margin-bottom: 36rpx;
+  }
+  .popup-btn {
+    width: 574rpx;
+    height: 88rpx;
+    text-align: center;
+    line-height: 88rpx;
+    background: #188EFE;
+    color: #fff;
+    font-size: 32rpx;
+    border-radius: 12rpx;
+  }
+}
+</style>

package/src/components/ZxMaterial/index.vue

@@ -0,0 +1,449 @@
+<template>
+  <view class="material-main" :style="{
+    background: step == 1 ? '#fff' : '#f5f5f5'
+  }">
+    <view class="process">
+      <view class="process-top">
+        <image :src="getStepIcon(1)" :class="getStepClass(1)" />
+        <view :class="step > 1 ? 'is-connect connect' : 'connect'"></view>
+        <image :src="getStepIcon(2)" :class="getStepClass(2)" />
+        <view :class="step > 2 ? 'is-connect connect' : 'connect'"></view>
+        <image :src="getStepIcon(3)" :class="getStepClass(3)" />
+        <view :class="step > 3 ? 'is-connect connect' : 'connect'"></view>
+        <image :src="step == 4 && !isSms ? '/static/icons/material/in-progress.png' : getStepIcon(4)" :class="step == 4 && !isSms ? 'in-progress' : getStepClass(4)" />
+        <view :class="step > 4 ? 'is-connect connect' : 'connect'"></view>
+        <image :src="getStepIcon(5)" :class="getStepClass(5)" />
+      </view>
+      <view class="process-bottom">
+        <view :class="step >= 1 ? 'step-text black-color' : 'step-text'">提交材料</view>
+        <view :class="step >= 2 && isPay ? 'step-text black-color' : 'step-text'">小额打款</view>
+        <view :class="step >= 3 ? 'step-text black-color' : 'step-text'">开户审核</view>
+        <view :class="step >= 4 ? 'step-text black-color' : 'step-text'">短信验证</view>
+        <view :class="step == 5 ? 'step-text black-color' : 'step-text'">结算授权</view>
+      </view>
+    </view>
+    <Instructions v-if="step == 1 && currentStatus !== AccountOpeningStatus.SUBMIT_FAIL" :financeEnterpriseId="financeEnterpriseId" :accountType="accountOpeningInfo.accountType" @authentication="handleAuthentication" />
+    <!-- 提交失败提示（SUBMIT_FAIL状态） -->
+    <view v-if="step == 1 && currentStatus === AccountOpeningStatus.SUBMIT_FAIL" class="review-box">
+      <image src="https://qiniu-cdn.joinsun.vip/prod/mp-advance/verifyFail.png" class="verifyReview" />
+      <view class="review-title">提交失败</view>
+      <view class="review-desc">原因：{{ accountOpeningInfo.failureReason }}</view>
+      <view class="review-btn" @click="reSubmit">重新提交</view>
+    </view>
+    <!-- 验证小额打款 -->
+    <view v-if="step == 2 && !isPay" class="review-box">
+      <image src="https://qiniu-cdn.joinsun.vip/prod/mp-advance/verifyReview.png" class="verifyReview" />
+      <view class="review-title">开户资料已提交审核</view>
+      <view class="review-desc">点击下方进行小额打款，验证银行账户真实性</view>
+      <view class="review-btn" @click="userClickedPay = true">去验证</view>
+    </view>
+    <payVerify v-if="step == 2 && isPay" @submit="handlePayVerifySubmit" />
+    <!-- 开户审核 -->
+    <view v-if="step == 3 && currentStatus === AccountOpeningStatus.FAIL" class="review-box">
+      <image src="https://qiniu-cdn.joinsun.vip/prod/mp-advance/verifyFail.png" class="verifyReview" />
+      <view class="review-title">开户资料审核未通过</view>
+      <view class="review-desc review-desc--dark">原因：{{ accountOpeningInfo.failureReason }}</view>
+      <view class="review-btn" @click="reSubmit">去修改</view>
+    </view>
+    <view v-if="step == 3 && currentStatus === AccountOpeningStatus.PENDING_MANUAL_REVIEW" class="review-box">
+      <image src="https://qiniu-cdn.joinsun.vip/prod/mp-advance/verifyReview.png" class="verifyReview" />
+      <view class="review-title review-title--wide">小额打款验证成功，开户申请预计在3个工作日内完成，请您耐心等待</view>
+      <view class="review-btn" @click="toIndex">我知道了</view>
+    </view>
+    <!-- 短信验证 -->
+    <smsVerify v-if="step == 4 && !isSms" @sendSms="handleSendSms" @submit="handleSmsVerifySubmit" />
+    <view v-if="step == 4 && currentStatus === AccountOpeningStatus.OPENING" class="review-box">
+      <image src="https://qiniu-cdn.joinsun.vip/prod/mp-advance/verifyReview.png" class="verifyReview" />
+      <view class="review-title review-title--spaced">开户中，获取开户结果</view>
+      <view class="review-btn" @click="getResult">获取结果</view>
+    </view>
+    <view v-if="step == 4 && currentStatus === AccountOpeningStatus.SUCCESS" class="review-box">
+      <image src="https://qiniu-cdn.joinsun.vip/prod/mp-advance/verifySuccess.png" class="verifySuccess" />
+      <view class="review-title review-title--spaced">开户成功，授权结算后即可完成所有步骤</view>
+      <view class="review-btn" @click="goToSettlement">去授权结算</view>
+    </view>
+    <!-- 结算授权 -->
+    <settlement v-if="step == 5 && !isSettlement" @sendSms="handleSendSettleVerify" @submit="handleSettleVerifySubmit" />
+    <view v-if="step == 5 && isSettlement" class="review-box">
+      <image src="https://qiniu-cdn.joinsun.vip/prod/mp-advance/verifyOk.png" class="verifyOk" />
+      <view class="review-title review-title--spaced">恭喜您已完成所有开户任务</view>
+      <view class="review-btn" @click="toIndex">我知道了</view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import Instructions from './Instructions.vue'
+import payVerify from './payVerify.vue'
+import smsVerify from './smsVerify.vue'
+import settlement from './settlement.vue'
+
+const props = defineProps({
+  // 企业ID
+  financeEnterpriseId: {
+    type: String,
+    default: ''
+  },
+  // 账户类型
+  accountType: {
+    type: String,
+    default: ''
+  },
+  // 开户信息（外部传入）
+  accountOpeningData: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const emit = defineEmits([
+  'queryEnterprise',       // 查询企业信息
+  'queryStatus',           // 查询开户状态
+  'updateSettleStatus',    // 更新结算授权状态
+  'smallAmountPayment',    // 小额打款验证
+  'sendVerifySms',         // 发送短信验证码
+  'confirmVerifyCode',     // 确认验证码
+  'settleAuthenticApply',  // 结算授权申请
+  'settleAuthenticConfirm',// 结算授权确认
+  'authentication',        // 去开户
+  'reSubmit',              // 重新提交
+  'toIndex'                // 返回首页
+])
+
+// 状态枚举
+const AccountOpeningStatus = {
+  INIT: 'INIT',
+  SUBMIT_FAIL: 'SUBMIT_FAIL',
+  WAIT_SMALL_AMOUNT_VERIFY: 'WAIT_SMALL_AMOUNT_VERIFY',
+  PENDING_MANUAL_REVIEW: 'PENDING_MANUAL_REVIEW',
+  PENDING_SMS_VERIFY: 'PENDING_SMS_VERIFY',
+  PENDING_LEGAL_SMS_VERIFY: 'PENDING_LEGAL_SMS_VERIFY',
+  OPENING: 'OPENING',
+  SUCCESS: 'SUCCESS',
+  FAIL: 'FAIL',
+  SETTLE_AUTHENTIC: 'SETTLE_AUTHENTIC',
+  SETTLE_AUTHENTIC_SUCCESS: 'SETTLE_AUTHENTIC_SUCCESS'
+}
+
+// 短信验证相关状态
+const SMS_VERIFY_STATUSES = [
+  AccountOpeningStatus.PENDING_SMS_VERIFY,
+  AccountOpeningStatus.PENDING_LEGAL_SMS_VERIFY
+]
+
+// 当前状态
+const currentStatus = ref('')
+const accountOpeningInfo = ref({})
+const forceToSettlement = ref(false)
+const userClickedPay = ref(false)
+const userClickedSettlement = ref(false)
+</script>
+
+// 获取步骤图标
+const getStepIcon = (targetStep) => {
+  if (step.value > targetStep) return '/static/icons/material/in-success.png'
+  if (step.value === targetStep) return '/static/icons/material/in-progress.png'
+  return `/static/icons/material/step${targetStep}.png`
+}
+
+// 获取步骤图标样式
+const getStepClass = (targetStep) => {
+  return step.value === targetStep ? 'in-progress' : 'step-icon'
+}
+
+// 状态到步骤的映射函数
+const getStepByStatus = (status) => {
+  if (!status) return 1
+  
+  switch (status) {
+    case AccountOpeningStatus.INIT:
+    case AccountOpeningStatus.SUBMIT_FAIL:
+      return 1
+    case AccountOpeningStatus.WAIT_SMALL_AMOUNT_VERIFY:
+      return 2
+    case AccountOpeningStatus.PENDING_MANUAL_REVIEW:
+    case AccountOpeningStatus.FAIL:
+      return 3
+    case AccountOpeningStatus.PENDING_SMS_VERIFY:
+    case AccountOpeningStatus.PENDING_LEGAL_SMS_VERIFY:
+    case AccountOpeningStatus.SUCCESS:
+    case AccountOpeningStatus.OPENING:
+      return 4
+    case AccountOpeningStatus.SETTLE_AUTHENTIC:
+    case AccountOpeningStatus.SETTLE_AUTHENTIC_SUCCESS:
+      return 5
+    default:
+      return 1
+  }
+}
+
+// 根据状态计算步骤
+const step = computed(() => {
+  if (forceToSettlement.value && SMS_VERIFY_STATUSES.includes(currentStatus.value)) {
+    return 5
+  }
+  return getStepByStatus(currentStatus.value)
+})
+
+// 根据状态判断各种子状态
+const isPay = computed(() => {
+  if (userClickedPay.value) return true
+  return currentStatus.value !== AccountOpeningStatus.WAIT_SMALL_AMOUNT_VERIFY
+})
+
+const isSms = computed(() => {
+  if (SMS_VERIFY_STATUSES.includes(currentStatus.value)) {
+    return false
+  }
+  return true
+})
+
+const isSettlement = computed(() => {
+  if (userClickedSettlement.value) return true
+  return currentStatus.value === AccountOpeningStatus.SETTLE_AUTHENTIC_SUCCESS
+})
+
+// 设置开户信息（供外部调用）
+const setAccountOpeningInfo = (data) => {
+  accountOpeningInfo.value = data
+  accountOpeningInfo.value.accountType = props.accountType || data.accountType
+  const newStatus = data?.accountOpeningStatus || data?.accountOpeningInfo?.status || ''
+  if (newStatus) {
+    currentStatus.value = newStatus
+    resetForceFlags()
+  }
+}
+
+// 设置状态（供外部调用）
+const setStatus = (status) => {
+  currentStatus.value = status
+  resetForceFlags()
+}
+
+// 重置强制标志
+const resetForceFlags = () => {
+  const resetStatuses = [
+    AccountOpeningStatus.SUCCESS,
+    AccountOpeningStatus.OPENING,
+    AccountOpeningStatus.SETTLE_AUTHENTIC,
+    AccountOpeningStatus.SETTLE_AUTHENTIC_SUCCESS
+  ]
+  if (resetStatuses.includes(currentStatus.value)) {
+    forceToSettlement.value = false
+  }
+}
+
+// 查询企业信息
+const getInfo = () => {
+  emit('queryEnterprise', { financeEnterpriseId: props.financeEnterpriseId })
+}
+
+// 查询开户状态
+const getResult = () => {
+  emit('queryStatus', { accountOpeningApplicationId: accountOpeningInfo.value.accountOpeningApplicationId })
+}
+
+// 跳转到结算授权
+const goToSettlement = () => {
+  emit('updateSettleStatus', {
+    accountOpeningApplicationId: accountOpeningInfo.value.accountOpeningApplicationId,
+    callback: () => {
+      if (SMS_VERIFY_STATUSES.includes(currentStatus.value)) {
+        forceToSettlement.value = true
+      }
+      getInfo()
+    }
+  })
+}
+
+// 重新提交
+const reSubmit = () => {
+  emit('reSubmit', { financeEnterpriseId: props.financeEnterpriseId })
+}
+
+// 去开户
+const handleAuthentication = () => {
+  emit('authentication', { 
+    financeEnterpriseId: props.financeEnterpriseId,
+    accountType: props.accountType
+  })
+}
+
+// 小额打款验证
+const handlePayVerifySubmit = (amount) => {
+  emit('smallAmountPayment', {
+    accountOpeningApplicationId: accountOpeningInfo.value.accountOpeningApplicationId,
+    verifyAmount: amount,
+    callback: () => getInfo()
+  })
+}
+
+// 发送短信验证码
+const handleSendSms = () => {
+  emit('sendVerifySms', {
+    accountOpeningApplicationId: accountOpeningInfo.value.accountOpeningApplicationId,
+    verifyType: 'OPEN_ACCT_SMS_CONTACT_AUTH'
+  })
+}
+
+// 确认短信验证码
+const handleSmsVerifySubmit = (code) => {
+  emit('confirmVerifyCode', {
+    accountOpeningApplicationId: accountOpeningInfo.value.accountOpeningApplicationId,
+    verifyType: 'OPEN_ACCT_SMS_CONTACT_AUTH',
+    verifyCode: code,
+    callback: () => getInfo()
+  })
+}
+
+// 发送结算授权验证码
+const handleSendSettleVerify = () => {
+  emit('settleAuthenticApply', {
+    accountOpeningApplicationId: accountOpeningInfo.value.accountOpeningApplicationId
+  })
+}
+
+// 确认结算授权
+const handleSettleVerifySubmit = (code) => {
+  emit('settleAuthenticConfirm', {
+    accountOpeningApplicationId: accountOpeningInfo.value.accountOpeningApplicationId,
+    verifyCode: code,
+    callback: () => getInfo()
+  })
+}
+
+// 返回首页
+const toIndex = () => {
+  emit('toIndex')
+}
+
+// 监听外部传入的数据
+watch(() => props.accountOpeningData, (newVal) => {
+  if (newVal && Object.keys(newVal).length > 0) {
+    setAccountOpeningInfo(newVal)
+  }
+}, { immediate: true, deep: true })
+
+onMounted(() => {
+  if (props.financeEnterpriseId) {
+    getInfo()
+  }
+})
+
+// 暴露方法给父组件
+defineExpose({
+  getInfo,
+  setAccountOpeningInfo,
+  setStatus,
+  accountOpeningInfo,
+  currentStatus,
+  step
+})
+</script>
+
+<style lang="scss" scoped>
+.material-main {
+  min-height: 100vh;
+  position: relative;
+}
+.process {
+  height: 204rpx;
+  background: #f5f5f5;
+  overflow: hidden;
+  .process-top {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 48rpx;
+    .step-icon {
+      width: 56rpx;
+      height: 56rpx;
+    }
+    .in-progress {
+      width: 36rpx;
+      height: 36rpx;
+    }
+    .connect {
+      width: 92rpx;
+      height: 12rpx;
+      background: #eaeaea;
+    }
+    .is-connect {
+      background: #188EFE;
+    }
+  }
+  .process-bottom {
+    margin-top: 24rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding: 0 12rpx;
+    .step-text {
+      height: 28rpx;
+      line-height: 28rpx;
+      font-size: 24rpx; 
+      color: #19191980;
+    }
+  }
+}
+.review-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 150rpx;
+  .verifyReview {
+    width: 176rpx;
+    height: 176rpx;
+  }
+  .verifySuccess {
+    width: 154rpx;
+    height: 176rpx;
+  }
+  .verifyOk {
+    width: 168rpx;
+    height: 176rpx;
+  }
+  .review-title {
+    height: 44rpx;
+    line-height: 44rpx;
+    font-size: 32rpx;
+    font-family: 'AlibabaMedium';
+    margin: 48rpx 0;
+    &--wide {
+      width: 686rpx;
+      height: auto;
+      margin-bottom: 148rpx;
+      text-align: center;
+    }
+    &--spaced {
+      margin-bottom: 170rpx;
+      margin-top: 70rpx;
+    }
+  }
+  .review-desc {
+    height: 40rpx;
+    line-height: 40rpx;
+    font-size: 28rpx;
+    margin-bottom: 104rpx;
+    color: #989899;
+    &--dark {
+      color: #19191980;
+    }
+  }
+  .review-btn {
+    width: 702rpx;
+    height: 88rpx;
+    border-radius: 12rpx;
+    background: #188EFE;
+    color: #fff;
+    text-align: center;
+    line-height: 88rpx;
+    font-size: 32rpx;
+  }
+}
+.black-color {
+  color: #191919 !important;
+}
+</style>

package/src/components/ZxMaterial/payVerify.vue

@@ -0,0 +1,75 @@
+<template>
+  <view class="payVerify-box">
+    <view class="payVerify-title">小额打款验证</view>
+    <view class="payVerify-desc">平台会向企业提交的银行账户中转入一笔小额资金，收到后请金额将填入下方并提交。</view>
+    <uv-input border="none" fontSize="48rpx" color="#000" type="digit" v-model="amount" :customStyle="inputStyle" />
+    <view class="payVerify-tip">金额需>0</view>
+    <view class="payVerify-btn" @click="submit">提交验证</view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const emit = defineEmits(['submit'])
+
+const amount = ref('')
+
+const inputStyle = {
+  height: '120rpx',
+  padding: '0',
+  paddingLeft: '24rpx',
+  background: '#fff',
+  fontWeight: 'bold'
+}
+
+const showMsg = (msg) => {
+  uni.showToast({ title: msg, icon: 'none' })
+}
+
+const submit = () => {
+  const value = parseFloat(amount.value)
+  if (!amount.value || isNaN(value) || value <= 0) {
+    showMsg('金额需大于0')
+    return
+  }
+  emit('submit', value)
+}
+</script>
+
+<style lang="scss" scoped>
+.payVerify-box {
+  padding: 0 24rpx;
+  margin-top: 10rpx;
+  .payVerify-title {
+    height: 60rpx;
+    line-height: 60rpx;
+    font-size: 44rpx;
+    color: #000;
+    font-family: 'AlibabaMedium';
+  }
+  .payVerify-desc {
+    line-height: 40rpx;
+    font-size: 28rpx;
+    color: #19191980;
+    margin: 24rpx 0 48rpx 0;
+  }
+  .payVerify-tip {
+    height: 40rpx;
+    line-height: 40rpx;
+    color: #ff2100;
+    margin-top: 20rpx;
+  }
+  .payVerify-btn {
+    width: 702rpx;
+    height: 88rpx;
+    text-align: center;
+    line-height: 88rpx;
+    background: #188EFE;
+    border-radius: 12rpx;
+    color: #fff;
+    font-size: 32rpx;
+    margin-top: 48rpx;
+  }
+}
+</style>

package/src/components/ZxMaterial/settlement.vue

@@ -0,0 +1,140 @@
+<template>
+  <view class="payVerify-box">
+    <view class="payVerify-title">结算授权</view>
+    <view class="payVerify-desc">已向经办人手机号发送验证码，请在5分钟内输入验证码</view>
+    <uv-input border="none" fontSize="48rpx" color="#000" type="digit" v-model="code" :customStyle="inputStyle" >
+      <template #suffix>
+        <uv-code unique-key="page-login" ref="codeRef" changeText="重新发送Xs" @change="codeChange" @end="setTipsColor(false)" @start="setTipsColor(true)"></uv-code>
+        <view class="code-btn" :class="{ 'code-btn--disabled': tipsColor }" @click="getCode">{{ tips || '获取验证码' }}</view>
+      </template>
+    </uv-input>
+    <view class="payVerify-btn" @click="submit">提交验证</view>
+    <uv-popup mode="bottom" round="20rpx" ref="getCodePopupRef" closeable>
+      <view class="popup-box">
+        <view class="popup-title">授权结算</view>
+        <view class="popup-content">请授权好惠通-众项网络开通账资金结算免验证服务，确认授权后经办人手机号将会收到短信验证码</view>
+        <view class="popup-btn" @click="popupOk">确认授权</view>
+      </view>
+    </uv-popup>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const emit = defineEmits(['sendSms', 'submit'])
+
+const codeRef = ref(null)
+const getCodePopupRef = ref(null)
+const tips = ref('')
+const tipsColor = ref(false)
+const code = ref('')
+
+const inputStyle = {
+  height: '120rpx',
+  padding: '0',
+  paddingLeft: '24rpx',
+  background: '#fff',
+  fontWeight: 'bold'
+}
+
+const showMsg = (msg) => {
+  uni.showToast({ title: msg, icon: 'none' })
+}
+
+const codeChange = (e) => {
+  tips.value = e
+}
+
+const setTipsColor = (value) => {
+  tipsColor.value = value
+}
+
+const getCode = () => {
+  if (codeRef.value.canGetCode) {
+    getCodePopupRef.value.open()
+  }
+}
+
+const popupOk = () => {
+  if (codeRef.value.canGetCode) {
+    codeRef.value.start()
+    getCodePopupRef.value.close()
+    emit('sendSms')
+  }
+}
+
+const submit = () => {
+  if (!code.value) {
+    showMsg('请先填写验证码')
+    return
+  }
+  emit('submit', code.value)
+}
+</script>
+
+<style lang="scss" scoped>
+.payVerify-box {
+  padding: 0 24rpx;
+  margin-top: 10rpx;
+  .payVerify-title {
+    height: 60rpx;
+    line-height: 60rpx;
+    font-size: 44rpx;
+    color: #000;
+    font-family: 'AlibabaMedium';
+  }
+  .payVerify-desc {
+    line-height: 40rpx;
+    font-size: 28rpx;
+    color: #19191980;
+    margin: 24rpx 0 48rpx 0;
+  }
+  .payVerify-btn {
+    width: 702rpx;
+    height: 88rpx;
+    text-align: center;
+    line-height: 88rpx;
+    background: #188EFE;
+    border-radius: 12rpx;
+    color: #fff;
+    font-size: 32rpx;
+    margin-top: 48rpx;
+  }
+}
+.code-btn {
+  width: 242rpx;
+  height: 88rpx;
+  border-radius: 12rpx;
+  margin-left: 20rpx;
+  font-size: 28rpx;
+  text-align: center;
+  line-height: 88rpx;
+  color: #188EFE;
+  &--disabled { color: #19191980; }
+}
+.popup-box {
+  padding: 32rpx;
+  .popup-title {
+    height: 50rpx;
+    line-height: 50rpx;
+    font-size: 36rpx;
+    font-family: 'AlibabaMedium';
+  }
+  .popup-content {
+    margin-top: 80rpx;
+    margin-bottom: 50rpx;
+    font-size: 32rpx;
+  }
+  .popup-btn {
+    width: 686rpx;
+    height: 88rpx;
+    text-align: center;
+    line-height: 88rpx;
+    border-radius: 10rpx;
+    background: #188EFE;
+    color: #fff;
+    font-size: 36rpx;
+  }
+}
+</style>

package/src/components/ZxMaterial/smsVerify.vue

@@ -0,0 +1,101 @@
+<template>
+  <view class="payVerify-box">
+    <view class="payVerify-title">短信验证</view>
+    <view class="payVerify-desc">向经办人手机号发送验证码，请在5分钟内输入验证码</view>
+    <uv-input border="none" fontSize="48rpx" color="#000" type="digit" v-model="code" :customStyle="inputStyle" >
+      <template #suffix>
+        <uv-code unique-key="page-login" ref="codeRef" changeText="重新发送Xs" @change="codeChange" @end="setTipsColor(false)" @start="setTipsColor(true)"></uv-code>
+        <view class="code-btn" :class="{ 'code-btn--disabled': tipsColor }" @click="getCode">{{ tips || '获取验证码' }}</view>
+      </template>
+    </uv-input>
+    <view class="payVerify-btn" @click="submit">提交验证</view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const emit = defineEmits(['sendSms', 'submit'])
+
+const codeRef = ref(null)
+const tips = ref('')
+const tipsColor = ref(false)
+const code = ref('')
+
+const inputStyle = {
+  height: '120rpx',
+  padding: '0',
+  paddingLeft: '24rpx',
+  background: '#fff',
+  fontWeight: 'bold'
+}
+
+const showMsg = (msg) => {
+  uni.showToast({ title: msg, icon: 'none' })
+}
+
+const codeChange = (e) => {
+  tips.value = e
+}
+
+const setTipsColor = (value) => {
+  tipsColor.value = value
+}
+
+const getCode = () => {
+  if (codeRef.value.canGetCode) {
+    codeRef.value.start()
+    emit('sendSms')
+  }
+}
+
+const submit = () => {
+  if (!code.value) {
+    showMsg('请先填写验证码')
+    return
+  }
+  emit('submit', code.value)
+}
+</script>
+
+<style lang="scss" scoped>
+.payVerify-box {
+  padding: 0 24rpx;
+  margin-top: 10rpx;
+  .payVerify-title {
+    height: 60rpx;
+    line-height: 60rpx;
+    font-size: 44rpx;
+    color: #000;
+    font-family: 'AlibabaMedium';
+  }
+  .payVerify-desc {
+    line-height: 40rpx;
+    font-size: 28rpx;
+    color: #19191980;
+    margin: 24rpx 0 48rpx 0;
+  }
+  .payVerify-btn {
+    width: 702rpx;
+    height: 88rpx;
+    text-align: center;
+    line-height: 88rpx;
+    background: #188EFE;
+    border-radius: 12rpx;
+    color: #fff;
+    font-size: 32rpx;
+    margin-top: 48rpx;
+  }
+}
+.code-btn {
+  width: 242rpx;
+  height: 88rpx;
+  border-radius: 12rpx;
+  margin-left: 20rpx;
+  font-size: 28rpx;
+  text-align: center;
+  line-height: 88rpx;
+  color: #188EFE;
+  &--disabled { color: #19191980; }
+}
+</style>

package/src/index.js

@@ -0,0 +1,19 @@
+import ZxMaterial from './components/ZxMaterial/index.vue'
+import Instructions from './components/ZxMaterial/Instructions.vue'
+import PayVerify from './components/ZxMaterial/payVerify.vue'
+import SmsVerify from './components/ZxMaterial/smsVerify.vue'
+import Settlement from './components/ZxMaterial/settlement.vue'
+
+// 单独导出组件
+export { ZxMaterial, Instructions, PayVerify, SmsVerify, Settlement }
+
+// 默认导出插件
+export default {
+  install(app) {
+    app.component('ZxMaterial', ZxMaterial)
+    app.component('Instructions', Instructions)
+    app.component('PayVerify', PayVerify)
+    app.component('SmsVerify', SmsVerify)
+    app.component('Settlement', Settlement)
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,144 @@
+import { DefineComponent } from 'vue'
+
+// 开户状态枚举
+export type AccountOpeningStatus = 
+  | 'INIT'
+  | 'SUBMIT_FAIL'
+  | 'WAIT_SMALL_AMOUNT_VERIFY'
+  | 'PENDING_MANUAL_REVIEW'
+  | 'PENDING_SMS_VERIFY'
+  | 'PENDING_LEGAL_SMS_VERIFY'
+  | 'OPENING'
+  | 'SUCCESS'
+  | 'FAIL'
+  | 'SETTLE_AUTHENTIC'
+  | 'SETTLE_AUTHENTIC_SUCCESS'
+
+// 开户信息
+export interface AccountOpeningInfo {
+  accountOpeningApplicationId?: string
+  accountOpeningStatus?: AccountOpeningStatus
+  accountType?: string
+  failureReason?: string
+  [key: string]: any
+}
+
+// 查询企业参数
+export interface QueryEnterpriseParams {
+  financeEnterpriseId: string
+}
+
+// 查询状态参数
+export interface QueryStatusParams {
+  accountOpeningApplicationId: string
+}
+
+// 更新结算状态参数
+export interface UpdateSettleStatusParams {
+  accountOpeningApplicationId: string
+  callback: () => void
+}
+
+// 小额打款参数
+export interface SmallAmountPaymentParams {
+  accountOpeningApplicationId: string
+  verifyAmount: number
+  callback: () => void
+}
+
+// 发送验证码参数
+export interface SendVerifySmsParams {
+  accountOpeningApplicationId: string
+  verifyType: string
+}
+
+// 确认验证码参数
+export interface ConfirmVerifyCodeParams {
+  accountOpeningApplicationId: string
+  verifyType: string
+  verifyCode: string
+  callback: () => void
+}
+
+// 结算授权申请参数
+export interface SettleAuthenticApplyParams {
+  accountOpeningApplicationId: string
+}
+
+// 结算授权确认参数
+export interface SettleAuthenticConfirmParams {
+  accountOpeningApplicationId: string
+  verifyCode: string
+  callback: () => void
+}
+
+// 开户参数
+export interface AuthenticationParams {
+  financeEnterpriseId: string
+  accountType: string
+}
+
+// 重新提交参数
+export interface ReSubmitParams {
+  financeEnterpriseId: string
+}
+
+// 组件 Props
+export interface ZxMaterialProps {
+  financeEnterpriseId?: string
+  accountType?: string
+  accountOpeningData?: AccountOpeningInfo
+}
+
+export interface InstructionsProps {
+  financeEnterpriseId?: string
+  accountType?: string
+  type?: string
+}
+
+// 组件 Emits
+export interface ZxMaterialEmits {
+  (e: 'queryEnterprise', params: QueryEnterpriseParams): void
+  (e: 'queryStatus', params: QueryStatusParams): void
+  (e: 'updateSettleStatus', params: UpdateSettleStatusParams): void
+  (e: 'smallAmountPayment', params: SmallAmountPaymentParams): void
+  (e: 'sendVerifySms', params: SendVerifySmsParams): void
+  (e: 'confirmVerifyCode', params: ConfirmVerifyCodeParams): void
+  (e: 'settleAuthenticApply', params: SettleAuthenticApplyParams): void
+  (e: 'settleAuthenticConfirm', params: SettleAuthenticConfirmParams): void
+  (e: 'authentication', params: AuthenticationParams): void
+  (e: 'reSubmit', params: ReSubmitParams): void
+  (e: 'toIndex'): void
+}
+
+export interface PayVerifyEmits {
+  (e: 'submit', amount: number): void
+}
+
+export interface SmsVerifyEmits {
+  (e: 'sendSms'): void
+  (e: 'submit', code: string): void
+}
+
+export interface SettlementEmits {
+  (e: 'sendSms'): void
+  (e: 'submit', code: string): void
+}
+
+export interface InstructionsEmits {
+  (e: 'authentication'): void
+}
+
+declare const ZxMaterial: DefineComponent<ZxMaterialProps, {}, {}, {}, {}, {}, {}, ZxMaterialEmits>
+declare const Instructions: DefineComponent<InstructionsProps, {}, {}, {}, {}, {}, {}, InstructionsEmits>
+declare const PayVerify: DefineComponent<{}, {}, {}, {}, {}, {}, {}, PayVerifyEmits>
+declare const SmsVerify: DefineComponent<{}, {}, {}, {}, {}, {}, {}, SmsVerifyEmits>
+declare const Settlement: DefineComponent<{}, {}, {}, {}, {}, {}, {}, SettlementEmits>
+
+export { ZxMaterial, Instructions, PayVerify, SmsVerify, Settlement }
+
+declare const _default: {
+  install: (app: any) => void
+}
+
+export default _default