bawangcan-user/pages/index/tasksdetails.vue

<template>
	<view class="page">
		<view class="bill">
			<image src="../../static/img/home/xiangqing.png"></image>
		</view>
		<view class="billtextbox">
			<view class="billtext">
				<view class="left">
					<image src="../../static/img/home/huangguan.png"></image>
					<p>番茄会员满18元返18元</p>
				</view>
				<view class="middel">
				</view>
				<view class="right">
					<view class="right a">限时</view>
					<view class="right b">抢购</view>
				</view>
			</view>
		</view>


		<view class="shop">
			<view class="shoptop">
				<view class="shoptext">
					<view class="left" style="float: left;">
						<image src="../../static/img/home/shangjia.png"></image>
					</view>
					<view class="right">
						<view>兄弟铁板烧（长青路店) </view>
						<view>营业时间：</view>
						<view>门店地址：</view>
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="bottom">
				<view class="text"> 饿了么会员满20减12 </view>
				<view class="text" style="margin-left: 8rpx;">饿了么非会员满20减12 </view>
			</view>
		</view>

		<view class="welfare">
				<view class="content">
					<view class="top" style="background-color: #0C0C0C;border-radius: 8px 8px 0 0;">
						<view style="display: flex;">
							<view style="margin-left: 20px;">番茄会员满18元返18元</view>
							<view class="button" @tap="goPageLogin('/pages/my/myVIP')">开通会员</view>
						</view>
						
					</view>
					
					<view class="bottom">
						<view class="bottomcontent" style="display: flex;align-items: center;">
							<view class="circle"></view>
							<view class="jieshao">
								<view style="font-size: 14px;font-family: PingFang SC;font-weight: 500;color: #000000;">
									进入番茄饭团福利群</view>
								<view style="font-size: 11px;font-family: PingFang SC;font-weight: 500;color: #000000;">
									添加客服微信进入番茄饭团福利群</view>
							</view>
							<view class="add">添加</view>
						</view>
					
					</view>
				</view>
			
		</view>


		<view class="footers">
			<view @click="kefu" style="24px;24px">
				<image src="../../static/img/home/kefuxin.png" mode="widthFix" style="width: 24px;height: 24px;">
				</image>
			</view>
			<view class="payinfo" @click="btns">
				<view>立即抢单</view>
			</view>
			<view class="payinfo" style="border-radius: 0px 16px 16px 0px;">
				<view>复制店名</view>
			</view>
		</view>

		<view class="procedure">订单返现流程规则</view>

		<view class="procedurepictrue">
			<view class="item">
				<image src="../../static/img/home/qianggou.png"></image>
				<view>抢购订单</view>
			</view>
			<view class="item" >
				<image src="../../static/img/home/waimai.png" style="margin-left: 20px;"></image>
				<view>外卖平台下单</view>
				</view>
			<view class="item">
				<image src="../../static/img/home/haoping.png"></image>
				<view>好评上传</view>
				</view>
			<view class="item">
				<image src="../../static/img/home/fanli.png"></image>
				<view>返利到账</view>
				</view>
		</view>
		
	</view>


</template>

