Skip to content

G
graducationWeb_vant
Commit 4354670b by liying
Options

2.8号提交

parent a9c25671
Showing with 1197 additions and 240 deletions
index.html
......@@ -6,7 +6,7 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Vite + Vue</title>
<title>养老服务移动端</title>
</head>
<body>
......
package.json
......@@ -13,6 +13,9 @@
"@nutui/nutui": "^4.2.9",
"amfe-flexible": "^2.2.1",
"axios": "^1.6.7",
"element-plus": "^2.5.5",
"qrcodejs2": "^0.0.2",
"qrcodejs2-fix": "^0.0.1",
"vant": "^4.8.3",
"vant-green": "^1.0.44",
"vue": "^3.3.11",
......
src/assets/t1.png deleted 100644 → 0
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/t2.png deleted 100644 → 0
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/t3.png deleted 100644 → 0
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/t4.png deleted 100644 → 0
This image diff could not be displayed because it is too large. You can view the blob instead.
src/components/carouselChart.vue
......@@ -12,10 +12,10 @@
import { ref } from 'vue';
import { Swipe, SwipeItem } from 'vant';
// 但是在使用本地图片时，你需要使用 require 或者 import 的方式引入本地图片。
import lun3Image from "@/assets/t3.png"
import lun1Image from "@/assets/t1.png"
import lun2Image from "@/assets/t2.png"
import lun4Image from "@/assets/t4.png"
import lun3Image from "@/assets/lun/lun1.jpg"
import lun1Image from "@/assets/lun/lun2.jpg"
import lun2Image from "@/assets/lun/lun3.jpg"
import lun4Image from "@/assets/lun/lun4.jpg"
export default {
......
src/components/qrcode.vue 0 → 100644
<template>
<div>
<input type="text" value="666" v-model="text" placeholder="请输入要生成二维码的内容">
<button @click="showQRCodeDialog">生成二维码</button>
<van-dialog
v-model:show="dialogVisible"
title="二维码"
width="80%"
:before-close="handleClose"
>
<div class="qrcode-container">
<div id="qrcode"></div>
</div>
</van-dialog>
</div>
</template>
<script setup>
import QRCode from 'qrcodejs2-fix';
import { ref } from 'vue';
const text = ref('');
const dialogVisible = ref(false);
const generateQRCode = () => {
const qrcodeContainer = document.getElementById('qrcode');
console.log('qrcodeContainer:', qrcodeContainer);
if (!qrcodeContainer) {
console.error('DOM element for QR code is not found.');
return;
}
qrcodeContainer.innerHTML = ''; // 清空之前的二维码
const qrCodeInstance = new QRCode(qrcodeContainer, {
text: text.value,
width: 200,
height: 200
});
};
const showQRCodeDialog = () => {
dialogVisible.value = true; // 显示对话框
generateQRCode(); // 生成二维码
};
const handleClose = () => {
dialogVisible.value = false; // 关闭对话框时清空二维码
};
</script>
<style>
.qrcode-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%; /* 如果需要垂直居中，可以设置容器高度为100% */
}
</style>
src/components/recommend.vue
......@@ -6,12 +6,12 @@
<div class="card-title">推荐机构</div>
<!-- 右侧文字 -->
<div class="card-more">更多</div>
<router-link to="/institution" class="card-more">更多</router-link>
</div>
<!-- Card 的内容，包含 Grid 展示四个图片 -->
<div class="grid-container">
<div v-for="(item, index) in gridItems" :key="index" class="grid-item">
<div v-for="(item, index) in gridItems" @click="goToDetailPage" :key="index" class="grid-item">
<!-- 这里可以放置图片和文字 -->
<img :src="item.image" alt="" class="grid-image" />
<div class="grid-item-title">{{ item.title }}</div>
......@@ -20,25 +20,27 @@
</div>
</template>
<script>
import y1Image from "@/assets/yanglao/y1.png"
import y2Image from "@/assets/yanglao/y2.jpeg"
import y3Image from "@/assets/yanglao/y3.png"
import y4Image from "@/assets/yanglao/y4.png"
import y5Image from "@/assets/yanglao/y5.png"
export default {
data() {
return {
gridItems: [
{ title: '机构1', image: y1Image },
{ title: '机构2', image: y2Image },
{ title: '机构3', image: y3Image },
{ title: '机构4', image: y4Image },
],
};
},
};
</script>
<script setup>
import { useRouter } from 'vue-router';
import y1Image from "@/assets/yanglao/y1.jpg";
import y2Image from "@/assets/yanglao/y2.jpg";
import y3Image from "@/assets/yanglao/y3.jpg";
import y4Image from "@/assets/yanglao/y4.jpg";
const router = useRouter();
const gridItems = [
{ id: 1, title: '武汉市黄陂区红叶养老院', image: y1Image },
{ id: 2, title: '武汉市黄陂区夕阳颐养院', image: y2Image },
{ id: 3, title: '武汉市黄陂区夕阳颐养院', image: y3Image },
{ id: 4, title: '武汉市黄陂区夕阳颐养院', image: y4Image },
];
const goToDetailPage = (id) => {
// 导航到详情页面，并携带参数 机构ID
router.push({ path: '/institutionDetail', query: { id : 123 } });
};
</script>
<style scoped>
/* 卡片样式 */
......@@ -60,7 +62,7 @@
/* 卡片标题样式 */
.card-title {
font-size: 16px;
font-size: 28px;
font-weight: bold;
padding: 10px;
}
......@@ -68,7 +70,7 @@
/* 更多文字样式 */
.card-more {
text-align: right;
font-size: 16px;
font-size: 28px;
padding: 10px;
color: #007aff;
}
......@@ -100,6 +102,6 @@
.grid-item-title {
text-align: center;
padding: 10px;
font-size: 14px;
font-size: 26px;
}
</style>
\ No newline at end of file
src/components/service.vue
......@@ -6,41 +6,42 @@
<div class="card-title">热门服务</div>
<!-- 右侧文字 -->
<div class="card-more">更多</div>
<router-link to="/found" class="card-more">更多</router-link>
</div>
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
<van-card
v-for="(item, index) in items" @click="goToDetailPage"
:key="index"
:num="item.num"
:price="item.price"
:desc="item.desc"
:title="item.title"
:thumb="item.thumb"
>
<template #tags>
<van-tag plain type="primary">标签</van-tag>
<van-tag plain type="primary">标签</van-tag>
<van-tag
v-for="(tag, tagIndex) in item.tags"
:key="tagIndex"
plain
type="primary"
>
{{ tag }}
</van-tag>
</template>
<template #footer>
<van-button size="mini">按钮</van-button>
<van-button size="mini">按钮</van-button>
</template>
</van-card>
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
>
<template #tags>
<van-tag plain type="primary">标签</van-tag>
<van-tag plain type="primary">标签</van-tag>
</template>
<template #footer>
<van-button size="mini">按钮</van-button>
<van-button size="mini">按钮</van-button>
<van-button
v-for="(button, buttonIndex) in item.buttons"
:key="buttonIndex"
size="mini"
>
{{ button }}
</van-button>
</template>
</van-card>
<br>
<br>
......@@ -48,8 +49,48 @@
</div>
</template>
<script>
import lun1Image from "@/assets/lun1.png";
<script setup>
import s1Image from "@/assets/ser/service1.jpg";
import s2Image from "@/assets/ser/service2.jpg";
import s3Image from "@/assets/ser/service3.jpg";
import { useRouter } from 'vue-router';
const router = useRouter();
const items= [
{
num: "1",
price: "3.00",
desc: "早15午20晚上20",
title: "上门送餐（早中晚）",
thumb: s3Image,
tags: ["武汉市幸福养老服务中心"],
buttons: ["订购", "收藏"],
},
{
num: "2",
price: "2.00",
desc: "描述信息1",
title: "商品标题1",
thumb: s1Image,
tags: ["标签1", "标签2"],
buttons: ["按钮1", "按钮2"],
},
{
num: "3",
price: "3.00",
desc: "描述信息2",
title: "商品标题2",
thumb: s2Image,
tags: ["标签3", "标签4"],
buttons: ["按钮3", "按钮4"],
},
// 可以添加更多的商品信息对象
]
const goToDetailPage = () => {
// 导航到详情页面，并携带参数 机构ID
router.push({ path: '/serviceDetail', query: { id: 123} });
};
</script>
<style scoped>
......@@ -72,7 +113,7 @@ import lun1Image from "@/assets/lun1.png";
/* 卡片标题样式 */
.card-title {
font-size: 16px;
font-size: 28px;
font-weight: bold;
padding: 10px;
}
......@@ -80,7 +121,7 @@ import lun1Image from "@/assets/lun1.png";
/* 更多文字样式 */
.card-more {
text-align: right;
font-size: 16px;
font-size: 28px;
padding: 10px;
color: #007aff;
}
......
src/components/tabBar/index.vue
<template>
<div>
<!-- 菜单栏 -->
<van-tabbar v-model="activeName" class="custom-tabbar" route active-color="#f7e087" inactive-color="#a5a29e">
<van-tabbar v-model="active" class="custom-tabbar" route active-color="#f7e087" inactive-color="#a5a29e">
<van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
<van-tabbar-item icon="apps-o" to="/found">服务产品</van-tabbar-item>
<van-tabbar-item icon="shopping-cart-o" to="/publish">地图</van-tabbar-item>
......@@ -9,34 +9,58 @@
</van-tabbar>
<!-- 中间二维码按钮 -->
<div class="qrcode-button" @click="showQrcode">
<input type="hidden" value="444" v-model="text" placeholder="请输入要生成二维码的内容">
<div class="qrcode-button" @click="showQRCodeDialog">
<img src="@/assets/qr.png" alt="Qrcode" />
</div>
<van-dialog
v-model:show="dialogVisible"
title="二维码"
width="80%"
:before-close="handleClose"
>
<div class="qrcode-container">
<div id="qrcode"></div>
</div>
</van-dialog>
</div>
</template>
<script>
<script setup>
import { ref } from 'vue';
import { Tabbar, Tab } from 'vant';
const activeName = ref(0);
import QRCode from 'qrcodejs2-fix';
const text = ref('44444');
const dialogVisible = ref(false);
const active = ref('/');
const generateQRCode = () => {
const qrcodeContainer = document.getElementById('qrcode');
console.log('qrcodeContainer:', qrcodeContainer);
if (!qrcodeContainer) {
console.error('DOM element for QR code is not found.');
return;
}
qrcodeContainer.innerHTML = ''; // 清空之前的二维码
const qrCodeInstance = new QRCode(qrcodeContainer, {
text: text.value,
width: 200,
height: 200
});
};
export default {
components: {
VanTabbar: Tabbar,
VanTab: Tab,
},
data() {
return {
active: '/',
};
},
methods: {
showQrcode() {
// 处理点击按钮后显示二维码的逻辑
console.log('显示二维码');
},
},
const showQRCodeDialog = () => {
dialogVisible.value = true; // 显示对话框
generateQRCode(); // 生成二维码
};
const handleClose = () => {
dialogVisible.value = false; // 关闭对话框时清空二维码
};
</script>
<style>
......@@ -44,7 +68,7 @@ export default {
position: fixed;
bottom: 0;
width: 100%;
z-index: 1;;
z-index: 1;
}
.qrcode-button {
......@@ -61,4 +85,11 @@ export default {
height: 88px; /* 调整二维码图片大小 */
border-radius: 50%;
}
.qrcode-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%; /* 如果需要垂直居中，可以设置容器高度为100% */
}
</style>
src/components/tabBar/index_service.vue 0 → 100644
<template>
<div>
<!-- 菜单栏 -->
<van-tabbar v-model="active" class="custom-tabbar" route active-color="#f7e087" inactive-color="#a5a29e">
<van-tabbar-item icon="home-o" to="/">工单</van-tabbar-item>
<van-tabbar-item icon="apps-o" to="/found">所属机构</van-tabbar-item>
<van-tabbar-item icon="shopping-cart-o" to="/publish">消息</van-tabbar-item>
<van-tabbar-item icon="user-o" to="/mine">我的</van-tabbar-item>
</van-tabbar>
<!-- 中间二维码按钮 -->
<input type="hidden" value="444" v-model="text" placeholder="请输入要生成二维码的内容">
<div class="qrcode-button" @click="showQRCodeDialog">
<img src="@/assets/qr.png" alt="Qrcode" />
</div>
<van-dialog
v-model:show="dialogVisible"
title="二维码"
width="80%"
:before-close="handleClose"
>
<div class="qrcode-container">
<div id="qrcode"></div>
</div>
</van-dialog>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { Tabbar, Tab } from 'vant';
import QRCode from 'qrcodejs2-fix';
const text = ref('44444');
const dialogVisible = ref(false);
const active = ref('/');
const generateQRCode = () => {
const qrcodeContainer = document.getElementById('qrcode');
console.log('qrcodeContainer:', qrcodeContainer);
if (!qrcodeContainer) {
console.error('DOM element for QR code is not found.');
return;
}
qrcodeContainer.innerHTML = ''; // 清空之前的二维码
const qrCodeInstance = new QRCode(qrcodeContainer, {
text: text.value,
width: 200,
height: 200
});
};
const showQRCodeDialog = () => {
dialogVisible.value = true; // 显示对话框
generateQRCode(); // 生成二维码
};
const handleClose = () => {
dialogVisible.value = false; // 关闭对话框时清空二维码
};
</script>
<style>
.custom-tabbar {
position: fixed;
bottom: 0;
width: 100%;
z-index: 1;
}
.qrcode-button {
position: fixed;
left: 50%;
bottom: 60px; /* 调整按钮距离底部的距离 */
transform: translateX(-50%);
cursor: pointer;
z-index: 2;
}
.qrcode-button img {
width: 88px; /* 调整二维码图片大小 */
height: 88px; /* 调整二维码图片大小 */
border-radius: 50%;
}
.qrcode-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%; /* 如果需要垂直居中，可以设置容器高度为100% */
}
</style>
src/main.js
......@@ -5,7 +5,7 @@ import 'amfe-flexible'
import Login from "./page/login.vue"
//1.引入组件
import {Pagination, Image,Icon,SwipeCell, Form, Popover,Grid,Card,GridItem,Button,Field,CellGroup,Tabbar, TabbarItem,Search,Cell, PasswordInput,DropdownMenu, DropdownItem,Tab, Tabs } from "vant"
import {AddressList,AddressEdit,Picker,Popup,NavBar,Dialog,Pagination, Image,Icon,SwipeCell, Form, Popover,Grid,Card,GridItem,Button,Field,CellGroup,Tabbar, TabbarItem,Search,Cell, PasswordInput,DropdownMenu, DropdownItem,Tab, Tabs } from "vant"
import { Navbar } from '@nutui/nutui';
import '@nutui/nutui/dist/style.css';
//2.引入样式
......@@ -19,6 +19,12 @@ import router from "@/router/index.js"
const app = createApp(App)
app.component("Login",Login)
//3.注册使用组件
app.use(AddressList)
app.use(AddressEdit)
app.use(Picker)
app.use(Popup)
app.use(NavBar)
app.use(Dialog)
app.use(Tab)
app.use(Tabs)
app.use(Navbar)
......
src/page/found/found.vue
......@@ -11,71 +11,37 @@
<van-dropdown-item v-model="value4" :options="option4" />
</van-dropdown-menu>
<van-swipe-cell>
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
class="goods-card"
thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<template #right>
<van-button square text="收藏" type="danger" class="delete-button" />
</template>
</van-swipe-cell>
<van-swipe-cell>
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
class="goods-card"
thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<template #right>
<van-button square text="收藏" type="danger" class="delete-button" />
</template>
</van-swipe-cell>
<van-swipe-cell>
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
class="goods-card"
thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<template #right>
<van-button square text="收藏" type="danger" class="delete-button" />
</template>
</van-swipe-cell>
<van-swipe-cell>
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
class="goods-card"
thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<template #right>
<van-button square text="收藏" type="danger" class="delete-button" />
</template>
</van-swipe-cell>
<van-swipe-cell>
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
class="goods-card"
thumb="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
/>
<template #right>
<van-button square text="收藏" type="danger" class="delete-button" />
</template>
</van-swipe-cell>
<van-card v-for="(item, index) in items" @click="goToDetailPage"
:key="index"
:num="item.num"
:price="item.price"
:desc="item.desc"
:title="item.title"
:thumb="item.thumb"
>
<template #tags>
<van-tag
v-for="(tag, tagIndex) in item.tags"
:key="tagIndex"
plain
type="primary"
>
{{ tag }}
</van-tag>
</template>
<template #footer>
<van-button
v-for="(button, buttonIndex) in item.buttons"
:key="buttonIndex"
size="mini"
>
{{ button }}
</van-button>
</template>
</van-card>
<van-pagination v-model="currentPage" :total-items="50" :show-page-size="5">
<template #prev-text>
......@@ -96,7 +62,13 @@
import dinbu from "@/components/dinbu/index.vue";
import card1 from "@/components/card1.vue";
import service from '@/components/service.vue'
import s1Image from "@/assets/ser/service1.jpg";
import s2Image from "@/assets/ser/service2.jpg";
import s3Image from "@/assets/ser/service3.jpg";
import { useRouter } from 'vue-router';
const router = useRouter();
const value1 = ref(0);
const value2 = ref('a');
......@@ -125,7 +97,42 @@
const currentPage = ref(1);
const items= [
{
num: "1",
price: "3.00",
desc: "早15午20晚上20",
title: "上门送餐（早中晚）",
thumb: s3Image,
tags: ["标签3", "标签4"],
buttons: ["订购", "收藏"],
},
{
num: "2",
price: "2.00",
desc: "描述信息1",
title: "商品标题1",
thumb: s1Image,
tags: ["标签1", "标签2"],
buttons: ["按钮1", "按钮2"],
},
{
num: "3",
price: "3.00",
desc: "描述信息2",
title: "商品标题2",
thumb: s2Image,
tags: ["标签3", "标签4"],
buttons: ["按钮3", "按钮4"],
},
// 可以添加更多的商品信息对象
]
const goToDetailPage = () => {
// 导航到详情页面，并携带参数 机构ID
router.push({ path: '/serviceDetail', query: { id: 123} });
};
</script>
<style scoped>
......
src/page/index/index.vue
......@@ -8,38 +8,39 @@
<!-- 中部菜单 -->
<van-grid :column-num="4">
<van-grid-item v-for="(item, index) in menuItems" :key="index" :icon="item.icon" :text="item.text" />
<van-grid-item v-for="(item, index) in menuItems" @click="goToPage(index)" :key="index" :icon="item.icon" :text="item.text" />
</van-grid>
<!--推荐机构展示-->
<recommend></recommend>
<!--热门服务-->
<service></service>
<card1></card1>
<card1></card1>
<service></service>
<tabBar></tabBar>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from 'vue-router';
import tabBar from "@/components/tabBar/index.vue";
import http from "@/api/request";
import dinbu from "@/components/dinbu/index.vue";
import carouselChart from "../../components/carouselChart.vue";
import recommend from "../../components/recommend.vue";
import carouselChart from "@/components/carouselChart.vue";
import recommend from "@/components/recommend.vue";
import service from '@/components/service.vue'
import card1 from "../../components/card1.vue";
import s1Image from "@/assets/fuwu/s1.png"
import s2Image from "@/assets/fuwu/s2.png"
import s3Image from "@/assets/fuwu/s3.png"
import s4Image from "@/assets/fuwu/s4.png"
const keywords = ref("");
//
// const gridArr=ref([])
const recommendArr = ref();
const router = useRouter();
onMounted(async () => {
let result = await http
......@@ -53,14 +54,19 @@ onMounted(async () => {
// gridArr.value=result.data.category_nav
const menuItems = [
{ icon: s4Image ,text: '找机构' },
{ icon: s3Image, text: '找服务' },
{ icon: s2Image, text: '标题3' },
{ icon: s1Image , text: '标题4' },
{ icon: s4Image ,text: '找机构',url: '/institution'},
{ icon: s3Image, text: '找服务',url: '/found' },
{ icon: s2Image, text: '标题3',url: '/publish' },
{ icon: s1Image , text: '标题4',url: '/found' },
];
const goToPage = (index,id) => {
// 导航到详情页面，并携带参数 机构ID
const url = menuItems[index].url;
console.log(url)
router.push({ path: url, query: { id : 123 } });
};
</script>
<style scoped></style>
src/page/index/institution_detail.vue 0 → 100644
<template>
<van-nav-bar
title="机构详情"
left-text="返回"
left-arrow
@click-left="onClickLeft"
/>
<div class="organization-detail">
<!-- 图片展示 -->
<img class="organization-image" :src="organization.image" alt="Organization Image" />
<!-- 养老院标题 -->
<h1 class="organization-title">{{ organization.name }}</h1>
<!-- 机构性质信息 -->
<div class="organization-info">{{ organization.type }}</div>
<!-- 地址信息 -->
<div class="organization-address">
<van-icon name="location-o" class="address-icon" />
<span class="address-text">{{ organization.address }}</span>
</div>
<!-- 房间类型 -->
<div class="room-types">
<span v-for="(roomType, index) in organization.roomTypes" :key="index" class="room-type">{{ roomType }}</span>
</div>
<!-- 空状态图片 -->
<img class="empty-state" src="../../assets/empty.png" alt="Empty State Image" />
<!-- 温馨提示 -->
<div class="tip-panel">
<h2 class="tip-panel-title">温馨提示</h2>
<ul class="tip-list">
<li v-for="(tip, index) in organization.tips" :key="index" class="tip-item">{{ tip }}</li>
</ul>
</div>
<!-- 预约按钮 -->
<van-button class="reservation-button" type="primary" round>立即预约</van-button>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import lun1 from '../../assets/fuwu/s1.png'
import y1Image from "@/assets/yanglao/y1.jpg";
import emptyImage from "@/assets/empty.png";
const onClickLeft = () => history.back();
const router = useRouter();
console.log(router.currentRoute.value.query.id);
const organization = {
image: y1Image,
name: "武汉市黄陂区红叶养老院",
type: "机构性质信息",
address: "详细地址",
roomTypes: ["单人间", "双人间", "套房"],
tips: ["温馨提示1", "温馨提示2", "温馨提示3"]
};
</script>
<style scoped>
.organization-detail {
padding: 20px;
}
.organization-image {
width: 100%;
max-height: 300px; /* 设置最大高度 */
object-fit: cover; /* 图片等比缩放 */
border-radius: 8px;
margin-bottom: 10px;
}
.organization-title {
font-size: 22px;
font-weight: bold;
margin-bottom: 8px;
}
.organization-info {
color: #999;
font-size: 14px;
margin-bottom: 10px;
}
.organization-address {
display: flex;
align-items: center;
color: #666;
font-size: 14px;
margin-bottom: 10px;
}
.address-icon {
font-size: 16px;
margin-right: 5px;
}
.room-types {
margin-bottom: 20px;
}
.room-type {
display: inline-block;
background-color: #f0f0f0;
color: #333;
font-size: 12px;
padding: 4px 8px;
border-radius: 4px;
margin-right: 8px;
margin-bottom: 8px;
}
.empty-state {
width: 100%;
border-radius: 8px;
margin-bottom: 20px;
}
.tip-panel {
margin-bottom: 20px;
}
.tip-panel-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.tip-list {
padding-left: 20px;
}
.tip-item {
color: #666;
font-size: 14px;
margin-bottom: 6px;
}
.reservation-button {
width: 100%;
border-radius: 8px;
}
</style>
src/page/index/institution_index.vue 0 → 100644
<template>
<!-- <nut-navbar title="Title" left-show @click-back="onClick"></nut-navbar> -->
<van-nav-bar
title="机构列表"
left-text="返回"
left-arrow
@click-left="onClickLeft"
/>
<van-search v-model="value" placeholder="请输入搜索关键词" />
<!--
<van-field
v-model="fieldValue"
readonly
label="选择城市"
placeholder="亲 请输入选择的城市呐"
@click="showPicker = true"
:clearable="true"
:right-icon="''"
/>
<van-popup v-model:show="showPicker" round position="bottom">
<van-picker
:columns="columns"
@cancel="showPicker = false"
@confirm="onConfirm"
/>
</van-popup> -->
<!--下拉选项-->
<van-dropdown-menu active-color="#ee0a24">
<van-dropdown-item v-model="value1" :options="option1" />
<van-dropdown-item v-model="value2" :options="option2" />
<van-dropdown-item v-model="value3" :options="option3" />
<van-dropdown-item v-model="value4" :options="option4" />
<!-- <van-dropdown-item v-model="value5" :options="option5" /> -->
</van-dropdown-menu>
<div>
<div class="custom-card" v-for="(item, index) in items" :key="index" @click="goToDetailPage(item)">
<div class="card-content">
<!-- 图片展示 -->
<img :src="item.image" alt="图片" class="card-image" />
<!-- 图片标题 -->
<div class="card-title">{{ item.title }}</div>
<!-- 详细描述 -->
<div class="card-description">{{ item.description }}</div>
<!-- 右侧小字 -->
<div class="card-footer">人气 {{ item.popularity }}</div>
<!-- 位置显示 -->
<div class="card-location">
<van-icon name="location-o" />
<span>{{ item.location }}</span>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref,onBeforeMount,defineProps } from 'vue';
import { useRouter } from 'vue-router';
import y1Image from "@/assets/yanglao/y1.jpg";
import y2Image from "@/assets/yanglao/y2.jpg";
import y3Image from "@/assets/yanglao/y3.jpg";
import y4Image from "@/assets/yanglao/y4.jpg";
const router = useRouter();
const onClickLeft = () => history.back();
const goToDetailPage = () => {
// 导航到详情页面，并携带参数 机构ID
router.push({ path: '/institutionDetail', query: { id: 123} });
};
const columns = [
{ text: '杭州', value: 'Hangzhou' },
{ text: '宁波', value: 'Ningbo' },
{ text: '温州', value: 'Wenzhou' },
{ text: '绍兴', value: 'Shaoxing' },
{ text: '湖州', value: 'Huzhou' },
];
const fieldValue = ref('');
const showPicker = ref(false);
const onConfirm = ({ selectedOptions }) => {
showPicker.value = false;
fieldValue.value = selectedOptions[0].text;
};
const value1 = ref(0);
const value2 = ref('a');
const value3 = ref('a');
const value4 = ref('a');
const value5 = ref('a')
const option1 = [
{ text: '距离优先', value: 0 },
{ text: '低价优先', value: 1 },
{ text: '高价优先', value: 2 },
];
const option2 = [
{ text: '机构类型', value: 'a' },
{ text: '养老机构', value: 'b' },
{ text: '养老公寓', value: 'c' },
{ text: '医疗服务机构', value: 'd' },
{ text: '养老服务', value: 'e' },
{ text: '日间照料', value: 'f' },
];
const option3 = [
{ text: '区县选择', value: 'a' },
{ text: '江岸区', value: 'b' },
{ text: '江汉区', value: 'c' },
];
const option4 = [
{ text: '机构特色', value: 'a' },
{ text: '环境优美', value: 'b' },
{ text: '设施齐全', value: 'c' },
];
const option5 = [
{ text: '收住对象', value: 'a' },
{ text: '自理型护理', value: 'b' },
{ text: '半自理护理', value: 'c' },
];
const items=[
{
title: '武汉市黄陂区红叶养老院',
description: '详细描述1',
popularity: 73,
location: '详细位置1',
image: y1Image,
},
{
title: '武汉市黄陂区红叶养老院',
description: '详细描述2',
popularity: 85,
location: '详细位置2',
image: y2Image,
},
// 可以添加更多的卡片数据对象
]
</script>
<style scoped>
/* 自定义样式 */
.custom-card {
border: 1px solid #ebedf0;
border-radius: 8px;
overflow: hidden;
margin-bottom: 20px;
margin-left: 7px;
margin-right: 7px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card-content {
position: relative;
background: linear-gradient(45deg, #ff6d6d, #ff51b5);
}
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.card-title {
font-size: 20px;
font-weight: bold;
color: #fff;
margin-top: 12px;
}
.card-description {
font-size: 16px;
color: #fff;
margin-top: 8px;
}
.card-footer {
font-size: 14px;
color: #fff;
margin-top: 12px;
}
.card-location {
display: flex;
align-items: center;
color: #fff;
margin-top: 12px;
}
.location-icon {
font-size: 16px;
margin-right: 5px;
}
.location-text {
font-size: 14px;
}
</style>
\ No newline at end of file
src/page/index/service_detail.vue 0 → 100644
<template>
<van-nav-bar
title="服务详情"
left-text="返回"
left-arrow
@click-left="onClickLeft"
/>
<div class="organization-detail">
<!-- 图片展示 -->
<img class="organization-image" :src="organization.image" alt="Organization Image" />
<!-- 养老院标题 -->
<h1 class="organization-title">{{ organization.name }}</h1>
<!-- 机构性质信息 -->
<div class="organization-info">{{ organization.type }}</div>
<!-- 地址信息 -->
<div class="organization-address">
<van-icon name="location-o" class="address-icon" />
<span class="address-text">{{ organization.address }}</span>
</div>
<!-- 房间类型 -->
<div class="room-types">
<span v-for="(roomType, index) in organization.roomTypes" :key="index" class="room-type">{{ roomType }}</span>
</div>
<!-- 空状态图片 -->
<img class="empty-state" src="../../assets/logo.png" alt="Empty State Image" />
<!-- 温馨提示 -->
<div class="tip-panel">
<h2 class="tip-panel-title">温馨提示</h2>
<ul class="tip-list">
<li v-for="(tip, index) in organization.tips" :key="index" class="tip-item">{{ tip }}</li>
</ul>
</div>
<!-- 预约按钮 -->
<van-button class="reservation-button" type="primary" round>立即预约</van-button>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import lun1 from '../../assets/fuwu/s1.png'
import s1Image from "@/assets/ser/service2.jpg"
const onClickLeft = () => history.back();
const router = useRouter();
console.log(router.currentRoute.value.query.id);
const organization = {
image: s1Image,
name: "一日三餐",
type: "机构性质信息",
address: "详细地址",
roomTypes: ["单人间", "双人间", "套房"],
tips: ["温馨提示1", "温馨提示2", "温馨提示3"]
};
</script>
<style scoped>
.organization-detail {
padding: 20px;
}
.organization-image {
width: 100%;
max-height: 300px; /* 设置最大高度 */
object-fit: cover; /* 图片等比缩放 */
border-radius: 8px;
margin-bottom: 10px;
}
.organization-title {
font-size: 22px;
font-weight: bold;
margin-bottom: 8px;
}
.organization-info {
color: #999;
font-size: 14px;
margin-bottom: 10px;
}
.organization-address {
display: flex;
align-items: center;
color: #666;
font-size: 14px;
margin-bottom: 10px;
}
.address-icon {
font-size: 16px;
margin-right: 5px;
}
.room-types {
margin-bottom: 20px;
}
.room-type {
display: inline-block;
background-color: #f0f0f0;
color: #333;
font-size: 12px;
padding: 4px 8px;
border-radius: 4px;
margin-right: 8px;
margin-bottom: 8px;
}
.empty-state {
width: 100%;
border-radius: 8px;
margin-bottom: 20px;
}
.tip-panel {
margin-bottom: 20px;
}
.tip-panel-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.tip-list {
padding-left: 20px;
}
.tip-item {
color: #666;
font-size: 14px;
margin-bottom: 6px;
}
.reservation-button {
width: 100%;
border-radius: 8px;
}
</style>
src/page/index/service_people/index_service.vue 0 → 100644
<template>
<!--顶部导航栏-->
<dinbu></dinbu>
<!--轮播图-->
<carouselChart></carouselChart>
<!-- 中部菜单 -->
<van-grid :column-num="4">
<van-grid-item v-for="(item, index) in menuItems" @click="goToPage(index)" :key="index" :icon="item.icon" :text="item.text" />
</van-grid>
<!--推荐机构展示-->
<recommend></recommend>
<!--热门服务-->
<service></service>
<tabBar></tabBar>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from 'vue-router';
import tabBar from "@/components/tabBar/index_service.vue";
import http from "@/api/request";
import dinbu from "@/components/dinbu/index.vue";
import carouselChart from "@/components/carouselChart.vue";
import recommend from "@/components/recommend.vue";
import service from '@/components/service.vue'
import s1Image from "@/assets/fuwu/s1.png"
import s2Image from "@/assets/fuwu/s2.png"
import s3Image from "@/assets/fuwu/s3.png"
import s4Image from "@/assets/fuwu/s4.png"
const keywords = ref("");
// const gridArr=ref([])
const recommendArr = ref();
const router = useRouter();
onMounted(async () => {
let result = await http
.post("/login", { username: "admin", password: "123456" })
.catch((err) => {
console.log(err);
});
recommendArr.value = result.data;
});
// gridArr.value=result.data.category_nav
const menuItems = [
{ icon: s4Image ,text: '找机构',url: '/institution'},
{ icon: s3Image, text: '找服务',url: '/found' },
{ icon: s2Image, text: '标题3',url: '/publish' },
{ icon: s1Image , text: '标题4',url: '/found' },
];
const goToPage = (index,id) => {
// 导航到详情页面，并携带参数 机构ID
const url = menuItems[index].url;
console.log(url)
router.push({ path: url, query: { id : 123 } });
};
</script>
<style scoped></style>
src/page/mine/addressAdit.vue 0 → 100644
<template>
<van-nav-bar
title="编辑地址"
left-text="返回"
left-arrow
@click-left="onClickLeft"
/>
<van-address-edit
:area-list="areaList"
show-delete
show-set-default
show-search-result
:search-result="searchResult"
:area-columns-placeholder="['请选择', '请选择', '请选择']"
@save="onSave"
@delete="onDelete"
@change-detail="onChangeDetail"
/>
</template>
<script>
import { ref } from 'vue';
import { showToast } from 'vant';
export default {
setup() {
const searchResult = ref([]);
const areaList = ref([]); // 添加这一行定义 areaList 变量
const onClickLeft = () => history.back();
const onSave = () => showToast('save');
const onDelete = () => showToast('delete');
const onChangeDetail = (val) => {
if (val) {
searchResult.value = [
{
name: '黄龙万科中心',
address: '杭州市西湖区',
},
];
} else {
searchResult.value = [];
}
};
return {
onSave,
onDelete,
areaList,
searchResult,
onChangeDetail,
onClickLeft
};
},
};
</script>
<style>
</style>
\ No newline at end of file
src/page/mine/addressList.vue 0 → 100644
<template>
<van-nav-bar
title="我的地址"
left-text="返回"
left-arrow
@click-left="onClickLeft"
/>
<van-address-list
v-model="chosenAddressId"
:list="list"
:disabled-list="disabledList"
disabled-text="以下地址超出配送范围"
default-tag-text="默认"
@add="onAdd"
@edit="onEdit"
/>
</template>
<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
export default {
setup() {
const router = useRouter();
const chosenAddressId = ref('1');
const onClickLeft = () => history.back();
const list = [
{
id: '1',
name: '张三',
tel: '13000000000',
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
isDefault: true,
},
{
id: '2',
name: '李四',
tel: '1310000000',
address: '浙江省杭州市拱墅区莫干山路 50 号',
},
];
const disabledList = [
{
id: '3',
name: '王五',
tel: '1320000000',
address: '浙江省杭州市滨江区江南大道 15 号',
},
];
const onAdd = () => showToast('新增地址');
const onEdit = (item, index) => {
showToast('编辑地址:' + index);
router.push("/addressAdit")
}
return {
list,
onAdd,
onEdit,
disabledList,
chosenAddressId,
onClickLeft
};
},
};
</script>
<style>
</style>
\ No newline at end of file
src/page/mine/mine.vue
......@@ -57,9 +57,9 @@
<!-- 我的活动 -->
<van-cell
title="我的活动"
title="我的地址"
is-link
@click="goToSettings" class="organization-cell "
@click="goToAddressList" class="organization-cell "
>
<template #icon>
<van-icon name="point-gift-o" class="icon" />
......@@ -118,10 +118,12 @@
<script setup>
import { ref, reactive } from "vue";
import { useRouter } from 'vue-router';
import tabBar from "@/components/tabBar/index.vue";
import myOrder from '@/components/order/myOrder.vue'
const yourAvatarUrl = ref('https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg');
const nickname = ref('Your Nickname');
const router = useRouter();
function goToMyOrders() {
// 处理跳转到我的订单页面
......@@ -130,6 +132,9 @@
function goToMyWallet() {
// 处理跳转到我的钱包页面
}
function goToAddressList(){
router.push("/addressList")
}
function goToMemberCenter() {
// 处理跳转到会员中心页面
}
......
src/page/mine/orders.vue
<template>
<!-- <nut-navbar title="Title" left-show @click-back="onClick"></nut-navbar> -->
<nut-navbar title="服务订单" left-show @click-back="onClick">
<!-- <nut-navbar title="服务订单" left-show @click-back="onClick">
<template #left>
<!-- <div>Back</div> -->
<div>Back</div>
</template>
</nut-navbar>
</nut-navbar> -->
<van-nav-bar
title="全部订单"
left-text="返回"
left-arrow
@click-left="onClickLeft"
/>
<van-tabs v-model:active="activeName">
......@@ -22,6 +27,7 @@
<script setup>
import { ref,onBeforeMount,defineProps } from 'vue';
import { useRouter } from 'vue-router';
const onClickLeft = () => history.back();
const router = useRouter();
// 在组件挂载之前获取参数
const props = defineProps(['status'])
......
src/page/publish/p1.vue deleted 100644 → 0
<template>
<div>
<!-- <van-nav-bar title="地图" /> -->
<div id="amap" style="height: 100vh;"></div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { NavBar } from 'vant';
import AMapLoader from '@amap/amap-jsapi-loader';
const center = ref([116.397428, 39.90923]); // 地图中心坐标
const zoom = ref(13); // 地图缩放级别
const apiKey = '69f3058fc3e75700391f94ba06904d67';
onMounted(async () => {
try {
const AMapAPI = await AMapLoader.load({
key: apiKey,
version: '2.0',
plugins: ['AMap.Geolocation', 'AMap.MarkerClusterer'],
});
console.log('AMap API:', AMapAPI);
const map = new AMap.Map('amap', {
center: center.value,
zoom: zoom.value,
});
map.plugin('AMap.Geolocation', function () {
const geolocation = new AMap.Geolocation({
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 0,
showMarker: true,
showCircle: true,
panToLocation: true,
});
map.addControl(geolocation);
});
const marker = new AMap.Marker({
position: center.value,
title: '这里是标记点',
});
marker.setMap(map);
} catch (error) {
console.error('Failed to load AMap:', error);
}
});
const mapEvents = {
click: (e) => {
console.log('地图被点击了', e.lnglat);
},
};
</script>
<style scoped>
/* 根据实际需求调整样式 */
</style>
\ No newline at end of file
src/router/index.js
......@@ -7,6 +7,26 @@ const routes = [
component:()=>import("@/page/index/index.vue")
},
{
path:"/index_service",
name:"index_service",
component:()=>import("@/page/index/service_people/index_service.vue")
},
{
path:"/institution",
name:"institution",
component:()=>import("@/page/index/institution_index.vue")
},
{
path:"/institutionDetail",
name:"institutionDetail",
component:()=>import("@/page/index/institution_detail.vue")
},
{
path:"/serviceDetail",
name:"serviceDetail",
component:()=>import("@/page/index/service_detail.vue")
},
{
path:"/found",
name:"found",
component:()=>import("@/page/found/found.vue")
......@@ -20,12 +40,22 @@ const routes = [
path:"/mine",
name:"mine",
component:()=>import("@/page/mine/mine.vue")
},
{
},
{
path:"/addressList",
name:"addressList",
component:()=>import("@/page/mine/addressList.vue")
},
{
path:"/addressAdit",
name:"addressAdit",
component:()=>import("@/page/mine/addressAdit.vue")
},
{
path:"/login",
name:"login",
component:()=>import("@/page/login.vue")
},
},
{
path:"/register",
name:"register",
......
vite.config.js
......@@ -10,7 +10,7 @@ console.log(pathResolve,"111")
export default defineConfig({
plugins: [vue()],
// server:{
// host: '192.168.43.92',
// host: '192.168.1.3',
// port: 8001
// },
resolve:{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment