groupon-wx/components/orderList/orderList.vue

<template>
	<view>
		<view class="list" v-for="(item,index) in list" :key="index" @click="goGroupBuyDetails(item.id)">
			<view class="myclient_list">
				<view class="myclient_list_name">
					<view class="nl">
						{{item.mainTitle}}
					</view>
					<view v-if="item.grouponStateDesc == '发布中'" class="status">{{item.grouponStateDesc}}</view>
					<view v-else-if="item.grouponStateDesc == '申请中'" class="sqz_status">{{item.grouponStateDesc}}</view>
					<view v-else-if="item.grouponStateDesc == '已结束'" class="js_status">{{item.grouponStateDesc}}</view>
					<view v-else-if="item.grouponStateDesc == '已拒绝'" class="refuse_status">{{item.grouponStateDesc}}</view>
				</view>
				<view class="myclient_list_content">
					<view class="subtitle">{{item.subTitle}}</view>
					<view class="phone">
						<image referrerpolicy="no-referrer" src="http://www.gzzzyd.com/groupon/home_slices/日期@2x.png" />

						<text>
							团购日期:{{item.grouponStartTimeStr}} 至 {{item.grouponEndTimeStr}}
						</text>
					</view>
					<view class="time">
						<image referrerpolicy="no-referrer" src="http://www.gzzzyd.com/groupon/home_slices/时间@2x.png" />
						<text>
							提货时间:{{item.takeStartTimeStr}} 至 {{item.takeEndTimeStr}}
						</text>
					</view>
				</view>
			</view>

			<!--			<view class="self-pickup-point">-->

			<!--				<view class="a-b">-->
			<!--					<view class="a-b1">-->
			<!--						对接团长:-->
			<!--						<text class="red">-->
			<!--							上海市浦东新区秀浦路29号三层303室-->
			<!--						</text>-->
			<!--					</view>-->
			<!--					<view class="a-b2">-->

			<!--					</view>-->
			<!--				</view>-->
			<!--			</view>-->
		</view>
	</view>
</template>

<script>
	export default {
		name: "orderList",
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},


		data() {
			return {

			};
		},
		methods: {
			/**
			 * 去订单详情
			 */
			goGroupBuyDetails(id) {
				uni.navigateTo({
					url: '/pages/groupbuying/groupbuying_order_details/index?id=' + id
				});
			},


		}
	}
</script>

<style lang="scss" scoped>
	.list {
		width: 100%;
		background: white;
		margin: 14rpx auto 0 auto;
		padding-bottom: 30rpx;
	}

	.myclient_list {
		padding: 30rpx;
		background: #FFFFFF;
	}

	.myclient_list_name {
		margin-bottom: 15rpx;
		min-height: 44rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #111111;
		line-height: 44rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.status {
		text-align: right;
		margin-left: 30rpx;
		color: #75BE00;
	}
	
	.sqz_status {
		text-align: right;
		margin-left: 30rpx;
		color: #FEA800;
	}
	
	.refuse_status {
		text-align: right;
		margin-left: 30rpx;
		color: #B42A3E;
	}
	
	.js_status {
		text-align: right;
		margin-left: 30rpx;
		color: #666666;
	}

	.myclient_list_content {
		.subtitle {
			height: 44rpx;
			margin: 20rpx 0;
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
			line-height: 44rpx;
		}

		image {
			width: 24rpx;
			height: 24rpx;
			margin-right: 20rpx;
		}

		.phone {
			margin-bottom: 15rpx;
			height: 44rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 44rpx;
		}

		.time {
			height: 44rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 44rpx;
		}
	}

	.self-pickup-point {
		background: #FFF7F8;
		margin: 0 30rpx;
	}

	.a-b {
		padding: 0 30rpx;
		width: 100%;
		background: #FFF7F8;
		border: 1px solid dashed #333333;
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		justify-content: space-between;

		.a-b1 {
			font-size: 20rpx;
			font-weight: 400;
			color: #666666;

			.red {
				font-size: 20rpx;
				font-weight: 500;
				color: #B22338;
			}
		}

		.a-b2 {
			image {
				vertical-align: middle;
				margin-right: 30rpx;
				margin-left: 30rpx;
				height: 34rpx;
				width: 34rpx;
			}
		}
	}
</style>