hssred/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 China Huangshi 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>湖北省黄石市下陆区桂林南路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"  @click="makeCall('0714-6221833')"><text class="text1">0714-6221833</text></view>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<view class="text" @click="makeCall('0714-6221833')"><text>0714-6221833 /
						0715-8111765</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>hsshszh@163.com</text></view>
			</view>
			<view class="map">
				<!-- <map class="map-box" id="map" :markers="markers" :scale="scale" :latitude="latitude"
					:longitude="longitude" ref="map" :show-location="false"></map> -->
					<image src="../../static/images/qr.jpg" mode="" class="map-box"></image>
				<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>
		<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';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				scale: '12',
				longitude: '115.037080', //神农架林区经度,,
				latitude: '30.192767', //神农架林区纬度
				// longitudeNew: '', //当前经度
				// latitudeNew: '', //当前纬度
				addr: '黄石市红十字会',
				markers: [{
					id: '226',
					title: '黄石市红十字会',
					iconPath: '/static/img/img10.png',
					width: '28',
					height: '28',
					longitude: '115.037080', //神农架林区经度,,
					latitude: '30.192767', //神农架林区纬度
				}]
			};
		},
		computed: {
			...mapState(['baseURL'])
		},
		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: {
			makeCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			navigation() {
				this.$refs.popup2.open();
			},
			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.192767,115.037080&title=黄石市红十字会&content=黄石市红十字会&output=html&src=webapp.baidu.openAPIdemo `
			},
			//分享
			IndexShare() {
				let obj = this;
				let item = {
					link: obj.baseURL + '/index/#/pages/share/card', // 分享链接
					imgUrl: obj.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>