baokan_mp/pages/user/follow.vue

<template>
	<view>
		<view class="add_follow" :style="safeAreaHeight">
			<view class="close_area"></view>
			<view class="info_alter">
			  <text v-show="follow_linkurl">{{ clickTitle }}</text>
			  <text v-show="!follow_linkurl">{{ longTapTitle }}</text>
			</view>
			<view v-if="followQrcode" class="qr_code_area" @click="followLinkurl">
			  <image :src="followQrcode" class="qr_code" mode="" show-menu-by-longpress> </image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				clickTitle:"点击二维码添加客服",
				longTapTitle:"长按二维码添加客服",
				followQrcode:"",
				follow_linkurl:"",
				safeAreaHeight:{}
			}
		},
		onLoad() {
			let safeArea 		= uni.getWindowInfo().safeArea;
			this.safeAreaHeight	= {height: safeArea.height + 'px'};
		},
		onShow() {
			// 登录提示
			if( !this.$checkAccess.alterLogin() ) return ;
			// 判断数据
			this.$http.request('api/custom/get_info').then((callback)=>{
				if( callback.code == 'success' ){
					if( !callback.data.userpic ) callback.data.userpic = "../../static/icon/doctor.png";
					// 存储登录标识
					uni.setStorageSync('userInfo',callback.data);
				}
			});
			this.openAddFollow();
		},
		methods: {
			// 客服显示
			openAddFollow(){
				// 返回结果
				this.followQrcode 		= this.$checkAccess.getFollowQrcode();
				// 返回结果
				this.follow_linkurl 	= this.$checkAccess.getFollowLinkUrl();
			},
			followLinkurl() {
			  // 获取登录标识
			  let userInfo = uni.getStorageSync("userInfo");
			  // 如果不存在的话
			  if (!userInfo) return "";
			  // 未添加好友
			  if (!userInfo.follow_linkurl) return "";
			  // 获取Url
			  let url = userInfo.follow_linkurl;
			  // 没有路径，不跳转
			  if (!url) return;
			  // 判断是不是小程序链接
			  if (url.includes("http")) {
			    // 转码
			    let link_url = encodeURIComponent(url);
			    // 跳转到webview
			    uni.redirectTo({
			      url: `/pages/webview/index?link_url=${link_url}`,
			    });
			  } else {
			    // 跳转到webview
			    uni.navigateTo({
			      url: url,
			    });
			  }
			},
		}
	}
</script>

<style lang="less">
	.add_follow{
		display: block;
		color: #FFFFFF;
		width: 750rpx;
		height: 900rpx;
		margin: 0rpx auto;
		font-size: 26rpx;
		background: linear-gradient(to bottom, #ff0091 0%, #2c82ff 100%);
		.close_area{
			height: 80rpx;
			display: block;
			line-height: 30rpx;
		}
		.info_alter{
			display: block;
			height: 100rpx;
			font-size: 42rpx;
			font-weight: bold;
			text-align: center;
			line-height: 100rpx;
		}
		.qr_code_area{
			display: block;
			width: 300rpx;
			height: 300rpx;
			margin: 120rpx auto;
			.qr_code{
				float: left;
				width: 300rpx;
				height: 300rpx;
			}
		}
	}
</style>