H5_module/pages/topic/topic.vue

<template>
	<!--pages/topic/topic.wxml-->
	<!-- 顶部轮播图 -->
	<view :style="'background-color:' + pageList.backgroundColor + ';'">
		<view :class="' ' + (pageList.displayStyle == '2' ? 'banner2' : 'banner') + ' r20'"
			v-if="bannerList.length > 0">
			<swiper class="swiper" @change="swiperChange" :current="swiperCurrent">
				<block v-for="(item, index) in bannerList" :key="index">
					<swiper-item autoplay="true">
						<image lazy-load="true" :src="item.pic + '?x-oss-process=style/w750-auto'" mode="aspectFit"
							:data-type="item.type" :data-content="item.content"></image>
					</swiper-item>
				</block>
			</swiper>
			<view class="dots dflex">
				<block v-for="(item, index) in bannerList" :key="index">
					<view :class="'dot ' + (index == swiperCurrent ? ' active' : '')" :data-current="index"
						@tap="dotEvent"></view>
				</block>
			</view>
		</view>
		<!-- 商品列表 -->
		<goods-list :pageList="pageList"></goods-list>

		<!-- #ifdef H5 -->
		<wx-share ref="wxshare" />
		<!-- #endif -->
	</view>
</template>

<script>
	// pages/topic/topic.js
	const app = getApp();
	const req = require('../../utils/request.js');
	import goodsList from '../../components/goodsList/goodsList';

	export default {
		data() {
			return {
				picUrlss: req.public.picUrls,
				page: 1,
				pageList: {},
				bannerList: [],
				swiperCurrent: 0,
				isLoad: true,
				hasmore: true,
				Title: '',
				isRuleTrue: false,
				//筛选是否显示
				styletype: 0,
				productId: 0, //专题id
				options: ''
			};
		},

		components: {
			goodsList
		},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			if (options.appId) req.setStorage('appId', options.appId);
			this.options = options;
			uni.showShareMenu({
				menus: ['shareAppMessage']
			});
			// uni.setNavigationBarTitle({
			// 	title: options.title ? options.title : '专题详情'
			// });
			this.setData({
				productId: options.id
			});
			this.getList(options.id);
		},
		onShareAppMessage() {
			return this.onShareMessage();
		},
		onReady() {
			// #ifdef H5
			var that = this;
			//初始化分享内容
			setTimeout(function() {
				var shareContent = that.onShareMessage();
				if (shareContent) {
					shareContent.path = window.location.origin + shareContent.path;
				}
				console.log('分享内容》》》》》', shareContent);
				that.$refs.wxshare.init(shareContent);
			}, 4 * 1000);
			// #endif
		},
		methods: {

			onShareMessage() {
				let path = '';
				let isSolution = '';
				// #ifndef H5
				isSolution = req.env[req.env.NODE_ENV].isSolution;
				// #endif
				// #ifdef H5
				isSolution = false;
				// #endif
				let userInfo = req.getStorage('userInfo');
				if (isSolution) {
					path = '/share/home/index?appId=' + req.getStorage('appId') + '&userId=' + userInfo.id;
				} else {
					path = '/pages/topic/topic?id=' + this.productId + '&appId=' + req.getStorage('appId');
				}
				return {
					title: this.options.title,
					path: path
				}
			},

			//获取商品列表数据
			getList(id) {
				let that = this;
				// console.log("isLoad", that.isLoad);

				if (!that.isLoad) return false;
				that.isLoad = false;
				let form = {
					id: id //searchTitle: that.data.searchTitle,
					//sort: that.data.sort,
					//attr: that.data.attr,
					//categoryId: that.data.categoryId
				};
				let isShowLoading = false;
				this.allShow = false;
				if (!isShowLoading) {
					req.loadIng('加载中');
					isShowLoading = true;
				}
				req.getRequest('/api/special/detail', form, data => {
					// console.log("pageList:", data);
					uni.setNavigationBarTitle({
						title: data.title ? data.title : '专题详情'
					});
					if (data && data.length >= 10) that.isLoad = true;
					if (that.page > 1) data = that.pageList.concat(data);

					if (data) {
						data.products = data.products.map(it => {
							if (it.deliverWay && JSON.parse(it.deliverWay).indexOf(3) != -1) it.isJs =
							true;
							return it;
						});
						// console.log(data)
						that.getBanner(data.bannerGroupId);
						that.setData({
							pageList: data
						});
					}
					if (isShowLoading) {
						uni.hideLoading();
						isShowLoading = false;
					}
				});
				req.postRequest(
					'/api/browse', {
						bindId: id,
						type: 3
					},
					data => {
						// console.log("api/browse", data);
					}
				);
			},

			//获取banner图数据
			getBanner(groupId) {
				let that = this;
				req.getRequest(
					'/api/banner', {
						groupId: groupId
					},
					data => {
						// console.log("banner图数据", data);
						if (data && data.length >= 10) that.isLoad = true;
						if (that.page > 1) data = that.pageList.concat(data);

						if (data && data.length > 0) {
							that.setData({
								bannerList: data
							});
						}
					}
				);
			},

			/**
			 * 轮播切换
			 */
			swiperChange({
				detail
			}) {
				if (detail.source !== 'touch') return;
				this.setData({
					swiperCurrent: detail.current
				});
			}
		}
	};
</script>
<style>
	@import './topic.css';
</style>