mrr.sj.front/pages/wallet/bindway.vue

<template>
  <view class="bind-alipay">
    <!-- 顶部导航栏 -->
    <custom-navbar 
      :title="'绑定'+way" 
      :show-back="true"
      backgroundColor="#fff"
    ></custom-navbar>
    
    <!-- 绑定步骤表单 -->
    <view class="bind-form">
      <!-- 第一步：验证码 -->
      <view class="form-section">
        <text class="step-title">第一步：先获取手机验证码</text>
        
        <view class="phone-number">
          <text class="number-lable">绑定的用户手机</text>
          <text class="number">133****4653</text>
        </view>
        
        <view class="input-group">
          <text class="label">验证码</text>
          <input 
            type="number" 
            v-model="verifyCode"
            placeholder="请输入验证码"
            placeholder-class="input-placeholder"
            maxlength="6"
            class="input"
          />
          <text 
            class="verify-btn"
            :class="{'disabled': counting}"
            @click="getVerifyCode"
          >{{countText}}</text>
        </view>
      </view>
      
      <!-- 第二步：上传收款码 -->
      <view class="form-section">
        <text class="step-title">第二步：上传{{way}}收款二维码</text>
        <view class="upload-box" @click="uploadQRCode">
          <image 
            v-if="qrCodeUrl" 
            :src="qrCodeUrl" 
            mode="aspectFit" 
            class="qr-image"
          ></image>
          <view v-else class="upload-placeholder">
            <text class="plus">+</text>
          </view>
        </view>
      </view>
      
      <!-- 第三步：真实姓名 -->
      <view class="form-section">
        <text class="step-title">第三步：填写{{way}}真实姓名</text>
        <view class="input-group name-input">
          <text class="label">真实姓名</text>
          <input 
            type="text"
            v-model="realName"
            placeholder="请输入真实姓名"
            placeholder-class="input-placeholder"
            class="input"
          />
        </view>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="fixed-box">
      <view 
        class="fixed-btn"
        :class="{'btn-disabled': !canSubmit}"
        @click="handleSubmit"
      >
        <text class="fixed-text">提交</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      verifyCode: '',
      qrCodeUrl: '',
      realName: '',
      counting: false,
      count: 60,
	  way: '',
    }
  },
  computed: {
    countText() {
      return this.counting ? `${this.count}s` : '获取验证码'
    },
    canSubmit() {
      return this.verifyCode && this.qrCodeUrl && this.realName
    }
  },
  onLoad(options) {
	this.way = options.way;
  },
  methods: {
    // 获取验证码
    getVerifyCode() {
      if (this.counting) return
      
      this.counting = true
      this.count = 60
      
      const timer = setInterval(() => {
        if (this.count > 0) {
          this.count--
        } else {
          this.counting = false
          clearInterval(timer)
        }
      }, 1000)
      
      // TODO: 调用发送验证码接口
      uni.showToast({
        title: '验证码已发送',
        icon: 'none'
      })
    },
    
    // 上传二维码
    uploadQRCode() {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.qrCodeUrl = res.tempFilePaths[0]
          // TODO: 上传图片到服务器
        }
      })
    },
    
    // 提交表单
    handleSubmit() {
      if (!this.canSubmit) return
      
      if (this.verifyCode.length !== 6) {
        uni.showToast({
          title: '请输入6位验证码',
          icon: 'none'
        })
        return
      }
      
      if (!this.realName.trim()) {
        uni.showToast({
          title: '请输入真实姓名',
          icon: 'none'
        })
        return
      }
      
      // TODO: 调用绑定接口
      uni.showLoading({
        title: '提交中...'
      })
      
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '绑定成功',
          icon: 'success',
          duration: 2000,
          success: () => {
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              })
            }, 2000)
          }
        })
      }, 1500)
    }
  }
}
</script>

<style>
.bind-form {
  margin: 32rpx 24rpx;
}

.form-section {
  background-color: #FFFFFF;
  border-radius: 12rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
}

.step-title {
  display: block;
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
  padding-bottom: 32rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
  margin-bottom: 32rpx;
}

.phone-number {
  display: flex;
  align-items: center;
  margin-top: 32rpx;
  margin-bottom: 24rpx;
}
.number-lable,.label {
  font-size: 24rpx;
  color: #333333;
  font-weight: 500;
  margin-right: 16rpx;
}
.number {
  font-size: 24rpx;
  color: #333333;
  font-weight: 400;
}

.input-group {
  display: flex;
  align-items: center;
  padding-bottom: 24rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
}

.input {
  flex: 1;
  height: 36rpx;
  font-size: 24rpx;
}

.verify-btn {
  font-size: 24rpx;
  color: #01A7F1;
  font-weight: 400;
}

.verify-btn.disabled {
  color: #999999;
}

.upload-box {
  width: 160rpx;
  height: 160rpx;
  background-color: #F8F8F8;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.upload-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F8F8F8;
}

.plus {
  font-size: 60rpx;
  color: #999999;
  font-weight: 300;
}

.qr-image {
  width: 100%;
  height: 100%;
}

.name-input {
  border-bottom: none;
  padding-bottom: 0;
}

</style>