jobslink-user-clent/pages/projectInfo/projectInfo.vue

<template>
	<view v-if="showDetail">
		<view class="head">
			<view class="proname">
				{{info.missionTitle}}
			</view>
			<!-- <view class="prolist">
				任务编码：{{info.missionNo}}
			</view> -->
			<view class="prolist">
				任务日期：{{dateFormat((info.stime))}}至{{dateFormat((info.etime))}}
			</view>
			<view class="prolist">
				报名截止：{{dateFormat((info.etimePub))}}
			</view>
			<view class="prolist">
				行业类型：{{info.tradeNames}}
			</view>
			<view class="prolist">
				工种类型：{{info.worktypeNames}}
			</view>
			<view class="fee">
				{{info.wage}}{{wageUnit[info.wageUnitCategory]}}
			</view>
		</view>
		<view class="head">
			<view class="proname proneed">
				任务要求
			</view>
			<view class="prolist">
				<view class="protype">
					年龄要求：{{age[info.ageDesc]}}
				</view>
			</view>
			<view class="prolist">
				<view class="protype">
					学历要求：{{education[info.education]}}
				</view>
				<view class="protype">
					经验要求：{{experience[info.experienceDesc]}}
				</view>
			</view>
			<view class="prolist proint">
				任务描述
			</view>
			<view class="prolist description">
				{{info.missionDesc}}
			</view>
			<!-- 技能标签 start -->
			<view class="ask">
				<view class="askList" v-for="(item,index) in skillNames" :key="index">
					{{item}}
				</view>
			</view>
			<!-- 技能标签 end -->
			<view v-if="info.jobSources" class="prolist">
				来源：{{info.jobSources}}
			</view>
		</view>
		<view class="head">
			<view class="proname proneed">
				公司信息
			</view>
			<view class="prolist">
				{{info.companyName}}
			</view>
			<view class="prolist">
				公司地址：{{info.companyAddress}}
			</view>
		</view>
		<view class="head">
			<view class="proname proneed">
				联系方式
			</view>
			<view class="prolist">
				<view class="protype">
					联系人：{{info.callName}}
				</view>
				<view class="protype">
					联系方式：{{info.callTel}}
				</view>
			</view>
			<view class="prolist" v-if="info.callNumber">
				座机号：{{info.callNumber}}
			</view>
			<view class="prolist">
				任务地址：{{info.address}}
			</view>
			<map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
		</view>
		<view class="" style="height:200rpx;background-color: #f6f6f6;" v-if="isShow!=='0'"></view>
		<view class="btn"  v-if="isShow!=='0'&&status===0">
			<view @click="collect" style="display: flex;align-items: center;margin-right: 10rpx;flex-direction: column;">
				<image v-if="collectStatus == 0" src="../../static/img/collect.png" style="width: 36rpx;height: 36rpx;" mode=""></image>
				<image v-if="collectStatus == 1" src="../../static/img/collect_yes.png" style="width: 36rpx;height: 36rpx;" mode=""></image>
				<view v-if="collectStatus == 0" style="font-size: 26rpx;color:#707070;margin-top:10rpx;">收藏</view>
				<view v-if="collectStatus == 1" style="font-size: 20rpx;color:#707070;margin-top:10rpx;">已收藏</view>
			</view>
			
			<view @click="callPhone" class="bottombtn flexbtn" style="margin-right: 10rpx;background-color: #FBAD17;border-radius: 45rpx;">
				电话联系
			</view>
			<view @click="submit" class="bottombtn flexbtn" style="border-radius: 45rpx;">
				申请
			</view>
		</view>
		<view class="btn" v-if="isShow!=='0'&&status!==0">
			<!-- <view class="bottombtn lookContract" @click="lookMask">查看合同</view> -->
			<view @click="collect" style="display: flex;align-items: center;margin-right: 10rpx;flex-direction: column;">
				<image v-if="collectStatus == 0" src="../../static/img/collect.png" style="width: 36rpx;height: 36rpx;" mode=""></image>
				<image v-if="collectStatus == 1" src="../../static/img/collect_yes.png" style="width: 36rpx;height: 36rpx;" mode=""></image>
				<view v-if="collectStatus == 0" style="font-size: 26rpx;color:#707070;margin-top:10rpx;">收藏</view>
				<view v-if="collectStatus == 1" style="font-size: 20rpx;color:#707070;margin-top:10rpx;">已收藏</view>
			</view>
			
			<view @click="callPhone" class="bottombtn flexbtn" style="margin-right: 10rpx;background-color: #FBAD17;border-radius: 45rpx;">
				电话联系
			</view>
			<view class="bottombtn disabledBtn flexbtn" style="border-radius: 45rpx;">已申请</view>
		</view>
		<uniMask :maskShow="maskShow">
			<view class="contractMask">
				<!-- #ifdef H5 || APP-PLUS -->
				<view class="close" @click="close" style="top: 124rpx;">+</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="close" @click="close">+</view>
				<!-- #endif -->
				<view style="height: 30px;"></view>
				<img :src="src" alt="" style="width:100%;height: 1000px;">
				<view v-if="nextBtn" class="down" @click="next">下一步</view>
			</view>
		</uniMask>
	</view>
	<view v-else-if="showCode" class="codeSealBox">
		<!-- #ifdef H5 || APP-PLUS -->
		<view class="closeCode" @click="closeShowCode" style="top: 124rpx;">+</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="closeCode" @click="closeShowCode">+</view>
		<!-- #endif -->

		<view class="title">
			<view class="name">签名密码</view>
			<view class="tip">6位数字签名密码</view>
		</view>
		<view style="height: 36px;"></view>
		<valid-code ref="validCode" @finish="getInpCode" :maxlength="maxlength"></valid-code>
		<view style="height: 36px;"></view>
		<view class="forget" @click="forget">忘记密码？</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	import {missionDetail,submit, getCollectState, updateCollectStatus} from '@/api/mission.js';
	import {GoLogin} from '@/untils/AxiosUtils.js';
	import {setRead} from '@/api/news.js';
	import {checkPass} from '@/api/auth.js';
	import dictionary from '@/common/textdata.js';
	import {dateFormat} from "../../untils/format.js";
	import uniMask from '@/components/uni-mask/mask.vue'
	import validCode from '@/components/p-valid-code/p-valid-code.vue'
	export default {
		data() {
			return {
				...dictionary,
				info: {},
				status: null,
				showDetail: false,
				showCode: false,
				maskShow: false,
				nextBtn: false,
				loading: false,
				latitude: 39.909, //中心点
				longitude: 116.39742,
				covers: [{ //marker标记位置
					id: 0,
					latitude: 0,
					longitude: 0,
					// width:30,
					// height:30,
					iconPath: '../../static/img/location.png'
				}],
				missionNo: "",
				isShow: '',
				type: '',
				id: '',
				src: 'https://jlfiles.oss-cn-zhangjiakou.aliyuncs.com/jobslink-api/doc/%E7%94%B5%E5%AD%90%E5%90%88%E5%90%8C%E9%A2%84%E8%A7%88%E5%9B%BE%E7%89%87.png',
				maxlength: 6,
				collectStatus: 0, // 收藏状态
			}
		},
		components: {uniMask,validCode},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			// this.$store.dispatch('setAutograph')
			if (option.missionNo) {
				this.missionNo = decodeURIComponent(option.missionNo);
			}
			if (option.isCan) {
				this.isShow = option.isCan; //isShow为'0'则为我的任务、我的评价过来的，需要隐藏抢任务按钮
			}
			if (option.type) {
				this.type = option.type; //type为1则为消息邀请过来的,需要设置消息已读;
			}
			if (option.id) {
				this.id = option.id; //消息id
			}
		},
		onShow: function() {
			this.showDetail = true
			this.getData();
			
		},
		onShareAppMessage(obj) {
			return {
				title: this.info.missionTitle,
				path: `/pages/projectInfo/projectInfo?missionNo=${this.info.missionNo}`
			}
		},
		methods: {
			dateFormat,
			collect() {
				// console.log('收藏，取消收藏')
				const status = this.collectStatus == 0 ? 1 : 0;
				updateCollectStatus(this.info.id, status).then(res => {
					if(res.data.code == 200) {
						this.getCollectStatus()
					}
				})
			},
			callPhone() {
				console.log('电话联系')
			},
			// 获取收藏状态
			getCollectStatus() {
				getCollectState(this.info.id).then(res => {
					// 0 未收藏，1 已收藏
					// console.log(res)
					this.collectStatus = res.data.data;
				})
			},
			getData: function() {
				const self = this;
				missionDetail(self.missionNo).then(res => {
					self.info = res.data.data;
					self.status = res.data.data.detailStatus;
					self.latitude = self.info.lat;
					self.longitude = self.info.lon;
					self.covers[0].latitude = self.info.lat;
					self.covers[0].longitude = self.info.lon;
					self.showDetail = true;
					self.getCollectStatus();
					if (self.type === 1) {
						// 设置已读
						setRead(self.id).then(res => {
							self.$store.commit("SET_READ");
						})
					}
				}, error => {
					console.log(error);
				});
			},
			submit: function() {
				if (!this.$store.state.user.token) {
					GoLogin()
					return
				}
				if(this.loading) return
				const auth = this.auth
				const contractOn = this.info.contractOn
				const sealOk = this.autograph && this.autograph.data && this.autograph.data.signSrcUrl
				// if (sealOk) {
				// 	console.log('直接抢任务')
				// 	this.submitTask()
				// } else
				// if (!auth.realNameState || !auth.laborState || !auth.insureState) {
				// 	this.goSign(0)
				// } else if (!auth.bankCardState){
				// 	this.goSign(1)
				// } else
				if (contractOn && !sealOk) {
					this.goSign(2)
				} else if (sealOk && contractOn){
					this.nextBtn = true
					this.lookMask()
				} else {
					this.submitTask()
				}
			},
			// 查看合同
			lookMask(){
				this.maskShow = true
			},
			// 抢任务
			submitTask(){
				submit(this.missionNo,0).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					});
					this.status = null;
					this.loading = false
				}, error => {
					this.loading = false
				});
			},
			// 步骤
			goSign(active){
				uni.navigateTo({
					url: `/pages/projectInfo/signContract?active=${active}`
				})
			},
			// 关闭弹窗
			close(){
				this.maskShow = false
			},
			// 合同下一步
			next(){
				this.maskShow = false
				this.showDetail = false
				this.showCode = true
			},
			// 输入签名密码
			getInpCode(password){
				uni.showLoading({
					title:"请求中..."
				})
				this.loading = true
				var obj = {
					pass: password
				}
				checkPass(obj).then(res => {
					this.submitTask()
					this.closeShowCode()
				}).catch(err => {
					this.loading = false
				})
			},
			// 关闭签名密码弹窗
			closeShowCode(){
				this.showCode = false
				this.showDetail = true
			},
			// 忘记密码
			forget(){
				uni.navigateTo({
					url: `/pageMy/setUserBase/seal/forget?forget=true`
				})
			}
		},
		computed: {
			...mapGetters(['auth', 'autograph']),
			skillNames() {
				if (this.info.skillNames) {
					return this.info.skillNames.split(',')
				}
			}
		}
	}
