chuangte_bike_newxcx/page_user/shoukuan/addsk.vue

<template>
  <view class="page">
    <u-navbar title="添加收款账户" :border-bottom="false" :background="bgc" back-icon-color="#333" title-color='#333' 
      title-size='34' height='36' id="navbar"></u-navbar>

    <view class="container">
      <!-- 账户类型选择 -->
     <!-- <view class="section-card">
        <view class="section-title">选择收款方式</view>
        <view class="type-options">
          <view v-for="(item,index) in zhanghulist" :key="index"
            class="type-option" 
            :class="{active: activeType === item.apiType}"
            @click="btnxz(item)">
            <u-icon :name="item.picture" size="44" color="#409EFF"></u-icon>
            <view class="option-text">
              <text class="option-name">{{item.outName}}</text>
              <text class="option-desc">{{item.remark}}</text>
            </view>
            <u-icon v-if="activeType === item.apiType" name="checkmark" size="32" color="#409EFF"></u-icon>
          </view>
        </view>
      </view> -->

      <!-- 银行卡绑定表单 -->
      <view class="section-card" v-if="activeType == 'BANK' || activeType == 'PUBLIC_BANK'">
        <view class="section-title">绑定银行卡信息</view>
        <!-- 开户行输入（仅对公银行卡显示） -->
        <view class="form-item" v-if="activeType == 'PUBLIC_BANK'">
          <view class="form-label">开户行名称</view>
          <u-input v-model="bankForm.bankName" placeholder="请输入开户行名称" border="none" class="custom-input"></u-input>
        </view>
        
        <view class="form-item">
          <view class="form-label">持卡人姓名</view>
          <u-input v-model="bankForm.name" placeholder="请输入持卡人姓名" border="none" class="custom-input"></u-input>
        </view>
        
        <view class="form-item">
          <view class="form-label">银行卡号</view>
          <u-input v-model="bankForm.no" placeholder="请输入银行卡号" border="none" type="number" class="custom-input"></u-input>
        </view>
        
        <view class="form-item">
          <view class="form-label">身份证号</view>
          <u-input v-model="bankForm.idCard" placeholder="请输入身份证号" border="none" class="custom-input"></u-input>
        </view>
        
        <view class="form-item" style="border-bottom: none;">
          <view class="form-label">手机号</view>
          <u-input v-model="bankForm.mobile" placeholder="请输入手机号" border="none" class="custom-input"></u-input>
        </view>
      </view>
      
      <!-- 二维码收款设置 -->
      <view class="section-card" v-if="activeType == 'QR_CODE'">
        <view class="section-title">上传收款二维码</view>
        <view class="qrcode-upload">
          <view class="upload-area" @click="chooseImage">
            <u-icon name="plus" size="60" color="#C0C4CC" v-if="!bankForm.no"></u-icon>
            <image :src="bankForm.no" mode="aspectFit" v-else class="qrcode-img"></image>
            <text class="upload-tip" v-if="!bankForm.no">点击上传二维码</text>
          </view>
        </view>
        <view class="form-item" style="margin-top: 20rpx;">
          <view class="form-label">收款人姓名</view>
          <u-input v-model="bankForm.name" placeholder="请输入收款人姓名" border="none" class="custom-input"></u-input>
        </view>
        <view class="form-item">
          <view class="form-label">收款人身份证号</view>
          <u-input v-model="bankForm.idCard" placeholder="请输入收款人身份证号" border="none" class="custom-input"></u-input>
        </view>
        <view class="form-item" style="border-bottom: none;">
          <view class="form-label">收款人手机号</view>
          <u-input v-model="bankForm.mobile" placeholder="请输入收款人手机号" border="none" class="custom-input"></u-input>
        </view>
      </view>
	  <!-- 太米收款设置 -->
	  <view class="section-card" v-if="activeType == 'TM_WALLET'">
	    <view class="section-title">绑定银行卡信息</view>
	    <view class="form-item">
	      <view class="form-label">持卡人姓名</view>
	      <u-input v-model="bankForm.name" placeholder="请输入持卡人姓名" border="none" class="custom-input"></u-input>
	    </view>
	    <view class="form-item">
	      <view class="form-label">银行卡号</view>
	      <u-input v-model="bankForm.no" placeholder="请输入银行卡号" border="none" type="number" class="custom-input"></u-input>
	    </view>
	    <view class="form-item">
	      <view class="form-label">身份证号</view>
	      <u-input v-model="bankForm.idCard" placeholder="请输入身份证号" border="none" class="custom-input"></u-input>
	    </view>
	    <view class="form-item" style="border-bottom: none;">
	      <view class="form-label">手机号</view>
	      <u-input v-model="bankForm.mobile" placeholder="请输入手机号" border="none" class="custom-input"></u-input>
	    </view>
	  </view>

      <!-- 提交按钮 -->
      <view class="submit-btn">
        <u-button 
          type="primary" 
          shape="circle" 
          @click="submitForm"
          class="custom-button"
          :disabled="!activeType"
        >
          添加
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bgc: {
        backgroundColor: "#fff",
      },
      activeType: '', // bank/qrcode
      bankForm: {
		channelId:'', // 银行卡类型：BANK-私人银行卡，PUBLIC_BANK-对公银行卡，QR-二维码收款
        name: '',
        idCard: '',
        mobile: '',
		no:'',
        bankName: '' // 开户行名称
      },
	  token: '', // 添加七牛云token
	  upurl: 'https://api.ccttiot.com', // 添加上传域名
	  zhanghulist:[],
	  activeTypeid:''
    }
  },
  onShow() {
	
  },
  onLoad(e) {
  	this.activeType = e.activeType
	this.activeTypeid = e.id 
	this.getqudao()
	this.getQiniuToken()
  },
  methods: {
	  btnxz(item){
		this.activeType = item.apiType 
		this.activeTypeid = item.id 
	  },
	  // 获取渠道列表
	  getqudao(){
		  this.$u.get(`/app/withdrawChannel/listSimple?appId=${this.$store.state.appid}`).then(res =>{
			  if(res.code == 200){
				  this.zhanghulist = res.data
			  }
		  })
	  },
	  // 获取七牛云token
	  getQiniuToken() {
	  	this.$u.get("/common/qiniuToken").then((res) => {
	  		if (res.code == 200) {
	  			this.token = res.data
	  		}
	  	})
	  },
	  // 选择图片
	  chooseImage() {
	  	uni.chooseImage({
	  		count: 1,
	  		sizeType: ['compressed'],
	  		sourceType: ['album', 'camera'],
	  		success: (res) => {
	  			this.uploadImage(res.tempFilePaths[0])
	  		}
	  	})
	  },
	  // 上传图片
	  uploadImage(filePath) {
	  	uni.showLoading({
	  		title: '上传中...'
	  	})
	  	const math = 'static/' + this.$u.guid(20)
	  	uni.uploadFile({
	  		url: 'https://up-z2.qiniup.com',
	  		filePath: filePath,
	  		name: 'file',
	  		formData: {
	  			token: this.token,
	  			key: 'bike/img/' + math
	  		},
	  		success: (res) => {
	  			const response = JSON.parse(res.data)
	  			if (response.key) {
	  				this.bankForm.no = this.upurl + '/' + response.key
	  				uni.showToast({
	  					title: '上传成功',
	  					icon: 'success'
	  				})
	  			} else {
	  				uni.showToast({
	  					title: '上传失败',
	  					icon: 'none'
	  				})
	  			}
	  		},
	  		fail: () => {
	  			uni.showToast({
	  				title: '上传失败',
	  				icon: 'none'
	  			})
	  		},
	  		complete: () => {
	  			uni.hideLoading()
	  		}
	  	})
	  },
    submitForm() {
		this.bankForm.channelId = this.activeTypeid
		if(this.activeType == 'WECHAT'){
			let that = this
			wx.login({
				success(res) {
					if (res.code) {
						that.$u.put(`/bst/account/bindByJsCode?jsCode=${res.code}&channelId=${that.activeTypeid}`).then((resp) => {
							if (resp.code == 200) {
								uni.hideLoading()
								uni.showToast({
								  title: '添加成功',
								  icon: 'success',
								  duration:3000
								})
								setTimeout(() => {
								    uni.navigateBack()
								}, 1500)
							}else{
								uni.showToast({
								  title: resp.msg,
								  icon: 'none',
								  duration:3000
								})
							}
						})
					}
				},
			})
			return
		}
		uni.showLoading({ title: '添加中...' })
		// 银行卡类型保持用户的选择：BANK 或 PUBLIC_BANK
		let data = {
			...this.bankForm
		}
	   this.$u.post(`/bst/account`,data).then((res) => {
	   	    if (res.code == 200) {
				uni.hideLoading()
				uni.showToast({
				  title: '添加成功',
				  icon: 'success',
				  duration:3000
				})
	   	    	setTimeout(() => {
	   	    	    uni.navigateBack()
	   	    	}, 1500)
	   	    }else{
				uni.showToast({
				  title: res.msg,
				  icon: 'none',
				  duration:3000
				})
			}
	   })
    },
  }
}
</script>

