dianshang-qianduan/src/views/product/structure.vue

<template>
  <div class="structure app-container">
    <div class="handren">
      <div class="left">
        <el-button>产品结构规划</el-button>
      </div>
      <div class="right">
        <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 />

              以一个淘宝店铺为例，分析该店铺商品结构，给出产品组合优化建议。
            </p>
          </template>
        </popModel>
      </div>
    </div>
    <div class="caseBacktitle">
      <img src="@/assets/images/步骤.png" alt="" />
      <span>一、知识学习</span>
    </div>
    <div class="caseBacktitle">
      <span>产品组合策略</span>
    </div>
    <p>产品组合的四个要素：宽度（企业经营的产品线数量）、长度（企业经营的产品项目总数）、深度（每条产品线中产品项目的多少）和一致性（各产品线在最终用途、生产条件、销售渠道或其他方面的关联程度）</p>
    <p>
      实施策略：
      <br />
      扩大产品组合策略：开拓产品组合的广度和加强产品组合的深度，满足不同消费者需求，提高市场占有率，充分利用企业资源，分散市场风险。
      <br />
      缩减产品组合策略：削减产品线或产品项目，集中力量经营获利大的产品线和产品项目，提高利润率。
      <br />
      产品线现代化策略：在高技术时代，持续更新产品，保持竞争力。
      <br />
    </p>
    <div class="caseBacktitle">
      <span>商品结构规划</span>
    </div>
    <p>
      商品结构划分：可以按照产品的预测属性进行分类，如形象类产品、畅销类产品、主推类产品；也可以按照商品本身的类别进行划分，如服装中的不同品类，钻石首饰中的不同规格等。
      <br />
      商品结构规划方法：
      <br />
      明确商品矩阵：常见的商品矩阵包括引流款、日常款、活动款、利润款、形象款，每种款式在店铺中担任不同角色，发挥不同作用。
      <br />
      结合价格带策略：采用包围型、差异型、互补型等价格带策略，完成商品结构布局
      <br />
    </p>
    <div class="caseBacktitle">
      <img src="@/assets/images/步骤.png" alt="" />
      <span>二、实验实训</span>
    </div>
    <p>以淘宝电商女装为例，假如某女装店铺目前只有一个T恤品类，且销量不错，运营稳定，为了扩大市场，从产品组合策略和商品结构规划上如何对该店铺进行产品结构规划？</p>
    <p>请登录淘宝，选择一个您认为产品结构规划合理的优质店铺，分析该店的产品组合策略和商品结构。</p>
    <div class="online">
      <span>您选择的淘宝店铺网址:</span>
      <el-input style="width: 50vw; margin-left: 10px" v-model="commodityComposition.taobaoUrl" type="text" />
    </div>
    <p>您选择的淘宝店铺目前有哪些产品分类：</p>
    <div style="display: flex; flex-wrap: wrap">
      <template v-for="item in productCategory" :key="item.id">
        <el-input v-model="item.value" style="width: 10vw; margin-left: 40px; margin-bottom: 10px" placeholder="请输入分类" />
      </template>
      <el-button @click="onClick" style="margin-left: 10px">+</el-button>
    </div>
    <p>请阐述您选择的淘宝店铺产品组合的合理性：</p>
    <el-input :autosize="{ minRows: 7, maxRows: 7 }" v-model="commodityComposition.rationality" type="textarea" placeholder="" />
    <p>请分析该店铺的销售数据，给出产品组合优化建议：</p>
    <el-input :autosize="{ minRows: 7, maxRows: 7 }" v-model="commodityComposition.optimizationSuggestions" type="textarea" placeholder="" />
    <p>请判断您选择的淘宝店铺商品结构情况：</p>
    <div class="online">
      <span>形象类产品:</span>
      <el-input style="width: 10vw; margin-left: 1vw" type="text" v-model="commodityComposition.imageProduct" />
      <!-- <el-button @click="uploadImage" class="ml10">上传图片</el-button> -->
      <el-upload action="https://dshlw.sztzjy.com:147/api/cpgh/upload" :data="{ userId: userStore.userInfo.userId, module: '产品结构规划' }" :on-success="(res, file) => handleSuccess(res, file, '形象类')" :show-file-list="false">
        <el-button class="ml10">上传图片</el-button>
      </el-upload>
      <el-image v-if="popularProducts[0].image" style="margin-left: 10px; width: 50px; height: 50px" :src="popularProducts[0].image" :preview-src-list="[popularProducts[0].image]" fit="scale-down" />
    </div>
    <div class="online mt10">
      <span>畅销类产品（销量前3的产品）:</span>
      <el-input style="width: 10vw; margin-left: 1vw" type="text" v-model="commodityComposition.popularProduct1" />
      <el-input style="width: 10vw; margin-left: 1vw" type="text" v-model="commodityComposition.popularProduct2" />
      <el-input style="width: 10vw; margin-left: 1vw" type="text" v-model="commodityComposition.popularProduct3" />
      <el-upload action="https://dshlw.sztzjy.com:147/api/cpgh/upload" :data="{ userId: userStore.userInfo.userId, module: '产品结构规划' }" multiple :on-success="(res, file) => handleSuccess(res, file, '畅销类')" :show-file-list="false">
        <el-button class="ml10">上传图片</el-button>
      </el-upload>
      <template v-if="popularProducts[1].image.length > 0">
        <el-image style="margin-left: 10px; width: 50px; height: 50px" v-for="item in popularProducts[1].image" :key="item" :src="item" :preview-src-list="[item]" fit="scale-down" />
      </template>
    </div>
    <div class="online mt10">
      <span>主推类产品（产品项目最多的品类）:</span>
      <el-input style="width: 10vw; margin-left: 1vw" type="text" v-model="commodityComposition.mainProduct" />
      <el-upload action="https://dshlw.sztzjy.com:147/api/cpgh/upload" :data="{ userId: userStore.userInfo.userId, module: '产品结构规划' }" :on-success="(res, file) => handleSuccess(res, file, '主推类')" :show-file-list="false">
        <el-button class="ml10">上传图片</el-button>
      </el-upload>
      <el-image v-if="popularProducts[2].image" style="margin-left: 10px; width: 50px; height: 50px" :src="popularProducts[2].image" :preview-src-list="[popularProducts[2].image]" fit="scale-down" />
    </div>
    <p>请明确您选择的淘宝店铺商品矩阵情况</p>
    <div style="display: flex">
      <div class="online">
        <span>引流款（性价比最高的低价值单品）:</span>
        <el-input style="width: 10vw; margin-left: 1vw" type="text" v-model="commodityComposition.trafficProduct" />
        <el-upload action="https://dshlw.sztzjy.com:147/api/cpgh/upload" :data="{ userId: userStore.userInfo.userId, module: '产品结构规划' }" :on-success="(res, file) => handleSuccess(res, file, '引流款')" :show-file-list="false">
          <el-button class="ml10">上传图片</el-button>
        </el-upload>
        <el-image v-if="popularProducts[3].image" style="margin-left: 10px; width: 50px; height: 50px" :src="popularProducts[3].image" :preview-src-list="[popularProducts[3].image]" fit="scale-down" />
      </div>
      <div class="online ml20">
        <span>日常款:</span>
        <el-input style="width: 10vw; margin-left: 1vw" type="text" v-model="commodityComposition.dailyProduct" />
        <el-upload action="https://dshlw.sztzjy.com:147/api/cpgh/upload" :data="{ userId: userStore.userInfo.userId, module: '产品结构规划' }" :on-success="(res, file) => handleSuccess(res, file, '日常款')" :show-file-list="false">
          <el-button class="ml10">上传图片</el-button>
        </el-upload>
        <el-image v-if="popularProducts[4].image" style="margin-left: 10px; width: 50px; height: 50px" :src="popularProducts[4].image" :preview-src-list="[popularProducts[4].image]" fit="scale-down" />
      </div>
    </div>
    <div style="display: flex" class="mt10">
      <div class="online">
        <span>活动款（买送等促销活动）:</span>
        <el-input style="width: 10vw; margin-left: 1vw" type="text" v-model="commodityComposition.eventProduct" />
        <el-upload action="https://dshlw.sztzjy.com:147/api/cpgh/upload" :data="{ userId: userStore.userInfo.userId, module: '产品结构规划' }" :on-success="(res, file) => handleSuccess(res, file, '活动款')" :show-file-list="false">
          <el-button class="ml10">上传图片</el-button>
        </el-upload>
        <el-image v-if="popularProducts[5].image" style="margin-left: 10px; width: 50px; height: 50px" :src="popularProducts[5].image" :preview-src-list="[popularProducts[5].image]" fit="scale-down" />
      </div>
      <div class="online ml20">
        <span>利润款:</span>
        <el-input style="width: 10vw; margin-left: 1vw" type="text" v-model="commodityComposition.profitProduct" />
        <el-upload action="https://dshlw.sztzjy.com:147/api/cpgh/upload" :data="{ userId: userStore.userInfo.userId, module: '产品结构规划' }" :on-success="(res, file) => handleSuccess(res, file, '利润款')" :show-file-list="false">
          <el-button class="ml10">上传图片</el-button>
        </el-upload>
        <el-image v-if="popularProducts[6].image" style="margin-left: 10px; width: 50px; height: 50px" :src="popularProducts[6].image" :preview-src-list="[popularProducts[6].image]" fit="scale-down" />
      </div>
    </div>
    <div class="online mt10">
      <span>形象款（店铺主图）:</span>
      <el-input style="width: 10vw; margin-left: 1vw" type="text" v-model="commodityComposition.flagshipProduct" />
      <el-upload action="https://dshlw.sztzjy.com:147/api/cpgh/upload" :data="{ userId: userStore.userInfo.userId, module: '产品结构规划' }" :on-success="(res, file) => handleSuccess(res, file, '形象款')" :show-file-list="false">
        <el-button class="ml10">上传图片</el-button>
      </el-upload>
      <el-image v-if="popularProducts[7].image" style="margin-left: 10px; width: 50px; height: 50px" :src="popularProducts[7].image" :preview-src-list="[popularProducts[7].image]" fit="scale-down" />
    </div>
    <!-- <el-image-viewer
        :url-list="srcList"
        show-progress
        :initial-index="4"
        @close="showPreview = false"
      /> -->
    <p>请根据季节及市场需求分析该店铺商品结构是否合理，并给出优化建议。</p>
    <el-input :autosize="{ minRows: 11, maxRows: 11 }" type="textarea" placeholder="" v-model="commodityComposition.context" />
    <div class="taskfooter">
      <el-button @click="submitTask">提交任务</el-button>
      <el-button @click="resetTask">重新实训</el-button>
    </div>
  </div>
