moxuan_takeaway_user/pages/order/takefood.vue

<template>
	<view class="pages" v-if="XCXIsSelect=='是'">
		<!-- 余额 -->
		<view class="tosend" v-if="dataDet">
			<view class="tosend_text" v-if="dataDet.status == 3&&dataDet.orderType==1">待取餐</view>
			<view class="tosend_text" v-if="dataDet.status == 3&&dataDet.orderType==2">配送中</view>
			<view class="tosend_text" v-if="dataDet.status == 4">已完成</view>
			<view class="tosend_text" v-if="dataDet.status == 5">已取消</view>
			<view class="tosend_text" v-if="dataDet.status == 6">制作中</view>
			<view class="tosend_text" v-if="dataDet.status == 7">待接单</view>
			<view class="tosend_text" v-if="dataDet.status == 8">已取消</view>
			
			<view class="flex justify-center" v-if="dataDet.orderType==1" style="width: 100%;height: 140rpx;margin-bottom: 30rpx;">
				<view class="flex justify-center" style="width: 94%;height: 100%;border-radius: 18rpx;background-color: #ffffff;padding: 3%;">
					<view class="flex justify-between align-center" style="width: 100%;height: 100%;">
						<image :src="shopInfo.shopCover?shopInfo.shopCover:'../../static/logo.png'" style="width: 110rpx;height: 110rpx;border-radius: 8rpx;" mode=""></image>
						<view class="flex flex-wrap align-center" style="width: 80%;height: 100%;">
							<view class="" style="width: 100%;font-size: 30rpx;" @click="call">
								<text style="font-weight: bold;">{{shopInfo.shopName?shopInfo.shopName:''}}</text>
								<text style="margin-left: 10rpx;font-weight: bold;">{{shopInfo.phones?shopInfo.phones:''}}</text>
								<u-icon name="phone" size="30" color="#999999" style=""></u-icon>
							</view>
							<view class="flex align-center" style="width: 100%;color: #999999;font-size: 24rpx;" @click="goMaps">
								<u-icon name="map" size="30" color="#999999" style="margin-right: 10rpx;"></u-icon>
								{{shopInfo.detailedAddress?shopInfo.detailedAddress:''}}
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="tosend_header">
				<!-- 排序 -->
				<view class="cont_two_top" v-if="dataDet.status == 3&&dataDet.orderType==1">
					<view class="cont_two_top_le">取餐号码</view>
					<!-- <view class="cont_two_top_ri">制作中</view> -->
				</view>
				<view v-if="dataDet.status == 3&&dataDet.orderType==1" class="cont_two_text">{{dataDet.orderCode}}
				</view>
				<view v-if="dataDet.status == 3&&dataDet.orderType==1" class="cont_two_text2">
					前面还有<text>{{dataDet.countOrder}}</text>个订单</view>
				
				<!-- 商品列表 -->
				<view v-if="dataDet" class="tosend_header_food" v-for="(item,index) in dataDet.orderGoodsList"
					:key='index'>
					<view class="tosend_header_food_le">
						<image :src="item.goodsPicture[0]" style="border-radius: 10rpx;" mode=""></image>
					</view>
					<view class="flex-sub margin-left-sm">
						<view class="flex justify-between align-center">
							<view class="text-lg text-bold text-black">{{item.goodsName}}</view>
							<view class="text-lg text-bold text-black"><text class="text-sm">¥</text>{{item.goodsPrice}}
							</view>
						</view>
						<view class="flex justify-between align-center text-gray">
							<view v-if="item.skuMessage">{{item.skuMessage}}</view>
							<view>X{{item.goodsNum}}</view>
						</view>
						<view class="flex justify-between align-center text-gray" v-if="item.goodsPack">
							<view>打包费</view>
							<view>￥{{item.goodsPack}} / 份</view>
						</view>
					</view>
				</view>
				<view class="tosend_header_do " v-if="dataDet.couponMoney>0">
					<view>优惠券</view>
					<view class="tosend_header_do_ri">-￥{{dataDet.couponMoney}}</view>
				</view>
				<view class="tosend_header_do do_bot" v-if="dataDet.errandMoney>0&&dataDet.orderType==2">
					<view>跑腿费</view>
					<view class="tosend_header_do_ri">￥{{dataDet.errandMoney}}</view>
				</view>
				<view class="tosend_header_do">
					<view class="tosend_header_do_le2">实付</view>
					<view class="tosend_header_do_ri2"><text>￥</text>{{dataDet.payMoney}}</view>
				</view>
			</view>
			<view class="text-center" v-if="dataDet">
				<map v-if="dataDet.status == 3 && latitude && longitude" id="map" @tap="goMap"
					style="width: 95%; height: 300rpx;margin: 20rpx auto 0;" :markers="markers" :latitude="latitude"
					:longitude="longitude"></map>
			</view>

			<!-- 骑手信息 -->
			<view class="rider_box" v-if="dataDet&&(dataDet.status == 3||dataDet.status == 4)&&dataDet.riderUserId">
				<view class="flex justify-between align-center padding">
					<view style="font-size: 31rpx;color: black;">联系骑手</view>
					<image @click="complaint" src="../../static/images/order/tousu.png"
						style="width: 43rpx;height: 39rpx;" mode=""></image>
				</view>
				<view>
					<u-line color="#F2F2F2" />
				</view>
				<view style="padding: 20rpx 25rpx;display: flex;justify-content: space-between;align-items: center;">
					<view style="display: flex;">
						<view class="rider_left">
							<image :src="dataDet.riderAvatar"></image>
						</view>
						<view style="margin-left: 10rpx;color: #333333;">
							<view>{{dataDet.riderUserName}}</view>
							<view>{{dataDet.riderPhone1}}</view>
						</view>
					</view>
					<view class="phone" @click="bindphone(dataDet.riderPhone)">联系TA</view>
				</view>
			</view>
			<!-- 其他信息 -->
			<view class="tosend_cont" v-if="dataDet">
				<view class="tosend_header_text">
					<text>订单信息</text>
				</view>
				<view class="tosend_cont_infor" v-if="dataDet.orderType==1">
					<view class="tosend_cont_infor_le">取餐号码</view>
					<view class="tosend_cont_infor_ri">{{dataDet.orderCode}}</view>
				</view>
				<view class="tosend_cont_infor">
					<view class="tosend_cont_infor_le">订单编号</view>
					<view class="tosend_cont_infor_ri">{{dataDet.orderNumber}}
						<u-icon @click="copy(dataDet.orderNumber)" name="order" style="margin-left: 6rpx;" size="32">
						</u-icon>
					</view>
				</view>
				<view class="tosend_cont_infor">
					<view class="tosend_cont_infor_le">下单时间</view>
					<view class="tosend_cont_infor_ri">{{dataDet.payTime}}</view>
				</view>
				<view class="tosend_cont_infor">
					<view class="tosend_cont_infor_le">支付方式</view>
					<view class="tosend_cont_infor_ri" v-if="dataDet.payType==1">微信支付</view>
					<view class="tosend_cont_infor_ri" v-if="dataDet.payType==2">余额支付</view>
				</view>
				<view class="tosend_cont_infor" v-if="dataDet.orderType==2">
					<view class="tosend_cont_infor_le">联系人</view>
					<view class="tosend_cont_infor_ri">{{dataDet.address.userName}}</view>
				</view>
				<view class="tosend_cont_infor" v-if="dataDet.orderType==2">
					<view class="tosend_cont_infor_le">联系方式</view>
					<view class="tosend_cont_infor_ri">{{dataDet.address.userPhone}}</view>
				</view>
				<view class="tosend_cont_infor" v-if="dataDet.orderType==2">
					<view class="tosend_cont_infor_le">详细地址</view>
					<view class="tosend_cont_infor_ri">
						{{dataDet.address.province}}{{dataDet.address.city}}{{dataDet.address.district}}{{dataDet.address.addressDetail}}
					</view>
				</view>
				<view class="tosend_cont_infor" v-if="dataDet.remark">
					<view class="tosend_cont_infor_le">订单备注</view>
					<view class="tosend_cont_infor_ri">
						{{dataDet.remark}}
					</view>
				</view>
				
			</view>
		</view>
		<view style="width: 100rpx;height: 100rpx;position: fixed;bottom: 100rpx;right: 70rpx;" v-if="dataDet">
			<image src="../../static/images/order/kefu.png" style="width: 100%;height: 100%;" @click="goChat()" mode="">
			</image>
			<view class="shopxiaoix" v-if="RiderUnreadCount>0">{{RiderUnreadCount}}</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				dataDet: '',
				markers: [], //标记点
				latitude: '',
				longitude: '',
				RiderUnreadCount: 0,
				XCXIsSelect: '是',
				shopId:'',
				shopInfo:{},
			}
		},
		onLoad(option) {
			this.XCXIsSelect = this.$queue.getData('XCXIsSelect');
			if (this.XCXIsSelect == '否') {
				uni.setNavigationBarTitle({
					title: '隐私政策'
				});
			} else {
				uni.setNavigationBarTitle({
					title: '订单详情'
				});
			}
			let that = this
			uni.showLoading({
				title: '加载中...'
			})
			that.orderId = option.orderId
			that.shopId = option.shopId
			uni.getLocation({
				type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				success: function(res) {
					that.lat = res.latitude;
					that.lng = res.longitude;
					that.getDataDet()
				},fail(e) {
					uni.hideLoading();
					uni.showModal({
						title: '温馨提示',
						content: '您的定位权限未开启，请开启后再来操作吧！',
						showCancel: true,
						cancelText: '取消',
						confirmText: '确认',
						success: res => {
							if(res.confirm){
								uni.openSetting({ // 打开设置页
									success(rea) {
										console.log(rea.authSetting)
									}
								});
							}
						}
					});
				}
			});
			this.getRiderUnreadCount()
			this.getShopInfo()
		},
		created() {
			this.RiderUnreadCount = setInterval(() => {
				this.getRiderUnreadCount()
			}, 5000)
		},
		methods: {
			// 点击调起地图查看位置
			goMaps() {
				let that = this;
				let lati = parseFloat(that.shopInfo.shopLat);
				let longi = parseFloat(that.shopInfo.shopLng);
				uni.authorize({
					scope: 'scope.userLocation',
					success(res) {
						uni.openLocation({
							name: that.shopInfo.shopName,
							latitude: lati,
							longitude: longi,
							success: function() {}
						});
					},
					fail(err) {}
				});
			},
			// 打电话
			call() {
				uni.makePhoneCall({
					phoneNumber: this.shopInfo.phone
				});
			},
			//获取店铺信息
			getShopInfo(){
				let data ={
					shopId:this.shopId
				}
				this.$Request.get("/app/shop/selectShopMessage", data).then(res => {
					if(res.code == 0 && res.data){
						this.shopInfo = res.data
						let phoneNumber = this.shopInfo.phone.toString()	//先强制转换成字符串类型
						this.shopInfo.phones = phoneNumber.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
					}
				})
			},
			getDataDet() {
				let data = {
					orderId: this.orderId
				}
				this.$Request.get("/app/order/selectOrderById", data).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						this.dataDet = res.data
						// this.dataDet.goodsMessage = JSON.parse(this.dataDet.goodsMessage)

						this.dataDet.orderCode = this.dataDet.orderCode.substring(this.dataDet.orderCode.length -
							3, this.dataDet.orderCode.length)
						this.dataDet.orderGoodsList.forEach(res => {
							res.goodsPicture = res.goodsPicture.split(',')
						})
						if (this.dataDet.riderPhone) {
							this.dataDet.riderPhone1 = this.dataDet.riderPhone.substring(0, 3) + "****" + this
								.dataDet.riderPhone.substring(7, 11);
						}

						this.dataDet.address = this.dataDet.address ? JSON.parse(this.dataDet.address) : ''
						console.log(this.dataDet.address)
						if (this.dataDet.riderUserId) {
							this.getLocation(this.dataDet.riderUserId)
						}
					}
				});
			},
			goChat() {
				uni.navigateTo({
					url: '/pages/index/shop/im?ordersId=' + this.orderId
				})
			},
			getLocation(e) {
				let data = {
					riderUserId: e,
					lat: this.lat,
					lng: this.lng
				}
				this.$Request.getT('/timedtask/selectRiderLocation', data).then(res => {
					if (res.code === 0) {

						console.log(res.data, '经纬度')
						this.latitude = res.data.riderLocation.lat;
						this.longitude = res.data.riderLocation.lng;

						this.markers = [{
							id: 1,
							latitude: res.data.riderLocation.lat,
							longitude: res.data.riderLocation.lng,
							iconPath: '../../static/images/order/rider.png',
							width: '40',
							height: '40'
						}]
					}
				});
			},
			goMap() {
				uni.navigateTo({
					url: '/pages/order/waimaiMap?orderId=' + this.orderId
				})
			},
			// 拨打电话
			bindphone(e) {
				console.log(e)
				uni.makePhoneCall({
					phoneNumber: e
				});
			},
			complaint() {
				uni.navigateTo({
					url: '/pages/order/complaint/complaint?indentNumber=' + this.dataDet.indentNumber +
						'&indentType=5'
				})
			},
			copy(e) {
				uni.setClipboardData({
					data: e,
					success: () => {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
			},
			getRiderUnreadCount() {
				let that = this
				let data = {
					ordersId: that.orderId
				}
				that.$Request.getT("/app/ordersChat/selectUserUnreadCount", data).then(res => {
					if (res.code == 0) {
						if (res.data > 0) {
							if (that.RiderUnreadCount != res.data) {
								that.aplayAudio()
								that.RiderUnreadCount = res.data
							}
						} else {
							that.RiderUnreadCount = 0
						}
					}
				});
			},
			// 语音播报
			aplayAudio() {
				// const audio = document.getElementById('audio')

				// audio.play()
				// console.log('语音提示')
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				innerAudioContext.src =
					'https://pw.xianmxkj.com/file/uploadPath/2022/01/19/0753211f78d718d44ee6372e33eae9ee.mp3';
				innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
				innerAudioContext.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
			},
		}
	}
</script>

<style scoped>
	/* 余额 */
	.tosend {
		width: 100%;
		height: 280rpx;
		background: -webkit-linear-gradient(top, #FCD202, #F5F5F5);
	}

	.tosend_text {
		padding: 3% 3% 4%;
		font-size: 48rpx;
		font-weight: 800;
		color: #333333;
	}

	.tosend_header {
		width: 94%;
		background-color: #FFFFFF;
		margin: 0 auto;
		border-radius: 18rpx;
		padding: 3%;
	}

	/* 排序 */
	.cont_two_top {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.cont_two_top_le {
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
	}

	.cont_two_top_ri {
		padding: 6rpx 10rpx;
		text-align: center;
		background: rgba(255, 19, 10, 0.2);
		font-size: 24rpx;
		border: 2rpx solid #FF130A;
		color: #FF130A;
		opacity: 0.6;
		border-radius: 8rpx;
	}

	.cont_two_text {
		font-size: 56rpx;
		text-align: center;
		font-weight: bold;
		color: #333333;
		margin: 5% 0;
		line-height: 32rpx;
	}

	.cont_two_text2 {
		font-size: 30rpx;
		width: 100%;
		font-weight: 500;
		color: #333333;
		text-align: center;
		padding-bottom: 4%;
		line-height: 32rpx;
		border-bottom: 1rpx solid #E6E6E6;
	}

	.cont_two_text2 text {
		color: #FF130A;
	}

	/* 商品列表 */
	.tosend_header_text {
		font-weight: 800;
		color: #333333;
		line-height: 2;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.tosend_header_food {
		width: 100%;
		display: flex;
		margin-top: 3%;
	}

	.tosend_header_food_le {
		width: 15%;
	}

	.tosend_header_food_le image {
		width: 110rpx;
		height: 110rpx;
	}

	.tosend_header_food_ce {
		margin: 0 0 0 4%;
		width: 57%;
	}

	.tosend_header_food_ri {
		text-align: right;
		width: 25%;
	}

	.tosend_header_food_text {
		font-size: 34rpx;
		font-weight: 500;
		color: #333333;
		line-height: 1.8;
	}

	.tosend_header_food_text text {
		font-size: 25rpx;
	}

	.tosend_header_food_text2 {
		font-size: 30rpx;
		font-weight: 500;
		color: #999999;
	}

	.do_top {
		padding-top: 3%;
	}

	.do_bot {
		padding-bottom: 3%;
		border-bottom: 2rpx solid #E6E6E6;
	}

	.tosend_header_do {
		width: 100%;
		color: #333333;
		font-size: 30rpx;
		display: flex;
		line-height: 1.5;
	}

	.tosend_header_do view {
		flex: 1;
	}

	.tosend_header_do_ri {
		text-align: right;
	}

	.tosend_header_do_le2 {
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		padding-top: 1.5%;
	}

	.tosend_header_do_ri2 {
		text-align: right;
		color: #EA0000;
		font-size: 40rpx;
	}

	.tosend_header_do_ri2 text {
		font-size: 30rpx;
	}

	/* 其他信息 */
	.tosend_cont {
		width: 94%;
		background-color: #FFFFFF;
		margin: 3% auto;
		border-radius: 18rpx;
		padding: 3%;
	}

	.tosend_cont_infor {
		display: flex;
		margin-top: 3%;
	}

	.tosend_cont_infor_le {
		flex: 1;
		color: #999999;
	}

	.tosend_cont_infor_ri {
		flex: 2;
		text-align: right;
		color: #333333;
	}

	.tosend_cont_text {
		text-align: right;
	}

	/* 联系骑手 */
	.rider_box {
		width: 95%;
		margin: 0 auto;
		background: #ffffff;
		margin-top: 20rpx;
		border-radius: 10rpx;

	}

	.rider_left image {
		width: 80rpx;
		height: 85rpx;
		border-radius: 60%;
	}

	.phone {
		background: #FD6416;
		color: #ffffff;
		padding: 8rpx 15rpx;
		border-radius: 13rpx;
		font-size: 24rpx;
	}

	.shopxiaoix {
		background: red;
		color: #ffffff;
		width: auto;
		padding: 5rpx 12rpx;
		height: auto;
		text-align: center;
		border-radius: 30rpx;
		position: absolute;
		top: -4rpx;
		right: -4rpx;
	}
</style>