mz/pages/dd/opendd.vue

<template>
	<view class="content">
		<view class="jg"></view>
		<view class="tab">
			<view class="tab-item flex">
				<view class="item-name">机构名称</view>
				<input type="text" placeholder="请输入机构全称" class="item-val" v-model="organ_name">
			</view>
			<view class="tab-item flex" @tap="showPicker('region')">
				<text class="item-name">所在地区</text>
				<input class="input item-val" @focus='outFocus' v-model="addr" placeholder="请选择省市区"></input>
			</view>
			<w-picker mode="region" :value="defaultRegion" default-type="value" @confirm="onConfirm($event,'region')"
				@cancel="handleCancel" ref="region"></w-picker>
			<view class="tab-item flex">
				<view class="item-name">通知范围</view>
				<input type="text" placeholder="请选择通知范围" class="item-val" v-model="fbfw" @click="handleTap2('picker5')"
					disabled>
				<lb-picker ref="picker5" mode="selector" :list="fbfwList" @change="handleChange5" @touchmove.prevent
					@confirm="handleConfirm5" @cancel="handleCancel">
				</lb-picker>
			</view>
			<!-- <view class="tab-item flex">
				<view class="item-name">所在地区</view>
				<pickerAddress class="item-val" @change="onCityClick">{{addressDetail || '请选择地址'}}</pickerAddress>
			</view> -->
			<view class="tab-item flex">
				<view class="item-name">服务日期</view>

				<picker mode="date"  @change="bindDateChange">
					<input type="text" placeholder="请输入服务日期" class="item-val" v-model="fwData">
				</picker>
			</view>

			<view class="tab-item flex">
				<view class="item-name">服务时间</view>
				<!-- <input type="text" placeholder="请输入服务时间" class="item-val" v-model="time_area"> -->
				<picker mode="time" @change="bindfwtimeChange">
					<input type="text" placeholder="请输入服务时间" class="item-val" v-model="fwtime">
				</picker>
			</view>
			<view class="tab-item flex">
				<view class="item-name">职称(以上)</view>
				<input type="text" placeholder="请选择职称" class="item-val" v-model="doctor_level"
					@click="handleTap2('picker3')" disabled>
				<lb-picker ref="picker3" mode="selector" :list="levelList" @change="handleChange2" @touchmove.prevent
					@confirm="handleConfirm2" @cancel="handleCancel">
				</lb-picker>
			</view>
			<view class="tab-item flex">
				<view class="item-name">专业</view>
				<input type="text" placeholder="请选择专业" class="item-val" v-model="zyname" @click="handleTap2('picker4')"
					disabled>
				<lb-picker ref="picker4" mode="selector" :list="zyList" @change="handleChange3" @touchmove.prevent
					@confirm="handleConfirm3" @cancel="handleCancel">
				</lb-picker>
			</view>
			<view class="tab-item flex">
				<view class="item-name">劳务费用</view>
				<input type="number" placeholder="请输入劳务费用" class="item-val" v-model="brokerage">
			</view>
			<view class="tab-item flex">
				<view class="item-name">设备说明标签</view>
				<input type="text" placeholder="标签请以逗号间隔" class="item-val" v-model="tags">
			</view>
			<view class="tab-item flex">
				<view class="item-name">要求</view>
				<textarea type="text" placeholder="请输入要求" class="item-val" v-model="content">></textarea>
			</view>
		</view>
		<view class="sub" @click="sub">
			确认发布
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import wPicker from "@/components/w-picker/w-picker.vue"
	import pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
	import zhilinPicker from "@/components/zhilin-picker/zhilin-picker.vue"
	import LbPicker from '@/components/lb-picker/index.vue'
	import {
		getDocterTypeList
	} from '@/api/doctor.js'
	import {
		ddsub
	} from '@/api/dd.js'
	export default {
		components: {
			pickerAddress,
			zhilinPicker,
			LbPicker,
			wPicker
		},
		data() {
			return {
				fwtime: '',
				fwData: '',
				defaultRegion: [],
				addr: '',
				fbfwList: [{
						id: 1,
						name: '全国'
					}, {
						id: 2,
						name: '省级'
					}, {
						id: 3,
						name: '市级'
					},
					{
						id: 4,
						name: '区级'
					}
				],
				fbfw: '',
				fbfwid: '',
				zyname: '',
				zyid: '',
				level_id: 0,
				load: false,
				organ_name: '',
				addressDetail: '',
				province: '',
				province_id: '',
				city: '',
				city_id: '',
				district: '',
				district_id: '',
				time_area: '',
				doctor_level: '', //需求的医生职称
				tags: '',
				brokerage: '', //	报酬
				content: '',
				levelList: [{
					id: 1,
					name: '初级'
				}, {
					id: 2,
					name: '中级'
				}, {
					id: 3,
					name: '副高级'
				}, {
					id: 4,
					name: '正高级'
				}],
				zyList: [],
			}
		},
		onLoad() {
			this.load = false
			this.getDocterTypeList()
			this.organ_name = this.userInfo.ext_info.name
			this.province = this.userInfo.ext_info.province
			this.province_id = this.userInfo.ext_info.province_id
			this.city = this.userInfo.ext_info.city
			this.city_id = this.userInfo.ext_info.city_id
			this.district = this.userInfo.ext_info.district
			this.district_id = this.userInfo.ext_info.district_id
			this.addr = this.province + this.city + this.district
			
		},
		onShow() {
			console.log(this.userInfo,'userInfo')
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			bindDateChange(e) {
				console.log(e)
				this.fwData = e.detail.value
			},
			bindfwtimeChange(e) {
				console.log(e)
				this.fwtime = e.detail.value
			},
			outFocus(e) {
				console.log(event.target)
				event.target.blur()
			},
			//省市区选择确定
			onConfirm(res, type) {
				let obj = this;
				obj.result = res;
				obj.addr = res.result;
				if (res.name) {
					obj.province = res.name[0];
					obj.city = res.name[1];
					obj.district = res.name[2];
				} else {

					obj.province = '北京市';
					obj.city = '北京市';
					obj.district = '东城区';
				}
				obj.province_id = res.value[0];
				obj.city_id = res.value[1];
				obj.district_id = res.value[2];
				console.log(obj.province_id, obj.city_id, obj.district_id)
				// obj.hospital = '';//重置医院
			},
			//省市区弹窗
			showPicker(type) {
				this.$refs[type].show();
			},
			handleConfirm5(item) {
				let obj = this;
				obj.fbfwid = item.item.id
				obj.fbfw = item.item.name
				console.log(item)
			},
			handleChange5(item) {

			},
			getDocterTypeList() {
				getDocterTypeList().then(res => {
					console.log(res)
					this.zyList = res.data.data.map(item => {
						item.name = item.text
						return item
					})
					console.log(this.zyList, 'this.zyList')
				})
			},
			//职称选择
			handleTap2(name) {
				this.$refs[name].show()
			},
			handleChange3() {

			},
			handleConfirm3(item) {
				let obj = this;
				obj.zyid = item.item.id
				obj.zyname = item.item.name
				console.log(item)
			},
			//职称选择
			handleChange2(item) {},
			//职称选择
			handleConfirm2(item) {
				let obj = this;
				obj.doctor_level = item.item.name;
				obj.level_id = item.item.id;
				console.log(obj.doctor_level, obj.level_id)
			},
			// 选中城市切换
			onCityClick({
				data
			}) {
				console.log(data, 'data')
				// let address = this.addressData.address;
				// address.province = data[0];
				// address.city = data[1];
				// address.district = data[2];
				// this.addressDetail = data.join('');

				let obj = this
				// let address = this.addressData.address;
				obj.province = data[0];
				obj.city = data[1];
				obj.district = data[2];
				this.addressDetail = obj.province.name + ' ' + obj.city.name + ' ' + obj.district.name;
			},
			// 发布
			sub() {
				let obj = this
				// console.log('obj.province',obj.province)
				if (obj.load) {
					return
				}
				if (obj.organ_name == '') {
					return obj.$api.msg('请输入机构全称')
				}
				if (obj.fbfw == '') {
					return obj.$api.msg('请选择通知范围')
				}
				if (obj.province == '') {
					return obj.$api.msg('请选择地址')
				}
				if (obj.city == '') {
					return obj.$api.msg('请选择地址')
				}
				if (obj.district == '') {
					return obj.$api.msg('请选择地址')
				}
				if(obj.fwData == '') {
					return obj.$api.msg('请选择服务日期')
				}
				if(obj.fwtime == '') {
					return obj.$api.msg('请选择服务时间')
				}
				// if (obj.time_area == '') {
				// 	return obj.$api.msg('请输入服务时间')
				// }
				if (obj.doctor_level == '') {
					return obj.$api.msg('请输入职称')
				}
				if (obj.brokerage == '') {
					return obj.$api.msg('请输入劳务费用')
				}
				// if (obj.content == '') {
				// 	return obj.$api.msg('请输入要求')
				// }
				// if (obj.tags == '') {
				// 	return obj.$api.msg('请输入要求')
				// }
				obj.time_area = obj.fwData + ' ' + obj.fwtime
				let tags = obj.tags.replace(/，/g, ',')
				// obj.load = true
				console.log()
				ddsub({
					organ_name: obj.organ_name,
					province: obj.province,
					province_id: obj.province_id,
					city: obj.city,
					city_id: obj.city_id,
					district: obj.district,
					district_id: obj.district_id,
					time_area: obj.time_area,
					doctor_level: obj.level_id, //需求的医生职称
					tags: tags,
					brokerage: obj.brokerage, //	报酬
					content: obj.content,
					type: obj.zyid,
					rge: obj.fbfwid
				}).then(res => {
					// obj.load = false
					uni.showToast({
						title: '发布成功',
						duration: 2000
					});
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}).catch(err => {
					obj.load = false
				})
			}
		}
	}
</script>

<style lang="scss">
	.jg {
		height: 20rpx;
	}

	.tab {
		width: 750rpx;
		background-color: #fff;

		.tab-item {
			padding: 20rpx 30rpx;
			font-size: 30rpx;
			align-items: flex-start;

			.item-name {
				flex-shrink: 0;
				width: 220rpx;
				color: #333333;
			}

			.item-val {
				display: inline-block;
				flex-grow: 1;
				text-align: right;
			}
		}
	}

	.sub {
		text-align: center;
		width: 560rpx;
		line-height: 80rpx;
		background: #6786fb;
		border-radius: 40rpx;
		color: #fff;
		font-size: 30rpx;
		font-weight: 500;
		margin: 80rpx auto 0;
	}
</style>