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">
					<!-- <button class="close_btn" @click="closeAddFollow()">关闭</button> -->
				</view>
				<view class="info_alter">长按识别二维码添加客服</view>
				<view class="qr_code_area">
					<image v-if="followQrcode" :src="followQrcode" class="qr_code" mode="" show-menu-by-longpress></image>
				</view>
				<button class="save_btn" @click="saveImage()">保存图片添加客服</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				followQrcode:"",
			}
		},
		onShow() {
			this.openAddFollow();
		},
		methods: {
			// 客服显示
			openAddFollow(){
				// 返回结果
				this.followQrcode 		= this.$checkAccess.getFollowQrcode();
				// 有图才展示
				if( this.followQrcode )	this.$refs.addFollow.open('center');
			},
			closeAddFollow(){
				this.$refs.addFollow.close();
			},
			// 保存图片
			saveImage(){
				var that = this;
				// 下载远程图片后保存到相册
				uni.downloadFile({
					url: this.followQrcode,
					success:function(res) {
						if(res.statusCode == 200){
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success:function(res) {
									uni.showToast({title:"保存成功",icon:'none'});
									that.$refs.addFollow.close();
								},
								fail:function(err){
									
								}
							});
						}
					},
				})
			},
		}
	}
</script>

<style lang="less">
// 添加客服
	.center_popup{
		.add_follow{
			display: block;
			color: #FFFFFF;
			width: 700rpx;
			height: 1100rpx;
			margin: 0 auto;
			font-size: 26rpx;
			border-radius: 40rpx;
			background: linear-gradient(to bottom, #ff0091 0%, #2c82ff 100%);
			.close_area{
				height: 100rpx;
				display: block;
				line-height: 100rpx;
				.close_btn{
					color: #FFFFFF;
					float: right;
					width: 100rpx;
					height: 100rpx;
					font-size: 26rpx;
					text-align: center;
					line-height: 100rpx;
					padding: 0rpx 0rpx;
					border: 0rpx solid transparent;
					background-color: transparent;
				}
				.close_btn::after{
					border: 0rpx solid transparent;
				}
			}
			.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>