<style lang="scss">
page {
  background: #F5F7FA;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
.container {
  padding: 30rpx;
}

/* 通用卡片样式 */
.section-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 36rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
}

/* 通用标题样式 */
.section-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 30rpx;
}

/* 账户类型选择 */
.type-options {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}
.type-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  background: #F7F9FC;
  border-radius: 16rpx;
  transition: all 0.2s ease-in-out;
}
.type-option.active {
  background: #EEF5FF;
  border: 1rpx solid #409EFF;
}
.type-option:active {
  transform: scale(0.98);
}
.option-text {
  display: flex;
  flex-direction: column;
  margin-left: 20rpx;
  flex: 1;
}
.option-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 400;
}
.option-desc {
  font-size: 24rpx;
  color: #999;
  margin-top: 4rpx;
}

/* 表单样式 */
.form-item {
  margin-bottom: 10rpx;
  padding-bottom: 24rpx;
  border-bottom: 1rpx solid #F0F2F5;
}
.form-label {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 16rpx;
}
.custom-input {
  font-size: 28rpx;
  color: #333;
  height: 40rpx;
  line-height: 40rpx;
  placeholder {
    color: #C0C4CC;
    font-size: 28rpx;
  }
}

/* 二维码上传 */
.qrcode-upload {
    display: flex;
    justify-content: center;
    margin: 20rpx 0 40rpx 0;
}
.upload-area {
    width: 220rpx;
    height: 220rpx;
    background: #F7F9FC;
    border-radius: 16rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.qrcode-img {
    width: 100%;
    height: 100%;
    border-radius: 16rpx;
    object-fit: cover;
}
.upload-tip {
    margin-top: 16rpx;
    font-size: 24rpx;
    color: #999;
}

/* 提交按钮 */
.submit-btn {
    margin-top: 40rpx;
}
.custom-button {
    height: 92rpx;
    font-size: 32rpx;
    font-weight: 500;
    background: linear-gradient(90deg, #409EFF 0%, #5CB8FF 100%);
    border-radius: 46rpx;
    box-shadow: 0 6rpx 16rpx rgba(64, 158, 255, 0.2);
}
.custom-button::after {
    border: none;
}
.custom-button:disabled {
    background: #C0C4CC;
    box-shadow: none;
}
</style>