dev/dcp-app-gate/pages/volunteer/volunteer.vue

<template>
	<view>
		<uni-nav-bar
			status-bar = true
			fixed = true
			left-icon="arrowthinleft" 	
			background-color="#ffffff"
			color="#c7c7c7"
			@clickLeft="navigateBack">
			<button @tap="goHome" slot="right" size="mini" style="height: 30px; border-radius: 15px; background-color: #c7c7c7; ">
				<uni-icons type="home-filled" size="22" color="#ffffff"></uni-icons>
			</button>
		</uni-nav-bar>
		<view class="state-filter-list" :style="{top: filterTop}">
			<view @click="stateFilter(i)" :class="{active: stateIndex == i}" v-for="(item, i) in stateFilterList" :key="i">
				<uni-badge class="badge" v-if="i==1 && unconfirmed>0" :text="unconfirmed" size="small" type="error"></uni-badge>
				<uni-icons :type="item.icon" size="34" :color="stateIndex == i? '#3ac6c3': '#555555'"></uni-icons>
				<text>{{item.title}}</text>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{'margin-top': filterTop}">
			<view class="guest-list" v-for="(_item, _i) in guestTravelInfos" :key="_i">
				<view class="left-content">
					<image class="guest-photo" :src="_item[0].photoUrl? websiteUrl+_item[0].photoUrl: '../../static/missing-face.png'" mode=""></image>
					<view>
						<text class="guest-name" :style="{color: colorGroup[_i%4].color}">{{_item[0].applyWay=='zh'?_item[0].name: _item[0].nameEn}}</text>
						<uni-icons @click="makePhoneCall(_item[0].contactCellphone)" class="guest-phone" type="phone" size="16" color="#bde4f6"></uni-icons>
					</view>
				</view>
				<view class="right-content">
					<view class="guest-item" v-for="(item, i) in _item" :key="i" :style="{background: colorGroup[i%4].bgColor}">
						<view class="item-center">
							<view class="guest-state" :style="{color: colorGroup[i%4].color}">{{item.travelPointName}}</view>
							<!-- travelPointNameDict: 接机2显示到达时间，送机9显示离开时间 -->
							<view v-if="item.travelPointNameDict=='2'">
								<text class="guest-time">{{moment(item.travelArrivalTime).format("LT")}}</text>
								<text class="guest-date">{{moment(item.travelArrivalTime).format("YYYY-MM-DD")}}</text>
							</view>
							<view v-if="item.travelPointNameDict=='9'">
								<text class="guest-time">{{moment(item.travelLeaveTime).format("LT")}}</text>
								<text class="guest-date">{{moment(item.travelLeaveTime).format("YYYY-MM-DD")}}</text>
							</view>
						</view>
						<view class="item-right">
							<view class="guest-flight" v-if="item.travelPointNameDict=='2'">{{item.travelInfo}}</view>
							<view class="guest-flight" v-else-if="item.travelPointNameDict=='9'">{{item.travelInfo}}</view>
							<view class="guest-flight" v-else></view>
							<view>
								<!-- travelPointStatus: 0已完成 1未完成 2待确认 -->
								<view class="guest-option" v-if="item.travelPointStatus == '2'">
									<view class="option-state" @click="carryOutOption(item.travelPointId, '0', 2)">
										<uni-icons type="checkmarkempty" size="30" color="#1eb019"></uni-icons>
									</view>
									<view class="option-state" @click="carryOutOption(item.travelPointId, '1', 3)">
										<uni-icons type="closeempty" size="30" color="#aaaaaa"></uni-icons>
									</view>
								</view>
								<view class="option-state" v-if="item.travelPointStatus == '0'">
									<text class="guest-completed">已完成</text>
								</view>
								<view class="option-state" v-if="item.travelPointStatus == '1'">
									<text class="guest-not-completed">未完成</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"; 
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	export default {
		components: {uniNavBar, uniIcons},
		data() {
			return {
				stateFilterList: [
					{title: '全部', icon: 'list'},
					{title: '待确认', icon: 'paperclip'},
					{title: '已完成', icon: 'checkbox'},
					{title: '未完成', icon: 'close'}
				],
				stateIndex: 0,
				condition: '',
				guestTravelInfos: [],
				unconfirmed: 0,
				isGetUnconfirmed: true,
				colorGroup: [
					{color: '#0000bf', bgColor: '#bde4f6'},
					{color: '#8400ff', bgColor: '#e6d9f3'},
					{color: '#f59a23', bgColor: '#f3e7d7'},
					{color: '#03b7b4', bgColor: '#d3ecec'},
					{color: '#70b603', bgColor: '#e1ebd3'}
				],
				filterTop:  (statusBarHeight+44)+'px',
				Storage_data: null
			}
		},
		mounted(){
			this.Storage_data =JSON.parse(uni.getStorageSync('user'));
			this.getGuestsByCondition(this.condition);
		},
		methods: {
			async carryOutOption(travelPointId, travelPointStatus, o){
				const res = await this.$myRequest({
					url: '/meeting/meetingGuestActivitys/volUpdateGuestTravelPointStatus',
					method: 'POST',
					data: {
						"travelPointId": travelPointId,
						"travelPointStatus": travelPointStatus
					}
				});
				this.unconfirmed -= 1;
				this.stateFilter(o)
			},
			async getGuestsByCondition(condition){
				const res = await this.$myRequest({
					url: '/meeting/meetingApplys/getGuestTravelPointInfoByVolLoginAccount',
					data: {
						"loginAccount": this.Storage_data.umsUser.userPreferredMobile,
						"travelPointStatus": condition
					}
				});
				// console.log('guestTravelPointInfos',res.data.guestTravelPointInfos)
				this.guestTravelInfos = [];
				res.data.guestTravelPointInfos.forEach(item => {
					let unitArr = [];
					if(this.guestTravelInfos.length){
						let hasSameId = false;
						let listItemIndex;
						for(let l = 0; l < this.guestTravelInfos.length; l++){
							if(this.guestTravelInfos[l][0].id == item.id){
								hasSameId = true;
								listItemIndex = l;
								break;
							}
						}
						if(hasSameId){
							this.guestTravelInfos[listItemIndex].push(item);
						}else{
							unitArr.push(item)
							this.guestTravelInfos.push(unitArr);
						}
					}else{
						unitArr.push(item)
						this.guestTravelInfos.push(unitArr);
					}
				})
				// console.log('guestTravelInfos',this.guestTravelInfos)
				if(this.isGetUnconfirmed){
					res.data.guestTravelPointInfos.forEach(item=>{
						if(item.travelPointStatus=="2") this.unconfirmed += 1;
					})
				}
				// console.log(this.guestTravelInfos)
			},
			goHome(){
				this.$mRouter.reLaunch({ route: '/pages/index/index' });
			},
			makePhoneCall(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			stateFilter(i){
				this.isGetUnconfirmed = false;
				this.stateIndex = i;
				switch(i){
					case 0:
						this.condition = ""
					break;
					case 1:
						this.condition = 2
					break;
					case 2:
						this.condition = 0
					break;
					case 3:
						this.condition = 1
					break;
				};
				this.getGuestsByCondition(this.condition);
			},
			navigateBack(){
				uni.navigateBack();
			}
		}
	}
</script>

<style scoped>
.scroll-box{
	
}
.uni-icons{
    line-height: 30px;
}
.state-filter-list{
	width: 100%;
	padding: 10px 15px;
	display: flex;
	justify-content: space-between;
	text-align: center;
	background: #FFFFFF;
	color: #555555;
	position: fixed;
	left: 0;
	z-index: 9;
}
.state-filter-list .active{
	color: #3ac6c3;
}
.state-filter-list view{
	position: relative;
}
.state-filter-list view .uni-icons{
	display: block;
	padding-bottom: 4upx;
	line-height: 1;
}
.badge{
	position: absolute;
	top: -8px;
	right: -8px;
}
.guest-list{
	padding: 30upx 30upx 0 30upx;
	display: flex;
}
.guest-item{
	border-radius: 30rpx;
	padding: 20rpx;
	display: flex;
	margin-bottom: 30upx;
	min-height: 240rpx;
}
.guest-photo{
	width: 140upx;
	height: 140upx;
	border-radius: 50%;
}
.guest-name{
	/* color: #0000bf; */
}
.guest-phone{
	background: #fff;
	border-radius: 10upx;
	margin-left: 10upx;
}
.guest-state{
	color: #0000bf;
	font-size: 18px;
	font-weight: bold;
}
.guest-flight{
	width: 240rpx;
	color: #666;
	font-size: 12px;
}
.guest-time{
	line-height: 24px;
	font-size: 16px;
	font-weight: bold;
	display: block;
	margin-top: 60rpx;
}
.guest-date{
	line-height: 14px;
	display: block;
	font-size: 12px;
	font-weight: bold;
	color: #AAAAAA;
}
.option-state{
	height: 60upx;
	line-height: 60upx;
	background: #FFFFFF;
	text-align: center;
	border-radius: 10upx;
	width: 240rpx;
}
.guest-option{
	width: 240rpx;
	display: flex;
	justify-content: space-between;
}
.guest-option .option-state{
	width: 100upx;
}
.guest-completed{
	color: #1eb019;
}
.guest-not-completed{
	color: #AAAAAA;
}
.item-center{
	flex: 1;
}
.left-content{
	text-align: center;
	margin-right: 60rpx;
}
.item-right{
	margin-left: 40rpx;
	display:flex;
	flex-direction: column;
	justify-content: space-between;
}
.right-content{
	flex: 1;
}
</style>