CBB3/pages/merchant/index.vue

<style lang="scss">
	.app-body{
		padding: 20rpx 0;
	}
	.top-info{
		background: #fff;
		padding: 20rpx;
		.merchant-info{
			border-bottom: 1px solid #F1F1F1;
			padding-bottom: 20rpx;
			.img{
				width: 80px;
				height: 80px;
				border-radius: 8rpx;
			}
			.info{
				margin-left: 20rpx;
				.title{
					font-weight: bold;
					font-size: 36rpx;
					color: #000000;
				}
				.dm{
					image{width: 20rpx;height: 28rpx;margin-right: 8rpx}
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
					margin-top: 40rpx;
				}
			}
		}
		
		.top-foot{
			padding: 20rpx 0;
			position: relative;
			.left{
				.address{
					font-weight: bold;
					font-size: 24rpx;
					color: #101010;
				}
				.business{
					font-size: 24rpx;
					color: #666666;
					margin-top: 10rpx;
				}
			}
			
			.right{
				.wline{
					margin: 0px 24rpx;
					height: 40rpx;
					width: 1px;
					background: #eee;
				}
				.witem{
					image{
						width: 46rpx;
						height: 46rpx;
					}
					
					.text{
						font-size: 12px;
						color: #666666;
					}
				}
			}
		}
		
		
	}


	.pannel{
		background: #fff;
		margin-top: 20rpx;
		padding: 40rpx;
		padding-bottom: 20rpx;
		.title{
			font-weight: bold;
			font-size: 30rpx;
			color: #464646;
		}
		.items{
			margin-top: 20rpx;
			.item{
				width: calc(50% - 10rpx);
				margin-right: 10rpx;
				margin-left: 0;
				margin-bottom: 10rpx;
				&:nth-child(2n) {
					margin-left: 10rpx;
					margin-right: 0;
				}
				image{
					width: 100%;
					height: 240rpx;
				}
			}
		}
	}
	
	.foot{
		position:fixed;
		bottom: 0;
		width: 100%;
		background: #fff;
		height: 120rpx;
		box-shadow: 0px 0px 20px 0px rgba(50,50,52,0.06);
		.sbtn{
			width: 40vw;
			height: 80rpx;
			background: linear-gradient(180deg, #FFA30B, #FFD158);
			box-shadow: 0px 4rpx 14rpx 4rpx rgba(255,164,13,0.48);
			border-radius: 40rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			margin-right: 3vw;
		}
		
		.sbtn2{
			width: 40vw;
			height: 80rpx;
			background: linear-gradient(180deg, #FF6223, #FFAB60);
			box-shadow: 0px 4rpx 14rpx 4rpx rgba(255,111,46,0.48);
			border-radius: 40rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			margin-left: 3vw;
		}
	}

</style>
<template>
	<view class="app-body">
		<view class="top-info">
			<view class="merchant-info fx-r">
				<image class="img" :src="data.logo" mode="aspectFill"></image>
				<view class="info">
					<view class="title">{{  data.name || "" }}</view>
					<view class="dm fx-r fx-bc">
						<image src="/static/img/shop-small-location.png"></image>
						距离{{data.dis_km  || '无' }}
					</view>
				</view>
			</view>
			
			
			
			<view class="top-foot fx-r fx-bc fx-ac">
				<view class="left">
					<view class="address">地址:{{ data.address || "-无-" }}</view>
					<view class="business">营业时间:{{ data.business || "-" }}</view>
				</view>
				<view class="fx-g1"></view>
				<view class="right fx-r fx-bc">
					<view class="witem fx-h fx-bc fx-ac" @tap="tapTel(data)">
						<image src="/static/img/shop-tel.png"></image>
						<view class="text">电话</view>
					</view>
					
					<view class="wline"></view>
					
					<view class="witem fx-h fx-bc fx-ac" @tap="tapLbs(data)">
						<image src="/static/img/shop-location.png"></image>
						<view class="text">导航</view>
					</view>
				</view>
				
				
			</view>
			
		</view>
		
		<view class="pannel">
			<view class="title">门头照片</view>
			<view class="items fx-r">
				<view class="item " v-for="(item,index) in data.imgs">
					<image mode="aspectFill" :src="item" @tap="tapImg(data.imgs,index)"></image>
				</view>
				
				<view class="fx-h fx-bc fx-ac" style="width: 100%;" v-if="data.imgs.length == 0">
					<image src="/static/img/no-empty.png" style="width: 40vw; height: 40vw;"></image>
				</view>
			</view>
		</view>
		
		
		<view class="pannel">
			<view class="title">店门图片</view>
			
			<view class="items fx-r">
				<view class="item " v-for="(item,index) in data.content_imgs">
					<image mode="aspectFill" :src="item" @tap="tapImg(data.content_imgs,index)"></image>
				</view>
				<view class="fx-h fx-bc fx-ac" style="width: 100%;" v-if="data.content_imgs.length == 0">
					<image src="/static/img/no-empty.png" style="width: 40vw; height: 40vw;"></image>
				</view>
			</view>
			
		</view>
		
		
		<view style="height: 120rpx;"></view>
		
		<view class="foot fx-r fx-bc fx-ac">
			<view class="sbtn" @tap="tapTel(data)">联系商家</view>
			<view class="sbtn2" @tap="tapLbs(data)">导航到店</view>
		</view>
		
	</view>
	
</template>

<script>
	import {mapState,mapMutations } from 'vuex';
	export default {
		...mapState(['user','lbs']),
		data() {
		    return {
				data 		  : {
					imgs : [],
					content_imgs : []
				},
				id			  : 0,
				isShow		  : false
		    }
		}, 
		onLoad(options) {
			this.id = options.id || 0;
			this.initView();
		},
			 
		methods: {
			...mapMutations(['checkUserLogin']),
			/**
			 * 加载基础配置
			 */
			initView:function(){
				let post = {};
				post.id = this.id;
				if(this.lbs != null) {
					post.lat = this.utils.isDefine(this.lbs.latitude) ? this.lbs.latitude : 0 ;
					post.lng = this.utils.isDefine(this.lbs.longitude) ? this.lbs.longitude : 0 ;
				}
				
				uni.showLoading({ title: '获取数据中..' });
				this
					.request
					.post("merchantItem",post)
					.then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							this.data = res.data;
						} else {
							this.utils.Tip(res.msg);
						}
					})
					.catch((res)=>{
						console.log(res);
						uni.hideLoading();
						uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
					});
			},
			
			/**
			 * 打开详情
			 * @param {Object} type
			 * @param {Object} index
			 */
			tapImg:function(ImgAr,index){
				uni.previewImage({
					current:index,
					urls:ImgAr
				});
			},
			
			/**
				 * 拨打电话
				 */
				tapTel:function(item){
					if(item.tel == null) {
						this.utils.showAlert({
							title:"系统提示",
							content:"暂无联系方式"
						});
						return;
					}
					const info =  uni.getSystemInfoSync();
					if(info.platform == 'android'){
						uni.showModal({
							content: "确认拨打" + item.tel,
							confirmText: "确定",
							cancelText: "取消",
						  		success:function(res){
						  			if(res.confirm){
										this.$store.dispatch('permission/requestPermissions', 'CALL_PHONE').then(res => {
											if(res !== 1) return;
											uni.makePhoneCall({
											   phoneNumber: item.tel,
											});
										});
						  			}
						  		}
						});
					} else {
						uni.makePhoneCall({
						   phoneNumber: item.tel,
						});
					}
				},
				tapLbs:function(item){
					uni.openLocation({
						latitude: Number(item.lat),
						longitude: Number(item.lng),
						name: item.name,
						address: item.address,
						scale: 12,
						success: function() {
							console.log('success');
						},
						fail: function(res) {
							
						},
					})
				},
			
			
	},
}
</script>