yoe-opm-web/src/views/diy/pccomponents/pages/discover.vue

<template>
  <div class="pcPages" :style="warpCss">
    <div class="discover-bos" :style="boxCss">
      <!-- 头部 -->
      <div class="home-title flex-row-between" :style="componentData.boxRadius ? { borderRadius: componentData.boxRadius + 'px' } : {}">
        <div>
          <span :style="titleCss" class="title1 mr-[10px]">{{ componentData.title }}</span>
          <span :style="subtitleCss">{{ componentData.subtitle }}</span>
        </div>
        <div class="title-more flex-row-start">
          <div class="ml-[10px]" v-for="(item, index) in componentData.labelList" :key="index">{{ item.title }}</div>
        </div>
      </div>
      <!-- 中间区域 -->
      <div class="discover-box">
        <el-image
          class="discover-image"
          :src="componentData.imageUrl ? componentData.imageUrl : figure"
          :fit="componentData.imageUrl ? (componentData.imgType == 1 ? 'fill' : componentData.imgType == 2 ? 'contain' : 'cover') : 'cover'"
          :style="componentData.boxRadius ? { borderRadius: componentData.boxRadius + 'px' } : {}"
        />
        <div class="plan-bos" :style="componentData.boxRadius ? { borderRadius: componentData.boxRadius + 'px' } : {}">
          <div class="plan-head">方案推荐</div>
          <div v-for="(item, index) in componentData.planList" :key="index" class="plan-list">
            <el-image
              class="plan-image"
              :src="item.imageUrl ? item.imageUrl : figure"
              :fit="item.imgType == 1 ? 'fill' : item.imgType == 2 ? 'contain' : 'cover'"
              :style="componentData.imageRadius ? { borderRadius: componentData.imageRadius + 'px' } : {}"
            />
            <div class="plan-box flex-column-between">
              <div class="plan-title ellipsis">{{ item.title }}</div>
              <div class="plan-subtitle">{{ item.subtitle }}</div>
            </div>
          </div>
        </div>
        <div class="detect-bos" :style="componentData.boxRadius ? { borderRadius: componentData.boxRadius + 'px' } : {}">
          <div class="detect-head">发现</div>
          <div class="detect-box">
            <div class="detect-two">
              <div class="detect-list" :style="componentData.boxRadius ? { borderRadius: componentData.boxRadius + 'px' } : {}">
                <div class="detect-item">
                  <div class="detect-title ellipsis">{{ componentData.detectList[0].title }}</div>
                  <div class="detect-subtitle mt-[6px] h-[32px]">{{ componentData.detectList[0].subtitle }}</div>
                  <div class="detect-btn" :style="{ backgroundColor: componentData.boxColor }">立即进入</div>
                </div>
                <el-image
                  class="detect-image"
                  :src="componentData.detectList[0].imageUrl ? componentData.detectList[0].imageUrl : figure"
                  :fit="componentData.detectList[0].imgType == 1 ? 'fill' : componentData.detectList[0].imgType == 2 ? 'contain' : 'cover'"
                  :style="componentData.imageRadius ? { borderRadius: componentData.imageRadius + 'px' } : {}"
                />
              </div>
              <div class="detect-list" :style="componentData.boxRadius ? { borderRadius: componentData.boxRadius + 'px' } : {}">
                <div class="detect-item">
                  <div class="detect-title ellipsis">{{ componentData.detectList[1].title }}</div>
                  <div class="detect-subtitle mt-[6px] h-[32px]">{{ componentData.detectList[1].subtitle }}</div>
                  <div class="detect-btn" :style="{ backgroundColor: componentData.boxColor }">立即进入</div>
                </div>
                <el-image
                  class="detect-image"
                  :src="componentData.detectList[1].imageUrl ? componentData.detectList[1].imageUrl : figure"
                  :fit="componentData.detectList[1].imgType == 1 ? 'fill' : componentData.detectList[1].imgType == 2 ? 'contain' : 'cover'"
                  :style="componentData.imageRadius ? { borderRadius: componentData.imageRadius + 'px' } : {}"
                />
              </div>
            </div>
            <div class="detect-one flex-column-between" :style="componentData.boxRadius ? { borderRadius: componentData.boxRadius + 'px' } : {}">
              <div>
                <div class="detect-title ellipsis">{{ componentData.detectList[2].title }}</div>
                <div class="detect-subtitle mt-[6px]">{{ componentData.detectList[2].subtitle }}</div>
              </div>
              <el-image
                class="detect-img"
                :src="componentData.detectList[2].imageUrl ? componentData.detectList[2].imageUrl : figure"
                :fit="componentData.detectList[2].imgType == 1 ? 'fill' : componentData.detectList[2].imgType == 2 ? 'contain' : 'cover'"
                :style="componentData.imageRadius ? { borderRadius: componentData.imageRadius + 'px' } : {}"
              />
            </div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="discover-foot">
        <div class="discover-tab" :style="componentData.boxRadius ? { borderRadius: componentData.boxRadius + 'px' } : {}">
          <div class="tab-head" :style="{ color: componentData.boxColor }">采购导航</div>
          <div class="tab-bos">
            <div v-for="(item, index) in componentData.tabList" :key="index" class="tab-list flex-row-center">
              {{ item.title }}
            </div>
          </div>
        </div>
        <template v-for="(item, index) in dataList" :key="index">
          <div
            v-if="Number(index) < 4"
            class="goods-bos flex-column-between"
            :style="componentData.boxRadius ? { borderRadius: componentData.boxRadius + 'px' } : {}"
          >
            <img
              class="goods-img"
              :src="item.productImage ? item.productImage : figure"
              alt=""
              :style="componentData.imageRadius ? { borderRadius: componentData.imageRadius + 'px' } : {}"
            />
            <div>
              <div class="goods-name">{{ item.itemName || '商品名称' }}</div>
              <div class="goods-price" :style="{ color: componentData.boxColor }">¥{{ item.memberPrice || '0.00' }}</div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import figure from '@/assets/images/figure.png';
