discounts-minapp/components/zs-banner/index.vue

<template>
	<view class="zs-banner">
		<view class="position-box" v-if="position" @click="jump">
			<view class="position">
				<image class="position-icon" src="../../static/position-white.png" mode=""></image>
				<text class="city">{{city}}</text>
			</view>
			<view class="topbar">
				慧研学惠生活
			</view>
		</view>
		<view class="top-box" :style="{'--bg':theme}">
				<view class="search-box">
					<input class="search" type="text" placeholder="搜索" :value="search" />
					<image class="icon" src="../../static/search.png" mode=""></image>
					<button class="btn" type="default">搜索</button>
				</view>
			<swiper class="swiper" @change="swiperChange" :indicator-dots="true" circular :autoplay="true"
				:interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<image class="swiper-item" mode="" :src="item.src">
					</image>
				</swiper-item>
		
			</swiper>
		</view>
		<u-notice-bar bgColor="none" icon="volume-fill" color="#6F4F23" direction="column" :fontSize='26' :text="textList"></u-notice-bar>
	</view>
</template>

<script>
	import {
		getNotification,
	} from '@/api/common.js'
	export default {
		options:{
			styleIsolation:'shared'
		},
		props: {
			position: {
				type: Boolean,
				default: false
			},
			city:{
				type: String,
				default: '定位中'
			}
		},
		data() {
			return {
				search:'',
				theme: '#FF4A39', //顶部颜色
				textList: [], //通知列表
				bannerList: [
					{
						src:require('../../static/home_banner.png'),
						theme: '#FF4A39'
					},
					{
						src:require('../../static/banner.png'),
						theme: '#893CF1'
					},
					{
						src: 'https://alipic.lanhuapp.com/XDSlicePNGMAX190c797263732d957a8b1678378cdfed7d1080d44f950646dd434fff84683bdd.png',
						theme: '#3C66F1'
					},
					{
						src: 'https://alipic.lanhuapp.com/XDSlicePNGMAX611bc009fa733cff73887ee29c1732ae75825ed9e0954b587c74a4c189a3cffb.png',
						theme: '#00C8CF'
					}
				],
			};
		},
		methods: {
			// swiper变动
			swiperChange(val) {
				this.theme = this.bannerList[val.detail.current].theme
			},
			// 获取通知列表
			getNotification() {
				// this.loading = true
				getNotification({
					page: 1,
					pageSize: 10
				}).then(res => {
					// this.loading = false
					this.textList = []
					res.content.records.map(item => {
						this.textList.push(`用户${item.phoneNum}注册成功，本月累计节省${item.economizeTheMoney||0}元`)
					})
				})
			},
			jump(){
				uni.navigateTo({
					url:'../../pages/index/position'
				})
			}
		},
		created() {
			this.getNotification()
		}
	}
</script>

<style lang="scss" >
	// 通知喇叭样式
	.zs-banner ::v-deep .u-notice .u-icon__icon{
		font-size: 32rpx!important;
	}
	

.zs-banner{
	position: relative;
	.position-box{
		position: absolute;
		width: 100%;
		top: 95rpx;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		.position{
			position: absolute;
			top: 10rpx;
			left: 30rpx;
			color: #fff;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			.position-icon{
				width: 21.65rpx;
				height: 24.3rpx;
			}
			.city{
				margin-left: 10rpx;
			}
		}
		.topbar{
			
			font-size: 36rpx;
			color: #FFFFFF;
			text-align: center;
			font-weight: bold;
			font-family: DOUYUFont;
		}
	}
	.top-box {
		background: linear-gradient(180deg, var(--bg) 0%, #FFF 100%);
		padding: 100rpx 32rpx 0;
		height: 536rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		.search-box {
			position: relative;
			height: 80rpx;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			margin-bottom: 24rpx;
	
			.icon {
				width: 37rpx;
				height: 37rpx;
				position: absolute;
				top: 50%;
				left: 36rpx;
				transform: translateY(-50%);
			}
	
			.search {
				line-height: 80rpx;
				height: 80rpx;
				padding-left: 100rpx;
				padding-right: 130rpx;
			}
	
			.btn {
				position: absolute;
				top: 8rpx;
				right: 10rpx;
				width: 108rpx;
				height: 64rpx;
				line-height: 64rpx;
				background: var(--bg);
				color: #fff;
				font-size: 28rpx;
				border-radius: 32rpx;
				padding: 0;
			}
		}
	
		.swiper {
			height: 244rpx;
			border-radius: 16rpx;
			.swiper-item {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
				object-fit: cover;
			}
		}
	}
}
</style>