fls-asp-qr-cunke-intelligent-tutoring/src/views/DetailView.vue

<script setup>
import { ref, reactive, toRefs, onMounted } from "vue";
import NavBarPage from "../components/NavBarPage.vue";
import selectPage from "./result/selectPage.vue";
import { fetchTaskCreate } from "./utils/api";
import { showToast } from "vant";
import { useRouter } from "vue-router";

const router = useRouter();

const selectedRole = ref("");
const selectedNature = ref(null);
const selectedRounds = ref(0);

const roleOptions = [{ text: "25岁年轻客户", value: "25岁年轻客户" }];

// 5/10/20/30/40
const roundsOptions = [
  { text: 5, value: 5 },
  { text: 10, value: 10 },
  { text: 15, value: 15 },
  { text: 20, value: 20 },
  { text: 30, value: 30 },
  { text: 40, value: 40 },
];

// 1.固执己见，不愿妥协 2.精打细算，喜欢占小便宜 3.易怒暴躁，简单直接 4.不懂装懂，乱带节奏 5.理智谨慎，态度冷漠 6.无主见，不抵触，不决定
const naturesOptions = [
  { text: "固执己见，不愿妥协", value: "固执己见，不愿妥协" },
  { text: "细心周到，考虑周全", value: "细心周到，考虑周全" },
  { text: "易怒暴躁，简单直接", value: "易怒暴躁，简单直接" },
  { text: "不懂装懂，乱带节奏", value: "不懂装懂，乱带节奏" },
  { text: "理智谨慎，态度冷漠", value: "理智谨慎，态度冷漠" },
  { text: "无主见，不抵触，不决定", value: "无主见，不抵触，不决定" },
];

const handleSelectNature = (option) => {
  selectedNature.value = option.value;
};

const handleSelectRoles = (option) => {
  selectedRole.value = option.value;
};

const handleSelectRounds = (option) => {
  selectedRounds.value = option.value;
};

