library-wechat/pages/login/login-pay.vue

<template>
  <view style="background-color: #fff; height: calc(100vh);">
    <view class="top-bar">
      <image class="top-bar-bg" src="@/static/images/mingqi-beij@2x.png" mode="aspectFill"></image>
      <view class="library-info">
        <image class="avatar" src="@/static/images/avatar.png" mode="aspectFill"></image>
        <view class="library-name">葛店经济技术开发区图书馆</view>
      </view>
    </view>

    <!-- 支付分状态展示 -->
    <view class="pay-score-box" v-if="payScore">
      <view class="score-item">
        <uni-icons type="info" size="24" color="#01a4fe"></uni-icons>
        <view class="score-text">
          微信支付分：<text style="color:#e74c3c; font-size:16px; font-weight:bold;">{{ payScore }}</text> 分
        </view>
      </view>
      <view class="score-desc" :style="{color: payScore >= 550 ? '#07c160' : '#e74c3c'}">
        {{ payScore >= 550 ? '✅ 符合办证条件（≥550分）' : '❌ 支付分不足，暂无法办证' }}
      </view>
    </view>

    <!-- 未获取支付分时显示授权按钮 -->
    <view class="auth-box" v-else>
      <button class="auth-btn" @click="getPayScore">
        授权查询微信支付分（办证必备）
      </button>
    </view>

    <!-- 表单：只有支付分达标才显示 -->
    <view class="form-box" v-if="payScore && payScore >= 550">
      <view class="item">
        <uni-icons class="form-icon" type="person" size="24"></uni-icons>
        <input class="input" placeholder="请输入读者证号" v-model="cardNo" />
      </view>
      <view class="item">
        <uni-icons class="form-icon" type="locked" size="24"></uni-icons>
        <input class="input" placeholder="请输入密码" :password="!showPwd" v-model="password" />
        <uni-icons class="form-right-icon" :type="showPwd ? 'eye-slash' : 'eye'" size="20" @click="togglePwd"></uni-icons>
      </view>
      <button class="login-btn" type="primary" @click="submit">绑定</button>
    </view>

    <view class="tips">
      温馨提示：<br />
      1、密码默认为<text style="color:#e74c3c">身份证后6位</text>，X大写；<br />
      2、微信支付分≥550分方可办理读者证。
    </view>
  </view>
</template>

<script>
const TOKEN_KEY = 'token';
const USER_KEY = 'user-info';

export default {
  data() {
    return {
      cardNo: '',
      password: '',
      showPwd: false,
      payScore: null, // 微信支付分
      serviceId: '你的支付分service_id' // 微信支付分后台获取
    }
  },
  onLoad() {
    // 页面加载可自动查支付分（也可用户点击）
    // this.getPayScore()
  },
  methods: {
    togglePwd() {
      this.showPwd = !this.showPwd
    },

    // 1. 获取微信支付分（核心）
    async getPayScore() {
      const _this = this
      uni.showLoading({ title: '获取支付分中...' })

      // 1) 后端获取支付分授权参数（必须后端签名）
      uni.request({
        url: 'https://你的后端.com/api/pay-score/auth',
        method: 'POST',
        data: {
          openid: uni.getStorageSync('wxSignature') || '', // 用户openid
          service_id: this.serviceId
        },
        success: (res) => {
          if (res.data.code !== 200) {
            uni.showToast({ title: res.data.msg || '获取失败', icon: 'none' })
            return
          }
          const { package: packageStr, out_order_no } = res.data.data

          // 2) 前端拉起支付分授权（微信原生API）
          uni.requestPayment({
            provider: 'wxpay',
            type: 'payScore',
            timeStamp: String(Date.now()),
            package: packageStr,
            // 以下由后端返回
            signType: 'HMAC-SHA256',
            paySign: res.data.data.paySign,
            nonceStr: res.data.data.nonceStr,

            success: () => {
              // 3) 授权成功 → 查询分数
              _this.queryPayScore(out_order_no)
            },
            fail: (err) => {
              console.log('支付分授权失败', err)
              uni.showToast({ title: '授权取消或失败', icon: 'none' })
            },
            complete: () => {
              uni.hideLoading()
            }
          })
        },
        fail: () => {
          uni.hideLoading()
          uni.showToast({ title: '网络异常', icon: 'none' })
        }
      })
    },

    // 2. 查询支付分分数（后端接口）
    async queryPayScore(outOrderNo) {
      uni.showLoading({ title: '查询分数...' })
      uni.request({
        url: 'https://你的后端.com/api/pay-score/query',
        method: 'POST',
        data: { out_order_no: outOrderNo },
        success: (res) => {
          uni.hideLoading()
          if (res.data.code === 200) {
            this.payScore = res.data.data.score // 例如 680
          } else {
            uni.showToast({ title: '查询失败', icon: 'none' })
          }
        },
        fail: () => {
          uni.hideLoading()
          uni.showToast({ title: '查询失败', icon: 'none' })
        }
      })
    },

    // 3. 原绑定逻辑（增加支付分判断）
    async submit() {
      // 先判断支付分
      if (!this.payScore || this.payScore < 550) {
        uni.showToast({ title: '支付分不足550，无法办证', icon: 'none' })
        return
      }
      if (!this.cardNo || !this.password) {
        uni.showToast({ title: '请输入读者证号和密码', icon: 'none' })
        return
      }

      // 以下为原登录逻辑（略）
      uni.showLoading({ title: '绑定中...' })
      setTimeout(() => {
        const res = {
          token: 'login-token-' + Date.now(),
          user: {
            nickName: '读者',
            cardNo: this.cardNo,
            payScore: this.payScore // 可一并保存
          }
        }
        uni.setStorageSync(TOKEN_KEY, res.token)
        uni.setStorageSync(USER_KEY, res.user)
        uni.hideLoading()
        uni.showToast({ title: '绑定成功', icon: 'success' })
        uni.navigateBack()
      }, 800)
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  padding: 40px 20px;
}
.form-box {
  padding: 20px;
  .item {
    width: 100%;
    min-height: 42px;
    border-radius: 23px;
    background-color: #f7f7f7;
    border: 1px solid #f4f4f4;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
    overflow: hidden;
    .t-right-icon{
      margin-right: 15px;
      margin-left: 0;
    }
    .input {
      flex: 1;
      border-radius: 8px;
      padding: 12px 15px;
      font-size: 13px;
    }
  }
}


.login-btn {
  margin-top: 20px;
  background-color: #01a4fe;
  border-radius: 23px;
}
.tips {
  margin: 50px 30px;
  font-size: 11px;
  color: #000;
  line-height: 22px;
}
.form-icon {
  ::v-deep .uni-icons{
    margin-left: 10px;
    color: #01a4fe !important;
  }
}
.form-right-icon{
  ::v-deep .uni-icons{
    margin-right: 10px;
  }
}

/* 新增支付分样式 */
.pay-score-box {
  padding: 20px;
  margin: 10px 20px;
  background: #f7f9ff;
  border-radius: 12px;
}
.score-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.score-text {
  margin-left: 10px;
  font-size: 15px;
}
.score-desc {
  font-size: 13px;
  padding-left: 34px;
}
.auth-box {
  padding: 40px 20px;
  text-align: center;
}
.auth-btn {
  background: #01a4fe;
  color: #fff;
  border-radius: 23px;
  padding: 12px 30px;
  border: none;
}
</style>