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
		}
	},
    data() {
        return {
            title: 'product-list',
            renderImage: false,
			pictureUrl: this.pictureUrl
        };
    },
    methods: {
       goshop(e) {
		   let id = e.goods_commonid;
		   let store_id = e.store_id;
		   uni.navigateTo({
		   	url:`/pages/index/shop?id=${id}&store_id=${store_id}`
		   })
	   }
    },
    onLoad() {
   
    },
    onPullDownRefresh() {
       
    },
    onReachBottom() {
       
    }
};
</script>

<style>
	.textover {
		text-overflow:ellipsis;  /* ellipsis:显示省略符号来代表被修剪的文本  string:使用给定的字符串来代表被修剪的文本*/ 
		white-space: nowrap;   /* nowrap:规定段落中的文本不进行换行   */ 
		overflow: hidden; /*超出 */ 
	    display: inline-block;	 /*display:box的时候省略好不出现*/ 
	}
	.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>