xwc/components/shop-item/shop-item.vue

<template>
	<view class="shop-item" :style="{ 'background-image': `url(${item.background})` }">
		<view class="shop-hd flex row-between m-l-20" v-if='lx == 2'>
			<view>
				<view class="flex">
					<u-image width="68rpx" height="68rpx" border-radius="60rpx" :src="item.logo" />
					<view class="white md m-l-20 bold">{{ item.name }}</view>
				</view>
				<router-link :to="{ path: '/bundle_b/pages/nearby_shops/neardetail', query: { id: item.id } }">
					<view class="enter-btn flex row-center bg-white xxs">进店看看 ></view>
				</router-link>
			</view>
			<view>
				<view class="white flex row-center xs m-r-10" v-if="item.distance">
					<u-icon name="map" size="30"></u-icon>
					<text class="m-l-4">距离{{ item.distance }}</text>
				</view>
				<view class="hd-btn" v-if="item.mobile">
					<image src="../../static/my/call.png" mode="" style="margin-right: 15rpx;" @click.stop="tocall()">
					</image>
					<!-- #ifdef H5 -->
					<image src="../../static/my/dh.png" mode=""
						@click.stop="toGaodeMap(item.latitude, item.longitude, item.name)"></image>
					<!-- #endif -->
					<!-- #ifdef MP -->
					<image src="../../static/my/dh.png" mode="" @click.stop="dh(item)"></image>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<image src="../../static/my/dh.png" mode=""
						@click.stop="gomapApp(item.latitude, item.longitude, item.name)"></image>
					<!-- #endif -->
				</view>
				<view class="hd-btn" v-if="!item.mobile">
					<!-- #ifdef H5 -->
					<image src="../../static/my/dh.png" mode=""
						@click.stop="toGaodeMap(item.latitude, item.longitude, item.name)"></image>
					<!-- #endif -->
					<!-- #ifdef MP -->
					<image src="../../static/my/dh.png" mode="" @click.stop="dh(item)"></image>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<image src="../../static/my/dh.png" mode=""
						@click.stop="gomapApp(item.latitude, item.longitude, item.name)"></image>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<view class="shop-hd flex row-between m-l-20" v-if="lx==1">
			<view>
				<view class="flex">
					<u-image width="68rpx" height="68rpx" border-radius="60rpx" :src="item.logo" />
					<view class="white md m-l-20 bold">{{ item.name }}</view>
				</view>
				<router-link :to="{ path: '/pages/store_index/store_index', query: { id: item.id } }">
					<view class="enter-btn flex row-center bg-white xxs">进店看看 ></view>
				</router-link>
			</view>
			<view>
				<!-- <view class="shop-tips white flex row-center xxs">
		    	    {{item.visited_num}}人进店
		    	</view> -->
				<view class="m-t-30 white flex row-center xs m-r-10" v-if="item.distance">
					<u-icon name="map" size="30"></u-icon>
					<text class="m-l-4">距离{{ item.distance }}</text>
				</view>
			</view>
		</view>
		<scroll-view style="white-space: nowrap;" :scroll-x="true" v-if="lx==1">
			<view class="goods"><goods-list width="200rpx" type="row" :list="item.goods_list"></goods-list></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'shop-item',
		props: {
			item: {
				type: Object,
				defalut: () => ({})
			},
			lx: {
				type: String,
				defalut: '2'
			}

		},
		data() {
			return {};
		},
		methods: {
			tocall() {
				let num = this.item.mobile;
				console.log(num);
				uni.makePhoneCall({
					phoneNumber: num //仅为示例
				});
			},
			toGaodeMap() {
				let obj = this;
				window.location.href =
					`https://uri.amap.com/marker?position=${obj.item.longitude},${obj.item.latitude}&name=${obj.item.name}`;
			},
			dh() {
				let obj = this;
				wx.openLocation({
					latitude: obj.item.latitude * 1,
					longitude: obj.item.longitude * 1,
					name: obj.item.name,
					address: obj.item.detailed_address
				});
			},
			gomapApp(latitude, longitude, name) {
				let url = '';
				if (plus.os.name == 'Android') {
					//判断是安卓端
					plus.nativeUI.actionSheet({
							//选择菜单
							title: '选择地图应用',
							cancel: '取消',
							buttons: [{
								title: '腾讯地图'
							}, {
								title: '百度地图'
							}, {
								title: '高德地图'
							}]
						},
						function(e) {
							switch (e.index) {
								//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
								case 1:
									//注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
									url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
									break;
								case 2:
									url =
										`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
									break;
								case 3:
									url =
										`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
									break;
								default:
									break;
							}
							if (url != '') {
								url = encodeURI(url);
								//plus.runtime.openURL(url,function(e){})调起手机APP应用
								plus.runtime.openURL(url, function(e) {
									plus.nativeUI.alert('本机未安装指定的地图应用');
								});
							}
						}
					);
				} else {
					// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
					// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
					//（如urlschemewhitelist:["iosamap","baidumap"]）
					plus.nativeUI.actionSheet({
							title: '选择地图应用',
							cancel: '取消',
							buttons: [{
								title: '腾讯地图'
							}, {
								title: '百度地图'
							}, {
								title: '高德地图'
							}]
						},
						function(e) {
							switch (e.index) {
								case 1:
									url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
									break;
								case 2:
									url =
										`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
									break;
								case 3:
									url =
										`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
									break;
								default:
									break;
							}
							if (url != '') {
								url = encodeURI(url);
								plus.runtime.openURL(url, function(e) {
									plus.nativeUI.alert('本机未安装指定的地图应用');
								});
							}
						}
					);
				}
			}
		}
	};
</script>

<style lang="scss">
	.shop-item {
		padding: 30rpx 0;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		border-radius: 20rpx;
		background-color: #fff;

		.shop-hd {
			.enter-btn {
				height: 48rpx;
				width: 148rpx;
				margin-top: 30rpx;
				border-radius: 50rpx;
			}

			.shop-tips {
				background-color: rgba($color: #000000, $alpha: 0.6);
				border-radius: 50rpx 0rpx 0rpx 50rpx;
				height: 50rpx;
				min-width: 152rpx;
				padding: 0 10rpx;
			}
		}

		.goods {
			padding: 20rpx;
			display: inline-block;
		}
	}

	.hd-btn {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 40rpx 68rpx 0;

		image {
			width: 46rpx;
			height: 46rpx;
		}
	}
</style>