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:
duanxiaohai 2023-12-08 09:25:20 +08:00
parent dd124a89be ebf4875221
commit 2a479bc09f
5 changed files with 581 additions and 57 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;

BIN
src/assets/home/wdwz.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

282
src/views/HomeView.vue
View File

@ -29,8 +29,60 @@
:overlay="false"
round
position="bottom"
:style="{ height: '30%' }"
/>
:style="{ height: '45%' }"
style="z-index: 10"
>
<van-sticky style="background-color: #fff; z-index: 99">
<van-search
v-model="value"
shape="round"
background="#4fc08d00"
placeholder=""
/>
<van-dropdown-menu>
<van-dropdown-item
v-model="dropdown.value1"
:options="dropdown.option1"
/>
<van-dropdown-item
v-model="dropdown.value2"
:options="dropdown.option2"
/>
<van-dropdown-item
v-model="dropdown.value3"
:options="dropdown.option3"
/>
</van-dropdown-menu>
</van-sticky>
<div class="card">
<div
class="cardlist"
v-for="(item, index) in dropdown.rmyy"
:key="index"
>
<img class="imgse" :src="item.img" alt="" />
<div class="bodys">
<div class="bt">{{ item.name }}</div>
<div class="dz">
<div class="tp">
<img class="ims" src="../assets/home/dz.png" alt="" />
</div>
<div class="zl">{{ item.jl }}</div>
<div class="xxdz">{{ item.dz }}</div>
</div>
<div class="bq">
<van-tag
v-for="(item, index) in item.tag"
:key="index"
plain
type="primary"
>{{ item }}</van-tag
>
</div>
</div>
</div>
</div>
</van-popup>
</div>
</template>
@ -53,11 +105,122 @@ import img14 from "@/assets/home/ryzfxz.png";
import img15 from "@/assets/home/yxfw.png";
import img16 from "@/assets/home/yxfwxz.png";
import img17 from "@/assets/home/yy.png";
import img18 from "@/assets/home/wdwz.png";
var map = null;
var control = null;
var T = window.T;
const dropdown = reactive({
value1: 0,
value2: 0,
value3: 0,
option1: [{ text: "智能排序", value: 0 }],
option2: [{ text: "位置距离", value: 0 }],
option3: [{ text: "其他筛选", value: 0 }],
rmyy: [
{
name: "象山第一人民医院",
img: "http://store.is.autonavi.com/showpic/756391e986455206891ae6d6c27ac430?type=pic",
tag: ["综合医院", "二级甲等"],
dz: "宁波市象山县东谷路289-291",
jl: "1公里",
zb: [121.88637, 29.47231],
},
{
name: "象山县中医医院(新院区)",
img: "https://aos-comment.amap.com/B0FFKGTE0P/headerImg/40db9d22bfd0099a2e3418da8f3e9c5b_2048_2048_80.jpg",
tag: ["中医医院"],
dz: "宁波市象山县南部新城兴洋路7号",
jl: "6.7公里",
zb: [121.90277, 29.43579],
},
{
name: "象山第三人民医院",
img: "http://store.is.autonavi.com/showpic/a0ff397c63274b1438755089ccc972d1?type=pic",
tag: ["综合医院", "二级医院"],
dz: "宁波市象山县丹西街道樟树下村",
jl: "3.8公里",
zb: [121.89218, 29.44957],
},
{
name: "丹城中心卫生院",
img: "http://store.is.autonavi.com/showpic/fee5ebf4dd4ccae1908faf4993d557bf?type=pic",
tag: ["卫生院"],
dz: "宁波市象山县上吴村254-2号",
jl: "2.5公里",
zb: [121.892122, 29.449637],
},
{
name: "象山爱尔眼科医院",
img: "http://store.is.autonavi.com/showpic/1d00880c0dce4c237df8499b20eda61d?type=pic",
tag: ["眼科医院"],
dz: "宁波市象山县丹西街道象山港路118号",
jl: "3.4公里",
zb: [121.86596, 29.4603],
},
{
name: "西港村卫生室",
img: "http://store.is.autonavi.com/showpic/aeec5aeacbb4deebb2530a060b37091a?type=pic",
tag: ["卫生院"],
dz: "宁波市象山县规划路与滨海大道交叉口东460米",
jl: "7.5公里",
zb: [121.910589, 29.422593],
},
{
name: "翁敬堂骨伤医院",
img: "http://store.is.autonavi.com/showpic/eb553882ac643ce7edba3074d2b27516?type=pic",
tag: ["骨科医院"],
dz: "宁波市象山县新丰路298号",
jl: "2.6公里",
zb: [121.87011, 29.46552],
},
{
name: "宁波口腔医院象山分院",
img: "http://store.is.autonavi.com/showpic/0ada714ce414813321099165da07151d?type=pic",
tag: ["口腔医院"],
dz: "宁波市象山县丹河东路1098号",
jl: "1.6公里",
zb: [121.898524, 29.461311],
},
{
name: "星城医院",
img: "http://store.is.autonavi.com/showpic/89bfcbf76b4b197a4fb94b10d49b7bf4?type=pic",
tag: ["综合医院"],
dz: "宁波市象山县丹河东路1086号",
jl: "1.7公里",
zb: [121.89456, 29.46375],
},
{
name: "宁波港城口腔医院",
img: "http://store.is.autonavi.com/showpic/d77f446fcacc052f9d1aed8554d125c8?type=pic",
tag: ["口腔医院"],
dz: "宁波市象山县丹东街道新华路269号",
jl: "1.6公里",
zb: [121.88508, 29.46631],
},
{
name: "益民口腔",
img: "http://store.is.autonavi.com/showpic/b742650078a06ec8443c31c94fa4c32c?type=pic",
tag: ["口腔诊所"],
dz: "台州市天台县和合北路161-17号",
jl: "917米",
zb: [121.89336, 29.47956],
},
{
name: "象山妇幼保健院",
img: "http://store.is.autonavi.com/showpic/b742650078a06ec8443c31c94fa4c32c?type=pic",
tag: ["妇幼医院"],
dz: "宁波市象山县城东路1号",
jl: "3公里",
zb: [121.87026, 29.48092],
},
],
});
const list = reactive({
show: true,
index: 0,
index: 3,
yxfw: [
{
id: 0,
@ -104,29 +267,40 @@ const list = reactive({
],
});
const init = () => {
var T = window.T;
map = new T.Map("mapDiv");
// map.setMapType(window.TMAP_SATELLITE_MAP);
map.centerAndZoom(new T.LngLat(121.91686, 29.42154), 12);
map.centerAndZoom(new T.LngLat(121.88356, 29.45144), 13);
control = new T.Control.Zoom();
//添加缩放平移控件
map.addControl(control);
control.setPosition(T_ANCHOR_TOP_RIGHT);
var icon = new T.Icon({
iconUrl: img17,
iconUrl: img18,
iconSize: new T.Point(28, 28),
iconAnchor: new T.Point(28, 28),
});
//向地图上添加自定义标注
var marker = new T.Marker(new T.LngLat(121.94773, 29.47982), { icon: icon });
var markers = new T.Marker(new T.LngLat(121.89074, 29.40876), { icon: icon });
var marker = new T.Marker(new T.LngLat(121.89248, 29.47474), { icon: icon });
map.addOverLay(marker);
map.addOverLay(markers);
yxf();
};
const yxfwxz = (e) => {
list.index = e.id;
};
const yxf = () => {
dropdown.rmyy.forEach((item, index) => {
var icons = new T.Icon({
iconUrl: img17,
iconSize: new T.Point(28, 28),
iconAnchor: new T.Point(28, 28),
});
var LngLats = new T.Marker(new T.LngLat(item.zb[0], item.zb[1]), {
icon: icons,
});
map.addOverLay(LngLats);
});
};
onMounted(() => {
init();
});
@ -148,15 +322,16 @@ onMounted(() => {
z-index: 2;
position: absolute;
width: 40px;
height: 40px;
background: #ffffff;
border-radius: 6px 6px 6px 6px;
opacity: 1;
text-align: center;
padding-bottom: 5px;
padding-top: 3px;
.yxfwtp {
width: 18px;
height: 18px;
margin: 6px auto 0;
margin: 2px auto 0;
}
.yxfwwz {
font-size: 8px;
@ -176,7 +351,7 @@ onMounted(() => {
.yxfwnr {
margin-top: 72px;
margin-left: 16px;
z-index: 2;
z-index: 10;
position: absolute;
background: #ffffff;
border-radius: 6px 6px 6px 6px;
@ -186,7 +361,7 @@ onMounted(() => {
width: 50%;
height: 5px;
border-bottom: 1px solid #f1f1f1;
margin: 0 auto 5px;
margin: 0 auto 3px;
}
.yxfws {
z-index: 2;
@ -199,7 +374,7 @@ onMounted(() => {
.yxfwtp {
width: 18px;
height: 18px;
margin: 6px auto 0;
margin: 4px auto 0;
}
.yxfwwz {
font-size: 8px;
@ -217,4 +392,83 @@ onMounted(() => {
}
}
}
.card {
width: 100%;
height: calc(100% - 102px);
overflow: auto;
padding-bottom: 80px;
.cardlist {
background-color: #fff;
padding: 14px 16px 0;
width: 100%;
height: 80px;
display: flex;
.imgse {
width: 100px;
border-radius: 3px;
height: 68px;
}
.bodys {
border-bottom: 1px solid #f1f1f1;
height: 68px;
width: 250px;
margin-left: 12px;
.bq {
padding-top: 8px;
display: flex;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.van-tag--primary.van-tag--plain {
margin-right: 2px;
}
}
.bt {
font-size: 14px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #333333;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.dz {
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 12px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-top: 2px;
display: flex;
.tp {
width: 12px;
}
.xxdz {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 170px;
}
.zl {
padding-right: 5px;
}
.ims {
width: 12px;
height: 12px;
}
}
}
}
}
:deep(.van-dropdown-menu__bar) {
box-shadow: 0 0px 0px rgba(100, 101, 102, 0.12);
border-bottom: 1px solid #f1f1f1;
}
</style>

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;

3
vite.config.js
View File

@ -5,6 +5,9 @@ import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
server: { // ← ← ← ← ← ←
host: '0.0.0.0' // ← 新增内容 ←
},
plugins: [
vue(),
],