const handleExam = async () => {
  if (!selectedRole.value || !selectedNature.value || !selectedRounds.value) {
    showToast("请选择角色、性格和轮数");
    return;
  }
  const data = {
    tutoringRole: selectedRole.value,
    personality: selectedNature.value,
    round: selectedRounds.value,
    sceneType: "QIRONG_CUNKE",
  };
  try {
    const { body } = await fetchTaskCreate(data);
    router.push({
      name: "ChatTts",
      query: { taskId: body, round: selectedRounds.value },
    });
  } catch (error) {
    console.log(error);
  }
};
onMounted(() => {
  localStorage.removeItem("chatHistory");
  localStorage.removeItem("status");
});
</script>
<template>
  <div class="detail">
    <nav-bar-page title="课程详情" />
    <div style="height: 46px"></div>
    <div class="content">
      <div class="banner">
        <img src="../assets/role3.jpg" alt="" />
      </div>
      <div class="produce">
        <p>电话销售</p>
        <div class="p_content">
          <span class="bg">背景：</span>
          <span>
            老客户通过AI智能客服了解到，我们提供老客户复购车服务，模式为先核定额度再复购车，支持新车和二手车操作。此前，客户普遍认为购车需通过4S店或二手车商，贷款由车商指定的贷款公司或银行办理，对我们这边的复购车模式和流程优势了解较少。
            客户已同意由客户经理后续对接，客户经理需通过电话沟通，了解客户购车意愿、购车周期、新车或二手车偏好、目标车型等信息。在沟通过程中，需解答客户疑问，介绍产品优势，建立基本信任，挖掘客户真实需求，并完成征信授权。
          </span>
        </div>
      </div>
      <div class="rules">
        <div class="title">
          <van-icon
            name="records-o"
            size="1.5rem"
            color="rgba(64,149,229,1)"
            style="font-weight: bold"
          />
          <span>规则</span>
        </div>
        <div class="r_content">
          <div class="r_item">
            <label for="roles">陪练角色</label>
            <selectPage
              :optionValue="roleOptions"
              placeholder="请选择角色"
              @update:selectedOption="handleSelectRoles"
            />
          </div>
          <div class="r_item">
            <label for="nature">陪练性格</label>
            <selectPage
              :optionValue="naturesOptions"
              placeholder="请选择性格"
              @update:selectedOption="handleSelectNature"
            />
          </div>
          <div class="r_item">
            <label for="rounds">交互轮次</label>
            <selectPage
              :optionValue="roundsOptions"
              placeholder="请选择轮次"
              @update:selectedOption="handleSelectRounds"
            />
          </div>
        </div>
      </div>
      <div class="bottom">
        <button class="exam" @click="handleExam">考试</button>
        <button>练习</button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.detail {
  width: 100%;
  height: 100%;
  // overflow: hidden;

  /* background-color: #f5f5f5; */
  .content {
    padding: 0 1.88rem;
  }

  .produce {
    margin-top: 1.63rem;

    p {
      color: rgba(16, 16, 16, 1);
      font-size: 1rem;
      font-family: Times New Roman-regular;
    }

    .p_content {
      width: 100%;
      height: 8rem;
      overflow: scroll;
    }

    span {
      line-height: 1.25rem;
      color: rgba(102, 102, 102, 1);
      font-size: 0.88rem;
      text-align: left;
      font-family: SourceHanSansSC-bold;
    }

    .bg {
      font-weight: 600;
      color: #000;
    }
  }

  .rules {
    margin: 2.38rem 0;
    width: 100%;
    height: 13.69rem;
    line-height: 1.25rem;
    border-radius: 0.75rem;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 0.88rem;
    text-align: center;
    box-shadow: 0rem 0.06rem 0.88rem 0rem rgba(0, 1, 130, 0.08);
    font-family: -regular;

    .title {
      display: flex;
      align-items: center;
      padding: 1.03rem 0.88rem;
    }

    .title span {
      margin-left: 0.31rem;
      color: rgba(64, 149, 229, 1);
      font-size: 1rem;
      font-family: Times New Roman-regular;
    }

    .r_content {
      margin-top: 0.44rem;
    }

    .r_item {
      display: flex;
      // justify-content: space-between;
      align-items: center;
      padding: 0 1.75rem;
      margin-bottom: 0.75rem;
      font-size: 0.88rem;
      color: rgba(16, 16, 16, 1);
    }

    .r_item select {
      width: 11.56rem;
      height: 2rem;
      line-height: 1.25rem;
      border-radius: 0.38rem;
      font-family: PingFangSC-regular;
      border: 0.06rem solid rgba(187, 187, 187, 1);
      padding: 0 10px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-opacity%3D%22.9%22%20fill-rule%3D%22evenodd%22%20d%3D%22M17.35%209.65a.5.5%200%200%200-.7%200L12%2014.29%207.35%209.65a.5.5%200%201%200-.7.7l5%205c.2.2.5.2.7%200l5-5a.5.5%200%200%200%200-.7%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E")
        no-repeat right 10px center;
      background-size: 1.5rem 1.5rem;
      /* 调整箭头的大小 */
    }

    .r_item label {
      // width: 3.5rem;
      // height: 1.25rem;
      // line-height: 1.25rem;
      // color: rgba(16,16,16,1);
      // font-size: 0.88rem;
      // text-align: left;
      font-family: PingFangSC-medium;
      margin-right: 1.1rem;
    }
  }

  .bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.38rem;

    button {
      width: 10rem;
      height: 2.44rem;
      line-height: 1.25rem;
      border-radius: 0.38rem 0.38rem 0.38rem 0.38rem;
      background-color: rgba(243, 249, 255, 1);
      font-size: 0.88rem;
      text-align: center;
      font-family: -regular;
      border: 0.06rem solid rgba(163, 208, 253, 1);
      color: #1989fa;
    }

    .exam {
      color: #fff;
      background-color: rgba(64, 149, 229, 1);
      margin-right: 0.63rem;
    }
  }
}

.banner {
  height: 11.63rem;
  border-radius: 0.75rem;
  background-color: rgba(229, 229, 229, 1);
  overflow: hidden;
}

.banner img {
  width: 100%;
  height: 11.63rem;
  object-fit: cover;
}
</style>