guosen-ldt-client/pagesD/pages/take-order/take-order.vue

<template>
	<view class="page safe-area-inset-bottom">
		<view class="card u-border-bottom ">
			<view class="center">
				<image style="width: 60rpx;height: 60rpx;border-radius: 12rpx;" :src="shop.cover" mode=""></image>
				<text class="margin-left-10 text-lg text-cut-1">{{shop.name}}</text>
			</view>
			<view class="center text-sm " style="font-weight: 400;width: 46%;justify-content: flex-end;">
				<view class="text-center" v-if="order.payStatus=='待付款'&& order.orderStatus!='取消付款'">
					<view class="center">
						<text class="text-gray text-sm">付款倒计时：</text>
						<u-count-down @end="timeup" bg-color="#e44c41" font-size="26" height="42" color="#ffffff"
							:show-hours="false" :show-days="false" :timestamp="expireTime"></u-count-down>
					</view>
				</view>
				<block v-else>
					<text class="cuIcon-time margin-right-10"></text>
					<text>{{order.createTime}}</text>
				</block>
			</view>
		</view>
		<view class="section">

		</view>
		<view class="card section" style="flex-direction: column;">
			<block v-if="stepIndex==-1">
				<view class="center flex-direction" style="padding: 50rpx;">
					<text class="cuIcon-roundclose text-red" style="font-size: 150rpx;"></text>
					<text class="text-gray margin-top-10 text-df">订单已取消</text>
				</view>
			</block>
			<block v-else>
				<view class="center text-bold margin-50" style="font-size: 66rpx;">
					<text>{{order.verifyNum}}</text>
				</view>
				<view class="cu-steps steps-arrow margin-bottom-50">
					<view class="cu-item" :class="index>stepIndex?'text-default':'text-base'"
						v-for="(item,index) in stepList" :key="index">
						<text style="font-size: 70rpx;margin-bottom: 20rpx;margin-right: 10rpx;"
							:class="'cuIcon-' + item.icon"></text>
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="center padding-30" style="color: #999;">
					<text>备注：{{order.extraInfo || '无备注'}}</text>
				</view>
			</block>

		</view>
		<view class="section"></view>

		<view class="padding-10 bg-white">
			<u-read-more ref="uReadMore" close-text="展开更多" show-height="300" color="#999">
				<view v-for="(item,index) in cart" :key="index" class="cart">
					<view class="flex" style="width: 70%;">
						<image :src="item.image" mode=""></image>
						<view class="item-content ">
							<text class="text-cut-1">{{item.name}}</text>
							<text class="text-cut-1">{{item.propertyStr ? item.propertyStr : item.name}}</text>
						</view>
					</view>
					<view class="item-data">
						<view class="">
							<text class="text-sm">x</text>
							<text class="text-lg" style="margin-left: 6rpx;">{{item.number}}</text>
						</view>
						<text class=" text-lg">{{item.realPrice / 100}}</text>
					</view>
				</view>
			</u-read-more>
		</view>

		<!-- 订单金额 -->
		<view class="">
			<view class="card text-df" v-if="$isNotEmpty(order.packingPrice)&&order.packingPrice != -1">
				<text class="text-gray">包装费</text>
				<text class="text-price">{{order.packingPrice / 100}}</text>
			</view>
			<view class="card text-df" v-if="$isNotEmpty(order.sendingPrice)&&order.sendingPrice != -1">
				<text class="text-gray">配送费</text>
				<text class="text-price">{{order.sendingPrice / 100}}</text>
			</view>
			<view class="card text-df ">
				<text class="text-gray">金额总计</text>
				<view class="">
					<text class="text-price">{{order.totalPrice / 100}}</text>
				</view>
			</view>
		</view>

		<view class="section"></view>

		<view class="">
			<view class="card text-df">
				<text class="text-gray">取单号</text>
				<text class="">{{order.verifyNum}}</text>
			</view>
			<view class="card text-df" v-if="$isNotEmpty(order.seatNum) && order.seatNum !=-1">
				<text class="text-gray">座位号</text>
				<text class="">{{order.seatNum}}</text>
			</view>
			<view class="card text-df">
				<text class="text-gray">下单时间</text>
				<text class="">{{order.createTime}}</text>
			</view>
			<view class="card text-df" v-if="order.orderStatus != -1">
				<text class="text-gray">付款状态</text>
				<text class="">{{order.payStatus}}</text>
			</view>
			<view class="card text-df" v-if="$isNotEmpty(order.orderStatus)">
				<text class="text-gray">订单状态</text>
				<text class="">{{order.orderStatus}}</text>
			</view>
			<view class="card text-df">
				<text class="text-gray">订单号</text>
				<text class="">{{order.id}}</text>
			</view>
		</view>

		<view class="">
			<view class="card text-df">
				<text class="text-gray">下单手机号</text>
				<text class="">{{order.userPhone}}</text>
			</view>
			<view class="card text-df">
				<text class="text-gray">取餐方式</text>
				<text class="">{{order.takeType}}</text>
			</view>
			<view class="card text-df">
				<text class="text-gray">下单时间</text>
				<text class="">{{order.createTime}}</text>
			</view>
			<view class="card text-df">
				<text class="text-gray">取餐时间</text>
				<text class="">{{order.takeTime || '立即就餐'}}</text>
			</view>
			<view class="card text-df">
				<text class="text-gray">备注</text>
				<text class="">{{order.extraInfo || '无备注'}}</text>
			</view>
		</view>


		<view class="">
			<view class="" style="height: 140rpx;"></view>
			<view class="footer-fixed " :style="'margin-bottom:'+safeAreaBottom+'px'">
				<view class="navigation">
					<view class="left">
						<view class="item" @click="$util.callPhone(shop.personTel)">
							<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
							<view class="text u-line-1">客服</view>
						</view>
						<view class="item" @click="continueOrdre">
							<u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
							<view class="text u-line-1">店铺</view>
						</view>
						<view class="item car" @click="goMap">
							<u-icon name="map" :size="40" :color="$u.color['contentColor']"></u-icon>
							<view class="text u-line-1">导航</view>
						</view>
					</view>
					<view class="right">
						<view @click="doWxPay" v-if="order.payStatus=='待付款'&&order.orderStatus!='取消付款'"
							class="buy btn u-line-1">立即付款</view>
						<view @click="againOrder" v-else class="buy btn u-line-1">再来一单</view>
					</view>
				</view>
			</view>
		</view>
		<toast ref="toast" ></toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				expireTime: '',
				id: '',
				order: {},
				shop: {},
				cart: [],
				//订单流程
				stepList: [{
						name: '待付款',
						icon: 'rechargefill'
					},
					{
						name: '已付款',
						icon: 'roundcheckfill'
					},
					{
						name: '制作中',
						icon: 'timefill'
					},
					{
						name: '已完成',
						icon: 'goodsfill'
					}
				],
			};
		},
		onLoad(options) {
			this.id = options.id
			this.fetchDetail()
		},
		computed: {
			stepIndex: {
				get() {
					if (this.order.payStatus == '待付款') {
						return 0
					}
					if (this.order.orderStatus == '已完成') {
						return 3
					}
					if (this.order.orderStatus == '取消付款') {
						return -1
					} else {
						return 2
					}
				}
			}
		},
		methods: {
			async fetchDetail() {
				let params = {
					id: this.id
				}
				let res = await this.$api.order.detail(params)
				this.order = res.data || {}
				this.shop = this.order.shop || {}
				this.cart = JSON.parse(this.order.goodsPreview)
				if (this.order.orderStatus != '取消付款') {
					this.getExTimestamp()
				}
			},
			getExTimestamp() {
				let exTime = this.$dateTime.getTime(this.order.expireTime)
				let nowTime = this.$dateTime.getTime()
				this.expireTime = (exTime - nowTime) / 1000
				if (this.expireTime <= 0) {
					this.expireTime = 0.1
				}
			},
			timeup() {
				let order = this.$u.deepClone(this.order)
				order.payStatus = '取消付款'
				order.orderStatus = '取消付款'
				this.$api.goodsbills.submit(order).then(res => {
					if (res.success) {
						this.fetchDetail()
					}
				})
			},
			continueOrdre() {
				let params = {
					shopId: this.shop.id,
				}
				if (this.$isNotEmpty(this.order.seatNum)) {
					params.seatNum = this.order.seatNum
				}
				uni.redirectTo({
					url: "/pagesD/pages/menu/menu" + this.$u.queryParams(params)
				})
			},
			againOrder() {
				let cart = JSON.parse(this.order.goodsPreview)
				let cartKey = this.$global.cart_prefix + this.shop.id
				this.$cache.put(cartKey, cart)
				this.continueOrdre()
			},
			async doWxPay() {
				let obj = {
					orderType: this.$global.orderType.USER_PAY,
					orderId:this.order.billsId,
					payStatus: this.$global.payStatus.IS_WAIT
				}
				let res = await this.$api.pay.payOrder(obj)
				if (res.data.message!='成功') {
					this.$refs.toast.error(res.data.message)
					return
				}
				let prePayTn = JSON.parse(res.data.prePayTn)
				this.$mpi.requestPayment(prePayTn).then((res) => {
					this.$refs.toast.info('支付成功')
					this.fetchDetail()
				}).catch(err => {
					this.$refs.toast.error('支付失败')
				})
			},
			goMap() {
				let latitude = parseInt(this.shop.latitude)
				let longitude = parseInt(this.shop.longitude)
				let name = this.shop.name
				let address = this.shop.address
				uni.openLocation({
					latitude, //纬度
					longitude, //经度
					name,
					address,
					fail: (err) => {
						console.log(err);
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		margin: 20rpx;
	}

	.text-default {
		color: #ffbf91;
	}

	.btn-icon {
		background-color: rgba(255, 148, 71, .3);
		color: #FF9447;
	}


	.card {
		padding: 30rpx;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #f1f1f1;
		display: flex;
		justify-content: space-between;
	}

	.cart {
		border-bottom: 1rpx solid #f1f1f1;
		display: flex;
		background-color: #FFFFFF;
		padding: 15rpx 0;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 8rpx;
		}

		.item-content {
			width: calc(100% - 100rpx);
			margin-left: -40rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			text:first-child {
				font-size: 30rpx;
			}

			text:last-child {
				font-size: 24rpx;
				color: #999;
				font-weight: 400;
			}
		}

		.item-data {
			display: flex;
			align-items: center;
			width: 30%;
			justify-content: space-between;
			margin-right: 20rpx;

		}
	}

	.cart:last-child {
		border: none;
	}


	.navigation {
		display: flex;
		justify-content: flex-end;
		margin-top: 100rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 20rpx;

		.left {
			display: flex;
			font-size: 20rpx;

			.item {
				margin: 0 30rpx;

				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			margin-left: 20rpx;

			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}

			.cart {
				background-color: #ed3f14;
				margin-right: 30rpx;
			}

			.buy {
				background-color: #ff7900;
			}
		}
	}
</style>