import usePcdiyStore from '@/store/modules/pcdiy';
import { listBase } from '@/api/pmsProduct/base';
import { getCustomerProductPage } from '@/api/diy/index';
const diyStore = usePcdiyStore();

const props = defineProps<{
  index: number; // 确保声明 index 为可选属性
  row?: any;
}>();
const componentData = props.row ? props.row : diyStore.componentList[props.index];
const dataList = ref<any>([{}, {}, {}, {}]);

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

const getDataList = () => {
  dataList.value = [{}, {}, {}, {}];
  if (componentData.goodsIds.length > 0) {
    const apiFunc = diyStore.clientId && diyStore.clientId !== 'undefined' ? getCustomerProductPage : listBase;
    const queryParams = {
      pageNum: 1,
      pageSize: 10,
      ids: componentData.goodsIds.join(','),
      customerId: ''
    };
    if (diyStore.clientId && diyStore.clientId != 'undefined') {
      queryParams.customerId = diyStore.clientId;
    } else {
      delete queryParams.customerId;
    }
    apiFunc(queryParams).then((res) => {
      if (res.code == 200) {
        dataList.value = res.rows;
      }
    });
  }
};

watch(
  () => componentData.goodsIds,
  () => {
    getDataList();
  },
  { deep: true } // 5. 数组变化需要 deep 监听
);

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 titleCss = computed(() => {
  let style = '';
  if (componentData.titleColor) style += 'color:' + componentData.titleColor + ';';
  if (componentData.titleSize) style += 'font-size:' + componentData.titleSize + 'px;';
  if (componentData.titleWeight) style += 'font-weight:' + componentData.titleWeight + ';';
  return style;
});

// 副标题样式
const subtitleCss = computed(() => {
  let style = '';
  if (componentData.subtitleColor) style += 'color:' + componentData.subtitleColor + ';';
  if (componentData.subtitleSize) style += 'font-size:' + componentData.subtitleSize + 'px;';
  return style;
});
</script>

