zh_order_food_xcx/pages-order/laundry-info.vue

<template>
	<view class="flex-common-css">
		<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-show="infoData.order_status == 1">
				<view class="fs-40 fc-3 mb-8">
					{{infoData.order_status_str}}，剩余{{time}}
				</view>
				<view class="fs-24 fc-FB3D03">
					10分钟内未支付，订单将自动取消
				</view>
			</view>
			<view class="mb-24">
				<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-show="infoData.order_status == 4">
					感谢你对君子校园的信任，期待你再次光临
				</view>
				<view class="align-items-center flex-wrap-wrap">
					<view class="w-33 flex-direction align-items-center" 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 class="w-33 flex-direction align-items-center" v-show="infoData.order_status == 1 || infoData.order_status == 2">
						<image class="mb-4 icon" src="@/static/img/order/xgdd.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 == 4 || 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">
						<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="w-420 fc-3 fs-32 fw-600 text-overflow-ellipsis-one mb-24">
					{{infoData.site_name}}
				</view>
				<view class="goods-box" :class="infoData.item.length >= 4 && goodsShow?'goodsShowOne':'goodsShowTwo'">
					<view class="align-items-center flex-justify-space mb-20" v-for="(item,index) in infoData.item">
						<image class="goods-img mr-16" :src="item.goods_img" mode=""></image>
						<view class="">
							<view class="align-items-center flex-justify-space mb-2">
								<view class="fs-28 fc-3 w-376 text-overflow-ellipsis-one mr-36">
									{{item.goods_name}}
								</view>
								<view class="fs-32 fc-3 fw-600">
									￥{{item.goods_money}}
								</view>
							</view>
			<!-- 				<view class="mb-2 fs-24 fc-9">
								{{item.goods_name}}
							</view> -->
							<view class="fs-24 fc-9">
								x{{item.goods_num}}
							</view>
						</view>
					</view>
				</view>
				<view class="align-items-center flex-justify-center p-24 b-b-F9F9F9 mb-32" @click="openGoods"
					v-if="infoData.item.length > 4">
					<view class="fs-24 fc-9 mr-4">
						{{goodsShow?'展开':'收起'}}{{infoData.item.length - 4}}件商品
					</view>
					<image v-if="goodsShow" class="icon-right" src="@/static/img/order/top.png" mode=""></image>
					<image v-else class="icon-right" src="@/static/img/order/bottom.png" mode=""></image>
				</view>
<!-- 				<view class="align-items-center flex-justify-space mb-24">
					<view class="fs-28 fc-3">
						打包费
					</view>
					<view class="fs-32 fc-3">
						打包费
					</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">
						打包费
					</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-9">
						共{{infoData.goods_number}}件，
					</view>
					<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.school_name}}{{infoData.dorm_name}}{{infoData.address}}{{infoData.consignee}}{{infoData.consignee_tel}}
					</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">
						预约配送
					</view>
				</view> -->
<!-- 				<view class="display-flex flex-justify-space pb-20 b-b-F9F9F9 mb-26" v-show="infoData.order_status == 3">
					<view class="fs-28 fc-9">
						骑手信息
					</view>
					<view class="fs-28 fc-3 w-480 text-align-right">
						{{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=""></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">
					<view class="fs-28 fc-9">
						备注
					</view>
					<view class="fs-28 fc-3 w-480 text-align-right">
						{{infoData.note?infoData.note:'无'}}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		laundryOrderInfo,
		laundryOrderCancel
	} from "@/api/laundryOrder.js"
	export default {
		components: {},
		data() {
			return {
				goodsData: [{
					name: '1'
				}, {
					name: '2'
				}],
				goodsShow: true,
				infoData: {},
				time: ''
			};
		},
		onLoad(data) {
			if (data) {
				console.log(data);
				this.laundryOrderInfo(data.orderId)
			}
		},
		mounted() {},
		methods: {
			cancelOrder() {
				// 代取取消订单
				laundryOrderCancel({order_id: infoData.id}).then((res) => {
					if(res.code == 1) {
						tools.success(res.msg)
						this.laundryOrderInfo(infoData.id)
					}else {
						tools.error(res.msg)
					}
				})
			},
			openGoods() {
				this.goodsShow = !this.goodsShow
			},
			scrolltolower() {
				// console.log('触底');
			},
			laundryOrderInfo(id) {
				laundryOrderInfo({
					order_id: id
				}).then((res) => {
					if (res.code == 1) {
						this.infoData = res.data
						if (this.infoData.order_status == 1) {
							setInterval(() => {
								let currentDate = new Date(); //获取当前时间
								let createDate = new Date(res.data.created_at); //格式化订单创建时候的时间
								createDate.setMinutes(createDate.getMinutes() + 10)
								let disDate = (currentDate - createDate) / 1000; //计算相隔分钟
								let m = parseInt(disDate / 60 % 60)
								m = m < 10 ? "0" + m : m
								let s = parseInt(disDate % 60)
								s = s < 10 ? "0" + s : s
								this.time = m + ":" + s
							}, 1000)
						}
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.bg-img {
		position: fixed;
		left: 0;
		top: 0;
		z-index: -1;
		width: 100%;
		height: 320rpx;
	}

	.w-33 {
		width: 33%;
	}

	.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>