mgm-daylight-mcrm-mobile-ios/pages/notification/notification.vue

<template>
	<view>
		<u-navbar
			:safeAreaInsetTop="true" 
			:placeholder="true" 
			:title="title"
			:fixed="true"
			:autoBack="true"
			leftIconColor="#000000"
			bgColor="#ffffff"
			titleStyle="font-weight:bold;color:#000000;"
		>
		<view style="margin-top:2px;margin-right:3px;" slot="right">
			<u-icon
			   v-if="hasSelectedDate"
			   @click="clearDateFilter"
			   size="28px" name="../../static/images/filter-clear.svg"
			></u-icon>
		</view>
		</u-navbar>
		<!-- 搜索栏 -->
		<view class="hz-spacing hz-mr-t-20 hz-flex-row">
			<u-search :placeholder="searchHolder" v-model="searchInputStr" :showAction="false" bgColor="#ffffff" :label="searchLabel"
			borderColor="gray" style="padding-right: 8px" @search="searchApprovalByPlayerId()"></u-search>
			<u-icon name="calendar" :size="45" :color="calendarIconColor" @click="showCalendar = true"></u-icon>
		</view>

		<view v-if="!showApprovalList">
			<view class="hz-flex-row" style="justify-content: center;margin-top:80px;">
				<image src="/static/images/datanull.png" style="width:160px;height:160px;"></image>
			</view>
			<view class="hz-flex-row hz-font-bolder hz-font-md" style="justify-content: center;margin:20px;">
				{{dataNull}}
			</view>
		</view>
		<view v-else>
			<uni-card v-for="(approvalRecord,index) in approvalList" :key="index" @click="toDetail(approvalRecord.playerId)">
				<view class="notification-content">
					<view class="icon-container">
						<image src="/static/images/task.png" class="task-icon"></image>
					</view>
					<view class="notification-info">
						<view class="notification-title">
							{{ $t("notification.pendingApprovalRequest") }}
						</view>
						<view class="notification-date">
							{{approvalRecord.createdAt}}
						</view>
					</view>
					<view class="notification-time">
						{{getTimeAgo(approvalRecord.createdAt)}}
					</view>
				</view>
				<view class="notification-detail">
					{{approvalRecord.memberLastName}},  {{approvalRecord.playerId}} ({{approvalRecord.tier}}), {{approvalRecord.propertyName}}, {{approvalRecord.roomTypeCode}}, {{approvalRecord.checkinDate}} to {{approvalRecord.checkoutDate}}, {{approvalRecord.booker}}
				</view>
			</uni-card>
		</view>
		
		<u-calendar :show="showCalendar" @close="showCalendar = false" :confirmText="confirmText" :confirmDisabledText="confirmText"
			color="#C39A4B" :allowSameDay="true" :startText="startText" :endText="endText" mode="range" :showMark="false"
			title="" @confirm="handleFilterDate" :defaultDate="selectedDate">
			
		</u-calendar>
	</view>
	
</template>

<script>
	import {getApprovalList} from '../../api/approvalApi.js'
	export default {
		data() {
			return {
				title:this.$t("notification.pendingApproval"),
				searchInputStr:'',
				userData:'',
				approvalList:[],
				showApprovalList:true,
				dataNull:this.$t("notification.noData"),
				searchHolder:this.$t("approval.searchStr"),
				calendarIconColor: '#000000',
				showCalendar: false,
				confirmText: this.$t("common.confirm").toUpperCase(),
				startText: this.$t("common.start"),
				endText: this.$t("common.end"),
				selectedDate: [],
				searchLabel: this.$t("common.playerId")
			}
		},
		onShow() {
			this.userData = uni.getStorageSync("userData");
			this.getApprovalList();
		},
		methods: {
			handleFilterDate(e) {
				this.selectedDate = e;
				this.showCalendar = false;
				
				if (Array.isArray(this.selectedDate) && this.selectedDate.length > 0) {
					this.calendarIconColor = '#C39A4B';
				} else {
					this.calendarIconColor = '#000000';
				}
				
				this.getApprovalList();
			},
			clearDateFilter() {
				this.selectedDate = [];
				this.calendarIconColor = '#000000';
				this.getApprovalList();
			},
			
			toDetail(playerId){
				this.navTo("/pages/playerDetail/playerDetail?playerId="+playerId,0,false)
			},
			getTimeAgo(createdAt) {
				if (!createdAt) return '';
				
				const now = new Date();
				const created = new Date(createdAt);
				const diffMs = now - created;
				const diffMins = Math.floor(diffMs / 60000);
				const diffHours = Math.floor(diffMins / 60);
				const diffDays = Math.floor(diffHours / 24);
				
				if (diffMins < 1) return 'just now';
				if (diffMins < 60) return diffMins + 'm';
				if (diffHours < 24) return diffHours + 'h';
				return diffDays + 'd';
			},
			async getApprovalList(){
				uni.showLoading({
					title: this.$t("common.loading")
				});
				try{
					let params = {
						userId: this.userData.userId,
						playerId: this.searchInputStr,
						rangeDate: this.selectedDate
					};
					const res = await getApprovalList(params);
					if(res.success == true){
						if(res.data !== null && res.data.length > 0){
							this.approvalList = res.data;
							// 提取所有 playerId 到新的 playerList 并去重
							const playerIds = this.approvalList.map(item => item.playerId);
							const uniquePlayerIds = [...new Set(playerIds)];
							this.playerList = uniquePlayerIds.map(playerId => ({ playerId }));
							uni.setStorageSync("approvalPlayerList",this.playerList);
							this.showApprovalList = true;
						} else {
							this.showApprovalList = false;
							this.dataNull = this.$t("notification.noData");
						}
					}else{
						this.msgStr = res.message;
						this.showMsg = true;
						this.showApprovalList = false;
						if(res.errorCode==="NO_PERMISSION") this.dataNull = this.$t("notification.noPermission");
					}
				}catch(e){
					console.error(e);
					uni.$u.toast(e.errMsg,5000);
					var request = e.config!=undefined?JSON.stringify(e.config):"";
					var response = e.data!=undefined?JSON.stringify(e.data):"";
					await this.writeLog(this.userData.userId,"find_player","","[APP][findPlayer.vue][getProfileByPlayerId][Catch Exception]"+e.errMsg,request,response,1,false); 
				}finally{
					uni.hideLoading();
				}
			},
			// 搜索玩家審批請求
			searchApprovalByPlayerId() {
				this.getApprovalList();
			}
		},
		computed: {
			hasSelectedDate() {
				return Array.isArray(this.selectedDate) && this.selectedDate.length > 0;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.notification-content {
		display: flex;
		align-items: center;
		position: relative;
	}
	
	.icon-container {
		margin-right: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.task-icon {
		width: 32px;
		height: 32px;
	}
	
	.notification-info {
		flex: 1;
	}
	
	.notification-title {
		font-weight: bold;
		font-size: 14px;
		color: #000000;
	}
	
	.notification-date {
		font-weight: normal;
		font-size: 12px;
		color: #999;
	}
	
	.notification-time {
		font-weight: normal;
		font-size: 12px;
		color: #C39A4B;
		background-color: #FFF8E7;
		padding: 2px 8px;
		border-radius: 10px;
		margin-left: auto;
	}
	
	.notification-detail {
		font-weight: normal;
		font-size: 12px;
		color: #000000;
		margin-top: 6px;
	}
</style>