dianshang-qianduan/src/views/assessment/optimization.vue

<template>
  <div class="optimization app-container">
    <div class="top_item">
      <div>
        <template v-for="(item, index) in tablist" :key="item">
          <el-button :class="active == index ? 'active' : ''" :style="{ background: `url(${getAssetsFile(item.img)})`, backgroundSize: '100% 100%' }" @click="onClick(index)">
            {{ item.name }}
          </el-button>
        </template>
      </div>
      <div>
        <el-button @click="dialogVisible = true" type="primary" id="brtn">任务背景与目标</el-button>
        <popModel :showModel="dialogVisible" title="任务背景:" @closePop="dialogVisible = false">
          <template v-slot:content>
            <p style="font-size: 1rem">
              电商产品品类结构优化是一个涉及多个方面的策略性过程，其核心在于通过调整和优化产品品类结构，提高电商平台的运营效率、满足消费者需求，并增强市场竞争力。
              <br />
              <br />

              一、分析现有品类结构
              <br />

              首先，需要对现有的品类结构进行深入分析，这包括：
              <br />

              ‌销售数据分析‌：查看各类商品的销售额、销售量、毛利等指标，找出畅销品和滞销品。同时，分析商品的销售趋势，了解哪些商品处于增长阶段，哪些在下降。
              <br />

              ‌顾客需求分析‌：通过市场调研、顾客反馈等方式，了解顾客的需求和偏好。分析不同顾客群体的购买行为，以便针对性地调整品类结构。
              <br />

              二、调整品类组合
              <br />
              在分析的基础上，对品类组合进行调整，具体措施包括：
              <br />
              ‌淘汰滞销品‌：对于长期滞销、占用库存和资金的商品，应及时淘汰。可以通过促销、降价等方式清理库存，减少损失。
              <br />
              ‌增加畅销品和新品‌：根据销售数据和顾客需求，增加畅销品的库存和陈列面积，确保畅销品不断货。同时，积极引进新品，满足顾客的新鲜感和多样化需求。
              <br />
              ‌优化品类比例‌：确保各个品类的商品比例合理，避免品类过于单一或繁杂。重点发展优势品类，提高其市场竞争力。
              <br />
              三、考虑地域和季节性因素
              <br />
              在优化品类结构时，还需要考虑地域和季节性因素：
              <br />
              ‌地域因素‌：根据不同地区的用户需求来调整品类结构。例如，在多雨地区增加防雨类商品的推荐和组合；在喜欢阅读的地区，增加书籍和相关阅读商品的搭配。
              <br />
              ‌季节性因素‌：根据季节变化调整品类组合。如夏季增加防晒类商品的推荐，冬季则增加保暖类商品的比重。
              <br />
              <br />
              任务目标：
              <br />
              <br />
              通过ABC分析对商品进行分类管理，通过购物篮分析，优化商品组合。
            </p>
          </template>
        </popModel>
      </div>
    </div>
    <div class="centent ptb10">
      <component v-if="component" :is="component"></component>
    </div>
  </div>
</template>
  <script setup>
import { getAssetsFile, isModuleUnique } from "@/utils/index";
import popModel from "@/views/components/popModal.vue";
const { proxy } = getCurrentInstance();
const dialogVisible = ref(false);
const tablist = ref([
  {
    id: 0,  
    name: "帕累托/ABC分析",
    img: "11.png",
    com: defineAsyncComponent(() => import("../portraitModel/components/abcAnalysis.vue")),
  },
  {
    id: 1,
    name: "购物篮分析",
    img: "22.png",
    com: defineAsyncComponent(() => import("../portraitModel/components/basketAnalysis.vue")),
  },
]);
const active = ref(0);
const component = ref(tablist.value[0]?.com);
const onClick = (idx) => {
  if (tablist.value[idx]?.status) return proxy.$modal.msgError("该模块暂未开放");
  active.value = idx;
  component.value = tablist.value[idx]?.com;
};
onMounted(() => {
  tablist.value.forEach((item) => {
    if (!isModuleUnique([item.name])) {
      item.status = true;
    } else {
      item.status = false;
    }
  });
  active.value = tablist.value.filter((item) => !item.status)[0]?.id;
  component.value = tablist.value.filter((item) => !item.status)[0]?.com;
});
</script>
  <style lang='scss'  scoped>
.optimization {
  .top_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-button {
      width: 170px;
      height: 50px;
      color: #ffffff;
      border: none;
      padding-left: 3vw;
    }
    .active {
      transform: scale(1.1);
      transition: all 0.3s ease-in-out;
    }
    #brtn {
      width: 150px;
      height: 50px;
      background: #409eff !important;
      border-color: #ffffff00;
      padding: 8px 5px 8px 5px !important;
    }
  }
  .centent {
    height: calc(100vh - 170px);
    padding-bottom: 0px;
  }
}
</style>