order.vue

<template>
	<view class="pages">
		<view v-show="false">{{userms}}</view>
		<view class="empty" v-show="userms && empty == true">
			<image class="empty_icon" src="/static/imgs/none_content.png"></image>
			<view  class="empty_text">---您还未下单，下单品尝一下吧---</view>
			<button class="empty_button" @click="goHome">去品尝</button>
		</view>
		<view class="empty" v-show="!userms">
			<image class="empty_icon" src="/static/imgs/none_content.png"></image>
			<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" v-if="item.state == 0">创建未校验</view>
					<view class=" order_status" v-if="item.state == 1">未支付</view>
					<view class=" order_status" v-if="item.state == 2">已支付</view>
					<view class=" order_status" v-if="item.state == 3">支付制作中</view>
					<view class=" order_status" v-if="item.state == 4">制作完成未取</view>
					<view class=" order_status" v-if="item.state == 5">取餐中</view>
					<view class=" order_status" v-if="item.state == 6">正常完成</view>
					<view class=" order_status" v-if="item.state == 7">待取超时</view>
					<view class=" order_status" v-if="item.state == 8">未支付取消</view>
					<view class=" order_status" v-if="item.state == 9">支付后制作前取消</view>
					<view class=" order_status" v-if="item.state == 10">制作中取消</view>
					<view class=" order_status" v-if="item.state == 11">制作完成取消</view>
					<view class=" order_status" v-if="item.state == 12">退款中</view>
					<view class=" order_status" v-if="item.state == 13">退款失败</view>
					<view class=" order_status" v-if="item.state == 14">部分退款</view>
					<view class=" order_status" v-if="item.state == 15">已退款</view>
					<view class=" order_status" v-if="item.state == 50">其他人工干预状态</view>
				</view>
				<div class="order_content">
					<view>
						<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 }}×{{ good.num }}</view>
								<view class="goods_spce">
									<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>
						</view>
					</view>
					<view v-if="item.state == 4 || item.state == 5 || item.state == 6 || item.state == 7"
						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">￥{{ 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>

	</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:""
		}
	},
	onShow() {
		this.getList()
	},
	computed: {
		userms() {
			return this.$store.getters.Authorization;
		},
	},
	methods: {
		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 });
			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) {
					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 {
				uni.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") {
				uni.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: translateX(-50%);
	 margin-top: 200rpx;
	
	.empty_icon {
		 width: 325rpx;
		 height: 296rpx;
		 
	}
	.empty_text {
		font-size: 20rpx;
		margin-top: 10rpx;
		font-family: ArialMT;
		color: #666666;
		text-align: center;
	}
	.empty_button {
		width: 128rpx;
		height: 46rpx;
		margin-top: 10rpx;
		background: #006ECF;
		border-radius: 10rpx;
		text-align: center;
		line-height: 46rpx;
		font-size: 20rpx;
		color: #fff;
	}
}

.orders {
	padding: 1rpx;

	.order_item {
		width: 686rpx;
		min-height: 370rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 15rpx auto 0;
		box-sizing: border-box;
		padding: 28rpx 32rpx;

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

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

			.order_time {
				font-size: 20rpx;
				font-family: ArialMT;
				color: #666666;
			}

			.order_status {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 500;
				color: #000000;
				margin-top: 10rpx;
			}

		}

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


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

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

			.goods_item {
				display: flex;
				align-items: center;
				margin-top: 10rpx;


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

				.goods_text {
					margin-left: 38rpx;

					.goods_title {
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 600;
						color: #000000;
					}

					.goods_spce {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-top: 6rpx;
					}

				}

			}
		}

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

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

				.price {
					color: #FF5200;
					font-weight: 700
				}
			}

			.btn {
				width: 144rpx;
				height: 48rpx;
				line-height: 48rpx;
				background: #006ECF;
				border-radius: 6rpx;
				font-size: 24rpx;
				margin: 0;
				color: #fff;
				text-align: center;
			}
		}
	}

}
</style>