bjhedasx/webcode/uni-app/pages/member/expertSettle.vue

<template>
	<view class="page" v-if="showPage">
		<view class="pageMain">
			<view class="padding-top-10 flex align-center border-bottom-ed">
				<view class="text-30 text-bold">姓名</view>
				<view class="flex-one margin-left-30">
					<input placeholder="请填写" placeholder-class="text-aa" v-model="userNmae" maxlength="8"
						class="width-100p text-right text-30 line-height-100" />
				</view>
			</view>
			<view class="padding-top-40 ">
				<view class="text-30 text-bold margin-bottom-25">
					一句话简介
				</view>
				<view class="areaBox">
					<textarea placeholder="请输入您擅长的专业方向、建筑类型、主要成就" placeholder-class="text-aa"
						class="text-26 line-40 introBox" maxlength="200" v-model="brief" /></textarea>
				</view>
			</view>
			<view class="padding-top-40  ">
				<view class="text-30 text-bold margin-bottom-20">
					专家介绍
				</view>
				<view class="areaBox">
					<textarea placeholder="请输入学历、就职单位、工作年限等描述" placeholder-class="text-aa"
						class="text-26 line-40 introBox" v-model="intro" maxlength="500"></textarea>
				</view>
			</view>
			<view class="margin-top-10 border-bottom-ed flex align-center">
				<view class="text-30 text-bold">
					分类
				</view>
				<view class="flex-one margin-let-30">
					<picker :range="cates" range-key="name" :value="cateIndex" @change="changeCate" class="width-100p">
						<view class="flex line-height-100 align-center justify-end">
							<view class="text-30" :class="cateIndex == null ? 'text-aa' : ''">
								{{cateIndex == null ? '请选择分类' : cates[cateIndex].name}}
							</view>
							<view class="tyIcon-huaban text-aa text-24 margin-left-5"></view>
						</view>
					</picker>
				</view>
			</view>
			<view class="padding-top-40 ">
				<view class="line-40 margin-bottom-15">
					<text class="text-30 text-33 text-bold">身份证照片</text>
					<text class="text-24 text-aa">（正面）</text>
				</view>
				<view class="margin-bottom-25">
					<ty-image-images-upload :count="1" :video-count="0" @imageChange="idCard1Change"
						:image_list="idCard1"></ty-image-images-upload>
				</view>
				<view class="line-40 margin-bottom-15">
					<text class="text-30 text-33 text-bold">身份证照片</text>
					<text class="text-24 text-aa">（反面）</text>
				</view>
				<view class="margin-bottom-25">
					<ty-image-images-upload :count="1" :video-count="0" @imageChange="idCard2Change"
						:image_list="idCard2"></ty-image-images-upload>
				</view>
				<view class="line-40 margin-bottom-15">
					<text class="text-30 text-33 text-bold">资质证书</text>
					<text class="text-24 text-aa">（最多5个）</text>
				</view>
				<view class="margin-bottom-25">
					<ty-image-images-upload :count="5" :video-count="0" @imageChange="qualityImgsChange"
						:image_list="qualityImgs"></ty-image-images-upload>
				</view>
				<view class="line-40 margin-bottom-25">
					<text class="text-30 text-33 text-bold">主要业绩</text>
				</view>
				<view class="width-100p areaBox">
					<textarea placeholder="请输入" placeholder-class="text-aa" class="text-26 line-40 introBox"
						v-model="achievement" maxlength="500" /></textarea>
				</view>
			</view>
			<view class="margin-top-10 border-bottom-ed flex align-center">
				<view class="text-30 text-bold">在线咨询收费金额（元）</view>
				<view class="flex-one margin-left-30">
					<input class="width-100p text-right line-height-100 text-30" type="digit" placeholder="请输入"
						placeholder-class="text-aa" v-model="price" />
				</view>
			</view>
			<view class="margin-top-40">
				<view class="flex align-center text-77 margin-bottom-10">
					<view class="icon-icon-tishi iconfont text-28 margin-right-5"></view>
					<view class="text-26 text-bold">入驻说明</view>
				</view>
				<view class="text-26 text-77 ">
					{{notice}}
				</view>
			</view>
			<view class="margin-top-130 flex align-center justify-center" @click="isAgree = !isAgree">
				<view class="tyIcon-xuanzhong1 text-2f9 text-30 margin-right-10" v-if="isAgree"></view>
				<view class="tyIcon-quan text-cc text-30 margin-right-10" v-else></view>
				<view class="text-24 text-98">我已阅读、理解并同意遵守</view>
				<view class="text-24 text-4b8" @click.stop="go('/pages/member/settleAgreement?type=1')">《入驻协议》</view>
			</view>
		</view>

		<view class="bottomBox">
			<view class="bg-2f9 line-height-100 radius-50 text-center text-fe text-32 text-bold" @click="tapSub">
				提交审核
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userNmae: '',
				brief: '', //简介
				intro: '', //专家介绍
				cates: [],
				cateIndex: null,
				idCard1: [], //身份证正面
				idCard2: [], //身份证反面
				qualityImgs: [], //资质证书
				achievement: '', //业绩
				price: '', //金额
				isAgree:false,
				notice:'',//入驻说明
				showPage:false,
			}
		},
		onLoad(options) {
			this.getPageData()
		},
		methods: {
			getPageData(){
				this.rq.getData('fire/api/Fire/getExpertJoinData').then(res=>{
					this.cates = res.data.category;
					this.notice = res.data.join_explain;
					if(res.data.expert_data){
						this.userNmae = res.data.expert_data.name;
						this.brief = res.data.expert_data.brief;
						this.intro = res.data.expert_data.introduce;
						this.cates.forEach((item,index)=>{
							if(item.id == res.data.expert_data.category_id){
								this.cateIndex = index
							}
						})
						this.idCard1.push(res.data.expert_data.id_front_img);
						this.idCard2.push(res.data.expert_data.id_back_img);
						this.qualityImgs = res.data.expert_data.certificate_img;
						this.achievement = res.data.expert_data.achievement;
						this.price = res.data.expert_data.price;
					}
					this.showPage = true;
				})
			},
			changeCate(e) {
				this.cateIndex = e.detail.value;
			},
			idCard1Change(e) {
				this.idCard1 = e.image_list;
			},
			idCard2Change(e) {
				this.idCard2 = e.image_list;
			},
			qualityImgsChange(e) {
				this.qualityImgs = e.image_list;
			},
			tapSub(){
				if(this.userNmae == ''){
					this.cn.alert('请填写姓名');
					return;
				}
				if(this.brief == ''){
					this.cn.alert('请填写简介');
					return;
				}
				if(this.intro == ''){
					this.cn.alert('请填写介绍');
					return;
				}
				if(this.cateIndex == null){
					this.cn.alert('请选择分类');
					return;
				}
				if(this.idCard1.length == 0){
					this.cn.alert('请上传身份证正面');
					return;
				}
				if(this.idCard2.length == 0){
					this.cn.alert('请上传身份证反面');
					return;
				}
				if(this.price == ''){
					this.cn.alert('请填写收费金额');
					return;
				}
				if(this.price <= 0){
					this.cn.alert('收费金额应大于0');
					return;
				}
				var regPrice = /^([0-9]|[1-9]\d+)(\.\d{1,2})?$/;
				if(!regPrice.test(this.price)){
					this.cn.alert('收费金额格式不正确');
					return;
				}
				if(!this.isAgree){
					this.cn.alert('请阅读、理解并同意遵守《入驻协议》');
					return;
				}
				this.rq.getData('fire/api/Fire/submitExpertJoin',{
					name :this.userNmae,
					brief : this.brief,
					introduce :this.intro,
					category_id : this.cates[this.cateIndex].id,
					id_front_img : this.idCard1.join(','),
					id_back_img : this.idCard2.join(','),
					price : this.price,
					certificate_img : this.qualityImgs,
					achievement: this.achievement
				}).then(res=>{
					if(res.code == 0){
						this.cn.alert('提交成功，请等待平台审核').then(()=>{
							uni.redirectTo({
								url:'/pages/expertCenter/index'
							})
						})
						
					}
				})
			}
		}
	}
</script>

<style scoped>
	.pageMain {
		width: 100vw;
		min-height: 100vh;
		background: #fff;
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
	}

	.introBox {
		width: 100%;
		height: 100%;
	}
	.areaBox{
		width: 100%;
		padding: 20rpx 25rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		border: 1rpx solid #DDDDDD;
		height: 200rpx;
	}

	.bottomBox {
		width: 100vw;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 10rpx 30rpx calc(10rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}
</style>