huangjingfen/pro_v3.5.1/view/uniapp_v2/pages/index/components/homeComb.vue

<template>
	<view class="page_count" v-if="!dataConfig.isHide">
		<view class="bg-img" v-if="imgUrls.length">
			<image :class="{ active: index == swiperCur }" 
			v-for="(i, index) in imgUrls" :key="index" :src="i.img"></image>
		</view>
		<view class="bag-gradient" :style="[bgGradientStyle]"></view>
		<!--搜索-->
		<view class="my-main">
			<view class="mp-header" id="home" :style="[mpHeaderStyle]">
				<view class="sys-head" :style="{height: statusBarHeight + 'px'}"></view>
				<view class="serch-box">
					<view class="serch-wrapper flex">
						<view class="logo skeleton-rect">
							<image :src="logoUpImg" mode="heightFix"></image>
						</view>
						<navigator v-if="hotWords.length" :url="'/pages/goods/goods_search/index?searchVal='+searchVal" :class="logoConfig ? 'input' : 'uninput'" hover-class="none"
							class="skeleton-rect" :style="[inputStyle]">
							<view class='swiperTxt'>
								<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" vertical="true" circular="true" @change="textChange">
									<block v-for="(item,index) in hotWords" :key='index'>
										<swiper-item catchtouchmove='catchTouchMove'>
											<view class='acea-row row-between-wrapper'>
												<view class='text acea-row row-between-wrapper'>
													<view class='newsTitle line1'>{{item.val}}</view>
												</view>
											</view>
										</swiper-item>
									</block>
								</swiper>
							</view>
							<text class="iconfont icon-ic_search"></text>
						</navigator>
						<navigator v-else url="/pages/goods/goods_search/index" hover-class="none" class="skeleton-rect input" :style="[inputStyle]">
							{{ dataConfig.inputConfig.value }}
							<text class="iconfont icon-ic_search"></text>
						</navigator>
					</view>
				</view>
			</view>
			<view :style="'height:'+ (statusBarHeight+43) +'px'" v-if="!special && searchShow"></view>
			<view v-if="!dataConfig.classConfig.tabVal" class="navTabBox tabNav">
				<view class="longTab" :style="{ width: `${mainWidth}px` }">
					<scroll-view scroll-x="true" scroll-with-animation :scroll-left="tabLeft" show-scrollbar="true">
						<view class="longItem" v-for="(item,index) in tabListConfig" :key="index" 
							:class="{ click: index == tabClick }" :id="'id'+index" :data-index="index"
							:style="{marginRight: `${dataConfig.contentConfig.val * 2}rpx`}"
							@click="changeTab(item,index)">{{item.text.val}}</view>
					</scroll-view>
				</view>
				<view class="category" @click="showCategory">
					<text class="iconfont icon-a-ic_Imageandtextsorting" :style="'color:'+(isScrolled?txtColor:'#fff')"></text>
				</view>
			</view>
			<view v-if="isCategory" class="category_count">
				<view class="sys-head tui-skeleton" :style="{ height: statusBarHeight + 'px' }"></view>
				<view class="fs-28">精选类目</view>
				<view class="cate_count grid-column-4 grid-gap-16rpx mt-32">
					<view class="category_item" :class="index===tabClick?'clicks':''" @click="changeTab(item,index)" v-for="(item,index) in tabListConfig" :key="index" :id="'ids'+index">
						{{item.text.val}}
					</view>
				</view>
			</view>
		</view>
		<view class="swiperBg pb-20">
			<!-- :style="{ paddingBottom: isMenu ? '30rpx' : '30rpx'}" -->
			<view class="swiper page_swiper" v-if="imgUrls.length">
				<swiper 
					:autoplay="true" 
					:circular="circular" 
					:interval="intervals" 
					:duration="duration" 
					:current="swiperCur" 
					:previous-margin="swiperMargin" 
					:next-margin="swiperMargin"
					:style="{'height': imageH + 'px'}"
					@change="swiperChange">
					<block v-for="(item,index) in imgUrls" :key="index">
						<swiper-item :class="{ active: index == swiperCur,scalex:isScale }">
							<view @click="goDetail(item)" class='slide-navigator acea-row row-between-wrapper'>
								<image :src="item.img" :style="[imageStyle]" mode="aspectFill" class="slide-image"></image>
							</view>
						</swiper-item>
					</block>
				</swiper>
				<!--重置小圆点的样式  -->
				<view class="dots acea-row" :class="{
					'row-center': dataConfig.docPosition.tabVal == 1,
					'row-right': dataConfig.docPosition.tabVal == 2,
				}">
					<view v-if="dataConfig.docConfig.tabVal == 2" class="dot3">
						<view class="dot" :style="[progressWidth,dotBgColor]">
							<view class="active" :style="[progressValue,dotColor]"></view>
						</view>
					</view>
					<view v-else class="acea-row" :class="{
						dot1: dataConfig.docConfig.tabVal == 0,
						dot2: dataConfig.docConfig.tabVal == 1,
						dot4: dataConfig.docConfig.tabVal == 3,
					}">
						<view v-for="(item, index) in imgUrls" :key="index" class="dot" :class="{ active: index == swiperCur }" :style="[dotBgColor,index==swiperCur?dotColor:'']"></view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="isCategory" class="mask" @click="isCategory = false"></view>
	</view>
