dbred/pages/share/card.vue

<template>
	<view class="center">
		<view class="bg"><image class="imgBox" src="../../static/img/test_bg.png" mode="scaleToFill"></image></view>
		<view class="top flex">
			<image src="../../static/img/top_bg.png" mode="aspectFill"></image>
			<view class="china-font">东宝区红十字会</view>
			<view class="english-font">Red Cross Society of Dongbao District Branch</view>
			<view class="fgx"></view>
		</view>
		<view class="buttom flex">
			<view class="item flex">
				<image class="home_img" src="../../static/img/test_home.png" mode="aspectFill"></image>
				<view class="text"><text>荆门市东宝区工业园<br/>新台西路10号</text></view>
			</view>
			<view class="item flex">
				<image class="home_img" src="../../static/img/test_phone.png" mode="aspectFill"></image>
				<!-- #ifdef H5 -->
				<view class="text"><text class="text1">0724-2382815</text></view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<view class="text" @click="uni.makePhoneCall({phoneNumber: '0724-2382815'})"><text>0724-2382815</text></view>
				<!-- #endif -->
			</view>
			<!-- <view class="item flex">
				<image class="home_img" src="../../static/img/test_mail.png" mode="aspectFill"></image>
				<view class="text"><text>hhshszh20210909@126.com</text></view>
			</view> -->
			<view class="map">
				<!-- <image class="map-box" src="../../static/icon/erweima.jpg"></image> -->
				<map class="map-box" id="map" :markers="markers" :scale="scale" :latitude="latitude"
					:longitude="longitude" ref="map" :show-location="false"></map>
				<view class="map-font flex">
					<view class="font-left">东宝区红十字会</view>
					<view @click="navigation()" class="font-right"><image src="../../static/img/btn.png" mode="aspectFill"></image></view>
				</view>
			</view>
			<!-- <view class="qrcode">
				<image src="../../static/images/qrcode.jpg" mode="aspectFill"></image>
			</view> -->
		</view>
		<uni-popup ref="popup2" type="bottom" @click="close">
			<view class="popup_row">
				<view class="rows">
					<view class="rows-item" @click="toGaodeMap()">高德地图</view>
					<view class="rows-item" @click="toBaiduMap()">百度地图</view>
					<view class="rows-item" @click="toTengxunMap()">腾讯地图</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import {
		weixindata,
		weixinlocation
	} from '@/utils/wxAuthorized.js';
export default {
	components: {
		uniPopup
	},
	data() {
		return {
			scale: '12',
			longitude: '112.22416', //神农架林区经度,,
			latitude: '31.068016', //神农架林区纬度
			longitudeNew: '', //当前经度
			latitudeNew: '', //当前纬度
			addr: '东宝区红十字会',
			markers: [{
				id: '226',
				title: '东宝区红十字会',
				iconPath: '/static/img/img10.png',
				width: '28',
				height: '28',
				longitude: '112.22416', //神农架林区经度,
				latitude: '31.068016', //神农架林区纬度
			}]
		};
	},
	onLoad() {
		let obj = this;
		this.IndexShare();
		uni.getLocation({
			type: 'wgs84',
			success: res => {
				console.log('当前位置的经度：' + res.longitude);
				console.log('当前位置的纬度：' + res.latitude);
				obj.longitudeNew = res.longitude;
				obj.latitudeNew = res.latitude;
			},
			fail(e) {
				console.log('获取位置失败', e);
			}
		});
	},
	methods: {
		navigation() {
			this.$refs.popup2.open();
			// uni.openLocation({
			// 	latitude:+latitude,
			// 	longitude:+longitude,
			// 	address:address,
			// 	fail(e){
			// 		console.log(e);
			// 	}
			// })
			
		},
		toGaodeMap() {
			let latitude = this.latitude
			let longitude = this.longitude
			let address = this.addr
			console.log(latitude,longitude,address);
			window.location.href = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${address}`
		},
		toTengxunMap() {
			let latitude = this.latitude
			let longitude = this.longitude
			let address = this.addr
			window.location.href = `http://apis.map.qq.com/uri/v1/marker?marker=coord:${latitude},${longitude};addr:${address}`;
		},
		toBaiduMap() {
			
			window.location.href=
			`http://api.map.baidu.com/marker?location=30.357764,112.218665&title=东宝区红十字会&content=东宝区红十字会&output=html&src=webapp.baidu.openAPIdemo `
		},
		//分享
		IndexShare() {
			let obj = this;
			let item = {
				link:  obj.$store.state.baseURL + '/index/#/pages/share/card',// 分享链接
				imgUrl: obj.$store.state.baseURL + '/index/static/img/002.png',
				desc: '电子名片分享',
				title: '东宝区红十字会',
			};
			console.log('分享加',item)
			weixindata(item);
		},
	}
};
</script>

