shop-applet/components/zbpSwiper.vue

<template>
	<view class="zbp-head-wrapper">
		<view class="color-lump"></view>
		<view class="bg-img">
			<img :src="bgColor" alt="">
		</view>

		<view class="site-box flex_a_c_j_sb">

			<!-- <view class="place_wrapper flex_a_c" @click="selectLocation">
				<view class="iconfont icon-weizhi"></view>
				<view class="town_name">{{street}}</view>
			</view>
			<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
				<view class="iconfont icon-xiaoxi" style="color:#fff;"></view>
			</navigator> -->
		</view>
		<!-- 搜索栏 -->
		<navigator url="/pages/columnGoods/goods_search/index" hover-class="none" class="search_content flex_a_c_j_sb">
			<view class="flex_a_c">
				<view class="iconfont icon-sousuo" style="font-size: 39rpx;"></view>
				<input type="text" v-model="keyword" placeholder="搜索产品或店铺" placeholder-style="font-size: 30rpx;"
					disabled>
			</view>
			<button class="search_btn">搜索</button>
		</navigator>
		<!-- 轮播图 -->
		<view class="supply_chains-head">
			<swiper class="swiper l_center" @change="swiperChange" :indicator-dots="swiper.indicatorDots"
				:autoplay="swiper.autoplay" :interval="swiper.interval" :duration="swiper.duration"
				indicator-active-color="#fff">
				<block v-for="(item,index) in swiper['url']" :key="index">
					<swiper-item class="swi_item" @click="swiperClick(item)">
						<u--image :showLoading="true" :src="item.img" width="724rpx" height="259rpx" mode="aspectFit">
						</u--image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<u-picker :defaultIndex="defaInd" :show="showPicker" ref="uPicker" :columns="columnData" @confirm="confirm"
			@cancel="showPicker = false" @change="changeHandler" keyName="name"></u-picker>
	</view>
</template>

<script>
	import {
		getArea,
		getStreet
	} from '@/api/article.js';
	import {
		getIndexData,
		getDiy
	} from '@/api/api.js'
	
	import {
		mapGetters
	} from 'vuex'
	import {
		Toast
	} from '../libs/uniApi';
	import Cache from '@/utils/cache';
	export default {
		props: {
			isSelectPlace: {
				type: Boolean,
				default: false
			},
			// location_Arr: {
			// 	type: Object,
			// 	default: () => ({})
			// },
			// town: {
			// 	type: String,
			// 	default: false
			// },

		},
		data() {
			return {
				defaInd: [0, 0],
				street: '',

				showPicker: false,
				styleConfig: [],
				columnData: [],
				homeCombData: [],
				keyword: '',
				bgColor: '',
				swiper: {
					url: [{
						img: ''
					}],
					indicatorDots: true, // 显示面板指示点
					vertical: false, // 滑动方向是否为纵向
					autoplay: true, // 是否自动切换
					interval: 2000, // 自动切换时间间隔
					duration: 400 // 滑动动画时长
				},

			}
		},
		watch: {
			street(nval, val) {
				this.street = nval
			}
		},

		created() {

			this.getBanner()
			this.Area()

		},

		mounted() {
			
			this.$bus.$on('value-updated', (newValue) => {
				// 更新组件的值 
				this.street = newValue.split(',')[0]
				 
			});
		},
		onShow() {
			this.getBanner()
			this.Area()
		},

		methods: {
			swiperClick(item) {
				const url = item.info[1].value
				uni.navigateTo({
					url: url
				})
			},
			selectLocation() {
				this.isSelectPlace ? this.showPicker = true : ''
			},

			confirm(e) {
				this.showPicker = false
				this.$emit('selectPlce', e)
				this.$emit('change', e)
				this.street = e.value[1].name
				this.$nextTick(() => {
					this.$bus.$emit('value-updated', e.value[1].name + ',' + e.value[1].code);

				})



			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) {
					getStreet({
						area_code: value[0]['code']
					}).then(res => {
						picker.setColumnValues(1, res.data);
					});
				}
			},
			Area() {
				getArea({
					city_code: 510500
				}).then(res => {
					this.$refs.uPicker.setColumnValues(0, res.data);
					this.Street(res.data[0]['code']);
				});
			},
			Street(code) {
				getStreet({
					area_code: code
				}).then(res => {
					this.$refs.uPicker.setColumnValues(1, res.data);
				});
			},

			swiperChange(e) {
				let {
					current,
					source
				} = e.detail;
				if (source === 'autoplay' || source === 'touch') {
					this.bgColor = this.swiper.url[e.detail.current]['img']
					this.$emit('kkchange', this.bgColor)
				}
			},


			// 对象转数组
			objToArr(data) {
				let obj = Object.keys(data).sort();
				let m = obj.map(key => data[key]);
				return m;
			},
			async getBanner(id) {
				let that = this;
				const {
					data
				} = await getDiy({
					id: 0
				})
				that.styleConfig = that.objToArr(data.value);
				/* 循环数组得到数据*/
				that.styleConfig.forEach((item, index, arr) => {
					if (item.name == 'headerSerch' || item.name == 'homeComb') {
						if (item.name == 'homeComb') {
							that.swiper.url = item.swiperConfig.list
						}
					}
				})
				this.bgColor = this.swiper.url[0].img
			},
		}
	}
</script>

<style lang="scss" scoped>
	.zbp-head-wrapper {
		position: relative;
		padding-top: 78.95rpx;
		overflow: hidden;

		.color-lump {
			z-index: 1;
			position: absolute;
			bottom: -86px;
			left: 50%;
			transform: translate(-50%, 0);
			width: 102%;
			height: 133px;
			border-radius: 30px 30px 0 0;
			background-color: #fff;
		}

		.bg-img {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			/* #ifdef MP || APP-PLUS */
			z-index: -1;
			/* #endif */
			/* #ifdef H5 */
			z-index: 0;
			/* #endif */
			z-index: 0;
			filter: blur(0);
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
				filter: blur(30rpx);
				transform: scale(1.5);
			}
		}

		.site-box {
			margin: 0 auto;
			width: 694.74rpx;
			height: 66.67rpx;
			margin-bottom: 26.32rpx;
			position: relative;
			z-index: 0;


			// 位置
			.place_wrapper {
				color: #fff;
				margin-right: 24.56rpx;
				font-size: 30rpx;

				.town_name {
					margin-left: 21rpx;
				}
			}

			.iconfont {
				font-size: 35.09rpx;
			}
		}

		.my-main {
			transition: background-color .5s ease;
		}

		.search_content {
			margin: 0 auto;
			width: 724rpx;
			height: 74rpx;
			padding: 2px 2px 2px 21.05rpx;
			border-radius: 175rpx;
			background: #fff;
			margin-bottom: 21rpx;
			position: relative;
			box-sizing: border-box;

			.icon-sousuo {
				font-size: 26.32rpx;
				font-weight: bold;
				color: #c8c7c6;
				margin-right: 17.54rpx;
			}

			.search_btn {
				color: #fff;
				width: 105.26rpx;
				height: 52.63rpx;
				line-height: 52.63rpx;
				background: #f84221;
				border-radius: 100px;
				font-size: 28.07rpx;
			}
		}

		.supply_chains-head {
			margin-bottom: 17.54rpx;
			position: relative;
			z-index: 2;

			.swiper {
				width: 724rpx;
				height: 259rpx;
				margin: 0 auto;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				overflow: hidden;

				.swi_item {
					width: 100%;
					height: 259rpx;
				}
			}
		}
	}
</style>