dsn_android/pages/fetchPacket/success.vue

<template>
	<view class="fetchPacket">
		<view class="nav-box">
			<text>取件成功</text>
			<view class="countdown">{{timer}}s</view>
		</view>
		<view class="header">
			<image class="icon" :src="require('../../static/images/icon-success-fetch.png')"></image>
			<view class="label">主人取件成功啦～</view>
			<view class="message">记得把格口关上哦～</view>
			<view class="btn" @click="toIndexPage">返回主页</view>
		</view>
		<view class="center-banner">
			<swiper style="height: 40vw;" autoplay>
				<block v-for="(item, i) in centerBanner" :key="i">
					<swiper-item>
						<image class="banner-img" :src="item.image" mode="aspectFill"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>

		<view class="btn-box">
			<view class="btn" @click="bagStorage">
				<image class="bg" :src="require('../../static/images/icon-storage-bg.png')"></image>
				<image class="icon" :src="require('../../static/images/icon-storage.png')"></image>
				<view class="label">存物</view>
			</view>
			<view class="btn" @click="fetchPacket">
				<image class="bg" :src="require('../../static/images/icon-fetch-bg.png')"></image>
				<image class="icon" :src="require('../../static/images/icon-fetch.png')"></image>
				<view class="label">取物</view>
			</view>
		</view>
	</view>
</template>

<script>
	let timer;
	export default {
		data() {
			return {
				centerBanner: [],
				date: {},
				timer: 60
			}
		},
		onLoad() {
			this.countdown()
			this.getCenterBanner();
		},
		onHide() {
			clearInterval(timer);
		},
		methods: {
			countdown() {
				const $this = this;
				timer = setInterval(function() {
					$this.timer--
					if ($this.timer == 0) {
						clearInterval(timer);
						uni.reLaunch({
							url: '/pages/index/index'
						});
						return;
					}
				}, 1000)
			},
			getCenterBanner() {
				this.$api.bannerList({
					type: 3
				}).then(res => {
					console.log(res);
					this.centerBanner = res.data;
				})
			},

			bagStorage() {
				uni.redirectTo({
					url: '/pages/bagStorage/login'
				})
			},

			fetchPacket() {
				uni.redirectTo({
					url: '/pages/fetchPacket/index'
				})
			},
			
			toIndexPage() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style lang="scss">
	.fetchPacket {
		min-height: 100vh;
		background-color: #F4F4F4;

		.nav-box {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 9.8vw;
			font-weight: 500;
			color: #666666;
			font-size: 3.8vw;

			.countdown {
				position: absolute;
				// top: 3.8vw;
				right: 5.2vw;
				color: #666666;
				font-size: 3.3vw;
			}
		}

		.header {
			display: flex;
			align-items: center;
			flex-direction: column;
			padding: 11.3vw 0 4.6vw;
			background-color: #FFFFFF;
			
			.icon {
				width: 33.8vw;
				height: 11.3vw;
			}
			
			.label {
				margin-top: 5.2vw;
				font-weight: 500;
				font-size: 4.2vw;
				line-height: 4.2vw;
			}
			
			.message {
				margin-top: 1.9vw;
				color: #999999;
				font-size: 2.9vw;
			}
			
			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 22.9vw;
				height: 7.1vw;
				border-radius: 1.7vw;
				background-color: #FDD002;
				margin-top: 5.4vw;
				font-size: 2.5vw;
			}
		}

		.center-banner {
			// width: 100vw;
			padding: 2.5vw 2.1vw;

			.banner-img {
				width: calc(100vw - 4.2vw);
				height: 40vw;
				border-radius: .8vw;
				vertical-align: top;
			}
		}

		.btn-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 2.1vw;

			.btn {
				position: relative;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				width: 46.7vw;
				height: 55.8vw;

				.bg {
					position: absolute;
					top: 0;
					width: 100%;
					height: 100%;
				}

				.icon {
					position: relative;
					width: 19.2vw;
					height: 17.3vw;
					margin-bottom: 4.2vw;
				}

				.label {
					position: relative;
					color: #182B10;
					font-size: 6.3vw;
				}
			}
		}
	}
</style>