order.vue

<template>
	<view class="pages">
		<view v-show="false">{{userms}}</view>
		<view class="empty" v-show="userms && empty == true">
			<view :style="{'text-align':'center'}">
				<image class="empty_icon" src="/static/imgs/none_content.png"></image>
			</view>
			<view  class="empty_text">——您还未下单，下单品尝一下吧——</view>
			<button class="empty_button" @click="goHome"></button>
		</view>
		<view class="empty" v-show="!userms">
			<view :style="{'text-align':'center'}">
				<image class="empty_icon" src="/static/imgs/none_content.png"></image>
			</view>
			<view  class="empty_text">——您还未登录，请先登录——</view>
			<button class="empty_button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></button>
		</view>
		<view class="orders">
			<view class="order_item" v-for="item in list" :key="item.id" @click="openInfo(item)">
				<view class="order_header">
					<view>
						<h3 class="order_adrass">{{ item.shop.name }}</h3>
						<text class="order_time">{{ item.createdAt }}</text>
					</view>
					<view class="order_status">
						<text>{{ getStateText(item.state) }}</text>
						<image class="xiaojiantou" src="@/static/imgs/xiaojiantou.png"/>
					</view>
				</view>
				<div class="order_content">
					<view class="order_content_box1">
						<view class="goods_item" v-for="good in item.orderDetails" :key="good.id">
							<image class="goods_img" v-if="jsonParse(good.goods.pics).thumbnailApplet"
								:src="jsonParse(good.goods.pics).thumbnailApplet"></image>
							<image v-else class="goods_img" :src="jsonParse(good.goods.pics).thumbnail"></image>

							<view class="goods_text">
								<view class="goods_title">{{ good.goodsName }}</view>
								<view class="goods_spce">
									<view>
										<span v-for="(rule, index) in jsonParse(good.specRuleDetail)" :key="rule.specId">
											{{ rule.ruleName }}
											<span v-if="index!=jsonParse(good.specRuleDetail).length-1">/</span>
										</span>
									</view>
									<view>
										×{{ good.num }}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="item.state == 2 || item.state == 3 || item.state == 4 || item.state == 5" class="qr_code">
						<image class="qr_code_img" src="/static/imgs/icon-barcode.png"></image>
						<view class="qr_text">点击二维码取单</view>
					</view>
				</div>
				<view class="order_footer">
					<view class="total">
						共{{ orderDetailsSize(item.orderDetails) }}件商品 合计<text class="price">￥{{ Utils.isInteger(item.amount) }}</text>
					</view>
					<a class="btn" @click.stop="PayNow(item)" v-if="item.state == 1" type="primary">立刻支付</a>
					<a class="btn" v-else @click.stop="oneMoreOrder(item)" type="primary">再来一单</a>
				</view>
			</view>
		</view>
		<show-toast ref="toast"/>
	</view>
</template>

<script>
import order from '@/request/order'
import Menu from '@/request/menu';
import Utils from '@/utils/utils'
import User from '@/request/user'
import { $EventBus } from "@/utils/EventBus";

