dingdong-master/pages/my/b-account-bind.vue

130 lines
3.6 KiB
Vue

<template>
<view v-if="curUserInfo && curUserInfo.status != -1">
<!-- 顶部操作条 -->
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
<block slot="backText">返回</block>
<!-- <block slot="content"></block> -->
</cu-custom>
<view class="margin-lr-sm margin-tb-lg shadow-warp">
<view class="bg-gray flex justify-start align-center text-xl padding-lr padding-top-xs">
<view class="padding-lr padding-tb-sm" :class="curAccountType === '1' ? 'curTab' : ''" data-type="1" @click="changAccountType">银行</view>
</view>
<view v-if="curAccountType === '1'" class="bg-white padding text-lg">
<view>
<view class="margin-bottom-sm">
姓名<text class="margin-left-xs text-red">*</text>
</view>
<input type="text" placeholder="请输入开户人姓名" placeholder-style="color:#989898" v-model="formData.name">
</view>
<view class="margin-top">
<view class="margin-bottom-sm">
身份证号码<text class="margin-left-xs text-red">*</text>
</view>
<input type="number" placeholder="请输入身份证号码" placeholder-style="color:#989898" v-model="formData.certId">
</view>
<view class="margin-top">
<view class="margin-bottom-sm">
手机号<text class="margin-left-xs text-red">*</text>
</view>
<input type="number" placeholder="请输入手机号" placeholder-style="color:#989898" v-model="formData.phone">
</view>
<view class="margin-top">
<view class="margin-bottom-sm">
银行卡号<text class="margin-left-xs text-red">*</text>
</view>
<input type="number" placeholder="请输入银行卡号" placeholder-style="color:#989898" v-model="formData.bankNum">
</view>
</view>
</view>
<!-- 操作按钮 -->
<view class="margin-lr">
<button class="cu-btn lg bg-main-color long-btn shadow-blur" @click="submit">提交</button>
</view>
<view class="text-red padding">
工盟互联小程序承诺此账户只用于接收家政服务收益
</view>
</view>
</template>
<script>
import myUniCombox from '@/components/uni-combox/my-uni-combox.vue';
export default {
components: {
myUniCombox
},
data() {
return {
curAccountType: '1',
provinceList: [],
cityList: [],
formData: {
provinceObj: {},
cityObj: {}
},
curUserInfo: {}
}
},
onLoad(options) {
this.loadData();
},
methods: {
async loadData() {
// let res = await this.$request.areaListByStep();
// this.provinceList = res.data;
this.curUserInfo = this.$request.getCurUserInfo();
},
async chooseRegion(e) {
let res = await this.$request.areaListByStep({
parentCode: e.areaCode
});
this.cityList = res.data;
this.formData.cityObj = {}
},
changAccountType(e) {
this.curAccountType = e.currentTarget.dataset.type;
},
validData() {
if (!this.formData.name || !this.formData.certId || !this.formData.phone || !this.formData.bankNum) {
return false;
}
return true;
},
async submit() {
if (this.curAccountType === '1') {
if (!this.validData()) {
uni.showToast({
icon: 'none',
title: '请完成必填项的填写'
})
return;
}
let params = {
...this.formData,
workerId: this.curUserInfo.workerId
}
let res = await this.$request.bindBankCard(params);
if (res && res.code === 0) {
uni.navigateBack({
delta: -1
})
} else if (res && res.msg) {
uni.showToast({
icon: 'none',
title: res.msg
})
}
}
}
},
}
</script>
<style scoped>
.curTab {
background-color: #ffffff;
color: #0081ff;
border-radius: 15rpx 15rpx 0 0;
}
</style>