xiuhuwangqiu/pages/plus/assemble/list/list.vue

<template>
	<view class="assemble-container">
		<view class="top-box">
			<view class="inner-tab" v-if="categorys.length > 0">
				<scroll-view scroll-X="true" show-scrollbar="false" class="scroll-X">
					<view class="tab-list">
						<view
							:class="assemble_activity_id == item.assemble_activity_id ? 'item active' : 'item'"
							v-for="(item, index) in categorys"
							:key="index"
							@click="tabTypeFunc(index, item.assemble_activity_id)"
						>
							{{ item.title }}
						</view>
					</view>
				</scroll-view>
			</view>
			<!--图片-->
			<view class="banner-image d-c-c" v-if="listData.detail && categorys.length > 0"><image :src="listData.detail.file_path"></image></view>
			<!--活动时间-->
			<view class="ad-datetime p-30-0 d-c-c pb0" v-if="listData.detail && categorys.length > 0">
				<Countdown ref="countdown" :config="countdownConfig" @ @returnVal="returnValFunc"></Countdown>
			</view>
			<view v-else class="p30 pt200 d-c-c d-c gray6 f26">
				<image style="width: 532rpx;margin-bottom: 80rpx;" src="/static/active-null.png" mode="widthFix"></image>
				<view class="tc gray9">暂无活动~~</view>
			</view>
		</view>

		<!--内容-->
		<view class="assemble-list" v-if="!loading">
			<scroll-view scroll-y="true" class="scroll-Y" :style="'height:' + scrollviewHigh + 'px;'" lower-threshold="50">
				<!--列表-->
				<view class="list d-s-c f-w">
					<view class="item d-s-s d-stretch" v-for="(item, index) in listData.list" :key="index">
						<view class="product-cover pr"><image :src="item.product.file_path" mode="aspectFit"></image></view>
						<view class="product-info d-b-c d-c">
							<view class="product-title text-ellipsis-2">{{ item.product.product_name }}</view>
							<view class="people-num price">
								<text class="f24">￥</text>
								<text class="f36 fb">{{ item.assemble_price }}</text>
								<text class="ml10 text-d-line gray9 f24">￥{{ item.product_price }}</text>
							</view>
							<view class="d-b-c ww100">
								<view class="f22">
									<text class="redF6">{{ item.assemble_num }}人团</text>
									<text class="ml10 gray9 <f22></f22>">已拼{{ item.product_sales }}件</text>
								</view>
								<view class="right-btn"><button type="primary" @click="gotoDetail(item)">去开团</button></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import Countdown from '@/components/countdown/countdown.vue';
export default {
	components: {
		Countdown
	},
	data() {
		return {
			/*手机高度*/
			phoneHeight: 0,
			/*可滚动视图区域高度*/
			scrollviewHigh: 0,
			/*活动类别*/
			categorys: [],
			/*当前活动Is*/
			assemble_activity_id: 0,
			/*商品列表*/
			listData: {
				list: [],
				detail: null
			},
			/*倒计时配置*/
			countdownConfig: {
				/*开始时间*/
				startstamp: 0,
				/*结束时间*/
				endstamp: 0
			},
			/*是否正在加载*/
			loading: true
		};
	},
	computed: {},
	onLoad(e) {},
	onShow() {
		/*获取产品列表*/
		this.getCategory();
	},
	mounted() {},
	onReachBottom() {},
	methods: {
		/*初始化*/
		init() {
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					_this.phoneHeight = res.windowHeight;
					// 计算组件的高度
					let view = uni.createSelectorQuery().select('.top-box');
					view.boundingClientRect(data => {
						let h = _this.phoneHeight - data.height;
						_this.scrollviewHigh = h;
					}).exec();
					uni.hideLoading();
				}
			});
		},

		/*类别切换*/
		tabTypeFunc(e, n) {
			this.type_active = e;
			this.assemble_activity_id = n;
			this.productList = [];
			this.getProdct();
		},

		/*获取数据*/
		getCategory() {
			let self = this;
			let param = {};
			let index = self.type_active;
			self._get(
				'plus.assemble.product/active',
				{
					param
				},
				function(res) {
					self.categorys = res.data.list;
					if (self.categorys.length > 0) {
						self.assemble_activity_id = self.categorys[0].assemble_activity_id;
					}
					self.getProdct();
				}
			);
		},

		/*获取商品*/
		getProdct() {
			let self = this;
			uni.showLoading({
				title: '加载中'
			});
			let assemble_activity_id = self.assemble_activity_id;
			self.loading = true;
			self._get(
				'plus.assemble.product/product',
				{
					assemble_activity_id: assemble_activity_id
				},
				function(res) {
					self.listData = res.data;
					self.countdownConfig.endstamp = res.data.detail.end_time;
					self.countdownConfig.startstamp = res.data.detail.start_time;

					self.$nextTick(() => {
						self.init();
					});
					self.loading = false;
				}
			);
		},

		/*跳转产品列表*/
		gotoDetail(e) {
			console.log(e);
			this.$refs.countdown.clear();
			let url = 'pages/plus/assemble/detail/detail?assemble_product_id=' + e.assemble_product_id;
			this.gotoPage(url);
		},

		/*跳转搜索页面*/
		gotoSearch() {
			this.page = 1;
			this.getData();
		},

		/*倒计时返回值*/
		returnValFunc(e) {
			console.log(e);
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f2f2f2;
}