export default {
	onLoad() {
		if(!this.userms){
			User.wxLoginAndGetOpenid(true).then(loginInfo=>{
				this.loginInfo = loginInfo
			})
		}
	},
	name: 'order',
	data() {
		return {
			empty: false,
			list: [],
			loginInfo:"",
			Utils
		}
	},
	onShow() {
		this.getList()
	},
	computed: {
		userms() {
			return this.$store.getters.Authorization;
		}
	},
	methods: {
		getStateText(state) {
			state = '' + state;
			switch (state) {
				case '1':
					return '待付款'
				case '2':
					return '待制作'
				case '3':
					return '制作中'
				case '4':
					return '待取餐'
				case '5':
					return '取餐中'
				case '6':
				case '7':
					return '已完成'
				case '8':
				case '9':
				case '10':
				case '11':
					return '已取消'
				case '12':
					return '退款中'
				case '13':
					return '退款失败'
				case '14':
					return '部分退款'
				case '15':
					return '已退款'
				default:
					return '未知状态'
			}
		},
		async oneMoreOrder(item) {
			// 清空购物车
			uni.removeStorageSync('shopCarInfo');
			$EventBus.$emit('updateCar');
			//
			const numObj = {}
			const { id, shopId, orderDetails } = item;
			orderDetails.forEach(item => {
				orderDetails[item.skuId] = item.num
			})
			const { data } = await order.moreOrder({ orderId: id, shopId });
			if(!data || !data.data){
				this.showToast({ title: "该订单中的商品已经售罄了" });
				return;
			}
			
			let list = new Array();
			data.data.forEach(item => {
				const skuId = item.skus[0].skuId
				const nextData = { ...item, skuId, num: orderDetails[skuId], flag: true, sku: item.skus[0] }
				if (nextData.sku.state == 1) {
					list.push(nextData);
				}
			});
			if(!list || list.length<=0) {
				this.showToast({ title: "该订单中的商品已经售罄了", icon: 'error' });
				return;
			}
			list.forEach(nextData => {
				Utils.getallNum(nextData);
			})
			uni.switchTab({ url: '/pages/menu/menu' });
		},
		async getList() {
			if (!this.userms) return
			const { data } = await order.getMyOrder();
			if (data) {
				this.list = data.rows;
				if(this.list && this.list.length>0) {
					this.empty = false;
				} else {
					this.empty = true;
				}
			} else {
				this.showToast({ title: '请登录！', icon: 'error' })
			}
		},
		async PayNow({ id }) {
			const orderInfo = await order.payOrder({ orderId: id })
			if (orderInfo) {
				if (orderInfo && orderInfo.data.code == 200) {
					await Menu.requestPayment(orderInfo.data.data);
					this.getList()
				}
			}
		},
		goHome() {
			uni.switchTab({ url: '/pages/menu/menu' });
		},
		// 手机号授权登录
		getPhoneNumber(e) {
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
				e.loginInfo = this.loginInfo
				User.getPhoneNumber(e, this.getList);
			} else if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
				this.showToast({ title: '已拒绝手机号授权', icon: 'error' })
			}
		},
		openInfo(data) {
			uni.setStorageSync('orderInfo', data);
			let url = '/orderSubPackage/pages/orderInfo/index'
			uni.navigateTo({ url })
		},
		jsonParse(json) {
			const data = json || {}
			return JSON.parse(data)
		},
		orderDetailsSize(orderDetails) {
			let size = 0;
			orderDetails.forEach(item => {
				const { num } = item;
				size += Number(num)
			});
			return size
		}


	}
}
</script>

<style lang="scss" scoped>
.empty {
	 position: fixed;
	 /* 居中对齐begin */
	 left: 50%;
	 /* 兼容老版本的方法 */
	 -webkit-transform: translateX(-50%);
	 transform: translate(-50%);
	 margin-top: 311rpx;
	
	.empty_icon {
		 width: 280rpx;
		 height: 266rpx;
		 
	}
	.empty_text {
		margin-top: 35rpx;
		text-align: center;

		font-size: 24rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.empty_button {
		margin-top: 35rpx;
		width: 167rpx;
		height: 64rpx;
		background: url('@/static/imgs/qupinchang.png') center center no-repeat;
		border-radius: 0rpx;
	}
	.empty_button::after{
		border-radius: 0rpx;
		border: 0rpx;
	}
}

.orders {
	padding: 1rpx;

	.order_item {
		width: 686rpx;
		background: #FFFFFF;
		margin: 30rpx auto 0;
		box-sizing: border-box;
		padding: 25rpx 32rpx;

		.order_header {
			display: flex;
			justify-content: space-between;

			.order_adrass {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.order_time {
				font-size: 24rpx;
				font-family: ArialMT;
				color: #999999;
			}

			.order_status {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				display: flex;
				align-items: baseline;
				justify-content: flex-start;
				.xiaojiantou {
					width: 12rpx;
					height: 16rpx;
					margin-left: 5rpx;
				}
			}

		}

		.order_content {
			margin-top: 42rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.order_content_box1{
				flex: 1;
			}

			.qr_code {
				font-size: 16rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 22rpx;
				text-align: center;
				margin-right: 10rpx;
				margin-left: 39rpx;

				.qr_code_img {
					width: 76rpx;
					height: 76rpx;
				}

				.qr_text {
					margin-top:10rpx;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}

			.goods_item {
				display: flex;
				align-items: center;


				.goods_img {
					height: 96rpx;
					width: 96rpx;
					background-color: #eee;
				}

				.goods_text {
					margin-left: 22rpx;
					flex: 1;

					.goods_title {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}

					.goods_spce {
						margin-top: 2rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}

				}

			}
		}

		.order_footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 28rpx;

			.total {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;

				.price {
					font-size: 28rpx;
					font-family: Futura-Medium, Futura;
					font-weight: 500;
					color: #666666;
					letter-spacing: 1rpx;
				}
			}

			.btn {
				width: 167rpx;
				height: 64rpx;
				line-height: 64rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				background: #003AE9;
				font-size: 24rpx;
				margin: 0;
				color: #fff;
				font-weight: 400;
				text-align: center;
			}
		}
	}

}
</style>