dev/dcp-app-gate/pages/workbench/guestTravel.vue

<template>
	<view>
		<uni-nav-bar status-bar=true fixed=true left-icon="arrowleft" background-color="#1d5edb" color="#ffffff"
		@clickLeft="navigateBack">
			<text slot="default" style="text-align: center; flex: 1; font-size: 18px; font-weight: bold;">嘉宾实时行程</text>
		</uni-nav-bar>
		<view class="guest-container" v-if="guestTravelPoints.length">
		  <view class="guest-info-header">
			<view>
				<image :src="guestTravelPoints[0].photoUrl? websiteUrl+guestTravelPoints[0].photo:'../../static/missing-face.png'" mode=""></image>
				<text class="guest-name">{{guestTravelPoints[0].applyWay=='en'?guestTravelPoints[0].nameEn:guestTravelPoints[0].name}}</text>
			</view>
			<view class="legend-list">
				<view><text class="legend legend-success"></text> 已完成</view>
				<view><text class="legend legend-error"></text> 未完成</view>
				<view><text class="legend legend-warning"></text> 待确认</view>
			</view>
		  </view>
		  <view class="guest-point-list">
			<view class="guest-point-list-item" v-for="(item, i) in guestTravelPoints" :key="i">
				<text class="status legend" :class="item.travelPointStatus=='0'? 'legend-success': item.travelPointStatus=='1'? 'legend-error': 'legend-warning'"></text>
				<view class="guest-right">
					<text class="points">{{item.travelPointName}}</text>
					<text class="time">{{moment(item.confirmDate).format('YYYY-MM-DD hh:mm:ss')}}</text>
				</view>
			</view>
		  </view>
		</view>
		<view class="no-data" v-else>
			暂无数据
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				guestBasicData: {},
				guestTravelPoints: []
			}
		},
		onLoad(option) {
			let that = this;
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('acceptDataFromOpenerPage', function(data) {
				that.guestBasicData = data.data;
				that.getGuestTravel(data.data.id)
			})
		},
		methods: {
			navigateBack(){
				uni.navigateBack();
			},
			getGuestTravel(id){
				this.$myRequest({
					url: '/meeting/meetingApplys/getGuestTravelPointInfoByGuestId',
					data: {
						travelPointStatus: '',
						guestId: id
					}
				}).then(res => {
					console.log('guestTravelPointInfos',res.data)
					this.guestTravelPoints = res.data.guestTravelPointInfos
				});
			}
		}
	}
</script>

<style scoped>
.guest-container{
  background: #fff;
}
.guest-info-header{
  display: flex;
  justify-content: space-between;
  color: #666;
  padding: 20px 20px 0 20px;
  line-height: 50px;
}
.guest-info-header image{
	width: 50px; 
	height: 50px;
	border-radius: 50%;
	vertical-align: middle;
}
.guest-name{
	vertical-align: middle;
	font-size: 18px;
	margin-left: 14px;
}
.guest-point-list{
  padding: 0px 20px 20px 20px;
}
.guest-point-list .guest-point-list-item{
  height: 40px;
  margin-top: 20px;
  display: flex;
}
.guest-point-list .status{
  display: inline-block;
  margin: 15px 18px;
}
.guest-point-list .guest-right{
	flex: 1;
	display: flex;
	background: #ddd;
}
.guest-point-list .points{
  display: inline-block;
  font-size: 16px;
  width: 100px;
  text-align: right;
  line-height: 40px;
}
.guest-point-list .time{
  color: #666;
  display: inline-block;
  flex: 1;
  line-height: 40px;
  padding-left: 10px;
}
.legend{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  margin-right: 10px;
}
.legend-success{
  background: #419d34;
}
.legend-error{
  background: #dd541a;
}
.legend-warning{
  background: #e4c034;
}
.legend-list{
  font-size: 14px;
  color: #666;
  line-height: 20px;
}
.no-data{
  text-align: center;
  font-size: 18px;
  color: #999;
  line-height: 100px;
}
</style>