shop4.3.57/plugins/pt/components/app-participant.vue

<template>
	<view class="app-participant">
		<view v-if="ptBool">
			<app-participant-model :theme="theme" v-model="ptBool" :pintuan_list="list"></app-participant-model>
		</view>

		<view class="app-spec dir-left-nowrap main-between cross-center" @click="route_go">
			<view class="item dir-top-nowrap main-center cross-center">
				<image src="../image/pay.png"></image>
				<text>支付开团</text>
			</view>
			<image class="arrow" src="../image/arrow.png"></image>
			<view class="item dir-top-nowrap main-center cross-center">
				<image src="./../image/invite.png"></image>
				<text>邀请好友</text>
			</view>
			<image class="arrow" src="../image/arrow.png"></image>
			<view class="item dir-top-nowrap main-center cross-center">
				<image src="./../image/ship.png"></image>
				<text>成功发货</text>
			</view>
			<image class="arrow" src="../image/arrow.png"></image>
			<view class="item dir-top-nowrap main-center cross-center">
				<image src="./../image/refund.png"></image>
				<text>失败退款</text>
			</view>
		</view>
		<view class="app-content" v-if="list.length > 0">
			<view class="app-peo-text dir-left-nowrap main-between cross-center">
				<text>{{list.length}}人正在拼团，可以直接参与：</text>
				<view>
					<app-form-id @click="ptBool = true">
						<text class="app-text">查看更多 ></text>
<!--						<image class="app-icon" src="../../../static/image/icon/arrow-right.png"></image>-->
					</app-form-id>
				</view>
			</view>

			<!-- #ifdef MP-ALIPAY -->
			<template v-if="list.length === 1">
				<block v-for="(item, index) in 1" :key="index">
					<view class="app-item dir-left-nowrap main-between" >
						<view class="dir-left-nowrap cross-center">
							<image class="app-icon" :src="list[item-1].avatar"></image>
							<text class="app-name">{{list[item-1].nickname}}</text>
						</view>
						<view class="dir-left-nowrap cross-center">
							<view class="app-text dir-top-nowrap main-between">
								<text class="app-red">还差{{list[item-1].surplus_people}}人成团</text>
								<view class="app-gray">
									<app-surplus-time :surplus_date_time="list[item-1].surplus_date_time"></app-surplus-time>
								</view>
							</view>
							<view class="app-go" :class="theme + '-m-back ' + theme">
								<app-jump-button form :url="`/plugins/pt/detail/detail?id=${list[item-1].id}`">
									去参团
								</app-jump-button>
							</view>
						</view>
					</view>
				</block>
			</template>

			<template v-if="list.length >= 2">
				<block v-for="(item, index) in 2" :key="index">
					<view class="app-item dir-left-nowrap main-between" >
						<view class="dir-left-nowrap cross-center">
							<image class="app-icon" :src="list[item-1].avatar"></image>
							<text class="app-name">{{list[item-1].nickname}}</text>
						</view>
						<view class="dir-left-nowrap cross-center">
							<view class="app-text dir-top-nowrap main-between">
								<text class="app-red">还差{{list[item-1].surplus_people}}人成团</text>
								<view class="app-gray">
									<app-surplus-time :surplus_date_time="list[item-1].surplus_date_time"></app-surplus-time>
								</view>
							</view>
							<view class="app-go" :class="theme + '-m-back ' + theme">
								<app-jump-button form :url="`/plugins/pt/detail/detail?id=${list[item-1].id}`">
									去参团
								</app-jump-button>
							</view>
						</view>
					</view>
				</block>
			</template>
			<!-- #endif -->

			<!-- #ifndef MP-ALIPAY -->
			<template v-if="list.length === 1">
				<block v-for="(item, index) in 1" :key="index">
					<view class="app-item dir-left-nowrap main-between" >
						<view class="dir-left-nowrap cross-center">
							<image class="app-icon" :src="list[item].avatar"></image>
							<view class="nickname">
								<text>{{list[item].nickname}}</text>
								<view class="app-gray">
									剩余
									<app-surplus-time :surplus_date_time="list[item].surplus_date_time"></app-surplus-time>
								</view>
							</view>
						</view>
						<view class="dir-left-nowrap cross-center">
							<view class="app-text dir-top-nowrap main-between">
								<text class="app-red">还差{{list[item].surplus_people}}人成团</text>
							</view>
							<view class="app-go" :class="theme + '-m-back ' + theme">
								<app-jump-button form :url="`/plugins/pt/detail/detail?id=${list[item].id}`">
									去拼团
								</app-jump-button>
							</view>
						</view>
					</view>
				</block>
			</template>

			<template v-if="list.length >= 2">
				<block v-for="(item, index) in 2" :key="index">
					<view class="app-item dir-left-nowrap main-between" >
						<view class="dir-left-nowrap cross-center">
							<image class="app-icon" :src="list[item].avatar"></image>
							<view class="nickname">
								<text>{{list[item].nickname}}</text>
								<view class="app-gray">
									剩余
									<app-surplus-time :surplus_date_time="list[item].surplus_date_time"></app-surplus-time>
								</view>
							</view>
						</view>
						<view class="dir-left-nowrap cross-center">
							<view class="app-text dir-top-nowrap main-between">
								<view>还差<text class="app-red">{{list[item].surplus_people}}人</text>成团</view>
							</view>
							<view class="app-go" :class="theme + '-m-back ' + theme">
								<app-jump-button form :url="`/plugins/pt/detail/detail?id=${list[item].id}`">
									去拼团
								</app-jump-button>
							</view>
						</view>
					</view>
				</block>
			</template>
			<!-- #endif -->
		</view>
		
	</view>
