wiki_enterprise_js/pages/my-trips/my-trips.vue

<template>
	<view>
		<!-- 添加 -->
		<button class="shadow round bg-cyan add-btn iconfont icon-plus" hover-class="cc-active" @tap="openPage('/pages/add-stroke/add-stroke')"></button>
		<view v-if="tableList && tableList.length>0" class="cu-timeline" :key="index" v-for="(item,index) in tableList">
			<view class="cu-time">{{ +item.startTime | formatDate }}</view>
			<view class="cu-item cuIcon-timefill text-blue">
				<view class="content shadow-blur bg-blue light">
					{{ +item.startTime | formatDate1 }} 至 {{ +item.endTime | formatDate1 }}
				</view>
			</view>
			<view class="cu-item cuIcon-tagfill text-green">
				<view class="content shadow-blur bg-green light">
					<view>
						<text class="radius bg-green margin-tb padding-xs" v-if="item.journeyType === '0'">返校行程</text>
						<text class="radius bg-green margin-tb padding-xs" v-if="item.journeyType === '1'">日常外出</text>
					</view>
					<view class="margin-bottom" v-if="item.together">
						同行人：{{ item.together }}
					</view>
					<view v-for="trip in transports" :key="trip.id" class="margin-bottom" v-if="trip.value === item.tripMode">
						出行方式：
						{{ trip.name }}
					</view>
					<view>
						乘坐航班车次或车牌号码及座位号：
						{{ item.carNo }}
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="tableList && tableList.length === 0" class="padding-lg">
			您还没有添加行程，请点击右下角加号添加行程。
		</view>

	</view>

</template>

<script>
	import {
		formatDate
	} from 'common/script/filters';
	import {
		showToast
	} from 'common/script/util';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		GET_JOURNEYS
	} from 'api/api';

	export default {
		data() {
			return {
				tableList: [],
				transports: [{
						value: 0,
						name: '铁路',
					},
					{
						value: 1,
						name: '飞机',
					},
					{
						value: 2,
						name: '客运车辆',
					},
					{
						value: 3,
						name: '自驾',
					},
					{
						value: 4,
						name: '船',
					},
					{
						value: 5,
						name: '其他',
					}
				]
			};
		},

		computed: mapState('user', ['token']),

		// 时间戳转化日期
		filters: {
			formatDate(time) {
				var data = new Date(time);
				return formatDate(data, 'MM-dd');
			},
			
			formatDate1(time) {
				var data = new Date(time);
				return formatDate(data, 'MM月dd日 hh:mm');
			},
		},

		onLoad() {
			const startTime = +this.$moment()
				.startOf('year')
				.format('x');
			const endTime = +this.$moment()
				.endOf('day')
				.format('x');
			const params = {
				param: {
					startTime,
					endTime,
					token: this.token
				}
			};
			this.getJourneys(params);
		},

		methods: {
			// 查询行程
			async getJourneys(params) {
				try {
					const res = await this.$http.post(GET_JOURNEYS, params);
					const {
						success,
						code,
						msg,
						data
					} = res.data;

					if (success && code === 200) {
						this.success = true;
						this.tableList = data;

						const fff = this.$moment(1583683200000).format('YY-MM-DD')

					} else {
						uni.showToast({
							title: msg || '查询行程失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.log('error: ', error);
					if (error.msg) {
						uni.showToast({
							title: error.msg || '查询行程失败',
							icon: 'none'
						});
					}
				}
			},

		},
	};
</script>

<style lang="scss" scoped>
	.data-wrap {
		display: flex;
		flex-direction: column;
		align-items: left;
		justify-content: flex-start;
		padding: 40rpx 0;

		.data-item {
			display: flex;
			flex-wrap: wrap;
			align-items: left;
			font-size: 36rpx;
			margin-bottom: 20rpx;

			.data-title {
				line-height: 60rpx;
				color: $black;
			}
		}
	}

	.add-btn {
		position: fixed;
		bottom: 40rpx;
		right: 40rpx;
		width: 96rpx;
		height: 96rpx;
		line-height: 96rpx;
		padding: 0;
		z-index: 1;
	}

	.add-btn::after {
		border: none;
	}
</style>