xc-app/pages/components/floatWindow copy.vue

<template>
	<view class="float-window-page">
		<view class="consumption" v-if="source === 'PREFERENTIAL_DAY' && isNo" @click="handleConsumption">
			<view class="item">
				<image src="@/static/new/hb.png" mode="" class="red-icon"></image>
				<image src="@/static/new/mr.png" mode="" class="item-txt"></image>
			</view>
			<view class="time">{{ remainingTime }}</view>
		</view>
		<view class="discounts" v-if="source === 'ROOKIE' && isNo" @click="handleDiscounts">
			<view class="item">
				<image src="@/static/new/xs.png" mode="" class="new-icon"></image>
				<image src="@/static/new/xs-t.png" mode="" class="item-txt"></image>
			</view>
			<view class="time">{{remainingTime}}</view>
		</view>
		<!-- <view class="discounts" @click="rankingCk">
			<view class="item">
				<image src="@/static/new/rank12.png" mode="aspectFit" class="new-icon"></image>
			</view>
			<view class="time" style="margin-top: 10rpx;">排行榜</view>
		</view> -->
		<!-- <image src="@/static/index/kf.png" mode="" class="customer" @click="handleCustomer" v-if="isCustomer"></image> -->
	</view>
</template>

<script>
	import {
		customerApi
	} from '@/API/user.js'
	export default {
		props: {
			isCustomer: {
				type: Boolean,
				default: false
			}, //客服
			isConsumption: {
				type: Boolean,
				default: false
			}, //每日优惠
			consumptionTime: {
				type: String,
				default: '11:11:12'
			}, //
			isDiscounts: {
				type: Boolean,
				default: false
			}, //
			discountsTime: {
				type: Number,
				default: 0
			},
			source:{
				type: String,
				default: '',//PREFERENTIAL_DAY每日优惠  ROOKIE新手盲恶化
			}
		},
		data() {
			return {
				customer: '',
				discountsTimeTxt: '',
				remainingTime: '00:00:00',
				isNo:true
			}
		},
		mounted() {
			if (this.discountsTime) {
				this.updateRemainingTime(this.discountsTime);
				setInterval(() => {
					this.updateRemainingTime(this.discountsTime);
				}, 1000);
			}
			if (this.consumptionTime) {
				this.updateRemainingTime(this.consumptionTime);
				setInterval(() => {
					this.updateRemainingTime(this.consumptionTime);
				}, 1000);
			}
		},
		methods: {
			rankingCk(){
				uni.navigateTo({
					url:`/pages/index/ranking`
				})
			},
			updateRemainingTime(targetTime = 0) {
				const currentTime = Math.floor(Date.now() / 1000);
				const countdown = targetTime - currentTime;
				if(countdown <= 0){
					this.isNo = false
				}
				const hours = Math.floor(countdown / 3600);
				const minutes = Math.floor((countdown % 3600) / 60);
				const seconds = countdown % 60;
				if(!isNaN(hours)){
					this.remainingTime = `${this.padZero(hours)}:${this.padZero(minutes)}:${this.padZero(seconds)}`;
				}
				
			},
			padZero(num) {
				return num.toString().padStart(2, '0');
			},
			handleCustomer() {
				window.open(this.customer)
			},
			handleConsumption() {
				this.$emit('click', 'PREFERENTIAL_DAY')
			},
			handleDiscounts() {
				this.$emit('click', 'ROOKIE')
			}
		}
	}
</script>

<style lang="scss">
	.float-window-page {
		position: fixed;
		right: 0;
		top: 250rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		z-index: 10;

		.consumption {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-top: 32rpx;

			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.red-icon {
					width: 64rpx;
					height: 64rpx;

				}

				.item-txt {
					width: 120rpx;
					height: 48rpx;
					margin-top: -10rpx;
				}
			}

			.consumption-icon {
				width: 112rpx;
				height: 127rpx;
			}

			.time {
				width: 109rpx;
				text-align: center;
				font-size: 20rpx;
				color: #3F6486;
			}
		}

		.discounts {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin: 32rpx 0;

			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.new-icon {
					width: 72rpx;
					height: 72rpx;

				}

				.item-txt {
					width: 120rpx;
					height: 48rpx;
					margin-top: -10rpx;
				}
			}

			.consumption-icon {
				width: 112rpx;
				height: 127rpx;
			}

			.time {
				width: 109rpx;
				text-align: center;
				font-size: 20rpx;
				color: #3F6486;
			}
		}

		.customer {
			width: 109rpx;
			height: 101rpx;
		}
	}
</style>