zh_order_food_xcx/pages-order/run-errands-info.vue

<template>
	<view class="flex-common-css iPhone-bottom box-border-box">
		<Nav title=" " leftIconColor="#333" titleColor="#333" bgckgroundBox='transparent'></Nav>
		<image class="bg-img" src="@/static/img/order/bg.png" mode=""></image>
		<view class="p-24-24-0 box-border-box">
			<view class="mb-24" v-if="infoData.order_status == 1">
				<view class="fs-40 fc-3 mb-8">
					{{infoData.order_status_str}}，剩余{{time.m}}:{{time.s}}
				</view>
				<view class="fs-24 fc-FB3D03">
					10分钟内未支付，订单将自动取消
				</view>
			</view>
			<view class="mb-24" v-else>
				<view class="fs-48 fc-3 fw-600">
					{{infoData.order_status_str}}
				</view>
			</view>
			<view class="bgc-f b-rad-20 p-24 box-border-box">
				<view class="p-b-20 mb-24 b-b-F9F9F9 fs-32 fc-3" v-show="infoData.order_status == 1">
					请尽快支付
				</view>
				<view class="p-b-20 mb-24 b-b-F9F9F9 fs-32 fc-3"
					v-if="infoData.order_status == 4 || infoData.order_status == 5 || infoData.order_status == 6">
					感谢你对君子校园的信任，期待你再次光临
				</view>
				<view class="align-items-center flex-wrap-wrap">
					<view class="w-33 flex-direction align-items-center" @click="pay"
						v-show="infoData.order_status == 1">
						<image class="mb-4 icon" src="@/static/img/order/qzf.png" mode=""></image>
						<view class="fs-24 fc-41ABF5">
							去支付
						</view>
					</view>
					<view @click="goToUrl" class="w-33 flex-direction align-items-center"
						v-show="infoData.order_status == 4 || infoData.order_status == 5 || infoData.order_status == 6">
						<image class="mb-4 icon" src="@/static/img/order/zlyd.png" mode=""></image>
						<view class="fs-24 fc-41ABF5">
							再来一单
						</view>
					</view>
					<view class="w-33 flex-direction align-items-center">
						<button class="item-box-button" open-type="contact" :bindcontact="handleContact"></button>
						<image class="mb-4 icon" src="@/static/img/order/lxkf.png" mode=""></image>
						<view class="fs-24 fc-3">
							联系客服
						</view>
					</view>
					<view class="w-33 flex-direction align-items-center" v-show="infoData.order_status == 2"
						@click="cancelOrder">
						<image class="mb-4 icon" src="@/static/img/order/qxdd.png" mode=""></image>
						<view class="fs-24 fc-3">
							取消订单
						</view>
					</view>
				</view>
			</view>
		</view>
		<scroll-view :scroll-y="true" class="scroll-view-css p-24 box-border-box" @scrolltolower="scrolltolower">
			<view class="bgc-f b-rad-20 p-24 box-border-box mb-20">
				<view class="align-items-center mb-24">
					<image class="shops-img" :src="infoData.errands.img" mode="aspectFit"></image>
					<view class="w-420 fc-3 fs-32 fw-600 text-overflow-ellipsis-one">
						{{infoData.errands.name}}
					</view>
				</view>
				<view class="mb-24">
					<view class="content-b b-rad-20 fs-28 fc-0 bgc-F6F6F6 p-24 box-border-box">
						{{infoData.serve_desc}}
					</view>
				</view>
				<view class="align-items-center mb-24">
					<view class="fs-32 fw-600 fc-3 mr-12 flex-shrink0 w-64">
						服务地址
					</view>
					<view class="fs-28 fc-3">
						{{infoData.serve_address}}
					</view>
				</view>
				<view class="align-items-center mb-24 p-b-20 b-b-999">
					<view class="fs-32 fw-600 fc-3 mr-12 flex-shrink0 w-64">
						送达地址
					</view>
					<view class="fs-28 fc-3">
						{{infoData.address_id>0?infoData.school_name + infoData.dorm_name + infoData.address:'无'}}
					</view>
				</view>
				<view class="align-items-center flex-justify-space mb-24">
					<view class="fs-28 fc-3">
						基础服务费
					</view>
					<view class="fs-32 fc-3">
						￥ {{infoData.serve_money}}
					</view>
				</view>
				<view class="align-items-center flex-justify-space mb-24" v-if="infoData.item">
					<view class="fs-28 fc-3">
						{{infoData.item.goods_name}}({{infoData.item.goods_attr}})
					</view>
					<view class="fs-32 fc-3">
						￥ {{infoData.item.goods_price}}
					</view>
				</view>
				<view class="align-items-center flex-justify-space mb-24" v-if="infoData.is_up === 1">
					<view class="fs-28 fc-3">
						上楼加价
					</view>
					<view class="fs-32 fc-3">
						￥ {{infoData.up_money}}
					</view>
				</view>
				<view class="align-items-center flex-justify-space mb-24">
					<view class="fs-28 fc-3">
						打赏金额
					</view>
					<view class="fs-32 fc-3">
						￥ {{infoData.reward_money?(Number(infoData.reward_money)).toFixed(2):'0.00'}}
					</view>
				</view>
				<!-- 				<view class="align-items-center flex-justify-space pb-36 b-b-F9F9F9 mb-22">
					<view class="align-items-center">
						<image class="mr-6 icon-right" src="@/static/img/order/yhq.png" mode=""></image>
						<view class="fs-28 fc-3">
							优惠券
						</view>
					</view>
					<view class="fs-32 fc-FB3D03">
						-￥{{infoData.coupon_money}}
					</view>
				</view> -->
				<view class="align-items-center flex-justify-end">
					<view class="fs-28 fc-3">
						金额
					</view>
					<view class="fs-24 fw-600 fc-3">
						￥
					</view>
					<view class="fs-36  fw-600 fc-3">
						{{infoData.pay_money}}
					</view>
				</view>
			</view>
			<view class="bgc-f b-rad-20 p-24 box-border-box mb-20">
				<view class="display-flex flex-justify-space mb-26">
					<view class="fs-28 fc-9">
						期望时间
					</view>
					<view class="fs-28 fc-3 w-480 text-align-right">
						{{infoData.serve_time}}
					</view>
				</view>
				<view class="display-flex flex-justify-space mb-26">
					<view class="fs-28 fc-9 flex-shrink0">
						图片介绍
					</view>
					<view class="align-items-center images-box flex-wrap-wrap" v-if="infoData.images.length>0">
						<image class="images-img" v-for="(item,index) in infoData.images" :src="item" mode="aspectFit"
							@click="lookFinishImage(1,infoData.images,index)"></image>
					</view>
					<view v-else class="">
						无
					</view>
				</view>
				<view class="display-flex flex-justify-space pb-20 mb-26">
					<view class="fs-28 fc-9">
						骑手信息
					</view>
					<view class="fs-28 fc-3 w-480 text-align-right">
						{{infoData.rider.rider_name?infoData.rider.rider_name:'无'}}{{infoData.rider.phone || ''}}
					</view>
				</view>
				<view class="display-flex flex-justify-space mb-26">
					<view class="fs-28 fc-9">
						订单编号
					</view>
					<view class="align-items-center flex-justify-end">
						<view class="fs-28 fc-3 w-480 mr-8 text-align-right">
							{{infoData.order_sn}}
						</view>
						<image class="icon-fz" src="@/static/img/order/fz.png" mode="" @click="copy(infoData.order_sn)">
						</image>
					</view>
				</view>
				<view class="display-flex flex-justify-space mb-26">
					<view class="fs-28 fc-9">
						下单时间
					</view>
					<view class="fs-28 fc-3 w-480 text-align-right">
						{{infoData.created_at}}
					</view>
				</view>
				<view class="display-flex flex-justify-space mb-26">
					<view class="fs-28 fc-9">
						支付方式
					</view>
					<view class="fs-28 fc-3 w-480 text-align-right">
						{{infoData.pay_type_str}}
					</view>
				</view>
				<view class="display-flex flex-justify-space mb-26" v-if="infoData.order_status == 4">
					<view class="fs-28 fc-9">
						送达图片
					</view>
					<view class="align-items-center images-box flex-wrap-wrap" v-if="infoData.finish_image.length>0">
						<image class="images-img" v-for="(item,index) in infoData.finish_image" :src="item" mode="aspectFit"
							@click="lookFinishImage(2,infoData.finish_image,index)"></image>
					</view>
					<view v-else class="">
						无
					</view>
