groupon-wx/pages/index/diy/components/latestGroupBuying.vue

<template>
	<view class="index-product-wrapper" :class="iSshowH ? 'on' : ''" :style="'margin-top:' + mbConfig * 2 + 'rpx;'"
		v-show="!isSortType">
		<view v-if="iSshowH">
			<u-tabs :list="navigationList2" @click="clickNav" lineColor="#EB4C63" :inactiveStyle="{ color: '#333' }"
				:activeStyle="{ color: '#EB4C63', fontWeight: 'bold' }" keyName="title"></u-tabs>
		</view>
		<!-- 商品列表 -->
		<view class="list-box animated">
			<view class="group_3 flex-col">
				<view class="tag_1 flex-col"><text class="text_6">1/3</text></view>
			</view>
			<view class="group_4 flex-row justify-between">
				<view class="list_2 flex-row">
					<view class="text-wrapper_3 flex-col" :style="{ background: item.lanhuBg0 }" v-for="(item, index) in loopData0"
						:key="index">
						<text v-if="item.slot1 === 1" class="text_7">共28个</text>
					</view>
				</view>
				<image class="icon_3" referrerpolicy="no-referrer"
					src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng43c9bddd58dafb36d3ce5b36c34486c9694a6980d5e540a7cc44681e1dcdf27e" />
			</view>
			<view class="box_3 flex-row justify-between">
				<view class="text-group_11 flex-col">
					<view class="text-wrapper_4">
						<text class="text_8">¥</text>
						<text class="text_9">7.00</text>
						<text class="text_10">&nbsp;~</text>
						<text class="text_8">¥</text>
						<text class="text_9">48.00</text>
					</view>
					<text class="text_13">防晒、面膜、护肤专场，大牌正品，不惧比价</text>
				</view>
				<image class="icon_4" referrerpolicy="no-referrer"
					src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng499c106363c358efd4037e2befc671bc45b9a692931f8fbeb07dd342f420f04b" />
			</view>
			<view class="group_6 flex-row">
				<image class="avatar-group_1" referrerpolicy="no-referrer"
					src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng7e7f268c1ab4f8f9a61bfb41d7843a8514aedf1d4312678cfd24c9cb23c6cc6c" />
				<text class="text_14">4人</text>
				<text class="text_15">正在参团中</text>
				<view class="image-text_11 flex-row justify-between">
					<image class="icon_5" referrerpolicy="no-referrer"
						src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng706a577ce54d1457bbf9ef4cc7ce31fcb9c54a60410c9a945cae1617c3df7640" />
					<text class="text-group_4">截止倒计时</text>
					<text class="text_16">02时25分19秒</text>
				</view>
			</view>
			<view class="group_7 flex-row justify-between">
				<view class="text-group_12 flex-col">
					<text class="text_17">最近的自提网点：</text>
					<text class="text_18">上海市浦东新区秀浦路29号三层303室</text>
				</view>
				<view class="image-text_12 flex-col">
					<image class="icon_6" referrerpolicy="no-referrer"
						src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6c7bfe951de28c68cbf7532beec94d0a16e2ea6d81efa80933eed9ece8207578" />
					<text class="text-group_6">距您1.8km</text>
				</view>
			</view>
			<view class="box_4 flex-row">
				<view class="image-text_13 flex-row justify-between">
					<image class="icon_7" referrerpolicy="no-referrer"
						src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng716260d376f718135006e01ff6d283c78abdf5a5c88debf66a7f6aa59347d81c" />
					<text class="text-group_7">发布于：</text>
				</view>
				<text class="text_19">1天20小时36分钟前</text>
				<view class="image-text_14 flex-row justify-between">
					<text class="text-group_8">762人浏览过</text>
					<image class="icon_8" referrerpolicy="no-referrer"
						src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngcb2a14d093472b69f7328957e43efe5af8e4e9d3bfdec5ebeaddd131fe2ce146" />
				</view>
			</view>
			<view class="box_5 flex-row justify-between">
				<button style="margin-right: 10px;" class="button_1 flex-col" @click="onClick_1">
					<view class="image-text_15 flex-row justify-between">
						<image class="icon_9" referrerpolicy="no-referrer"
							src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngeff379ed5981aae0768e31361dd255e6fd280a8e0444636ef6781a86700d6200" />
						<text class="text-group_9">分享有礼</text>
					</view>
				</button>
				<button class="button_2 flex-col" @click="onClick_2">
					<view class="image-text_16 flex-row justify-between">
						<image class="icon_10" referrerpolicy="no-referrer"
							src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga2ee500afc9334850f677b98772ecc4d50879b30e30bf08525190662f767a78a" />
						<text class="text-group_10">立即下单</text>
					</view>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import { getGoodsInfo, getCategoryTwo } from '@/api/home.js'
