groupon-wx/pages/index/diy/components/goodListMall.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" :class='tempArr.length > 0 ? "fadeIn on" : ""'>
			<view class="item" v-for="(item, index) in tempArr" :key="index" @click="goDetail(item)">
				<view class="pictrue">
					<span class="pictrue_log pictrue_log_class" :style="'background-color:' + labelColor"
						v-if="item.activity && item.activity.type === '1'">{{ $t(`秒杀`) }}</span>
					<span class="pictrue_log pictrue_log_class" :style="'background-color:' + labelColor"
						v-if="item.activity && item.activity.type === '2'">{{ $t(`砍价`) }}</span>
					<span class="pictrue_log pictrue_log_class" :style="'background-color:' + labelColor"
						v-if="item.activity && item.activity.type === '3'">{{ $t(`拼团`) }}</span>
					<image :src="item.goodsCover" mode="aspectFit"></image>
					<!-- <image src="../../../../static/goods@2x.png" mode="aspectFit"></image> -->
				</view>
				<view class="text-info">
					<view class="title" v-if="titleShow">
						<u-text :prefixIcon="item.isHot == 1?'bookmark':''" iconStyle="font-size: 16px; color:red;min-height: 30px;" :lines="2" bold block
							size="12" :text="item.goodsName"></u-text>
					</view>
					<view class="tags" v-if="opriceShow">赠送{{ item.obtainIntegral }}红积分</view>
					<view class="price" :style="{ color: fontColor }">
						<view v-if="priceShow">
							<text>{{ $t(`￥`) }}</text>{{ item.salePrice }}
						</view>
						<view class="txt" :style="'border:1px solid ' + labelColor + ';color:' + labelColor"
							:class="priceShow ? '' : 'on'" v-if="item.isNew">{{ $t(`新`) }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getGoodsPage, 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)"
		};
	},
	created() {
		// this.getCategoryTwo(this.currentId)
	},
	methods: {
		clickNav(e) {
			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) {
			getGoodsPage({
				type: typeId,
				size:999999
			}).then(res => {
				this.tempArr = []
				this.tempArr = res.data
			})
		},
		// 首发新品切换
		ProductNavTab(type, index) {
			this.ProductNavindex = index;
			this.$emit('changeTab', type);
		},
		goDetail(item) {
			this.$emit('detail', item);
		}
	}
}
</script>

<style lang="scss">
.index-product-wrapper {
	margin: 30rpx 20rpx 0 20rpx;

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

	.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;
			}
		}
	}

	.list-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 30rpx;

		.item {
			width: 345rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;

			.pictrue_log {
				width: 92rpx;
				height: 44rpx;
				font-size: 26rpx;
				line-height: 44rpx;
			}

			image {
				width: 100%;
				height: 346rpx;
				display: block;
			}

			.text-info {
				padding: 10rpx 20rpx 15rpx;

				.title {
					color: #222222;
				}

				.tags {
					display: inline-block;
					font-size: 20rpx;
					padding: 6rpx;
					background-color: #FCE9EC;
					color: #EB4C63;
					margin: 6rpx 0;
				}

				.old-price {
					margin-top: 4rpx;
					font-size: 26rpx;
					color: #f51414;
					// text-decoration: line-through;

					text {
						margin-right: 2px;
						font-size: 20rpx;
					}
				}

				.price {
					display: flex;
					align-items: flex-end;
					font-size: 36rpx;
					font-weight: 550;

					text {
						padding-bottom: 4rpx;
						font-size: 26rpx;
						font-weight: normal;
					}

					.txt {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 28rpx;
						height: 28rpx;
						margin-left: 15rpx;
						margin-bottom: 10rpx;
						border-radius: 4rpx;
						font-size: 20rpx;
						font-weight: normal;

						&.on {
							margin-left: 0;
						}
					}
				}
			}
		}

		&.on {
			display: flex;
		}
	}
}
</style>