cyzh-SoundOfMusic-H5/components/goods/goods.vue

<template>
	<view >
		<view class="recommend-info" style="background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#f1f1f1))">
		  <view class="goods-list">
		    <view  class="list" v-for="(item,index) in goodsList" :key="index">
		      <view class="pictrue">
		        <image :src="item.image" mode="heightFix"></image>
		      </view>
		      <view class="title-tag">
		        <view class="tag">
		          {{item.name}}
		        </view>
		      </view>
		      <view class="price-info">
		        <view class="user-price">
		          <text class="min">￥</text>
		          <text class="max">{{item.cashValue}}/{{item.equalPoints}}积分</text>
		        </view>
		      </view>
			  <view class="bottom">
			  	<button class="cu-btn round text-white theme-bg-color" style="width: 140upx;height: 50upx;" @click="navTap(item.id)">兑换</button>
			  </view>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			goodsList: {
				type: Array,
				default: () => {
					return []
				}
			},
			activityId: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			navTap(id) {
				uni.navigateTo({
					url:"/pages/activityList/goods/detail?id=" + id + "&activityId=" + this.activityId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 为你推荐 */
	.recommend-info{
		padding-top: 30rpx;
	  width: 100%;
	  .recommend-title{
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    width: 100%;
	    height: 100rpx;
	    .title{
	      display: flex;
	      align-items: center;
	      image{
	        width: 416rpx;
	        height: 40rpx;
	      }
	    }
	  }
	  .goods-list{
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-between;
	    padding: 0 30rpx;
	    .list{
	      width: 49%;
	      height: 510rpx;
	      margin-bottom: 20rpx;
	      background-color: #FFFFFF;
	      border-radius: 10rpx;
	      overflow: hidden;
	      .pictrue{
	        display: flex;
	        justify-content: center;
	        width: 100%;
	        image{
	          height: 320rpx;
	        }
	      }
	      .title-tag{
	        // display: flex;
	        height: 70rpx;
	        padding: 20rpx;
	        .tag{
	          float: left;
	          margin-right: 10rpx;
	          overflow: hidden;
	          text-overflow: ellipsis;
	          display: -webkit-box;
	          -webkit-line-clamp: 2;
	          -webkit-box-orient: vertical;
	          white-space: normal;
	          font-size: 26rpx;
	          line-height: 40rpx;
	          text{
	            font-size: 24rpx;
	            color: #FFFFFF;
	            padding: 4rpx 16rpx;
	            background: #fe3f11;
	            border-radius: 6rpx;
	            margin-right: 10rpx;
	          }
	        }
	      }
	      .price-info{
	        display: flex;
	        flex-wrap: wrap;
	        align-items: center;
	        justify-content: start;
	        padding: 0 20rpx;
	        height: 50rpx;
	        .user-price{
	          display: flex;
	          align-items: center;
	          text{
	            color: #ff587f;
	          }
	          .min{
	            font-size: 24rpx;
	          }
	          .max{
	            font-size: 32rpx;
	          }
	        }
	        .vip-price{
			  padding-left: 20rpx;
	          display: flex;
	          align-items: center;
	          image{
	            width: 26rpx;
	            height: 26rpx;
	            margin-right: 10rpx;
	          }
	          text{
				text-decoration: line-through;
	            color: #8c8c8c;
	            font-size: 24rpx;
	          }
	        }
	      }
		  .bottom{
			  margin: 10rpx 0;
			  display: flex;
			  justify-content: center;
			  align-items: center;
		  }
	    }
	  }
	}

</style>