jingheng_H5/pagesA/themes/default/components/themes-recommend.vue

<template>
  <view class="themes-recommend">
	  <view class="title flex j-center">
	  	<view class="flex">
	  		<image class="t-bg-l" :src="event_rul + '/static/images/df-title.png'" mode="widthFix"></image>
	  		<text class="t-bg-c "  mode="widthFix">精选商品</text>
	  		<image class="t-bg-r" :src="event_rul + '/static/images/df-title.png'" mode="widthFix"></image>
	  	</view>
	  </view>
    <block
      class="themes-recommend__list"
      v-for="(item, idx) in shopProduct"
      :key="idx"
    >
      <view
        class="themes-recommend__item"
        @click="goto"
        :data-url="item.pic ? '/pages/shop/product?id=' + item.proid : ''"
      >
        <text class="themes-recommend__item-tab">抢鲜价</text>
        <view class="themes-recommend__item-hd">
          <image
            class="themes-recommend__item-img"
            :src="item.pic"
            mode="aspectFill"
          ></image>
        </view>
        <view class="themes-recommend__item-bd">
          <view class="themes-recommend__item-title">{{ item.name }}</view>
          <view class="themes-recommend__item-price">
            <text class="themes-recommend__item-symbol">¥</text>
            <text class="themes-recommend__item-num">{{ item.sell_price }}</text>
          </view>
          <view
            class="themes-recommend__item-btn"
            @click.stop="buydialogChange"
            :data-proid="item.proid"
            >立即抢购</view
          >
        </view>
      </view>
    </block>
    <buydialog
      v-if="buydialogShow"
      :proid="proid"
      @addcart="addcart"
      @buydialogChange="buydialogChange"
      :menuindex="menuindex"
    ></buydialog>
  </view>
</template>

<script>
	var app = getApp();
export default {
  props: {
    shopProduct: {
      type: Array,
      default: function() {
        return [];
      },
    },
    menuindex: {
      default: -1,
    },
  },
  data() {
    return {
      buydialogShow: false,
      proid: 14,
	   event_rul: app.globalData.event_url,
    };
  },
  mounted() {
    // console.log(this.shopProduct)
  },
  methods: {
    buydialogChange(e) {
      if (!this.buydialogShow) {
        this.proid = e.currentTarget.dataset.proid;
      }
      this.buydialogShow = !this.buydialogShow;
    },
    addcart: function () {
      this.$emit("addcart");
    },
  },
};
</script>

<style lang="scss" scoped>
.themes-recommend {
	.title {
		padding: 34rpx 0 0;
		.t-bg-l{
			width: 40rpx;
			margin: 6rpx 0rpx 0 0;
		}
		.t-bg-c {
			// font-style: italic;
			font-size: 36rpx;
			color: #0A5D3B;
			// letter-spacing: 2px;
		}
		.t-bg-r {
			width: 40rpx;
			margin: 6rpx 0 0 8rpx;
		}
	}
  &__list {
    border-radius: 10rpx;
    overflow: hidden;
    &:not(last-child) {
      margin-top: 28rpx;
    }
  }
  &__item {
    display: flex;
    position: relative;
    height: 296rpx;
    margin-top: 28rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
    border-radius: 20rpx;
    padding: 40rpx 28rpx 0 30rpx;
    &-tab {
      width: 106rpx;
      height: 40rpx;
      line-height: 40rpx;
      position: absolute;
      top: 0;
      left: 0rpx;
      background: #FFE832;
      border-radius: 20rpx 0 20rpx 0rpx;
      font-size: 24rpx;
      text-align: center;
      z-index: 1;

    }
    &-hd {
      width: 242rpx;
      height: 242rpx;
      flex-shrink: 0;
    }
    &-img {
      width: 100%;
      height: 100%;
    }
    &-bd {
      flex: 1;
      padding: 0 0 40rpx 36rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    &-title {
      font-size: 26rpx;
      font-weight: 500;
      color: #333333;
      line-height: 36rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      /* autoprefixer: ignore next */
      -webkit-box-orient: vertical;
      text-align: justify;
      white-space: pre-wrap;
      word-break: break-all;

    }
    &-price {
      font-size: 36rpx;
      font-weight: 500;
      color: #ED5925;
      line-height: 50rpx;
    }
    &-symbol {
      font-size: 24rpx;
      line-height: 34rpx;
      margin-right: 6rpx;
    }
    &-btn {
      position: absolute;
      bottom: 40rpx;
      right: 28rpx;
      background: linear-gradient(150deg, #00AE68 0%, #096742 100%);
      font-size: 24rpx;
      font-weight: 500;
      color: #FFFFFF;
      line-height: 50rpx;
      border-radius: 25rpx;
      padding: 0 22rpx;
    }
  }

}
</style>