ds_mobile_app/mobile/components/store_item.vue

<!-- 店铺组件-->
<template name="storeItem">
	<view  class="shop_pre">
		<view class="pre_top" :data-vid="store_info.vid">
			<view class="shop_left">
				<view class="shop_avatar_img">
					<image class="shop_avatar" mode="aspectFill" :src="store_info.storeLogoUrl"></image>
				</view>
				<view class="shop_des">
					<view class="des_top">
						<text class="shop_name">{{store_info.storeName}}</text>
					</view>
					<view class="des_bottom">
						<text class="shop_type" v-if="store_info.isOwnShop == 1">自营</text>
						<text class="popularity">关注{{store_info.followNumber}}</text>
						<text class="line">|</text>
						<text class="payer_number">已售{{store_info.orderFinishedCount}}</text>
					</view>
				</view>
			</view>
			<view class="go_shop" @click='goStoreDetail(store_info.storeId)'>进店</view>
		</view>
		<view class="pre_content" v-if="store_info.goodsListVOList.length">
			<view v-for="(item1, index2) in store_info.goodsListVOList" :key="index2" class="commodity" v-if="index2 < 3" :data-gid="item1.goodsId"
			 @tap="goods_detail(item1)">
				<view class="commodity_images">
					<image :src="item1.goodsImage" mode="aspectFit" class="commodity_img"></image>
				</view>
				<view class="commodity_price"><text>￥</text><text>{{$getPartNumber(item1.goodsPrice,'int')}}</text>.<text>{{$getPartNumber(item1.goodsPrice,'decimal')}}</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "goodsItemH",
		data() {
			return {

			}
		},
		props: {
			store_info: {
				type: Object,
				value: {}
			},
		},
		methods: {
			//进入商品详情页
			goods_detail(goods_info) {
				uni.navigateTo({
					url: '/pages/product/detail?productId=' + goods_info.defaultProductId + '&goodsId='+ goods_info.goodsId
				})
			},
			//跳转店铺详情页面
			goStoreDetail(vid) {
				uni.navigateTo({
					url: '/pages/store/shopHomePage?vid=' + vid
				})
			}
		}
	}
</script>

<style lang='scss'>
	.shop_lists {
		margin-top: 182rpx;
		width: 100%;
		background: #F5F5F5;
		padding: 20rpx 0;
		box-sizing: border-box;
		height: 100%;
	}
	
	.shop_pre {
		width: 710rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 15rpx;
		margin: 0 auto;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		padding: 0 21rpx;
	}
	
	.pre_top {
		display: flex;
		width: 100%;
		height: 140rpx;
		justify-content: space-between;
		align-items: center;
	}
	
	.shop_left {
		display: flex;
		align-items: center;
	}
	
	.shop_avatar_img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		background: #F8F8F8;
	}
	
	.shop_avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	
	.shop_des {
		display: flex;
		flex-direction: column;
	}
	
	.des_top {
		display: flex;
		margin-bottom: 20rpx;
	}
	
	.shop_name {
		max-width: 323rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(45, 45, 45, 1);
		line-height: 32rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}
	
	.shop_type {
		width: 56px;
		height: 30px;
		background: #FB1B1B;
		border-radius: 15px;
		font-size: 22px;
		font-family: PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 30px;
		text-align: center;
		transform: scale(0.5);
		margin-left: -14px;
		margin-top: -7px;
	}
	
	.des_bottom {
		display: flex;
	}
	
	.popularity {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #999999;
		line-height: 32rpx;
		margin-left: -10rpx;
	}
	
	.line {
		height: 24rpx;
		color: #999999;
		font-size: 24rpx;
		margin: 0 15rpx;
	}
	
	.payer_number {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #999999;
		line-height: 32rpx;
	}
	
	.go_shop {
		width: 100rpx;
		height: 50rpx;
		border: 1rpx solid #FF0000;
		border-radius: 25rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #FB1B1B;
		line-height: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.pre_content {
		display: flex;
	}
	
	.commodity {
		width: 216rpx;
		height: 216rpx;
		position: relative;
		margin-right: 10rpx;
		margin-bottom: 21rpx;
		background: #F5F5F5;
		border-radius: 10rpx;
	}
	
	.commodity:nth-of-type(3) {
		margin-right: 0;
	}
	
	.commodity_images {
		width: 216rpx;
		height: 216rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		background: #F8F8F8;
	}
	
	.commodity_img {
		width: 216rpx;
		height: 216rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}
	
	.commodity_price {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 24rpx;
		position: absolute;
		width: 100%;
		bottom: 0;
		z-index: 7;
		text-align: center;
		height: 36rpx;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 0 0 10rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.commodity_price text:nth-child(1),
	.commodity_price text:nth-last-child(1) {
		font-size: 20rpx;
	}
	
	.filter_title {
		margin-top: 40rpx;
		margin: 28rpx;
	}
	
	.default {
		color: #dddddd !important;
	}
	
	.default .iconfont {
		color: #dddddd !important;
	}
	.attributr_sel_con{
		.attributr_sel_text{
			color: red;
		}
		
		font-size: 12rpx;
	}
</style>