zsw-farm-bxg/components/PromotionGood.vue

<template>
  <view>
    <!-- <view class="sh-title-card mb10">
      <view class="title-box">
        <image class="title-bg" :src="`${$VUE_APP_RESOURCES_URL}/images/title1.png`" mode="aspectFill" />
        <view class="title-text">精选</view>
        <view class="title-text" :style="{ color: detail.color }">为你推荐</view>
      </view>
    </view> -->
    <!-- <view class="hot-goods mx20 mb10"> -->
      <view class="goods-list acea-row row-between">
        <view class="goods-item" v-for="(item, promotionGoodIndex) in benefit" :key="promotionGoodIndex" @tap="routerGo(item)">
          <!-- <view class="goods-box"> -->
            <view class="img-box">
              <!-- <image class="tag-img" :src="item.image" mode=""></image> -->
              <image class="img"  :src="item.image" lazy-load mode="aspectFill"></image>
            </view>
            <!-- <view class="tip one-t">{{ item.storeName }}</view> -->
            <view class="name more-t">{{ item.storeName }}</view>
            <view class="price-box">
              <!-- <view class="flex x-bc align-end"> -->
                <view class="current" v-if="!isIntegral">¥{{ item.price }}<text>¥{{item.otPrice}}</text></view>
                <view class="current" v-if="isIntegral">{{ item.integral }}积分</view>
                <!-- <view class="sales miso-font">仅剩：{{ item.stock }}{{ item.unitName }}</view> -->
              <!-- </view> -->
              <!-- <view class="x-f tag-box">
                <view class="discount">新人礼</view>
								<view class="discount">满100减60</view>
              </view> -->
            </view>
          <!-- </view> -->
        </view>
      </view>
    <!-- </view> -->
  </view>
</template>
<script>
export default {
  name: 'PromotionGood',
  props: {
		benefit: {
			type: Array,
			default: () => [],
		},
		isIntegral: {
			type: Boolean,
			default: false,
		}
	},
  data: function() {
    return {}
  },
  methods: {
    routerGo(item) {
			if(this.isIntegral) {
				this.$yrouter.push({
				  path: '/pages/shop/IntegralGoodsCon/index',
				  query: {
				    id: item.id,
				  },
				})
			} else {
				this.$yrouter.push({
					path: '/pages/shop/GoodsCon/index',
					query: {
						id: item.id,
					},
				})
			}
      
    },
  },
  mounted() {},
}
</script>

<style lang="scss">
// .sh-title-card {
//   width: 750rpx;
// }

// .title-box {
//   width: 710rpx;
//   height: 88rpx;
//   margin: 0 auto;
//   position: relative;
//   border-radius: 30rpx;

//   .title-bg {
//     width: 100%;
//     height: 100%;
//   }

//   .title-text {
//     position: absolute;
//     top: 50%;
//     left: 50%;
//     transform: translate(-50%, -50%);
//     font-weight: bold;
//   }
// }

// .goods-box {
//   width: 690rpx;
//   background: #fff;
//   padding-bottom: 20rpx;
//   border-radius: 20rpx;
//   overflow: hidden;

  .img-box {
		width: 332rpx;
		height: 316rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
    // width: 690rpx;
    // height: 345rpx;
    overflow: hidden;
    // position: relative;

    .tag-img {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 2;
      width: 80rpx;
      height: 40rpx;
    }

    .img {
      width: 100%;
      height: 100%;
      background-color: #fff;
    }
  }

  // .tip {
  //   width: 690rpx;
  //   line-height: 56rpx;
  //   background: rgba(246, 242, 234, 1);
  //   font-size: 22rpx;
  //   font-family: PingFang SC;
  //   font-weight: 400;
  //   color: rgba(168, 112, 13, 1);
  //   padding: 0 20rpx;
  // }

  .name {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #3A3A3C;
		line-height: 38rpx;
    height: 76rpx;
    margin: 10rpx 16rpx;
  }

  .price-box {
    padding: 0rpx 16rpx 26rpx;
    width: 100%;
    box-sizing: border-box;
		text-align: center;
    // .sales {
    //   font-size: 20rpx;
    //   font-family: PingFang SC;
    //   font-weight: 400;
    //   color: rgba(153, 153, 153, 1);
    //   line-height: 20rpx;
    //   margin-bottom: 20rpx;
    // }

    .current {
			font-size: 30rpx;
			font-family: Futura;
			font-weight: 600;
			color: #3A3A3C;
			line-height: 40rpx;
			
      // font-size: 30rpx;
      // font-weight: 500;
      // color: rgba(225, 33, 43, 1);
      // line-height: 30rpx;
      // margin-bottom: 20rpx;

      // &:before {
      //   content: '￥';
      //   font-size: 26rpx;
      // }
	  
			text {
				padding-left: 10rpx;
				font-size: 20rpx;
				color: #999999;
				line-height: 26rpx;
				font-weight: 500;
				// color: #000000;
				text-decoration: line-through;
				// font-size: 28rpx;
				// font-style: italic;
			}
    }

    // .original {
    //   font-size: 22rpx;
    //   font-weight: 400;
    //   text-decoration: line-through;
    //   color: rgba(153, 153, 153, 1);
    //   margin-left: 14rpx;
    //   line-height: 22rpx;
    //   margin-bottom: 10rpx;

    //   &:before {
    //     content: '￥';
    //     font-size: 20rpx;
    //   }
    // }

    // .tag-box {
    //   .discount {
    //     line-height: 28rpx;
    //     border: 1rpx solid rgba(225, 33, 43, 1);
    //     border-radius: 8rpx;
    //     font-size: 18rpx;
    //     font-family: PingFang SC;
    //     font-weight: 500;
    //     color: rgba(225, 33, 43, 1);
    //     padding: 0 8rpx;
    //     margin-right: 10rpx;
    //   }
    // }
  }
// }

// 为你推荐
// .hot-goods {
  // background: linear-gradient(#fff 200rpx, #f6f6f6 500rpx, #f6f6f6);
  // border-radius: 20rpx;

  .goods-list {
		padding: 0rpx 32rpx 8rpx;
    // flex-wrap: wrap;
    // width: 710rpx;

    .goods-item {
			width: 332rpx;
			// height: 482rpx;
			background: #F5F6F8;
			box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0,0,0,0.15);
			border-radius: 16rpx;
      // margin-right: 20rpx;
      margin-bottom: 20rpx;
      // width: 690rpx;
      // box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22);
      // border-radius: 20rpx;

      // &:nth-child(2n) {
      //   margin-right: 0;
      // }
    }
  }
// }
</style>