</template>

<script>
	import {
		getCategoryList
	} from '@/api/store.js';
	import {
		getCategoryVersion
	} from '@/api/api.js';
	let statusBarHeight = uni.getWindowInfo().statusBarHeight;
	export default {
		name: 'homeComb',
		props: {
			dataConfig: {
				type: Object,
				default: () => {}
			},
			isFixed: {
				type: Boolean,
				default: false
			},
			isScrolled: {
				type: Boolean,
				default: false
			},
			isScale: {
				type: Boolean,
				default: false
			},
			isMenu: {
				type: Boolean,
				default: false
			},
			special: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				statusBarHeight: statusBarHeight,
				autoplay: true,
				interval: this.dataConfig.numConfig.val * 1000 || 2500,
				duration: 500,
				logoConfig: this.dataConfig.logoConfig.url,
				tabClick: 0, //导航栏被点击
				isLeft: 0, //导航栏下划线位置
				isWidth: 0, //每个导航栏占位
				mainWidth: 0,
				tabLeft: 0,
				tabTitle: [],
				isTop: 0,
				navHeight: 38,
				indicatorDots: false,
				circular: true,
				intervals: 3000,
				imgUrls: [], //图片轮播数据
				swiperCur: 0,
				searchVal: '',
				bgColor: this.dataConfig.swiperConfig.list.length ? this.dataConfig.swiperConfig.list[0].img : '',
				isCategory: false,
				classColor: '',
				txtColor: '',
				hotWordShow: false,
				bgColorLeft: '',
				bgColorRight: '',
				searchShow: false,
				imageH:160,
			};
		},
		computed: {
			swiperMargin() {
				return this.dataConfig.styleConfig.tabVal ? '50rpx' : '10rpx';
			},
			bgGradientStyle(){
				return {
					'background-image': `linear-gradient(to bottom, rgba(245,245,245,0) 0%, rgba(245,245,245,0) 50%, ${this.dataConfig.gradientColor ? this.dataConfig.gradientColor.color[0].item : '#f5f5f5'} 100%)`
				}
			},
			mpHeaderStyle() {
				let style = {};
				if (this.isScrolled && this.dataConfig.searchConfig.tabVal) {
					style.background = `linear-gradient(90deg, #FFFFFF 50%, #FFFFFF 100%)`;
					style.position = `fixed`;
					this.searchShow = true;
				} else {
					this.searchShow = false;
				}
				return style;
			},
			inputStyle() {
				let style = {};
				if (this.isScrolled && this.dataConfig.searchConfig.tabVal) {
					style.background = `#F5F5F5`;
					style.color = `#BBBBBB`;
				}
				return style;
			},
			progressWidth() {
				return {
					width: `${this.dataConfig.swiperConfig.list.length * 20}rpx`,
				};
			},
			progressValue() {
				return {
					width: `${(this.swiperCur + 1) / this.dataConfig.swiperConfig.list.length * 100}%`,
				};
			},
			dotBgColor() {
				return {
					background: this.dataConfig.dotBgColor.color[0].item,
				};
			},
			dotColor() {
				return {
					background: this.dataConfig.dotColor.color[0].item,
				};
			},
			imageStyle() {
				let borderRadius = `${this.dataConfig.filletImg.val * 2}rpx`;
				if (this.dataConfig.filletImg.type) {
					borderRadius =
						`${this.dataConfig.filletImg.valList[0].val * 2}rpx ${this.dataConfig.filletImg.valList[1].val * 2}rpx ${this.dataConfig.filletImg.valList[3].val * 2}rpx ${this.dataConfig.filletImg.valList[2].val * 2}rpx`;
				}
				return {
					'border-radius': borderRadius,
				};
			},
			tabListConfig() {
				let tabList = this.dataConfig.tabListConfig.list;
				tabList.unshift({
					classPage: {
						id: 0
					},
					dataType: {
						tabVal: 0
					},
					microPage: {
						id: 0
					},
					text: {
						val: '首页'
					},
				})
				return tabList
			},
			hotWords() {
				return this.dataConfig.hotWords.list.filter(item => {
					return item.val;
				});
			},
			longItemStyle(){
				return {
					marginRight: `${this.dataConfig.contentConfig.val * 2}rpx`,
					fontSize: `${this.dataConfig.fontSize?.val * 2}rpx`,
					color: `${this.dataConfig.nameColor?.color[0]?.item}`
				};
			},
			logoUpImg() {
				let img = '';
				if(this.isScrolled && this.dataConfig.searchConfig.tabVal && this.dataConfig.logoUpConfig &&  this.dataConfig.logoUpConfig.url){
					img = this.dataConfig.logoUpConfig.url;
				}else{
					img = this.dataConfig.logoConfig.url;
				}
				return img;
			},
		},
		created() {
			var that = this
			// 获取设备宽度
			uni.getSystemInfo({
				success(e) {
					that.mainWidth = e.windowWidth
					that.isWidth = (e.windowWidth - 65) / 8
				}
			})
			that.imgUrls = that.dataConfig.swiperConfig.list;
		},
		mounted() {
			let that = this;
			that.hotWords.forEach(item => {
				if (item.val) {
					this.hotWordShow = true;
				}
			})
			that.computedHeight();
			uni.setStorageSync('hotList', that.hotWords);
		},
		methods: {
			goDetail(url) {
				let urls = url.info[1].value
				this.$util.JumpPath(urls);
			},
			//替换安全域名
			setDomain: function(url) {
				url = url ? url.toString() : '';
				//本地调试打开,生产请注销
				if (url.indexOf("https://") > -1) return url;
				else return url.replace('http://', 'https://');
			},
			swiperChange(e) {
				let {
					current,
					source
				} = e.detail;
				if (source === 'autoplay' || source === 'touch') {
					this.swiperCur = e.detail.current;
					this.bgColor = this.imgUrls[e.detail.current]['img']
				}
			},
			computedHeight(){
				let that  =this;
				let windowWidth = uni.getWindowInfo().windowWidth;
				uni.getImageInfo({
					src: that.setDomain(that.imgUrls[0].img),
					success: (res) => {
						let height = res.height * ((windowWidth - 20) / res.width)
						that.$set(that, 'imageH', height.toFixed(2));	
					}
				})
			},
			//替换安全域名
			setDomain: function(url) {
				url = url ? url.toString() : '';
				//本地调试打开,生产请注销
				if (url.indexOf("https://") > -1) return url;
				else return url.replace('http://', 'https://');
			},
			textChange(e) {
				let {
					current,
					source
				} = e.detail;
				if (source === 'autoplay' || source === 'touch') {
					this.searchVal = this.hotWords[e.detail.current]['val']
				}
			},
			/**显示全部分类*/
			showCategory() {
				this.isCategory = true;
			},
			/*跳转为页面*/
			changeTab(item, index) {
				if (this.tabClick == index) return;
				this.tabClick = index; //设置导航点击了哪一个
				this.isLeft = index * this.isWidth + 16; //设置下划线位置
				this.isCategory = false;
				let data = {
					type: item.dataType.tabVal, // 0 微页面 1 商品分类
					microPage: item.microPage.id,
					classPage: item.classPage.id,
				};
				this.$emit('bindSortId', data);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.scrollColor {
		transition: background-color .5s ease;
		background-color: #fff;
		color: #333 !important;

		.longItem {
			// color: #333 !important;

			&.click {
				&::after {
					background: #333 !important;
				}
			}
		}
	}

	.page_count {
		position: relative;
		overflow: hidden;

		.bg-img {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			z-index: 0;
			filter: blur(0);
			overflow: hidden;
			image.active {
				opacity: 1;
				transform: scale(1.5);
			}
			image {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				filter: blur(30rpx);
				transform: scale(1.5);
				opacity: 0;
				transition: opacity 0.5s ease;
			}
			// image {
			// 	width: 100%;
			// 	height: 100%;
			// 	filter: blur(30rpx);
			// 	transform: scale(1.5);
			// }
		}
	}
	.bag-gradient{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		z-index: 1;
	}

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

	.swiperTxt {
		width: 300rpx;
		height: 100%;
		line-height: 58rpx;
		overflow: hidden;
	}

	.swiperTxt .text {
		width: 480rpx;
	}

	.swiperTxt .text .label {
		font-size: 20rpx;
		color: #ff4c48;
		width: 64rpx;
		height: 30rpx;
		border-radius: 40rpx;
		text-align: center;
		line-height: 28rpx;
		border: 2rpx solid #ff4947;
	}

	.swiperTxt .text .newsTitle {
		width: 300rpx;
		font-size: 24rpx;
		// color: #fff;
	}

	.swiperTxt swiper {
		height: 100%;
	}

	.mp-header {
		z-index: 99;
		// position: fixed;
		position: relative;
		left: 0;
		top: 0;
		width: 100%;

		&.on {
			position: relative;
		}

		.serch-box {
			height: 43px;
		}

		.logo {
			height: 60rpx;
			margin-right: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.serch-wrapper {
			align-items: center;
			/* #ifdef MP */
			padding: 0 220rpx 0 30rpx;
			/* #endif */
			/* #ifndef MP */
			padding: 0 30rpx;
			/* #endif */
			height: 100%;

			&.on {
				padding: 0 30rpx;
			}

			.input,
			.uninput {
				flex: 1;
				min-width: 0;
				position: relative;
				display: flex;
				align-items: center;
				height: 60rpx;
				padding: 0 32rpx;
				border-radius: 30rpx;
				background: rgba(255, 255, 255, 0.4);
				font-size: 28rpx;
				color: #FFFFFF;

				.iconfont {
					position: absolute;
					right: 25rpx;
					top: 13rpx;
				}
			}
		}
	}

	.tabNav {
		padding-top: 10rpx;
	}

	.navTabBox {
		color: #FFFFFF;
		padding: 0 57rpx 0 30rpx;
		z-index: 10;
		position: relative;
		// position: fixed;
		left: 0;
		width: 100%;
		// padding-top: 5px;

		&.on {
			position: relative;
		}

		scroll-view {
			/* #ifdef MP */
			width: 640rpx;
			/* #endif */
			/* #ifndef MP */
			width: 666rpx;
			/* #endif */
			height: 82rpx;
			white-space: nowrap;
		}

		.click {
			color: white;
		}

		.longTab {
			// height: 34px;

			.longItem {
				display: inline-block;
				text-align: center;
				font-size: 28rpx;
				color: #FFFFFF;
				max-width: 160rpx;
				margin-right: 30rpx;
				position: relative;
				font-weight: 400;
				line-height: 82rpx;

				&:last-child {
					margin-right: 0;
				}

				&.click {
					font-weight: 600;
				}
			}
		}

		.category {
			position: absolute;
			right: 0;
			top: 50%;
			width: 57rpx;
			height: 45rpx;
			padding-left: 11rpx;
			line-height: 45rpx;
			z-index: 10;
			transform: translateY(-50%);

			.iconfont {
				font-size: 35rpx;
			}

			&::before {
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				width: 2rpx;
				height: 28rpx;
				background: linear-gradient(135deg, #FFFFFF 0%, rgba(216, 216, 216, 0) 100%);
				transform: translateY(-50%);
			}
		}

		&.isFixed {
			z-index: 10;
			position: fixed;
			left: 0;
			width: 100%;
		}
	}

	.category_count {
		width: 100%;
		background: #fff;
		padding: 32rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;

		.cate_count {
			.category_item {
				padding: 0 20rpx;
				height: 72rpx;
				text-align: center;
				line-height: 72rpx;
				word-wrap: break-word;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				background-color: #F5F5F5;
				border-radius: 8rpx;
				font-size: 24rpx;

				&.clicks {
					background-color: var(--view-minorColorT);
					color: var(--view-theme);
				}
			}
		}
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .7);
		z-index: 22;
	}

	.scrolled {
		z-index: 99;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		background-color: #fff;

		.longItem,
		.click,
		.category text {
			color: #000 !important;
		}

		.underline {
			background: #000 !important;
		}

		.input,
		.uninput {
			background: rgba(0, 0, 0, 0.22) !important;
		}

		.click {
			&::after {
				background-color: #fff !important;
			}
		}
	}

	.swiperBg {
		z-index: 1;

		.page_swiper {
			position: relative;
			width: 100%;
			height: auto;
			margin: 0 auto;
			border-radius: 15rpx;
			overflow-x: hidden;
			z-index: 20;
			padding: 5rpx 10rpx 0;

			// uni-swiper {
			// 	height: 320rpx;
			// }

			swiper-item {
				border-radius: 15rpx;
			}

			.swiper-item,
			image,
			.acea-row.row-between-wrapper {
				width: 100%;
				height: 100%;
				margin: 0 auto;
				border-radius: 15rpx;
			}

			swiper {
				width: 100%;
				display: block;
			}

			image {
				transform: scale(0.93);
				transition: all 0.6s ease;
			}

			swiper-item.active,
			swiper-item.scalex {
				image {
					transform: scale(1);
				}
			}

			/*用来包裹所有的小圆点  */
			.dots {
				// width: 156rpx;
				// height: 36rpx;
				display: flex;
				flex-direction: row;
				position: absolute;
				right: 20rpx;
				left: 20rpx;
				bottom: 23rpx;
			}

			/*未选中时的小圆点样式 */
			.dot1 {
				.dot {
					width: 12rpx;
					height: 12rpx;
					border-radius: 6rpx;
					margin-right: 16rpx;
					background-color: rgba(0, 0, 0, 0.1);

					&:last-child {
						margin-right: 0;
					}

					/*选中以后的小圆点样式  */
					&.active {
						background: #E93323;
					}
				}
			}

			.dot2 {
				.dot {
					width: 10rpx;
					height: 10rpx;
					border-radius: 5rpx;
					margin-right: 8rpx;
					background-color: rgba(0, 0, 0, 0.1);

					&:last-child {
						margin-right: 0;
					}

					/*选中以后的小圆点样式  */
					&.active {
						width: 18rpx;
						background: #E93323;
					}
				}
			}

			.dot4 {
				.dot {
					width: 20rpx;
					height: 6rpx;
					border-radius: 3rpx;
					margin-right: 10rpx;
					background-color: #DDDDDD;

					&:last-child {
						margin-right: 0;
					}

					/*选中以后的小圆点样式  */
					&.active {
						background: #E93323;
					}
				}
			}

			.dot3 {
				.dot {
					height: 6rpx;
					border-radius: 3rpx;
					margin-right: 10rpx;
					background-color: rgba(0, 0, 0, 0.1);

					&:last-child {
						margin-right: 0;
					}

					/*选中以后的小圆点样式  */
					.active {
						height: 6rpx;
						border-radius: 3rpx;
						background: #E93323;
					}
				}
			}
		}
	}

	::v-deep .dot0 .uni-swiper-dots-horizontal {
		left: 10%;
	}

	::v-deep .dot1 .uni-swiper-dots-horizontal {
		left: 50%;
	}

	::v-deep .dot2 .uni-swiper-dots-horizontal {
		left: 90%;
	}
</style>