<style lang="scss" scoped>
.pcPages {
  width: 1200px;
  margin: 0 auto;
  .discover-bos {
    width: 100%;
    .home-title {
      width: 100%;
      background-color: #ffffff;
      padding: 15px 20px;
      .title-more {
        font-size: 14px;
        color: #333333;
      }
    }
  }
  //中间区域
  .discover-box {
    height: 340px;
    width: 100%;
    margin-top: 10px;
    display: flex;
    gap: 10px;

    .discover-image {
      width: 230px;
      height: 340px;
    }

    // 方案
    .plan-bos {
      flex: 1;
      height: 340px;
      background: #ffffff;
      padding: 0px 15px;
      display: flex;
      flex-direction: column;
      min-width: 0;

      .plan-head {
        font-weight: 600;
        font-size: 16px;
        color: #101828;
        height: 50px;
        line-height: 50px;
      }

      .plan-list {
        flex: 1;
        display: flex;
        border-bottom: 1px solid #e5e7eb;
        cursor: pointer;
        width: 100%;
        margin-bottom: 14px;

        &:last-child {
          border-bottom: none;
          margin-bottom: 0;
        }

        .plan-image {
          width: 72px;
          height: 72px;
          margin-right: 10px;
        }

        .plan-box {
          height: 72px;
          flex: 1;
          padding: 8px 0px 8px 5px;
          width: 0;
          .plan-title {
            font-weight: 600;
            font-size: 14px;
            color: #101828;
          }
          .plan-subtitle {
            height: 34px;
            font-weight: 400;
            font-size: 12px;
            color: #364153;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            /* 添加标准属性 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }

    .detect-bos {
      width: 470px;
      height: 340px;
      background: #ffffff;
      padding: 0px 15px 15px 15px;
      .detect-head {
        font-weight: 600;
        font-size: 16px;
        color: #101828;
        height: 50px;
        line-height: 50px;
      }

      .detect-box {
        display: flex;
        gap: 10px;
        .detect-title {
          font-weight: 600;
          font-size: 14px;
          color: #101828;
        }
        .detect-subtitle {
          font-weight: 400;
          font-size: 12px;
          color: #364153;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          /* 添加标准属性 */
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .detect-two {
          flex: 1;
          width: 0;
          .detect-list {
            width: 100%;
            height: 132.5px;
            border: 1px solid #e5e7eb;
            margin-top: 10px;
            padding: 25px 10px;
            display: flex;
            gap: 10px;
            &:first-child {
              margin-top: 0;
            }
            .detect-item {
              flex: 1;
              width: 0;
              .detect-btn {
                width: 68px;
                height: 24px;
                text-align: center;
                line-height: 24px;
                font-size: 12px;
                color: #ffffff;
                margin-top: 12px;
              }
            }
            .detect-image {
              height: 72px;
              width: 72px;
            }
          }
        }
        .detect-one {
          width: 180px;
          height: 275px;
          border: 1px solid #e5e7eb;
          background-color: #ffffff;
          padding: 25px 10px;
          .detect-img {
            height: 124px;
            width: 124px;
            margin: 0 auto;
          }
        }
      }
    }
  }
  //底部
  .discover-foot {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    .discover-tab {
      width: 230px;
      height: 310px;
      background: #ffffff;
      padding: 0 15px 15px 15px;
      .tab-head {
        font-weight: 600;
        font-size: 16px;
        height: 50px;
        line-height: 50px;
      }
      .tab-bos {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px 0;
        .tab-list {
          width: 94px;
          height: 32px;
          background: #f4f4f4;
          font-size: 14px;
          color: #101828;
          border-radius: 4px 4px 4px 4px;
        }
      }
    }
    .goods-bos {
      flex: 0 0 calc((100% - 270px) / 4);
      width: 0;
      background: #ffffff;
      height: 310px;
      padding: 15px 20px;
      .goods-img {
        width: 100%;
        height: 190px;
      }
      .goods-name {
        width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        /* 添加标准属性 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px;
        color: #101828;
        height: 57px;
      }
      .goods-price {
        font-size: 16px;
        margin-top: 5px;
      }
    }
  }
}
</style>