H5_module/template/pCategoryList/pCategoryList.vue

<template>
	<view>
		<!--components/pCategoryList/pCategoryList.wxml-->
		<!-- 动态分类产品数据 -->
		<template name="p_list">
			<block v-if="pCategorShow">
				<!-- <view :class="categoryItem.productList.displayStyle==2?'':'bgfff pdlr20'" v-if="categoryItem.productList.products.length>0"> -->
				<view v-for="(categoryItem, index) in pCategoryList" :key="index"
					:class="categoryItem.productList.displayStyle==2?'jishida head pdlr20':'bgfff pdlr20 jishida head'"
					 v-if="categoryItem.productList.products.length>0"
					>
					<view class="titleNav pdlr20" v-if="categoryItem.titleType==1">
						{{categoryItem.titleCon?categoryItem.titleCon:""}}</view>
					<navigator
						:url="'/product/list/list?id=' + categoryItem.contentId + '&title=' + categoryItem.titleSubtitle + '' +web"
						hover-class="none">
						<image lazy-load="true" v-if="categoryItem.titleType==2"
							:src="categoryItem.titleCon+ '?x-oss-process=style/w750-auto'" mode="widthFix"
							class="imgtit"></image>
					</navigator>
					<!-- <view :class="categoryItem.productList.displayStyle==2?' dflex':'dflex pdlr20'"> -->
					<goodsList :pageList="categoryItem.productList" :about="about" :merchant="web"></goodsList>
					<!-- </view> -->

				</view>
				<!-- </view> -->
			</block>
		</template>
	</view>
</template>

<script>
	// components/pCategoryList/pCategoryList.js
	const route = require("../../utils/route");
	const app = getApp();
	const req = require("../../utils/request.js");
	import goodsList from "../../components/goodsList/goodsList";
	export default {
		data() {
			return {
				freshen: true,
				// pCategoryList: [],
				List: [],
				// pCategorShow: false
			};
		},

		components: {
			goodsList
		},
		props: {
			pCategoryList: Array,
			homeTemplate: Array,
			templateType: Object,
			url: String,
			web: String,
			about: Object,
			merchant: Object,
			pCategorShow:Boolean
			
		},
		mounted() {
			// console.log(this.pCategoryList, this.freshen, this.pCategorShow)
			// this.pCategoryList.forEach(it=>{
				
			// })
			// this.getRqeDatas()
			// console.log(this.pCategoryList, this.freshen, this.pCategorShow)
		},
		watch: {

		},
		methods: {
			getRqeDatas() {
				let that = this; //底部推荐列表
				let p_list = that.homeTemplate.filter(it => it.module == that.templateType.module_p_list && it.state == 0);
				that.List = p_list
				if (that.freshen) {
					if (!that.pCategorShow) {
						for (var i = 0; i < that.List.length; i++) {
							// console.log(i)
							that.getPListProduct(that.List[i], i);
						}
					}
					that.freshen = false
				}

			},

			// 动态产品分类
			getPListProduct(pCategory, idx) {
				// console.log(idx)
				let that = this;
				let form = {
					limit: pCategory.number,
					categoryId: pCategory.contentId // isRecommend:1
				};
				form.merchantId = this.merchant.id;
				req.getRequest('/api/product/list', form, data => {
					data = data.map(it => {
						if (it.deliverWay && JSON.parse(it.deliverWay).indexOf(3) != -1) it.isJs = true;
						return it;
					});
					var res = {
						displayStyle: pCategory.theme,
						lineNumber: pCategory.lineNumber,
						products: data
					}
					// console.log(data, that.pCategoryList, idx, that.pCategoryList[idx])
					that.List[idx].productList = res
					// console.log(that.List[idx].productList)
					// if (++idx < that.List.length) {
					// that.getPListProduct(that.List[idx], idx);
					// } else {
					that.setData({
						pCategoryList: that.List,
						
					});
					// console.log("]]]]]]]]]]]]]]]", that.pCategoryList, idx)
					let arr = []
					that.List.forEach(it => {
						if(it.productList){
							arr.push(it)
						}
					})
					if(arr.length==that.List.length){
						that.pCategorShow=true
					}

					// }
				});
			},

			toDetail(e) {
				let id = e.currentTarget.dataset.id;
				let url = e.currentTarget.dataset.url;
				app.globalData.openPage("product/detail/detail?id=" + id +
					url); // app.openPage("product/detail/detail?id=" + id)
			},

			addShopCart(e) {
				let skuId = e.currentTarget.dataset.skuid;
				let id = e.currentTarget.dataset.id;

				let _ts = this;

				let params = {
					skuId: skuId,
					quantity: 1,
					merchantId: this.merchant.id,
					productId: id
				};
				route.addShopCart(params, res => {
					_ts.setData({
						isUpdate: !_ts.isUpdate
					});

					req.msg('加入购物车成功');
				});
			}

		}
	};
</script>
<style>
	@import "./pCategoryList.css";
</style>