yoe-shop-web/src/views/home/pccomponents/pages/floor.vue

<template>
  <div class="pcPages" :style="warpCss">
    <div class="floor-bos" :style="boxCss">
      <el-image
        @click="onPath(componentData.url)"
        class="floor-one"
        :src="componentData.imageUrl ? componentData.imageUrl : figure"
        :fit="componentData.imageUrl ? (componentData.imgType == 1 ? 'fill' : componentData.imgType == 2 ? 'contain' : 'cover') : 'cover'"
        :style="componentData.imageRadius ? { borderRadius: componentData.imageRadius + 'px' } : {}"
      />
      <div class="floor-box">
        <div
          v-for="(item, index) in componentData.goodsDefault ? componentData.goodsList : dataList"
          :key="index"
          class="goods-list flex-column-between hover-color"
          @click="onPath('/item?id=' + item.id + '&productNo=' + item.productNo)"
        >
          <img
            class="goods-img"
            :src="item.productImage ? item.productImage : figure"
            alt=""
            :style="componentData.imageRadius ? { borderRadius: componentData.imageRadius + 'px' } : {}"
          />
          <div v-if="componentData.goodsShow.includes(1)" class="itemName zi-hover">{{ item.itemName || '商品名称' }}</div>
          <div class="flex-row-between">
            <div>
              <span v-if="componentData.goodsShow.includes(2)" class="memberPrice" :style="{ color: componentData.btnbackgroundColor }"
                >¥{{ item.memberPrice || '0.00' }}</span
              >
              <span v-if="componentData.goodsShow.includes(3)" class="marketPrice">¥{{ item.marketPrice || '0.00' }}</span>
            </div>
            <template v-if="componentData.btnShow">
              <div v-if="componentData.btnStyle == 1" :style="btnCss1" class="btn1 ellipsis">{{ componentData.btnText }}</div>
              <div v-if="componentData.btnStyle == 2" :style="btnCss2" class="btn2 flex-row-center">
                <el-icon size="14"><Plus /></el-icon>
              </div>
              <div v-if="componentData.btnStyle == 3" :style="btnCss2" class="btn2 flex-row-center">
                <icon name="iconfont icongouwuche" size="14px" />
              </div>
            </template>
          </div>
        </div>
      </div>
      <div class="goods-brand flex-column-between" v-if="componentData.styleType == 2">
        <div class="brand-bos">
          <template v-for="(item, index) in componentData.brandList" :key="index">
            <el-image
              v-if="Number(index) < 6"
              class="brand-img"
              :src="item.imageUrl ? item.imageUrl : figure"
              :fit="item.imgType == 1 ? 'fill' : item.imgType == 2 ? 'contain' : 'cover'"
              @click="onPath(item.url)"
            />
          </template>
        </div>
        <div
          @click="onPath(componentData.moreUrl)"
          class="brand-more flex-row-center"
          v-if="componentData.moreShow"
          :style="{ color: componentData.moreColor }"
        >
          <div>{{ componentData.moreTitle }}</div>
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onPath } from '@/utils/siteConfig';
import figure from '@/assets/images/figure.png';
import { getDiyProductPage, getCustomerProductPage } from '@/api/home/diy';
interface Props {
  row?: any;
}

const props = defineProps<Props>();
const componentData = props.row || {};
const dataList = ref<any>([{}, {}, {}, {}, {}, {}, {}, {}]);

onMounted(() => {
  getDataList();
});

