H5-ThreeDoorder/components/b-orders/b-orders-rx.vue

<template>
	<view class="b-orders-rx"  @tap.stop="OrderDetails">
		<!-- 顶部店铺名称/状态栏 -->
		<view class="Order-infor">
			<view class="Order-infor-Img">
				<image :src="qnyurl('rxlogo.png','rx')" class="img"></image>
			</view>
			<view class="Order-infor-Shop">
				<view class="Order-infor-Shop-Name">
					{{InforData['restaurant_name']}}
				</view>
				<view class="Order-infor-Shop-Createtime">
					{{InforData['create_time']}}
				</view>
			</view>
			<view class="Order-infor-State">
				<view class="State">{{ InforData['status'] | OrderState}}</view>
				<view class="time" v-if="InforData['status'] == OrderStatus0">{{wait_for}}</view>
			</view>
		</view>

		<view class="Order-Code">
			<view class="Order-Code-Content">
				<view class="Order-Code-Content-Number">
					自提订单：{{order_no}}
				</view>
				<view class="Order-Code-Content-Copy" @tap.stop="Copy(order_no)">
					复制
				</view>
			</view>

		</view>

		<view class="Order-Commodity">
			<template v-for="(commodity,index) in InforData['goods']">
				<view class="Order-Commodity-item">
					<!-- 商品样式 -->
					<b-rx-commodity-item :item="commodity" :key="index"></b-rx-commodity-item>
				</view>
			</template>
		</view>
		
		<!-- 订单底部结算组件 -->
		<b-order-item-settlement :infor="InforData" :index="index"></b-order-item-settlement>
	
	</view>
</template>

<script>
	import mixin from '@/static/js/mixin/mixin.js';
	import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
	// 商品样式组件引入
	import bRxCommodityItem from '@/components/b-rx-commodity-item/b-rx-commodity-item.vue'
	import bOrderItemSettlement from './b-order-item-settlement.vue'
	export default {
		name: 'b-orders-rx',
		mixins: [mixin,restaurantmixins],
		props: {
			index:{
				type:Number,
				default:0
			},
			item: {
				type: Object,
				default: () => {}
			}
		},
		components: {
			bRxCommodityItem,
			bOrderItemSettlement
		},
		data() {
			return {
				// status:0,
			}
		},
		computed: {
			InforData() {
				// 重新下单时需要
				return this['item'];
			},
			order_no(){
				return this['InforData']['order_no']?this['InforData']['order_no']:this['InforData']['order_sn']
			},
			status(){
				return this['InforData']['status']
			}
		},
		
		watch:{
			// 状态改变再次调用
			status(v){
				if(v != 0){
					clearTimeout(this['countDown']);
				}
			},
			
		},
		
		mounted() {
			if (this['status'] == this['OrderStatus0']) {
				this.tiem(this['status'], this['InforData']['createtime'])
			};
		},
		
		methods:{
			
			/**
			 * @点击订单整体时
			 * */
			OrderDetails() {
				// 正常逻辑>从品牌进入点餐是会经行一步设置品牌ID的操作(用户进入的品牌)
				// 订单逻辑>从我的tab点击进入订单,然后再进入点餐订单,此时是需要看到所有品牌的订单,所以不会设置品牌ID,此时点击订单不可进入详情
				if(!this['BrandInfor']['brand_id']) return;
				console.log(this['InforData']['status'],this['OrderStatus0']);
				if (this['InforData']['status'] == this['OrderStatus0'] || 
				this['InforData']['status'] == this['OrderStatus1'] || 
				this['InforData']['status'] == this['OrderStatus2'] || 
				this['InforData']['status'] == this['OrderStatus5']) {
					uni.navigateTo({
						url: `/pages/restaurant/order/order-details/rx-orders-details?order=${this['InforData']['order_sn']}`
					})
				}
			},
			
		}
	}
</script>

<style lang="scss">
	.b-orders-rx {
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 20rpx;

		.Order-infor {
			width: 100%;
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&-Img {
				width: 60rpx;
				height: 60rpx;
				max-width: 60rpx;
				max-height: 60rpx;
				min-width: 60rpx;
				min-height: 60rpx;
				margin-right: 17rpx;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			&-Shop {
				flex: 1;

				&-Name {
					color: #333333;
					font-size: 30rpx;
					margin-bottom: 10rpx;
					max-width: 460rpx;
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				&-Createtime {
					color: #999999;
					font-size: 24rpx;
				}
			}

			&-State {
				color: #83ACFE;
				text-align: center;

				.State {
					font-size: 26rpx;
					margin-bottom: 12rpx;
				}

				.time {
					font-size: 24rpx;
				}
			}
		}

		.Order-Code {
			padding: 0 30rpx;
			font-size: 28rpx;

			&-Content {
				background-color: #F7F9FC;
				width: 100%;
				padding: 20rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				&-Number {
					color: #333333;
				}

				&-Copy {
					color: #4B6FE7;
					padding-left:20rpx;
				}

			}

		}

		.Order-Commodity {
			padding: 32rpx;

			&-item {
				margin-bottom: 20rpx;
			}
		}

	}
</style>