cbz/page_shop/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 requied">需求说明</view>
					<u--textarea v-model="purchase.description" placeholder="请详细描述你的采购需求" border="none"></u--textarea>
					<view class="title requied">上传营业执照或者身份证件照</view>
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1" width="200rpx" height="200rpx">
						<image src="@/static/images/index/upload_img.png" mode="" style="width: 200rpx;height: 200rpx"></image>
					</u-upload>
				</view>
				<view class="box1">
					<view class="title requied">上传图片以及资质证件照片</view>
					<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple :maxCount="9" width="200rpx" height="200rpx">
						<image src="@/static/images/index/upload_img.png" mode="" style="width: 200rpx;height: 200rpx"></image>
					</u-upload>
				</view>
				<view class="box1" style="margin-bottom: 186rpx;padding: 0 20rpx;">
					<view class="hflex acenter jbetween">
						<view class="title requied">是否隐藏需求</view>
						<u-switch v-model="purchase.hidden" inactiveColor="rgb(230, 230, 230)" @change="changeHide1"></u-switch>
					</view>
					<view class="text">
						说明：灰色开关为显示需求，蓝色开关为隐藏需求，默认为显示需求
					</view>
				</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 requied">姓名</view>
						<u-input v-model="repair.name" placeholder="请填写姓名" inputAlign="right" border="none"></u-input>
					</view>
					<view class="hflex acenter jbetween cell">
						<view class="label requied">所在单位</view>
						<u-input v-model="repair.company_name" placeholder="请填写所在单位名称" inputAlign="right" border="none"></u-input>
					</view>
					<view class="cell">
						<view class="label requied">营业执照照片</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="https://ship.shipcc.cn/common/upload-business.png" style="width: 530rpx;height: 324rpx;"></image>
								<image class="upload_img" src="https://ship.shipcc.cn/common/upload-top.png"></image>
							</u-upload>
						</view>
					</view>
					<view class="cell" style="border: none;">
						<view class="label requied">身份证正反面</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="https://ship.shipcc.cn/common/upload-just.png" style="width: 310rpx;height: 188rpx;"></image> -->
								<view class="" style="position: relative;">
									<image src="@/static/images/index/upload-back.png" style="width: 310rpx;height: 188rpx;"></image>
									<image src="@/static/images/mine/upload_center.png" style="position: absolute;top:40rpx;left: 116rpx; width: 80rpx;height: 80rpx;"></image>
									<view style="position: absolute;bottom: 16rpx;left: 70rpx;font-size: 16rpx;color: #506DFF;">上传身份证人像面照片</view>
								</view>
							</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="https://ship.shipcc.cn/common/upload-back.png" style="width: 310rpx;height: 188rpx;"></image>
									<image class="upload_img2" src="https://ship.shipcc.cn/common/upload-top.png"></image> -->
									<view class="" style="position: relative;">
										<image src="https://ship.shipcc.cn/common/upload-back.png" style="width: 310rpx;height: 188rpx;"></image>
										<image src="@/static/images/mine/upload_center.png" style="position: absolute;top:40rpx;left: 116rpx; width: 80rpx;height: 80rpx;"></image>
										<view style="position: absolute;bottom: 16rpx;left: 70rpx;font-size: 16rpx;color: #506DFF;">上传身份证国徽面图片</view>
									</view>
								</u-upload>
							</view>
						</view>
					</view>
				</view>
				<view class="box1" style="padding: 0 20rpx;">
					<view class="hflex acenter jbetween cell">
						<view class="label requied">手机号</view>
						<u-input v-model="repair.phone" placeholder="请填写你的手机号" inputAlign="right" border="none"></u-input>
					</view>
					<view class="hflex acenter jbetween cell">
						<view class="label requied">邮箱</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 requied">地址</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" style="margin-bottom: 186rpx;padding: 0 20rpx;">
					<view class="hflex acenter jbetween">
						<view class="title">是否隐藏需求</view>
						<u-switch v-model="repair.hidden" inactiveColor="rgb(230, 230, 230)" @change="changeHide2"></u-switch>
					</view>
					<view class="text">
						说明：灰色开关为显示需求，蓝色开关为隐藏需求，默认为显示需求
					</view>
				</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>
		<u-modal :show="show_tips" :closeOnClickOverlay="true" :showConfirmButton="false">
			<view class="popup1">
				<image src="https://ship.shipcc.cn/common/small-bell.png" class="popup_img"></image>
				<view class="popup1_title">温馨提示</view>
				<view class="popup1_text">您还不是维修工，不能参与报价，可立即申请成为维修工</view>
				<view class="popup1_btn" @click="toApply">立即申请</view>
				<view class="popup1_text" style="margin: 36rpx 0 0;" @click="close">暂不</view>
			</view>
		</u-modal>
	</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: {
					description: '',
					hidden: false
				},
				repair: {},
				fileList1: [],
				fileList2: [],
				fileList3: [],
				fileList4: [],
				fileList5: [],
				show_tips: false
			}
		},
		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) {
						console.log(!res.data);
						if(!res.data &&that.tab_active == 0) {
							that.is_write1 = 0
						} 
						if(res.data &&that.tab_active == 0) {
							that.is_write1 = 1
							that.purchase = res.data
							if(res.data.hidden == 2) {
								that.purchase.hidden = true
							} else {
								that.purchase.hidden = false
							}
							that.fileList1 = []
							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(!res.data &&that.tab_active == 1) {
							that.is_write2 = 0
						} 
						if(res.data &&that.tab_active == 1) {
							that.is_write2 = 1
							that.repair = res.data
							if(res.data.hidden == 2) {
								that.repair.hidden = true
							} else {
								that.repair.hidden = false
							}
							that.fileList3 = []
							that.fileList3.push({
								url:res.data.business_img
							})
							that.fileList4 = []
							that.fileList4.push({
								url:res.data.id_card_zheng
							})
							that.fileList5 = []
							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
					that.purchase.description = ''
				} else {
					console.log('是否是维修工',uni.getStorageSync('maintenance'));
					if(uni.getStorageSync('maintenance')) {
						that.is_write2 = 1
					} else {
						that.show_tips = true
					}
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				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++
					if(lists.length - 1 == i) {
						uni.hideLoading()
					}
				}
			},
			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.hidden = e
			},
			changeHide2(e) {
				that.repair.hidden = e
			},
			submit() {
				if(!that.repair.name) {
					$api.info('请填写姓名')
					return
				}
				if(!that.repair.company_name) {
					$api.info('请填写所在单位')
					return
				}
				if(that.fileList3 == '') {
					$api.info('请上传营业执照')
					return
				}
				if(that.fileList4 == '' || that.fileList5 == '') {
					$api.info('请上传身份证照片')
					return
				}
				if(that.repair.phone == '') {
					$api.info('请填写你的手机号')
					return
				}
				if(that.repair.email == '') {
					$api.info('请填写你的邮箱')
					return
				}
				if(that.repair.address == '' ) {
					$api.info('请填写你的详细地址')
					return
				}
				$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?2:1,
						id: that.repair.id? that.repair.id: ''
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
					}
				})	 
			},
			publish() {
				if(that.purchase.description == '') {
					$api.info('请先输入需求说明')
					return
				}
				
				var imgs = ''
				var imgs2 = ''
				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 + ','
						}
					}
				} else if(that.fileList2.length == 0) {
					$api.info('请上传证书')
					return 
				}
				if(that.fileList1.length == 0) {
					$api.info('请上传营业执照或身份证')
					return 
				} else {
					imgs2 = that.fileList1[0].url
				}
				$api.req({
					url: '/data/api.auth.Center/subpurchaseacceptance',
					method: 'POST',
					data: {
						description	: that.purchase? that.purchase.description : '',
						business_img: imgs2,
						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)
					}
				})
			},
			// 去申请
			toApply() {
				that.close()
				$api.jump('/page_shop/pages/service/applyMaintenance')
			},
			// 关闭
			close() {
				
				that.show_tips = false
				
			},
		},
	}
