shanxia2.0/miniprogram/pages/common/wechat-official-account.vue

<script setup>
import { ref } from 'vue'
import { openWechatOfficialAccount } from '@/utils/wechatOfficialAccount'
import { useWechatBinding } from '@/utils/useWechatBinding'

const { bindingState, bindingAccount, startBinding, refreshBinding } = useWechatBinding()

const accountName = '山峡化工'
const openingProfile = ref(false)
const directOpenUnavailable = ref(false)

const openAccountProfile = () => {
  if (openingProfile.value) return
  openingProfile.value = true
  directOpenUnavailable.value = false
  openWechatOfficialAccount({
    onUnavailable: () => { directOpenUnavailable.value = true },
    onComplete: () => { openingProfile.value = false }
  })
}

</script>

<template>
  <view class="follow-page">
    <view class="follow-hero">
      <text class="follow-hero__label">微信服务号</text>
      <text class="follow-hero__name">{{ accountName }}</text>
      <text class="follow-hero__desc">关注并绑定账号，及时接收业务提醒</text>
    </view>

    <view class="follow-card">
      <text class="follow-card__title">1. 关注服务号</text>
      <text class="follow-copy">打开服务号主页后，点击「关注」即可。</text>
      <button
        class="follow-button"
        :disabled="openingProfile"
        hover-class="follow-button--active"
        @click="openAccountProfile"
      >
        {{ openingProfile ? '打开中…' : '打开服务号并关注' }}
      </button>
      <text v-if="directOpenUnavailable" class="follow-hint">
        暂时无法打开，请更新微信后重试；如仍无法打开，请联系管理员。
      </text>
    </view>

    <view class="follow-card">
      <text class="follow-card__title">2. 绑定门户账号</text>
      <!-- #ifdef MP-WEIXIN -->
      <text class="follow-copy">当前账号：{{ bindingAccount }}</text>
      <text v-if="bindingState.ready && bindingState.bound" class="follow-copy">
        {{ bindingState.subscribed ? '已开通服务号通知，可以接收业务提醒。' : '已绑定，请先关注服务号才能接收通知。' }}
      </text>
      <text v-else-if="bindingState.ready && !bindingState.enabled" class="follow-hint">服务号通知尚未启用，请联系管理员。</text>
      <template v-else>
        <text class="follow-hint">关注后点击下方按钮，微信授权完成后将自动返回并绑定当前账号，无需扫码或再次确认。</text>
        <button class="follow-button" :disabled="bindingState.busy || !bindingState.ready || !bindingState.enabled" @click="startBinding">
          {{ bindingState.busy ? '处理中…' : bindingState.sessionId ? '重新授权绑定' : '一键绑定当前账号' }}
        </button>
      </template>
      <text v-if="bindingState.sessionStatus === 'waiting'" class="follow-hint">等待微信授权；返回后自动完成绑定。若状态未更新，可点击“刷新绑定状态”。</text>
      <text v-if="bindingState.error" class="follow-hint follow-hint--error">{{ bindingState.error }}</text>
      <button class="follow-button follow-button--secondary" :disabled="bindingState.busy" @click="refreshBinding">刷新绑定状态</button>
      <!-- #endif -->
      <!-- #ifndef MP-WEIXIN -->
      <text class="follow-copy">请在微信小程序内打开此页，点击“一键绑定当前账号”完成绑定。</text>
      <!-- #endif -->
      <text class="follow-hint">也可在电脑门户「头像菜单 → 微信通知」扫码绑定。关注和绑定都完成后，才能接收对应业务通知。</text>
    </view>

    <view class="follow-card">
      <text class="follow-card__title">可以接收哪些提醒</text>
      <view class="follow-notice">
        <text class="follow-notice__name">审批待办</text>
        <text class="follow-notice__desc">有单据需要您审批时提醒</text>
      </view>
      <view class="follow-notice">
        <text class="follow-notice__name">审批结果</text>
        <text class="follow-notice__desc">申请最终通过或打回时提醒</text>
      </view>
      <view class="follow-notice">
        <text class="follow-notice__name">发放／支付完成</text>
        <text class="follow-notice__desc">备用金、报销、运费、充值处理完成时提醒</text>
      </view>
      <view class="follow-notice">
        <text class="follow-notice__name">证件到期提醒</text>
        <text class="follow-notice__desc">每周一、周三、周五10点向指定接收角色汇总证件提醒</text>
      </view>
      <text class="follow-hint">具体接收范围由业务权限和通知角色决定。</text>
    </view>
  </view>
</template>

<style scoped lang="scss">
.follow-page {
  min-height: 100vh;
  padding: 32rpx 28rpx calc(32rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
  background: #f5f8f7;
  color: #1f2a26;
}
.follow-hero {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
  padding: 36rpx 32rpx;
  border-radius: 24rpx;
  background: #e9f9f2;
}
.follow-hero__label {
  color: #087f57;
  font-size: 24rpx;
}
.follow-hero__name {
  font-size: 40rpx;
  font-weight: 700;
}
.follow-hero__desc {
  color: #6b7b74;
  font-size: 26rpx;
  line-height: 1.6;
}
.follow-card {
  margin-top: 24rpx;
  padding: 28rpx;
  border: 1rpx solid #dcebe4;
  border-radius: 24rpx;
  background: #fff;
}
.follow-card__title {
  display: block;
  margin-bottom: 20rpx;
  font-size: 30rpx;
  font-weight: 600;
}
.follow-copy,
.follow-hint {
  display: block;
  font-size: 26rpx;
  line-height: 1.7;
  overflow-wrap: break-word;
}
.follow-hint {
  margin-top: 16rpx;
  color: #6b7b74;
  font-size: 24rpx;
}
.follow-hint--error { color: #b45309; }
.follow-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 24rpx 0 0;
  padding: 20rpx 24rpx;
  border-radius: 16rpx;
  background: #0a9f6d;
  color: #fff;
  font-size: 28rpx;
  line-height: 1.4;
}
.follow-button::after {
  border: none;
}
.follow-button--active {
  background: #087f57;
}
.follow-button--secondary {
  background: #e9f9f2;
  color: #087f57;
}
.follow-notice {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
  padding: 18rpx 0;
  border-bottom: 1rpx solid #dcebe4;
}
.follow-notice__name {
  color: #087f57;
  font-size: 27rpx;
  font-weight: 500;
}
.follow-notice__desc {
  color: #6b7b74;
  font-size: 24rpx;
  line-height: 1.6;
}
</style>