hlm_pl_mall_h5/pages/home/index/IndexPromotionList.vue

<template>
	<view class="div promotion-list">
		<view class="div promotion-list-header" @click="promotionListClick">
			<text class="span header-title">{{ title }}</text>
			<text class="span header-more">更多</text>
		</view>
		<view class="div promotion-list-body">
			<view class='promotion-item' v-for="(item,index) in items" :key="index" @click="productClick(item.goods_id)">
				<view class='img' :style="'width:'+windowWidth+'px;height:'+windowWidth+'px'"><image mode="aspectFit" :src="item.goods_image"/></image></view>
				<view class='name'>{{item.goods_name}}</view>
				<view class='price-wrapper'>
					<view class='xianshigoods_price'>￥{{item.xianshigoods_price}}</view>
					<view class='goods_price'>￥{{item.goods_price}}</view>
				</view>
				<view class='end-time'>
					<view class="left">截止</view>
					<view class="right">{{item.xianshigoods_end_time}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { urlencode,getFontSize } from '@/util/common'
import IndexProductBody from './IndexProductBody'

export default {
  name: 'IndexProductList',
  data () {
    return {}
  },
  props: ['items', 'title', 'type'],
  components: {
    IndexProductBody
  },
  computed: {
    windowWidth: function () {
      const res = uni.getSystemInfoSync()
      var width=res.windowWidth
      var size=getFontSize()
      return (width-3*.6*size)/3
    },
  },
  methods: {
    promotionListClick: function () {
      uni.navigateTo({ url: '/pages/home/goodslist/Goodslist'+'?'+urlencode( { xianshi: 1 })})
    },
	productClick(goods_id){
		 uni.navigateTo({ url: '/pages/home/goodsdetail/Goodsdetail'+'?'+urlencode( { goods_id: goods_id } )})
	}
  }
}
</script>

<style lang="scss" scoped>
.promotion-list {
	background: #ffffff;
	margin-top:$modelSpace;
	padding: 0 $pageSpace;
  .promotion-item{width:32%;margin-right: 2%;}
  .promotion-item:nth-child(3){margin-right: 0;}
	.promotion-list-header {
		display: flex;
		height:2rem;
		justify-content: space-between;
		align-items: center;
		margin-bottom:.5rem;
		.header-title {
			font-size:$mainFontSize;
			color: #F08B1A;
			font-weight:700;
			padding: 0 .5rem;
		}
		.header-more{
			font-size:$fontSize;
			color:$descTextColor;
		}
	}
	.promotion-list-body {
		display: flex;
		flex-wrap: wrap;
		.promotion-item{
			.img{
				border-radius: .5rem;
				overflow: hidden;
			}
			.name{
				font-size: 0.64rem;
				white-space: nowrap;
				text-align: center;
				color: #333;
				height: 1rem;
				line-height: 1rem;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 1;
				padding-top: .3rem;
			}
			.price-wrapper{
				font-size: 0.45rem;
				padding: .1rem 0;
				margin: .4rem 0;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				background: linear-gradient(
				125deg, #E1102D 50.5%, #fff 50.5%, #E1102D 50.5%, #fff 50.5%);
				border-radius: .2rem;
				border: 1px solid #E1102D;
				color: #fff;
				.xianshigoods_price{
					display: flex;
					flex: 1;
					width: 50%;
					justify-content: center;
				}
				.goods_price{
					display: flex;
					color: #848484;
					text-decoration: line-through;
					width: 50%;
					justify-content: center;
				}
			}
			.end-time{
				display: flex;
				font-size: 0.45rem;
				color: #F08B1A;
				border: 1px solid #F08B1A;
				border-radius: .3rem;
				width: 80%;
				margin: 0 auto;
				height: 1rem;
				line-height: 1rem;
				overflow: hidden;
				.left{
					background: #feeedd;
					border-right: 1px solid #F08B1A;
					border-radius: 6px;
					width: 30%;
					text-align: center;
				}
				.right{
					margin-left: .2rem;
					width: 70%;
					text-align: center;
				}
			}
		}
	}
	
}
</style>