odd_job_applet/pages/demand/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">{{demand.title}}
					<text class="text-sm text-red">({{demand.type_text}})</text>
					{{demand.num}}人
				</view>
				<view class="basis-sm text-right text-df">
					<view v-if="demand.wtype==1"><text class="text-red text-bold">{{demand.zwagall}}</text></view>
					<view v-if="demand.wtype==5"><text class="text-red text-bold">其他</text></view>
					<view v-else><text class="text-red text-bold">{{demand.bwagall}}</text></view>
				</view>
			</view>
			<view class="bg-white padding-top text-gray">
				<view v-for="(item,index) in demand.tags" :key="index" class="cu-tag light bg-red echo-tags-item">{{item}}</view>
			</view>
			<view class="text-gray padding-top-sm pad text-sm flex justify-between">
				<view class="text-red">{{demand.ftype_text}}：{{demand.fwagall}}</view>
				<view>截止日期：{{demand.enddate}}</view>
			</view>
		</view>
		

		<view class="cu-bar bg-white solids-bottom">
			<view class="action">
				<text class="cuIcon-titles text-red"></text> 任职要求
			</view>
		</view>
		<view class="echo-article-details bg-white margin-bottom-sm">
			<text>{{demand.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="demand.picall.length != 0" style="padding-top: 0rpx;" data-modalname="picallModal" @tap="showModal">
			<image class="picallitem" :src="demand.picall[0]" mode="aspectFill"></image>
			<image class="picallitem" :src="demand.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-red"></text> 企业介绍
			</view>
		</view>
		<view class="echo-article-details bg-white" style="padding-top: 0rpx;">
			<text>{{demand.comdetails}}</text>
		</view>
		<view class="echo-article-details bg-white solids-bottom flex justify-start">
			<image class="solid margin-right-sm" :src="demand.worker.tilpic" style="width: 150rpx; height: 150rpx;"></image> 
			<view>
				<view @tap="goShop(demand.workerid)">本信息由<text class="text-red">{{demand.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')" v-if="demand.recruitment_cate==2"></image>
					</view>
					<view class="text-gray text-right basis-xs text-sm" @tap="goShop(demand.workerid)">
						<text class="cuIcon-shop margin-right-xs text-lg"></text>
						进店
					</view>
				</view>
				<view class="text-gray" @tap="setAddress()"><text class="cuIcon-locationfill text-red margin-right-xs"></text> {{demand.worker.city}} {{demand.worker.district}} {{demand.worker.address}}</view>
			</view>
		</view>
		
		

		<view class="cu-bar bg-white solids-bottom margin-top-sm">
			<view class="action">
				<text class="cuIcon-titles text-red"></text> 店铺推荐
			</view>
			<view class="action" @tap="goPage('/pages/worker/shop?workerid='+demand.workerid)">
				<text class="text-df">进店看看 </text>
				<view class="cuIcon-right"></view>
			</view>
		</view>

		<block v-for="(item,index) in demandlist" :key="index">
			<view class="cu-card dynamic no-card solid-bottom echo-demand-item">
				<view class="cu-item shadow padding-top-sm padding-bottom">
					<view class="padding-lr padding-bottom-xs flex justify-between align-center" @tap="goDetail(item.id)">
						<view class="basis-lg text-bold text-lg text-cut">{{item.title}}</view>
						<view class="basis-sm text-cut text-right text-gray text-sm">{{item.city}}</view>
					</view>
					<view class="padding-lr text-lg" @tap="goDetail(item.id)">
						<view v-if="item.wtype==1"><text class="text-red text-bold">{{item.bwagall}}~{{item.zwagall}}</text> <text class="text-gray text-sm padding-left-xs">元/月</text></view>
						<view v-if="item.wtype==2"><text class="text-red text-bold">{{item.bwagall}}</text> <text class="text-gray text-sm padding-left-xs">元/日</text></view>
						<view v-if="item.wtype==3"><text class="text-red text-bold">{{item.bwagall}}</text> <text class="text-gray text-sm padding-left-xs">元/时</text></view>
						<view v-if="item.wtype==4"><text class="text-red text-bold">面议</text></view>
					</view>
					
					<view class="padding-lr text-cut" @tap="goDetail(item.id)">
						<view v-for="(titem,tindex) in item.tags" :key="tindex" class="cu-tag light bg-gray text-grey sm">{{titem}}</view>
					</view>
					<view class="padding-lr text-sm text-cut" @tap="goDetail(item.id)">
						<view class="text-gray">{{item.worker.title}}</view>
					</view>
					<view class="text-gray text-sm padding-lr flex align-center justify-between" @tap="goShop(item.workerid)">
						<view class="flex align-center">
							<image class="iconwyd" style="margin: 0rpx !important;" :src="$getImageUrl('static/images/applet/iconwyd.png')" mode="scaleToFill"></image>
						</view>
						<view class="text-gray text-right basis-xs">
							<text class="cuIcon-shop margin-right-xs text-lg"></text>
							进店
						</view>
					</view>
				</view>
			</view>
		</block>


		<view class="padding"></view>
		<view class="padding"></view>
		<view class="cu-bar bg-white tabbar border shop foot">
			<view class="action" @tap="goPage('/pages/worker/shop?workerid='+demand.workerid)">
				<view class="cuIcon-shop"></view>
				进店
			</view>

			<!-- <button class="action" open-type="share">
				<view class="cuIcon-weixin text-green">
					<view class="cu-tag badge" style="font-size: 16rpx;">邀好友</view>
				</view>
				分享
			</button> -->

			<view class="action" v-if="demand.telephone!=''" :data-telephone="demand.telephone" @tap="makeTelephone">
				<view class="cuIcon-dianhua text-red"></view>
				电话
			</view>

			<view class="bg-red submit echo-foot-button" @tap="showSnatch" v-if="demand.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="demand.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 demand.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 demand.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=='demandpicModal'">
			<view class="cu-dialog picmodal">
				<view class="bg-img">
					<image mode="widthFix" :src="modal.demandpic"></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>
		
		<modal v-if="snatchShow" title="输入人数" confirm-text="抢单" cancel-text="取消" @cancel="cancelSnatch" @confirm="confirmSnatch">
			<input type="number" style="background-color: #eee;" v-model="num" placeholder="请输入人数"></input>
		</modal>
		
		<wxContact></wxContact>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				pageloading: false,
				userinfo: false,
				workerinfo: false,
				param: {},
				demand: null,
				videosrc: null,
				iscantele: false,
				demandlist: {},

				modal: {
					name: "",
					demandpic: ""
				},
				
				snatchShow: false,
				num: '',
			}
		},
		onLoad: function(option) {
			_this = this;
			var demandid = option.demandid || 0;
			var parentid = option.parentid || 0;
			if (option.scene) {
				const scene = decodeURIComponent(option.scene);
				if (scene != "undefined") {
					demandid = scene.split("&")[0];
					parentid = scene.split('&')[1];
				}
			}
			uni.setStorageSync('parentid', parentid);
			_this.userinfo = _this.checkLogin("/pages/my/my");
			_this.workerinfo = uni.getStorageSync('workerinfo') || false;
			if (_this.userinfo === false || _this.workerinfo === false) {
				uni.reLaunch({
					url: "/pages/my/my"
				});
				return false;
			}
			_this.$req.ajax({
				path: "demand/getdemand",
				title: "加载中...",
				data: {
					demandid: demandid,
					userid: _this.userinfo == null ? 0 : _this.userinfo.id
				}
			}).then((data) => {
				_this.param = data.param;
				_this.demand = data.demand;
				_this.iscantele = data.iscantele;
				_this.demandlist = data.demandlist;
				
				setTimeout(function (){
					_this.videosrc = _this.demand.video=='' ? null : _this.demand.video;
				}, 1500);
				_this.pageloading = true;
			}).catch((err) => {
				uni.showModal({
					title: '信息提示',
					content: err,
					showCancel: false
				});
			});
		},
		onShareAppMessage: function(res) {
			return {
				title: _this.demand.title,
				path: "/pages/demand/detail?demandid=" + _this.demand.id + "&parentid=" + _this.userinfo == null ? 0 : _this.userinfo.id
			}
		},
		methods: {
			getDemandCode: function() {
				_this.userinfo = _this.checkLogin("/pages/demand/detail?demandid=" + _this.demand.id);
				if (_this.userinfo === false) {
					return false;
				}
				_this.$req.ajax({
					title: "招聘简章生成中...",
					path: "demand/getdemandcode",
					data: {
						demandid: _this.demand.id,
						userid: _this.userinfo.id
					}
				}).then((data) => {
					_this.modal.demandpic = data.demandpic;
					_this.modal.isshow = "demandpicModal";
				}).catch((err) => {
					uni.showModal({
						title: '温馨提示',
						content: err,
						showCancel: false
					});
				});
			},

			saveImage: function() {
				uni.downloadFile({
					url: _this.modal.demandpic, //仅为示例，并非真实的资源
					success: (res) => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showModal({
										title: '信息提示',
										content: "已保存到手机相册，注意查收。",
										showCancel: false
									});
								}
							});
						}
					}
				});
			},
			
			goPage: function(pageurl) {
				uni.navigateTo({
					url: pageurl,
					fail: function() {
						uni.switchTab({
							url: pageurl
						});
					}
				});
			},
			goDetail: function(demandid) {
				uni.navigateTo({
					url: '/pages/demand/detail?demandid=' + demandid
				});
			},
			goShop: function(workerid) {
				uni.navigateTo({
					url: '/pages/worker/shop?workerid=' + workerid
				});
			},
			navigate: function(href, e) {
				// #ifdef H5
				location.href = href;
				uni.navigateTo({
					url: '/pages/tool/webview?pagesrc=' + encodeURIComponent(href)
				});
				// #endif
			},
			
			// 接单
			setDemandLog: function() {
				uni.showModal({
					title: '信息提示',
					content: '接单&咨询该订单会扣除'+_this.param.teldemand+'积分，确定要接单&咨询该订单吗？',
					success: function(res) {
						if (res.confirm) {
							_this.$req.ajax({
								title: "接单中",
								path: "demand/setdemandlog",
								data: {
									demandid: _this.demand.id,
									gworkerid: _this.workerinfo.id,
									userid: _this.userinfo.id
								}
							}).then((data) => {
								_this.iscantele = true;
								uni.showModal({
									title: '温馨提示',
									content: "恭喜您，接单成功，请尽快提供就业人员。",
									showCancel: false
								});
							}).catch((err) => {
								uni.showModal({
									title: '温馨提示',
									content: err,
									showCancel: false
								});
							});
						}
					},
				});
			},
			
			// 弹窗显示隐藏
			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.demand.picall
				});
			},
			
			setAddress: function() {
				uni.openLocation({
					latitude: parseFloat(_this.demand.worker.latitude),
					longitude: parseFloat(_this.demand.worker.longitude),
					name: _this.demand.worker.title,
					address: _this.demand.worker.city + " " + _this.demand.worker.district + " " + _this.demand.worker.address,
					success: function () {
						console.log('success');
					}
				});
			},
			// 咨询电话
			makeTelephone: function(e) {
				var telephone = e.currentTarget.dataset.telephone;
				if (_this.iscantele){
					uni.makePhoneCall({
						phoneNumber: telephone
					});
					return;
				}
				uni.showModal({
					title: '信息提示',
					content: '报名&咨询该订单会扣除'+_this.param.teldemand+'积分，确定要报名&咨询该订单吗？',
					success: function(res) {
						if (res.confirm) {
							_this.$req.ajax({
								path: "demand/setdemandlog",
								data: {
									demandid: _this.demand.id,
									gworkerid: _this.workerinfo.id,
									userid: _this.userinfo.id
								}
							}).then((data) => {
								_this.iscantele = true;
								uni.makePhoneCall({
									phoneNumber: telephone
								});
							}).catch((err) => {
								uni.showModal({
									title: '信息提示',
									content: err,
									showCancel: false
								});
							});
						}
					}
				});
			},
			
			cancelSnatch() {
				_this.snatchShow = false;
			},
			showSnatch() {
				_this.snatchShow = true;
			},
			confirmSnatch() {
				if (isNaN(_this.num)) {
					uni.showModal({
						title: '信息提示',
						content: "请输入数字",
						showCancel: false
					});
				}
				
				_this.$req.ajax({
					title: "抢单中",
					path: "demand/demandSnatch",
					data: {
						id: _this.demand.id,
						workerid: _this.workerinfo.id,
						num: _this.num,
					}
				}).then((data) => {
					_this.iscantele = true;
					_this.snatchShow = false;
					uni.showModal({
						title: '温馨提示',
						content: "恭喜您，接单成功，请尽快提供就业人员。",
						showCancel: false
					});
				}).catch((err) => {
					uni.showModal({
						title: '温馨提示',
						content: err,
						showCancel: false
					});
				});
			}
		}
	}
</script>

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

	.flex-6 {
		flex: 6;
	}

	.picmodal {
		width: 640rpx;
		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; }
	
	.myVideo{ width: 750rpx; height: calc(100vh - 130px); }
</style>