.assemble-container .inner-tab {
	background: #ffffff;
}

.assemble-container .inner-tab .tab-list {
	height: 100rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background: #ffffff;
}

.assemble-container .inner-tab .item {
	height: 100rpx;
	line-height: 100rpx;
	white-space: nowrap;
	padding: 0 30rpx;
	font-size: 30rpx;
	color: #333333;
}

.assemble-container .inner-tab .item.active,
.assemble-container .inner-tab .item .arrow.active .iconfont {
	background: #ffffff;
	font-size: 32rpx;
	color: $dominant-color;
	position: relative;
}

.assemble-container .inner-tab .item.active::after {
	content: '';
	width: 60%;
	height: 4rpx;
	background: $dominant-color;
	border-radius: 2rpx;
	position: absolute;
	bottom: 17rpx;
	left: 0;
	right: 0;
	margin: auto;
}

.assemble-container .inner-tab .box {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
}

.assemble-container .inner-tab .arrows {
	margin-left: 10rpx;
	line-height: 0;
}

.assemble-container .inner-tab .iconfont {
	line-height: 24rpx;
	font-size: 24rpx;
}

.assemble-container .inner-tab .arrow,
.assemble-container .inner-tab .svg-icon {
	width: 20rpx;
	height: 20rpx;
}

.assemble-container .banner-image {
	width: 100%;
	box-sizing: border-box;
}

.assemble-container .banner-image image {
	width: 750rpx;
	height: 365rpx;
}

.assemble-container .ad-datetime::v-deep text {
	color: #333333;
	font-size: 28rpx;
}

.assemble-container .ad-datetime::v-deep .box {
	padding: 4rpx;
	border-radius: 4rpx;
	background: $dominant-color;
	color: #ffffff;
}

.assemble-list .list {
	padding: 20rpx;
}

.assemble-list .list .item {
	width: 100%;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-sizing: border-box;
	border-radius: 16rpx;
	background: #ffffff;
}

.assemble-list .product-cover {
	padding: 4rpx;
}

.assemble-list .product-cover image {
	width: 200rpx;
	height: 200rpx;
	border-radius: 12rpx;
}

.assemble-list .product-info {
	flex: 1;
	padding-left: 20rpx;
	overflow: hidden;
}

.assemble-list .product-cover .people-num {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 50rpx;
	padding: 0 20rpx;
	line-height: 50rpx;
	font-size: 24rpx;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.6);
}

.assemble-list .product-title {
	width: 100%;
	height: 40rpx;
	line-height: 40rpx;
	font-size: 26rpx;
	color: #333333;
}

.assemble-list .people-num {
	width: 100%;
}

.assemble-list .already-sale {
	padding: 4rpx 0;
	color: #999;
	font-size: 24rpx;
}

.assemble-list .price {
	width: 100%;
	color: $dominant-color;
	font-size: 24rpx;
}

.assemble-list .price .num {
	padding: 0 4rpx;
}

.assemble-list .slider-box .slider {
	margin-top: 10rpx;
	height: 10rpx;
	background: #cccccc;
	border-radius: 5rpx;
}

.assemble-list .slider-box .slider-inner {
	height: 10rpx;
	background: $dominant-color;
	border-radius: 5rpx;
}

.assemble-list .right-btn button {
	height: 60rpx;
	line-height: 60rpx;
	border-radius: 30rpx;
	background: linear-gradient(90deg, #ff6b6b 4%, #f6220c 100%);
	color: #ffffff;
	font-size: 32rpx;
}
</style>