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

<template>
	<view class="zs-banner">
		<!-- <view class="position-box" :style="{height:navBareight +'px',top:statusBarHeight+'px'}" v-if="position"> -->
		<view class="position-box" :style="{height:navBareight +'px',background:background?'#fff':''}" v-if="position">
			<view class="position">
				<image class="position-icon" src="../../static/black-position.png" mode=""></image>
				<text class="city">{{city}}</text>
			</view>
			<view class="search-box" @click="handleSearch">
				<input class="search"  :style="{height:height+'px'}" type="text" placeholder="搜索" v-model="search" />
				<image class="icon" src="../../static/search.png" mode=""></image>
			</view>
		</view>
		<view class="top-box" :style="{'--bg':theme}">
				
			<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.bannerImg">
					</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,
		getBanner
	} from '@/api/common.js'
	export default {
		options:{
			styleIsolation:'shared'
		},
		props: {
			position: {
				type: Boolean,
				default: false
			},
			city:{
				type: String,
				default: '定位中'
			},
			background: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				navBareight:0,
				height:0,
				search:'',
				theme: '#FD9E59', //顶部颜色
				textList: [], //通知列表
				bannerList: [
					// {
					// 	src:'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/LasLcHe8z6F9c7c569e98cf778f866ac466404589d03.png/1.png',
					// 	theme: '#FD9E59'
					// },
					// {
					// 	src:'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/QdulVZUZ9HYH190ae2e9392281ee1b845573e68ece1e.png/1.png',
					// 	theme: '#FDD34C'
					// },
					// {
					// 	src:'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/N7kknVWzDPKLbb7e15025599a818bbf11e3b030b6765.png/1.png',
					// 	theme: '#B0ACF9'
					// },
					// {
					// 	src:'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/rJ1Crwfuf0if0e3285089cb737285b7583c890a905db.png/1.png',
					// 	theme: '#85DCF4'
					// },
					// {
					// 	src:'http://zswl-dev.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/WBcUUqzpi50Dd1012af5dd52b6e28758a49e79e3fd07.png/1.png',
					// 	theme: '#FE6646'
					// }
				],
			};
		},
		methods: {
			
			// swiper变动
			swiperChange(val) {
				this.theme = this.bannerList[val.detail.current].colour
			},
			// 获取通知列表
			getNotification() {
				// this.loading = true
				getNotification({
					page: 1,
					pageSize: 10
				}).then(res => {
					if(res.state == 'Success'){
						this.textList = []
						res.content.records.map(item => {
							this.textList.push(`用户${item.phoneNum}注册成功，本月累计节省${item.economizeTheMoney||0}元`)
						})
					}
				}).catch(e=>{
					console.log(3,e);
				})
			},
			getBanner(){
				getBanner({currentPage:1,pageSize:10}).then(res=>{
					if(res.state == 'Success'){
						this.bannerList = res.content.records
						this.theme = this.bannerList[0].colour
					}
				})
			},
			jump(){
				uni.navigateTo({
					url:'../../pages/index/position'
				})
			},
			handleSearch(){
				this.$emit('search',this.search)
			},
			getNavHeight(){
		
				//去除
				//#ifndef H5 || MP-ALIPAY ||APP-PLUS
				//获取小程序胶囊的高度
				let {
					bottom,
					height
				} = uni.getMenuButtonBoundingClientRect()
				this.height = height
				this.navBareight = bottom
				//#endif
			}
		},
		created() {
			this.getNotification()
			this.getBanner()
			this.getNavHeight()
		}
	}
</script>

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

.zs-banner{
	position: relative;
	height: 584rpx;
	.position-box{
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 2;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		box-sizing: border-box;
		// padding-bottom: 6rpx;
		.position{
			position: absolute;
			// top: 50%;
			left: 30rpx;
			// transform: translateY(-50%);
			color: #222;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			.position-icon{
				width: 40rpx;
				height: 40rpx;
			}
			.city{
				margin-left: 6rpx;
				line-height: 60rpx;
			}
		}
		.search-box {
			width: 380rpx;
			// height: 60rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			position: absolute;
			left: 160rpx;
			box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0,0,0,0.1);
			.icon {
				width: 34rpx;
				height: 34rpx;
				position: absolute;
				top: 50%;
				left: 22rpx;
				transform: translateY(-50%);
			}
			
			.search {
				// line-height: 60rpx;
				// height: 60rpx;
				padding-left: 80rpx;
			}
		}
	}
	.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;
		
		
	
		.swiper {
			height: 584rpx;
			border-radius: 16rpx;
			.swiper-item {
				width: 100%;
				height: 100%;
				// border-radius: 16rpx;
				object-fit: cover;
			}
		}
	}
}
</style>