282 lines
7.3 KiB
Vue
282 lines
7.3 KiB
Vue
<template>
|
|
<view class="apply-live">
|
|
<view class="basic-info">
|
|
<view>
|
|
<label for="name">姓名:</label>
|
|
<input type="text" id="name" @input="names" placeholder="请输入姓名" />
|
|
</view>
|
|
<view>
|
|
<label for="phone">手机号:</label>
|
|
<input type="number" id="phone" @input="phones" maxlength="11" placeholder="请输入手机号" />
|
|
</view>
|
|
<view>
|
|
<label for="idCard">身份证号:</label>
|
|
<input type="text" id="idCard" placeholder="请输入身份证号" @input="setIdCard" />
|
|
</view>
|
|
<view @click="show=true">
|
|
<label for="address">居住地址:</label>
|
|
<input type="text" id="address" v-model="address" disabled placeholder="请选择居住地址" />
|
|
<u-icon name="arrow-down" color="#343434" size="26" class="arrow-icon"></u-icon>
|
|
</view>
|
|
<view>
|
|
<label for="details">详细地址:</label>
|
|
<input type="text" id="details" @input="detailss" placeholder="请填写详细地址" />
|
|
</view>
|
|
</view>
|
|
<view class="other-info">
|
|
<view class="item-box specialty">
|
|
<view class="title">特长领域：<text class="brief">(多选）</text></view>
|
|
<view class="check-box-container">
|
|
<u-checkbox-group @change="specialtyGroupChange" active-color="#fff">
|
|
<u-checkbox
|
|
v-model="item.checked"
|
|
v-for="(item, index) in industryList" :key="index"
|
|
:name="item.name"
|
|
>{{item.name}}</u-checkbox>
|
|
</u-checkbox-group>
|
|
</view>
|
|
</view>
|
|
<view class="item-box hobby">
|
|
<view class="title">兴趣爱好：<text class="brief">(多选）</text></view>
|
|
<view class="check-box-container">
|
|
<u-checkbox-group @change="hobbyGroupChange" active-color="#fff">
|
|
<u-checkbox
|
|
v-model="item.checked"
|
|
v-for="(item, index) in hobbyList" :key="index"
|
|
:name="item.name"
|
|
>{{item.name}}</u-checkbox>
|
|
</u-checkbox-group>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="submit-btn" @click="applyExpert">提交申请</view>
|
|
<u-select v-model="show"
|
|
mode="mutil-column-auto"
|
|
:list="areaList"
|
|
value-name="area_id"
|
|
label-name="area_name"
|
|
child-name="_child"
|
|
@confirm="setArea">
|
|
</u-select>
|
|
<u-toast ref="uToast" />
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
areaList: [],
|
|
name: '',
|
|
phone: '',
|
|
idCard: '',
|
|
address: '',
|
|
details: '',
|
|
industryList: [],
|
|
hobbyList: [],
|
|
checkedIndustryList: [],
|
|
checkedHobbyList: [],
|
|
isSubmit: true, // 防止多次提交
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getAreaData();
|
|
this.getIndustryList();
|
|
this.getHobbyList();
|
|
},
|
|
methods: {
|
|
names(a){
|
|
console.log(a.detail)
|
|
this.name = a.detail.value
|
|
},
|
|
phones(a){
|
|
this.phone = a.detail.value
|
|
},
|
|
setIdCard(v) {
|
|
this.idCard = v.detail.value;
|
|
},
|
|
detailss(a){
|
|
this.details = a.detail.value
|
|
},
|
|
|
|
getAreaData() {
|
|
this.$u.api.getArea().then((res)=>{
|
|
if (res.errCode == 0) {
|
|
this.areaList = res.data;
|
|
}
|
|
})
|
|
},
|
|
getIndustryList() {
|
|
this.$u.api.getIndustryList().then(res => {
|
|
res.data.forEach(element => {
|
|
this.industryList.push({
|
|
checked: false,
|
|
name: element,
|
|
});
|
|
});
|
|
})
|
|
},
|
|
getHobbyList() {
|
|
this.$u.api.getHobbyList().then(res => {
|
|
res.data.forEach(element => {
|
|
this.hobbyList.push({
|
|
checked: false,
|
|
name: element,
|
|
});
|
|
});
|
|
})
|
|
},
|
|
specialtyGroupChange(e) {
|
|
// console.log(e);
|
|
this.checkedIndustryList = e;
|
|
},
|
|
hobbyGroupChange(e) {
|
|
// console.log(e);
|
|
this.checkedHobbyList = e;
|
|
},
|
|
// 验证
|
|
validateData() {
|
|
if(this.$u.test.isEmpty(this.name)) {
|
|
this.$u.toast('姓名不能为空');
|
|
return false;
|
|
}
|
|
if(this.$u.test.isEmpty(this.phone)) {
|
|
this.$u.toast('手机号不能为空');
|
|
return false;
|
|
}
|
|
if(!this.$u.test.mobile(this.phone)) {
|
|
this.$u.toast('手机号错误');
|
|
return false;
|
|
}
|
|
if(this.$u.test.isEmpty(this.idCard)) {
|
|
this.$u.toast('身份证号不可为空');
|
|
return false;
|
|
}
|
|
// if(!this.$u.test.idCard(this.idCard)) {
|
|
// this.$u.toast('请正确填写身份证号');
|
|
// return false;
|
|
// }
|
|
// if(this.$u.test.isEmpty(this.address)) {
|
|
// this.$u.toast('地址不能为空');
|
|
// return false;
|
|
// }
|
|
// if(this.$u.test.isEmpty(this.details)) {
|
|
// this.$u.toast('详细地址不能为空');
|
|
// return false;
|
|
// }
|
|
if(!this.checkedIndustryList.length) {
|
|
this.$u.toast('行业领域不能为空');
|
|
return false;
|
|
}
|
|
if(!this.checkedHobbyList.length) {
|
|
this.$u.toast('兴趣爱好不能为空');
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
applyExpert() {
|
|
if(!this.isSubmit) return false;
|
|
if(!this.validateData()) return false;
|
|
this.isSubmit = false;
|
|
this.$u.api.applyExpert({
|
|
name: this.name,
|
|
mobile: this.phone,
|
|
idcard: this.idCard,
|
|
address: this.address + this.details,
|
|
industry: this.checkedIndustryList,
|
|
hobby: this.checkedHobbyList,
|
|
}).then(res => {
|
|
if(res.errCode == 0) {
|
|
this.$refs.uToast.show({
|
|
title: res.message,
|
|
back: true,
|
|
})
|
|
} else {
|
|
this.isSubmit = true;
|
|
this.$u.toast(res.message);
|
|
}
|
|
})
|
|
},
|
|
setArea(area) {
|
|
// console.log(area);
|
|
this.area_id = area[0].value;
|
|
this.city_id = area[1].value;
|
|
let temp = '';
|
|
area.forEach(e => {
|
|
temp += e.label;
|
|
});
|
|
this.address = temp;
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.apply-live {
|
|
min-height: calc(100vh - var(--window-top));
|
|
background-color: #ECECEC;
|
|
padding-bottom: 60rpx;
|
|
.basic-info {
|
|
> view {
|
|
background-color: #FFFFFF;
|
|
padding: 34rpx 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 2rpx;
|
|
> label {
|
|
width: 150rpx;
|
|
margin-right: 40rpx;
|
|
font-size: 30rpx;
|
|
color: #343434;
|
|
}
|
|
> input {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
}
|
|
.arrow-icon {
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
.other-info {
|
|
margin-bottom: 80rpx;
|
|
.item-box {
|
|
background-color: #FFFFFF;
|
|
padding: 35rpx 30rpx;
|
|
margin-bottom: 1rpx;
|
|
.title {
|
|
font-size: 30rpx;
|
|
color: #343434;
|
|
margin-bottom: 30rpx;
|
|
.brief {
|
|
color: #9A9A9A;
|
|
}
|
|
}
|
|
.check-box-container {
|
|
/deep/ .u-checkbox {
|
|
margin-bottom: 24rpx;
|
|
.u-checkbox__icon-wrap {
|
|
border-color: #C0C0C0 !important;
|
|
}
|
|
.u-checkbox__icon-wrap--checked {
|
|
.u-icon__icon {
|
|
color: #FF780F !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.submit-btn {
|
|
width: 690rpx;
|
|
height: 98rpx;
|
|
background: #FF7810;
|
|
border-radius: 49rpx;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style> |