const getDataList = () => {
  dataList.value = [{}, {}, {}, {}, {}, {}, {}, {}];
  //手动选择
  if (componentData.goodsIds.length > 0) {
    const apiFunc = componentData.clientId && componentData.clientId !== 'undefined' ? getCustomerProductPage : getDiyProductPage;
    const queryParams = {
      pageNum: 1,
      pageSize: 10,
      ids: componentData.goodsIds.join(','),
      customerId: ''
    };
    if (componentData.clientId && componentData.clientId != 'undefined') {
      queryParams.customerId = componentData.clientId;
    } else {
      delete queryParams.customerId;
    }
    apiFunc(queryParams).then((res) => {
      if (res.code == 200) {
        dataList.value = res.rows;
      }
    });
  }
};
const warpCss = computed(() => {
  let style = '';
  style += 'position:relative;';
  //背景颜色
  if (componentData.pageStartBgColor) {
    if (componentData.pageStartBgColor && componentData.pageEndBgColor)
      style += `background:linear-gradient(${componentData.pageGradientAngle},${componentData.pageStartBgColor},${componentData.pageEndBgColor});`;
    else if (componentData.pageStartBgColor) style += `background: ${componentData.pageStartBgColor};`;
    else if (componentData.pageEndBgColor) style += `background: ${componentData.pageEndBgColor};`;
  }
  //背景图片
  if (componentData.componentBgUrl) {
    style += `background-image:url('${componentData.componentBgUrl}');`;
    style += 'background-size: cover;background-repeat: no-repeat;';
  }
  //边距
  if (componentData.padding) {
    if (componentData.padding.top > 0) {
      style += 'padding-top:' + componentData.padding.top + 'px' + ';';
    }
    if (componentData.padding.bottom > 0) {
      style += 'padding-bottom:' + componentData.padding.bottom + 'px' + ';';
    }
    style += 'padding-right:' + componentData.padding.both + 'px' + ';';
    style += 'padding-left:' + componentData.padding.both + 'px' + ';';
  }
  //圆角
  if (componentData.topRounded) style += 'border-top-left-radius:' + componentData.topRounded + 'px;';
  if (componentData.topRounded) style += 'border-top-right-radius:' + componentData.topRounded + 'px;';
  if (componentData.bottomRounded) style += 'border-bottom-left-radius:' + componentData.bottomRounded + 'px;';
  if (componentData.bottomRounded) style += 'border-bottom-right-radius:' + componentData.bottomRounded + 'px;';
  //间距
  if (componentData.margin) {
    if (componentData.margin.top > 0) {
      style += 'margin-top:' + componentData.margin.top + 'px' + ';';
    }
    if (componentData.margin.bottom > 0) {
      style += 'margin-bottom:' + componentData.margin.bottom + 'px' + ';';
    }
  }

  return style;
});

//组件样式
const boxCss = computed(() => {
  let style = '';
  if (componentData.componentStartBgColor && componentData.componentEndBgColor)
    style += `background:linear-gradient(${componentData.componentGradientAngle},${componentData.componentStartBgColor},${componentData.componentEndBgColor});`;
  else if (componentData.componentStartBgColor) style += 'background-color:' + componentData.componentStartBgColor + ';';
  else if (componentData.componentEndBgColor) style += 'background-color:' + componentData.componentEndBgColor + ';';
  if (componentData.number) style += 'flex:' + `0 0 calc((100% - ${(componentData.number - 1) * 10}px) / ${componentData.number})` + ';';
  return style;
});

const btnCss1 = computed(() => {
  let style = '';
  if (componentData.btnbackgroundColor) style += 'background-color:' + componentData.btnbackgroundColor + ';';
  if (componentData.btnColor) style += 'color:' + componentData.btnColor + ';';
  return style;
});

const btnCss2 = computed(() => {
  let style = '';
  if (componentData.btnbackgroundColor) style += 'color:' + componentData.btnbackgroundColor + ';';
  if (componentData.btnbackgroundColor) style += 'border-color:' + componentData.btnbackgroundColor + ';';
  return style;
});
</script>

<style lang="scss" scoped>
.pcPages {
  width: 100%;
  max-width: 1500px;
  min-width: 1200px;
  margin: 0 auto;
  .floor-bos {
    height: 560px;
    display: flex;
    gap: 10px;
    width: 100%;
    .floor-one {
      width: 230px;
      height: 560px;
      cursor: pointer;
    }
    .floor-box {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      overflow: hidden;
      &:hover {
        overflow: auto;
      }
      .goods-list {
        padding: 15px 10px;
        height: 275px;
        width: 0;
        flex: 0 0 calc((100% - 30px) / 4);
        background-color: #ffffff;
        overflow: hidden;
        border-radius: 5px;
        .goods-img {
          width: 140px;
          height: 140px;
          margin: 0 auto;
        }
        .itemName {
          width: 100%;
          font-size: 14px;
          color: #101828;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          /* 添加标准属性 */
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .memberPrice {
          font-size: 16px;
          font-weight: bold;
        }
        .marketPrice {
          font-size: 12px;
          color: #99a1af;
          line-height: 20px;
          text-decoration-line: line-through;
          text-transform: none;
          margin-left: 6px;
          color: #99a1af;
        }

        .btn1 {
          padding: 5px 15px;
          font-size: 12px;
          border-radius: 15px;
        }
        .btn2 {
          color: var(--el-color-primary);
          border: 1px solid var(--el-color-primary);
          height: 26px;
          width: 26px;
          border-radius: 50%;
        }
      }
    }
    .goods-brand {
      width: 140px;
      height: 560px;
      border-radius: 5px;
      background: #ffffff;
      padding: 15px 10px;
      .brand-bos {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px 0;
        .brand-img {
          width: 100%;
          height: 74px;
          border-radius: 4px;
          border: 1px solid #e5e7eb;
          cursor: pointer;
        }
      }
      .brand-more {
        color: var(--el-color-primary);
        font-size: 14px;
        cursor: pointer;
      }
    }
  }
}
</style>