<!-- 					<view class="fs-28 fc-3 w-480 text-align-right fc-41ABF5"
						@click="lookFinishImage(2,infoData.finish_image)">
						点击查看
					</view> -->
				</view>
				<view class="display-flex flex-justify-space mb-26" v-if="infoData.order_status == 4">
					<view class="fs-28 fc-9">
						完成时间
					</view>
					<view class="fs-28 fc-3 w-480 text-align-right">
						{{infoData.finish_time}}
					</view>
				</view>
			</view>
		</scroll-view>
		<uni-popup ref="popupReason" type="bottom" :is-mask-click="false" background-color="#fff"
			border-radius="10px 10px 0 0">
			<view class="popup-reason-box flex-direction">
				<view class="text-align-center fs-38 fw-600 fc-3 mb-18">
					选择取消原因
				</view>
				<picker-view @change="bindChange" class="picker-view flex-1" :immediate-change='true'>
					<picker-view-column>
						<view class="picker-view-item" v-for="(item,index) in refundReason" :key="index">
							{{item.refund_msg}}
						</view>
					</picker-view-column>
				</picker-view>
				<view class="align-items-center flex-justify-space plr-24 box-border-box">
					<view class="flex-1 mr-20 pop-b text-align-center fs-36 b-r-ccc" @click="popCancel">
						取消
					</view>
					<view class="flex-1 pop-b text-align-center bgc-41ABF5 fc-f fs-36" @click="popSure">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		commonRefundReason
	} from "@/api/common.js"
	import {
		errandsOrderInfo,
		errandsOrderCancel
	} from "@/api/errandsOrder.js"
	import tools from "@/service/tools";
	export default {
		components: {},
		data() {
			return {
				goodsData: [{
					name: '1'
				}, {
					name: '2'
				}],
				goodsShow: true,
				infoData: {},
				time: {
					day: '',
					h: "",
					m: '',
					s: '',
				},
				isAJAX: false,
				address_id: '',
				refund_msg: '', // 退款理由
				refundReason: [] //退款原因
			};
		},
		onLoad(data) {
			if (data) {
				// console.log(data);
				this.errandsOrderInfo(data.orderId)
			}
		},
		mounted() {},
		onUnload() {
			const takeOutData = {}
			errandsOrderInfo({
				order_id: this.infoData.id
			}).then((res) => {
				if (res.code == 1) {
					takeOutData.id = this.infoData.id
					takeOutData.order_status = res.data.order_status
					takeOutData.order_status_str = res.data.order_status_str
					uni.$emit('takeOutData', takeOutData)
				}
			})
		},
		methods: {
			popCancel() {
				// 退款取消
				this.$refs.popupReason.close()
			},
			popSure() {
				// 退款确认
				if (this.isAJAX) {
					return
				}
				this.isAJAX = true;
				errandsOrderCancel({
					order_id: this.infoData.id,
					refund_msg: this.refund_msg
				}).then((res) => {
					if (res.code == 1) {
						tools.success(res.msg)
						this.$refs.popupReason.close()
						setTimeout(() => {
							this.errandsOrderInfo(this.infoData.id)
						}, 1500)
						this.isAJAX = false;
					} else {
						tools.error(res.msg)
						this.isAJAX = false;
					}
				})
			},
			bindChange(e) {
				let num = e.detail.value[0]
				this.refund_msg = this.refundReason[num].refund_msg
			},
			lookFinishImage(type, img, index) {
				if (type === 1) {
					tools.lookBigImg(index, img)
				} else {
					tools.lookBigImg(1, img)
				}
			},
			copy(value) {
				uni.setClipboardData({
					data: value,
					success() {
						tools.success('复制成功')
					},
					fail() {
						tools.error("复制失败")
					}
				})
			},
			goToUrl() {
				// 再来一单
				uni.redirectTo({
					url: '/pages-takeout/run-errands'
				})
			},
			setAddress() {
				this.$refs.selectAddress.getList();
			},
			giveAddress(e) {
				this.address_id = e;
				this.expressOrderAddress()
			},
			expressOrderAddress() {
				expressOrderAddress({
					order_id: this.infoData.id,
					address_id: this.address_id
				}).then((res) => {
					if (res.code == 1) {
						tools.success(res.msg)
						this.errandsOrderInfo(this.infoData.id)
					} else {
						tools.error(res.msg)
					}
				})
			},
			pay() {
				uni.redirectTo({
					url: `/pages-takeout/run-errands-mod/pay-page?orderId=${this.infoData.id}`
				});
			},
			cancelOrder() {
				// 跑腿取消订单
				commonRefundReason().then((res) => {
					if (res.code === 1) {
						this.refundReason = res.data
						this.refund_msg = res.data[0].refund_msg
					}
				})
				this.$refs.popupReason.open()
			},
			openGoods() {
				this.goodsShow = !this.goodsShow
			},
			scrolltolower() {
				// console.log('触底');
			},
			errandsOrderInfo(id) {
				errandsOrderInfo({
					order_id: id
				}).then((res) => {
					if (res.code == 1) {
						this.infoData = res.data
						if (this.infoData.order_status == 1) {
							let createDate = new Date(res.data.created_at); //格式化订单创建时候的时间
							createDate.setMinutes(createDate.getMinutes() + 10)
							this.setCountDown(createDate)
						}
					}
				})
			},
			setCountDown(sTime) {
				let end = new Date(sTime).getTime();
				let now = new Date().getTime();
				let msec = end - now;
				this.time.day = parseInt(msec / 1000 / 60 / 60 / 24);
				let h = parseInt(msec / 1000 / 60 / 60 % 24);
				let m = parseInt(msec / 1000 / 60 % 60);
				let s = parseInt(msec / 1000 % 60);
				this.time.h = h > 9 ? h : '0' + h;
				this.time.m = m > 9 ? m : '0' + m;
				this.time.s = s > 9 ? s : '0' + s;
				msec -= 1000;
				if (this.time.day >= 1) {
					this.showTime = true;
				} else {
					this.showTime = false;
				};
				if (msec >= 0) {
					setTimeout(() => {
						this.setCountDown(sTime);
					}, 1000);
				} else {
					this.isTimeEnd = true;
					this.bText = '活动结束';
					this.time.h = '--';
					this.time.m = '--';
					this.time.s = '--';
				};
			}
		},
	}