<script>
	import shmilyDragImage from '@/components/shmily-drag-image/shmily-drag-image.vue'
	export default {
		components: {
			shmilyDragImage
		},
		data() {
			return {
				// 页面信息
				info: {},
				items: [{
						title: "抢购订单",
					},
					{
						title: "外卖平台下单",
					},
					{
						title: "好评上传",
					},
					{
						title: "返利到账",
					},
				],
				banners: [],
				imageList: [],
				isJieDanUser: false,
				activeSteps: -1,
				orderId: '',
				goodsId: '',
				latitude: '',
				longitude: '',
				isMyOrder: false,
				isLogin: false,
				recommendList1: [{
						iconImg: '../../static/img/home/qiangdan.png',
						title: '立即抢单'
					},
					{
						iconImg: '../../static/img/home/wmpt.png',
						title: '外卖平台下单'
					},
					{
						iconImg: '../../static/img/home/uoload.png',
						title: '订单上传'
					},
					{
						iconImg: '../../static/img/home/pinjian.png',
						title: '评鉴上传'
					}
				],
				recommendList: [{
						iconImg: '../../static/img/home/star.png',
						title: ''
					},
					{
						iconImg: '../../static/img/home/peitu.png',
						title: ''
					},
					{
						iconImg: '../../static/img/home/wenzi.png',
						title: ''
					}
				],
				btnType: '立即抢单',
				status: 1,
				id: 0,
				arr: [],
				showModal: true
			}
		},
		onLoad(e) {
			this.goodsId = e.goodsId;
			this.latitude = e.latitude;
			this.longitude = e.longitude;
			let token = this.$queue.getData('token');
			let userId = this.$queue.getData('userId');
			// if (!token) {
			// 	this.goLogin();
			// }

			// 订单审核提醒 202
			// 最新活动通知 204
			// 点评提醒 205
			// 活动反馈推送提醒 209
			let that = this;
			that.$Request.getT('/common/type/202').then(res => { //订单审核提醒
				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.arr.push(res.data.value)
					}
				}
			})
			that.$Request.getT('/common/type/204').then(res => { //最新活动通知
				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.arr.push(res.data.value)
					}
				}
			})
			that.$Request.getT('/common/type/205').then(res => { //点评提醒
				if (res.code == 0) {
					if (res.data && res.data.value) {
						that.arr.push(res.data.value)
					}
				}
			})
		},
		onShow() {
			// if (this.goodsId != '') {
			// 	this.initHelpOrder(this.goodsId);
			// }

			// let userId = this.$queue.getData('userId');
			// if (userId) {
			// 	//订阅
			// 	if(this.showModal) {
			// 		this.openMsg()
			// 	}
			// }
		},
		methods: {
			// 开启订阅消息
			openMsg() {
				var that = this
				wx.getSetting({
					withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
					success(ret) {
						// console.log(ret,'------------------')
						// console.log(Object.keys(ret.subscriptionsSetting.itemSettings).length)
						// if (JSON.stringify(ret.subscriptionsSetting.itemSettings).indexOf('accept')!=-1) {
						if (ret.subscriptionsSetting.itemSettings) {
							uni.setStorageSync('sendorderMsg', true)
							uni.openSetting({ // 打开设置页 
								success(rea) {
									console.log(rea.authSetting)
								}
							});
						} else { // 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
							uni.setStorageSync('sendorderMsg', false)
							uni.showModal({
								title: '提示',
								content: '为了更好的体验,请绑定消息推送',
								confirmText: '确定',
								cancelText: '取消',
								success: function(res) {
									if (res.confirm) {
										uni.requestSubscribeMessage({
											tmplIds: that.arr,
											success(re) {
												// console.log(re,'**********')
												var datas = JSON.stringify(re);
												if (datas.indexOf("accept") != -1) {
													console.log(re)
												}
											},
											fail: (res) => {
												console.log(res)
											}
										})
										that.showModal = false
									} else if (res.cancel) {
										that.showModal = true
									}
								}
							})
						}
					}
				})
			},
			fensiImage() {
				if (uni.getStorageSync('sendorderMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				let fensiImage = this.$queue.getData('fensiImage');
				//#ifndef H5
				uni.navigateTo({
					url: '/pages/public/webview?url=' + fensiImage
				});
				//#endif
				//#ifdef H5
				window.location.href = fensiImage;
				//#endif
			},
			goShareUser() {
				uni.navigateTo({
					url: '/pages/my/shareFriends'
				});
			},
			navigate(href, e) {
				// #ifdef H5
				window.location.href = href;
				//#endif

				//#ifdef APP-PLUS
				setTimeout(function() {
					plus.runtime.openURL(href);
				}, 500);
				// #endif
			},
			navigation(latitude, longitude, name) {
				// #ifdef APP-PLUS
				let url = "";
				if (plus.os.name == "Android") { //判断是安卓端
					plus.nativeUI.actionSheet({ //选择菜单
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "腾讯地图"
						}, {
							title: "百度地图"
						}, {
							title: "高德地图"
						}]
					}, function(e) {
						switch (e.index) {
							//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
							case 1:
								//注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
								url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
								break;
							case 2:
								url =
									`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
								break;
							case 3:
								url =
									`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							//plus.runtime.openURL(url,function(e){})调起手机APP应用
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				} else {
					// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
					// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
					//（如urlschemewhitelist:["iosamap","baidumap"]）  
					plus.nativeUI.actionSheet({
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "腾讯地图"
						}, {
							title: "百度地图"
						}, {
							title: "高德地图"
						}]
					}, function(e) {
						switch (e.index) {
							case 1:
								url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
								break;
							case 2:
								url =
									`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
								break;
							case 3:
								url =
									`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				}
				// #endif
				// #ifdef MP-WEIXIN
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude),
					success: function() {
						console.log('success');
					}
				});
				// #endif
			},
			goShop() {
				if (this.info.classify == 2) { //美团
					// #ifdef MP-WEIXIN
					uni.navigateToMiniProgram({
						appId: 'wx2c348cf579062e56',
						path: this.info.url,
						fail(res) {
							console.error(res)
						}
					})
					// #endif
				} else if (this.info.classify == 1) { //饿了么
					// #ifdef MP-WEIXIN
					uni.navigateToMiniProgram({
						appId: 'wxece3a9a4c82f58c9',
						path: this.info.url,
						fail(res) {
							console.error(res)
						}
					})
					// #endif
				}
			},
			initHelpOrder(goodsId) {
				this.$queue.showLoading('加载中...');
				let that = this;
				let userId = this.$queue.getData('userId') ? this.$queue.getData('userId') : 0;
				this.$Request.getT('/wm/selectGoodsDetails?goodsId=' + goodsId + '&userId=' + userId + '&latitude=' + this
					.latitude + '&longitude=' + this.longitude).then(res => {
					if (res.code == 0) {
						let image = res.goods.img.split(",");

						if (Date.parse(res.goods.endTime.replace('-', '/').replace('-', '/')) < Date.parse(
								new Date())) {
							console.log('这个已经过期了')
							this.status = 99;
						} else {
							this.status = res.status;
						}

						this.banners = image;
						if (res.orders) {
							this.orderId = res.orders.orderId;
						}
						res.goods.distance = this.setMorKm(res.goods.distance);
						this.info = res.goods;
						uni.hideLoading();
					} else {
						this.$queue.showToast(res.msg);
						setTimeout(d => {
							uni.hideLoading();
							uni.navigateBack();
						}, 1000);
					}
				});
			},
			setMorKm(m) {
				var n = ''
				if (m) {
					if (m >= 1000) {
						n = (m / 1000).toFixed(0) + 'km'
					} else {
						n = parseInt(m) + 'm'
					}
				} else {
					n = '0m'
				}
				return n
			},
			// 联系
			kefu() {
				if (uni.getStorageSync('sendorderMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				uni.navigateTo({
					url: '/pages/my/customer'
				});
			},
			// 立即下单 打开美团外卖
			btns() {
				if (uni.getStorageSync('sendorderMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				this.$queue.showLoading('抢单中...');
				let userId = this.$queue.getData('userId');
				this.$Request.postT('/wm/insertOrders?goodsId=' + this.goodsId + '&userId=' + userId).then(res => {
					if (res.code == 0) {
						this.$queue.showToast('抢单成功！');
						this.initHelpOrder(this.goodsId);
						setTimeout(d => {
							if (this.info.classify == 2) { //美团
								// #ifdef MP-WEIXIN
								uni.navigateToMiniProgram({
									appId: 'wx2c348cf579062e56',
									path: this.info.url,
									fail(res) {
										console.error(res)
									}
								})
								// #endif
							} else if (this.info.classify == 1) { //饿了么
								// #ifdef MP-WEIXIN
								uni.navigateToMiniProgram({
									appId: 'wxece3a9a4c82f58c9',
									path: this.info.url,
									fail(res) {
										console.error(res)
									}
								})
								// #endif
							}
						}, 500);
					} else {
						uni.hideLoading();
						this.$queue.showToast(res.msg);
					}
				});
			},
			// 放弃任务
			fangqi(id) {
				if (uni.getStorageSync('sendorderMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				uni.showModal({
					title: '温馨提示',
					content: '您是否要放弃当前任务？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: d => {
						var that = this;
						if (d.confirm) {
							console.log('用户点击确定');
							that.$queue.showLoading('提交中...');
							that.$Request.postT('/wm/abandonOrders?orderId=' + id).then(res => {
								if (res.code === 0) {
									that.$queue.showToast('已放弃当前任务！');
									that.initHelpOrder(that.goodsId);
									uni.hideLoading();
								} else {
									that.$queue.showToast(res.msg);
									uni.hideLoading();
								}
							})
						}
					}
				});
			},
			// 上传凭证
			shangchuan(id) {
				if (uni.getStorageSync('sendorderMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				uni.navigateTo({
					url: '/pages/order/release?orderId=' + id
				});
			},
			callContact(phone) {
				if (uni.getStorageSync('sendorderMsg')) {
					uni.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(re,'**********')
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								console.log(re)
							}
						},
						fail: (res) => {
							console.log(res)
						}
					})
				}
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			goLogin() {
				this.$queue.setData('href', '/pages/index/taskDetail?helpOrderId=' + this.helpOrderId);
				uni.navigateTo({
					url: '/pages/public/login'
				});
			},
			goPageLogin(url) {
				let token = this.$queue.getData('token');
				if (token) {
					if (uni.getStorageSync('sendMyMsg')) {
						uni.requestSubscribeMessage({
							tmplIds: this.arr,
							success(re) {
								// console.log(re,'**********')
								var datas = JSON.stringify(re);
								if (datas.indexOf("accept") != -1) {
									console.log(re)
								}
							},
							fail: (res) => {
								console.log(res)
							}
						})
					}
					console.log('是否有token')
					uni.navigateTo({
						url
					})
				} else {
					this.goLogin();
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		margin: 0;
		padding: 0;
		background-color: #F6F6F6;
	}

	.bill image {
		width: 100%;
		height: 208px;
		display: block;
	}

	.billtextbox {
		width: 100%;
		height: 60px;
		display: flex;
		align-items: center;
		background: linear-gradient(48deg, #FF5656 0%, #FF9F74 100%);
	}

	.billtext {
		width: 100%;
		margin: 0 16px;
	}



	.billtext .left {
		width: 50%;
		height: 23px;
		background-color: #000000;
		font-size: 14px;
		font-family: PingFang SC;
		color: #FAD19C;
		float: left;
		margin-top: 3px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10px;
	}

	.billtext .left image {
		width: 12px;
		height: 12px;
		float: left;
		margin-top: 2px;
		margin-right: 2px;
	}

	.middel {
		width: 0px;
		height: 31px;
		border: 1px solid #FFFFFF;
		float: left;
		margin: 0 7px;
		margin-top: 6rpx;
	}

	.billtext .right {
		font-size: 15px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.text2 {
		float: left;
		width: 50%;
	}

	.shop {
	
		margin: 0 16px;
		height: 152px;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 8px;
	}

	.shoptop {
		height: 94px;
		width: 90%;
		margin: 0 auto;
	}

	.shoptext {
		height: 57px;
		padding-top: 20px;
	}

	.shoptext image {
		width: 65px;
		height: 65px;

	}

	.shoptext .right {
		float: left;
		margin-left: 10rpx;
	}

	.shop .bottom {
		height: 70px;
		width: 90%;
		margin: 0 auto;
		display: flex;
		margin-top: 30rpx;
	}

	.shop .bottom .text {
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF4848;
	}

	.line {
		width: 316px;
		height: 1px;
		border: 1px solid rgba(112, 112, 112, 0.10980392156862745);
		margin: 0 auto;
	}

	

	.welfare  {
		margin: 0 16px;
		height: 138px;
		margin-top: 16px;
	}

	.welfare .top {
		color: #FAD19C;
		display: flex;
		height: 38px;
		align-items: center;
		
	}

	.welfare .button {
		margin-left: 70px;
		width: 100px;
		height: 24px;
		background: #FAD19C;
		border-radius: 12px;
		font-size: 11px;
		font-family: PingFang SC;
		color: #000000;
		padding-top:5px;
		padding-left: 25px;
	}

	.content .bottom {
		height: 100px;
		display: flex;
		background-color: #FFFFFF;
	}

	.bottom .circle {
		width: 50px;
		height: 50px;
		background: #FF4848;
		border-radius: 50%;
		margin-left: 10rpx;
	}

	.bottom .jieshao {
		margin-top: 5px;
		margin-left: 10px;
	}

	.bottom .add {
		width: 48px;
		height: 19px;
		background: linear-gradient(141deg, #FF4848 0%, #FF2929 100%);
		opacity: 1;
		border-radius: 10px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		padding-left: 12px;
		padding-top: 2px;
		margin-left: 50px;
		margin-top: 10px;
	}

	// 底部按钮
	.footers {
		width: 100%;
		height: 50px;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		padding: 0 20upx;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.payinfo {
			width: 152px;
			height: 32px;
			background: linear-gradient(127deg, #FF8A6B 0%, #FF2929 100%);
			opacity: 1;
			border-radius: 17px 0px 0px 15px;
			font-size: 12px;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 32px;
			text-align: center;
		}

		.payinfo1 {
			width: 25%;
			display: inline-block;
		}

		.tui-button-primar {
			width: 60%;
			height: 78upx;
			line-height: 78upx;
			opacity: 1;
			background: #ffc705;
			border-radius: 16rpx;
		}
	}

	.procedure {
		font-size: 16px;
		font-family: PingFang SC;
		font-weight: 600;
		color: #000000;
		margin-top: 18rpx;
		margin-bottom: 8rpx;
		margin-left: 32rpx;
	}

	.procedurepictrue {
		height: 65px;
		background-color: #FFFFFF;
		margin: 0 24px;
		margin-bottom: 60px;
		display: flex;
		justify-content: space-around;
	}
	
	.procedurepictrue image{
		width: 22.78px;
		height: 30.03px;
		margin-top: 10px;
		margin-left:10px ;
	}
	
	.procedurepictrue .item{
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 600;
	}


</style>