xwc/components/index-home/index-home.vue

<template>
	<view class="index-home p-t-20">
		<!-- 轮播 -->
		<ad-swipers :pid="7" height="312rpx" padding="0 30rpx" radius="20rpx"></ad-swipers>

		<bubble-tips top="280rpx" :discharge="isDischarge"></bubble-tips>

		<!-- <view class="power-price">
			<image src="../../static/nl.png" mode="heightFix"></image>
			<view class="cont">
				抵用券价格：<text>{{energyPrice}}</text>
			</view>
		</view> -->

		<view class="content">
			<!-- 导航入口 -->
			<view class="nav  m-t-20" v-if="newNavList.length">
				<swiper :style="'height:' + navSwiperH + 'rpx;'" @change="swiperChange">
					<swiper-item v-for="(items, index) in newNavList" :key="index">
						<view class="nav-list flex flex-wrap">
							<view v-for="(item, index2) in items" :key="index2" class="nav-item m-t-30"
								@tap="menuJump(item)">
								<view class="flex-col col-center">
									<image class="nav-icon m-b-15" :src="item.image"></image>
									<view class="name xs">{{ item.name }}</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="dots" v-if="newNavList.length > 1">
					<view v-for="(item, index) in newNavList" :key="index"
						:class="'dot ' + (index == currentSwiper ? 'active' : '')"></view>
				</view>
			</view>

			<!-- 直播 + 抢购 -->
			<!-- <hua-active-plate></hua-active-plate> -->
			<!-- #ifdef MP-WEIXIN -->
			<view><channel-live class="live radius10" finder-user-name="sphLep2LvoxvsPF"
					:feed-id="fid.feedId"></channel-live></view>
			<view class="xcxzb" @click="navTo('/pages/index/living')">
				<image src="https://shop.xianghuaqi.net.cn/images/living.png" mode=""></image>
			</view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="live radius10" @click="toLive">
				<view class="top d-flex align-items-center">
					<view class="title titColor">新品直播</view>
					<view class="sub">采一手新品</view>
				</view>
				<view class="live-box">
					<view class="status" v-if="appConfig.is_live == 1">直播中</view>
					<view class="status" v-else>未开启直播</view>
					<image src="https://shop.xianghuaqi.net.cn/images/live.png"></image>
					<view class="tips d-flex justify-content-between align-items-center">
						<image src="../../static/home/liveicon.png" mode=""></image>
						<text>享限时折扣</text>
					</view>
					<view class="title">直播看新品</view>
				</view>
			</view>
			<!-- #endif -->

			<!-- 中部广告 -->
			<ad-swipers :pid="8" height="222rpx" :is-swiper="false" padding="20rpx 0 0" radius="20rpx"></ad-swipers>
			<!-- 资讯 -->
			<!-- <router-link v-if="newsList.length" class="" :to="{path: '/pages/news_list/news_list'}">
				<view class="information bg-white flex m-t-20">
					<image class="icon-toutiao" src="/static/images/icon_toutiao.png"></image>
					<text class="gap-line"></text>
					<view class="news flex-1 flex">
						<view class="shade"></view>
						<swiper class="flex-1" autoplay="true" style="height: 76rpx;" vertical="true" circular="true"
							:interval="3000">
							<swiper-item v-for="(item, index) in newsList" :key="index" class="flex">
								<view class="flex-none">
									<u-tag v-if="item.is_new" shape="circle" text="最新" size="mini" type="primary"
										mode="plain" />
								</view>
								<view class="text-swiper m-l-10 line-1">{{item.title }}</view>
							</swiper-item>
						</swiper>
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</router-link> -->
			<!-- 活动专区 -->
			<view class="activity-zone m-t-20" v-if="activityArea.length">
				<view class="flex p-20 row-center xxl bold white">活动专区</view>
				<view class="list flex flex-wrap row-between">
					<router-link
						:to="{ path: '/bundle/pages/activity_detail/activity_detail', query: { name: item.name, title: item.title, id: item.id } }"
						v-for="(item, index) in activityArea" :key="index">
						<view class="item flex bg-white m-b-20">
							<u-image width="120rpx" height="120rpx" :src="item.image"></u-image>
							<view class="m-l-20 flex-1">
								<view class="bold lg line-1 desc">{{ item.name }}</view>
								<view class="primary sm m-t-5 line-1 desc">{{ item.title }}</view>
								<view class="br60 bg-primary white xxs m-t-10 btn">前往查看</view>
							</view>
						</view>
					</router-link>
				</view>
			</view>
			<!-- 秒杀 -->
			<!-- <view class="seckill m-t-20" v-if="seckillGoods.length">
				<home-seckill :list="seckillGoods"></home-seckill>
			</view> -->

			<!-- 附近店铺 -->
			<!-- <view class="m-t-20" v-if="nearbyShop.length">
				<shop-recommend type="nearby-shops" title="附近店铺" :list="nearbyShop"
					url="/bundle_b/pages/nearby_shops/nearby_shops"></shop-recommend>
			</view> -->

			<!-- <view class="m-t-20" v-if="appConfig.index_setting.host_show && hotGoods.length">
				<active-area :list="hotGoods" type="hot" title="热销榜单" url="/pages/active_list/active_list?type=hot"></active-area>
			</view>
			<view class="m-t-20" v-if="appConfig.index_setting.new_show && newGoods.length">
				<active-area :list="newGoods" type="new" title="新品推荐" url="/pages/active_list/active_list?type=new"></active-area>
			</view> -->

			<!-- 种草社区  -->
			<!-- <view class="m-t-20" v-if="appConfig.index_setting.community_show && communityArticle.length">
            	<community-recommend :list="communityArticle" title="种草社区" url="/pages/community/community"></community-recommend>
            </view> -->

			<!-- 店铺 -->
			<!-- <view class="m-t-20" v-if="appConfig.index_setting.shop_show && shopLists.length">
				<shop-recommend type="shop-recommends" title="店铺推荐" :list="shopLists"></shop-recommend>
			</view> -->

			<!-- <view class="m-t-20" v-if="appConfig.index_setting.shop_show && shopRecommend.length" v-for="(item, index) in shopRecommend" :key="index">
				<shop-item :item="item"></shop-item>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		arraySlice,
		menuJump
	} from '@/utils/tools';
	import {
		mapGetters
	} from 'vuex';
	// import hua-active-plate from '@/components/hua-active-plate/hua-active-plate.vue';
	export default {
		props: {
			navList: {
				type: Array,
				default: () => []
			},
			list: {
				type: Array,
				default: () => []
			},
			homeData: {
				type: Object,
				default: () => ({})
			},
			energyPrice: {}
		},
		data() {
			return {
				newNavList: [],
				navSwiperH: '',
				currentSwiper: 0,
				isDischarge: false,
				goodsList: [],
				fid: ''
			};
		},
		mounted() {
			// #ifdef MP-WEIXIN
			wx.getChannelsLiveInfo({
				finderUserName: 'sphLep2LvoxvsPF',
				success: res => {
					this.fid = res;
					console.log(res, 'livingsuccess');
				},
				fail: res => {
					console.log(res, 'failsuccess');
				}
			});

			// #endif
			this.isDischarge = false;
		},
		destroyed() {
			this.isDischarge = true;
		},
		methods: {
			swiperChange(e) {
				console.log(e);
				this.currentSwiper = e.detail.current;
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			},
			menuJump(item) {
				// 解决分类使用redirectTo的问题
				if (item.link == '/pages/goods_cate/goods_cate') {
					uni.navigateTo({
						url: '/pages/goods_cate/goods_cate'
					});
					return;
				}
				if (item.link == '/bundle_b/pages/nearby_shops/nearby_shops') {
					uni.navigateTo({
						url: '/bundle_b/pages/nearby_shops/nearby_shops'
					});
					return;
				}
				if (item.link == '/bundle/pages/integral_mall/integral_mall') {
					uni.switchTab({
						url: '/pages/integral/integral'
					});
				} else {
					menuJump(item);
				}
			},
			toLive() {
				if (this.appConfig.is_live == 1) {
					uni.navigateTo({
						url: '/pages/videos/videos'
					});
				} else {
					uni.showToast({
						title: '未开启直播',
						icon: 'none'
					});
				}
			},
			goLive() {
				console.log(111);
				wx.openChannelsLive({
					finderUserName: 'sphLep2LvoxvsPF',
					feedId: this.fid.feeId,
					nonceId: this.fid.noceId,
					success: res => {
						console.log(res);
					},
					fail: res => {
						console.log(res);
					}
				});
			}
		},
		watch: {
			navList(val) {
				if (val.length <= 5) {
					this.navSwiperH = 200;
				} else if (val.length <= 10) {
					this.navSwiperH = 374;
				} else {
					this.navSwiperH = 520;
				}
				this.newNavList = arraySlice(val, [], 15);
				console.log(this.newNavList, '123456');
			},
			list(val) {
				this.goodsList = val;
			}
		},
		computed: {
			...mapGetters(['appConfig']),
			newsList() {
				return this.homeData.headlines || [];
			},
			nearbyShop() {
				return this.homeData.nearby_shops || [];
			},
			hotGoods() {
				return this.homeData.hots || [];
			},
			newGoods() {
				return this.homeData.news || [];
			},
			communityArticle() {
				return this.homeData.community_article || [];
			},
			activityList() {
				return this.homeData.activity_area || [];
			},
			shopRecommend() {
				return this.homeData.shop_recommend || [];
			},
			shopLists() {
				return this.homeData.shop_lists || [];
			},
			seckillGoods() {
				return this.homeData.seckill_goods || [];
			},
			activityArea() {
				return this.homeData.activity_area || [];
			}
		}
	};
