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

src/App.vue

@@ -11,40 +11,26 @@ import sl2 from './assets/s6.png'
 import sl3 from './assets/s7.png'
 import sl4 from './assets/s8.png'
 import { useRoute, useRouter } from 'vue-router'
-// const route = useRoute() 
+const route = useRoute()
-// let routePath = ref(route.path)
+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:'/comment'}])
+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) => {
+let clickNum = (num, path) => {
   selctdeNum.value = num
+  routePath.value = path
   router.push(path)
 }
 </script>
 
 <template>
-  <!--  <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-       
-      </nav>
-    </div>
-  </header> -->
-  <!-- <RouterLink to="/chat">Chat</RouterLink> -->
   <RouterView />
   <div class="bottom">
-    <div class="bt_itm" v-for="(v, i) in bt_data" :key="i" @click="clickNum(i,v.path)">
+    <div class="bt_itm" v-for="(v, i) in bt_data" :key="i" @click="clickNum(i, v.path)">
-
+      <img v-if="routePath != v.path" :src="v.imgurl" alt="">
-      <img v-if="selctdeNum != i" :src="v.imgurl" alt="">
       <img v-else :src="v.simgurl" alt="">
-      <span :class="{ slectedfont: selctdeNum == i }">{{ v.btname }}</span>
+      <span :class="{ slectedfont: routePath == v.path }">{{ v.btname }}</span>
     </div>
   </div>
 </template>
@@ -57,6 +43,7 @@ let clickNum = (num,path) => {
 
 
 .bottom {
+  z-index: 999;
   background-color: #fff !important;
   display: flex;
   align-items: center;
@@ -65,8 +52,9 @@ let clickNum = (num,path) => {
   bottom: 0px;
   left: 0px;
   width: 100vw;
-  border: 1px solid red;
+  // border: 1px solid red;
   padding: 9px 0px;
+
   .bt_itm {
     display: flex;
     flex-direction: column;

src/views/HomeView.vue

@@ -30,6 +30,7 @@
       round
       position="bottom"
       :style="{ height: '45%' }"
+      style="z-index: 10"
     >
       <van-sticky style="background-color: #fff; z-index: 99">
         <van-search
@@ -132,7 +133,7 @@ const dropdown = reactive({
       tag: ["中医医院"],
       dz: "宁波市象山县南部新城兴洋路7号",
       jl: "6.7公里",
-      zb: [121.902770,29.435790],
+      zb: [121.90277, 29.43579],
     },
     {
       name: "象山第三人民医院",
@@ -268,7 +269,7 @@ const list = reactive({
 const init = () => {
   map = new T.Map("mapDiv");
   // map.setMapType(window.TMAP_SATELLITE_MAP);
-  map.centerAndZoom(new T.LngLat(121.88356,29.45144), 13);
+  map.centerAndZoom(new T.LngLat(121.88356, 29.45144), 13);
   control = new T.Control.Zoom();
   //添加缩放平移控件
   map.addControl(control);
@@ -395,7 +396,7 @@ onMounted(() => {
   width: 100%;
   height: calc(100% - 102px);
   overflow: auto;
-  padding-bottom: 50px;
+  padding-bottom: 80px;
   .cardlist {
     background-color: #fff;
     padding: 14px 16px 0;

src/views/IndexChat.vue

@@ -162,17 +162,56 @@
                                 </div>
                             </div>
                         </div>
-                        <div v-else-if="message.type == 'card4'" class="card3">
+                        <div v-else-if="message.type == 'card4'" class="card4">
                             <div class="c_top">
                                 {{ message.text }}
                             </div>
                             <div class="c_bt">
-                                <div class="cbt_it" v-for=" v in 3">
+                                <div class="switch">
-                                    <div class="it_name">神经内科</div>
+                                    <div class="sw_itm sw_itm_slected">
+                                        <div>立即就诊</div>
+                                        <div class="heng"></div>
+                                    </div>
+                                    <div class="sw_itm">
+                                        <div>更多医生</div>
+                                        <div class="heng"></div>
+                                    </div>
+                                </div>
+                                <div class="helper" v-for="dd in 3">
+                                    <div class="help_top">
+                                        推荐指数：98
+                                    </div>
+                                    <div class="help_botom">
+                                        <div class="card_top">
+                                            <img src="../assets/c1.png" alt="">
+                                            <div class="desc">
+                                                <div class="name">
+                                                    <span class="fullname">白亮</span>
+                                                    <span class="workername">主任医师</span>
+                                                </div>
+                                                <div class="work_tag">
+                                                    <span>象山县中医医院</span>
+                                                    <div class="xie"></div>
+                                                    <span>神经外科</span>
+                                                </div>
+                                                <div class="source_tag">
+                                                    <div class="tagitm">剩余号源1</div>
+                                                </div>
+                                                <div class="reson">
+                                                    <div>推荐理由：</div>
+                                                    <div class="fill_tag">离家近</div>
+                                                    <div class="fill_tag">主任医师</div>
+                                                    <div class="fill_tag fill_tag_warn">号源紧张</div>
+
+                                                </div>
+
+                                            </div>
+                                        </div>
                                         <div class="book_btn">预约</div>
                                     </div>
                                 </div>
                             </div>
+                        </div>
                         <div v-else-if="message.type == 'card5'" class="card5">
                             <div class="card_container">
                                 <div class="cd_l">
@@ -218,7 +257,7 @@
 
         <div class="c_bottom">
             <img src="../assets/3.png">
-            <input v-model="inputText" type="text" placeholder="有问题尽管问我~" class="sendinput" />
+            <input v-model="inputText" type="text" placeholder="有问题尽管问我~" @keydown.enter="sendMessage" class="sendinput" />
             <div class="w_icon">
                 <img src="../assets/4.png" alt="">
             </div>
@@ -228,19 +267,23 @@
     </div>
 </template>
 <script setup>
-import { ref, reactive, nextTick, onMounted } from 'vue'
+import { ref, reactive, nextTick, onMounted, watch } from 'vue'
 let inputText = ref('')
 let messages = reactive([
+
+]);
+let messagesCopy = reactive([
     { id: 1, type: 'fstxt', text: '您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟', isMe: false },
     { id: 2, type: 'txt', text: '骨折去哪家医院', isMe: true },
-    { id: 3, type: 'card1', text: '基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。', isMe: false },
+    { id: 3, type: 'txt', text: '基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。', isMe: false },
-    { id: 4, type: 'txt', text: '基于号源等多种因素考虑，以下是相关医生推荐：', isMe: false },
+    { id: 4, type: 'card1', text: ' ', isMe: false },
-    { id: 5, type: 'card2', text: '基：', isMe: false },
+    { id: 5, type: 'txt', text: '基于号源等多种因素考虑，以下是相关医生推荐：', isMe: false },
-    { id: 6, type: 'txt', text: '最近总是头疼可以挂什么科室', isMe: true },
+    { id: 6, type: 'card2', text: '卡片2', isMe: false },
-    { id: 7, type: 'card3', text: '卡片3', isMe: false },
+    { id: 7, type: 'txt', text: '最近总是头疼可以挂什么科室', isMe: true },
-    { id: 8, type: 'card4', text: '为您推荐相关医生，也可选择查看更多医生。', isMe: false },
+    { id: 8, type: 'card3', text: '卡片3', isMe: false },
-    { id: 9, type: 'txt', text: '人民医院怎么走', isMe: true },
+    { id: 9, type: 'card4', text: '为您推荐相关医生，也可选择查看更多医生。', isMe: false },
-    { id: 10, type: 'card5', text: '卡片5', isMe: false },
+    { id: 10, type: 'txt', text: '人民医院怎么走', isMe: true },
+    { id: 11, type: 'card5', text: '卡片5', isMe: false },
 ]);
 
 const sendMessage = () => {
@@ -252,6 +295,24 @@ const sendMessage = () => {
     if (inputText.value.trim()) {
         console.log("sendMessage", inputText.value.trim())
         messages.push({ id: Date.now(), text: inputText.value, isMe: true, type: 'txt' });
+        if (inputText.value.indexOf('医院') != -1) {
+            messagesCopy[2].id = Date.now();
+            messagesCopy[3].id = Date.now()+1;
+            messages.push(messagesCopy[2],messagesCopy[3]);
+        } else if (inputText.value.indexOf('医生') != -1) {
+            messagesCopy[4].id = Date.now();
+            messagesCopy[5].id = Date.now()+1;
+            messages.push(messagesCopy[4],messagesCopy[5]);
+        }else if (inputText.value.indexOf('科室') != -1) {
+            messagesCopy[7].id = Date.now();
+            messagesCopy[8].id = Date.now()+1;
+            messages.push(messagesCopy[7],messagesCopy[8]);
+        }else if (inputText.value.indexOf('导航') != -1) {
+            messagesCopy[10].id = Date.now();
+            messages.push(messagesCopy[10]);
+        }else{
+            messages.push({ id: Date.now(), text: '抱歉没听听懂 支持 医院 医生 科室 导航 关键词', isMe: false, type: 'txt' });
+        }
         console.log("messages", messages)
         scollToButtom();
         inputText.value = '';
@@ -265,7 +326,19 @@ const scollToButtom = () => {
         }
     });
 }
-// onMounted(scrollToBottom);
+/* watch(inputText, (newValue, oldValue) => {
+    console.log('inputText changed from', oldValue, 'to', newValue)
+    // 在这里，你可以添加处理 inputText 变化的逻辑
+}) */
+onMounted(() => {
+    scollToButtom()
+    // messages
+    setTimeout(() => {
+        messages.push({ id: Date.now(), type: 'fstxt', text: '您可以点击下方快捷方式选择问题，或直接编辑问题发送给我哟', isMe: false });
+    }, 500);
+
+})
+
 </script>
 <style lang="scss" scoped>
 ::-webkit-input-placeholder {
@@ -602,7 +675,7 @@ const scollToButtom = () => {
     background-color: #fff;
     box-sizing: border-box;
     padding: 16px;
-    border: 1px solid red;
+    border: 1px solid transparent;
 
     .c_top {
         margin-bottom: 12px;
@@ -641,7 +714,212 @@ const scollToButtom = () => {
     }
 }
 
-.card4 {}
+.card4 {
+    width: 330px;
+    height: 605px;
+    border-radius: 16px;
+    background-color: #fff;
+    box-sizing: border-box;
+    padding: 16px;
+    border: 1px solid transparent;
+
+    .c_top {
+        margin-bottom: 12px;
+    }
+
+    .c_bt {
+        .switch {
+            display: flex;
+            align-items: center;
+            border-top: 1px #F1F1F1 solid;
+            font-size: 14px;
+            font-family: PingFang SC, PingFang SC;
+            font-weight: 400;
+            color: #333333;
+
+            .sw_itm {
+                width: 50%;
+                height: 40px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                flex-direction: column;
+
+                .heng {
+                    width: 21px;
+                    height: 1px;
+                    border: 1px solid transparent;
+                }
+            }
+
+            .sw_itm_slected {
+                font-weight: 600;
+                color: #4379FF;
+
+                .heng {
+                    width: 21px;
+                    height: 1px;
+                    border: 1px solid #4379FF;
+                }
+            }
+
+            /*  .sw_itm_slected::before {
+                content: '';
+                display: block;
+                height: 1px;
+                width: 6px;
+                border: 1px solid #333;
+
+            } */
+        }
+
+        .helper {
+            background-color: #EFF3FC;
+            border-radius: 16px;
+            overflow: hidden;
+            margin-top: 8px;
+
+            .help_top {
+                background: linear-gradient(90deg, #6491FF 0%, #4379FF 100%);
+                padding-left: 16px;
+                color: #fff;
+                font-size: 14px;
+            }
+
+            .help_botom {
+                position: relative;
+
+                .card_top {
+                    display: flex;
+                    padding: 16px;
+                    box-sizing: border-box;
+
+                    img {
+                        width: 50px;
+                        height: 50px;
+                        border-radius: 5px;
+                        margin-right: 12px;
+                    }
+
+                    .desc {
+                        .name {
+
+                            .fullname {
+                                font-size: 14px;
+                                font-family: PingFang SC, PingFang SC;
+                                font-weight: 500;
+                                color: #333333;
+                                line-height: 14px;
+                            }
+
+                            .workername {
+                                font-size: 12px;
+                                font-family: PingFang SC, PingFang SC;
+                                font-weight: 500;
+                                color: #666666;
+                                margin-left: 8px;
+                            }
+                        }
+
+
+                        .work_tag {
+                            font-size: 12px;
+                            font-family: PingFang SC, PingFang SC;
+                            font-weight: 400;
+                            color: #999999;
+                            display: flex;
+                            align-items: center;
+
+                            .xie {
+                                width: 1px;
+                                border: 1px solid #999999;
+                                height: 12px;
+                                margin: 0px 10px;
+                                opacity: 0.5;
+                            }
+                        }
+
+                        .source_tag {
+                            font-size: 12px;
+                            font-family: PingFang SC, PingFang SC;
+                            font-weight: 400;
+                            color: #4379FF;
+                            display: flex;
+                            align-items: center;
+                            justify-content: flex-start;
+
+                            .tagitm {
+                                border: 1px solid #4379FF;
+                                padding: 0px 2px;
+                                text-align: center;
+                                height: 16px;
+                                line-height: 16px;
+
+                            }
+                        }
+
+                        .reson {
+                            font-size: 12px;
+                            font-family: PingFang SC, PingFang SC;
+                            font-weight: 400;
+                            color: #666666;
+                            display: flex;
+                            align-items: center;
+                            flex-wrap: wrap;
+                            margin-top: 8px;
+
+                            .fill_tag {
+                                height: 16px;
+                                background: #C2D2FC;
+                                border-radius: 4px 4px 4px 4px;
+                                font-size: 10px;
+                                font-family: PingFang SC, PingFang SC;
+                                font-weight: 400;
+                                color: #4379FF;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                padding: 4px;
+                                margin-right: 2px;
+                            }
+
+                            .fill_tag_warn {
+                                background-color: #FFD7C0;
+                                color: #FF5D29;
+                                border-radius: 4px 4px 4px 4px;
+                            }
+                        }
+
+                        .detail {
+                            font-size: 10px;
+                            font-family: PingFang SC, PingFang SC;
+                            font-weight: 400;
+                            color: #999999;
+                            line-height: 14px;
+                            margin-top: 12px;
+                        }
+                    }
+                }
+
+                .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;
+                    position: absolute;
+                    right: 16px;
+                    top: 16px;
+                }
+            }
+
+        }
+    }
+
+
+}
 
 .card5 {
     width: 280px;
@@ -657,6 +935,7 @@ const scollToButtom = () => {
         top: 50%;
         transform: translateY(-44%);
         right: -35px;
+
         img {
             width: 100%;
             height: 100%;
@@ -768,7 +1047,7 @@ const scollToButtom = () => {
     .message-container {
         height: calc(100vh - 124px);
         overflow: auto;
-        border: 1px red solid;
+        border: 1px transparent solid;
         background-color: rgb(245, 245, 251);
         position: relative;
         padding-top: 20px;
@@ -786,7 +1065,7 @@ const scollToButtom = () => {
         // height: 60px;
         min-height: 60px;
         background-color: #fff;
-        border: 1px solid red;
+        border: 1px solid transparent;
         position: absolute;
         // bottom: 180px;
         top: calc(100vh - 122px);
@@ -809,7 +1088,7 @@ const scollToButtom = () => {
             /*   display: flex;
             align-items: center;
             justify-content: flex-start; */
-            border: 1px solid red;
+            border: 1px solid transparent;
             // width: calc(100vw - 154px);
             width: 16px;
             height: 16px;