haha/haha-admin-mp/src/pages/replenish/bind.vue

<template>
  <view class="page">
    <NavBar title="绑定微信" />

    <view class="content" v-if="!bound">
      <view class="icon-section">
        <view class="bind-icon">
          <view class="icon-wechat"></view>
        </view>
      </view>

      <text class="title">绑定补货员微信</text>
      <text class="subtitle">请确认以下绑定码，点击按钮完成微信绑定</text>

      <view class="code-card">
        <text class="code-label">绑定码</text>
        <text class="code-value">{{ displayCode }}</text>
        <text class="code-expire">有效期24小时，过期请重新生成</text>
      </view>

      <view class="bind-info">
        <view class="info-item">
          <view class="info-icon done"></view>
          <text class="info-text">后台已创建补货员账号</text>
        </view>
        <view class="info-item">
          <view class="info-icon done"></view>
          <text class="info-text">管理员已生成一次性绑定码</text>
        </view>
        <view class="info-item">
          <view class="info-icon active"></view>
          <text class="info-text">点击下方按钮完成微信绑定</text>
        </view>
      </view>

      <button class="bind-btn" :loading="bindLoading" :disabled="bindLoading" @click="handleBind">
        <text v-if="!bindLoading">绑定微信</text>
        <text v-else>绑定中...</text>
      </button>

      <text class="back-link" @click="goToLogin">返回登录页</text>
    </view>

    <view class="content success-section" v-else>
      <view class="success-icon">
        <text class="success-check">✓</text>
      </view>
      <text class="success-title">绑定成功</text>
      <text class="success-desc">即将进入补货首页...</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import NavBar from '@/components/NavBar.vue';

const bindingCode = ref('');
const bindLoading = ref(false);
const bound = ref(false);

const displayCode = computed(() => {
  const code = bindingCode.value;
  if (!code) return '---';
  // 每4位一组显示
  return code.replace(/(.{4})/g, '$1 ').trim();
});

onMounted(() => {
  // 获取绑定码
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1] as any;
  if (currentPage && currentPage.options) {
    bindingCode.value = currentPage.options.code || currentPage.options.bindingCode || '';
  }

  if (!bindingCode.value) {
    uni.showToast({ title: '缺少绑定码参数', icon: 'none' });
  }
});

const goToLogin = () => {
  uni.reLaunch({ url: '/pages/login/login' });
};

const handleBind = async () => {
  if (!bindingCode.value) {
    uni.showToast({ title: '绑定码无效', icon: 'none' });
    return;
  }

  bindLoading.value = true;
  try {
    // 1. 微信授权
    const loginRes = await new Promise<any>((resolve, reject) => {
      uni.login({
        provider: 'weixin',
        success: (res) => resolve(res),
        fail: (err) => reject(err)
      });
    });

    if (!loginRes.code) {
      uni.showToast({ title: '微信授权失败', icon: 'none' });
      return;
    }

    // 2. 调用绑定接口
    const { bindWechat } = await import('@/api/replenish');
    await bindWechat({
      bindingCode: bindingCode.value.trim().toUpperCase(),
      code: loginRes.code
    });

    // 3. 显示成功状态
    bound.value = true;
    setTimeout(() => {
      uni.reLaunch({ url: '/pages/replenish/index' });
    }, 1500);
  } catch (error: any) {
    uni.showToast({ title: error.message || '绑定失败', icon: 'none' });
  } finally {
    bindLoading.value = false;
  }
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f8fafc;
}

.content {
  padding: 40rpx 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 图标区域 */
.icon-section {
  margin: 40rpx 0 32rpx;

  .bind-icon {
    width: 160rpx;
    height: 160rpx;
    background: #ecfdf5;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .icon-wechat {
      width: 64rpx;
      height: 54rpx;
      background: #07c160;
      border-radius: 12rpx;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        top: 12rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 24rpx;
        height: 16rpx;
        border: 4rpx solid #fff;
        border-top: none;
        border-right: none;
        transform: translateX(-50%) rotate(-45deg);
      }

      &::after {
        content: '';
        position: absolute;
        bottom: 12rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 28rpx;
        height: 16rpx;
        border: 4rpx solid #fff;
        border-bottom: none;
        border-right: none;
        transform: translateX(-50%) rotate(45deg);
      }
    }
  }
}

.title {
  font-size: 36rpx;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 12rpx;
}

.subtitle {
  font-size: 26rpx;
  color: #64748b;
  margin-bottom: 40rpx;
  text-align: center;
}

/* 绑定码卡片 */
.code-card {
  width: 100%;
  background: #ffffff;
  border: 2rpx solid #10b981;
  border-radius: 20rpx;
  padding: 32rpx;
  text-align: center;
  margin-bottom: 32rpx;

  .code-label {
    display: block;
    font-size: 24rpx;
    color: #94a3b8;
    margin-bottom: 16rpx;
  }

  .code-value {
    display: block;
    font-size: 36rpx;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 6rpx;
    font-family: 'Courier New', monospace;
    margin-bottom: 16rpx;
  }

  .code-expire {
    font-size: 22rpx;
    color: #94a3b8;
  }
}

/* 绑定流程说明 */
.bind-info {
  width: 100%;
  background: #ffffff;
  border: 1rpx solid #e2e8f0;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 40rpx;

  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .info-icon {
      width: 32rpx;
      height: 32rpx;
      border-radius: 50%;
      margin-right: 16rpx;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;

      &.done {
        background: #10b981;

        &::after {
          content: '';
          width: 10rpx;
          height: 16rpx;
          border: 3rpx solid #fff;
          border-top: none;
          border-left: none;
          transform: rotate(45deg) translateY(-2rpx);
        }
      }

      &.active {
        background: #10b981;
        animation: pulse 2s infinite;

        &::after {
          content: '';
          width: 8rpx;
          height: 8rpx;
          background: #fff;
          border-radius: 50%;
        }
      }
    }

    .info-text {
      font-size: 26rpx;
      color: #475569;
    }
  }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 0 12rpx rgba(16, 185, 129, 0); }
}

/* 绑定按钮 */
.bind-btn {
  width: 100%;
  height: 100rpx;
  background: #10b981;
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  border-radius: 16rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;

  &::after {
    border: none;
  }

  &:active {
    background: #059669;
  }

  &[disabled] {
    opacity: 0.6;
  }
}

.back-link {
  display: block;
  margin-top: 28rpx;
  font-size: 26rpx;
  color: #94a3b8;
}

/* 成功状态 */
.success-section {
  justify-content: center;
  min-height: 70vh;

  .success-icon {
    width: 140rpx;
    height: 140rpx;
    background: #ecfdf5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28rpx;

    .success-check {
      font-size: 64rpx;
      color: #10b981;
      font-weight: 700;
    }
  }

  .success-title {
    font-size: 36rpx;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12rpx;
  }

  .success-desc {
    font-size: 28rpx;
    color: #64748b;
  }
}
</style>