Skip to content

Commit

Permalink
feat: 增加行程页面
Browse files Browse the repository at this point in the history
  • Loading branch information
@binggg
binggg committed Jul 6, 2024
1 parent ecb98ca commit 90e7dee
Show file tree
Hide file tree
Showing 4 changed files with 265 additions and 0 deletions.
158 changes: 158 additions & 0 deletions miniprogram/pages/itinerary/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
Page({
data: {
"destination": "深圳",
"start_date": "2023-12-01",

"days": [
{
"day": 1,
"activities": [
{
"location": "深圳市区",
"time": "上午9:00",
"description": "游览深圳市区，体验深圳的都市风情。",
"name": "深圳市区游"
},
{
"location": "深圳市民中心",
"time": "上午11:00",
"description": "参观深圳市民中心，了解深圳的现代化建设。",
"name": "深圳市民中心参观"
},
{
"location": "华强北",
"time": "下午2:00",
"description": "逛华强北，感受深圳的电子科技氛围。",
"name": "华强北逛街"
}
]
},
{
"day": 2,
"activities": [
{
"location": "深圳世界之窗",
"time": "上午9:00",
"description": "游览世界之窗，欣赏全球著名景点的微缩景观。",
"name": "世界之窗游览"
},
{
"location": "深圳欢乐谷",
"time": "下午1:00",
"description": "游玩欢乐谷，体验刺激的游乐设施。",
"name": "欢乐谷游玩"
}
]
},
{
"day": 3,
"activities": [
{
"location": "深圳东部华侨城",
"time": "上午9:00",
"description": "游览东部华侨城，体验大侠谷和茶溪谷的风光。",
"name": "东部华侨城游览"
},
{
"location": "深圳大梅沙海滨公园",
"time": "下午2:00",
"description": "前往大梅沙海滨公园，享受海滨风光。",
"name": "大梅沙海滨公园游玩"
}
]
},
{
"day": 4,
"activities": [
{
"location": "深圳莲花山公园",
"time": "上午9:00",
"description": "攀登莲花山公园，俯瞰深圳市区美景。",
"name": "莲花山公园攀登"
},
{
"location": "深圳博物馆",
"time": "上午11:00",
"description": "参观深圳博物馆，了解深圳的历史文化。",
"name": "深圳博物馆参观"
},
{
"location": "海岸城",
"time": "下午2:00",
"description": "逛海岸城，享受购物乐趣。",
"name": "海岸城逛街"
}
]
},
{
"day": 5,
"activities": [
{
"location": "深圳湾公园",
"time": "上午9:00",
"description": "游览深圳湾公园，欣赏深圳湾的美景。",
"name": "深圳湾公园游览"
},
{
"location": "深圳科技园",
"time": "下午1:00",
"description": "参观深圳科技园，了解深圳的科技创新。",
"name": "深圳科技园参观"
}
]
},
{
"day": 6,
"activities": [
{
"location": "深圳西丽大学城",
"time": "上午9:00",
"description": "游览西丽大学城，感受学术氛围。",
"name": "西丽大学城游览"
},
{
"location": "深圳锦绣中华民俗村",
"time": "下午1:00",
"description": "游玩锦绣中华民俗村，体验中国传统文化。",
"name": "锦绣中华民俗村游玩"
}
]
},
{
"day": 7,
"activities": [
{
"location": "深圳中心公园",
"time": "上午9:00",
"description": "游览中心公园，享受城市绿地。",
"name": "中心公园游览"
},
{
"location": "深圳音乐厅",
"time": "晚上7:30",
"description": "聆听深圳音乐厅的音乐会，享受艺术盛宴。",
"name": "深圳音乐厅音乐会"
}
]
}
]
}
,
getActivityIcon: function (activityName) {
// 这里可以根据活动名称返回相应的图标路径
// 例如：'city', 'museum', 'park', 'beach' 等
const icons = {
'深圳市区游': '/images/city.png',
'深圳市民中心参观': '/images/museum.png',
'华强北逛街': '/images/electronics.png',
// ... 其他活动的图标路径
};
return icons[activityName] || '/images/default.png';
},
onLoad: function () {
// 这里可以将JSON数据转换为数组格式，并绑定到data上
this.setData({
days: JSON.parse(JSON.stringify(/* 你的JSON数据 */))
});
}
});
3 changes: 3 additions & 0 deletions miniprogram/pages/itinerary/index.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"usingComponents": {}
}
26 changes: 26 additions & 0 deletions miniprogram/pages/itinerary/index.wxml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<view class="travel-container">
<view class="travel-header">
<text class="travel-title">{{destination}}之旅</text>
<text class="travel-subtitle">{{start_date}}</text>
</view>
<view class="travel-itinerary">
<block wx:for="{{days}}" wx:key="day">
<view class="travel-day">
<text class="travel-day-title">Day{{item.day}}</text>
<view class="travel-activities">
<block wx:for="{{item.activities}}" wx:key="name">
<view class="travel-activity">
<!-- <image class="travel-activity-icon" src="{{getActivityIcon(item.name)}}" mode="aspectFit" /> -->
<view>
<text class="travel-activity-time">{{item.time}}</text>
<text class="travel-activity-name">{{item.name}}</text>
</view>
<view>
<text class="travel-activity-description">{{item.description}}</text></view>
</view>
</block>
</view>
</view>
</block>
</view>
</view>
78 changes: 78 additions & 0 deletions miniprogram/pages/itinerary/index.wxss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
/* pages/itinerary/index.wxss */.travel-container {
padding: 20px;
background-color: #f4f4f4;
color: #333;
font-family: 'Arial', sans-serif;
}

.travel-header {
text-align: center;
margin-bottom: 20px;
display: flex;
flex-direction: column;
}

.travel-title {
font-size: 28px;
color: #333;
}

.travel-subtitle {
font-size: 18px;
color: #666;
}

.travel-itinerary {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
}

.travel-day {
margin-bottom: 20px;
}

.travel-day-title {
font-size: 44px;
margin-bottom: 10px;
color: #333;
}

.travel-activities {
display: flex;
flex-direction: column;
}

.travel-activity {
display: flex;
align-items: start;
flex-direction: column;
margin-bottom: 30px;
}

.travel-activity-icon {
width: 40px;
height: 40px;
margin-right: 15px;
border-radius: 20px;
}

.travel-activity-name {
font-size: 18px;
font-weight: bold;
margin-left: 30px;
color: #333;
}

.travel-activity-time {
font-size: 14px;
width: 100px;
display: inline-block;
color: #666;
}

.travel-activity-description {
font-size: 14px;
color: #666;
}

0 comments on commit 90e7dee

Please sign in to comment.