ai-chat-bot-interface 1.7.8 → 1.7.9

package/src/components/personalForm/personalForm.vue

@@ -1,634 +0,0 @@
-<script setup>
-import { computed, onMounted, ref } from 'vue';
-import ArrowRight from '../icons/ArrowRight.vue';
-import Popup from '../popup/popup.vue';
-import { showToast } from 'vant';
-import { Field } from 'vant';
-
-const showPopup = ref(false);
-const props = defineProps({
-  query: {
-    type: String,
-    default: '',
-  },
-});
-
-const dialogInfo = ref({
-  key: 'sex',
-  sex: '',
-  age: '',
-  height: '',
-  weight: '',
-  sport: '',
-  taste: [],
-  taboo: [],
-  title: '标题',
-  unit: '',
-  dialogHeight: '50vh',
-  min: 0,
-  max: 100,
-  type: 'digit',
-});
-
-const sportList = [
-  {
-    key: 'rest',
-    name: '休息状态',
-    sub: '卧床或者坐式休息',
-  },
-  {
-    key: 'sedentary',
-    name: '久坐',
-    sub: '坐式工作',
-  },
-  {
-    key: 'light',
-    name: '轻体力',
-    sub: '站立或需要走动的工作',
-  },
-  {
-    key: 'medium',
-    name: '中体力',
-    sub: '走动多的工作',
-  },
-  {
-    key: 'heavy',
-    name: '重体力',
-    sub: '高强度体力工作',
-  },
-];
-const tasteList = [
-  '不吃辣',
-  '不吃葱',
-  '不吃姜',
-  '不吃蒜',
-  '不吃糖',
-  '不吃鱼',
-  '不吃虾',
-  '不吃牛肉',
-  '不吃鸡肉',
-  '不吃猪肉',
-];
-const tabooList = ['高GI', '高饱和脂肪酸', '高嘌呤', '高盐', '高胆固醇'];
-
-const pfForm = ref([
-  {
-    key: 'sex',
-    label: '性别',
-    value: '',
-    placeholder: '请输选择',
-    required: true,
-  },
-  {
-    key: 'age',
-    label: '年龄',
-    value: '',
-    placeholder: '请输入年龄',
-    unit: '岁',
-    required: true,
-  },
-  {
-    key: 'height',
-    label: '身高',
-    value: '',
-    placeholder: '请输入身高',
-    unit: 'cm',
-    required: true,
-  },
-  {
-    key: 'weight',
-    label: '体重',
-    value: '',
-    placeholder: '请输入体重',
-    unit: 'kg',
-    required: true,
-  },
-  {
-    key: 'sport',
-    label: '日常运动水平',
-    value: '久坐',
-    placeholder: '请输入',
-    required: true,
-  },
-  {
-    key: 'taste',
-    label: '口味偏好及饮食禁忌',
-    value: '',
-    taste: [],
-    taboo: [],
-    placeholder: '无忌口',
-    required: false,
-  },
-]);
-
-const Emits = defineEmits(['submit']);
-
-onMounted(() => {
-  const form = localStorage.getItem('personalInfo');
-  if (form) {
-    const formData = JSON.parse(form);
-    for (let i = 0; i < pfForm.value.length; i++) {
-      const idx = formData.findIndex((con) => con.key === pfForm.value[i].key);
-      pfForm.value[i] = { ...pfForm.value[i], ...formData[idx] };
-    }
-  }
-});
-
-const isValid = computed(() => {
-  return pfForm.value
-    .filter((item) => item.key !== 'taste')
-    .every((item) => item.value !== '');
-});
-
-const handleSelect = (item) => {
-  dialogInfo.value.key = item.key;
-
-  switch (item.key) {
-    case 'sex':
-      dialogInfo.value.title = '选择性别';
-      dialogInfo.value.dialogHeight = '300px';
-      dialogInfo.value.sex = item.value;
-      break;
-    case 'age':
-      dialogInfo.value.title = '设置年龄';
-      dialogInfo.value.dialogHeight = '240px';
-      dialogInfo.value.unit = item.unit;
-      dialogInfo.value.age = item.value;
-      dialogInfo.value.min = 6;
-      dialogInfo.value.max = 100;
-      dialogInfo.value.type = 'number';
-      break;
-    case 'height':
-      dialogInfo.value.title = '设置身高';
-      dialogInfo.value.dialogHeight = '240px';
-      dialogInfo.value.unit = item.unit;
-      dialogInfo.value.height = item.value;
-      dialogInfo.value.min = 100;
-      dialogInfo.value.max = 220;
-      dialogInfo.value.type = 'digit';
-      break;
-    case 'weight':
-      dialogInfo.value.title = '设置体重';
-      dialogInfo.value.dialogHeight = '240px';
-      dialogInfo.value.unit = item.unit;
-      dialogInfo.value.weight = item.value;
-      dialogInfo.value.min = 10;
-      dialogInfo.value.max = 150;
-      dialogInfo.value.type = 'digit';
-      break;
-    case 'sport':
-      dialogInfo.value.title = '日常运动水平';
-      dialogInfo.value.dialogHeight = '420px';
-      dialogInfo.value.unit = '';
-      dialogInfo.value.sport = item.value;
-      break;
-    case 'taste':
-      dialogInfo.value.title = '口味偏好&饮食禁忌';
-      dialogInfo.value.dialogHeight = '500px';
-      dialogInfo.value.unit = '';
-      dialogInfo.value.taste = [...item.taste];
-      dialogInfo.value.taboo = [...item.taboo];
-      break;
-  }
-  console.log(dialogInfo.value, item);
-  showPopup.value = true;
-};
-
-const handleConfirm = () => {
-  switch (dialogInfo.value.key) {
-    case 'sex':
-      if (!dialogInfo.value.sex) {
-        showToast('请选择性别');
-        return;
-      }
-      pfForm.value.find((item) => item.key === 'sex').value =
-        dialogInfo.value.sex;
-      break;
-    case 'age':
-      if (!dialogInfo.value.age) {
-        showToast('请输入年龄');
-        return;
-      }
-      pfForm.value.find((item) => item.key === 'age').value =
-        dialogInfo.value.age;
-      break;
-    case 'height':
-      if (!dialogInfo.value.height) {
-        showToast('请输入身高');
-        return;
-      }
-      pfForm.value.find((item) => item.key === 'height').value =
-        dialogInfo.value.height;
-      break;
-    case 'weight':
-      if (!dialogInfo.value.weight) {
-        showToast('请输入体重');
-        return;
-      }
-      pfForm.value.find((item) => item.key === 'weight').value =
-        dialogInfo.value.weight;
-      break;
-    case 'sport':
-      if (!dialogInfo.value.sport) {
-        showToast('请选择日常运动水平');
-        return;
-      }
-      pfForm.value.find((item) => item.key === 'sport').value =
-        dialogInfo.value.sport;
-      break;
-    case 'taste':
-      pfForm.value.find((item) => item.key === 'taste').taste =
-        dialogInfo.value.taste;
-      pfForm.value.find((item) => item.key === 'taste').taboo =
-        dialogInfo.value.taboo;
-      pfForm.value.find((item) => item.key === 'taste').value = [
-        ...dialogInfo.value.taste,
-        ...dialogInfo.value.taboo,
-      ].join('、');
-      break;
-  }
-
-  showPopup.value = false;
-};
-
-const handleSubmit = () => {
-  if (!isValid.value) {
-    showToast('请填写完整信息');
-    return;
-  }
-
-  const ageIdx = pfForm.value.findIndex((item) => item.key === 'age');
-  const heightIdx = pfForm.value.findIndex((item) => item.key === 'height');
-  const weightIdx = pfForm.value.findIndex((item) => item.key === 'weight');
-
-  if (pfForm.value[ageIdx].value < 6 || pfForm.value[ageIdx].value > 100) {
-    showToast('年龄需要在6-100岁');
-    return;
-  }
-  if (
-    pfForm.value[heightIdx].value < 100 ||
-    pfForm.value[heightIdx].value > 220
-  ) {
-    showToast('身高需要在100-220cm');
-    return;
-  }
-  if (
-    pfForm.value[weightIdx].value < 10 ||
-    pfForm.value[weightIdx].value > 150
-  ) {
-    showToast('体重需要在10-150kg');
-    return;
-  }
-
-  localStorage.setItem('personalInfo', JSON.stringify(pfForm.value));
-  const msg = `${props.query}；
-性别：${pfForm.value.find((item) => item.key === 'sex').value}；
-年龄：${pfForm.value[ageIdx].value}${pfForm.value[ageIdx].unit || ''}；
-身高：${pfForm.value[heightIdx].value}${pfForm.value[heightIdx].unit || ''}；
-体重：${pfForm.value[weightIdx].value}${pfForm.value[weightIdx].unit || ''}；
-日常运动水平：${pfForm.value.find((item) => item.key === 'sport').value}；
-口味偏好及饮食禁忌：${
-    pfForm.value.find((item) => item.key === 'taste').value
-      ? pfForm.value.find((item) => item.key === 'taste').value
-      : '没有饮食禁忌'
-  }；`;
-  console.log(msg);
-  Emits('submit', [{ content: msg, text: msg }]);
-};
-
-const selectTag = (item, type) => {
-  if (dialogInfo.value[type].includes(item)) {
-    dialogInfo.value[type] = dialogInfo.value[type].filter((i) => i !== item);
-  } else {
-    dialogInfo.value[type].push(item);
-  }
-};
-
-const selectSport = (item) => {
-  dialogInfo.value.sport = item.name;
-  handleConfirm();
-};
-
-const selectSex = (item) => {
-  dialogInfo.value.sex = item;
-  handleConfirm();
-};
-</script>
-
-<template>
-  <div class="pf_wrap">
-    <div class="pf_form">
-      <div v-for="item in pfForm" :key="item.key" class="pf_row">
-        <div class="title" :class="{ is_required: item.required }">
-          {{ item.label }}
-        </div>
-        <div class="content" @click="handleSelect(item)">
-          <span
-            class="text_row"
-            :style="{ color: item.value ? '#000' : '#75759d' }"
-            >{{
-              item.value ? `${item.value} ${item.unit || ''}` : item.placeholder
-            }}</span
-          >
-          <arrow-right class="arrow" />
-        </div>
-      </div>
-    </div>
-    <div
-      class="pf_btn"
-      :class="{ disabled: !isValid }"
-      @click.stop="handleSubmit"
-    >
-      按身体数据领取食谱
-    </div>
-  </div>
-
-  <popup
-    v-model:show="showPopup"
-    :title="dialogInfo.title"
-    :height="dialogInfo.dialogHeight"
-    @confirm="handleConfirm"
-  >
-    <template #default>
-      <div v-if="dialogInfo.key === 'sex'" class="sex_wrap">
-        <div
-          :class="{ sex: true, selected: dialogInfo.sex === '男' }"
-          @click.stop="selectSex('男')"
-        >
-          男
-        </div>
-        <div
-          :class="{ sex: true, selected: dialogInfo.sex === '女' }"
-          @click.stop="selectSex('女')"
-        >
-          女
-        </div>
-      </div>
-      <div
-        v-if="['age', 'height', 'weight'].includes(dialogInfo.key)"
-        class="input_wrap"
-      >
-        <Field
-          v-model="dialogInfo[dialogInfo.key]"
-          class="input"
-          :type="dialogInfo.type"
-          :min="dialogInfo.min"
-          :max="dialogInfo.max"
-          @keyup.enter="handleConfirm"
-          placeholder="请输入"
-        />
-        <div class="unit">{{ dialogInfo.unit }}</div>
-      </div>
-      <div v-if="dialogInfo.key === 'sport'" class="sport_wrap">
-        <div
-          v-for="item in sportList"
-          :key="item.key"
-          :class="{ row: true, selected: dialogInfo.sport === item.name }"
-          @click.stop="selectSport(item)"
-        >
-          <div class="name">{{ item.name }}</div>
-          <div class="sub">{{ item.sub }}</div>
-        </div>
-      </div>
-      <div v-if="dialogInfo.key === 'taste'" class="taste_wrap">
-        <div class="title">口味偏好</div>
-        <div class="box">
-          <div
-            :class="{ tag: true, selected: dialogInfo.taste.includes(item) }"
-            v-for="item in tasteList"
-            :key="item"
-            @click.stop="selectTag(item, 'taste')"
-          >
-            {{ item }}
-          </div>
-        </div>
-        <div class="line"></div>
-        <div class="title">饮食禁忌</div>
-        <div class="box">
-          <div
-            :class="{ tag: true, selected: dialogInfo.taboo.includes(item) }"
-            v-for="item in tabooList"
-            :key="item"
-            @click.stop="selectTag(item, 'taboo')"
-          >
-            {{ item }}
-          </div>
-        </div>
-      </div>
-    </template>
-  </popup>
-</template>
-
-<style scoped lang="less">
-.pf {
-  &_wrap {
-    width: 100%;
-  }
-
-  &_form {
-    padding: 0 15px;
-    background: #fff;
-    border-radius: 8px;
-  }
-
-  &_row {
-    display: flex;
-    gap: 6px;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    border-bottom: 1px solid #dadada;
-    height: 54px;
-    line-height: 24px;
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    .title {
-      font-size: 14px;
-      font-weight: 600;
-      position: relative;
-      line-height: 24px;
-
-      &.is_required {
-        &::after {
-          content: '*';
-          color: #ff0000;
-          font-size: 14px;
-          line-height: 24px;
-          position: absolute;
-          right: -0.6em;
-        }
-      }
-    }
-
-    .content {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: flex-end;
-    }
-
-    .arrow {
-      color: #000;
-      font-size: 22px;
-    }
-    .text_row {
-      display: inline-block;
-      font-size: 14px;
-      text-align: right;
-      width: 156px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-    .input {
-      font-size: 14px;
-      text-align: right;
-      outline: none;
-      border: none;
-    }
-  }
-
-  &_btn {
-    cursor: pointer;
-    height: 40px;
-    line-height: 40px;
-    border-radius: 20px;
-    text-align: center;
-    font-size: 14px;
-    font-weight: 600;
-    color: #000;
-    background: #00dc4e;
-    margin-top: 15px;
-
-    &.disabled {
-      color: #fff;
-      background: #d9d9d9;
-    }
-  }
-}
-.sex {
-  &_wrap {
-    padding: 50px 0;
-    .sex {
-      transition: 100ms ease-in-out;
-      font-size: 15px;
-      font-weight: 400;
-      text-align: center;
-      height: 58px;
-      line-height: 58px;
-      border-top: 1px solid #fff;
-      border-bottom: 1px solid #fff;
-      &.selected {
-        font-size: 20px;
-        font-weight: 600;
-        color: #039938;
-        border-color: #d9d9d9;
-      }
-    }
-  }
-}
-.input {
-  &_wrap {
-    text-align: center;
-    padding: 20px 0;
-
-    .input {
-      height: 64px;
-      line-height: 64px;
-      font-size: 36px;
-      text-align: center;
-      width: 200px;
-      outline: none;
-      border: none;
-      margin: auto;
-      /deep/ .van-field__control {
-        text-align: center;
-      }
-    }
-    .unit {
-      font-size: 15px;
-      font-weight: 400;
-      line-height: 22px;
-    }
-  }
-}
-.sport {
-  &_wrap {
-    padding: 20px 0;
-
-    .row {
-      transition: 100ms ease-in-out;
-      height: 58px;
-      border-top: 1px solid #fff;
-      border-bottom: 1px solid #fff;
-      .name {
-        font-size: 15px;
-        font-weight: 400;
-        text-align: center;
-        line-height: 28px;
-      }
-      .sub {
-        font-size: 13px;
-        font-weight: 400;
-        text-align: center;
-        line-height: 18px;
-      }
-
-      &.selected {
-        .name {
-          color: #039938;
-          font-size: 16px;
-          font-weight: 600;
-          text-align: center;
-          line-height: 32px;
-        }
-        .sub {
-          color: #039938;
-          font-size: 12px;
-          font-weight: 400;
-          text-align: center;
-          line-height: 16px;
-        }
-        color: #039938;
-        border-color: #d9d9d9;
-      }
-    }
-  }
-}
-.taste {
-  &_wrap {
-    padding: 20px;
-    .title {
-      font-size: 15px;
-      font-weight: 600;
-      line-height: 32px;
-      margin-bottom: 16px;
-    }
-    .box {
-      display: inline-flex;
-      flex-wrap: wrap;
-      gap: 10px;
-    }
-    .line {
-      border-top: 1px solid #e9e9e9;
-      margin: 25px 0;
-    }
-    .tag {
-      height: 32px;
-      line-height: 32px;
-      padding: 0 15px;
-      background-color: #f3f4f5;
-      border-radius: 16px;
-      font-size: 14px;
-      text-align: center;
-      &.selected {
-        color: #fff;
-        background-color: #000;
-      }
-    }
-  }
-}
-</style>