ydd_front/mer_uniapp/pages/activity/small_page/index.vue

<template>
	<view id="home" :style="[pageStyle]" class="smallBox" :data-theme="theme">
		<!-- 首页组合组件 -->
		<homeComb :bgInfo="bgInfo" v-if="showHomeComb && !merId" :dataConfig="homeCombData" @changeTab="changeTab" :isScrolled="isScrolled"
			:navIndex="navIndex" :isSmallPage="isSmallPage"
    ></homeComb>
		<!-- 店铺组合组件 -->
		<merHomeComb  :isSmallPage="isSmallPage" :bgInfo="bgInfo" v-if="showHomeComb && merId" :dataConfig="homeCombData" :isScrolled="isScrolled" :navIndex="navIndex"
			:merId="merId">
		</merHomeComb>
		<!-- 顶部搜索框 -->
		<headerSearch v-if="showHeaderSerch" :isScrolled="isScrolled" :dataConfig="headerSerchCombData" :merId="merId" :isSmallPage="isSmallPage"></headerSearch>
		<!-- 分类导航 -->
		<cateNav v-if="showCateNav" :dataConfig="cateNavData" @changeTab="changeTab"></cateNav>
		<view v-if="navIndex === 0">
			<block v-for="(item, index) in styleConfig" :key="index">
				<merHome v-if="item.name == 'homeStore'" :dataConfig="item" class="tui-skeleton-rect"
					:merchantInfo="merchantAPPInfo" :merId="merId" :isHome="true"></merHome>
				<!-- 新闻简报 -->
				<news v-if="item.name == 'news'" :dataConfig="item"></news>
				<!-- menu -->
				<menus v-if="item.name == 'menus'" :dataConfig="item"></menus>
				<!-- 文章列表 -->
				<articleList v-if="item.name == 'homeArticle'" :dataConfig="item"></articleList>
				<!-- 秒杀 -->
				<seckill-data v-if="item.name == 'seckill'" :dataConfig="item" :merId="merId"></seckill-data>
				<!-- 直播 -->
				<!-- #ifdef MP -->
				<liveBroadcast v-if="item.name == 'liveBroadcast'" :dataConfig="item"></liveBroadcast>
				<!-- #endif -->
				<!-- 优惠券 -->
				<coupon v-if="item.name == 'homeCoupon'" :dataConfig="item" :merId="merId"></coupon>
				<!-- 图片魔方 -->
				<pictureCube v-if="item.name == 'pictureCube'" :dataConfig="item"></pictureCube>
				<!-- 热区 -->
				<hotSpot v-if="item.name == 'homeHotspot'" :dataConfig="item"></hotSpot>
				<!-- 轮播图 -->
				<swiperBg v-if="item.name == 'swiperBg'" :dataConfig="item"></swiperBg>
				<!-- 视频 -->
				<shortVideo v-if="item.name == 'video'" :dataConfig="item"></shortVideo>
				<!-- 商户 -->
				<merchant-list v-if="item.name == 'homeMerchant'" :dataConfig="item"></merchant-list>
				<!-- 辅助线 -->
				<guide v-if="item.name == 'guide'" :dataConfig="item"></guide>
				<!-- 富文本-->
				<rich-text-editor v-if="item.name == 'richTextEditor'" :dataConfig="item"></rich-text-editor>
				<!-- 辅助空白-->
				<blank-page v-if="item.name == 'blankPage'" :dataConfig="item"></blank-page>
				<!-- 标题 -->
				<home-title v-if="item.name == 'titles'" :dataConfig="item"></home-title>
				<!-- 拼团 -->
				<group v-if="item.name == 'group'" :dataConfig="item" :merId="merId"></group>
				<!-- 积分 -->
				<intergralShop v-if="item.name == 'intergral'" :dataConfig="item"></intergralShop>
				<!-- 逛逛 -->
				<discover v-if="item.name == 'homeDiscover'" :dataConfig="item"></discover>
				<!-- 商品列表 -->
				<goodList v-if="item.name == 'goodList'" :dataConfig="item" @detail="goDetail" :merId="merId"></goodList>
				<!-- 选项卡商品列表-->
				<homeTab v-if="item.name == 'homeTab'" :dataConfig="item" @detail="goDetail" :merId="merId"></homeTab>
				<!-- 底部导航-->
				<page-footer v-if="item.name == 'footer'" :dataConfig="item" :isSmallPage="isSmallPage" :merId="merId"></page-footer>
			</block>
		</view>
		<!-- 分类页-->
		<view class="productList" v-if="navIndex > 0 && sortList.length>0">
			<view class="sort acea-row" :class="sortList.length ? '' : 'no_pad'"
				:style="{ marginTop: sortMarTop + 'px' }">
				<navigator hover-class="none"
					:url="'/pages/goods/goods_list/index?cid=' + item.id + '&title=' + item.name" class="item"
					v-for="(item, index) in sortList" :key="index">
					<view class="pictrue">
						<!-- <easy-loadimage :image-src="item.icon" class='slide-image skeleton-rect'>
		          </easy-loadimage> -->
						<image :src="item.icon" class='slide-image tui-skeleton-rect'></image>
					</view>
					<view class="text">{{ item.name }}</view>
				</navigator>
				<view class="item" @click="bindMore()" v-if="sortList.length >= 9">
					<view class="pictrues acea-row row-center-wrapper">
						<text class="iconfont icon-gengduo2"></text>
					</view>
					<view class="text">更多</view>
				</view>
			</view>
		</view>
		<!-- 推荐商品，分类商品列表-->
		<recommend v-if="categoryId>0" ref="recommendIndex" :categoryId='categoryId' :isShowTitle="isShowTitle"
			@getRecommendLength="getRecommendLength"></recommend>
		<view class='noCommodity' v-if="isNoCommodity&& navIndex > 0">
			<view class='pictrue'>
				<image :src="urlDomain+'crmebimage/presets/noShopper.png'"></image>
			</view>
			<text class="text-ccc">暂无商品</text>
		</view>
		<!-- <view v-if="bottomNavigationIsCustom" class="footerBottom"></view> -->
	</view>
