Merge branch 'main' of git.zdool.com:xs/yxdt/h5

src/App.vue

@@ -14,7 +14,7 @@ import { useRoute, useRouter } from 'vue-router'
 // const route = useRoute() 
 // let routePath = ref(route.path)
 const router = useRouter()
-let bt_data = reactive([{ btname: '优惠服务', imgurl: s1, simgurl: sl1 ,path:'/'}, { btname: '生活助手', imgurl: s2, simgurl: sl2 ,path:'/chat'}, { btname: '智能优推', imgurl: s3, simgurl: sl3,path:'/znyt' }, { btname: '大众点评', imgurl: s4, simgurl: sl4 ,path:'/'}])
+let bt_data = reactive([{ btname: '优惠服务', imgurl: s1, simgurl: sl1 ,path:'/'}, { btname: '生活助手', imgurl: s2, simgurl: sl2 ,path:'/chat'}, { btname: '智能优推', imgurl: s3, simgurl: sl3,path:'/znyt' }, { btname: '大众点评', imgurl: s4, simgurl: sl4 ,path:'/comment'}])
 
 let selctdeNum = ref(0)
 let clickNum = (num,path) => {

src/components/HelloWorld.vue

@@ -1,10 +1,5 @@
 <script setup>
-defineProps({
+
-  msg: {
-    type: String,
-    required: true
-  }
-})
 </script>
 
 <template>

src/router/index.js

@@ -41,6 +41,14 @@ const router = createRouter({
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/test1.vue')
     },
+    {
+      path: '/comment',
+      name: 'comment',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/Dianping/comment.vue')
+    },
     {
       path: '/znyt',
       name: 'znyt',

src/views/Dianping/comment.vue

@@ -0,0 +1,545 @@
+<template>
+  <div class="mian">
+    <div class="title">精选榜单</div>
+    <div class="List">
+      <div class="listbox" v-for="(item, i) in bd_data" :key="item">
+        <img :src="item.imgurl" class="imgList" />
+        <div class="listMin">
+          <span class="flList">{{ item.name }}</span>
+          <span class="phList">{{ item.List }}</span>
+          <div class="listBnt" @click="bdDetails(item.name)">查看详情</div>
+        </div>
+      </div>
+    </div>
+    <div style="display: flex">
+      <!-- <div v-for="(item, i) in data" :key="item">
+        <div class="tabsList">
+          <span
+            class="tabnames"
+            :class="{ tabName: cNum == i }"
+            @click="clickFun(item.name, i)"
+            >{{ item.name }}</span
+          >
+          <p></p>
+          <div></div>
+        </div>
+        <div v-if="item.name == bdName" style="display: flex">
+          <span
+            v-for="(item1, index) in item.lists"
+            :key="item1"
+            class="tabtitle"
+            >{{ item1.name }}</span
+          >
+        </div>
+        <div></div>
+      </div> -->
+      <div class="main">
+        <div class="main-t">
+          <div class="main-title">
+            <div
+              class="main-list"
+              :class="[chooseId == item.id ? 'numa' : '']"
+              v-for="(item, index) in mainList"
+              :key="index"
+              @click="choose(item.id)"
+            >
+              <div :class="[chooseId == item.id ? 'numa' : '']">
+                {{ item.title }}
+              </div>
+              <img
+                src="@/assets/xia.png"
+                alt=""
+                style="width: 48px; height: 5px; margin-bottom: 10px"
+                v-if="chooseId == item.id"
+              />
+            </div>
+          </div>
+          <img src="@/assets/list.png" alt="" />
+        </div>
+        <div class="titles">
+          <span
+            v-for="(item, index) in mainLists"
+            :key="item"
+            class="tabtitle"
+            :class="[cNum == item.id ? 'tabtitles' : '']"
+            @click="clickFun(item.id)"
+            >{{ item.title }}</span
+          >
+        </div>
+        <div class="list">
+          <div v-for="(data, index) in records.list" :key="data.id">
+            <div class="line">
+              <div class="linetop">
+                <img :src="data.imgurl" alt="" />
+                <div class="linetopmin">
+                  <div class="linetopTitle">{{ data.title }}</div>
+                  <span class="linetopAddress">{{ data.address }}</span>
+                  <span class="linetopScoring">
+                    <img :src="f1" v-for="(data, index) in 5"
+                  /></span>
+                  <span class="linetoprate">{{ data.rate }}</span>
+                </div>
+              </div>
+              <div class="linebot">
+                <p>热门评价：</p>
+                <p>{{ data.comment }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import b1 from "../../assets/dzdp1.png";
+import b2 from "../../assets/dzdp2.png";
+import f1 from "../../assets/pf.png";
+import f2 from "../../assets/pf1.png";
+
+let bd_data = reactive([
+  { name: "校园榜单", List: "高新区幼儿园好评榜", imgurl: b1, path: "/" },
+  { name: "健身榜单", List: "必逛的十大体育公园", imgurl: b1, path: "/" },
+  { name: "生活榜单", List: "高新区好评社区食堂", imgurl: b1, path: "/" },
+  { name: "移动榜单", List: "高新区好评社区食堂", imgurl: b1, path: "/" },
+]);
+const mainList = reactive([
+  {
+    id: 1,
+    title: "老有康养",
+  },
+  {
+    id: 2,
+    title: "老有康养",
+  },
+  {
+    id: 3,
+    title: "老有康养",
+  },
+  {
+    id: 4,
+    title: "老有康养",
+  },
+  {
+    id: 5,
+    title: "老有康养",
+  },
+  {
+    id: 6,
+    title: "老有康养",
+  },
+  {
+    id: 7,
+    title: "老有康养",
+  },
+]);
+const mainLists = reactive([
+  {
+    id: 1,
+    title: "老年学校",
+  },
+  {
+    id: 2,
+    title: "养老服务中心",
+  },
+  {
+    id: 3,
+    title: "养老机构食堂",
+  },
+  {
+    id: 4,
+    title: "老有康养",
+  },
+  {
+    id: 5,
+    title: "老有康养",
+  },
+  {
+    id: 6,
+    title: "老有康养",
+  },
+  {
+    id: 7,
+    title: "老有康养",
+  },
+]);
+const records = reactive({
+  list: [
+    {
+      id: 1,
+      imgurl: b2,
+      title: "象山老年大学",
+      address: "宁波市象山县广场路39号",
+      Scoring: 4,
+      rate: "职业学校",
+      comment: "老师非常耐心，课程也很丰富！",
+    },
+    {
+      id: 2,
+      imgurl: b2,
+      title: "象山老年大学",
+      address: "宁波市象山县广场路39号",
+      Scoring: 4,
+      rate: "职业学校",
+      comment: "老师非常耐心，课程也很丰富！",
+    },
+  ],
+});
+const data = reactive([
+  {
+    name: "老有康养",
+    lists: [
+      {
+        name: "老年学校",
+        lists: [
+          {
+            imgurl: b2,
+            name: "象山老年大学",
+            address: "宁波市象山县广场路39号",
+            Scoring: 4,
+            rate: "职业学校",
+            comment: "老师非常耐心，课程也很丰富！",
+          },
+        ],
+      },
+      {
+        name: "养老服务中心",
+        lists: [
+          {
+            imgurl: b2,
+            name: "象山老年大学",
+            address: "宁波市象山县广场路39号",
+            Scoring: 3,
+            rate: "职业学校",
+            comment: "老师非常耐心，课程也很丰富！",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    name: "幼有善育",
+    lists: [
+      {
+        name: "老年学校",
+        lists: [
+          {
+            imgurl: b2,
+            name: "象山老年大学",
+            address: "宁波市象山县广场路39号",
+            Scoring: 4,
+            rate: "职业学校",
+            comment: "老师非常耐心，课程也很丰富！",
+          },
+        ],
+      },
+      {
+        name: "养老服务中心",
+        lists: [
+          {
+            imgurl: b2,
+            name: "象山老年大学",
+            address: "宁波市象山县广场路39号",
+            Scoring: 3,
+            rate: "职业学校",
+            comment: "老师非常耐心，课程也很丰富！",
+          },
+        ],
+      },
+    ],
+  },
+]);
+const bdDetails = (name) => {
+  alert(name);
+  //   router.push(path)
+};
+const bdName = ref("老有康养");
+const cNum = ref(1);
+const clickFun = (index) => {
+  cNum.value = index;
+};
+const chooseId = ref("1");
+const choose = (id) => {
+  chooseId.value = id;
+};
+</script>
+
+<style lang="scss" scoped>
+.mian {
+  min-height: 100vh;
+  color: #000;
+  margin: 0 16px;
+  .title {
+    // width: 72px;
+    // height: 16px;
+    padding: 20px 0;
+    font-size: 18px;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 600;
+    color: #333333;
+    line-height: 16px;
+  }
+
+  .List {
+    display: flex;
+    overflow-x: auto; /* 允许横向滚动 */
+    white-space: nowrap; /* 防止换行 */
+    .listbox {
+      position: relative;
+      .imgList {
+        width: 40vw;
+        height: 50vw;
+        flex: 0 0 auto; /* 不要让图像拉伸 */
+        margin-right: 10px;
+      }
+
+      .listMin {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        display: flex;
+        flex-direction: column;
+        padding: 16px 12px;
+        .flList {
+          width: 64px;
+          height: 16px;
+          font-size: 16px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 500;
+          color: #ffffff;
+          line-height: 16px;
+        }
+        .phList {
+          width: 126px;
+          height: 12px;
+          font-size: 12px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 12px;
+          margin: 8px 0 12px;
+        }
+        .listBnt {
+          width: 56px;
+          height: 20px;
+          color: #ffffff;
+          background: rgba(255, 255, 255, 0.2);
+          border-radius: 40px 40px 40px 40px;
+          font-size: 10px;
+          font-weight: 500;
+          line-height: 18px;
+          font-family: PingFang SC, PingFang SC;
+          text-align: center;
+        }
+      }
+    }
+  }
+//   .tabsList {
+//     display: flex;
+//     .tabName {
+//       width: 72px;
+//       height: 16px;
+//       font-size: 18px;
+//       font-family: PingFang SC, PingFang SC;
+//       font-weight: 600;
+//       color: #333333;
+//       line-height: 16px;
+//     }
+//     .tabnames {
+//       width: 56px;
+//       height: 14px;
+//       font-size: 14px;
+//       font-family: PingFang SC, PingFang SC;
+//       font-weight: 400;
+//       color: #666666;
+//       line-height: 14px;
+//     }
+//     span {
+//       margin-right: 15px;
+//       // background: url();
+//     }
+
+//     // p {
+//     //   width: 30px;
+//     //   height: 8px;
+//     //   border-radius: 5px;
+//     //   background: rgb(181, 202, 255);
+//     //   background: linear-gradient(
+//     //     90deg,
+//     //     rgba(181, 202, 255, 1) 0%,
+//     //     rgba(255, 255, 255, 1) 100%
+//     //   );
+//     // }
+//   }
+
+  .main {
+    box-sizing: border-box;
+    padding-top: 0;
+    height: 68vh;
+    .main-t {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-right: 16px;
+      .main-title {
+        width: 85vw;
+        height: 50px;
+        overflow-y: auto;
+        display: flex;
+        // border: 1px solid red;
+        align-items: center;
+        .main-list {
+          flex-shrink: 0;
+          min-width: 56px;
+          height: 14px;
+          font-size: 14px;
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 400;
+          color: #666666;
+          line-height: 14px;
+          margin-right: 22px;
+          //   text-align: center;
+        }
+      }
+      img {
+        width: 16px;
+        height: 16px;
+      }
+    }
+    .titles {
+      display: flex;
+      overflow-x: auto; /* 允许横向滚动 */
+      white-space: nowrap; /* 防止换行 */
+      width: 91vw;
+      margin-bottom: 22px;
+      margin-top: 8px;
+      .tabtitle {
+        height: 24px;
+        padding: 3px 6px;
+        font-size: 12px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        line-height: 16px;
+        margin-right: 10px;
+      }
+      .tabtitles {
+        height: 24px;
+        background: #e0e7fb;
+        padding: 3px 6px;
+        border-radius: 24px 24px 24px 24px;
+        font-size: 12px;
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 500;
+        color: #457bff;
+        line-height: 16px;
+        margin-right: 10px;
+      }
+    }
+    .list {
+      height: 150px;
+      width: 355px;
+      box-sizing: border-box;
+      .line {
+        margin-bottom: 20px;
+        width: 343px;
+        height: 132px;
+        background: #ffffff;
+        box-shadow: 0px 2px 12px 0px #ebeef3;
+        border-radius: 8px 8px 8px 8px;
+        padding: 16px 16px 12px 16px;
+
+        .linetop {
+          display: flex;
+          margin-bottom: 12px;
+          img {
+            width: 80px;
+            height: 80px;
+            margin-right: 12px;
+          }
+          .linetopmin {
+            display: flex;
+            flex-direction: column;
+            .linetopTitle {
+              width: 96px;
+              height: 16px;
+              font-size: 16px;
+              font-family: PingFang SC, PingFang SC;
+              font-weight: 500;
+              color: #333333;
+              line-height: 16px;
+            }
+            .linetopAddress {
+              width: 135px;
+              height: 12px;
+              font-size: 12px;
+              font-family: PingFang SC, PingFang SC;
+              font-weight: 400;
+              color: #999999;
+              line-height: 12px;
+              margin: 8px 0 0 0;
+            }
+            .linetopScoring {
+              img {
+                width: 12px;
+                height: 12px;
+                margin-right: 2px;
+              }
+              //   background-color: skyblue;
+            }
+            .linetoprate {
+              width: 48px;
+              height: 16px;
+              border-radius: 2px 2px 2px 2px;
+              border: 1px solid #b8ccff;
+
+              font-size: 10px;
+              font-family: PingFang SC, PingFang SC;
+              font-weight: 400;
+              color: #4379ff;
+              line-height: 13px;
+              text-align: center;
+              //   margin-top: 8px;
+            }
+          }
+        }
+        .linebot {
+          display: flex;
+          p:nth-child(1) {
+            width: 60px;
+            height: 12px;
+            font-size: 12px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 500;
+            color: #333333;
+            line-height: 12px;
+          }
+          p:nth-child(2) {
+            width: 168px;
+            height: 12px;
+            font-size: 12px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            color: #666666;
+            line-height: 12px;
+          }
+        }
+      }
+      //   border: 1px solid yellow;
+    }
+  }
+  .numa {
+    width: 72px !important;
+    font-size: 18px !important;
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 600 !important;
+    color: #333333 !important;
+    line-height: 16px !important;
+  }
+  ::-webkit-scrollbar {
+    display: none;
+  }
+}
+</style>

src/views/IndexChat.vue

@@ -81,7 +81,7 @@
                 </div>
             </div>
         </div> -->
-        <div class="message-container">
+        <div class="message-container" id="chatform">
             <div class="message" v-for="(message, index) in messages" :key="message.id">
                 <div class="Left" v-if="!message.isMe">
                     <div class="Left_mesg">
@@ -129,18 +129,11 @@
                                             <span class="fullname">白亮</span>
                                             <span class="workername">主任医师</span>
                                         </div>
-
                                         <div class="work_tag">
                                             <span>象山县中医医院</span>
                                             <div class="xie"></div>
                                             <span>神经外科</span>
                                         </div>
-
-                                       <!--  <div class="tag_wrp">
-                                            <div class="tag">医保定点</div>
-                                            <div style="width: 4px;"></div>
-                                            <div class="tag">医保定点</div>
-                                        </div> -->
                                         <div class="detail"> 象山中医院建于1985年3月，是一所集中医、中西医结合，医疗、预防、康复于一体的非...</div>
                                     </div>
                                 </div>
@@ -158,6 +151,28 @@
                                 </div>
                             </div>
                         </div>
+                        <div v-else-if="message.type == 'card3'" class="card3">
+                            <div class="c_top">
+                                推荐您可以挂神经内科，您还可根据自身偏好重新选择，继续为您推荐，如偏好因素不在其列，可继续提出您的需求。
+                            </div>
+                            <div class="c_bt">
+                                <div class="cbt_it" v-for=" v in 3">
+                                    <div class="it_name">神经内科</div>
+                                    <div class="book_btn">预约</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-else-if="message.type == 'card4'" class="card3">
+                            <div class="c_top">
+                                推荐您可以挂神经内科，您还可根据自身偏好重新选择，继续为您推荐，如偏好因素不在其列，可继续提出您的需求。
+                            </div>
+                            <div class="c_bt">
+                                <div class="cbt_it" v-for=" v in 3">
+                                    <div class="it_name">神经内科</div>
+                                    <div class="book_btn">预约</div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="Right" v-else>
@@ -187,7 +202,7 @@
     </div>
 </template>
 <script setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, nextTick } from 'vue'
 let inputText = ref('')
 let messages = reactive([
     { id: 1, type: 'fstxt', text: '您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟', isMe: false },
@@ -196,6 +211,10 @@ let messages = reactive([
     { id: 4, type: 'txt', text: '基于号源等多种因素考虑，以下是相关医生推荐：', isMe: false },
     { id: 5, type: 'card2', text: '基：', isMe: false },
     { id: 6, type: 'txt', text: '最近总是头疼可以挂什么科室', isMe: true },
+    { id: 7, type: 'card3', text: '卡片3', isMe: false },
+    { id: 8, type: 'card4', text: '为您推荐相关医生，也可选择查看更多医生。', isMe: false },
+    { id: 9, type: 'txt', text: '人民医院怎么走', isMe: true },
+    { id: 10, type: 'card5', text: '卡片5', isMe: false },
 ]);
 let sendMessage = () => {
     console.log("dddd", inputText.value)
@@ -212,11 +231,14 @@ let sendMessage = () => {
     }
 }
 let scollToButtom = () => {
-    /*   $nextTick(() => {
+    nextTick(() => {
-            let chatform= document.getElementById('chatform') // 获取对象
+        let chatForm = document.getElementById('chatform'); // 获取对象
-            chatform.scrollTop = chatform.scrollHeight // 滚动高度
+        if (chatForm) {
-          }) */
+            chatForm.scrollTop = chatForm.scrollHeight; // 滚动高度
+        }
+    });
 }
+// scollToButtom()
 </script>
 <style lang="scss" scoped>
 ::-webkit-input-placeholder {
@@ -461,7 +483,7 @@ let scollToButtom = () => {
                     }
                 }
 
-                
+
 
                 .work_tag {
                     font-size: 12px;
@@ -470,16 +492,17 @@ let scollToButtom = () => {
                     color: #999999;
                     display: flex;
                     align-items: center;
+
                     .xie {
                         width: 1px;
                         border: 1px solid #999999;
                         height: 12px;
-                        margin:  0px 10px;
+                        margin: 0px 10px;
                         opacity: 0.5;
                     }
                 }
 
-              
+
                 .detail {
                     font-size: 10px;
                     font-family: PingFang SC, PingFang SC;
@@ -544,6 +567,49 @@ let scollToButtom = () => {
 
 }
 
+.card3 {
+    width: 300px;
+    height: 294px;
+    border-radius: 16px;
+    background-color: #fff;
+    box-sizing: border-box;
+    padding: 16px;
+    border: 1px solid red;
+
+    .c_top {margin-bottom: 12px;}
+
+    .c_bt {}
+
+    .cbt_it {
+        width: 268px;
+        height: 46px;
+        background: #EFF3FC;
+        border-radius: 8px 8px 8px 8px;
+        margin-bottom: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px;
+        box-sizing: border-box;
+        .it_name {
+            font-size: 14px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            color: #333333;
+        }
+
+        .book_btn {
+            width: 48px;
+            height: 24px;
+            background: linear-gradient(90deg, #6591FF 0%, #4379FF 100%);
+            border-radius: 22px 22px 22px 22px;
+            text-align: center;
+            line-height: 24px;
+            color: #fff;
+        }
+    }
+}
+
 .txt {
     min-height: 44px;
     padding: 10px 16px;
@@ -586,7 +652,7 @@ let scollToButtom = () => {
         .message {
             /* width: 100%;
             height: 100%; */
-            margin-bottom: 16px!important;
+            margin-bottom: 16px !important;
         }
     }