outsource/appointment_system
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
5c2469137c
appointment_system/miniprogram/src/pages/me/my-appointments-page.vue

672 lines
25 KiB
Vue
Raw Blame History

<template>
<view class="content">
<!-- 顶部导航栏 -->
<view class="header">
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
<view class="header-content">
<view class="back-button" @click="goBack">
<image src="/static/ic_back.png" class="back-icon"></image>
</view>
<text class="header-title">{{ $t('myAppointment.title') || '我的预约单' }}</text>
<view class="header-placeholder"></view>
</view>
</view>
<!-- Tab 区域 -->
<view class="tab-container">
<view class="tab-item" :class="{ active: activeTab === 'all' }" @click="switchTab('all')">
<text class="tab-text" :class="{ active: activeTab === 'all' }">{{ $t('myAppointment.all') || '全部' }}</text>
</view>
<view class="tab-item" :class="{ active: activeTab === 'inProgress' }" @click="switchTab('inProgress')">
<text class="tab-text" :class="{ active: activeTab === 'inProgress' }">{{ $t('myAppointment.inProgress') || '进行中' }}</text>
</view>
<view class="tab-item" :class="{ active: activeTab === 'completed' }" @click="switchTab('completed')">
<text class="tab-text" :class="{ active: activeTab === 'completed' }">{{ $t('myAppointment.completed') || '已结束' }}</text>
</view>
</view>
<!-- 预约列表 -->
<scroll-view class="appointment-list" scroll-y @scrolltolower="loadMore" :show-scrollbar="false">
<view class="appointment-item" v-for="item in appointmentList" :key="item.id" @click="showDetail(item)">
<view class="item-title">{{ getServiceTitle(item) }}</view>
<view class="item-row">
<image src="/static/me_tiem.png" class="item-icon"></image>
<text class="item-text">{{ formatDate(item.createdAt) }}</text>
</view>
<view class="item-row">
<image src="/static/me_name.png" class="item-icon"></image>
<text class="item-text">{{ item.realName || '-' }}</text>
</view>
<view class="item-row">
<image src="/static/me_phone.png" class="item-icon"></image>
<text class="item-text">{{ getContactInfo(item) }}</text>
</view>
<view class="item-footer">
<text class="view-detail" @click.stop="showDetail(item)">{{ $t('myAppointment.viewDetail') || '查看详情' }}</text>
<text class="status-text" :class="getStatusClass(item.status)">{{ getStatusText(item.status) }}</text>
</view>
</view>
<view v-if="loading" class="loading-more">
<text class="loading-text">{{ $t('common.loading') }}</text>
</view>
<view v-if="!loading && !hasMore && appointmentList.length > 0" class="loading-more">
<text class="loading-text">{{ $t('common.noMore') || '没有更多了' }}</text>
</view>
<view v-if="appointmentList.length === 0 && !loading" class="empty-state">
<text class="empty-icon">📋</text>
<text class="no-data">{{ $t('myAppointment.noAppointment') || '暂无预约记录' }}</text>
</view>
</scroll-view>
<!-- 详情弹窗 -->
<view class="detail-mask" v-if="showDetailPopup" @click="closeDetail">
<view class="detail-popup" @click.stop>
<view class="popup-header">
<text class="popup-title">{{ $t('myAppointment.serviceDetail') || '服务详情' }}</text>
<view class="popup-close" @click="closeDetail">
<image src="/static/ic_colse.png" class="close-icon"></image>
</view>
</view>
<scroll-view class="popup-content" scroll-y>
<!-- 服务类型 -->
<view class="detail-item">
<text class="detail-label">服务类型</text>
<text class="detail-value">{{ getServiceTitle(currentDetail) }}</text>
</view>
<!-- 姓名 -->
<view class="detail-item">
<text class="detail-label">姓名</text>
<text class="detail-value">{{ currentDetail.realName || '-' }}</text>
</view>
<!-- 提交时间 -->
<view class="detail-item">
<text class="detail-label">提交时间</text>
<text class="detail-value">{{ formatDate(currentDetail.createdAt) }}</text>
</view>
<!-- 联系方式 -->
<view class="detail-item">
<text class="detail-label">联系方式</text>
<text class="detail-value">{{ getAllContactInfo(currentDetail) }}</text>
</view>
<!-- 预约日期（通用字段） -->
<view class="detail-item" v-if="currentDetail.appointmentDate">
<text class="detail-label">预约日期</text>
<text class="detail-value">{{ currentDetail.appointmentDate }}</text>
</view>
<!-- 机票相关字段 -->
<view class="detail-item" v-if="currentDetail.tripType">
<text class="detail-label">行程类型</text>
<text class="detail-value">{{ currentDetail.tripType === 'single' ? '单程' : '往返' }}</text>
</view>
<view class="detail-item" v-if="currentDetail.departureCity">
<text class="detail-label">出发城市</text>
<text class="detail-value">{{ currentDetail.departureCity }}</text>
</view>
<view class="detail-item" v-if="currentDetail.arrivalCity">
<text class="detail-label">到达城市</text>
<text class="detail-value">{{ currentDetail.arrivalCity }}</text>
</view>
<view class="detail-item" v-if="currentDetail.departureDate">
<text class="detail-label">出发日期</text>
<text class="detail-value">{{ currentDetail.departureDate }}</text>
</view>
<view class="detail-item" v-if="currentDetail.returnDate">
<text class="detail-label">返程日期</text>
<text class="detail-value">{{ currentDetail.returnDate }}</text>
</view>
<view class="detail-item" v-if="currentDetail.cabinType">
<text class="detail-label">舱位类型</text>
<text class="detail-value">{{ getCabinTypeText(currentDetail.cabinType) }}</text>
</view>
<view class="detail-item" v-if="currentDetail.luggageCount">
<text class="detail-label">行李件数</text>
<text class="detail-value">{{ currentDetail.luggageCount }}件</text>
</view>
<!-- 酒店相关字段 -->
<view class="detail-item" v-if="currentDetail.countryCity">
<text class="detail-label">国家/城市</text>
<text class="detail-value">{{ currentDetail.countryCity }}</text>
</view>
<view class="detail-item" v-if="currentDetail.hotelName">
<text class="detail-label">酒店名称</text>
<text class="detail-value">{{ currentDetail.hotelName }}</text>
</view>
<view class="detail-item" v-if="currentDetail.checkInDate">
<text class="detail-label">入住日期</text>
<text class="detail-value">{{ currentDetail.checkInDate }}</text>
</view>
<view class="detail-item" v-if="currentDetail.checkOutDate">
<text class="detail-label">退房日期</text>
<text class="detail-value">{{ currentDetail.checkOutDate }}</text>
</view>
<view class="detail-item" v-if="currentDetail.roomCount">
<text class="detail-label">房间数量</text>
<text class="detail-value">{{ currentDetail.roomCount }}间</text>
</view>
<view class="detail-item" v-if="currentDetail.roomType">
<text class="detail-label">房间类型</text>
<text class="detail-value">{{ currentDetail.roomType }}</text>
</view>
<view class="detail-item" v-if="currentDetail.needMeal !== null && currentDetail.needMeal !== undefined">
<text class="detail-label">是否需要餐食</text>
<text class="detail-value">{{ currentDetail.needMeal ? '是' : '否' }}</text>
</view>
<view class="detail-item" v-if="currentDetail.mealPlan">
<text class="detail-label">餐食计划</text>
<text class="detail-value">{{ getMealPlanText(currentDetail.mealPlan) }}</text>
</view>
<!-- 人数相关 -->
<view class="detail-item" v-if="currentDetail.adultCount">
<text class="detail-label">成人人数</text>
<text class="detail-value">{{ currentDetail.adultCount }}人</text>
</view>
<view class="detail-item" v-if="currentDetail.childCount">
<text class="detail-label">儿童人数</text>
<text class="detail-value">{{ currentDetail.childCount }}人</text>
</view>
<view class="detail-item" v-if="currentDetail.infantCount">
<text class="detail-label">婴儿人数</text>
<text class="detail-value">{{ currentDetail.infantCount }}人</text>
</view>
<view class="detail-item" v-if="currentDetail.passengerCount">
<text class="detail-label">乘客数量</text>
<text class="detail-value">{{ currentDetail.passengerCount }}人</text>
</view>
<!-- 机场/航班相关 -->
<view class="detail-item" v-if="currentDetail.airportTerminal">
<text class="detail-label">机场/航站楼</text>
<text class="detail-value">{{ currentDetail.airportTerminal }}</text>
</view>
<view class="detail-item" v-if="currentDetail.arrivalFlightNo">
<text class="detail-label">到达航班号</text>
<text class="detail-value">{{ currentDetail.arrivalFlightNo }}</text>
</view>
<view class="detail-item" v-if="currentDetail.departureFlightNo">
<text class="detail-label">出发航班号</text>
<text class="detail-value">{{ currentDetail.departureFlightNo }}</text>
</view>
<view class="detail-item" v-if="currentDetail.flightNo">
<text class="detail-label">航班号</text>
<text class="detail-value">{{ currentDetail.flightNo }}</text>
</view>
<view class="detail-item" v-if="currentDetail.deliveryAddress">
<text class="detail-label">送达地址</text>
<text class="detail-value">{{ currentDetail.deliveryAddress }}</text>
</view>
<!-- 高铁相关 -->
<view class="detail-item" v-if="currentDetail.originStation">
<text class="detail-label">出发站</text>
<text class="detail-value">{{ currentDetail.originStation }}</text>
</view>
<view class="detail-item" v-if="currentDetail.destinationStation">
<text class="detail-label">到达站</text>
<text class="detail-value">{{ currentDetail.destinationStation }}</text>
</view>
<view class="detail-item" v-if="currentDetail.seatClass">
<text class="detail-label">座位等级</text>
<text class="detail-value">{{ getSeatClassText(currentDetail.seatClass) }}</text>
</view>
<!-- 儿童相关 -->
<view class="detail-item" v-if="currentDetail.itinerary">
<text class="detail-label">行程</text>
<text class="detail-value">{{ currentDetail.itinerary }}</text>
</view>
<view class="detail-item" v-if="currentDetail.childAge">
<text class="detail-label">儿童年龄</text>
<text class="detail-value">{{ currentDetail.childAge }}岁</text>
</view>
<view class="detail-item" v-if="currentDetail.boyCount">
<text class="detail-label">男孩数量</text>
<text class="detail-value">{{ currentDetail.boyCount }}人</text>
</view>
<view class="detail-item" v-if="currentDetail.girlCount">
<text class="detail-label">女孩数量</text>
<text class="detail-value">{{ currentDetail.girlCount }}人</text>
</view>
<!-- 医疗相关 -->
<view class="detail-item" v-if="currentDetail.hospitalName">
<text class="detail-label">医院名称</text>
<text class="detail-value">{{ currentDetail.hospitalName }}</text>
</view>
<view class="detail-item" v-if="currentDetail.conditionDescription">
<text class="detail-label">病情描述</text>
<text class="detail-value">{{ currentDetail.conditionDescription }}</text>
</view>
<view class="detail-item" v-if="currentDetail.specialAssistanceReason">
<text class="detail-label">特殊协助原因</text>
<text class="detail-value">{{ currentDetail.specialAssistanceReason }}</text>
</view>
<!-- 宠物相关 -->
<view class="detail-item" v-if="currentDetail.origin">
<text class="detail-label">出发地</text>
<text class="detail-value">{{ currentDetail.origin }}</text>
</view>
<view class="detail-item" v-if="currentDetail.destination">
<text class="detail-label">目的地</text>
<text class="detail-value">{{ currentDetail.destination }}</text>
</view>
<view class="detail-item" v-if="currentDetail.petType">
<text class="detail-label">宠物类型</text>
<text class="detail-value">{{ currentDetail.petType }}</text>
</view>
<view class="detail-item" v-if="currentDetail.petName">
<text class="detail-label">宠物名称</text>
<text class="detail-value">{{ currentDetail.petName }}</text>
</view>
<view class="detail-item" v-if="currentDetail.hasQuarantineCert !== null && currentDetail.hasQuarantineCert !== undefined">
<text class="detail-label">检疫证明</text>
<text class="detail-value">{{ currentDetail.hasQuarantineCert ? '有' : '无' }}</text>
</view>
<!-- 导游/翻译相关 -->
<view class="detail-item" v-if="currentDetail.serviceDays">
<text class="detail-label">服务天数</text>
<text class="detail-value">{{ currentDetail.serviceDays }}天</text>
</view>
<!-- 物流相关 -->
<view class="detail-item" v-if="currentDetail.originPort">
<text class="detail-label">起运港</text>
<text class="detail-value">{{ currentDetail.originPort }}</text>
</view>
<view class="detail-item" v-if="currentDetail.destinationPort">
<text class="detail-label">目的港</text>
<text class="detail-value">{{ currentDetail.destinationPort }}</text>
</view>
<view class="detail-item" v-if="currentDetail.itemName">
<text class="detail-label">物品名称</text>
<text class="detail-value">{{ currentDetail.itemName }}</text>
</view>
<view class="detail-item" v-if="currentDetail.itemQuantity">
<text class="detail-label">物品数量</text>
<text class="detail-value">{{ currentDetail.itemQuantity }}</text>
</view>
<view class="detail-item" v-if="currentDetail.cargoName">
<text class="detail-label">货物名称</text>
<text class="detail-value">{{ currentDetail.cargoName }}</text>
</view>
<view class="detail-item" v-if="currentDetail.cargoQuantity">
<text class="detail-label">货物数量</text>
<text class="detail-value">{{ currentDetail.cargoQuantity }}</text>
</view>
<!-- 旅游相关 -->
<view class="detail-item" v-if="currentDetail.travelDestination">
<text class="detail-label">旅游目的地</text>
<text class="detail-value">{{ currentDetail.travelDestination }}</text>
</view>
<view class="detail-item" v-if="currentDetail.travelDate">
<text class="detail-label">出行日期</text>
<text class="detail-value">{{ currentDetail.travelDate }}</text>
</view>
<view class="detail-item" v-if="currentDetail.travelDays">
<text class="detail-label">旅游天数</text>
<text class="detail-value">{{ currentDetail.travelDays }}天</text>
</view>
<!-- 咨询相关 -->
<view class="detail-item" v-if="currentDetail.specificRequirements">
<text class="detail-label">具体需求</text>
<text class="detail-value">{{ currentDetail.specificRequirements }}</text>
</view>
<!-- 备注 -->
<view class="detail-item" v-if="currentDetail.notes">
<text class="detail-label">备注</text>
<text class="detail-value">{{ currentDetail.notes }}</text>
</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
import { AppServer } from '@/modules/api/AppServer.js'
export default {
data() {
return {
statusBarHeight: 0,
activeTab: 'all',
loading: false,
appointmentList: [],
pagination: { page: 1, limit: 10, total: 0 },
hasMore: true,
showDetailPopup: false,
currentDetail: {}
}
},
onLoad(options) {
const systemInfo = uni.getSystemInfoSync()
this.statusBarHeight = systemInfo.statusBarHeight || 0
if (options.tab) this.activeTab = options.tab
this.fetchAppointments()
},
methods: {
goBack() {
uni.navigateBack({ delta: 1 })
},
switchTab(tab) {
if (this.activeTab === tab) return
this.activeTab = tab
this.pagination.page = 1
this.appointmentList = []
this.hasMore = true
this.fetchAppointments()
},
async fetchAppointments() {
if (this.loading) return
this.loading = true
try {
const appserver = new AppServer()
const params = { page: this.pagination.page, limit: this.pagination.limit }
if (this.activeTab === 'inProgress') params.status = 'in-progress'
else if (this.activeTab === 'completed') params.status = 'completed'
const res = await appserver.GetAppointments(params)
if (res.success || res.code === 0) {
const newList = res.data || []
if (this.pagination.page === 1) this.appointmentList = newList
else this.appointmentList = [...this.appointmentList, ...newList]
this.pagination.total = res.pagination?.total || 0
this.hasMore = newList.length >= this.pagination.limit
}
} catch (e) {
console.error('获取预约列表失败:', e)
} finally {
this.loading = false
}
},
loadMore() {
if (!this.hasMore || this.loading) return
this.pagination.page++
this.fetchAppointments()
},
showDetail(item) {
this.currentDetail = item
this.showDetailPopup = true
},
closeDetail() {
this.showDetailPopup = false
},
getServiceTitle(item) {
if (!item) return '-'
const locale = this.$i18n.locale
if (item.service) {
if (locale === 'zh') return item.service.titleZh || item.service.titleEn || '-'
else if (locale === 'es') return item.service.titleEs || item.service.titleEn || '-'
else return item.service.titleEn || item.service.titleZh || '-'
}
if (item.hotService) {
if (locale === 'zh') return item.hotService.name_zh || item.hotService.name_en || '-'
else if (locale === 'es') return item.hotService.name_es || item.hotService.name_en || '-'
else return item.hotService.name_en || item.hotService.name_zh || '-'
}
return this.getServiceTypeText(item.serviceType) || '-'
},
getServiceTypeText(type) {
const typeMap = {
'travel': '全球机票代理',
'flight': '全球机票代理',
'hotel': '全球酒店预定',
'vip_lounge': '全球机场贵宾室服务',
'lounge': '全球机场贵宾室服务',
'airport_transfer': '机场接/送机服务',
'unaccompanied_minor': '无成人陪伴儿童代办',
'rail_ticket': '高铁票代订',
'train': '高铁票代订',
'medical_consultation': '远程医疗问诊代理服务',
'telemedicine': '远程医疗问诊代理服务',
'special_needs': '特殊旅客定制服务代办',
'special_passenger': '特殊旅客定制服务代办',
'pet_transportation': '宠物托运代理',
'pet_transport': '宠物托运代理',
'guide_translation': '西班牙语专业导游/翻译服务',
'visa_consultation': '签证咨询',
'visa': '签证咨询',
'exhibition_service': '墨西哥展会咨询与协办服务',
'exhibition': '墨西哥展会咨询与协办服务',
'air_logistics': '跨境航空物流/快递一站式服务',
'sea_freight': '海运/清关一站式服务',
'travel_planning': '旅游线路规划/咨询',
'insurance_consultation': '跨境出行意外保险/国际财产保险咨询',
'insurance': '跨境出行意外保险/国际财产保险咨询'
}
return typeMap[type] || type
},
getContactInfo(item) {
if (!item) return '-'
return item.phone || item.wechatId || item.whatsapp || item.contactValue || '-'
},
getAllContactInfo(item) {
if (!item) return '-'
const contacts = []
if (item.phone) contacts.push((item.phoneCountryCode || '') + ' ' + item.phone)
if (item.wechatId) contacts.push('微信: ' + item.wechatId)
if (item.whatsapp) contacts.push('WhatsApp: ' + item.whatsapp)
return contacts.length > 0 ? contacts.join('\n') : '-'
},
formatDate(dateStr) {
if (!dateStr) return '-'
const date = new Date(dateStr)
return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
},
getStatusText(status) {
const statusMap = {
'pending': this.$t('myAppointment.statusPending') || '待处理',
'confirmed': this.$t('myAppointment.statusConfirmed') || '已确认',
'in-progress': this.$t('myAppointment.statusInProgress') || '进行中',
'completed': this.$t('myAppointment.statusCompleted') || '已结束',
'cancelled': this.$t('myAppointment.statusCancelled') || '已取消'
}
return statusMap[status] || status
},
getStatusClass(status) {
return {
'status-in-progress': status === 'in-progress' || status === 'pending' || status === 'confirmed',
'status-completed': status === 'completed',
'status-cancelled': status === 'cancelled'
}
},
getCabinTypeText(type) {
const map = { 'economy': '经济舱', 'premium_economy': '超级经济舱', 'business': '商务舱' }
return map[type] || type
},
getMealPlanText(plan) {
const map = { 'breakfast': '早餐', 'three_meals': '三餐', 'all_inclusive': '全包' }
return map[plan] || plan
},
getSeatClassText(seatClass) {
const map = { 'first': '一等座', 'second': '二等座', 'third': '三等座' }
return map[seatClass] || seatClass
}
}
}
</script>
<style lang="scss">
.content {
height: 100vh;
display: flex;
flex-direction: column;
background-color: #F5F7FA;
}
.header {
background-color: #fff;
.status-bar { width: 100%; background-color: #fff; }
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 32rpx;
}
.back-button { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; }
.back-icon { width: 40rpx; height: 40rpx; }
.header-title { font-size: 34rpx; font-weight: 600; color: #333; flex: 1; text-align: center; }
.header-placeholder { width: 60rpx; }
}
.tab-container {
display: flex;
flex-direction: row;
padding: 24rpx 32rpx;
background-color: #fff;
}
.tab-item {
padding: 14rpx 36rpx;
margin-right: 24rpx;
border-radius: 36rpx;
border: 2rpx solid #E0E0E0;
background-color: #fff;
&.active { background-color: #E5FBFF; border-color: #00A0BC; }
}
.tab-text {
font-size: 28rpx;
color: #666;
&.active { color: #00A0BC; font-weight: 500; }
}
.appointment-list {
flex: 1;
height: 0;
width: 686rpx;
margin: 24rpx auto 24rpx;
}
.appointment-item {
background-color: #fff;
border-radius: 24rpx;
padding: 32rpx;
margin-bottom: 24rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}
.item-title { font-size: 32rpx; font-weight: 600; color: #333; margin-bottom: 24rpx; }
.item-row { display: flex; align-items: center; margin-bottom: 16rpx; }
.item-icon { width: 36rpx; height: 36rpx; margin-right: 20rpx; }
.item-text { font-size: 28rpx; color: #666; }
.item-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 24rpx;
padding-top: 24rpx;
border-top: 1rpx solid #F0F0F0;
}
.view-detail { font-size: 28rpx; color: #00A0BC; }
.status-text { font-size: 28rpx; font-weight: 500; }
.status-in-progress { color: #00A0BC; }
.status-completed { color: #FF6B6B; }
.status-cancelled { color: #999; }
.loading-more { padding: 40rpx; display: flex; justify-content: center; }
.loading-text { font-size: 26rpx; color: #999; }
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 200rpx;
}
.empty-icon { font-size: 120rpx; opacity: 0.3; margin-bottom: 30rpx; }
.no-data { font-size: 28rpx; color: #999; }
// 详情弹窗 - 居中显示
.detail-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
}
.detail-popup {
width: 85%;
max-height: 70vh;
background-color: #fff;
border-radius: 24rpx;
overflow: hidden;
}
.popup-header {
display: flex;
align-items: center;
justify-content: center;
padding: 36rpx 32rpx;
border-bottom: 1rpx solid #F0F0F0;
background-color: #fff;
position: relative;
}
.popup-title { font-size: 34rpx; font-weight: 600; color: #333; }
.popup-close {
position: absolute;
right: 32rpx;
width: 48rpx;
height: 48rpx;
display: flex;
align-items: center;
justify-content: center;
}
.close-icon { width: 36rpx; height: 36rpx; }
.popup-content {
max-height: 60vh;
padding: 0 40rpx 40rpx;
}
.detail-item {
padding: 28rpx 0;
border-bottom: 1rpx solid #F5F5F5;
&:last-child { border-bottom: none; }
}
.detail-label {
font-size: 30rpx;
font-weight: 600;
color: #333;
display: block;
margin-bottom: 12rpx;
}
.detail-value {
font-size: 28rpx;
color: #666;
display: block;
line-height: 1.6;
word-break: break-all;
white-space: pre-wrap;
}
</style>
Reference in New Issue View Git Blame Copy Permalink