integral-shop/single_uniapp22miao/pages/sub-pages/my-payee/zfb-detail.vue

<template>
  <view class="alipay-page">
    <view class="form-container">
      <!-- 支付宝账号 -->
      <view class="form-item">
        <view class="form-label">支付宝账号<text class="required">*</text></view>
        <input 
          v-model="formData.account"
          placeholder="请输入支付宝账号（手机号或邮箱）"
          class="form-input"
        />
      </view>
      
      <!-- 真实姓名 -->
      <view class="form-item">
        <view class="form-label">真实姓名<text class="required">*</text></view>
        <input 
          v-model="formData.real_name"
          placeholder="请输入支付宝实名认证姓名"
          class="form-input"
        />
      </view>
      
      <!-- 确认支付宝账号 -->
      <view class="form-item">
        <view class="form-label">确认账号<text class="required">*</text></view>
        <input 
          v-model="formData.confirm_account"
          placeholder="请再次输入支付宝账号"
          class="form-input"
        />
      </view>
      
      <!-- 温馨提示 -->
      <view class="tips-box">
        <view class="tips-title">温馨提示：</view>
        <view class="tips-item">1. 请确保支付宝账号和姓名与实名认证信息一致</view>
        <view class="tips-item">2. 绑定后无法修改，请仔细核对信息</view>
        <view class="tips-item">3. 如有疑问，请联系客服</view>
      </view>
    </view>
    
    <!-- 保存按钮 -->
    <view class="btn-container">
      <button 
        class="save-btn"
        :disabled="!canSave"
        :loading="saving"
        @click="handleSave"
      >
        保存
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        account: '',
        real_name: '',
        confirm_account: ''
      },
      saving: false,
      isEdit: false
    }
  },
  
  computed: {
    canSave() {
      return this.formData.account && 
             this.formData.real_name &&
             this.formData.confirm_account === this.formData.account;
    }
  },
  
  onLoad() {
    this.loadAlipayInfo();
  },
  
  methods: {
    // 加载支付宝信息
    async loadAlipayInfo() {
      try {
        const res = await this.$http.get('/api/alipay/index');
        if (res.code === 0 && res.data.account) {
          this.formData = {
            account: res.data.account,
            real_name: res.data.real_name,
            confirm_account: res.data.account
          };
          this.isEdit = true;
        }
      } catch (error) {
        console.error('加载支付宝信息失败:', error);
      }
    },
    
    // 保存
    async handleSave() {
      if (this.formData.account !== this.formData.confirm_account) {
        uni.showToast({
          title: '两次输入的账号不一致',
          icon: 'none'
        });
        return;
      }
      
      if (this.isEdit) {
        uni.showToast({
          title: '支付宝信息已绑定，无法修改',
          icon: 'none'
        });
        return;
      }
      
      this.saving = true;
      
      try {
        const res = await this.$http.post('/api/alipay/bind', {
          account: this.formData.account,
          real_name: this.formData.real_name
        });
        
        if (res.code === 0) {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          });
          
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        }
      } catch (error) {
        uni.showToast({
          title: error.msg || '保存失败',
          icon: 'none'
        });
      } finally {
        this.saving = false;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.alipay-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.form-container {
  background-color: #fff;
  margin: 20rpx 30rpx;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
}

.form-item {
  margin-bottom: 40rpx;
  
  .form-label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 15rpx;
    font-weight: 500;
    
    .required {
      color: #FF4757;
      margin-left: 4rpx;
    }
  }
  
  .form-input {
    height: 90rpx;
    padding: 0 20rpx;
    background-color: #f5f5f5;
    border-radius: 8rpx;
    font-size: 28rpx;
  }
}

.tips-box {
  margin-top: 40rpx;
  padding: 30rpx;
  background-color: #FFF3CD;
  border-radius: 8rpx;
  
  .tips-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #856404;
    margin-bottom: 15rpx;
  }
  
  .tips-item {
    font-size: 24rpx;
    color: #856404;
    line-height: 1.6;
    margin-bottom: 10rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.btn-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.save-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background: linear-gradient(90deg, #1678FF, #0D5FD8);
  color: #fff;
  border-radius: 45rpx;
  font-size: 32rpx;
  border: none;
  
  &[disabled] {
    opacity: 0.6;
  }
}
</style>