H5_module/template/homecolumn/homecolumn.vue

<template>
	<view>
		<!--components/special/special.wxml-->
		<!-- 专栏 -->
		<template name="homecolumn">
			<view class="column3 ddflex" v-if="homecolumnimg[0][0].length==3">
				<view class="li">
					<image :src="homecolumnimg[0][0][0].picUrl + '?x-oss-process=style/w375'"></image>
				</view>
				<view class="fflex">
					<view class="li">
						<image :src="homecolumnimg[0][0][1].picUrl + '?x-oss-process=style/w375'"></image>
					</view>
					<view class="li">
						<image :src="homecolumnimg[0][0][2].picUrl + '?x-oss-process=style/w375'"></image>
					</view>
				</view>
			</view>
			<view class="column ddflex" v-else>
				<block v-for="(items,indexs) in homecolumnimg" :key="indexs">
				<block v-for="(itemss,indexss) in items" :key="indexss">
					<block v-for="(item,index) in itemss" :key="index">
					<button open-type="share" hover-class="none" class="li" v-if="item.bannerTitle.indexOf('邀请') > -1">
						<image :src="item.picUrl" mode="aspectFill"></image>
					</button>
					<view class="li" @click="jumpUrlColumn(item)" v-else>
						<image :src="item.picUrl" mode="aspectFill"></image>
					</view>
					</block>
				</block>
				</block>
			</view>
			<view v-if="merchantList.length >0">
				<view class="mer-tit ddflex" @click="jumpUrl('merchant/nearby/nearby')">推荐门店<view class="mer-more ddflex">查看更多<image src="../../static/pages/images/rico.png"></image></view></view>
				<view class="mer-list">
					<view class="li ddflex" v-for="(item,index) in merchantList" :key="index" @click="jumpUrl('topic/about/about?id='+item.id)">
						<image :src="item.logo" mode="aspectFill" class="mer-logo"></image>
						<view class="fflex">
							<view class="mer-name ddflex">
								<view class="fflex">
									{{item.title}}
								</view>
								<image :src="picUrlss+'blue/m_map.png'" @click.stop="goNavigation(1,index)" :data-index="index" class="mer-map"></image>
							</view>
							<view class="mer-addr">{{item.address}}</view>
							<view class="yue" v-if="item.range > 0">
								距离<text v-if="item.mDistance || item.range">{{item.mDistance < 1000 ? item.mDistance+'m' : item.range+'km'}}</text>
							</view>
							<view class="mer-label ddflex" v-if="item.label">
								<text v-for="(it,idx) in item.label.split(',')" :key="idx" v-if="idx < 3">{{it}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	// components/special/special.js
	// 专区
	const app = getApp();
	const req = require("../../utils/request.js");

	export default {
		data() {
			return {
				picUrlss: req.public.picUrls
			};
		},

		components: {},
		props: {
			homecolumnimg: Array  ,//首页专区图片
			merchantList: Array,//门店列表
			config: Object
		},
		watch: {},
		mounted() {
			// console.log('首页专区==',this.homecolumnimg[0][0])
			console.log('首页门店==',this.merchantList)
		},
		methods: {
			jumpUrlColumn(item){
				let obj = {
					content: item.bannerContent,
					type: item.bannerType
				}
				app.globalData.clickBanner(obj);
			},
			getRqeDatas() {
				let that = this; //首页专区

				let homecolumn = this.homeTemplate.filter(it => it.module == this.templateType.module_homecolumn);

				if (homecolumn.length > 0 && homecolumn[0].state == 0) {
					let homecolumnimg = homecolumn[0].contentId.split(",");

					if (homecolumnimg[0] != '' && homecolumnimg[1] != '' && homecolumnimg[2] != '') {
						if (homecolumnimg.length == 3) {
							// console.log(homecolumnimg);
							this.setData({
								homecolumnimg: homecolumnimg
							});
						}
					}
				}
			},

			toCoupon() {
				req.isLogin().then(success => {
					if (success) {
						app.globalData.openPage('product/coupon/coupon');
					}
				});
			},
			goNavigation(type,index) {
				let page ={};
				page=this.merchantList[index];
				console.log('pageItem===',page);
				let plugin = requirePlugin('routePlan');
				let key = req.public.mapLBSKEY; //使用在腾讯位置服务申请的key
				let referer = this.config.CONFIG_PROJECT_TITLE; //调用插件的app的名称
				// console.log("名称====" + referer);
				let endPoint = JSON.stringify({
					//终点
					'name': page.title,
					'latitude': page.lat,
					'longitude': page.lng
				});
				var url='plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint;
				console.log('地址=====',url);
				uni.navigateTo({
					url: url
				})
			},
			jumpUrl(url){
				app.globalData.openPage(url)
			}

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