qzw_xcx/component/shopList.vue

<template>
	<view class="page">
		<view class="uni-product-list">
			<view style="padding: 20upx;" v-for="(product,index) in productList" :key="index" @click="goshop(product)">
				<view class="image-view">												
					<image  class="uni-product-image" :src="pictureUrl+'/uploads/home/store/goods/' + product.goods_image.substr(0, product.goods_image.indexOf('\_')) + '/' + product.goods_image "></image>
				</view>
				<view class="uni-product-title textover">{{product.goods_name}}</view>
				<view class="uni-product-price">
					<text class="uni-product-price-original" style="color:#D9332E!important;font-weight: bold;">￥{{product.goods_price}}</text>
					<text class="uni-product-price-favour">￥{{product.goods_marketprice}}</text>
				</view>
				<view class="tags" v-if="product.goods_advword!=''">{{product.goods_advword}}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		productList: {
		  type: Array
		},
		// 酒店总id
		store_id: {
			type: Number
		}
	},
    data() {
        return {
            title: 'product-list',
            renderImage: false,
			pictureUrl: this.pictureUrl
        };
    },
    methods: {
       goshop(e) {
		   let goods_commonid = e.goods_commonid; //商品公共ID
		   let user_store_id = this.store_id; //酒店ID
		   uni.navigateTo({
		   	url:`/pages/index/shop?id=${goods_commonid}&store_id=${user_store_id}`
		   })
	   }
    },
    onLoad() {
   
    },
    onPullDownRefresh() {
       
    },
    onReachBottom() {
       
    }
};
</script>

<style>
	.textover {
		overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.tags {
		display:inline-block!important; 
		border: 1px solid #D9332E;
		color: #D9332E;
		text-align: center;
		line-height: 45upx;
		width:auto;
		padding: 0 10upx;
		margin-top: 10upx;
		border-radius: 6upx;
		font-size: 22upx;
	}
</style>