Skip to content

G
graducationWeb_vant
Commit a9c25671 by liying
Options

2.8号提交

parent 6f098013
Showing with 350 additions and 0 deletions
src/assets/t1.png 0 → 100644
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/t2.png 0 → 100644
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/t3.png 0 → 100644
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/t4.png 0 → 100644
This image diff could not be displayed because it is too large. You can view the blob instead.
src/components/card1.vue 0 → 100644
<template>
<div class="custom-card">
<!-- 左侧图片 -->
<div class="card-image">
<img src="../assets/logo.png" alt="Image Alt Text" />
</div>
<!-- 右侧内容 -->
<div class="card-content">
<!-- 标题 -->
<div class="card-title">Card Title</div>
<!-- 详细信息 -->
<div class="card-description">Description text goes here.</div>
<!-- 价格 -->
<div class="card-price">Price: $19.99</div>
<!-- 立即预约按钮 -->
<div class="card-action">
<button class="reservation-button" @click="handleReservation">预约</button>
</div>
</div>
</div>
</template>
<style scoped>
/* .custom-card {
display: flex;
border: 1px solid #ebedf0;
border-radius: 8px;
overflow: hidden;
} */
.custom-card {
display: flex;
border: 1px solid #ebedf0;
border-radius: 8px;
overflow: hidden;
margin: 10px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card-image {
flex: 1;
max-width: 150px;
overflow: hidden;
}
.card-image img {
width: 100%;
height: auto;
}
.card-content {
flex: 2;
padding: 10px;
}
.card-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 8px;
}
.card-description {
font-size: 14px;
margin-bottom: 8px;
}
.card-price {
font-size: 16px;
font-weight: bold;
margin-bottom: 8px;
}
.card-action {
text-align: right;
}
.reservation-button {
background-color: #1989fa;
color: #fff;
padding: 4px 8px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
</style>
<script>
export default {
methods: {
handleReservation() {
// 处理立即预约按钮点击事件的逻辑
console.log("Reservation button clicked!");
}
}
};
</script>
\ No newline at end of file
src/components/order/myOrder.vue 0 → 100644
<template>
<div class="order-section">
<!-- 我的订单标题 -->
<div class="title-section">
<div class="order-title">我的订单</div>
<!-- <van-icon name="manager-o" class="all-orders-icon" @click="goToAllOrders" /> -->
<div class="all-orders-title" @click="goToAllOrders">全部订单 &gt;</div>
</div>
<!-- 订单状态列表 -->
<div class="status-icons">
<van-icon name="paid" @click="goToPendingPayment" class="status-icon" />
<van-icon name="logistics" @click="goToInProgress" class="status-icon" />
<van-icon name="question-o" @click="goToPendingReview" class="status-icon" />
<van-icon name="certificate" @click="goToCompleted" class="status-icon" />
</div>
<!-- 订单状态文字列表 -->
<div class="status-texts">
<div @click="goToPendingPayment" class="status-text">待付款</div>
<div @click="goToInProgress" class="status-text">进行中</div>
<div @click="goToPendingReview" class="status-text">待评价</div>
<div @click="goToCompleted" class="status-text">已完成</div>
</div>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const goToAllOrders = () => {
router.push("/orders")
// 处理跳转到全部订单页面
};
const goToPendingPayment = () => {
router.push({
path:"/orders",
query:{status:"b"}
})
// 处理跳转到待付款页面
};
const goToInProgress = () => {
router.push({
path:"/orders",
query:{status:"c"}
})
// 处理跳转到进行中页面
};
const goToPendingReview = () => {
router.push({
path:"/orders",
query:{status:"d"}
})
// 处理跳转到待评价页面
};
const goToCompleted = () => {
router.push({
path:"/orders",
query:{status:"f"}
})
// 处理跳转到已完成页面
};
</script>
<style scoped>
.order-section {
margin-top: 16px;
background-color: white;
}
.title-section {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 24px;
font-weight: bold;
padding: 10px 16px;
background-color: white;
border-radius: 12px;
/* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); */
}
.all-orders-icon {
font-size: 24px;
color: #007bff;
}
.all-orders {
margin-top: 8px;
border: none;
}
.all-orders-title {
font-size: 18px;
font-weight: bold;
color: #007bff;
}
.status-icons {
display: flex;
justify-content: space-around;
margin-top: 16px;
}
.status-icon {
font-size: 32px;
}
.status-texts {
display: flex;
justify-content: space-around;
margin-top: 8px;
margin-bottom: 13px; /* 调整下方边框的距离 */
}
.status-text {
font-size: 14px;
font-weight: bold;
color: #555;
cursor: pointer;
transition: color 0.3s;
}
.status-text:hover {
color: #4CAF50;
}
</style>
\ No newline at end of file
src/page/mine/orders.vue 0 → 100644
<template>
<!-- <nut-navbar title="Title" left-show @click-back="onClick"></nut-navbar> -->
<nut-navbar title="服务订单" left-show @click-back="onClick">
<template #left>
<!-- <div>Back</div> -->
</template>
</nut-navbar>
<van-tabs v-model:active="activeName">
<van-tab title="全部" name="a">内容 1</van-tab>
<van-tab title="待付款" name="b">内容 2</van-tab>
<van-tab title="进行中" name="c">内容 3</van-tab>
<van-tab title="待评价" name="d">内容 4</van-tab>
<van-tab title="已完成" name="f">内容 5</van-tab>
</van-tabs>
</template>
<script setup>
import { ref,onBeforeMount,defineProps } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
// 在组件挂载之前获取参数
const props = defineProps(['status'])
// onBeforeMount(async () => {
// console.log(props)
// k1 = props.status || '默认值';
// console.log(k1)
// });
const activeName = ref(props.status);
const onClick = () => {
router.push("/mine")
};
</script>
<style>
</style>
\ No newline at end of file
src/page/publish/p1.vue 0 → 100644
<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
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