export default {
	name: 'promotionList',
	props: {
		dataConfig: {
			type: Object,
			default: () => { }
		},
		tempArr: {
			type: Array,
			default: []
		},
		iSshowH: {
			type: Boolean,
			default: false
		},
		isSortType: {
			type: String | Number,
			default: 0
		},
		currentId: {
			type: String | Number,
			default: 0
		}
	},
	watch: {
		currentId (Id) {
			console.log(Id);
			this.getCategoryTwo(Id)
		}
	},
	data () {
		return {
			navigationList2: [],
			ProductNavindex: 0,
			explosiveMoney: [
				{
					"chiild": [
						{
							"title": "标题",
							"val": "首发新品",
							"max": 4,
							"pla": "选填，不超过四个字"
						},
						{
							"title": "简介",
							"val": "最新出炉",
							"max": 4,
							"pla": "选填，不超过四个字"
						}
					],
					"link": {
						"title": "链接",
						"activeVal": 3,
						"optiops": [
							{
								"type": 0,
								"value": 1,
								"label": "精品推荐"
							},
							{
								"type": 1,
								"value": 2,
								"label": "热门榜单"
							},
							{
								"type": 2,
								"value": 3,
								"label": "首发新品"
							},
							{
								"type": 3,
								"value": 4,
								"label": "促销单品"
							}
						]
					}
				},
				{
					"chiild": [
						{
							"title": "标题",
							"val": "精品推荐",
							"max": 4,
							"pla": "选填，不超过四个字"
						},
						{
							"title": "简介",
							"val": "猜你喜欢",
							"max": 4,
							"pla": "选填，不超过四个字"
						}
					],
					"link": {
						"title": "链接",
						"activeVal": 1,
						"optiops": [
							{
								"type": 0,
								"value": 1,
								"label": "精品推荐"
							},
							{
								"type": 1,
								"value": 2,
								"label": "热门榜单"
							},
							{
								"type": 2,
								"value": 3,
								"label": "首发新品"
							},
							{
								"type": 3,
								"value": 4,
								"label": "促销单品"
							}
						]
					}
				},
				{
					"chiild": [
						{
							"title": "标题",
							"val": "热门榜单",
							"max": 4,
							"pla": "选填，不超过四个字"
						},
						{
							"title": "简介",
							"val": "好评如云",
							"max": 4,
							"pla": "选填，不超过四个字"
						}
					],
					"link": {
						"title": "链接",
						"activeVal": 2,
						"optiops": [
							{
								"type": 0,
								"value": 1,
								"label": "精品推荐"
							},
							{
								"type": 1,
								"value": 2,
								"label": "热门榜单"
							},
							{
								"type": 2,
								"value": 3,
								"label": "首发新品"
							},
							{
								"type": 3,
								"value": 4,
								"label": "促销单品"
							}
						]
					}
				},
				{
					"chiild": [
						{
							"title": "标题",
							"val": "促销单品",
							"max": 4,
							"pla": "选填，不超过四个字"
						},
						{
							"title": "简介",
							"val": "多买多销",
							"max": 4,
							"pla": "选填，不超过四个字"
						}
					],
					"link": {
						"title": "链接",
						"activeVal": 4,
						"optiops": [
							{
								"type": 0,
								"value": 1,
								"label": "精品推荐"
							},
							{
								"type": 1,
								"value": 2,
								"label": "热门榜单"
							},
							{
								"type": 2,
								"value": 3,
								"label": "首发新品"
							},
							{
								"type": 3,
								"value": 4,
								"label": "促销单品"
							}
						]
					}
				}
			],
			numConfig: 9,
			// imgStyle: this.dataConfig.imgStyle.type,
			mbConfig: 0,
			themeColor: "rgba(29,176,252,1)",
			titleShow: true, //标题是否显示
			opriceShow: true, //原价是否显示
			priceShow: true, //价格是否显示
			couponShow: true,//优惠券标签是否显示
			titleConfig: 2, //标题位置
			fontColor: "rgba(253,80,47,1)",
			labelColor: "rgba(29,176,252,1)",
			typeId: '',
			loopData0: [
				{
					lanhuBg0:
						'background: linear-gradient(90deg, #FFE9E9 0%, #FAFAFA 100%); no-repeat',
					slot1: 1,
				},
				{
					lanhuBg0:
						'url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/38e693de009644aa9de2dc6d6f7e747a_mergeImage.png)',
				},
				{
					lanhuBg0:
						'url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/e078bf26e9ad496b98a817de3d08492e_mergeImage.png)',
				},
				{
					lanhuBg0:
						'url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/e3d1a8f4ba114a5aa801bbd7420e44d2_mergeImage.png)',
				},
				{
					lanhuBg0:
						'url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/cf3068f1291645b2a869827e2e33d0a0_mergeImage.png)',
				},
				{
					lanhuBg0:
						'url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/6c93508933d94673bc6b3f0909abb937_mergeImage.png)',
				},
			],
		};
	},
	created () {
		// this.getCategoryTwo(this.currentId)
	},
	methods: {
		clickNav (e) {
			this.typeId = e.id
			this.getGoodsPage(e.id)
		},
		getCategoryTwo (Id) {
			getCategoryTwo({
				parentId: Id
			}).then(res => {
				this.navigationList2 = res.data
				if (res.data.length > 0) {
					this.getGoodsPage(res.data[0].id)
				}
			})
		},
		getGoodsPage (typeId) {
			uni.showLoading({ title: '商品加载中' });
			getGoodsInfo({
				zoneType: 3,
				goodsCategoryId: this.typeId,
				current: 1,
				size: 100
			}).then(res => {
				this.tempArr = []
				this.tempArr = res.data
				uni.hideLoading();
				uni.stopPullDownRefresh()
			})
		},
		// 首发新品切换
		ProductNavTab (type, index) {
			this.ProductNavindex = index;
			this.$emit('changeTab', type);
		},
		goDetail (item) {
			this.$emit('detail', item);
		}
	}
}
</script>

