Directory
-
- Source code 1
- Source code 2
- at last
Source code 1
<template>
<view class="my-add-bank-card">
<!-- name="bank_name" must be added to the input submitted in the form form to bind the parameters to be passed name="bank_name" type="text" v-model="address.bank_name" must be name and v- The model parameters remain consistent! ! ! -->
<form @submit="formSubmit" @reset="formReset">
<view class="my-add-bank-card-box">
<view class="add-card-tit">
Add bank card information
</view>
<view class="add-card-list1">
<view class="add-card-list-name1">
Account holder's name
</view>
<view class="add-card-list1-ipt">
<input class="popup-input-field" name="bank_user_name" type="text"
v-model="address.bank_user_name" placeholder="Please fill in the name of the bank card account holder" />
</view>
</view>
<view class="add-card-list">
<view class="add-card-list-name1">
Bank
</view>
<view class="add-card-list1-ipt">
<input class="popup-input-field" name="bank_name" type="text" v-model="address.bank_name"
placeholder="Please fill in your bank" />
</view>
</view>
<view class="add-card-list">
<view class="add-card-list-name1">
Account opening branch
</view>
<view class="add-card-list1-ipt">
<input class="popup-input-field" name="bank_account" type="number"
v-model="address.bank_account" placeholder="Please fill in the account opening branch" />
</view>
</view>
<view class="add-card-list">
<view class="add-card-list-name1">
\t\t\t\t\t\tBank card number
</view>
<view class="add-card-list1-ipt">
<input class="popup-input-field" name="bank_card" type="number" v-model="address.bank_card"
placeholder="Please fill in the correct bank card number" />
</view>
</view>
</view>
<view class="bankCardSub">
<button form-type="submit">Submit bank card information</button>
</view>
</form>
<!-- Pop-up window address to pass parameters -->
<!-- <mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province" :city="city" :area="area" :pickerValueDefault="cityPickerValueDefault" @onConfirm=" onConfirm"></mpvue-city-picker> -->
</view>
</template>
<script>
export default {<!-- -->
data() {<!-- -->
return {<!-- -->
address: {<!-- -->},
}
},
methods: {<!-- -->
formSubmit(e) {<!-- -->
let self = this;
var formdata = e.detail.value;
// formdata.province_id = self.province_id; // Separate parameters for special forms
// console.log(e, 'formdata');
// The formdata in the verification is assigned to the formdata object, and then the parameters can be passed.
if (formdata.bank_user_name == '') {<!-- -->
uni.showToast({<!-- -->
title: 'Please enter the name of the account holder',
duration: 1000,
icon: 'none'
});
return false;
}
if (formdata.bank_name == '') {<!-- -->
uni.showToast({<!-- -->
title: 'Please enter your bank',
duration: 1000,
icon: 'none'
});
return false;
}
if (formdata.bank_account == '') {<!-- -->
uni.showToast({<!-- -->
title: 'Please enter the branch where the account is opened',
duration: 1000,
icon: 'none'
});
return false;
}
if (formdata.bank_card == '') {<!-- -->
uni.showToast({<!-- -->
title: 'Please enter your bank card number',
duration: 1000,
icon: 'none'
});
return false;
}
// if (formdata.phone == '') {<!-- -->
// uni.showToast({<!-- -->
// title: 'Please enter your mobile phone number',
// duration: 1000,
// icon: 'none'
// });
// return false;
// }
// if (formdata.province_id == 0 || formdata.city_id == 0 || formdata.region_id) {<!-- -->
// if (formdata.detail == '') {<!-- -->
// uni.showToast({<!-- -->
// title: 'Please select the complete province and city',
// duration: 1000,
// icon: 'none'
// });
// return false;
// }
// }
self._post('user.user/bindUserBankData', formdata, function(res) {<!-- -->
// self.showSuccess(res.msg, function() {<!-- -->
// console.log(self.delta);
// #ifdef H5
// uni.navigateBack({<!-- -->
// delta: parseInt(self.delta)
// });
//#endif
// #ifndef H5
// uni.navigateBack({<!-- -->
// delta: 1
// });
//#endif
// });
\t\t\t\t\t
// console.log(res, 'Added successfully');
// Jump to add successfully
if (res.msg == 'Added successfully') {<!-- -->
uni.navigateTo({<!-- -->
url: '/pages/user/my-bank-card/my-successfully-added-bank-card/my-successfully-added-bank-card'
})
} else {<!-- -->
uni.showToast({<!-- -->
title: 'Add failed',
duration: 1000,
icon: 'none'
});
}
});
},
/*Clear data*/
formReset: function(e) {<!-- -->
console.log('Clear data');
},
}
}
</script>
<style scoped>
page {<!-- -->
background: #F8F9FA;
}
.my-add-bank-card {<!-- -->
display: flex;
flex-direction: column;
}
.my-add-bank-card-box {<!-- -->
width: 686rpx;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
margin: 20rpx 32rpx 80rpx 32rpx;
padding: 24rpx 30rpx 0rpx 30rpx;
box-sizing: border-box;
}
.add-card-tit {<!-- -->
font-size: 36rpx;
font-family: Source Han Sans-Medium, Source Han Sans;
font-weight: 500;
color: #333333;
line-height: 50rpx;
font-weight: bold;
}
.add-card-list1 {<!-- -->
padding-top: 12rpx;
padding-bottom: 30rpx;
box-sizing: border-box;
display: flex;
align-items: center;
}
.add-card-list-name1 {<!-- -->
font-size: 32rpx;
font-family: Source Han Sans-Regular, Source Han Sans;
font-weight: 400;
color: #3D3D3D;
line-height: 52rpx;
}
.add-card-list1-ipt {<!-- -->
margin-left: 24rpx;
}
.add-card-list {<!-- -->
padding-bottom: 30rpx;
box-sizing: border-box;
display: flex;
align-items: center;
}
.bankCardSub {<!-- -->
width: 554rpx;
height: 84rpx;
background: #891F50;
border-radius: 137rpx 137rpx 137rpx 137rpx;
opacity: 1;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
font-family: Source Han Sans-Regular, Source Han Sans;
font-weight: 400;
color: #FFFFFF;
line-height: 36rpx;
}
.bankCardSub button {<!-- -->
width: 554rpx;
height: 84rpx;
background: #891F50;
border-radius: 137rpx 137rpx 137rpx 137rpx;
opacity: 1;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
font-family: Source Han Sans-Regular, Source Han Sans;
font-weight: 400;
color: #FFFFFF;
line-height: 36rpx;
}
</style>
Source code 2
<template>
<view class="my-add-bank-card">
<!-- name="bank_name" must be added to the input submitted in the form form to bind the parameters to be passed name="bank_name" type="text" v-model="address.bank_name" must be name and v- The model parameters remain consistent! ! ! -->
<form @submit="formSubmit" @reset="formReset">
<view class="my-add-bank-card-box">
<view class="add-card-tit">
Edit bank card information
</view>
<view class="add-card-list1">
<view class="add-card-list-name1">
Account holder's name
</view>
<view class="add-card-list1-ipt">
<input class="popup-input-field" name="bank_user_name" type="text"
v-model="address.bank_user_name" placeholder="Please fill in the name of the bank card account holder" />
</view>
</view>
<view class="add-card-list">
<view class="add-card-list-name1">
Bank
</view>
<view class="add-card-list1-ipt">
<input class="popup-input-field" name="bank_name" type="text" v-model="address.bank_name"
placeholder="Please fill in your bank" />
</view>
</view>
<view class="add-card-list">
<view class="add-card-list-name1">
Account opening branch
</view>
<view class="add-card-list1-ipt">
<input class="popup-input-field" name="bank_account" type="number"
v-model="address.bank_account" placeholder="Please fill in the account opening branch" />
</view>
</view>
<view class="add-card-list">
<view class="add-card-list-name1">
\t\t\t\t\t\tBank card number
</view>
<view class="add-card-list1-ipt">
<input class="popup-input-field" name="bank_card" type="number" v-model="address.bank_card"
placeholder="Please fill in the correct bank card number" />
</view>
</view>
</view>
<view class="bankCardSub">
<button form-type="submit">Submit bank card information</button>
</view>
</form>
<!-- Pop-up window address to pass parameters -->
<!-- <mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province" :city="city" :area="area" :pickerValueDefault="cityPickerValueDefault" @onConfirm=" onConfirm"></mpvue-city-picker> -->
</view>
</template>
<script>
export default {<!-- -->
data() {<!-- -->
return {<!-- -->
address: {<!-- -->
bank_user_name: '',
bank_name: '',
bank_account: '',
bank_card: '',
bank_id: ''
},
}
},
onLoad(onptions) {<!-- -->
// console.log(onptions.bank_user_name, 'Accept bank_user_name');
// console.log(onptions.bank_name, 'Accept bank_name');
// console.log(onptions.bank_account, 'Accept bank_account');
// console.log(onptions.bank_card, 'Accept bank_card');
this.address.bank_user_name = onptions.bank_user_name;
this.address.bank_name = onptions.bank_name;
this.address.bank_account = onptions.bank_account;
this.address.bank_card = onptions.bank_card;
this.bank_id = onptions.bank_id;
},
methods: {<!-- -->
formSubmit(e) {<!-- -->
let self = this;
var formdata = e.detail.value;
// formdata.province_id = self.province_id; // Separate parameters for special forms
// console.log(e, 'formdata');
// The formdata in the verification is assigned to the formdata object, and then the parameters can be passed.
this.bank_id = onptions.bank_id;
\t\t\t\t
formdata.bank_id = self.bank_id; // This is the special parameter id passed from the previous page
if (formdata.bank_user_name == '') {<!-- -->
uni.showToast({<!-- -->
title: 'Please enter the name of the account holder',
duration: 1000,
icon: 'none'
});
return false;
}
if (formdata.bank_name == '') {<!-- -->
uni.showToast({<!-- -->
title: 'Please enter your bank',
duration: 1000,
icon: 'none'
});
return false;
}
if (formdata.bank_account == '') {<!-- -->
uni.showToast({<!-- -->
title: 'Please enter the branch where the account is opened',
duration: 1000,
icon: 'none'
});
return false;
}
if (formdata.bank_card == '') {<!-- -->
uni.showToast({<!-- -->
title: 'Please enter your bank card number',
duration: 1000,
icon: 'none'
});
return false;
}
// if (formdata.phone == '') {<!-- -->
// uni.showToast({<!-- -->
// title: 'Please enter your mobile phone number',
// duration: 1000,
// icon: 'none'
// });
// return false;
// }
// if (formdata.province_id == 0 || formdata.city_id == 0 || formdata.region_id) {<!-- -->
// if (formdata.detail == '') {<!-- -->
// uni.showToast({<!-- -->
// title: 'Please select the complete province and city',
// duration: 1000,
// icon: 'none'
// });
// return false;
// }
// }
self._post('user.user/editBankData', formdata, function(res) {<!-- -->
// self.showSuccess(res.msg, function() {<!-- -->
// console.log(self.delta);
// #ifdef H5
// uni.navigateBack({<!-- -->
// delta: parseInt(self.delta)
// });
//#endif
// #ifndef H5
// uni.navigateBack({<!-- -->
// delta: 1
// });
//#endif
// });
// console.log(res, 'Added successfully');
// Jump to add successfully
if (res.msg == 'Added successfully') {<!-- -->
uni.navigateTo({<!-- -->
url: '/pages/user/my-bank-card/my-successfully-edit-bank-card/my-successfully-edit-bank-card'
})
} else {<!-- -->
uni.showToast({<!-- -->
title: 'Add failed',
duration: 1000,
icon: 'none'
});
}
});
},
/*Clear data*/
formReset: function(e) {<!-- -->
console.log('Clear data');
},
}
}
</script>
<style scoped>
page {<!-- -->
background: #F8F9FA;
}
.my-add-bank-card {<!-- -->
display: flex;
flex-direction: column;
}
.my-add-bank-card-box {<!-- -->
width: 686rpx;
background: #FFFFFF;
border-radius: 16rpx 16rpx 16rpx 16rpx;
opacity: 1;
margin: 20rpx 32rpx 80rpx 32rpx;
padding: 24rpx 30rpx 0rpx 30rpx;
box-sizing: border-box;
}
.add-card-tit {<!-- -->
font-size: 36rpx;
font-family: Source Han Sans-Medium, Source Han Sans;
font-weight: 500;
color: #333333;
line-height: 50rpx;
font-weight: bold;
}
.add-card-list1 {<!-- -->
padding-top: 12rpx;
padding-bottom: 30rpx;
box-sizing: border-box;
display: flex;
align-items: center;
}
.add-card-list-name1 {<!-- -->
font-size: 32rpx;
font-family: Source Han Sans-Regular, Source Han Sans;
font-weight: 400;
color: #3D3D3D;
line-height: 52rpx;
}
.add-card-list1-ipt {<!-- -->
margin-left: 24rpx;
}
.add-card-list {<!-- -->
padding-bottom: 30rpx;
box-sizing: border-box;
display: flex;
align-items: center;
}
.bankCardSub {<!-- -->
width: 554rpx;
height: 84rpx;
background: #891F50;
border-radius: 137rpx 137rpx 137rpx 137rpx;
opacity: 1;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
font-family: Source Han Sans-Regular, Source Han Sans;
font-weight: 400;
color: #FFFFFF;
line-height: 36rpx;
}
.bankCardSub button {<!-- -->
width: 554rpx;
height: 84rpx;
background: #891F50;
border-radius: 137rpx 137rpx 137rpx 137rpx;
opacity: 1;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
font-family: Source Han Sans-Regular, Source Han Sans;
font-weight: 400;
color: #FFFFFF;
line-height: 36rpx;
}
</style>
Finally
If you think the article is good, remember to give it a thumbs up, follow it, and add it to your favorites. Please correct me if there are any mistakes. If you need to reprint it, please indicate the source. Thank you! ! !