</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 {
					margin: 24rpx 0 20rpx 10rpx; 
					font-size: 28rpx; 
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
					
				}
				.requied {
					position: relative;
					padding-left: 10rpx;
				}
				.requied::before{
					content: '*';
					position: absolute;
					top: 10rpx;
					left: -10rpx;
					color: #ff0000;
				}
				.u-textarea {
					background-color: #F5F5F5;
				}
				.text {
					font-size: 24rpx;
					font-weight: 400;
					color: #d75a59;
					margin: 16rpx 0;
				}
			}
			.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;
			}
		}
		
	}
	.popup1 {
		width: 530rpx;
		// height: 520rpx;
		border-radius: 40rpx;
		position: relative;
		box-sizing: border-box;
		padding: 0 40rpx 40rpx;
		.popup_img {
			width: 174rpx;
			height: 172rpx;
			position: absolute;
			top: -50rpx;
			left: 178rpx;
			z-index: 99;
		}
		.popup1_title {
			margin-top: 134rpx;
			text-align: center;
			font-size: 48rpx;
			font-weight: 400;
			color: #222222;
		}
		
		.popup1_text {
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
			margin: 44rpx auto 52rpx;
		}
		.popup1_btn {
			margin: 0 auto;
			width: 310rpx;
			height: 84rpx;
			background: linear-gradient(90deg, #506DFF 0%, #88A6FF 100%);
			box-shadow: 0px 4rpx 24rpx 0px rgba(90,119,255,0.36);
			border-radius: 42rpx;
			text-align: center;
			line-height: 84rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>