yizhizan-h5/my/publish/serveType.vue

<template>
	<view style="padding-bottom:150upx ;">
		<view class="text-white padding bg margin" style="border-radius: 24upx;">
			<view class="flex align-center margin-bottom-sm justify-between " @click="cityShow =true">
				<view class=" text-bold">项目位置</view>
				<view class="text-right flex align-center ">
					<view>{{form.address?form.address:'请选择省市区'}}</view>
					<view class="margin-left-sm">
						<image src="../../static/images/my/right_icon.png" style="width: 12upx;height: 21upx;"></image>
					</view>
				</view>
			</view>
			<view class="padding-bottom text-right"
				style="border-bottom: 1rpx solid #F2F2F2;color: red;font-size: 24rpx;">
				* 如需选择其他省请联系客服
			</view>
			<view class="flex align-center margin-bottom-sm justify-between" style="border-bottom: 1rpx solid #F2F2F2;">
				<view class=" text-bold">甲方性质</view>
				<view class="text-right flex align-center margin-tb-xs">
					<u-input v-model="form.projectName" :disabled="true" @click="getShuXingList()" placeholder="请选择甲方性质"
						placeholder-style="color:#999999;" :clearable="false" />
				</view>
			</view>
			
			<view class="flex align-center margin-bottom-sm justify-between" style="border-bottom: 1rpx solid #F2F2F2;">
				<view class=" text-bold">项目类型</view>
				<view class="text-right flex align-center margin-tb-xs">
					<u-input v-model="form.projectType" :disabled="true" @click="openType(1)" placeholder="请选择项目类型"
						placeholder-style="color:#999999;" :clearable="false" />
				</view>
			</view>
			<view class="flex align-center margin-bottom-sm  justify-between"
				style="border-bottom: 1rpx solid #F2F2F2;">
				<view class=" text-bold">项目工期（月）</view>
				<view class="text-right flex align-center margin-bottom-sm">
					<u-input v-model="form.projectDayNum" type="number" placeholder="请填写项目工期(月)"
						placeholder-style="color:#999999;" :clearable="false" />
				</view>
			</view>
			<view class="flex align-center justify-between" style="border-bottom: 1rpx solid #F2F2F2;">
				<view class=" text-bold">电子邮箱</view>
				<view class="text-right margin-bottom-sm">
					<u-input v-model="form.email" placeholder="请输入电子邮箱" placeholder-style="color:#999999;"
						:clearable="false" />
				</view>
			</view>
			<view class="flex align-center margin-bottom-sm  justify-between">
				<view class=" text-bold">进场时间</view>
				<view class="text-right flex align-center margin-bottom-sm">
					<u-input v-model="form.approachTime" :disabled="true" @click="timeShow = true" type="number" placeholder="请选择进场时间"
						placeholder-style="color:#999999;" :clearable="false" />
				</view>
			</view>
		</view>

		<view class="padding margin bg" style="border-radius: 24upx;">
			<view class="padding-bottom-sm margin-top-sm" style="border-bottom: 1rpx solid #F2F2F2;">
				<view class="flex align-center justify-between">
					<view class=" text-bold">项目福利</view>
					<view @click="getFlList()">
						<image src="../static/add.png" style="width: 52upx;height: 52upx;"></image>
					</view>
				</view>
				<view class="margin-top-sm text-sm" style="color: #999999;" v-if="projectAward.length==0">添加项目类型</view>
				<view class="flex flex-wrap" v-else>
					<view v-for="(item,index) in projectAward" :key="index" class="label margin-right-sm"
						style="margin-bottom: 10rpx;position: relative;">
						{{item}}
						<u-icon name="close-circle-fill" @click="removeLable(projectAward,index)" color="red" size="28"
							style="position: absolute;top: -5rpx;right: -5rpx;"></u-icon>
					</view>
				</view>
			</view>
			<!-- postDetailsList -->
			<view class="padding-bottom-sm margin-top-sm" style="border-bottom: 1rpx solid #F2F2F2;">
				<view class="flex align-center justify-between">
					<view class=" text-bold">岗位添加</view>
					<view @click="addGw">
						<image src="../static/add.png" style="width: 52upx;height: 52upx;"></image>
					</view>
				</view>
				<view class="margin-top-sm text-sm" style="color: #999999;">添加岗位会根据你的岗位需求为你推荐</view>
			</view>
			<view class="flex align-center margin-bottom-sm justify-between" style="border-bottom: 1rpx solid #F2F2F2;">
				<view class=" text-bold">联系人</view>
				<view class="text-right flex align-center margin-tb-xs">
					<u-input v-model="form.projectPrincipalName" placeholder="请输入联系人"
						placeholder-style="color:#999999;" :clearable="false" />
				</view>
			</view>
			<view class="flex align-center  justify-between" >
				<view class=" text-bold">电话</view>
				<view class="text-right flex align-center margin-tb-xs">
					<u-input v-model="form.projectPrincipalPhone" type="number" maxlength="11" placeholder="请输入电话"
						placeholder-style="color:#999999;" :clearable="false" />
				</view>
			</view>
		</view>

		<view class="text-white padding bg margin" style="border-radius: 24upx;" v-if="form.postDetailsList"
			v-for="(item,index) in form.postDetailsList" :key="index">
			<view class="flex align-center justify-between">
				<view class=" text-bold">{{item.postName}}-{{item.rulePostName}}</view>
				<view class="flex align-center">
					<view @click="bianjiList(item,index)">
						<image src="../static/bianji.png" style="width: 35upx;height: 34upx;"></image>
					</view>
					<view class="margin-left" @click="deteList(index)">
						<image src="../static/dete.png" style="width: 38upx;height: 38upx;"></image>
					</view>
				</view>
			</view>
			<view class="flex  margin-top-xs flex-wrap" style="color: #333333;">
				<view class="flex align-center">
					<view>{{item.postAge}}</view>
					<view class="margin-lr-sm" style="width: 1rpx;height: 25rpx;background: #CCCCCC;">
					</view>
				</view>
				<view class="flex align-center">
					<view>{{item.postSex}}</view>
					<view class="margin-lr-sm" style="width: 1rpx;height: 25rpx;background: #CCCCCC;">
					</view>
				</view>
				<view class="flex align-center">
					<view>{{item.postPeopleNum}}人</view>
				</view>
			</view>
			<view class="flex align-center justify-between margin-top-sm">
				<view class="text-df " style="color: #6696FF;">
					<text class="text-bold" style="font-size: 32upx;">{{item.money}}<text
							style="font-size:20rpx;margin-left: 5rpx;">积分</text></text>
				</view>
			</view>
		</view>


		<view class="text-white padding bg margin" style="border-radius: 24upx;">
			<view class="text-lg text-bold">收费明细</view>
			<view class="text-sm margin-top" v-for="(item,index) in form.postDetailsList" style="color: #666666;">
				<view class="" style="display: flex;justify-content: space-between;color: #333333;">
					<span>{{item.postName}}-{{item.rulePostName}}</span>
					<span>x{{item.postPeopleNum}}</span>
				</view>
				<view class="margin-top flex justify-between">
					<span v-if="form.classify==2">单价:{{item.price}}积分</span>
					<span>合计:{{item.money}}积分</span>
				</view>
			</view>
		</view>
		<view class="text-white padding bg margin" style="border-radius: 24upx;">
			<view class="text-lg text-bold">收费说明</view>
			<view class="text-sm margin-top" style="color: #666666;" v-html="content"></view>
		</view>
		<!-- 省市区选择 -->
		<u-picker v-model="cityShow" mode="region" :params="params" @confirm="cityConfirm"></u-picker>

		<u-popup v-model="show" mode="center" border-radius="14" width="600rpx" :closeable="true"
			close-icon="close-circle" close-icon-size="44">
			<view class="padding-bottom" v-if="state==1">
				<view class="text-center text-lg text-bold margin-top">添加项目类型</view>
				<view class="margin-lr margin-top-xl padding-lr" style="background: #f5f5f5;">
					<u-input v-model="typeName" placeholder="请填写项目类型" inputAlign="text-align:left" />
				</view>

				<view class="btn" @click="save()">保存</view>
			</view>
			<view class="padding-bottom" v-if="state==2">
				<view class="text-center text-lg text-bold margin-top">添加项目福利</view>
				<view class="margin-lr margin-top-xl padding-lr" style="background: #f5f5f5;">
					<u-input v-model="typeName" placeholder="请填写项目福利" inputAlign="text-align:left" />
				</view>

				<view class="btn" @click="save()">保存</view>
			</view>
		</u-popup>
		<!-- 选择项目类型 -->
		<u-select v-model="projectTypeShow" :list="projectTypelist" @confirm="projectTypelistConfirm"></u-select>

		<view class="submit">
			<view class="padding-left" style="">合计：<text
					style="font-size: 44upx;color: #FF4A28;">{{totalprice?totalprice:'0'}}<text
						style="font-size:24rpx;margin-left: 5rpx;">积分</text></text></view>
			<view class="subbtn" @click="submit">确认发布</view>
		</view>
		<!-- 发布弹窗 -->
		<u-popup v-model="submitShow" mode="bottom" border-radius="24rpx">
			<view class="submitShow">
				<view class="submitShow-box">
					<view class="submitShow-box-title">
						<view class="submitShow-box-title-close" @click="submitShow = false">
							取消
						</view>
						<view class="submitShow-box-title-text">
							收费明细
						</view>
						<view class="">

						</view>
					</view>
					<view class="submitShow-box-item" v-for="(item,index) in form.postDetailsList">
						<view class="submitShow-box-item-l">
							{{item.postName}}-{{item.rulePostName}}<span
								style="color: #979997;font-size: 26rpx;margin-left: 10rpx;">x{{item.postPeopleNum}}</span>
						</view>
						<view class="submitShow-box-item-r">
							<span style="font-size: 32rpx;">{{item.money}}</span>积分
						</view>
					</view>
					<view class="submitShow-box-item">
						<view class="submitShow-box-item-l" style="color: #82A9FE;font-weight: bold;">
							总费用
						</view>
						<view class="submitShow-box-item-r" style="color: #2B6CF1;">
							<span style="font-size: 32rpx;">{{totalprice}}</span>积分
						</view>
					</view>
					<view class="submitShow-box-submit" @click="paysubmitSave()">
						确认支付
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 福利选择 -->
		<u-select v-model="flshow" :list="list" @confirm="projectFllistConfirm"></u-select>
		<!-- 属性选择 -->
		<u-select v-model="shuxingShow" :list="shuxingList" @confirm="shuxingConfirm"></u-select>
		<!-- 进场时间 -->
		<u-picker v-model="timeShow" mode="time" :params="paramsTime" @confirm="timeconfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				paramsTime: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				timeShow: false,
				shuxingShow: false,
				flshow: false,
				list: [],
				submitShow: false,
				params: {
					province: true,
					city: true,
					area: true
				},
				cityShow: false,
				form: {
					address: '', //省市区
					projectName: '', //项目名称
					projectType: '', //项目类型
					projectAward: '', //项目福利
					email: '', //电子邮箱
					projectDayNum: '', //项目工期
					classify: '', //分类  1.定制化  2.进准推送
					postDetailsList: [], //岗位列表
					approachTime:'',//进场时间
					projectPrincipalPhone:'',//电话
					projectPrincipalName:'',//负责人
				},
				projectAward: [], //项目福利
				show: false,
				state: '',
				typeName: '',
				totalprice: '',
				content: '',
				projectTypeShow: false, //项目类型
				projectTypelist: [],
				shuxingList: [],
			}
		},
		//离开页面清除岗位缓存
		onUnload() {
			uni.setStorageSync('postDetailsList', '')
		},
		onLoad(option) {
			// console.log(option)
			if (option.name) {
				uni.setNavigationBarTitle({
					title: option.name
				});
			}
			if (option.classify) {
				this.form.classify = option.classify
			}
			this.$Request.get('/app/common/type/262').then(res => {
				if (res.code == 0) {
					this.content = res.data.value.replace("img",
						'img style="width:100%;height:auto"');
				}
			});
		},
		onShow() {
			this.totalprice = 0
			this.form.postDetailsList = uni.getStorageSync('postDetailsList')
			console.log(this.form.postDetailsList)
			if (this.form.postDetailsList) {
				this.form.postDetailsList.forEach(d => {
					if (this.form.classify == 2) {
						d.money = d.postPeopleNum * d.price
						this.totalprice = Number(this.totalprice + d.money)
					} else if (this.form.classify == 1) {
						d.money = d.customizationPrice
						this.totalprice = Number(this.totalprice + d.money)
					}
				})
			}
		},
		methods: {
			//确认进场时间
			timeconfirm(e){
				this.form.approachTime = e.year+'-'+e.month+'-'+e.day
			},
			//确认属性
			shuxingConfirm(e) {
				this.form.projectName = e[0].label
			},
			getShuXingList() {
				let data = {
					type: '项目甲方'
				}
				this.$Request.get('/app/dict/list', data).then(res => {
					if (res.code == 0) {
						if (res.data.length > 0) {
							var arr = []
							res.data.forEach(d => {
								var data = {}
								data.label = d.value;
								data.value = d.id;
								arr.push(data)
							});
							this.shuxingList = arr
							this.shuxingShow = true
						}

					}
				})
			},
			//删除项目类型/项目福利
			removeLable(list, index) {
				list.splice(index, 1)
			},
			//选择项目福利
			projectFllistConfirm(e) {
				console.log(e[0].label, this.projectAward)
				let data = e[0].label
				var flag = false;
				if (this.projectAward.length > 0) {
					this.projectAward.forEach(d => {
						if (d == data) {
							uni.showToast({
								title: '该福利已添加，不能重复添加！',
								icon: 'none'
							})
							flag = true;
						}

					})
					if (!flag) {
						this.projectAward.push(data)
					}
				} else {
					this.projectAward.push(data)
				}

			},
			// 获取项目福利列表
			getFlList() {
				let data = {
					type: '项目福利'
				}
				this.$Request.get('/app/dict/list', data).then(res => {
					if (res.code == 0) {
						if (res.data.length > 0) {
							var arr = []
							res.data.forEach(d => {
								var data = {}
								data.label = d.value;
								data.value = d.id;
								arr.push(data)
							});
							this.list = arr
							this.flshow = true
						}

					}
				})
			},
			//添加项目类型
			getType(index) {
				let type = ''
				if (index == '项目类型') {
					type = index
				}
				let data = {
					type: type
				}
				this.$Request.get('/app/dict/list', data).then(res => {
					if (res.code == 0) {
						if (res.data.length > 0) {
							var arr = []
							res.data.forEach(d => {
								var data = {}
								data.label = d.value;
								data.value = d.id;
								arr.push(data)
							});
							this.projectTypelist = arr
							this.projectTypeShow = true
						}

					}
				})
			},
			projectTypelistConfirm(e) {
				this.form.projectType = e[0].label
			},
			// 编辑岗位
			bianjiList(item, index) {
				uni.navigateTo({
					url: '/my/publish/gangw?postDetailsList=' + JSON.stringify(item) + '&index=' + index +
						'&classify=' + this.form.classify
				})
			},
			//岗位删除
			deteList(index) {
				this.form.postDetailsList.splice(index, 1)
				uni.setStorageSync('postDetailsList', this.form.postDetailsList)
				if (this.form.postDetailsList.length > 0) {
					this.form.postDetailsList.forEach(d => {
						if (this.form.classify == 2) {
							d.money = d.postPeopleNum * d.price
							let num = 0
							num += Number(d.money)
							this.totalprice = num
						} else if (this.form.classify == 1) {
							d.money = d.customizationPrice
							let num = 0
							num += Number(d.money)
							this.totalprice = num
						}
					})
				} else {
					this.totalprice = 0
				}
			},
			//添加项目福利
			openType(index) {
				if (index == 1) {
					this.getType('项目类型')
				} else if (index == 2) {
					this.state = index
					this.show = true
				}

			},
			cityConfirm(e) {
				// this.form.address = e.province.label + '' + e.city.label + '' + e.area.label
				this.form.address = e.province.label + '' + e.city.label + '' + e.area.label
				// console.log(e, this.form.address)
			},
			addGw() {
				uni.navigateTo({
					url: '/my/publish/gangw?classify=' + this.form.classify
				})
			},
			save() {
				if (this.state == 1) {
					this.projectType.push(this.typeName)
				} else if (this.state == 2) {
					this.projectAward.push(this.typeName)
				}
				this.typeName = ''
				this.show = false
			},
			paysubmitSave() {
				this.$Request.postJson('/app/postPush/insertPostPush', this.form).then(ret => {
					if (ret.code == 0) {
						uni.removeStorageSync('postDetailsList')
						uni.showToast({
							title: '提交成功',
						})
						this.submitShow = false
						setTimeout(() => {
							uni.redirectTo({
								url: '/my/order/index?index=1'
							})
						}, 1000)
					} else {
						uni.showToast({
							title: ret.msg,
							icon: 'error'
						})
					}
				})
			},
			submit() {
				this.form.projectAward = this.projectAward
				this.form.projectAward = this.form.projectAward.toString()
				if (!this.form.address) {
					uni.showToast({
						title: '请选择省市',
						icon: 'none'
					})
					return
				}
				if (!this.form.projectName) {
					uni.showToast({
						title: '请选择甲方性质',
						icon: 'none'
					})
					return
				}
				
				if (!this.form.projectType) {
					uni.showToast({
						title: '请添加项目类型',
						icon: 'none'
					})
					return
				}
				if (!this.form.projectDayNum) {
					uni.showToast({
						title: '请填写项目工期',
						icon: 'none'
					})
					return
				}
				if (!this.form.email) {
					uni.showToast({
						title: '请填写电子邮箱',
						icon: 'none'
					})
					return
				}
				if (!this.form.approachTime) {
					uni.showToast({
						title: '请选择进场时间',
						icon: 'none'
					})
					return
				}
				if (!this.form.projectAward) {
					uni.showToast({
						title: '请填写项目福利',
						icon: 'none'
					})
					return
				}
				if (!this.projectAward) {
					uni.showToast({
						title: '请添加项目福利',
						icon: 'none'
					})
					return
				}
				if (this.form.postDetailsList.length == 0) {
					uni.showToast({
						title: '请添加岗位',
						icon: 'none'
					})
					return
				}
				if (!this.form.projectPrincipalName) {
					uni.showToast({
						title: '请填写联系人',
						icon: 'none'
					})
					return
				}
				if (!this.form.projectPrincipalPhone) {
					uni.showToast({
						title: '请填写电话',
						icon: 'none'
					})
					return
				}
				this.submitShow = true
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #F2F2F2;
	}

	.submitShow {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
	}

	.submitShow-box {
		width: 628rpx;
		height: 100%;
	}

	.submitShow-box-title {
		width: 100%;
		height: 100rpx;
		border-bottom: 1rpx solid #EEEEEE;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.submitShow-box-title-close {
		font-size: 28rpx;
		color: #999999;
		font-weight: bold;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translate(0, -50%);
	}

	.submitShow-box-title-text {
		font-size: 32rpx;
		color: #191919;
		font-weight: 800;
	}

	.submitShow-box-item {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 45rpx;
	}

	.submitShow-box-item-l {
		color: #191919;
		font-size: 28rpx;
	}

	.submitShow-box-item-r {
		color: #191919;
		font-size: 24rpx;
		font-weight: 800;
	}

	.submitShow-box-submit {
		width: 100%;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #82A9FE;
		border-radius: 4rpx;
		margin-top: 40rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.bg {
		background-color: #FFFFFF;
		border-radius: 24upx;
	}


	.submit {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 90upx;
		background: #FFFFFF;
		// border-radius: 16upx;
		color: #000;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.subbtn {
		width: 25%;
		background: #82A9FE;
		color: #FFFFFF;
		text-align: center;
		height: 90upx;
		line-height: 90upx;
	}

	.btn {
		background: #82A9FE;
		border-radius: 12upx;
		color: #FFFFFF;
		text-align: center;
		margin: 60upx 30upx;
		padding: 21upx 0upx;
	}

	.label {
		background: #E8EFFF;
		border-radius: 4upx;
		color: #82A9FE;
		display: inline-flex;
		padding: 14upx 23upx;
	}
</style>