bjhedasx/webcode/uni-app/pages/expertCenter/set.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" :disabled="status == 1" />
				</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" :disabled="status == 1"
						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" :disabled="status == 1"
						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" v-if="status == 2 || status == 3">
					<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 class="flex-one line-height-100 flex margin-let-30 align-center justify-end" v-if="status == 1">
					<view class="text-30">
						{{cates[cateIndex].name}}
					</view>
					<view class="tyIcon-huaban text-aa text-24 margin-left-5"></view>
				</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">（最多5个）</text>
				</view>
				<view class="margin-bottom-25">
					<ty-image-images-upload :count="5" :video-count="0" @imageChange="qualityImgsChange"
						:image_list="qualityImgs" :disabled="status == 1"></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" :disabled="status == 1" /></textarea>
				</view>
			</view>
			<view class="margin-top-40 border-bottom-ed padding-bottom-20">
				<view class="flex align-center margin-bottom-15">
					<view class="text-30 text-bold">在线咨询收费金额（元）</view>
					<view class="flex-one margin-left-30">
						<input class="width-100p text-right line-height-40 text-30" type="digit" placeholder="请输入"
							placeholder-class="text-aa" v-model="price" :disabled="status == 1" />
					</view>
				</view>
				<view class="text-24 line-30 text-aa">
					<view>用户通过文字、图片、视频向您提问。</view>
					<view>您需要在24小时内进行解答</view>
				</view>
			</view>
			<view class="noticeBox1 margin-top-40" v-if="status == 1">
				<text class="icon-icon-tishi iconfont text-26"></text>
				<text class="text-26 margin-left-5">审核期间，用户不能下单咨询您，请了解。</text>
			</view>
			<block v-if="status == 3">
				<view class="margin-top-30 text-28 text-ff85 text-bold">
					审核意见
				</view>
				<view class="padding-20 bg-f5 margin-top-15 text-28 text-33 line-40">
					{{refuseReason}}
				</view>
			</block>
			

			<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 ">
					{{join_explain}}
				</view>
			</view>

		</view>

		<cover-view class="bottomBox">
			<cover-view class="bg-2f9 line-height-100 radius-50 text-center text-fe text-32 text-bold"
				v-if="status == 2 || status == 3" @click="tapSub">
				重新提交审核
			</cover-view>
			<cover-view class="bg-e5 line-height-100 radius-50 text-center text-33 text-32 text-bold" v-if="status == 1">
				审核中
			</cover-view>
		</cover-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 2, //1-审核中 2-已通过 3-已拒绝
				userNmae: '',
				brief: '', //简介
				intro: '', //专家介绍
				cates: [],
				cateIndex: null,
				qualityImgs: [], //资质证书
				achievement: '', //业绩
				price: '', //金额
				idCard1: [],
				idCard2: [],
				refuseReason: '', //审核意见
				join_explain: '', //入驻说明
				showPage:false,
			}
		},
		onLoad(options) {
			this.getPageData()
		},
		methods: {
			getPageData() {
				this.rq.getData('fire/api/Fire/getExpertJoinData').then(res => {
					this.cates = res.data.category;
					this.join_explain = 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.refuseReason = res.data.expert_data.examine_idea;
						this.status = res.data.expert_data.status;
					}
					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;
				}
				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.navigateBack({
								delta:1
							})
						})
						
					}
				})
			
			}
		}
	}
</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;
	}

	.noticeBox1 {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background: #FFF5EE;
		border-radius: 10rpx;
		color: #FF8534;
		padding-left: 10rpx;
		box-sizing: border-box;
	}

	.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;
		z-index: 200;
	}
</style>