kxmall-ui/kxmall-rider-ui/pages/profile/edit.vue

<template>
  <view class="container">
    <!-- 顶部标题 -->
    <view class="header">
      <text class="title">资料填写</text>
    </view>

    <!-- 表单区域 -->
    <view class="form-container">
      <view class="form-item">
        <text class="label">银行名称</text>
        <input class="input" v-model="form.bankName" placeholder="请输入银行名称" />
      </view>

      <view class="form-item">
        <text class="label">银行账号</text>
        <input class="input" v-model="form.bankAccount" placeholder="请输入银行账号" type="number" />
      </view>

      <view class="form-item">
        <text class="label">开户人姓名</text>
        <input class="input" v-model="form.accountHolder" placeholder="请输入开户人姓名" />
      </view>

      <view class="form-item">
        <text class="label">身份证号码</text>
        <input class="input" v-model="form.idCardNumber" placeholder="请输入身份证号码" />
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-btn" @click="submitForm">
      <text>保存资料</text>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  computed: {
    ...mapState(['token', 'userInfo'])
  },
  data() {
    return {
      form: {
        bankName: '',
        bankAccount: '',
        accountHolder: '',
        idCardNumber: ''
      }
    };
  },
  onLoad() {
    this.loadProfile();
  },
  methods: {
    // 加载已有资料
    async loadProfile() {
      try {
        const res = await this.request("get", "rider/app/profile", this.token);
        if (res.code === 200 && res.data) {
          this.form = {
            bankName: res.data.bankName || '',
            bankAccount: res.data.bankAccount || '',
            accountHolder: res.data.accountHolder || '',
            idCardNumber: res.data.idCardNumber || ''
          };
        }
      } catch (error) {
        console.error('加载资料失败:', error);
      }
    },

    // 提交表单
    async submitForm() {
      if (!this.validateForm()) return;

      try {
        uni.showLoading({ title: '提交中...', mask: true });
        const res = await this.request("post", "rider/app/profile/update", this.token, this.form);
        uni.hideLoading();

        if (res.code === 200) {
          uni.showToast({ title: '资料保存成功', icon: 'success' });
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        } else {
          uni.showToast({ title: res.msg || '保存失败', icon: 'none' });
        }
      } catch (error) {
        uni.hideLoading();
        uni.showToast({ title: '保存失败，请重试', icon: 'none' });
        console.error('保存资料失败:', error);
      }
    },

    // 表单验证
    validateForm() {
      if (!this.form.bankName) {
        uni.showToast({ title: '请输入银行名称', icon: 'none' });
        return false;
      }
      if (!this.form.bankAccount) {
        uni.showToast({ title: '请输入银行账号', icon: 'none' });
        return false;
      }
      if (!this.form.accountHolder) {
        uni.showToast({ title: '请输入开户人姓名', icon: 'none' });
        return false;
      }
      if (!this.form.idCardNumber) {
        uni.showToast({ title: '请输入身份证号码', icon: 'none' });
        return false;
      }
      // 简单的身份证格式验证
      if (!/^\d{17}[\dXx]$/.test(this.form.idCardNumber)) {
        uni.showToast({ title: '请输入正确的身份证号码', icon: 'none' });
        return false;
      }
      return true;
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  min-height: 100vh;
  background-color: #f7f7f7;
}

.header {
  padding: 30rpx 0;
  text-align: center;

  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.form-container {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 0 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.form-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }

  .label {
    display: block;
    font-size: 30rpx;
    color: #333;
    margin-bottom: 20rpx;
  }

  .input {
    font-size: 28rpx;
    height: 50rpx;
    color: #333;
  }
}

.submit-btn {
  background-color: #437CE8;
  color: #fff;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  border-radius: 45rpx;
  font-size: 32rpx;
  margin-top: 50rpx;
  box-shadow: 0 4rpx 12rpx rgba(67, 124, 232, 0.3);
}
</style>