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

<template>
  <view
    class="classify-shops"
  >
        <block v-for="(item, idx) in shopProduct" :key="idx">
          <view
            class="shops-item flex"
            @click="goto"
            :data-url="item.pic ? '/pages/shop/product?id=' + item.proid : ''"
          >
            <view class="shops-item__hd flex j-center al-item-center">
              <image
                class="shops-item__img"
                :src="item.pic"
                mode="aspectFill"
              ></image>
            </view>
            <view class="shops-item__bd">
              <view class="shops-item__title text-overflow-line">{{ item.name }}</view>
              <view class="shops-item__sale">已售{{ item.sales }}</view>
              <view class="shops-item__bottom flex al-item-center j-between">
                <view class="shops-item__price flex">¥<text class="shops-item__num">{{ item.sell_price }}</text></view>
                <view class="shops-item__icon"
                    @click.stop="buydialogChange"
                    :data-proid="item.proid"></view>
              </view>
            </view>
          </view>
        </block>
    <buydialog
      v-if="buydialogShow"
      :proid="proid"
      @addcart="addcart"
      @buydialogChange="buydialogChange"
      :menuindex="menuindex"
    ></buydialog>
  </view>
</template>

<script>
export default {
  props: {
    menuindex: { default: -1 },
    shopProduct: {
      type: Array,
      default: function() {
        return [];
      },
    },
  },
  data() {
    return {
      buydialogShow: false,
      proid: 14,
    };
  },
  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>
.classify-shops {
    padding-bottom: 20rpx;
    box-sizing: border-box;
    .shops-item {
      padding: 20rpx 0 14rpx;
      &:not(:last-child) {
        border-bottom: 1rpx solid #ECECEC;
      }
      &__hd {
        width: 192rpx;
        height: 192rpx;
        flex-shrink: 0;
      }
      &__img {
        width: 100%;
        height: 100%;
      }
      &__bd {
        flex: 1;
        margin-left: 12rpx;
      }
      &__title {
        font-size: 26rpx;
        font-weight: 500;
        color: #333333;
        line-height: 36rpx;
        margin-bottom: 36rpx;
        min-height: 72rpx;
      }
      &__sale {
        font-size: 18rpx;
        color: #999999;
        line-height: 22rpx;
        margin-bottom: 4rpx;
      }
      &__price {
        color: #ED5925;
        font-weight: 500;
        font-size: 24rpx;
        line-height: 34rpx;
        align-items: baseline;
      }
      &__num {
        margin-left: 4rpx;
        font-size: 36rpx;
        line-height: 50rpx;
      }
      &__icon {
					width: 44rpx;
					height: 44rpx;
          margin-top: -4rpx;
					background: linear-gradient(150deg, #00AE68 0%, #096742 100%);
					border-radius: 20rpx;
					position: relative;
					&::before {
						content: "";
						position: absolute;
						left: 8rpx;
						right: 8rpx;
						height: 4rpx;
						top: 50%;
						transform: translateY(-50%);
						background: #FFF;
					}
					&::after {
						content: "";
						position: absolute;
						top: 8rpx;
						bottom: 8rpx;
						width: 4rpx;
						left: 50%;
						transform: translateX(-50%);
						background: #FFF;
					}
				}
    }
}
.shops-box {
  width: 100%;
  .shops-cont {
    border: none;
    // width: 100%;
    height: auto;
    display: flex;
    padding-bottom: 25rpx;
    &:not(:last-child) {
      position: relative;
      &::after {
        content: "";
        position: absolute;
        bottom: 5rpx;
        left: 0;
        right: 0;
        border-bottom: 1rpx solid rgba(0,0,0,0.1);
        transform: scaleY(0.5);
      }
    }
    &__hd {
      width: 200rpx;
      height: 200rpx;
      border-radius: 12rpx;
      overflow: hidden;
      flex-shrink: 0;
    }
    .shops-img {
      width: 100%;
      height: 100%;
    }
    .item-info {
      flex: 1;
      padding: 0 20rpx;
    }
    .shops-c-t {
      padding-top: 15rpx;
      font-size: 24rpx;
      line-height: 32rpx;
      min-height: 75rpx;
    }
    .shops-s-t {
      padding-top: 10rpx;
      font-size: 24rpx;
      color: #999;
    }
    .shops-b-t {
      padding-top: 10rpx;

      .b-t1 {
        font-size: 24rpx;
      }
      .b-t2 {
        font-size: 30rpx;
      }
      .b-t3 {
        color: #999;
      }
      .car {
        width: 44rpx;
        height: 44rpx;

        .icon_gouwuche {
          color: #fff;
          font-size: 32rpx;
        }
      }
    }
  }
}
</style>