</template>
<script setup>
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
import * as analysisAPI from "@/api/market-demand-mining.js";
import popModel from "@/views/components/popModal.vue";
const { proxy } = getCurrentInstance();
const dialogVisible = ref(false);
// 产品分类数组
const srcList = ["https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"];
const productCategory = ref([
  {
    id: 1,
    value: "   ",
  },
  {
    id: 2,
    value: "   ",
  },
  {
    id: 3,
    value: "   ",
  },
  {
    id: 4,
    value: "   ",
  },
]);
const commodityComposition = ref({
  context: "", //主观题
  dailyProduct: "", //日常款
  eventProduct: "", //活动款
  flagshipProduct: "", //形象款
  imageProduct: "", //形象类
  mainProduct: "", //主推类
  optimizationSuggestions: "", //组合建议
  popularProduct1: "", //畅销类1
  popularProduct2: "", //畅销类2
  popularProduct3: "", //畅销类3
  profitProduct: "", //利润款
  rationality: "", //结构合理分析
  taobaoUrl: "", //淘宝链接
  trafficProduct: "", //引流款
});
const onClick = () => {
  productCategory.value.push({
    id: productCategory.value.length + 1,
    value: "   ",
  });
  console.log(productCategory.value);
};
// 对于需要多图上传的项（如畅销产品）
const popularProducts = ref([
  { name: "形象类", image: "", key: "imgOne" },
  { name: "畅销类", image: [], key: "imgTwo" },
  { name: "主推类", image: "", key: "imgThree" },
  { name: "引流款", image: "", key: "imgFour" },
  { name: "日常款", image: "", key: "imgFive" },
  { name: "活动款", image: "", key: "imgSix" },
  { name: "利润款", image: "", key: "imgSeven" },
  { name: "形象款", image: "", key: "imgEight" },
]);
const handleSuccess = (response, file, index) => {
  const product = popularProducts.value.find((item) => item.name === index);
  if (product) {
    // 如果是畅销类产品，可能有多个图片
    if (index === "畅销类") {
      if (product.image) {
        product.image.push(response.data);
      } else {
        product.image = [response.data];
      }
    } else {
      product.image = response.data;
    }
    console.log(popularProducts.value, response, "图片地址");
  }
};
function isFormComplete(data) {
  const excluded = ["context"];
  return !Object.keys(data)
    .filter((key) => !excluded.includes(key))
    .some((key) => !data[key]); // 检查空值
}
const submitTask = () => {
  if (!isFormComplete(commodityComposition.value)) {
    proxy.$modal.msgWarning("请先完成实验实训!");
    return;
  }
  // productCategory判断的value是否为空
  if (productCategory.value.some((item) => !item.value)) {
    proxy.$modal.msgWarning("请先完成实验实训!");
    return;
  }
  let params = {
    //   拷贝对象
    ...commodityComposition.value,
    productCategories: JSON.stringify(productCategory.value),
    userId: userStore.userInfo.userId,
  };
  popularProducts.value.forEach((item) => {
    params[item.key] = JSON.stringify(item.image);
  });
  console.log(params, "params");
  analysisAPI.productStructurePlanningSubmit(params).then((res) => {
    proxy.$modal.msgSuccess("提交成功");
  });
};
// 回显数据
const getTaskInfo = () => {
  let params = {
    userId: userStore.userInfo.userId,
  };
  analysisAPI.productStructurePlanningEcho(params).then((res) => {
    if (res.data) {
      commodityComposition.value = res.data;
      productCategory.value = JSON.parse(res.data.productCategories);
      popularProducts.value.forEach((item) => (item.image = JSON.parse(res.data[item.key])));
    }
  });
};
const resetTask = () => {
  analysisAPI
    .productPricingReTrain({
      userId: userStore.userInfo.userId,
      module: "产品结构规划",
    })
    .then((res) => {
      proxy.$modal.msgSuccess("重新实训成功");
      // 清空数据
      for (const key in commodityComposition.value) {
        commodityComposition.value[key] = "";
      }
      productCategory.value = [
        {
          id: 1,
          value: "   ",
        },
        {
          id: 2,
          value: "   ",
        },
        {
          id: 3,
          value: "   ",
        },
        {
          id: 4,
          value: "   ",
        },
      ];
      popularProducts.value = [
        { name: "形象类", image: "" },
        { name: "畅销类", image: [] },
        { name: "主推类", image: "" },
        { name: "引流款", image: "" },
        { name: "日常款", image: "" },
        { name: "活动款", image: "" },
        { name: "利润款", image: "" },
        { name: "形象款", image: "" },
      ];
    });
};
getTaskInfo();
</script>
<style lang="scss" scoped>
.structure {
  background: #ffffff;
}
</style>