cbz/page_mine/pages/service/demand.vue

<template>
	<view class="content">
		<view class="tabs hflex acenter jcenter">
			<view class="tab_item" :class="tab_active == 0?'tab_active':''" @click="changeTabs(0)">采购接单需求</view>
			<view class="tab_item" :class="tab_active == 1?'tab_active':''" @click="changeTabs(1)">船机修理接单需求</view>
		</view>
		<block v-if="tab_active == 0 && is_write1 == 0">
			<view class="vflex acenter jcenter">
				<view class="img_box vflex acenter jcenter">
					<u-icon name="info-circle-fill" color="#506dff" size="50"></u-icon>
					<view class="text">还未发布采购需求信息</view>
				</view>
				<view class="release" @click="release(1)">立即发布</view>
			</view>
		</block>
		<block v-if="tab_active == 1 && is_write2 == 0">
			<view class="vflex acenter jcenter">
				<view class="img_box vflex acenter jcenter">
					<u-icon name="info-circle-fill" color="#506dff" size="50"></u-icon>
					<view class="text">还未提交需求信息</view>
				</view>
				<view class="release" @click="release(2)">立即发布</view>
			</view>
		</block>
		<block v-if="tab_active == 0 && is_write1 == 1">
			<view class="box">
				<view class="box1">
					<view class="title">需求说明</view>
					<u--textarea v-model="purchase.description" placeholder="请详细描述你的采购需求" border="none"></u--textarea>
					<view class="title">上传营业执照或者身份证件照</view>
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1" width="200rpx" height="200rpx"></u-upload>
				</view>
				<view class="box1">
					<view class="title">上传图片以及资质证件照片</view>
					<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple :maxCount="9" width="200rpx" height="200rpx"></u-upload>
				</view>
				<view class="box1 hflex acenter jbetween" style="margin-bottom: 186rpx;padding: 0 20rpx;">
					<view class="title">是否隐藏需求</view>
					<u-switch v-model="purchase.hidden" @change="changeHide1"></u-switch>
				</view>
			</view>
			<view class="bottom">
				<view class="btn" v-if="purchase.id !== ''" @click="publish">立即发布</view>
				<view class="btn" v-else @click="publish">立即修改</view>
			</view>
		</block>
		<block v-if="tab_active == 1 && is_write2 == 1">
			<view class="box">
				<view class="box1">
					<view class="hflex acenter jbetween cell">
						<view class="label">姓名</view>
						<u-input v-model="repair.name" placeholder="请填写姓名" inputAlign="right" border="none"></u-input>
					</view>
					<view class="hflex acenter jbetween cell">
						<view class="label">所在单位</view>
						<u-input v-model="repair.company_name" placeholder="请填写所在单位名称" inputAlign="right" border="none"></u-input>
					</view>
					<view class="cell">
						<view class="label">营业执照照片</view>
						<view class="upload hflex acenter jcenter">
							<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" :maxCount="1" name="3" multiple :previewFullImage="true" width="530rpx" height="324rpx">
								<image src="/static/images/comment/upload-business.png" style="width: 530rpx;height: 324rpx;"></image>
								<image class="upload_img" src="/static/images/comment/upload-top.png"></image>
							</u-upload>
						</view>
					</view>
					<view class="cell" style="border: none;">
						<view class="label">身份证正反面</view>
						<view class="hflex acenter jbetween" style="margin-top: 28rpx;">
							<u-upload :fileList="fileList4" @afterRead="afterRead" @delete="deletePic" :maxCount="1" name="4" multiple :previewFullImage="true" width="310rpx" height="188rpx">
								<image src="/static/images/comment/upload-just.png" style="width: 310rpx;height: 188rpx;"></image>
							</u-upload>
							<view class="upload2">
								<u-upload :fileList="fileList5" @afterRead="afterRead" @delete="deletePic" :maxCount="1" name="5" multiple :previewFullImage="true" width="310rpx" height="188rpx">
									<image src="/static/images/comment/upload-back.png" style="width: 310rpx;height: 188rpx;"></image>
									<image class="upload_img2" src="/static/images/comment/upload-top.png"></image>
								</u-upload>
							</view>
						</view>
					</view>
				</view>
				<view class="box1" style="padding: 0 20rpx;">
					<view class="hflex acenter jbetween cell">
						<view class="label">手机号</view>
						<u-input v-model="repair.phone" placeholder="请填写你的手机号" inputAlign="right" border="none"></u-input>
					</view>
					<view class="hflex acenter jbetween cell">
						<view class="label">邮箱</view>
						<u-input v-model="repair.email" placeholder="请填写你的邮箱" inputAlign="right" border="none"></u-input>
					</view>
					<view class="hflex acenter jbetween cell" style="border: none;">
						<view class="label">地址</view>
						<u-input v-model="repair.address" placeholder="请填写你的详细地址" inputAlign="right" border="none"></u-input>
					</view>
				</view>
				<view class="box1">
					<view class="cell vflex jbetween">
						<view class="label">工作简历</view>
						<u-input v-model="repair.job_resume" placeholder="请详细描述你的工作经历" border="none"></u-input>
					</view>
					<view class="cell vflex jbetween" style="border: none;">
						<view class="label">特长</view>
						<u-input v-model="repair.specialty" placeholder="请简单叙述一下你的优点及特长" border="none"></u-input>
					</view>
				</view>
				<view class="box1 hflex acenter jbetween" style="margin-bottom: 186rpx;padding: 0 20rpx;">
					<view class="title">是否隐藏需求</view>
					<u-switch v-model="repair.hidden == 2?true:false" @change="changeHide2"></u-switch>
				</view>
			</view>
			
			<view class="bottom">
				<view class="btn" v-if="JSON.stringify(repair) == '{}'" @click="submit">立即发布</view>
				<view class="btn" v-else @click="submit">立即修改</view>
			</view>
		</block>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				tab_active: 0,
				is_write1: 0,
				is_write2: 0,
				purchase: {
				},
				repair: {},
				fileList1: [],
				fileList2: [],
				fileList3: [],
				fileList4: [],
				fileList5: [],
			}
		},
		onLoad() {
			that = this
			that.getData()
			console.log(that.re);
		},
		methods: {
			getData() {
				$api.req({
					url: '/data/api.auth.Center/myneed',
					method: 'POST',
					data: {
						type: that.tab_active + 1
					}
				}, function(res) {
					if(res.code == 1) {
						if(JSON.stringify(res.data) == "[]" &&that.tab_active == 0) {
							that.is_write1 = 0
						} 
						if(JSON.stringify(res.data) !== "[]" &&that.tab_active == 0) {
							that.is_write1 = 1
							that.purchase = res.data
							that.fileList1.push({
								url:res.data.business_img
							})
							var imgs = res.data.imgs
							let obj = {}
							for(let key in imgs) {
								obj[key] = imgs[key]
							}
							var fileList2 = Object.keys(obj).map(item => ({
								url: obj[item]
							}))
							that.fileList2 = fileList2
						}
						if(JSON.stringify(res.data) == "[]" &&that.tab_active == 1) {
							that.is_write2 = 0
						} 
						if(JSON.stringify(res.data) !== "[]" &&that.tab_active == 1) {
							that.is_write2 = 1
							that.repair = res.data
							that.fileList3.push({
								url:res.data.business_img
							})
							that.fileList4.push({
								url:res.data.id_card_zheng
							})
							that.fileList5.push({
								url:res.data.id_card_fan
							})
						}
					}
				})
			},
			// 切换tabs
			changeTabs(index) {
				console.log(index);
				that.tab_active = index
				that.getData()
			},
			// 立即发布
			release(index) {
				if(index == 1) {
					that.is_write1 = 1
				} else {
					that.is_write2 = 1
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.url
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: $api.config.baseUrl + '/data/api.auth.Center/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							'api-token': uni.getStorageSync('token').token?uni.getStorageSync('token').token:'',
							'api-name': 'wxapp'
						},
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								var data = JSON.parse(res.data)
								resolve(data.data)
							}, 1000)
						}
					});
				})
			},
			changeHide1(e) {
				that.purchase.is_hide = e
			},
			changeHide2(e) {
				if(e) {
					that.repair.hidden = 2
				} else {
					that.repair.hidden = 1
				}
			},
			submit() {
				$api.req({
					url: '/data/api.auth.ShipEngineMaintenance/subacceptance',
					method: 'POST',
					data: {
						name: that.repair.name,
						company_name: that.repair.company_name,
						business_img: that.fileList3[0].url,
						id_card_zheng: that.fileList4[0].url,
						id_card_fan: that.fileList5[0].url,
						phone: that.repair.phone,
						email: that.repair.email,
						address: that.repair.address,
						job_resume: that.repair.job_resume,
						specialty: that.repair.specialty,
						province: uni.getStorageSync('location').province,
						city: uni.getStorageSync('location').city,
						area: uni.getStorageSync('location').district,
						hidden: that.repair.hidden,
						id: that.repair.id? that.repair.id: ''
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
					}
				})	 
			},
			publish() {
				var imgs = ''
				if(that.fileList2.length == 1) {
					imgs = that.fileList2[0].url
				} else if (that.fileList2.length > 1) {
					for(var i=0;i<that.fileList2.length;i++) {
						if(i == that.fileList2.length - 1) {
							imgs += that.fileList2[i].url
						} else {
							imgs += that.fileList2[i].url + ','
						}
					}
				} 
				$api.req({
					url: '/data/api.auth.Center/subpurchaseacceptance',
					method: 'POST',
					data: {
						description	: that.purchase.description,
						business_img: that.fileList1[0].url,
						imgs: imgs,
						hidden: that.purchase.hidden?2:1,
						province: uni.getStorageSync('location').province,
						city: uni.getStorageSync('location').city,
						area: uni.getStorageSync('location').district,
						id: that.purchase.id?that.purchase.id:''
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		
		.tabs {
			width: 650rpx;
			box-sizing: border-box;
			margin: 26rpx 56rpx;
			background: #F5F5F5;
			border-radius: 40rpx;
			.tab_item {
				width: 50%;
				height: 80rpx;
				// border-radius: 40rpx;
				text-align: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #222222;
				line-height: 80rpx;
			}
			.tab_active {
				background: #506DFF;
				color: #FFFFFF;
				border-radius: 40rpx;
			}
		}
		.img_box {
			margin: 120rpx 0 0;
			.text {
				padding-top: 20rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #222222;
				line-height: 44rpx;
			}
		}
		.release {
			margin-top: 112rpx;
			width: 450rpx;
			height: 92rpx;
			background: #506DFF;
			border-radius: 46rpx;
			font-size: 36rpx;
			text-align: center;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 92rpx;
		}
		.box {
			width: 100%;
			min-height: calc(100vh - 108rpx);
			background: #F5F5F5;
			box-sizing: border-box;
			padding: 0 20rpx;
			.box1 {
				width: 100%;
				background: #FFFFFF;
				border-radius: 10px;
				margin-top: 20rpx;
				box-sizing: border-box;
				padding: 0 20rpx 36rpx;
				.title {
					padding: 24rpx 0 20rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
				}
				.u-textarea {
					background-color: #F5F5F5;
				}
			}
			.cell {
				width: 100%;
				padding: 32rpx 0 24rpx;
				border-bottom: 1rpx solid #F4F4F4;
				.label {
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
				}
				.upload {
					box-sizing: border-box;
					padding: 40rpx 60rpx;
					position: relative;
					width: 100%;
					height: 400rpx;
					background: #F4F4F4;
					border-radius: 16rpx;
					margin-top: 24rpx;
					.upload_img {
						position: absolute;
						width: 120rpx;
						height: 120rpx;
						top: 142rpx;
						left: 266rpx;
					}
				}
				.upload2 {
					position: relative;
					.upload_img2 {
						position: absolute;
						width: 80rpx;
						height: 80rpx;
						top: 40rpx;
						left: 116rpx;
					}
				}
			}
		}
		.bottom {
			width: 100%;
			height: 166rpx;
			background-color: #fff;
			box-shadow: 0 -2rpx 16rpx 0 rgba(215,215,215,0.5);
			position: fixed;
			bottom: 0;
			box-sizing: border-box;
			padding: 12rpx 30rpx;
			z-index: 99;
			.btn {
				width: 690rpx;
				height: 84rpx;
				background-color: #506dff;
				border-radius: 50rpx;
				box-shadow: 0 4rpx 28rpx 0 rgba(132,123,255,0.4);
				font-size: 40rpx;
				color: #fff;
				text-align: center;
				line-height: 84rpx;
			}
		}
	}
</style>