pika_shangjia/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">
						<!-- <button open-type="contact" wx:if="{{item.type == 2}}">
						<image src="{{item.pic + '?x-oss-process=style/w750-auto'}}" mode="aspectFit"></image>
					</button>
					<block wx:else> -->
						<image lazy-load="true" :src="item.pic + '?x-oss-process=style/w750-auto'" mode="aspectFit" :data-type="item.type" :data-content="item.content"></image>
						<!-- </block> -->
					</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>
		<view class="quan ddflex" @click="jumpUrl('/product/couponList/index?specialId='+productId)" v-if="couponList.length>0">
			<view class="ddflex fflex">
				<text v-for="(item,index) in couponList" :key="index">{{item.couponTitle}}</text>
			</view>
			<image src="../../static/pages/images/rico_red.png" class="rico"></image>
		</view>

		<!-- 商品列表 -->
		<goods-list :pageList="pageList"></goods-list>

		<!-- 分块版式一 -->
		<!-- <view class="list1" wx:if="{{pageList.displayStyle=='2' && pageList.lineNumber=='1'}}">
		<navigator url="/product/detail/detail?id={{item.id}}" hover-class="none" class="li dflex" wx:for="{{pageList.products}}" wx:key="index">
			<view class="jsdimgs1">
				<image src="{{item.pic+ '?x-oss-process=style/w750-auto'}}" mode="aspectFit" class="liimg"></image>
				<image wx:if="{{item.isTimely}}" src="/pages/images/jishida.png" class="jsdimg1"></image>
			</view>
			<view class="info flex">
				<view class="title">{{item.title}}</view>
				<view class="infos">{{item.brief==null?' ':item.brief}}</view>
				<view class="operate dflex">
					<view class="price dflex">
						￥ <text>{{item.salePrice}}</text>
						<text class="del" wx:if="{{item.marketPrice!=0}}">￥{{item.marketPrice}}</text>
					</view>
					<view class="btn">立即抢购</view>
				</view>
			</view>
		</navigator>
	</view> -->
		<!-- 分块版式二 -->
		<!-- <view class="list2 dflex" wx:if="{{pageList.displayStyle=='2' && pageList.lineNumber=='2'}}">
		<view class="li" wx:for="{{pageList.products}}" wx:key="index">
			<navigator url="/product/detail/detail?id={{item.id}}" hover-class="none">
				<view class="jsdimgs">
					<image src="{{item.pic + '?x-oss-process=style/w375'}}" mode="aspectFit" class="jsdpro"></image>
					<image wx:if="{{item.isTimely}}" src="/pages/images/jishida.png" class="jsdimg"></image>
				</view>
				<view class="jsdinfo">
					<view class="proname">{{item.title}}</view>
					<view class="operate dflex">
						<view class="price proprice">￥<text>{{item.salePrice}}</text><text class="del" wx:if="{{item.marketPrice!=0}}">￥{{item.marketPrice}}</text>
						</view>
						<view class="add-cart">
							<image src="/pages/images/jia.png"></image>
						</view>
					</view>
				</view>
			</navigator>
		</view>
	</view> -->
		<!-- 分块版式三 -->
		<!-- <view class="list3 dflex" wx:if="{{pageList.displayStyle=='2' && pageList.lineNumber=='3'}}">
		<view class="li" wx:for="{{pageList.products}}" wx:key="index">
			<navigator url="/product/detail/detail?id={{item.id}}" hover-class="none">
				<view class="jsdimgs">
					<image src="{{item.pic + '?x-oss-process=style/w210'}}" mode="aspectFit" class="jsdpro"></image>
					<image wx:if="{{item.isTimely}}" src="/pages/images/jishida.png" class="jsdimg1"></image>
				</view>
				<view class="jsdinfo">
					<view class="proname">{{item.title}}</view>
					<view class="operate dflex">
						<view class="price proprice">￥<text>{{item.salePrice}}</text></view>
						<view class="add-cart">
							<image src="/pages/images/jia.png"></image>
						</view>
					</view>
				</view>
			</navigator>
		</view>
	</view> -->
		<!-- 分隔线版式一 -->
		<!-- <view class="list1 list4" wx:if="{{pageList.displayStyle=='1' && pageList.lineNumber=='1'}}">
		<navigator url="/product/detail/detail?id={{item.id}}" hover-class="none" class="li dflex" wx:for="{{pageList.products}}" wx:key="index">
			<image src="{{item.pic+ '?x-oss-process=style/w750-auto'}}" mode="aspectFit" class="liimg"></image>
			<image wx:if="{{item.isTimely}}" src="/pages/images/jishida.png" class="jsdimg1"></image>
			<view class="info flex">
				<view class="title">{{item.title}}</view>
				<view class="infos">品质保证 全场五折</view>
				<view class="operate dflex">
					<view class="price dflex">
						<text>￥</text>{{item.salePrice}}
						<text class="del">¥{{item.marketPrice}}</text>
					</view>
					<view class="btn">立即抢购</view>
				</view>
			</view>
		</navigator>
	</view> -->

		<!-- 分隔线版式二 -->
		<!-- <view class="list2 list5 dflex" wx:if="{{pageList.displayStyle=='1' && pageList.lineNumber=='2'}}">
		<view class="li" wx:for="{{pageList.products}}" wx:key="index">
			<navigator url="/product/detail/detail?id={{item.id}}" hover-class="none">
				<view class="jsdimgs">
					<image src="{{item.pic + '?x-oss-process=style/w375'}}" mode="aspectFit" class="jsdpro"></image>
					<image wx:if="{{item.isTimely}}" src="/pages/images/jishida.png" class="jsdimg1"></image>
				</view>
				<view class="jsdinfo">
					<view class="proname">{{item.title}}</view>
					<view class="operate dflex">
						<view class="price proprice">￥<text>{{item.salePrice}}</text><text class="del">￥{{item.marketPrice}}</text>
						</view>
						<view class="add-cart">
							<image src="/pages/images/jia.png"></image>
						</view>
					</view>
				</view>
			</navigator>
		</view>
	</view> -->
		<!-- 分隔线版式三 -->
		<!-- <view class="list3 list6 dflex" wx:if="{{pageList.displayStyle=='1' && pageList.lineNumber=='3'}}">
		<view class="li" wx:for="{{pageList.products}}" wx:key="index">
			<navigator url="/product/detail/detail?id={{item.id}}" hover-class="none">
				<view class="jsdimgs">
					<image src="{{item.pic + '?x-oss-process=style/w210'}}" mode="aspectFit" class="jsdpro"></image>
					<image wx:if="{{item.isTimely}}" src="/pages/images/jishida.png" class="jsdimg1"></image>
				</view>
				<view class="jsdinfo">
					<view class="proname">{{item.title}}</view>
					<view class="operate dflex">
						<view class="price proprice">￥<text>{{item.salePrice}}</text></view>
						<view class="add-cart">
							<image src="/pages/images/jia.png"></image>
						</view>
					</view>
				</view>
			</navigator>
		</view>
	</view> -->
		<!-- 无分隔线版式 -->
		<!-- <view class="list3 list7 dflex" wx:if="{{styletype==7}}">
  <view class="li">
    <view class="jsdimgs">
      <image :src="picUrlss+'zbgw.png'" mode="aspectFit" class="jsdpro"></image>
      <image src="/pages/images/jishida.png" class="jsdimg"></image>
    </view>
    <view class="jsdinfo">
      <view class="proname">约斯夫儿童型医用退热贴约斯夫儿童型医用退热贴</view>
      <view class="operate dflex">
        <view class="price proprice">￥<text>129.00</text></view>
        <view class="add-cart">
          <image src="/pages/images/jia.png"></image>
        </view>
      </view>
    </view>
  </view>
  <view class="li">
    <view class="jsdimgs">
      <image :src="picUrlss+'zbgw.png'" mode="aspectFit" class="jsdpro"></image>
      <image src="/pages/images/jishida.png" class="jsdimg"></image>
    </view>
    <view class="jsdinfo">
      <view class="proname">约斯夫儿童型医用退热贴约斯夫儿童型医用退热贴</view>
      <view class="operate dflex">
        <view class="price proprice">￥<text>129.00</text></view>
        <view class="add-cart">
          <image src="/pages/images/jia.png"></image>
        </view>
      </view>
    </view>
  </view>
  <view class="li">
    <view class="jsdimgs">
      <image :src="picUrlss+'zbgw.png'" mode="aspectFit" class="jsdpro"></image>
      <image src="/pages/images/jishida.png" class="jsdimg"></image>
    </view>
    <view class="jsdinfo">
      <view class="proname">约斯夫儿童型医用退热贴约斯夫儿童型医用退热贴</view>
      <view class="operate dflex">
        <view class="price proprice">￥<text>129.00</text></view>
        <view class="add-cart">
          <image src="/pages/images/jia.png"></image>
        </view>
      </view>
    </view>
  </view>
</view> -->
	</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:'',
			couponList: []
		};
	},

	components: {
		goodsList
	},
	props: {},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: async function(options) {
		this.options=options;
		uni.showShareMenu({
			menus: ['shareAppMessage']
		});
		// uni.setNavigationBarTitle({
		// 	title: options.title ? options.title : '专题详情'
		// });
		this.setData({
			productId: options.id
		});
		await this.getList(options.id);
		await this.getCateCoupon();
	},
	onShareAppMessage() {
		return{
			title: this.options.title
		}
	},
	methods: {
		//产品分类优惠券
		getCateCoupon(){
			let form = {
				page: 1,
				limit: 3,
				specialId: this.productId,
				bindType: 'use'
			}
			return new Promise((resolve, reject) => {
				req.getRequest('/api/coupon/list',form,data=>{
					this.couponList = data;
				})
			})
		},
		//获取商品列表数据
		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;
			}
			return new Promise((resolve,reject)=>{
				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;
					}
					resolve();
				});
			})
			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
			});
		},
		jumpUrl(url){
			uni.navigateTo({
				url: url
			})
		}
	}
};
</script>
<style>
@import './topic.css';
</style>