</template>
<script>
	import {
		getDiy,
		getCategoryThird
	} from '@/api/api.js';
	import {
		mapGetters
	} from "vuex";
	import tuiSkeleton from '@/components/base/tui-skeleton.vue';
	import liveBroadcast from '@/components/homeIndex/liveBroadcast';
	import merchantList from '@/components/homeIndex/merchant.vue'
	import homeComb from '@/components/homeIndex/homeComb';
	import merHomeComb from '@/components/homeIndex/merHomeComb.vue';
	import seckillData from "@/components/homeIndex/seckill.vue";
	import couponDialog from "@/components/homeIndex/couponDialog.vue"
	import coupon from "@/components/homeIndex/coupon.vue";
	import menus from "@/components/homeIndex/menus.vue";
	import pictureCube from '@/components/homeIndex/pictureCube'
	import news from '@/components/homeIndex/news'
	import goodList from '@/components/homeIndex/goodList'
	import guide from '@/components/homeIndex/guide';
	import articleList from '@/components/homeIndex/articleList'
	import swiperBg from '@/components/homeIndex/swiperBg'
	import headerSearch from '@/components/homeIndex/headerSearch';
	import cateNav from '@/components/homeIndex/cateNav';
	import richTextEditor from '@/components/homeIndex/richTextEditor';
	import shortVideo from '@/components/homeIndex/video';
	import homeTab from '@/components/homeIndex/homeTab';
	import discover from '@/components/homeIndex/discover';
	import blankPage from '@/components/homeIndex/blankPage';
	import homeTitle from '@/components/homeIndex/title';
	import pageFooter from '@/components/pageFooter/index.vue';
	import recommend from "@/components/base/recommend.vue";
	import group from "@/components/homeIndex/group.vue";
	import intergralShop from "@/components/homeIndex/intergralShop.vue";
	import hotSpot from '@/components/homeIndex/hotSpot.vue';
	import merHome from '@/components/merHome/index.vue'
	import {
		goProductDetail
	} from "../../../libs/order";
	let app = getApp();
	export default {
		data() {
			return {
				urlDomain: this.$Cache.get("imgHost"),
				theme: app.globalData.theme,
				isSmallPage: true, //是否是微页面，true是，false不是
				styleConfig: [],
				bgColor: '',
				bgPic: '',
				bgTabVal: '',
				isFixed: true,
				storeHeight: 0,
				smallPage: false,
				homeCombData: {},
				headerSerchCombData: {},
				sortList: [],
				sortMarTop: 0,
				showCateNav: false, //是否显示分类导航组件
				cateNavData: {}, //分类导航组件数据
				navIndex: 0,
				pageStyle: null,
				cateNavActive: 0,
				categoryId: 0, //分类id
				diyId: 0, //diyid
				isNoCommodity: false,
				showHomeComb: false,
				showHeaderSerch: false,
				domOffsetTop: 50,
				isScrolled: false,
				merId:0,
				bgInfo:{
					colorPicker:'#f5f5f5',
					isBgColor:1,
				},
			}
		},
		components: {
			merchantList,
			homeComb,
			tuiSkeleton,
			seckillData,
			liveBroadcast,
			couponDialog,
			coupon,
			menus,
			pictureCube,
			news,
			goodList,
			articleList,
			swiperBg,
			headerSearch,
			cateNav,
			guide,
			richTextEditor,
			shortVideo,
			homeTab,
			discover,
			blankPage,
			homeTitle,
			pageFooter,
			recommend,
			group,
			intergralShop,
			hotSpot,
			merHomeComb,
			merHome
		},
		computed: mapGetters(['bottomNavigationIsCustom','merchantAPPInfo']),
		onLoad(options) {
			if (options.scene) {
				let value = this.$util.getUrlParams(decodeURIComponent(options.scene));
				if (value.id) this.diyId = Number(value.id);
				if (value.merId) this.merId = Number(value.merId);
			}
			if (options.id) {
				this.diyId = Number(options.id);
			}
			if (options.merId) {
				this.merId = Number(options.merId);
			}
			this.diyData(this.diyId)
		},
		// 滚动监听
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit('scroll');
			if (e.scrollTop > this.domOffsetTop) {
				this.isScrolled = true;
			}
			if (e.scrollTop < this.domOffsetTop) {
				this.$nextTick(() => {
					this.isScrolled = false;
				});
			}
		},
		methods: {
			diyData(id) {
				let that = this;
				that.styleConfig = [];
				uni.showLoading({
					title: '加载中...'
				});
				getDiy(id).then(res => {
					uni.setNavigationBarTitle({
						title: res.data.title
					});
					uni.setNavigationBarColor({
						//必须要16进制小写
						frontColor: res.data.titleColor,
						backgroundColor: res.data.titleBgColor.toString().toLowerCase(),
					})
					let data = res.data;
					that.styleConfig = that.$util.objToArr(res.data.value);
					uni.hideLoading();
					that.styleConfig.forEach((item) => {
						if (item.name == 'tabNav') {
							this.showCateNav = true;
							this.cateNavData = item;
						}
						if (item.name === 'homeComb') {
							that.showHomeComb = true
							that.homeCombData = item;
						}
						if (item.name === 'headerSerch') {
							that.showHeaderSerch = true
							that.headerSerchCombData = item;
						}
					});
					this.bgInfo.isBgColor=data.isBgColor
					this.bgInfo.colorPicker=data.colorPicker
					this.pageStyle = {
						'background-color': data.isBgColor === 1 ? res.data.colorPicker : '',
						'background-image': data.isBgPic === 1 ? `url(${res.data.bgPic})` : '',
						'background-repeat': res.data.bgTabVal === 1 ? 'repeat-y' : 'no-repeat',
						'background-size': res.data.bgTabVal === 2 ? 'cover' : 'contain'
					};
					setTimeout(() => {
						this.isNodes++;
					}, 100);
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
					uni.hideLoading();
				})
			},
			getRecommendLength(e) {
				this.isNoCommodity = e == 0 ? true : false;
			},
			// 分类切换点击
			changeTab(index, item) {
				//type=0微页面，1分类，2首页
				this.cateNavActive = index;
				if (item.type == 1) {
					this.navIndex = 1;
					if (!item.val) {
						this.sortList = [];
						this.categoryId = 0;
						this.$util.Tips({
							title: "请在平台端选择商品分类！确保加载商品分类数据。"
						});
						return;
					} else {
						getCategoryThird(item.val).then(res => {
							this.sortList = res.data;
							// #ifdef H5
							self.sortMarTop = 10;
							// #endif
						});
						this.categoryId = item.val;
						this.isShowTitle = false;
					}
				} else if (item.type == 0) {
					this.navIndex = 0;
					this.isShowTitle = true;
					this.categoryId = 0;
					if (!item.val) {
						return this.$util.Tips({
							title: "请在平台端选择微页面链接！确保加载微页面数据。"
						});
					} else {
						this.styleConfig = [];
						this.diyData(item.val, true);
					}
				} else {
					this.categoryId = 0;
					this.navIndex = 0;
					this.styleConfig = [];
					this.diyData(this.diyId, false);
				}
			},
			// 去商品详情页
			goDetail(item) {
				goProductDetail(item.id, 0, '')
			},
		},
		onReachBottom() {

		},
	}
