w-front-end / activityAds · Files

<template>
	<div class="shop-box">
		
		<!-- H5唤起App组件 -->
		<call-app-box ref="callApp" v-if="!isCNLive.value"  :style="'padding-top: ' + ($parent.top.value) + 'px;'"
            :callApps="$parent.callApps">
        </call-app-box>

		<!-- 顶部返回 -->
		<back-box v-show="isCNLive.value && loaded && isShow" :style="'padding-top: ' + (10 + $parent.top.value) + 'px; background-color: rgba(255, 255, 255, ' + opacity + ');'"
			:backs="backs"
			:params="$route.query">
		</back-box>

		<!-- 页面标题，APP内才显示 -->
		<!-- <div class="title-box" :style="'top: ' + (14 + $parent.top.value) + 'px; pointer-events: none;'" v-if="isCNLive.value">
			{{title}}
		</div> -->
		
		<!-- 页头图片 -->
		<index-swiper v-if="swipers"
			:swipers="swipers"
			:funcs="bannerFuncs">
		</index-swiper>
		
		<!-- 内容区块 -->
		<div class="content">

			<index-sub-menu  v-if="subImgMenu"
				:subImgMenu="subImgMenu"
				:funcs="imageBoxFuncs">
			</index-sub-menu>

			<!-- 循环展示各类广告 -->
			<div v-for="item in ads" :key="item.id">
			
				<!-- 单图广告位 -->
				<index-single-image-box class="_block" v-if="item.type=='singleImageBoxs'"
					:image=item.data
					:funcs="imageBoxFuncs">
				</index-single-image-box>
				
				<!-- 推广广告位 -->
				<index-image-box class="block" v-if="item.type=='imageBoxs'"
					:imageBoxs=item.data
					:funcs="imageBoxFuncs">
				</index-image-box>
				
				<!-- 横版视频 -->
				<index-video-box-w class="block" v-if="item.type=='videoBoxsW'"
					:videoBoxs=item.data>
				</index-video-box-w>
				
				<!-- 滚动列表 -->
				<index-goods-box class="block" v-if="item.type=='goodsBoxs'"
					:goodsBoxs=item.data>
				</index-goods-box>
			</div>

			<!-- 商品推荐 -->
			<index-goods-header :goodsHeaderBoxs="goodsHeaderBoxs">

				<!-- 列表 -->
				<div class="scroll-box1" v-infinite-scroll="getShopRecommendGoods" infinite-scroll-disabled="loading" infinite-scroll-distance="distance">
					<div class="box">
						
						<!-- 商品列表 -->
						<index-goods-list
							:goodsLists="goodsLists"
							:funcs="goodsListsFuncs"
							:noBg="goodsListsNoBg">
						</index-goods-list>
					</div>
				</div>
			</index-goods-header>
		</div>
	</div>
</template>

