H5_module/template/recommend/recommend.vue

<template>
	<view>
		<!--components/recommend/recommend.wxml-->
		<template name="recommend">
			<view :class="recommendTemplate.theme==2?'pdlr30':''" v-if="recommendTemplate&&recommendTemplate.state==0&&pageList.products.length>0">
				<view  class="jishida head">
					<!-- <view class="title pdlr20" wx:if="{{!recommendCon}}">推荐产品 -->
					<block v-if="recommendTemplate.titleType==1">
						<view class="titleNav ddflex">{{recommendTemplate.titleCon}}
							<!-- <text>{{about.timely_service_deadline ? about.timely_service_deadline : ''}}</text> -->
							<navigator class="ddflex" :url="'/product/list/list?title=' + recommendTemplate.titleCon + '&attr=Recommend' + web" hover-class="none">
								<text>全部</text>
								<image class="more" src="../../static/pages/images/more.png"></image>
							</navigator>
						</view>
						<!-- <image wx:else src="recommendTemplate.titleCon"></image> -->
						<scroll-view scroll-x="true" class="tab dflex" :style="recommendTemplate.theme==2?'':'margin-bottom:25rpx'">
							<navigator :url="'/product/list/list?title=' + recommendTemplate.titleCon + '&attr=Recommend' + web" hover-class="none"
							 class="li active">{{recommendTemplate.titleCon}}</navigator>
							<block v-for="(item, index) in categoryList[0]" :key="index">
								<navigator :url="'/product/list/list?id=' + item.id + '&title=' + item.title + '' + web" hover-class="none"
								 class="li" v-if="index < 3">
									{{item.title}}
								</navigator>
							</block>
						</scroll-view>
					</block>
					<block v-if="recommendTemplate.titleType==2">
						<navigator :url="'/product/list/list?title=' + recommendTemplate.titleSubtitle + '&attr=Recommend' + web"
						 hover-class="none">
							<image lazy-load="true" :src="recommendTemplate.titleCon  + '?x-oss-process=style/w750-auto'" mode="widthFix"
							 class="imgtit"></image>
						</navigator>
					</block>
					<view :class="recommendTemplate.theme==2?'':' pdlr30'">
						<goodsList :pageList="pageList" :about="about" :merchant="web"></goodsList>
					</view>
					<!-- <view class="nomore dflex" wx:if="{{hasmore}}">亲，没有更多了</view> -->
				</view>

			</view>
		</template>
	</view>
</template>

<script>
	const route = require("../../utils/route");
	const app = getApp();
	const req = require("../../utils/request.js"); // components/recommend/recommend.js
	import goodsList from "../../components/goodsList/goodsList";
	export default {
		data() {
			return {

			};
		},

		components: {
			goodsList
		},
		props: {
			pageList: Object,  //{backgroundColor:背景颜色,displayStyle: 样式模板,lineNumber:每行几个,products:产品列表}
			web: String,//地址跳转
			url: String,//地址跳转
			recommendTemplate: Object, //推荐后台配置
			about: Object, //参数配置
			categoryList:Array //分类列表

		},
		mounted(){
			// console.log(this.categoryList)
		},
		watch: {},
		methods: {
			getRqeDatas() {
				let that = this; //推荐产品

				let recommend = that.homeTemplate.filter(it => it.module == that.templateType.module_recommend);

				if (recommend && recommend.length > 0 && recommend[0].state == 0) {
					that.setData({
						recommendTemplate: recommend[0]
					});
					// console.log(this.recommendTemplate);
					this.getPageList();
				}
			},

			getPageList() {
				//Recommend
				let that = this; // 类型:1 普通商品 2 社区团购订单 3 秒杀订单 4 拼团订单 5 及时达订单 6 新客特价 7 优惠砍价

				if (this.merchant && this.merchant.type == 5 || this.shopId && this.merchantId) {
					let from = {
						page: that.page,
						limit: that.recommendTemplate.number,
						type: 1,
						merchantId: this.merchant.merchantDTO.id,
						sid: this.merchant.id,
						attr: 'Recommend'
					};
					if (this.shopId && this.merchantId) from.merchantId = this.merchantId, from.sid = this.shopId;
					route.getShopeList(from, data => {
						if (data && data.length >= 10) that.isLoad = true;
						if (that.page > 1) data = that.pageList.concat(data);
						// console.log(data);
						that.setData({
							pageList: data,
							hasmore: data && data.length > 0
						});
					});
				}

				if (this.merchant && this.merchant.type != 5) {
					route.getProductList({
						page: that.page,
						limit: that.recommendTemplate.number,
						attr: 'Recommend'
					}, res => {
						if (res && res.length >= 10) that.isLoad = true;
						if (that.page > 1) res = that.pageList.concat(res);
						that.setData({
							pageList: res,
							hasmore: res && res.length > 0
						});
					});
				}
			},

			toDetail(e) {
				// let id = e.currentTarget.dataset.id;
				// app.openPage("product/detail/detail?id=" + id + '&&hideShop=' + false)
				let id = e.currentTarget.dataset.id;
				let merchantId = e.currentTarget.dataset.merchant;
				let shopId = e.currentTarget.dataset.shopid;

				if (!shopId) {
					app.globalData.openPage("product/detail/detail?id=" + id + "&merchantId=" + merchantId);
				} else {
					app.globalData.openPage("product/detail/detail?id=" + id + "&merchantId=" + merchantId + "&shopId=" + shopId);
				}
			},

			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 "./recommend.css";
</style>