</script>

<style lang="scss">
	.codeSealBox{
		padding: 285rpx 72rpx 0 72rpx;
		.closeCode{
			position: absolute;
			right: 36rpx;
			top: 120rpx;
			color: #1B66FF;
			transform: rotate(45deg);
			font-size: 40px;
		}
		.title{
			display: flex;
			align-items: center;
		}
		.name{
			height: 46rpx;
			font-size: 46rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 46rpx;
			margin-right: 28rpx;
		}
		.tip{
			height: 38rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 38rpx;
		}
		.forget{
			height: 38rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #5AA0FA;
			line-height: 38rpx;
			text-align: right;
		}

	}
	.contractMask{
		background-color: #FFFFFF;
		margin: 30rpx;
		position: relative;
		border-radius: 4px;
		height: 96%;
		overflow: auto;
		.close{
			width: 23px;
			height: 23px;
			color: #1B66FF;
			position: fixed;
			right: 60rpx;
			top: 60rpx;
			transform: rotate(45deg);
			font-size: 40px;
		}
		.down{
			position:fixed;
			bottom: 30px;
			left:14%;
			width: 545rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			background: #1B66FF;
			font-size: 36rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
	.lookContract{
		width: 30%;
		margin-right: 30rpx;
	}
	.flexbtn{
		flex:1;
	}
	.bottombtn {
		background-color: #1B66FF;
		color: #fff;
		text-align: center;
		border-radius: 10rpx;
		font-family: PingFangSC-Medium;
		font-size: 32rpx;
		height: 90rpx;
		line-height: 90rpx;
	}

	.btn {
		background-color: #fefefe;
		width: 690rpx;
		padding: 30rpx;
		padding-bottom: 80rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		display:flex;
	}

	.disabledBtn {
		background-color: #c8c9cc;
	}

	.map {
		width: 100%;
		height: 350rpx;
		margin-top: 30rpx;
	}

	.askList {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #666666;
		background-color: #f6f6f6;
		padding: 5rpx 15rpx;
		margin-right: 10rpx;
		margin-top: 15rpx;
	}

	.ask {
		overflow: hidden;
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin: 20rpx 0;

	}

	.proint {
		margin-top: 30rpx;
		font-size: 30rpx !important;
	}

	.proneed {
		font-size: 32rpx !important;

	}

	.fee {
		font-family: PingFangSC-Medium;
		font-size: 32rpx;
		color: #F46161;
		margin-top: 30rpx;
	}

	.protype {
		width: 50%;
	}

	.prolist {
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #666666;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: left;
		padding: 5rpx 0;
	}

	.proname {
		font-weight: bold;
		font-family: PingFangSC-Medium;
		font-size: 40rpx;
		color: #333333;
		width: 90%;
		overflow: hidden;
		padding-bottom: 20rpx;
	}

	.head {
		padding: 30rpx;
		background: #fefefe;
		border-bottom: 20rpx solid #f6f6f6;
	}

	.description {
		word-break: break-all;
		white-space: pre-line;
	}
</style>