fls-asp-hm-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: "年轻客户", value: "年轻客户" },
];

const roundsOptions = [
  { text: 3, value: 3 },
  { text: 5, value: 5},
  { text: 8, value: 8 },
];

const naturesOptions = [
  { 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:"HEI_MA",
  };
  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>
            客户通过<b>抖音直播</b>了解到我们是一家售卖新车的汽贸城车商，对我司直播间内的车价十分感兴趣，因此选择在直播间内留资。接下来需要在前期的电话中与客户沟通，解答客户疑问，建立基本信任并发掘客户真实的购车需求。
          </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: 7rem;
      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: 2rem 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>