wxThird/pages/index/personalCard.vue

<template>
	<view class="content">
		<view class="top-box">
			<image class="bgImg" src="http://dmsphoto.66km.com.cn/thFiles/C5E37DF6-452F-4FA4-877D-7620E10440C3.png"></image>
			<image class="headerImg" :src="avatarStr">
			</image>
			<view class="txtInfo-box">
				<text class="name">{{adInfo.name}}</text>
				<text class="work">服务顾问</text>
			</view>
		</view>
		<view class="address-box" @click="addressOpra">
			<view class="address-info">
				<text class="store-name">{{shopNameStr}}</text>
				<text
					class="store-address">{{addressStr}}</text>
			</view>
			<view class="address-arrow">
				<image src="../../static/img/little_rightArrow.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="bottom-box">

			<button open-type="share" class="share-btn-box">
				<view class="share-btn">分享名片</view>
			</button>
			<view class="call-btn" :style="{background:'#'+themeColor}" @click="callOpra">拨号</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				adInfo: {
					shopName:'',
					shopInfo:{
						shopName:''
					},
					
				},
				themeColor:'',
			}
		},
		onLoad(e) {
			// console.log('个人名片传递的参数', e);
			this.adInfo = JSON.parse(e.adInfo)
			 console.log('个人名片传递的参数', this.adInfo);
			 this.themeColor = uni.getStorageSync("themeColor");
		},
		computed: {
	
			avatarStr(){
				return this.adInfo.avatar ? this.adInfo.avatar : '../../static/timg/pic_def_ava@2x.png'
			},

			shopNameStr(){
				if (this.adInfo.shopName) {
					// console.log('this.adInfo.shopName = ',this.adInfo.shopName)
					return this.adInfo.shopName
				}
				else{
					// console.log('this.adInfo.shopInfo.shopName = ',this.adInfo.shopInfo.shopName)
					return this.adInfo.shopInfo.shopName
				}
			},
			addressStr() {
				if (this.adInfo.provinceName) {
					return this.adInfo.provinceName + this.adInfo.cityName + this.adInfo.areaName + this.adInfo.address	
				}
				else
				{
					return this.adInfo.shopInfo.provinceName + this.adInfo.shopInfo.cityName + this.adInfo.shopInfo.areaName + (this.adInfo.shopInfo.Address ? this.adInfo.shopInfo.Address :'')
				}
			},
		},
		methods: {
			// 拨号
			callOpra() {
				if (this.adInfo.phone) {
					uni.makePhoneCall({
						phoneNumber: this.adInfo.phone,
						success(e) {
							console.log(e)
						},
						fail: function(e) {
							console.log(e)
						}
					})
				}
				else
				{
					uni.showToast({
						title:'没有电话信息',
						icon: "none",
						duration:2000
					})
				}
			},
			// 门店地址
			addressOpra() {
				// uni.switchTab({
				// 	url:'/pages/index/index'
				// })
				uni.navigateTo({
					url:'onlineBooking?naShopId='+this.adInfo.shopID
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 背景图 & 头像 */
	.top-box {
		text-align: center;
		border-bottom: 1rpx solid #eee;
	}

	.bgImg {
		width: 100%;
		height: 426rpx;
	}

	.headerImg {
		width: 272rpx;
		height: 272rpx;
		border-radius: 50%;
		border: 6rpx solid #A38E21;
		margin-top: -136rpx;
	}

	/* 名片信息 */
	.txtInfo-box {
		display: flex;
		flex-direction: column;
		margin-top: 34rpx;
		margin-bottom: 32rpx;
	}

	.name {
		font-size: 44rpx;
		font-weight: 500;
		color: #333;
	}

	.work {
		color: #666;
		font-size: 28rpx;
		margin-top: 10rpx;
	}

	/* 地址信息 */
	.address-box {
		display: flex;
		margin-top: 33rpx;
		margin-bottom: 33rpx;
	}

	.address-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-left: 44rpx;
	}

	.address-arrow {
		width: 60rpx;
	}

	.address-arrow image {
		width: 30rpx;
		height: 100%;
	}

	.store-name {
		font-size: 30rpx;
		font-weight: 500;
		color: #3c3c3c;
	}

	.store-address {
		margin-top: 12rpx;
		font-size: 24rpx;
		color: #999;
	}

	/* 底部 */
	.bottom-box {
		bottom: 0;
		position: fixed;
		background: white;
		width: 100%;
		display: flex;

		box-shadow: 0px -2px 10px 0px rgba(153, 153, 153, 0.2000);
		padding-bottom: env(safe-area-inset-bottom);

		height: 120rpx;
	}

	button::after {
		border: none;
	}

	.share-btn-box {
		width: 375rpx;
		background: #FFFFFF;
		margin: 0;
		padding: 0;

		.share-btn {
			margin: 20rpx;
			background-color: #F4F5F7;
			border-radius: 37rpx;
			font-size: 28rpx;
			color: #000;
			text-align: center;
			line-height: 74rpx;
		}
	}

	.call-btn {
		flex: 1;
		margin: 20rpx;
		background-color: #D53533;
		border-radius: 37rpx;
		font-size: 28rpx;
		color: white;
		text-align: center;
		line-height: 74rpx;
	}
</style>