</script>

<style lang="scss" scoped>
	.index-home {
		.power-price {
			position: relative;
			margin: 20rpx 30rpx;
			background-color: #fff !important;
			display: flex;
			padding: 16rpx 24rpx;
			box-sizing: border-box;
			align-items: center;
			border-radius: 8rpx;

			image {
				height: 38rpx;
				margin-right: 20rpx;
			}

			.cont {
				font-size: 28rpx;
				color: #040404;
				flex: 1;
				position: relative;
				z-index: 10;

				text {
					color: #f73e33;
				}
			}
		}

		.content {
			padding: 0 30rpx 20rpx;

			.nav {
				position: relative;
				border-radius: 20rpx;

				.nav-item {
					width: 25%;

					.nav-icon {
						width: 82rpx;
						height: 82rpx;
					}
				}

				.dots {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 20rpx;
					display: flex;

					.dot {
						width: 10rpx;
						height: 6rpx;
						border-radius: 6rpx;
						margin-right: 10rpx;
						background-color: rgba(255, 44, 60, 0.4);

						&.active {
							width: 20rpx;
							background-color: $-color-primary;
						}
					}
				}
			}

			.information {
				height: 76rpx;
				box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);
				padding: 0 20rpx;
				border-radius: 20rpx;

				.news {
					position: relative;

					.shade {
						position: absolute;
						width: 100%;
						height: 100%;
						z-index: 100;
					}
				}

				.icon-toutiao {
					width: 114rpx;
					height: 34rpx;
				}

				.gap-line {
					height: 28rpx;
					width: 1px;
					background-color: #dcdddc;
					margin: 0 30rpx;
				}
			}

			.title-iamge {
				width: 200rpx;
				height: 100rpx;
			}

			.activity-zone {
				background-image: url(../../static/images/bg_activity_home.png);
				background-size: 100% auto;
				padding: 0 15rpx;
				border-radius: 14rpx;

				.item {
					border-radius: 14rpx;
					width: 324rpx;
					padding: 20rpx 16rpx;

					.desc {
						width: 160rpx;
					}

					.btn {
						display: inline-block;
						padding: 2rpx 20rpx;
					}
				}
			}
		}
	}

	.live {
		width: 100%;
		box-sizing: border-box;
		margin: 20rpx auto;
		position: relative;

		.status {
			position: absolute;
			right: 10rpx;
			top: 20rpx;
			z-index: 98;
			background: #f8352b;
			color: #fff;
			font-size: 28rpx;
			padding: 5rpx 10rpx;
		}

		.top {
			position: absolute;
			top: 20rpx;
			left: 16rpx;
			z-index: 98;
			height: 44rpx;

			.title {
				font-weight: 700;
			}

			.sub {
				font-size: 24rpx;
				color: #616161;
				margin-left: 10rpx;
			}
		}

		.live-box {
			width: 100%;
			height: 340rpx;
			position: relative;
			margin: 10rpx auto 0;

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

			.tips {
				position: absolute;
				bottom: 60rpx;
				left: 14rpx;
				padding: 0 10rpx;
				height: 34rpx;
				background: linear-gradient(142deg, #f16d60 0%, #f8352b 100%);
				border-radius: 4rpx;

				image {
					width: 22rpx;
					height: 16rpx;
					margin-right: 4rpx;
				}

				text {
					color: #fff;
					font-size: 20rpx;
				}
			}

			.title {
				position: absolute;
				bottom: 20rpx;
				left: 14rpx;
				color: #fff;
				font-size: 24rpx;
			}
		}

		.goods {
			position: relative;
			width: 146rpx;
			height: 126rpx;

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

			.name {
				position: absolute;
				color: #f8352b;
				font-size: 20rpx;
				padding: 2rpx 4rpx;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				box-sizing: border-box;
				background-color: #ffe4e3;
				border-radius: 16rpx;
				text-align: center;
				font-weight: 500;
			}
		}
	}

	.xcxzb {
		margin: 40rpx auto;
		width: 690rpx;
		height: 180rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>