</script>

<style lang="scss" scoped>
	.images-box {
		max-width: 60%;
	}

	.images-img {
		width: 50rpx;
		height: 50rpx;
		margin: 0 10rpx 10rpx 0;
	}

	.w-64 {
		width: 64rpx;
	}

	.popup-reason-box {
		width: 100%;
		height: 45vh;
		overflow: auto;
		border-radius: 20rpx 20rpx 0 0;
		background: #fff;
		padding: 24rpx 0 0;
		box-sizing: border-box;
	}

	.picker-view {
		width: 100%;
		// height: 70%;
	}

	.picker-view-item {
		// height: 90rpx;
		line-height: 68rpx;
		text-align: center;
		background: #F5F5F5;
	}

	.pop-b {
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 20rpx;
	}

	.shops-img {
		width: 48rpx;
		height: 48rpx;
		margin: 0 8rpx 0 0;
		border-radius: 50%;
	}

	.bg-img {
		position: fixed;
		left: 0;
		top: 0;
		z-index: -1;
		width: 100%;
		height: 320rpx;
	}

	.w-33 {
		width: 33%;
		position: relative;
	}

	.item-box-button {
		position: absolute;
		width: 100%;
		height: 88rpx;
		top: 0;
		left: 0;
		z-index: 100;
		background-color: transparent;
		border: none !important;
	}

	button::after {
		border: none !important;
	}

	.p-24-24-0 {
		padding: 24rpx 24rpx 0;
	}

	.icon {
		width: 48rpx;
		height: 48rpx;
	}

	.w-420 {
		width: 420rpx;
	}

	.goods-img {
		width: 108rpx;
		height: 108rpx;
		border-radius: 8rpx;
	}

	.w-376 {
		width: 376rpx;
	}

	.icon-right {
		width: 32rpx;
		height: 32rpx;
	}

	.w-480 {
		width: 480rpx;
	}

	.icon-fz {
		width: 24rpx;
		height: 24rpx;
	}

	.goods-box {
		overflow: hidden;
	}

	.goodsShowOne {
		max-height: 508rpx;
		transition: all .5s linear;
	}

	.goodsShowTwo {
		height: auto;
		transition: all .5s linear;
	}
</style>