<style lang="scss">
	.center {
		border: 20rpx solid #e01a1c;
		min-height: 100%;
		// min-height: 600px;
	}
	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	page {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	.bg {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		padding: 20rpx;
		.imgBox {
			width: 100%;
		}
	}
	.top {
		flex-direction: column;
		width: 100%;
		image {
			width: 312rpx;
			height: 312rpx;
			border-color: linear-gradient(0deg, #e01a1c, #e01a1c);
			border-radius: 50%;
			margin-top: 85rpx;
		}
	
		.china-font {
			z-index: 0;
			width: 100%;
			font-size: 62rpx;
			padding-left: 20rpx;
			letter-spacing: 20rpx;
			font-family: Swei Fist Leg CJK SC;
			font-weight: bold;
			color: #e01a1c;
			line-height: 1;
			margin-top: 19rpx;
			text-align: center;
		}
		.english-font {
			margin-top: 14rpx;
			z-index: 0;
			letter-spacing: -1.9rpx;
			width: 100%;
			font-size: 20rpx;
			font-weight: bold;
			color: #e01a1c;
			text-align: center;
		}
		.fgx {
			margin-top: 25rpx;
			margin-bottom: 25rpx;
			z-index: 0;
			width: 625rpx;
			border-bottom: 1rpx dashed #e01a1c;
		}
	}
	.buttom {
		flex-direction: column;
		.item {
			z-index: 0;
			margin: 0 auto;
			margin-top: 20rpx;
			width: 532rpx;
			border: 1rpx solid #e01a1c;
			border-radius: 38rpx;
			justify-content: flex-start;
	
			.home_img {
				height: 58rpx;
				width: 58rpx;
				margin: 8rpx 13rpx;
			}
	
			.text {
				width: 405rpx;
				// display: inline-block;
				// padding-left: 75rpx;
				letter-spacing: 1.2rpx;
				font-size: 25rpx;
				font-weight: bold;
				text-align: center;
				// background-color: red;
				// .text1 {
				// 	padding-left: 60rpx;
				// }
			}
		}
		.map {
			margin-top: 25rpx;
			margin-bottom: 25rpx;
			background-color: #ffffff;
			z-index: 0;
			width: 517rpx;
			border: 2rpx solid #ea3638;
			line-height: 0;
			.map-box {
				width: 513rpx;
				height: 513rpx;
				background: #ffffff;
			}
			.map-font {
				height: 90rpx;
				padding: 0 20rpx;
				justify-content: space-between;
				.font-left {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 29rpx;
					color: #333333;
					line-height: 1;
				}
				.font-right {
					border-radius: 10rpx;
					overflow: hidden;
					background-color: #1593ff;
					image {
						width: 120rpx;
						height: 45rpx;
					}
				}
			}
		}
		.qrcode {
			width: 517rpx;
			image {
				width: 517rpx;
				margin: 20rpx 0 36rpx;
			}
		}
	}
	.popup_row {
		width: 100%;
		height: 500rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.rows {
			width: 100%;
			padding: 0 24rpx;
			
			.rows-item {
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				width: 100%;
				font-size: 32rpx;
				color: #303133;
			}
		}
	}
</style>