kailin_mp/pages/user/follow.vue

<template>
	<view>
		<uni-popup ref="addFollow" type="center" class="center_popup" :mask-click="false">
			<view class="add_follow">
				<view class="close_area">
					
				</view>
				<view class="qr_code_area" @click="followLinkurl">
					<image v-if="followQrcode" :src="followQrcode" class="qr_code" mode="" show-menu-by-longpress></image>
				</view>
				<view class="info_alter">
					<text v-if="follow_linkurl">点击二维码添加客服</text>
					<text v-if="!follow_linkurl">长按二维码添加客服</text>
				</view>
				<view class="rule_info">
					<view class="">规则：</view>
					<view class="">1、预约报单需要添加客服人员</view>
					<view class="">2、添加完客服人员后填写小程序当前登录手机号以绑定账号</view>
					<view class="">3、开始预约报单</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				followQrcode:"",
				follow_linkurl:"",
			}
		},
		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();
				// 有图才展示
				if( this.followQrcode )	this.$refs.addFollow.open('center');
			},
			closeAddFollow(){
				this.$refs.addFollow.close();
			},
			// 去往webview
			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">
	// 添加客服
	.center_popup{
		.add_follow{
			display: block;
			color: #FFFFFF;
			width: 700rpx;
			height: 900rpx;
			margin: 0 auto;
			font-size: 26rpx;
			border-radius: 40rpx;
			background: linear-gradient(to bottom, #ff0091 0%, #2c82ff 100%);
			.close_area{
				height: 30rpx;
				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: 60rpx auto;
				.qr_code{
					float: left;
					width: 300rpx;
					height: 300rpx;
				}
			}
			.save_btn{
				color: #333333;
				display: block;
				width: 260rpx;
				height: 80rpx;
				font-size: 26rpx;
				text-align: center;
				line-height: 80rpx;
				padding: 0rpx 0rpx;
				margin: 40rpx auto;
				border-radius: 40rpx;
				background-color: #FFFFFF;
				border: 0rpx solid transparent;
			}
			.rule_info{
				width: 600rpx;
				display: block;
				font-size: 26rpx;
				margin: 20rpx auto;
				overflow: hidden;
				line-height: 60rpx;
			}
		}
	}
	
</style>