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

<!--
 * @Author: qinzhenpen qzp1807@126.com
 * @Date: 2025-04-28 15:05:56
 * @LastEditors: qinzhenpen qzp1807@126.com
 * @LastEditTime: 2025-05-08 17:17:01
 * @FilePath: \e-commerce-internet\src\views\product\price.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="price app-container">
    <div class="handren">
      <div class="left">
        <el-button>PSM模型</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 />
              在电商产品定价方面，PSM分析技术通过进行价格敏感度测试，基于问卷调查数据，可视化模型分析，给出合理定价区间。
              <br />
              <br />
              任务目标：
              <br />
              <br />
              使用PSM模型给一款洗面奶进行定价。
              <br />
              <br />
              ①数据源：价格区间问卷调查数据。
              <br />
              <br />
              ②根据PSM模型分析得出合理定价区间。
              <br />
            </p>
          </template>
        </popModel>
      </div>
    </div>
    <div class="caseBacktitle">
      <img src="@/assets/images/步骤.png" alt="" />
      <span>一、知识学习</span>
    </div>
    <p>
      PSM分析技术的理论基础
      <br />
      在开发新产品时，厂商对产品价格的看法和消费者对产品价格的知觉经常会不一致，因此厂商往往不愿意事先设定产品的价格，而希望能通过调查从消费者那里得到产品价格的可接受范围。
      <br />
      价格敏感度测试(Price Sensitivity Measure ment，PSM）不需要预先给定好价格，而是让每位被访者自己表示他们的可接受价格范围。
      <br />
      目的：可用于新产品开发、产品线的扩张（产品线内产品项目的增加）、产品范围的扩张（增加产品线）等情况下，确定产品价格的可接受值或范围。
      <br />
      样本的选择：对于产品的开发，必须从所有可能使用新产品的消费总体中抽取有代表性的样本。对于产品线或产品范围的扩张，样本可以从原来的品牌使用者中抽取。
      <br />
    </p>
    <div class="caseBacktitle">
      <img src="@/assets/images/步骤.png" alt="" />
      <span>二、实验实训</span>
    </div>
    <p>假如淘宝某店铺计划推出一款针对大学生群体的洗面奶，您对下列价格区间有何想法？</p>
    <el-table
      :data="priceList1"
      border
      style="width: 60%"
      :header-cell-style="{
        color: '#fff',
        fontSize: '14px',
        backgroundColor: '#6A7DE9!important',
      }"
    >
      <el-table-column label="价格区间" align="center" prop="label"></el-table-column>
      <el-table-column label="太便宜，可能有陷阱" align="center" prop="value">
        <template #default="{ row }">
          <el-radio v-model="row.value" label="1" class="hidden-label"></el-radio>
        </template>
      </el-table-column>
      <el-table-column label="很划算，肯定会购买" align="center" prop="value">
        <template #default="{ row }">
          <el-radio v-model="row.value" label="2" class="hidden-label"></el-radio>
        </template>
      </el-table-column>
      <el-table-column label="有点贵，还可以接受" align="center" prop="value">
        <template #default="{ row }">
          <el-radio v-model="row.value" label="3" class="hidden-label"></el-radio>
        </template>
      </el-table-column>
      <el-table-column label="太贵，直接放弃" align="center" prop="value">
        <template #default="{ row }">
          <el-radio v-model="row.value" label="4" class="hidden-label"></el-radio>
        </template>
      </el-table-column>
    </el-table>
    <p>洗面奶价格梯度表，累计百分比用百分数表示，保留两位小数。</p>
    <el-table
      :data="priceList2"
      border
      style="width: 80%"
      :header-cell-style="{
        color: '#fff',
        fontSize: '14px',
        backgroundColor: '#6A7DE9!important',
      }"
    >
      <el-table-column label="价格区间" align="center" prop="label"></el-table-column>
      <el-table-column label="太便宜，可能有陷阱" align="center">
        <el-table-column label="" align="center" prop="pricevalue1"></el-table-column>
        <el-table-column label="累计总和" align="center" prop="toocheapsum1">
          <template #default="{ row }">
            <el-input v-model="row.toocheapsum1" placeholder="" />
          </template>
        </el-table-column>
        <el-table-column label="累计百分比" align="center" prop="percentage1">
          <template #default="{ row }">
            <el-input v-model="row.percentage1" placeholder="">
              <template #suffix>%</template>
            </el-input>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="很划算，肯定会购买" align="center">
        <el-table-column label="" align="center" prop="pricevalue2"></el-table-column>
        <el-table-column label="累计总和" align="center" prop="toocheapsum2">
          <template #default="{ row }">
            <el-input v-model="row.toocheapsum2" placeholder="" />
          </template>
        </el-table-column>
        <el-table-column label="累计百分比" align="center" prop="percentage2">
          <template #default="{ row }">
            <el-input v-model="row.percentage2" placeholder="">
              <template #suffix>%</template>
            </el-input>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="有点贵，还可以接受" align="center">
        <el-table-column label="" align="center" prop="pricevalue3"></el-table-column>
        <el-table-column label="累计总和" align="center" prop="toocheapsum3">
          <template #default="{ row }">
            <el-input v-model="row.toocheapsum3" placeholder="" />
          </template>
        </el-table-column>
        <el-table-column label="累计百分比" align="center" prop="percentage3">
          <template #default="{ row }">
            <el-input v-model="row.percentage3" placeholder="">
              <template #suffix>%</template>
            </el-input>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="太贵，直接放弃" align="center">
        <el-table-column label="" align="center" prop="pricevalue4"></el-table-column>
        <el-table-column label="累计总和" align="center" prop="toocheapsum4">
          <template #default="{ row }">
            <el-input v-model="row.toocheapsum4" placeholder="" />
          </template>
        </el-table-column>
        <el-table-column label="累计百分比" align="center" prop="percentage4">
          <template #default="{ row }">
            <el-input v-model="row.percentage4" placeholder="">
              <template #suffix>%</template>
            </el-input>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
    <p>太便宜和很划算向下累积，有点贵和太贵向上累积，画出每一个价格下开始觉得太便宜、便宜划算，开始觉得贵、太贵的累积人数百分比曲线图。</p>
    <div class="cnetent">
      <div class="left">
        <el-button @click="draw" style="margin-bottom: 20px">绘制</el-button>
        <div id="main" ref="main" style="width: 100%; height: 50vh"></div>
      </div>
      <div class="right">
        <div style="display: flex">
          <div class="online">
            <span>最优价格点:</span>
            <el-input style="width: 100px" type="text" v-model="formInline.optimalPrice" />
          </div>
          <div class="online ml20">
            <span>可接受价格点:</span>
            <el-input style="width: 100px" type="text" v-model="formInline.acceptablePrice" />
          </div>
        </div>
        <div class="online mt20">
          <span>可接受价格范围:</span>
          <el-input style="width: 100px" type="text" v-model="formInline.range1" />
          <span class="p10">----------</span>
          <el-input style="width: 100px" type="text" v-model="formInline.range2" />
        </div>
        <p>PSM模型在产品定价过程中的作用以及不足：</p>
        <el-input v-model="textarea2" :autosize="{ minRows: 11, maxRows: 11 }" type="textarea" placeholder="" />
      </div>
    </div>
    <div class="taskfooter">
      <el-button @click="submitTask">提交任务</el-button>
      <el-button @click="resetTask">重新实训</el-button>
    </div>
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import * as analysisAPI from "@/api/market-demand-mining.js";
const { proxy } = getCurrentInstance();
import useUserStore from "@/store/modules/user";
import popModel from "@/views/components/popModal.vue";
const userStore = useUserStore();
const formInline = ref({
  optimalPrice: "",
  acceptablePrice: "",
  range1: "",
  range2: "",
});
const textarea2 = ref("");
const dialogVisible = ref(false);
const reTraining = () => {
  proxy.$message.success("重新实训");
};
onMounted(() => {});
const main = ref(null);
const priceList1 = ref([
  {
    label: "15元以内",
    value: "",
  },
  {
    label: "15-20元",
    value: "",
  },
  {
    label: "20-30元",
    value: "",
  },
  {
    label: "30-50元",
    value: "",
  },
  {
    label: "50-70元",
    value: "",
  },
  {
    label: "70-100元",
    value: "",
  },
  {
    label: "100-200元",
    value: "",
  },
  {
    label: "200元以上",
    value: "",
  },
]);
const priceList2 = ref([
  {
    label: "15元以内",
    pricevalue1: "126",
    pricevalue2: "56",
    pricevalue3: "0",
    pricevalue4: "0",
    toocheapsum1: "",
    toocheapsum2: "",
    toocheapsum3: "",
    toocheapsum4: "",
    percentage1: "",
    percentage2: "",
    percentage3: "",
    percentage4: "",
  },
  {
    label: "15-20元",
    pricevalue1: "85",
    pricevalue2: "102",
    pricevalue3: "0",
    pricevalue4: "0",
    toocheapsum1: "",
    toocheapsum2: "",
    toocheapsum3: "",
    toocheapsum4: "",
    percentage1: "",
    percentage2: "",
    percentage3: "",
    percentage4: "",
  },
  {
    label: "20-30元",
    pricevalue1: "36",
    pricevalue2: "198",
    pricevalue3: "5",
    pricevalue4: "0",
    toocheapsum1: "",
    toocheapsum2: "",
    toocheapsum3: "",
    toocheapsum4: "",
    percentage1: "",
    percentage2: "",
    percentage3: "",
    percentage4: "",
  },
  {
    label: "30-50元",
    pricevalue1: "2",
    pricevalue2: "85",
    pricevalue3: "30",
    pricevalue4: "0",
    toocheapsum1: "",
    toocheapsum2: "",
    toocheapsum3: "",
    toocheapsum4: "",
    percentage1: "",
    percentage2: "",
    percentage3: "",
    percentage4: "",
  },
  {
    label: "50-70元",
    pricevalue1: "0",
    pricevalue2: "25",
    pricevalue3: "98",
    pricevalue4: "8",
    toocheapsum1: "",
    toocheapsum2: "",
    toocheapsum3: "",
    toocheapsum4: "",
    percentage1: "",
    percentage2: "",
    percentage3: "",
    percentage4: "",
  },
  {
    label: "70-100元",
    pricevalue1: "0",
    pricevalue2: "2",
    pricevalue3: "126",
    pricevalue4: "35",
    toocheapsum1: "",
    toocheapsum2: "",
    toocheapsum3: "",
    toocheapsum4: "",
    percentage1: "",
    percentage2: "",
    percentage3: "",
    percentage4: "",
  },
  {
    label: "100-200元",
    pricevalue1: "0",
    pricevalue2: "0",
    pricevalue3: "159",
    pricevalue4: "89",
    toocheapsum1: "",
    toocheapsum2: "",
    toocheapsum3: "",
    toocheapsum4: "",
    percentage1: "",
    percentage2: "",
    percentage3: "",
    percentage4: "",
  },
  {
    label: "200元以上",
    pricevalue1: "0",
    pricevalue2: "0",
    pricevalue3: "109",
    pricevalue4: "192",
    toocheapsum1: "",
    toocheapsum2: "",
    toocheapsum3: "",
    toocheapsum4: "",
    percentage1: "",
    percentage2: "",
    percentage3: "",
    percentage4: "",
  },
]);
// 校验空值并只提示一次
function validateAndAlertOnce() {
  let hasEmptyValue = false; // 标记是否发现空值
  // 遍历数组检查空值
  priceList2.value.forEach((item) => {
    Object.keys(item).forEach((key) => {
      if (item[key] === "") {
        hasEmptyValue = true; // 发现空值，标记为 true
        // 可选择替换空值（如果需要）
        item[key] = ""; // 替换为空值时的默认值
      }
    });
  });

  // 只在发现空值时提示一次
  if (hasEmptyValue) {
    // alert("数据中存在空值，已自动替换为默认值 0。");
    proxy.$modal.msgWarning("请填写完整数据!");
    return false; // 返回 false，表示存在空值
  }
  return true; // 没有空值，返回 true
}
const draw = () => {
  const isValid = validateAndAlertOnce();
  if (!isValid) return;
  const minPicture = priceList2.value.map((item) => item.percentage1);
  const calculatePrice = priceList2.value.map((item) => item.percentage2);
  const minexpensive = priceList2.value.map((item) => item.percentage3);
  const expensive = priceList2.value.map((item) => item.percentage4);
  const priceRanges = ['15元以内',"15-20元", "20-30元", "30-50元", "50-70元", "70-100元", "100-200元", "200元以上"];
  var myChart = echarts.init(main.value);
  myChart.setOption({
    title: {
      text: "PSM价格数据分析",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["太便宜", "很划算", "有点贵", "太贵了"],
      top: 30,
    },
    xAxis: {
      type: "category",
      name: "价格区间",
      data: priceRanges,
    },
    yAxis: {
      type: "value",
      name: "销售数量 (件)",
      min: 0,
      max: 100,
    },
    series: [
      {
        name: "太便宜",
        type: "line",
        data: minPicture,
        color: "#1f77b4",
        symbol: "circle",
        symbolSize: 8,
      },
      {
        name: "太贵了",
        type: "line",
        data: expensive,
        color: "#d62728",
        symbol: "circle",
        symbolSize: 8,
      },
      {
        name: "有点贵",
        type: "line",
        data: minexpensive,
        color: "#2ca02c",
        symbol: "circle",
        symbolSize: 8,
      },
      {
        name: "很划算",
        type: "line",
        data: calculatePrice,
        color: "#ff7f0e",
        symbol: "circle",
        symbolSize: 8,
      },
    ],
    grid: {
      left: "2%",
      right: "15%",
      bottom: "10%",
      containLabel: true,
    },
    graphic: [
      {
        type: "text",
        left: 391, // 或 "60%" 等
        top: 334,
        z: 100, // 设置更高的图层层级
        style: {
          text: "P4",
          font: "bold 14px sans-serif",
          fill: "#2ca02c",
          // 显示在线条墙上面
          distance: 10,
        },
      },
      {
        type: "text",
        left: 300, // 或 "60%" 等
        top: 380,
        z: 100, // 设置更高的图层层级
        symbol: "circle",
        style: {
          text: "P1",
          font: "bold 14px sans-serif",
          fill: "#1f77b4",
          // 显示在线条墙上面
          distance: 10,
        },
      },
      {
        type: "text",
        left: 350, // 或 "60%" 等
        top: 388,
        z: 100, // 设置更高的图层层级
        symbol: "circle",
        style: {
          text: "P2",
          font: "bold 14px sans-serif",
          fill: "#d62728",
          // 显示在线条墙上面
          distance: 10,
        },
      },
      {
        type: "text",
        left: 430, // 或 "60%" 等
        top: 380,
        z: 100, // 设置更高的图层层级
        symbol: "circle",
        style: {
          text: "P3",
          font: "bold 14px sans-serif",
          fill: "#ff7f0e",
          // 显示在线条墙上面
          distance: 10,
        },
      },
    ],
  });
};
const submitTask = () => {
  const minPicture = priceList2.value.map((item) => item.percentage1);
  const minPriceValue = priceList2.value.map((item) => item.toocheapsum1);
  const calculatePrice = priceList2.value.map((item) => item.percentage2);
  const calculatevalue = priceList2.value.map((item) => item.toocheapsum2);
  const minexpensive = priceList2.value.map((item) => item.percentage3);
  const minexpensivevalue = priceList2.value.map((item) => item.toocheapsum3);
  const expensive = priceList2.value.map((item) => item.percentage4);
  const tooSum = priceList2.value.map((item) => item.toocheapsum4);
  //   判断数组是否为空
  if (minPicture.includes("") || minPriceValue.includes("") || calculatePrice.includes("") || calculatevalue.includes("") || minexpensive.includes("") || minexpensivevalue.includes("") || expensive.includes("") || priceList1.value.some((item) => !item.value)) {
    return proxy.$modal.msgWarning("请填写完整数据");
  }
  //   判断formInline的值是否为空
  if (formInline.value.optimalPrice == "" || formInline.value.acceptablePrice == "" || formInline.value.range1 == "" || formInline.value.range2 == "") {
    return proxy.$modal.msgWarning("请填写完整数据");
  }
  const params = {
    acceptablePrice: formInline.value.acceptablePrice,
    acceptablePriceRange: formInline.value.range1 + "," + formInline.value.range2,
    optimalPrice: formInline.value.optimalPrice,
    cheapPercentage: minPicture.join(","),
    cheapSum: minPriceValue.join(","),
    context: textarea2.value,
    costEffectivePercentage: calculatePrice.join(","),
    costEffectiveSum: calculatevalue.join(","),
    expensivePercentage: minexpensive.join(","),
    expensiveSum: minexpensivevalue.join(","),
    tooExpensivePercentage: expensive.join(","),
    tooSum: tooSum.join(","),
    priceRange: JSON.stringify(priceList1.value),
    displayStatus: 1,
  };
  analysisAPI.productPricingSubmit({ stuAnswer: params, userId: userStore.userInfo.userId }).then((res) => {
    proxy.$modal.msgSuccess("提交成功");
  });
};
// 回显接口
const loadTaskInfo = () => {
  analysisAPI.productPricingEcho({ userId: userStore.userInfo.userId }).then((res) => {
    if (!res.data) return;
    formInline.value.optimalPrice = res.data.optimalPrice;
    formInline.value.acceptablePrice = res.data.acceptablePrice;
    formInline.value.range1 = res.data.acceptablePriceRange.split(",")[0];
    formInline.value.range2 = res.data.acceptablePriceRange.split(",")[1];
    textarea2.value = res.data.context;
    priceList1.value = JSON.parse(res.data.priceRange !== "" ? res.data.priceRange : priceList1.value);
    priceList2.value.forEach((item, index) => {
      item.toocheapsum1 = res.data.cheapSum.split(",")[index];
      item.toocheapsum2 = res.data.costEffectiveSum.split(",")[index];
      item.toocheapsum3 = res.data.expensiveSum.split(",")[index];
      item.percentage1 = res.data.cheapPercentage.split(",")[index];
      item.percentage2 = res.data.costEffectivePercentage.split(",")[index];
      item.percentage3 = res.data.expensivePercentage.split(",")[index];
      item.percentage4 = res.data.tooExpensivePercentage.split(",")[index];
      item.toocheapsum4 = res.data.tooSum.split(",")[index];
    });
    draw();
  });
};
// 重新实训
const resetTask = () => {
  analysisAPI.productPricingReTrain({ userId: userStore.userInfo.userId, module: "产品定价" }).then((res) => {
    proxy.$modal.msgSuccess("重新实训成功");
    // 清楚数据
    formInline.value.optimalPrice = "";
    formInline.value.acceptablePrice = "";
    formInline.value.range1 = "";
    formInline.value.range2 = "";
    textarea2.value = "";
    // 清除数据
    priceList1.value.forEach((item) => {
      item.value = "";
    });
    priceList2.value.forEach((item) => {
      item.toocheapsum1 = "";
      item.toocheapsum2 = "";
      item.toocheapsum3 = "";
      item.toocheapsum4 = "";
      item.percentage1 = "";
      item.percentage2 = "";
      item.percentage3 = "";
      item.percentage4 = "";
    });
    // loadTaskInfo();
  });
};
onMounted(() => {
  loadTaskInfo();
});
</script>
<style lang='scss'  scoped>
.app-container {
  background-color: #f5f5f5;
  :deep(.hidden-label) {
    .el-radio__label {
      display: none;
    }
  }
  .cnetent {
    display: flex;
    .left {
      width: 50%;
      height: 100%;
    }
    .right {
      width: 50%;
      height: 100%;
    }
  }
}
</style>