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 90e7dee commit 6ea3ab4
Show file tree
Hide file tree
Showing 3 changed files with 164 additions and 90 deletions.
22 changes: 22 additions & 0 deletions miniprogram/pages/user-center/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,28 @@ Page({
data: {
openId: '',
showUploadTip: false,
itinerary: [
// 这里可以是从服务器获取的行程列表数据
// 示例数据结构：
{
destination: '深圳',
start_date: '2023-12-01'
},
// ...
]
},

onLoad: function() {
// 这里可以加载行程列表数据
// 例如，从服务器请求数据或从本地JSON文件读取
},
goToDetail: function(e) {
// 点击行程列表项跳转到详细行程页面
const _id = e.currentTarget.dataset.id;

wx.navigateTo({
url: `/pages/itinerary/index?_id=${_id}`
});
},

getOpenId() {
Expand Down
77 changes: 45 additions & 32 deletions miniprogram/pages/user-center/index.wxml
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,62 @@
<!-- pages/me/index.wxml -->
<view class="page_container">
<view class="top_bg" />
<view class="main_content">
<view class="userinfo_container">
<image class="avatar" src="../../images/icons/avatar.png" bind:tap="getOpenId" mode="widthFix" />
<block wx:if="{{ !openId }}">
<view class="username" bind:tap="getOpenId">请点击登录</view>
</block>
<block wx:else>
<view class="username">openId: {{ openId }}</view>
</block>
</view>
<view class="settings_container">
<!-- <view class="setting_item">
<view class="top_bg" />
<view class="main_content">
<view class="userinfo_container">
<image class="avatar" src="../../images/icons/avatar.png" bind:tap="getOpenId" mode="widthFix" />
<block wx:if="{{ !openId }}">
<view class="username" bind:tap="getOpenId">请点击登录</view>
</block>
<block wx:else>
<view class="username">openId: {{ openId }}</view>
</block>
</view>
<view class="settings_container">
<view class="travel-itinerary-list">
<view class="travel-header">
<text class="travel-title">行程列表</text>
</view>
<view class="travel-list-container">
<block wx:for="{{itinerary}}" wx:key="destination">
<view class="travel-itinerary-item" bindtap="goToDetail" data-id="itinerary._id">
<text class="travel-destination">{{item.destination}}</text>
<text class="travel-start-date">{{item.start_date}}</text>
</view>
</block>
</view>
</view>
<!-- <view class="setting_item">
<view class="left">
<image class="setting_icon" src="../../images/icons/setting.svg" />
<view class="setting_text">个人信息设置</view>
</view>
<image class="arrow_icon" src="../../images/arrow.svg" />
</view> -->
<!-- <view class="setting_item">
<!-- <view class="setting_item">
<view class="left">
<image class="setting_icon" src="../../images/icons/question.svg" />
<view class="setting_text">常见问题</view>
</view>
<image class="arrow_icon" src="../../images/arrow.svg" />
</view> -->
<view class="setting_item">
<view class="left">
<image class="setting_icon" src="../../images/icons/customer-service.svg" />
<!-- <view class="setting_text">联系客服</view> -->
<button open-type="contact" class="contact-button">
联系客服
</button>
<view class="setting_item">
<view class="left">
<image class="setting_icon" src="../../images/icons/customer-service.svg" />
<!-- <view class="setting_text">联系客服</view> -->
<button open-type="contact" class="contact-button">
联系客服
</button>
</view>
<image class="arrow_icon" src="../../images/arrow.svg" />
</view>
<view class="setting_item" bind:tap="gotoWxCodePage">
<view class="left">
<image class="setting_icon" src="../../images/icons/share.svg" />
<view class="setting_text">分享小程序</view>
</view>
<image class="arrow_icon" src="../../images/arrow.svg" />
</view>
</view>
<image class="arrow_icon" src="../../images/arrow.svg" />
</view>
<view class="setting_item" bind:tap="gotoWxCodePage">
<view class="left">
<image class="setting_icon" src="../../images/icons/share.svg" />
<view class="setting_text">分享小程序</view>
</view>
<image class="arrow_icon" src="../../images/arrow.svg" />
</view>
</view>
</view>
<cloud-tip-modal showUploadTipProps="{{showUploadTip}}" />
<cloud-tip-modal showUploadTipProps="{{showUploadTip}}" />
</view>
155 changes: 97 additions & 58 deletions miniprogram/pages/user-center/index.wxss
View file
Original file line number Diff line number Diff line change
@@ -1,99 +1,138 @@
.page_container {
background-color: #f5f5f5;
height: 100vh;
font-family: PingFang SC;
background-color: #f5f5f5;
height: 100vh;
font-family: PingFang SC;
}

.top_bg {
height: 120rpx;
height: 120rpx;
}

.main_content {
background-color: #fff;
border-top-left-radius: 30rpx;
border-top-right-radius: 30rpx;
height: calc(100vh - 120rpx);
position: relative;
background-color: #fff;
border-top-left-radius: 30rpx;
border-top-right-radius: 30rpx;
height: calc(100vh - 120rpx);
position: relative;
}

.userinfo_container {
display: flex;
gap: 80rpx;
align-items: center;
gap: 20rpx;
position: absolute;
top: -30rpx;
padding: 0rpx 60rpx;
display: flex;
gap: 80rpx;
align-items: center;
gap: 20rpx;
position: absolute;
top: -30rpx;
padding: 0rpx 60rpx;
}

.avatar {
width: 128rpx;
height: 128rpx;
/* background-color: #e5e5e5; */
border-radius: 50%;
transform: scale(1.8);
width: 128rpx;
height: 128rpx;
/* background-color: #e5e5e5; */
border-radius: 50%;
transform: scale(1.8);
}

.username {
color: #333;
font-size: 32rpx;
margin-top: 20rpx;
color: rgba(0, 0, 0, 0.9);
max-width: 200rpx;
color: #333;
font-size: 32rpx;
margin-top: 20rpx;
color: rgba(0, 0, 0, 0.9);
max-width: 200rpx;
}

.settings_container {
position: relative;
top: 150rpx;
padding: 0 40rpx;
display: flex;
flex-direction: column;
gap: 10rpx;
position: relative;
top: 150rpx;
padding: 0 40rpx;
display: flex;
flex-direction: column;
gap: 10rpx;
}

.setting_item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx 0rpx;
border-bottom: 1rpx solid rgba(0, 0, 0, 0.08);
font-size: 28rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx 0rpx;
border-bottom: 1rpx solid rgba(0, 0, 0, 0.08);
font-size: 28rpx;
}

.left {
display: flex;
align-items: center;
gap: 20rpx;
display: flex;
align-items: center;
gap: 20rpx;
}

.contact-button {
padding-top: 10rpx;
padding-bottom: 10rpx;
box-sizing: border-box;
padding-left: 0rpx;
margin: 0;
width: 400rpx;
font-weight: 400;
font-size: 28rpx;
color: rgba(0, 0, 0, 0.9);
line-height: 56rpx;
text-align: left;
padding-top: 10rpx;
padding-bottom: 10rpx;
box-sizing: border-box;
padding-left: 0rpx;
margin: 0;
width: 400rpx;
font-weight: 400;
font-size: 28rpx;
color: rgba(0, 0, 0, 0.9);
line-height: 56rpx;
text-align: left;
}

.button-hover {
background-color: #fff;
background-color: #fff;
}

.setting_icon {
width: 40rpx;
height: 40rpx;
width: 40rpx;
height: 40rpx;
}

.setting_text {
color: rgba(0, 0, 0, 0.9);
color: rgba(0, 0, 0, 0.9);
}

.arrow_icon {
width: 30rpx;
height: 30rpx;
width: 30rpx;
height: 30rpx;
}


.travel-itinerary-list {
color: #333;
font-family: 'Arial', sans-serif;
}

.travel-header {
text-align: left;
margin-bottom: 20px;
}

.travel-title {
/* font-size: 28px; */
}

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

.travel-itinerary-item {
padding: 10px;
margin-bottom: 10px;
/* border-bottom: 1px solid #eee; */
}

.travel-destination {
font-weight: bold;
width: 100px;
display: inline-block;
color: #333;
}

.travel-start-date {
font-size: 16px;
color: #666;
}

0 comments on commit 6ea3ab4

Please sign in to comment.