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

<template>
  <view class="themes-shops">
		<!-- <themes-chunk-title v-if="isShowTitle" title="精选商品" :iconSrc="event_rul + '/static/theme/choiceness-icon.svg'" tengtx="group purchase"></themes-chunk-title> -->
    <view class="shops-box">
      <view class="flex flex-w shop-item">
        <block v-for="(item, idx) in shopProduct" :key="idx">
          <view
            class="shops-cont bg-color-white overflow-hd"
            @click="goto"
            :data-url="item.pic ? '/pages/shop/product?id=' + item.proid : ''"
          >
            <view class="shops-cont__hd flex j-center al-item-center">
              <image
                class="shops-img"
                :src="item.pic"
                mode="widthFix"
              ></image>
            </view>
            <view class="item-info">
              <view class="shops-c-t text-overflow-line">{{ item.name }}</view>
              <view class="shops-b-t flex al-item-center j-between">
                <view class="item-info__price">
                  <text class="b-t1 flex al-item-center"
                    >¥<text class="b-t2 font-w">{{ item.sell_price }}</text>
                  </text>
                  <view class="shops-s-t">已售 {{ item.sales ? (item.sales >= 10000 ? (item.sales / 10000).toFixed(1) + '万': item.sales) : 0 }}</view>
                </view>
                <view
                  class="car flex border-rius-r al-item-center j-center"
                  @click.stop="buydialogChange"
                  :data-proid="item.proid"
                >
                  <text class="iconfont icon-gouwuche1"></text>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
    <buydialog
      v-if="buydialogShow"
      :proid="proid"
      @addcart="addcart"
      @buydialogChange="buydialogChange"
      :menuindex="menuindex"
    ></buydialog>
  </view>
</template>

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

<style lang="scss" scoped>
.themes-shops {
  padding: 22rpx 0 20rpx;
}
.shops-box {
  width: 100%;
  .shops-cont {
    width: 49%;
    border-radius: 12rpx;
    box-sizing: border-box;
    box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.0300);
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    &__hd {
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .shops-img {
      width: 100%rpx;
      height: 260rpx;
    }
    .item-info {
      padding: 24rpx 20rpx;
      width: 100%;
    }
    .shops-c-t {
      min-height: 72rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: #333333;
      line-height: 36rpx;
    }
    .shops-s-t {
      display: flex;
      align-items: center;
      margin-top: 2rpx;
      font-size: 18rpx;
      color: #999999;
      line-height: 22rpx;
    }
    .shops-b-t {
      padding-top: 28rpx;

      .b-t1 {
        color: #ED5925;
        font-size: 24rpx;
      }
      .b-t2 {
        font-size: 36rpx;
        margin-left: 6rpx;
      }
      .car {
        width: 54rpx;
        height: 54rpx;
        background: linear-gradient(150deg, #00AE68 0%, #096742 100%);

        .icon-gouwuche1 {
          color: #fff;
          font-size: 36rpx;
          line-height: 44rpx;
          height: 48rpx;
        }
      }
    }
  }
  .shops-cont:nth-child(2n) {
    // margin-left: calc(100% - 680rpx);
    margin-left: 2%;
  }
  .shops-cont:nth-child(n + 3) {
    margin-top: 20rpx;
  }
}
</style>