<style lang="scss">
.list-box{
	background: white;

	padding-bottom: 20px;
}
.index-product-wrapper {

	&.on {
		min-height: 1050rpx;
	}

	.nav-bd {
		display: flex;
		align-items: center;
		margin-top: 30rpx;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 25%;

			&.on {
				border-radius: 0;
			}

			.txt {
				font-size: 32rpx;
				color: #282828;
			}

			.label {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 124rpx;
				height: 32rpx;
				margin-top: 5rpx;
				font-size: 24rpx;
				color: #999;
				border-radius: 16rpx;
			}
		}
	}


}




.block_3 {
	background-color: rgba(255, 255, 255, 1);
	margin-top: -1px;
	padding-bottom: 12px;
}

.group_3 {
	margin-bottom: 10px;
	background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/e4f54c9cff7742e682c0d3f8f3808993_mergeImage.png);
	background-size: 100% 100%;
	height: 190px;
	width: 100%;
}

.tag_1 {
	height: 18px;
	margin: 10px;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 6px;
	padding: 1px 6px 1px 6px;
}

.text_6 {
	overflow-wrap: break-word;
	color: rgba(255, 255, 255, 1);
	font-size: 10px;
	font-weight: NaN;
	text-align: center;
	white-space: nowrap;
	line-height: 14px;
}

.group_4 {
	overflow-wrap: break-word;
	color: rgba(255, 150, 0, 1);
	font-size: 10px;
	font-weight: NaN;
	text-align: left;
	white-space: nowrap;
	line-height: 14px;
}

.list_2 {
	width: 100%;
	height: 62px;
}

