pay-video-applet-uniapp-24-8-22/pages_mine/mine/addBankCard.vue

<template>
  <view class="addBankCard">
    <!--顶部导航栏-->
    <navbar leftClick @leftClick="$utils.navigateBack" title="编辑银行卡信息"/>

    <!--添加银行卡页面-->
    <view class="container">
      <view class="header">
        <text>为保证您的资金安全，请绑定账户本人的银行卡</text>
      </view>

      <!-- <view class="form-item">
        <text class="label">卡号</text>
        <view class="card-info">
          <radio-group>
            <label>
              <radio value="建行" checked="true"></radio>
              <text>中国建设银行</text>
            </label>
          </radio-group>
        </view>
      </view> -->
	  
	  <view class="form-item">
	    <text class="label">开户行</text>
	    <input class="input" placeholder="请输入开户行" v-model="form.bankAddress" />
	  </view>

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

      <view class="form-item">
        <text class="label">银行卡号</text>
        <input class="input" placeholder="请输入银行卡号" v-model="form.bankId" />
      </view>

      <!--<button class="next-button" @click="onNextClick">下一步</button>-->
    </view>

    <!--下一步按钮-->
    <button @click="addCart" class="bottomBtn">
      提交
    </button>
  </view>
</template>

<script>
import '../../common.css'; // 引入公共 CSS 文件

export default {
  data() {
    return {
	  form : {
		  name: '',
		  bankId: '',
		  bankAddress : '',
	  },
    };
  },
  onLoad() {
  		this.getData()
  },
  methods: {
    onCameraClick() {
      // 添加拍照或选择图片的逻辑
    },
	getData(){
		this.$api('infoGetBankCardPage', res => {
			if(res.code == 200 && res.result){
				this.form = res.result
			}
		})
	},
	addCart(){
		
		let data = {
			bankAddress : this.form.bankAddress,
			name : this.form.name,
			bankId : this.form.bankId,
		}
		
		if(this.form.id){
			data.id = this.form.id
		}
		
		if (this.$utils.verificationAll(data, {
				bankAddress: '请输入开户行',
				name: '请输入姓名',
				bankId: '请输入银行卡号',
			})) {
			return
		}
		
		this.$api('infoAddBankCard', data, res => {
			if(res.code == 200){
				uni.showToast({
					title:'添加成功',
					icon : 'none'
				})
				setTimeout(() => {
					uni.navigateTo({
						url:'/pages_mine/mine/purse'
					})
				}, 500)
			}
		})
	},
    onNextClick() {
      this.$utils.navigateTo("/mine/purse");
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  padding: 16px;

  .header {
    margin-bottom: 20px;
    font-size: 14px;
    color: #666;
  }

  .form-item {
    margin-bottom: 20px;

    .label {
      font-size: 16px;
      margin-bottom: 10px;
      display: block;
    }

    .card-info {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .camera-icon {
        width: 24px;
        height: 24px;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .input {
      width: 100%;
      padding: 10px;
      font-size: 16px;
      border: 1px solid #e5e5e5;
      border-radius: 4px;
    }
  }
}



</style>