uniapp-ZHSQ/packages/payTheFees/index/index.vue

<template>
  <view class="pay-container">
    <!-- <view class="header">
      <text class="title">手机缴费</text>
    </view> -->

    <view class="form-container">
      <!-- 手机号码输入 -->
      <view class="form-item">
        <view class="label">手机号码</view>
        <input class="input" type="number" v-model="phoneNumber" placeholder="请输入手机号码" maxlength="11" @input="onPhoneInput" />
      </view>

      <!-- 运营商选择 -->
      <view class="form-item" v-if="showOperatorSelect">
        <view class="label">选择运营商</view>
        <view class="operator-list">
          <view class="operator-item" :class="{ 'active': selectedOperator === 'chinaMobile' }" @click="selectOperator('chinaMobile')">
            <image class="operator-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/payTheFees_yidong.png" mode="aspectFit" />
            <text>移动</text>
          </view>
          <view class="operator-item" :class="{ 'active': selectedOperator === 'chinaUnicom' }" @click="selectOperator('chinaUnicom')">
            <image class="operator-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/payTheFees_liantong.png" mode="aspectFit" />
            <text>中国联通</text>
          </view>
          <view class="operator-item" :class="{ 'active': selectedOperator === 'chinaTelecom' }" @click="selectOperator('chinaTelecom')">
            <image class="operator-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/payTheFees_dianxin.png" mode="aspectFit" />
            <text>中国电信</text>
          </view>
        </view>
      </view>

      <!-- 自动识别的运营商显示 -->
      <view class="form-item" v-else-if="selectedOperator">
        <view class="label">运营商</view>
        <view class="selected-operator">
          <image class="operator-icon" :src="getOperatorIcon()" mode="aspectFit" />
          <text>{{ getOperatorName() }}</text>
          <text class="change-btn" @click="showOperatorSelect = true">更换</text>
        </view>
      </view>

      <!-- 缴费金额 -->
      <view class="form-item">
        <view class="label">缴费金额</view>
        <input class="input amount-input" type="number" v-model="amount" placeholder="请输入金额" />

        <view class="amount-list">
          <view class="amount-item" v-for="item in amountOptions" :key="item" @click="selectAmount(item)">{{ item }}元</view>
        </view>
      </view>

      <!-- 缴费按钮 -->
      <button class="pay-btn" :disabled="!isFormValid" @click="handlePay">立即缴费</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: '',
      selectedOperator: '',
      amount: '',
      amountOptions: [10, 20, 30, 50, 100, 200],
      showOperatorSelect: false
    }
  },
  computed: {
    isFormValid() {
      // 简单验证：手机号11位，选择了运营商，金额大于0
      return this.phoneNumber.length === 11 &&
             this.selectedOperator &&
             this.amount &&
             Number(this.amount) > 0;
    }
  },
  methods: {
    onPhoneInput() {
      if (this.phoneNumber.length >= 3) {
        this.autoDetectOperator();
      }
    },
    autoDetectOperator() {
      // 获取手机号前3位或前4位
      const prefix = this.phoneNumber.substring(0, 3);
      const prefix4 = this.phoneNumber.substring(0, 4);

      // 中国移动号段
      const chinaMobilePrefixes = ['134', '135', '136', '137', '138', '139', '147', '150', '151', '152', '157', '158', '159', '178', '182', '183', '184', '187', '188', '198'];
      // 中国联通号段
      const chinaUnicomPrefixes = ['130', '131', '132', '145', '155', '156', '166', '175', '176', '185', '186'];
      // 中国电信号段
      const chinaTelecomPrefixes = ['133', '149', '153', '173', '177', '180', '181', '189', '199'];

      if (chinaMobilePrefixes.includes(prefix) || chinaMobilePrefixes.includes(prefix4)) {
        this.selectedOperator = 'chinaMobile';
        this.showOperatorSelect = false;
      } else if (chinaUnicomPrefixes.includes(prefix) || chinaUnicomPrefixes.includes(prefix4)) {
        this.selectedOperator = 'chinaUnicom';
        this.showOperatorSelect = false;
      } else if (chinaTelecomPrefixes.includes(prefix) || chinaTelecomPrefixes.includes(prefix4)) {
        this.selectedOperator = 'chinaTelecom';
        this.showOperatorSelect = false;
      } else {
        // 无法识别时显示选择界面
        this.showOperatorSelect = true;
      }
    },
    selectOperator(operator) {
      this.selectedOperator = operator;
      this.showOperatorSelect = false;
    },
    selectAmount(amount) {
      this.amount = amount;
    },
    handlePay() {
      if (this.isFormValid) {
        uni.showToast({
          title: '缴费成功',
          icon: 'success'
        });
      }
    },
    getOperatorName() {
      switch (this.selectedOperator) {
        case 'chinaMobile':
          return '中国移动';
        case 'chinaUnicom':
          return '中国联通';
        case 'chinaTelecom':
          return '中国电信';
        default:
          return '';
      }
    },
    getOperatorIcon() {
      switch (this.selectedOperator) {
        case 'chinaMobile':
          return 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/payTheFees_yidong.png';
        case 'chinaUnicom':
          return 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/payTheFees_liantong.png';
        case 'chinaTelecom':
          return 'https://wechat-img-file.oss-cn-beijing.aliyuncs.com/payTheFees_dianxin.png';
        default:
          return '';
      }
    }
  }
}
</script>

<style>
@import url("./index.css");
</style>