YuKangTang/components/goodClass/index.vue

<template>
	<view class="goodsList">
		<view class="item acea-row row-between-wrapper" v-for="(item,index) in tempArr" :key='index'
			@click="goDetail(item)">
			<view class="pictrue">
				<span class="pictrue_log pictrue_log_class" v-if="item.activity && item.activity.type === '1'">{{$t(`秒杀`)}}</span>
				<span class="pictrue_log pictrue_log_class" v-if="item.activity && item.activity.type === '2'">{{$t(`砍价`)}}</span>
				<span class="pictrue_log pictrue_log_class" v-if="item.activity && item.activity.type === '3'">{{$t(`拼团`)}}</span>
				<image :src="item.image" mode=""></image>
			</view>
			<view class="pictxt">
				<view class="text line2">{{item.store_name}}</view>
				<view class="bottom acea-row row-between-wrapper">
					<view class="money font-color">
						<text class="sign">{{$t(`￥`)}}</text>{{item.price}}
						<!-- <span class="vip" v-if="item.vip_price">
							<image src="../../static/images/vip01.png"></image>
							￥{{item.vip_price}}
						</span>
						<text class="y_money" v-else>￥{{item.ot_price}}</text> -->
					</view>
					<view v-if="item.stock>0">
						<view class="iconfont icon-gouwuche6 acea-row row-center-wrapper"
							v-if="item.activity && (item.activity.type === '1' || item.activity.type === '2' || item.activity.type === '3')">
						</view>
						<view v-else>
							<!-- 多规格 -->
							<view class="bnt acea-row row-center-wrapper" @click.stop="goCartDuo(item)"
								v-if="item.spec_type">
								{{$t(`选规格`)}}
								<text class="num" v-if="isLogin && item.cart_num">{{item.cart_num}}</text>
							</view>
							<!-- 单规格 -->
							<view class="iconfont icon-gouwuche6 acea-row row-center-wrapper"
								v-if="!item.spec_type && !item.cart_num" @click.stop="goCartDan(item,index)"></view>
							<view class="cart acea-row row-middle" v-if="!item.spec_type && item.cart_num">
								<view class="pictrue iconfont icon-jianhao acea-row row-center-wrapper"
									@click.stop="CartNumDes(index,item)"></view>
								<view class="num">{{item.cart_num}}</view>
								<view class="pictrue iconfont icon-jiahao acea-row row-center-wrapper"
									@click.stop="CartNumAdd(index,item)"></view>
							</view>
						</view>
					</view>
					<view class="bnt acea-row row-center-wrapper end" v-else>{{$t(`已售罄`)}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'd_goodList',
		props: {
			dataConfig: {
				type: Object,
				default: () => {}
			},
			tempArr: {
				type: Array,
				default: []
			},
			isLogin: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				addIng: false
			};
		},
		created() {},
		mounted() {},
		methods: {
			goDetail(item) {
				this.$emit('detail', item);
			},
			goCartDuo(item) {
				this.$emit('gocartduo', item);
			},
			goCartDan(item, index) {
				this.$emit('gocartdan', item, index);
			},
			CartNumDes(index, item) {
				if (this.addIng) return
				this.addIng = true
				this.$emit('ChangeCartNumDan', false, index, item);
			},
			CartNumAdd(index, item) {
				if (this.addIng) return
				this.addIng = true
				this.$emit('ChangeCartNumDan', true, index, item);
			}
		}
	};
</script>

<style lang="scss">
	.goodsList {
		padding: 0 30rpx;

		.item {
			width: 100%;
			box-sizing: border-box;
			margin-bottom: 63rpx;

			.pictrue {
				width: 140rpx;
				height: 140rpx;
				border-radius: 10rpx;
				position: relative;
				border-radius: 22rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 22rpx;
				}
			}

			.pictxt {
				width: 372rpx;

				.text {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.bottom {
					margin-top: 22rpx;

					.money {
						font-size: 34rpx;
						font-weight: 800;

						.sign {
							font-size: 24rpx;
						}

						.y_money {
							font-size: 20rpx;
							color: #999999;
							margin-left: 14rpx;
							font-weight: normal;
							text-decoration: line-through;
						}

						.vip {
							font-size: 22rpx;
							color: #333333;
							font-weight: normal;
							margin-left: 14rpx;

							image {
								width: 38rpx;
								height: 18rpx;
								margin-right: 6rpx;
							}
						}
					}

					.cart {
						height: 46rpx;

						.pictrue {
							color: var(--view-theme);
							font-size: 46rpx;
							width: 46rpx;
							height: 46rpx;
							text-align: center;
							line-height: 46rpx;

							&.icon-jiahao {
								color: var(--view-theme);
							}
						}

						.num {
							font-size: 30rpx;
							color: #333333;
							font-weight: bold;
							width: 60rpx;
							text-align: center;
						}
					}

					.icon-gouwuche6 {
						width: 46rpx;
						height: 46rpx;
						background-color: var(--view-theme);
						border-radius: 50%;
						color: #fff;
						font-size: 30rpx;
					}

					.bnt {
						padding: 0 20rpx;
						height: 45rpx;
						background: var(--view-theme);
						border-radius: 23rpx;
						font-size: 22rpx;
						color: #fff;
						position: relative;

						&.end {
							background: #cccccc;
						}

						.num {
							min-width: 14rpx;
							background-color: #fff;
							color: var(--view-theme);
							border-radius: 15px;
							position: absolute;
							right: -13rpx;
							top: -11rpx;
							font-size: 16rpx;
							padding: 0 10rpx;
							border: 1px solid var(--view-theme);
						}
					}
				}
			}
		}
	}
</style>