</template>

<script>
	import appSurplusTime from './app-surplus_time.vue';
	import appParticipantModel from './app-participant-model.vue';
	
    export default {
        name: 'app-participant',
	    data() {
            return {
                ptBool: false,
                show: 0,
                selectAttr: {},
                attr: {},
				list: []
            }
	    },
	    props: {
            pintuan_list: {
                type: Array,
	            default() {
                    return [];
	            }
            },
			theme: String
	    },

		methods: {
			route_go() {
				uni.navigateTo({
					url: `/pages/rules/index?url=${encodeURIComponent(this.$api.pt.index)}&keys=${JSON.stringify(['setting', 'new_rules'])}`,
				});
			}
		},
	    components: {
            'app-surplus-time': appSurplusTime,
		    'app-participant-model': appParticipantModel
	    },

		watch: {
			pintuan_list: {
				handler(data) {
					this.list  = data;
				},
				immediate: true
			}
		}
    }
</script>

<style scoped lang="scss">
	.app-spec {
		padding: 20upx;
		height: #{160rpx};
		padding: #{16upx 60upx 10upx 60upx};
		background-color: white;
		.arrow {
			width: #{38upx};
			height: #{30upx};
		}

		.item {

			image {
				width: #{50upx};
				height: #{50upx};
				margin-bottom: #{10upx};
			}

			text {
				font-size: #{24upx};
				line-height: 1;
				color: #666666;
				margin-top: #{10upx};
			}
		}
	}

	.app-participant {
		width: 100%;
        margin-top: 24upx;
		.app-left {
			font-size: #{24rpx};
			color: #666666;
		}

		.app-right {
			width: #{134rpx};
		}

		.app-text {
			font-size: #{24rpx};
			color: #F2597D;
		}

		.app-icon {
			width: #{12rpx};
			height: #{22rpx};
			margin-left: #{12rpx};
		}

		.app-content {
			padding: 20upx;
			padding: #{0 24upx 20upx 24upx};
			box-sizing: border-box;
			margin-top: 24upx;
			background-color: white;
		}

		.app-peo-text {
			font-size: #{32rpx};
			color: #333;
			padding: #{24rpx} 0;
			box-sizing: border-box;
			border-bottom: 1rpx solid #f5f5f5;
			.app-icon {
				width: #{12rpx};
				height: #{22rpx};
				margin-left: #{12rpx};
			}

			.app-text {
				font-size: #{32rpx};
				color: #F2597D;
			}
		}

		.app-item {
			height: 100rpx;
			width: 100%;
			margin-bottom: 10rpx;
			border-bottom: 1rpx solid #f5f5f5;

			.app-icon {
				height: #{80rpx};
				width: #{80rpx};
				border-radius: 50%;
				margin-left: #{20rpx};
			}
			.nickname{
				text{
					font-size: #{28rpx};
					color: #353535;
					width: #{170rpx};
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
				.app-gray {
					color: #707070;
					margin-bottom: #{14rpx};
					font-size: 24rpx;
				}
			}

			.app-name {
				font-size: #{28rpx};
				color: #353535;
				width: #{170rpx};
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				margin-left: #{16rpx};
			}

			.app-go {
				font-size: 24rpx;
				text-align: center;
				margin-left: 16rpx;
				padding: 5rpx 10rpx;
				border-radius: 10rpx;
				background: #FED2D5;
				color: #E73E67;
			}

			.app-text {
				font-size: #{28rpx};
				width: #{200rpx};
				height: #{100rpx};
				display: flex;
				align-items: center;
				justify-content: center;
				color: #333333;
				view {
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}

				.app-red {
					color: #DF4147;
					margin-top: #{14rpx};
				}

				.app-gray {
					color: #707070;
					margin-bottom: #{14rpx};
				}
			}
		}
	}
</style>