school-shunt-app/pages/index/components/top-panel.vue

<template>
	<view class="page-container" :class="{'is-apply': isApply}">
		<view class="u-bg" />
		<view class="main-content">
			<view class="title">
				高校学院
			</view>
			<view v-if="isApply" class="special-apply-result">
				<view class="u-flex" style="margin-bottom: 54rpx;">
					<view class="apply-title">特别申请结果查询</view>
					<view class="apply-status">{{applyObj.applyStatusName}}</view>
				</view>
				<view class="daterange u-flex" style="margin-bottom: 24rpx;">
					<image src="/static/time_icon.png" style="width: 32rpx;height: 32rpx;margin-right: 16rpx;" mode="">
					</image>
					<view style="flex: 1;">{{applyObj.time || '22-04-20 ~ 22- 04-30'}}</view>
				</view>
				<view class="u-flex">
					<view class="">

					</view>
					<view class="u-button ">立即查询</view>
				</view>
			</view>

			<swiper v-else class="swiper" indicator-active-color="#007aff" circular :indicator-dots="true" :autoplay="true" :interval="3000"
				:duration="500">
				<swiper-item @click="change(item)" v-for="(item,index) in list" :key="index">
					<image :src="item.bannerImageUrl" style="width:100%" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				applyObj: {},
			}
		},
		computed: {
			isApply() {
				return this.applyObj.applyStatus >= 1 && false // 不需要自定义
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				this.$ajax.post('/shunt/banner').then(res => {
					this.list = res.data || []
				}).catch(error => {
					this.list = []
				})
				// 
				this.$ajax.post('/shunt/special-apply-result').then(res => {
					this.applyObj = res.data || {}
				}).catch(error => {
					this.applyObj = {}
				})
			},
			change(item) {
				const {
					jumType,
					jumUrl,
					bannerTitle = '123'
				} = item || {}
				console.log(jumType, jumUrl);
				//0-无跳转，1-内部跳转体质，2-http跳转地址
				if (jumType == 1 && jumUrl) { // 
					['/', '/pages/index/index', '/pages/my/my'].indexOf(jumUrl) >= 0 ?
						uni.switchTab({
							url: jumUrl
						}) :
						uni.navigateTo({
							url: jumUrl
						})
				} else if (jumType == 2 && jumUrl) {
					console.log(111, jumUrl)
					uni.navigateTo({
						url: `/pages/common/webview/webview?url=${jumUrl}&title=${bannerTitle}`,
					});
				}
			},
		},

	}
</script>

<style scoped lang='scss'>
	.u-bg {
		display: none;
		height: 353rpx;
		background: url('/static/top_panel_bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		background-origin: content-box;
	}

	.main-content {
		padding: 46rpx 32rpx 72rpx 32rpx;

		.title {
			font-size: 40rpx;
			font-weight: bold;

			color: #333333;
			margin-bottom: 52rpx;
		}

		.special-apply-result {
			background: #FFFFFF;
			box-shadow: 0px 4rpx 22rpx 0rpx rgba(232, 237, 251, 0.8);
			border-radius: 16rpx;
			padding: 32rpx;

			.apply-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
			}

			.apply-status {
				font-size: 28rpx;
				font-weight: bold;
				color: #FFB300;
			}

			.daterange {
				font-size: 28rpx;
				font-weight: bold;
				color: #078EF7;
			}

			.u-button {
				background: rgba($color: #078EF7, $alpha: .18);
				font-size: 28rpx;
				font-weight: bold;
				color: #078EF7;
				height: 84rpx;
				border-radius: 40rpx;
				width: 250rpx;

			}
		}
	}



	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		border-radius: 12rpx;
	}

	.is-apply {
		.u-bg {
			display: inherit;
		}

		.title {
			color: #FFFFFF;
		}
	}
</style>