<script>

	// 引入组件
	import Vue from "vue";
    import { Indicator } from 'mint-ui';
    import { Toast } from 'vant';
	import callAppBox from "@/components/callAppBox/callAppBox";
	import backBox from "@/components/backBox/backBox";
	import indexSwiper from "@/components/shopSwiper/swiper";
	import indexSingleImageBox from "@/components/shopImageBox2/imageBox_1";
	import indexImageBox from "@/components/shopImageBox/imageBox";
	import indexSubMenu from "@/components/shopSubMenu/subMenu"
	import indexVideoBoxW from "@/components/shopVideoBoxW/videoBoxW";
	import indexGoodsBox from "@/components/shopGoodsBox/goodsBox";
	import indexGoodsHeader from "@/components/shopGoodsHeader/goodsHeader";
	import indexGoodsList from "@/components/shopGoodsList_2/goodsList";
	
	Vue.use(Toast).use(Indicator);

	export default {
		data() {
			return {
				title: "",
				loaded: false,
				opacity: 0,
				page: 1,
				loading: false,
                distance: 50,
				backs: {
					back: {
						img: "static/img/icon_nav_back.png",
						func: this.back
					}
				},
				CALL_STATUS: {
					INIT: "init",				// 初始化页面
					LOAD_MORE: "loadMore"		// 加载更多
				},
				swipers: null,
				bannerFuncs: {
					toDetail: this.toDetail
				},
				subImgMenu:null,
				subImgMenuFuncs:{
					toDetail:this.toDetail
				},
				singleImageBoxs:null,
				imageBoxs: null,
				imageBoxFuncs: {
					toDetail: this.toDetail
				},
				videoBoxsW: null,
				goodsBoxs: null,
				goodsHeaderBoxs: null,
				goodsLists: [],
				goodsListsFuncs: {
					toDetail: this.toDetail
				},
				goodsListsNoBg: false,
				tabBars: [],
				timer: null,
				showModals: null,
				callApps: null,
				ads:[],
				isShow:true
			}
		},
		components: {
			callAppBox,
			backBox,
			indexSwiper,
			indexSubMenu,
			indexSingleImageBox,
			indexImageBox,
			indexVideoBoxW,
			indexGoodsBox,
			indexGoodsHeader,
			indexGoodsList
		},
		created() {

			// 设置标题
			this.$set(this, 'title', '活动');
		},
		methods: {
			
			/**
			 * 首页，嵌入好家园App内是返回首页
			 */
			back() {

				// APP内
                if (this.isCNLive.value) {

                    // 调用App，返回按键
                    if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.pop) {

                        // APP内，iOS后退
                        window.webkit.messageHandlers.pop.postMessage({body: {}});
                    } else if (window.obj && window.obj.finish) {

                        // APP内，Android后退
                        window.obj.finish();
                    }
                } else {

                    // 后退
                    window.history.go(-1);
                }
			},
			
			/**
			 * 首页，嵌入好家园App内分享
			 */
			doShare() {
				if (this.isCNLive.value) {

					// 判断分享是否存在，如果存在，调用分享函数
					if (typeof this.$parent.toShare === "function") {

						// 如果有channelName参数，传扩展参数
						let ext = null;

						if(this.$route.query.channelName){
							ext = {
								channelName: this.$route.query.channelName
							}
						}

						this.$parent.toShare(24, this.$route.query.id, ext);
					}
				}
			},
			
			/**
			 * 获取活动首页信息
			 */
			getActivityIndex() {

				// 获取必要参数
				if (this.$route.query.id) {
				
					// 加载中提示
                	Indicator.open('加载中...');
					
					// 请求接口
					this.http("/Api/" + (this.getApiVersion().index) + "/activityAds", {
						id: this.$route.query.id
					}, this.getActivityIndexCallback, {
						method: "POST"
					})
				}
			},

			/**
			 * 获取店铺首页回调
			 * param {res}	[服务器返回数据]
			 * param {ext}		[扩展参数]
			 */
			getActivityIndexCallback(res, ext) {
				
				// 加载完成
                Indicator.close();

				// 返回处理
				if (res.code == 200) {
					
					// 解构数据
					let {data: datas} = res;

					/* 轮播图解构 开始 */
					if(datas.banner && datas.banner.length > 0) {
						this.$set(this, "swipers", {
							options: {
								indicatorDots: false,
								autoplay: false,
								circular: true,
								interval: 5000,
								duration: 500
							},
							list: datas.banner
						});
					}
					/* 轮播图解构 结束 */
					if(datas.nav && datas.nav.length > 0) {
						this.$set(this, "subImgMenu", 
							datas.nav
						);
					}
					/* 图标分类 开始 */

					/* 图标分类 结束 */
					
					/* 循环抽取页面元素，对应放到各个组件 开始 */
					for (let i = 0; i < datas.ads.length; i++) {
						
						// 判断样式类型
						switch (datas.ads[i].style) {

							// 推广广告位
							case "8":
							
								/* 推广广告位 开始 */
								if(datas.ads[i].img.length == 9) {
									this.$set(this, "imageBoxs", datas.ads[i].img);
									this.ads.push({
										type:"imageBoxs",
										data:datas.ads[i].img
									});
								}
								/* 推广广告位 结束 */
								break;
							
							// 横版视频
							case "9":
								
								/* 横版视频 开始 */

								this.$set(this, "videoBoxsW", {
									img: datas.ads[i].simg,
									video: datas.ads[i].video,
									video_img: datas.ads[i].video_img,
									list: datas.ads[i].img,
									funcs: {
										toDetail: this.toDetail
									}
								});

								this.ads.push({
									type:"videoBoxsW",
									data:{
										img: datas.ads[i].simg,
										video: datas.ads[i].video,
										video_img: datas.ads[i].video_img,
										list: datas.ads[i].img,
										funcs: {
											toDetail: this.toDetail
										}
									}
								});

								/* 横版视频 结束 */

								break;
							case "10":
								
								/* 滚动列表 开始 */

								if(datas.ads[i].img.length > 0) {
									this.$set(this, "goodsBoxs", {
										img: datas.ads[i].simg,
										list: datas.ads[i].img,
										funcs: {
											toDetail: this.toDetail
										}
									});

									this.ads.push({
										type:"goodsBoxs",
										data:{
											img: datas.ads[i].simg,
											list: datas.ads[i].img,
											funcs: {
												toDetail: this.toDetail
											}
										}
									});

								}

								/* 滚动列表 结束 */

								break;
							case "12":
							
								/* 单图广告 开始 */
								if(datas.ads[i]) {
									this.$set(this, "singleImageBoxs", {
										img: datas.ads[i].simg,
										list: datas.ads[i].img
									});
									this.ads.push({
										type:"singleImageBoxs",
										data:{
										img: datas.ads[i].simg,
										list: datas.ads[i].img
										}
									});
								}
								/* 单图广告 结束 */
								break;
							
						}
					}
					/* 循环抽取页面元素，对应放到各个组件 结束 */
					
				} else if (res.code == 400) {
					
					// 获取店铺首页出错
					// Toast(res.message);
				} else {
					
					// 获取店铺首页出错
					Toast("获取店铺首页出错");
				}
			},
			
			/**
			 * 获取店铺首页推荐商品列表
			 * @param {object} CALL_STATUS	[何处触发请求]
			 */
			getShopRecommendGoods(CALL_STATUS = this.CALL_STATUS.LOAD_MORE) {

				// 判断必要参数
				if (this.$route.query.id) {
					
					// 设置开始加载
					this.$set(this, "loading", true);

					// 显示加载中提示
					switch (CALL_STATUS) {
						case this.CALL_STATUS.LOAD_MORE:
						
							// 加载中提示
                			Indicator.open('加载中...');
							break;
					}
					
					// 请求接口
					this.http("/Api/" + (this.getApiVersion().index) + "/activityAdsGoodsList", {
						id: this.$route.query.id,
						page: this.page
					}, this.getActivityAdsGoodsCallback, {
						method: "POST",
						CALL_STATUS
					})
				}
			},
			
			/**
			 * 获取推荐商品列表回调
			 * param {res}	[服务器返回数据]
			 * param {ext}		[扩展参数]
			 */
			getActivityAdsGoodsCallback(res, ext) {

				// 隐藏加载中提示
				switch (ext.CALL_STATUS) {
					case this.CALL_STATUS.LOAD_MORE:
					
						// 加载完成
						Indicator.close();
						break;
				}

				// 返回处理
				if (res.code == 200) {
					
					// 解构数据
					let {data: datas} = res;

					// 设置页面标题
					// if (datas.shop.title) {
					// 	this.$set(this, "title", datas.shop.title);
					// }
					
					/* 推荐商品头部图片 开始 */
					// if (datas.shop.recommend_img && (!this.goodsHeaderBoxs || !this.goodsHeaderBoxs.img)) {
						this.$set(this, "goodsHeaderBoxs", {
							// img: "static/img/tuijian.jpg"
							img: "http://sxzg.ys1.cnliveimg.com/82/img/2022/0106/220106133620370_909.png"
						});
					// }
					/* 推荐商品头部图片 结束 */
					
					// 设置是否无背景
					this.$set(this, "goodsListsNoBg", !this.goodsHeaderBoxs);
					
					/* 设置列表数据 开始 */
					switch (ext.CALL_STATUS) {
						case this.CALL_STATUS.INIT:
							// 设置推荐商品列表
							this.$set(this, "goodsLists", datas.list);

							// 设置页码
							this.$set(this, "page", ++this.page);
							break;
						case this.CALL_STATUS.LOAD_MORE:

							// 判断是否有数据
							if (datas.list.length) {
								
								// 添加数据到数组
								this.$set(this, "goodsLists", [...this.goodsLists, ...datas.list]);
								
								// 设置页码
								this.$set(this, "page", ++this.page);

								// 取消Loading中状态，恢复LoadingMore功能
								this.$set(this, "loading", false);
							}
							break;
					}

					/* 设置列表数据 结束 */
					
				} else if (res.code == 400) {
					
					// 获取推荐商品出错
					Toast(res.message);
				} else {
					
					// 获取推荐商品出错
					Toast("获取推荐商品出错");
				}
			},
			
			/**
			 * 跳转详情页
			 * @param {object} goods [商品详情对象]
			 */
			toDetail(goods) {

				// 判断是否有函数
				if (typeof this.$parent.gotoDetail === "function") {
					
					// 判断如果id = 33，是“百元公益”活动，设置页面渠道码
					if (this.$route.query.id == '33') {

						// 添加activityCode参数
						this.$set(this.$route.query, 'activityCode', 'ds_bygy');
					}

					// 调用通用跳转函数
					this.$parent.gotoDetail(goods, this.$route.query);
				}
			}
		},
		head: {
            title () {
                return {
                    inner: this.title
                }
            }
        },
		watch: {

            // 设置页面标题
            title(newVal) {
                if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
                    this.$iFrame.insertIFrame(newVal);
                } else {
                    this.$emit("updateHead");
                }
            }
        },
		mounted() {

			let url=window.location.href;
			if(url.indexOf("target=inside")>=0){
				this.isShow=false
			}else{
				this.isShow=true
			}

			
			if (!this.isCNLive.value) {		// 不在App内
				
				// 隐藏back按钮
				this.$set(this, "backs", null);
			}

			// 判断如果是App内，设置右上角分享按钮
			if (this.isCNLive.value) {
				this.$set(this.backs, "share", {
					img: "static/img/icon_nav_share.png",
					func: this.doShare
				});
			}

			// 获取店铺首页
			this.getActivityIndex();

			// 获取并设置分享参数
            this.$parent.getShareData({
                type: 24,
                id: this.$route.query.id,
                url: ""
			});
			
			
			// 执行完成后再执行，有一些延时加载和延时显示的东西
			this.$nextTick(function() {
				
				// 上下文
				let context = this;
				
				// 延时显示backBox条
				setTimeout(function() {
					context.loaded = true;
				}, 1000);
			});
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/less" lang="less" scoped>
    @import './activities';
</style>