H5_module/template/hot/hot.vue

<template>
	<view>
		<!--components/selected/selected.wxml-->
		<template name="hot">
			<view :class="hotTemplate.theme==2?'pdlr30':''"
				v-if="hotTemplate&&hotTemplate.state==0&&hotList.products.length > 0">
				<view class="mt20 r10">
					<navigator class="head" hover-class="none"
						:url="'/product/list/list?categoryId=1&title=热门爆款&attr=sell_well' + web">
						<view class="titleNav dflex" v-if="hotTemplate.titleType==1">
							{{hotTemplate.titleCon}}
							<image src="/static/pages/images/more.png" class="more"></image>
						</view>
						<image lazy-load="true" v-if="hotTemplate.titleType==2"
							:src="hotTemplate.titleCon + '?x-oss-process=style/w750-auto'" mode="widthFix"
							class="imgtit"></image>
					</navigator>

					<!-- <navigator url="/product/list/list?categoryId=1&title={{chosenTemplate.titleCon}}" hover-class="none" class="title dflex">{{chosenTemplate.titleCon ? chosenTemplate.titleCon : '精选'}}
			<image src="/pages/images/more.png" class="more"></image>
		</navigator> -->
					<!-- 			<view class="jingxuan dflex pdlr20">
				<block v-for="(item, index) in boutiqueList" :key="index">
					<navigator :url="'/product/detail/detail?id=' + item.id + '' + (merchant.type==5?web:url)" hover-class="none" class="li">
						<image lazy-load="true" :src="item.pic + '?x-oss-process=style/w210'" mode="aspectFit"></image>
						<view class="name">{{item.title}}</view>
						<view class="price">
							￥<text>{{about.show_membership_price==1&&item.actualPrice<item.salePrice?item.actualPrice:item.salePrice}}<>
							</text>undefined</tag>
							</text>undefined</tag>
						</text></text></view>
					</navigator>
				</block>
			</view> -->
					<view :class="hotTemplate.theme==2?'':'pdlr30'">
						<goodsList :pageList="hotList" :about="about" :merchant="web"></goodsList>
					</view>
				</view>
			</view>

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

<script>
	const route = require("../../utils/route"); // components/selected/selected.js
	import goodsList from "../../components/goodsList/goodsList";
	export default {
		data() {
			return {
				// boutiqueList: {},
				// chosenTemplate: {}
			};
		},

		components: {
			goodsList
		},
		props: {
			hotList:Object,  //{backgroundColor:背景颜色,displayStyle: 样式模板,lineNumber:每行几个,products:产品列表}
			about: Object, //参数配置， 是否显示会员价
			web: String, //路由跳转
			url: String, //路由跳转字符串
			hotTemplate:Object, //精选后台配置
			// homeTemplate: Array,
			// templateType: Object,
			// merchant:Object
		},
		watch: {

		},
		mounted() { // this.init()
			// console.log(this.boutiqueLis,this.chosenTemplate,this.merchant)
			// this.getRqeDatas()
		},
		methods: {
			getRqeDatas() {
				let that = this; //精选
				let hot = that.homeTemplate.filter(it => it.module == that.templateType.module_hot_money);

				if (hot && hot.length > 0 && hot[0].state == 0) {
					that.setData({
						hotTemplate: hot[0]
					});
					this.getHotList(hot[0]);
				}
			},

			getHotList(hotTemplate) {
				if (this.merchant && this.merchant.type == 5 || this.shopId && this.merchantId) {
					let from = {
						page: this.page,
						limit: hotTemplate.number,
						type: 1,
						merchantId: this.merchant.merchantDTO.id,
						sid: this.merchant.id,
						attr: 'news'
					};
					if (this.shopId && this.merchantId) from.merchantId = this.merchantId, from.sid = this.shopId;
					route.getShopeList(from, res => {
						res = {
							displayStyle: hotTemplate.theme,
							lineNumber: hotTemplate.lineNumber,
							products: res
						};
						this.setData({
							hotList: res
						});
					});
				}

				if (this.merchant && this.merchant.type != 5) {
					let from = {
						page: 1,
						limit: hotTemplate.number,
						merchantId: this.merchant.id
					};
					if (hotTemplate.content != "") {
						from.contentId = hotTemplate.contentId;
					} else {
						from.attr = 'news';
					}
					route.getProductList(from, res => {
						res = {
							displayStyle: hotTemplate.theme,
							lineNumber: hotTemplate.lineNumber,
							products: res
						};
						this.setData({
							hotList: res
						});
					});
				}
			}

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