暂存code

pages/mine_bank_add/mine_bank_add.vue

@@ -8,17 +8,38 @@
 				    border="surround"
 				    v-model="form[item.formName]"
 					:customStyle="inputCss"
-				  ></up-input>
+					:type="item.type"
+				></up-input>
+			</view>
+			<view class="add_bank_form_item" >
+				<view class="add_title">银行</view>
+				<view class="bank_warp" @click="bankShowCheck(true)">
+					<view style="color: #808080;margin-left: 22rpx;font-size: 28rpx;">{{form.bankName || "选择银行"}}</view>
+					<up-image src="/static/common/right_soild.png" width="14" height="14" bgColor="#f1f6ff00"></up-image>
+				</view>
 			</view>
 		</view>
 		<view class="add_but" @click="addBank">
 			添加
 		</view>
 		<up-toast ref="uToastRef"></up-toast>
+		<up-picker 
+			:show="bankShow" 
+			:columns="bankOption" 
+			keyName="bankName" 
+			itemHeight="34"
+			@confirm="bankConfirm"
+			:loading="bankLoading"
+			@close="bankShow=false"
+			@cancel="bankShow=false"
+		></up-picker>
 	</view>
 </template>
 
 <script>
+	import { bindBank } from '@/api/bank.js';
+	import { getSupportBank } from '@/api/common.js';
+	
 	export default {
 		data() {
 			return {
@@ -30,74 +51,120 @@
 					"padding-left": "16px",
 				},
 				form:{
-					name:null,
-					number:null,
-					bankName:null,// 银行名称
-					bankBranch:null,// 开户支行
-					iban:null,// IBAN
+					bankNo:null,//银行卡号
+					bankId:null,// 银行ID
+					bankName:null,// 银行ID
+					bankUsername:null,//银行卡开户姓名
+					bankPhone:null,//银行卡预留手机号码
 				},
 				formList:[
 					{
 						id:1,
-						title:"姓名",
-						formName:"name",
-						placeholder:"请输入姓名",
+						title:"银行卡开户姓名",
+						formName:"bankUsername",
+						placeholder:"请输入银行卡开户姓名",
+						type:'text',
+					},{
+						id:3,
+						title:"银行卡预留手机号码",
+						formName:"bankPhone",
+						placeholder:"请输入银行卡预留手机号码",
+						type:'number',
 					},{
 						id:2,
 						title:"银行卡账号/卡号",
-						formName:"number",
+						formName:"bankNo",
 						placeholder:"请输入账号",
-					},{
-						id:3,
-						title:"银行名称",
-						formName:"bankName",
-						placeholder:"请输入银行名称",
-					},{
-						id:4,
-						title:"开户支行（选填）",
-						formName:"bankBranch",
-						placeholder:"请属于您的开户支行",
-					},{
-						id:5,
-						title:"IBAN（选填）",
-						formName:"iban",
-						placeholder:"IBNA",
+						type:'number',
 					},
-				]
+				],
+				bankOption:[],// 银行列表选择
+				bankShow:false,
+				bankLoading:false,
 			}
 		},
+		onLoad() {
+		},
 		methods: {
-			addBank(){
-				
+			// 选择银行的弹框
+			async bankShowCheck(status){
+				if(status){
+					const resp = await getSupportBank();
+					if(resp && resp.bizcode === 100){
+						this.bankOption = [resp.data];
+					}
+				}else{
+					this.bankOption = [[]];
+				}
+				this.bankShow = status;
+			},
+			// 提交地址
+			bankConfirm(e){
+				const {
+				    columnIndex,
+				    value,
+				    values,
+				    index,
+				} = e;
+				if(!value || value.length === 0){
+					this.$refs.uToastRef.show({
+						type: 'error',
+						message: "请先选择银行",
+					});
+					return;
+				}
+				const data = value[0];
+				this.form.bankId = data.id;
+				this.form.bankName = data.bankName;
+				this.bankShowCheck(false);
+			},
+			async addBank(){
 				const param ={
 					...this.form
 				};
-				if(!param.name){
+				if(!param.bankUsername){
 					this.$refs.uToastRef.show({
 						type: 'error',
-						message: "请输入姓名",
+						message: "请输入银行卡开户姓名",
 					});
 					return;
 				}
-				if(!param.number){
+				if(!param.bankPhone){
 					this.$refs.uToastRef.show({
 						type: 'error',
-						message: "银行卡账号/卡号",
+						message: "请输入银行卡预留手机号码",
 					});
 					return;
 				}
-				if(!param.bankName){
+				if(!param.bankNo){
 					this.$refs.uToastRef.show({
 						type: 'error',
-						message: "银行名称",
+						message: "请输入银行卡账号/卡号",
 					});
 					return;
 				}
-				console.log("param",param);
-				uni.navigateTo({
-					url:'/pages/mine_bank_card/mine_bank_card',
-				})
-			}
+				if(!param.bankId){
+					this.$refs.uToastRef.show({
+						type: 'error',
+						message: "请选择银行",
+					});
+					return;
+				}
+				delete param.bankName;
+				const resp = await bindBank(param);
+				if(resp && resp.bizcode === 100){
+					this.$refs.uToastRef.show({
+						type: 'sesses',
+						message: "绑定成功",
+					});
+					setTimeout(()=>{
+						uni.navigateTo({
+							url:'/pages/mine_bank_card/mine_bank_card',
+						})
+					},2000)
+				}
+			},
+			
 		}
 	}
 </script>
@@ -123,5 +190,10 @@
 			margin-bottom: 30rpx;
 		}
 	}
+	.bank_warp{
+		display: flex;
+		justify-content: space-between;
+		width: 100%;
+	}
 	
 </style>