shop-applet/components/goodsCard.vue

<template>
	<view>
		<block>
			<view class='lists'>
				<view v-for="(item,index) in productList" class="card" :key="index" @click="godDetail(item)">
					<view class='pictrue on'>
						<u-image :src='item.image' width="336.45rpx" height="336.45rpx"> </u-image>
					</view>
					<view class="goods_content">
						<view class='name line1'>
							<text class="text-ellipsis">{{item.store_name}}</text>
						</view>
						<view class="item_tags">
							<text v-if="item.merchant.type_name && item.product_type == 0"
								class="store_type">{{item.merchant.type_name}}</text>
							<text v-else-if="item.merchant.is_trader && item.product_type == 0"
								class="store_type">自营</text>
							<text v-if="item.product_type != 0"
								:class="'font_bg-red bt-color type'+item.product_type">{{item.product_type == 1 ? "秒杀" : item.product_type == 2 ? "预售" : item.product_type == 3 ? "助力" : item.product_type == 4 ? "拼团" : ""}}</text>
							<text class="tags_item ticket" v-if="item.issetCoupon">领券</text>
							<text class="tags_item delivery" v-if="item.delivery_free == 1">包邮</text>
						</view>
						<view class="score"><text
								style="font-style: italic;color: #FF6D20;margin-right: 20rpx;font-size: 30rpx;">{{item.rate}}</text>
							{{item.reply_count}}评论
						</view>
						<view class='money'>￥
							<text
								class='num'>{{item.price.substring(0, item.price.length - 2)}}</text><text>{{item.price.slice(-2)}}</text>
						</view>
						<view class="company" v-if="item.merchant" @click.stop="goShop(item.mer_id)">
							<text class="line1">{{item.merchant.mer_name}}</text>
							<view class="flex">
								<text class="iconfont icon-xiangyou"></text>
							</view>
						</view>
					</view>
					<!-- 返佣 -->
					<!-- <block v-if="item.max_extension>0 && (item.product_type == 0 || item.product_type == 2)">
						<view class="foot-bar on">
							最高赚 ¥{{item.max_extension}}
						</view>
					</block> -->
				</view>
			</view>

			<!-- 	<view class='noCommodity' v-if="productList.length==0">
				<view class='pictrue' style=" margin: 60rpx auto;">
					<image src='/static/images/noCart.png'></image>
					<view>暂无商品</view>
				</view>
				<recommend v-if="recommend_switch == 1" :hostProduct="hostProduct" :isLogin="isLogin"></recommend>
			</view> -->
		</block>



	</view>
</template>

<script>
	import {
		cloudWarehouse
	} from '@/api/api.js'
	import {
		goShopDetail
	} from '@/libs/order.js'
	export default {
		name: "goodsCard",
		props: {
			where: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				is_switch: false,
				productList: "",
			};
		},
		mounted() {
			this.$watch('where', (newValue, oldValue) => {
				newValue.category_id ? this.get_product_list() : this.productList = []

			}, {
				deep: true
			});
		},
		methods: {

			test() {
				// this.get_product_list()
				// console.log(this.where)
			},
			godDetail(item) {
				goShopDetail(item, this.uid).then(res => {
					if (this.isLogin) {
						initiateAssistApi(item.activity_id).then(res => {
							let id = res.data.product_assist_set_id;
							uni.hideLoading();
							uni.navigateTo({
								url: '/pages/activity/assist_detail/index?id=' + id
							});
						}).catch((err) => {
							uni.showToast({
								title: err,
								icon: 'none'
							})
						});
					} else {
						this.isAuto = true;
						this.isShowAuth = true
					}

				})
			},
			// 去店铺
			goShop(id) {
				if (this.hide_mer_status != 1) {
					uni.navigateTo({
						url: `/pages/store/home/index?id=${id}`
					})
				}
			},
			get_product_list: function() {
				let that = this;
				cloudWarehouse(that.where).then(res => {
					that.productList = res.data.list
				}).catch(err => {
					that.loading = false;
					that.loadTitle = '加载更多';
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.lists {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: #F4F7FE;

		.card {
			border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
			overflow: hidden;
			margin-top: 20rpx;
			background-color: white;

			// width: 336.45rpx;
			.store_type {
				background: linear-gradient(to bottom, #6DD5FA, #3274F9);
				color: white;
				border-radius: 10.51rpx 10.51rpx 10.51rpx 10.51rpx;
				padding: 2rpx 8rpx;
				font-size: 22rpx;
			}

			.goods_content {
				background-color: white;
				padding: 25rpx 15rpx;
			}

			.name {
				font-weight: bold;

				.textellipsis {
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					// font-weight: bold;
				}
			}

			.item_tags {
				margin: 5rpx 0;
			}

			.score {
				color: #B3B3B3;
				font-size: 22.78rpx;

			}

			.money {
				color: red;
				margin: 5rpx 0;

				.num {
					font-size: 36rpx;
					font-weight: bold;
				}
			}

			.company {
				background-color: #F4F7FE;
				display: flex;
				justify-content: space-between;
				padding: 5rpx 14rpx;
				border-radius: 19.28rpx 19.28rpx 19.28rpx 19.28rpx;


			}

			// width: 40vw;

		}
	}
</style>