.text-wrapper_3 {
	height: 52px;
	background-size: 100% 100%;
	margin-right: 8px;
	width: 49px;
	background: linear-gradient(90deg, #FFE9E9 0%, #FAFAFA 100%);
}

.text_7 {
	line-height: 62px;
	overflow-wrap: break-word;
	color: rgba(102, 102, 102, 1);
	font-size: 10px;
	text-align: left;
	white-space: nowrap;
}

.icon_3 {
	width: 12px;
	height: 12px;
	margin: 25px 0 25px 0;
}

.box_3 {
	width: 100%;
	align-self: center;
	margin-top: 4px;
	padding: 0 10px;
}

.text-group_11 {
	flex-direction: column;
}

.text-wrapper_4 {
	height: 24px;
	margin-bottom: 10px;
	overflow-wrap: break-word;
	letter-spacing: 0.20000000298023224px;
	font-family: PingFangSC-Medium;
	font-weight: 500;
	text-align: left;
	line-height: 24px;
}

.text_8 {
	overflow-wrap: break-word;
	color: rgba(178, 35, 56, 1);
	font-size: 12px;
	font-family: PingFangSC-Medium;
	font-weight: 500;
	text-align: left;
	line-height: 24px;
}

.text_9 {
	overflow-wrap: break-word;
	color: rgba(178, 35, 56, 1);
	font-size: 18px;
	font-family: DINAlternate-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 24px;
}

.text_10 {
	overflow-wrap: break-word;
	color: rgba(178, 35, 56, 1);
	font-size: 17px;
	font-family: DINAlternate-Bold;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
	line-height: 24px;
}

.text_11 {
	width: 64px;
	margin: 3px 0 3px 54px;
}

.text_12 {}

.text_13 {
	width: 100%;
}

.icon_4 {
	width: 12px;
	height: 12px;
	margin: 33px 0 5px 0;
}

.group_6 {
	box-sizing: border-box;
    background-color: rgba(255,247,248,1.000000);
    border-radius: 6px;
		width: 100%;
		height: 25px;
		line-height: 25px;
    align-self: center;
    margin-top: 8px;
		padding: 0 10px;
    flex-direction: row;
    display: flex;
	border:1px solid dashed;
	margin-bottom: 5px;
}

.avatar-group_1 {
	width: 50px;
	height: 20px;
}

.text_14 {
}

.text_15 {
}

.image-text_11 {
	flex-grow: 1;
}

.icon_5 {
	width: 12px;
	height: 12px;
	margin: 1px 0 1px 0;
}

.text-group_4 {
	overflow-wrap: break-word;
	color: rgba(255, 150, 0, 1);

}

.text_16 {
}

.group_7 {
	overflow-wrap: break-word;
	color: rgba(153, 153, 153, 1);
	font-size: 12px;
	font-weight: NaN;
	text-align: center;
	white-space: nowrap;
	line-height: 22px;
	height: 55px;
	padding:10px;
	margin-bottom: 10px;
	background: rgb(255,247,248);
	border:1px solid dashed;
}

.text-group_12 {
	flex-direction: column;
}

.text_17 {
	overflow-wrap: break-word;
	color: rgba(102, 102, 102, 1);
	font-size: 10px;
	font-weight: NaN;
	text-align: left;
	white-space: nowrap;
	line-height: 18px;
	margin: 0 89px 0 1px;
}

.text_18 {
	overflow-wrap: break-word;
	color: rgba(178, 35, 56, 1);
	font-size: 10px;
	font-family: PingFangSC-Medium;
	font-weight: 500;
	text-align: left;
	white-space: nowrap;
	line-height: 16px;
	margin-top: 2px;
}

.image-text_12 {}

.icon_6 {
	width: 14px;
	height: 14px;
	margin: 0 16px 0 17px;
}

.text-group_6 {
	overflow-wrap: break-word;
	color: rgba(102, 102, 102, 1);
	font-size: 10px;
	font-weight: NaN;
	text-align: left;
	white-space: nowrap;
	line-height: 18px;
	margin-top: 4px;
}

.box_4 {
	width: 100%;
	align-self: center;
	margin-top: 8px;
	padding: 0 10px;
}

.image-text_13 {
}

.icon_7 {
	width: 14px;
	height: 14px;
	margin: 4px 0 4px 0;
}

.text-group_7 {
	overflow-wrap: break-word;
	color: rgba(153, 153, 153, 1);
	font-size: 12px;
	font-weight: NaN;
	text-align: center;
	white-space: nowrap;
	line-height: 22px;
}

.text_19 {
	overflow-wrap: break-word;
	color: rgba(51, 51, 51, 1);
	font-size: 12px;
	font-weight: NaN;
	text-align: left;
	white-space: nowrap;
	line-height: 22px;
}

.image-text_14 {
	margin-left: 20px;
}

.text-group_8 {
	overflow-wrap: break-word;
	color: rgba(153, 153, 153, 1);
	font-size: 12px;
	font-weight: NaN;
	text-align: center;
	white-space: nowrap;
	line-height: 22px;
}

.icon_8 {
	width: 14px;
	height: 14px;
	margin: 4px 0 4px 0;
}

.box_5 {
	width: 100%;
	align-self: center;
	margin-top: 12px;
	padding: 0 10px;
}

.button_1 {
	background-color: rgba(241, 248, 229, 1);
	border-radius: 4px;
	padding: 6px 47px 6px 47px;
}

.image-text_15 {
	width: 70px;
}

.icon_9 {
	width: 14px;
	height: 14px;
	margin: 2px 0 2px 0;
}

.text-group_9 {
	overflow-wrap: break-word;
	color: rgba(117, 190, 0, 1);
	font-size: 12px;
	font-weight: NaN;
	text-align: center;
	white-space: nowrap;
	line-height: 18px;
}

.button_2 {
	background-color: rgba(247, 233, 235, 1);
	border-radius: 4px;
	padding: 6px 47px 6px 47px;
}

.image-text_16 {    color: rgba(178,35,56,1);
}

.icon_10 {
	width: 14px;
	height: 14px;
	margin: 2px 0 2px 0;
}

.text-group_10 {
	overflow-wrap: break-word;
	color: rgba(178, 35, 56, 1);
	font-size: 12px;
	font-weight: NaN;
	text-align: center;
	white-space: nowrap;
	line-height: 18px;
}


.flex-row,
.flex-col {
	display: flex;
}</style>