xiangshan
/
yxdth5
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
姚宇浩 2023-12-08 09:26:14 +08:00
parent 51517a4592 ebf4875221
commit 8bc108de0c
3 changed files with 314 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/App.vue
View File

@ -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()
// let routePath = ref(route.path)
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:'/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)">
<img v-if="selctdeNum != i" :src="v.imgurl" alt="">
<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-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;

7
src/views/HomeView.vue
View File

@ -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;

319
src/views/IndexChat.vue
View File

@ -162,14 +162,53 @@
</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="it_name">神经内科</div>
<div class="book_btn">预约</div>
<div class="switch">
<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>
@ -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: 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 },
{ id: 3, type: 'txt', text: '基于您目前的地理位置、时间、医院号源等多种因素为您推荐如下结果。您还可根据自身偏好重新选择，继续为您推荐；如偏好因素不在其列，可继续提出您的需求。', isMe: false },
{ id: 4, type: 'card1', text: ' ', isMe: false },
{ id: 5, type: 'txt', text: '基于号源等多种因素考虑，以下是相关医生推荐：', isMe: false },
{ id: 6, type: 'card2', text: '卡片2', isMe: false },
{ id: 7, type: 'txt', text: '最近总是头疼可以挂什么科室', isMe: true },
{ id: 8, type: 'card3', text: '卡片3', isMe: false },
{ id: 9, type: 'card4', text: '为您推荐相关医生，也可选择查看更多医生。', 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;