odd_job_applet/pages/comjobs/detail.vue

<template>
	<view v-if="pageloading">
		<view class="padding-lr padding-tb margin-bottom-sm bg-white">
			<view class="bg-white padding-top-sm text-xl text-black text-bold flex align-end">
				<view class="basis-lg">
					{{comjobs.title}}
					<text class="text-red text-sm" v-if="comjobs.wtype==1">(按月)</text>
					<text class="text-red text-sm" v-if="comjobs.wtype==2">(按时)</text>
					<text class="text-red text-sm" v-if="comjobs.wtype==3">(按件)</text>
					<text class="text-red text-sm" v-if="comjobs.wtype==4">(按项目)</text>
					<text class="text-sm">{{comjobs.recruit_num}}名</text>
				</view>
				<view class="basis-sm text-right text-df">
					<view><text class="text-red text-bold">{{comjobs.zwagall}}</text></view>
				</view>
			</view>
			<view class="bg-white padding-top text-gray">
				<view v-for="(item,index) in comjobs.tags" :key="index" class="cu-tag light bg-blue echo-tags-item">{{item}}</view>
			</view>
			<view class="text-gray padding-top-sm pad text-sm flex justify-between">
				<view class="text-red">{{sex_text}}</view>
				<view>截止日期：{{comjobs.enddate}}</view>
			</view>
		</view>
		
		<block v-if="comjobs.recruitment_cate==2">
			<view class="cu-bar bg-white">
				<view class="action">
					<text class="cuIcon-titles text-blue"></text> 推广介绍
				</view>
			</view>
			<view class="echo-article-details bg-white solids-bottom flex justify-between" style="padding-top: 0rpx;">
				<view>
					<view class="text-lg">推荐一位朋友入职奖励：<text class="text-red">{{comjobs.retmoney}}</text></view>
					<view class="text-red" v-if="comjobs.is_pay == 1">对方已支付悬赏金</view>
				</view>
				<view v-if="brokertol==0" @tap="gotoBroker">
					<image :src="$getImageUrl('static/images/applet/retmoney.png')" mode="widthFix" style="width: 64rpx;"></image> 
				</view>
				<navigator :url="'/pages/comjobs/setreport?comjobsid='+comjobs.id" open-type="navigate" v-else>
					<image :src="$getImageUrl('static/images/applet/retmoney.png')" mode="widthFix" style="width: 64rpx;"></image>  
				</navigator>
			</view>
		</block>
		
		<view class="cu-bar bg-white">
			<view class="action">
				<text class="cuIcon-titles text-blue"></text> 职位详情
			</view>
		</view>
		<view class="echo-article-details bg-white solids-bottom" style="padding-top: 0rpx;">
			<text>{{comjobs.comdetails}}</text>
		</view>
		
		<view class="cu-bar bg-white">
			<view class="action">
				<text class="cuIcon-titles text-blue"></text> 任职要求
			</view>
		</view>
		<view class="echo-article-details bg-white solids-bottom" style="padding-top: 0rpx;">
			<text>{{comjobs.requirement}}</text>
		</view>
		
		<view class="cu-bar bg-white">
			<view class="action">
				<text class="cuIcon-titles text-blue"></text> 环境图片
			</view>
			<view class="action" data-modalname="picallModal" @tap="showModal">
				<text class="text-df">查看全部 </text>
				<view class="cuIcon-right"></view>
			</view>
		</view>
		<view class="echo-article-details bg-white flex justify-between" v-if="comjobs.picall.length != 0" style="padding-top: 0rpx;" data-modalname="picallModal" @tap="showModal">
			<image class="picallitem" :src="comjobs.picall[0]" mode="aspectFill"></image>
			<image class="picallitem" :src="comjobs.picall[1]" mode="aspectFill"></image>
		</view>
		<view v-if="videosrc!==null" class="bg-white" style="padding: 0rpx 30rpx 30rpx 30rpx;" data-modalname="videoModal" @tap="showModal">
			<image style="width: 690rpx;" src="https://sc.laowushangcheng.com/static/images/videobtn.jpg" mode="widthFix"></image>
		</view>
		<!-- <view class="echo-article-details bg-white" style="padding-top: 0rpx;">
			<video v-if="videosrc!==null && modal.name==null" class="myVideo" poster="https://sc.laowushangcheng.com/static/images/videopic.jpg" :src="videosrc" enable-danmu :controls="true"></video>
		</view> -->
		
		<view class="cu-bar bg-white solids-top">
			<view class="action">
				<text class="cuIcon-titles text-blue"></text> 企业介绍
			</view>
		</view>
		<view class="echo-article-details bg-white" style="padding-top: 0rpx;">
			<text>{{comjobs.companydetails}}</text>
		</view>
		<view class="echo-article-details bg-white solids-bottom flex justify-start">
			<image class="solid margin-right-sm" :src="comjobs.worker.tilpic" style="width: 150rpx; height: 150rpx;"></image> 
			<view>
				<view @tap="goShop(comjobs.workerid)">本信息由<text class="text-red">{{comjobs.worker.title}}</text>发布</view>
				<view class="flex align-center justify-between padding-bottom-xs align-center" style="width: 520rpx;">
					<view class="flex align-center">
						<image class="iconyrz" :src="$getImageUrl('static/images/applet/iconyrz.png')" mode="scaleToFill"></image>
						<image class="iconwyp" :src="$getImageUrl('static/images/applet/iconwyp.png')" mode="scaleToFill" v-if="comjobs.recruitment_cate==2"></image>
					</view>
					<view class="text-gray text-right basis-xs text-sm" @tap="goShop(comjobs.workerid)">
						<text class="cuIcon-shop margin-right-xs text-lg"></text>
						进店
					</view>
				</view>
				<view class="text-gray" @tap="setAddress()"><text class="cuIcon-locationfill text-blue margin-right-xs"></text> {{comjobs.worker.city}} {{comjobs.worker.district}} {{comjobs.worker.address}}</view>
			</view>
		</view>
		
		<view class="cu-bar bg-white">
			<view class="action">
				<text class="cuIcon-titles text-blue"></text> 服务流程
			</view>
		</view>
		<view class="echo-article-details bg-white solids-bottom" style="padding-top: 0rpx;">
			<image :src="$getImageUrl('static/images/applet/detaillc.png')" mode="widthFix" style="width: 100%;"></image>
		</view>
		
		<view class="padding"></view>
		<view class="padding"></view>
		<view class="cu-bar bg-white tabbar border shop foot">
			<button class="text-gray action" data-modalname="shareModal" @tap="showModal" v-if="appplatform!='ios'">
				<view class="padding-bottom-xs">
					<image style="width: 38rpx; height: 38rpx;" :src="$getImageUrl('static/images/applet/detshare.png')"></image>
				</view>
				分享
			</button>
			<button class="text-gray action" @tap="setComjobsStar">
				<view class="padding-bottom-xs">
					<image style="width: 38rpx; height: 38rpx;" :src="$getImageUrl('static/images/applet/detstar.png')"></image>
				</view>
				{{comjobsstar==0 ? '收藏' : '已收藏'}}
			</button>
			<view class="bg-blue submit echo-foot-button" @tap="setComjobsLog" v-if="comjobs.status==3"> <text>立即报名</text> </view>
			<view class="bg-grey submit echo-foot-button" v-else> <text>已招满</text> </view>
		</view>
		
		
		<view class="cu-modal bottom-modal show" v-if="modal.name=='videoModal'" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white">
					<view class="action text-black">视频</view>
					<view class="action text-blue" @tap="hideModal">取消</view>
				</view>
				<view class="solid-top" v-if="videosrc!==null">
					<video class="myVideo" :src="comjobs.video" enable-danmu :controls="true"></video>
				</view>
			</view>
		</view>
		
		<view class="cu-modal bottom-modal show" v-if="modal.name=='picallModal'" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white">
					<view class="action text-black">环境图片</view>
					<view class="action text-blue" @tap="hideModal">取消</view>
				</view>
				<view class="solid-top">
					<scroll-view scroll-y="true" class="bg-white padding-tb padding-lr-sm solids-top echo-picalllist">
						<view class="flex justify-between">
							<view class="picitem">
								<block v-for="(item,index) in comjobs.picall" :key="index">
									<image class="solid" :data-current="index" @tap="previewImage" v-if="index%2==0" mode="widthFix" :src="item"></image>
								</block>
							</view>
							<view class="picitem">
								<block v-for="(item,index) in comjobs.picall" :key="index">
									<image class="solid" :data-current="index" @tap="previewImage" v-if="index%2==1" mode="widthFix" :src="item"></image>
								</block>
							</view>
						</view>
					</scroll-view>				
				</view>
			</view>
		</view>

		<view class="cu-modal show" v-if="modal.name=='comjobspicModal'">
			<view class="cu-dialog picmodal">
				<view class="bg-img">
					<image mode="widthFix" :src="modal.comjobspic"></image>
					<view class="cu-bar justify-end text-white picmodalclose">
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close "></text>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white margin-top-xs">
					<view class="action margin-0 flex-sub solid-left" @tap="saveImage">保存到相册</view>
				</view>
			</view>
		</view>
		
		<view class="cu-modal bottom-modal show" v-if="modal.name=='shareModal'" @tap="hideModal">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white">
					<view class="action text-black">点击海报</view>
					<view class="action text-blue" @tap="hideModal">取消</view>
				</view>
				<view class="solid-top">
					<scroll-view scroll-y="true" class="bg-white padding-tb padding-lr-sm solids-top echo-picalllist">
						<view class="cu-list grid col-2 no-border padding-lr">
							<block v-for="(item,index) in comjobsshare" :key="index">
								<view class="cu-item">
									<view class="padding-lr-sm" @tap="getComjobsImage(item.id)">
										<view class="bg-img" :style="'background-image:url(' + item.tilpic + ');'"></view>
										<view class="padding-tb-xs text-cut">{{item.title}}</view>
									</view>
								</view>
							</block>
						</view>
					</scroll-view>				
				</view>
			</view>
		</view>
		<wxContact ref="wxContact"></wxContact>
	
	</skeleton>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				appplatform: "",
				pageloading: false,
				userinfo: {},
				comjobs: null,
				videosrc: null,
				
				comjobslist: {},
				comjobsstar: 0,
				comjobsshare: {},
				brokertol: 0,

				modal: {
					name: null,
					comjobspic: ""
				}
			}
		},
		onLoad: function(option) {
			_this = this;
			//#ifdef APP-PLUS
			_this.appplatform = uni.getSystemInfoSync().platform;
			//#endif
			var comjobsid = option.comjobsid || 0;
			var parentid = option.parentid || 0;
			if (option.scene) {
				const scene = decodeURIComponent(option.scene);
				if (scene != "undefined") {
					comjobsid = scene.split("&")[0];
					parentid = scene.split('&')[1];
				}
			}
			if(option.q){
				const q = decodeURIComponent(option.q);
				if (q != "undefined") {
					comjobsid = q.split("=")[1];
				}
			}
			uni.setStorageSync('parentid', parentid);
			_this.userinfo = uni.getStorageSync('userinfo') || null;
			_this.$req.ajax({
				path: "comjobs/getcomjobs",
				title: "加载中...",
				data: {
					comjobsid: comjobsid,
					userid: _this.userinfo == null ? 0 : _this.userinfo.id
				}
			}).then((data) => {
				_this.comjobs = data.comjobs;
				_this.comjobslist = data.comjobslist;
				_this.comjobsstar = data.comjobsstar;
				_this.comjobsshare = data.comjobsshare;
				_this.brokertol = data.brokertol;
				
				setTimeout(function (){
					_this.videosrc = _this.comjobs.video=='' ? null : _this.comjobs.video;
				}, 1500);
				_this.pageloading = true;
			}).catch((err) => {
				uni.showModal({
					title: '信息提示',
					content: err,
					showCancel: false
				});
			});
		},
		onShareAppMessage: function(res) {
			_this.$req.ajax({
				path: "comjobs/shareComjobs",
				title: "分享中...",
				data: {
					userid: _this.userinfo.id
				}
			})
			return {
				title: _this.comjobs.title,
				path: "/pages/comjobs/detail?comjobsid=" + _this.comjobs.id + "&parentid=" + _this.userinfo == null ? 0 : _this.userinfo.id
			}
		},
		methods: {
			
			getComjobsImage: function(shareid) {
				_this.userinfo = _this.checkLogin("/pages/comjobs/detail?comjobsid=" + _this.comjobs.id);
				if (_this.userinfo === false) {
					return false;
				}
				_this.$req.ajax({
					title: "推广海报生成中...",
					path: "comjobs/getcomjobsimage",
					data: {
						shareid: shareid,
						userid: _this.userinfo.id,
						comjobsid: _this.comjobs.id
					}
				}).then((data) => {
					var t1 = Math.round(Math.random()*100);
					_this.modal.comjobspic = data.comjobspic + '?' + t1;
					_this.modal.name = "comjobspicModal";
				}).catch((err) => {
					uni.showModal({
						title: '温馨提示',
						content: err,
						showCancel: false
					});
				});
			},
			
			getComjobsCode: function() {
				_this.userinfo = _this.checkLogin("/pages/comjobs/detail?comjobsid=" + _this.comjobs.id);
				if (_this.userinfo === false) {
					return false;
				}
				_this.$req.ajax({
					title: "招聘简章生成中...",
					path: "comjobs/getcomjobscode",
					data: {
						comjobsid: _this.comjobs.id,
						userid: _this.userinfo.id
					}
				}).then((data) => {
					_this.modal.comjobspic = data.comjobspic;
					_this.modal.isshow = "show";
				}).catch((err) => {
					uni.showModal({
						title: '温馨提示',
						content: err,
						showCancel: false
					});
				});
			},

			saveImage: function() {
				uni.downloadFile({
					url: _this.modal.comjobspic, 
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showModal({
										title: '信息提示',
										content: "已保存到手机相册，注意查收。",
										showCancel: false
									});
								}
							});
						}
					}
				});
			},			
			setComjobsLog: function() {
				_this.userinfo = _this.checkLogin("/pages/comjobs/detail?comjobsid=" + _this.comjobs.id);
				if (_this.userinfo === false) {
					uni.navigateTo({
						url: "/pages/my/myinfo?pageurl=/pages/comjobs/detail/comjobsid=" + _this.comjobs.id,
					});
					return false;
				}
				//检测用户信息是否完整
				if(_this.userinfo.education=="" || _this.userinfo.address=="" || _this.userinfo.workexperience==""){
					uni.navigateTo({
						url: "/pages/my/myinfo?pageurl=/pages/comjobs/detail/comjobsid=" + _this.comjobs.id,
					});
					return false;
				}
				
				_this.$req.ajax({
					title: "报名中",
					path: "comjobs/setcomjobslog",
					data: {
						comjobsid: _this.comjobs.id,
						userid: _this.userinfo.id
					}
				}).then((data) => {
					if (data.is_public == 1) {
						var confirmText = '联系对方';
					} else {
						var confirmText = '联系客服';
					}
					uni.showModal({
						title: '温馨提示',
						content: data.msg,
						confirmText: confirmText,
						cancelText: "好的",
						success: function(res){
							if (res.confirm) {
								if (data.is_public == 1) {
									uni.makePhoneCall({
									   phoneNumber: data.mobile
									});
								} else {
									_this.$refs.wxContact.showConcatModel();
								}
							}
						},
					});
				}).catch((err) => {
					uni.showModal({
						title: '温馨提示',
						content: err,
						showCancel: false
					});
				});
			},

			setComjobsStar: function() {
				_this.userinfo = _this.checkLogin("/pages/comjobs/detail?comjobsid=" + _this.comjobs.id);
				if (_this.userinfo === false) {
					return false;
				}
				_this.$req.ajax({
					path: "comjobs/setcomjobsstar",
					data: {
						comjobsid: _this.comjobs.id,
						userid: _this.userinfo.id
					}
				}).then((data) => {
					_this.comjobsstar = data.comjobsstar;
				}).catch((err) => {
					uni.showModal({
						title: '温馨提示',
						content: err,
						showCancel: true
					});
				});
			},
			goPage: function(pageurl) {
				uni.navigateTo({
					url: pageurl,
					fail: function() {
						uni.switchTab({
							url: pageurl
						});
					}
				});
			},
			gotoBroker: function() {
				uni.showModal({
				    title: '温馨提示',
				    content: '您还不是经纪人，请联系客服，申请成为经纪人',
					confirmColor: "#007aff",
				    success: function (res) {
				        if (res.confirm) {
							_this.$refs.wxContact.showConcatModel();
				            // uni.redirectTo({
				            // 	url: '/pages/form/form?formid=4'
				            // });
				        }
				    }
				});
			},
			goDetail: function(comjobsid) {
				uni.navigateTo({
					url: '/pages/comjobs/detail?comjobsid=' + comjobsid
				});
			},
			goShop: function(workerid) {
				uni.navigateTo({
					url: '/pages/worker/shop?workerid=' + workerid
				});
			},
			navigate: function(href, e) {
				// #ifdef H5
				location.href = href;
				// #endif
				// #ifndef H5
				uni.navigateTo({
					url: '/pages/tool/webview?pagesrc=' + encodeURIComponent(href)
				});
				// #endif
			},
			
			setAddress: function() {
				uni.openLocation({
					latitude: parseFloat(_this.comjobs.worker.latitude),
					longitude: parseFloat(_this.comjobs.worker.longitude),
					name: _this.comjobs.worker.title,
					address: _this.comjobs.worker.city + " " + _this.comjobs.worker.district + " " + _this.comjobs.worker.address,
					success: function () {
						console.log('success');
					}
				});
			},
			makeTelephone: function(e) {
				var telephone = e.currentTarget.dataset.telephone;
				uni.makePhoneCall({
					phoneNumber: telephone
				});
			},
			showModal: function(e) {
				var modalname = e.currentTarget.dataset.modalname;
				_this.modal.name = modalname;
			},
			hideModal: function() {
				_this.modal.name = null;
			},
			previewImage: function(e) {
				var current = e.currentTarget.dataset.current;
				uni.previewImage({
					current: current,
					urls: _this.comjobs.picall
				});
			}
		},
		computed: {
			sex_text() {
				const arr = ['男女不限','男','女'];
				return arr[_this.comjobs.sex];
			}
		}
	}
</script>

<style lang="scss">
	.flex-1 {
		flex: 1;
	}

	.flex-6 {
		flex: 6;
	}

	.picmodal {
		width: 450rpx;
		background-color: transparent;
	}

	.picmodal image {
		width: 100%;
	}

	.picmodal .bg-img {
		position: relative;
	}

	.picmodalclose {
		position: absolute;
		top: 0rpx;
		right: 0rpx;
	}
	
	.picallitem{ width: 340rpx; height: 260rpx; }
	
	.echo-picalllist{ height: calc(100vh - 105rpx); }
	.echo-picalllist .picitem{ width: 345rpx !important; }
	.echo-picalllist image{ width: 345rpx; padding-bottom: 15rpx; }
	
	.cu-item .bg-img{ width: 100%; height: 390rpx; background-position: center top; }
	
	.myVideo{ width: 750rpx; height: calc(100vh - 130px); }
</style>