</script>

<style lang="scss" scoped>
	.smallBox {
		padding-bottom: calc(130rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(130rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}

	.productList {
		background-color: #F5F5F5;
		margin-top: 20rpx;

		.sort {
			width: 710rpx;
			max-height: 380rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 16rpx;
			padding: 0rpx 0rpx 20rpx 0rpx !important;
			flex-wrap: wrap;
			margin: 25rpx auto 0 auto;

			&.no_pad {
				padding: 0;
			}

			.item {
				width: 20%;
				margin-top: 20rpx;
				text-align: center;

				.pictrues {
					width: 90rpx;
					height: 90rpx;
					background: #F5F5F5;
					border-radius: 50%;
					margin: 0 auto;
				}

				.pictrue {
					width: 90rpx;
					height: 90rpx;
					background: #F5F5F5;
					border-radius: 50%;
					margin: 0 auto;
				}

				.slide-image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					overflow: hidden;
				}

				/deep/ .easy-loadimage,
				uni-image,
				.easy-loadimage {
					width: 90rpx;
					height: 90rpx;
					display: inline-block;
				}

				.text {
					color: #272727;
					font-size: 24rpx;
					margin-top: 10rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.productList .list.on {
		background-color: #fff;
		border-top: 1px solid #f6f6f6;
	}

	.productList .list .item {
		width: 345rpx;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;

		.name {
			display: flex;
			align-items: center;

			.name_text {
				display: inline-block;
				max-width: 200rpx;
			}
		}
	}
</style>