liedou_uniapp/components/serviceProvi...

<template>
	<u-mask :show="show" @click="$emit('close')">
		<view class="warp">
			<view class="rect" @tap.stop>
				<view class="kf-block">
					<text class="font-bold">{{hint}}</text>
				</view>
				<image class="kf-evm" :src="serviceInfo.server_info.qrcode" mode="widthFix" :show-menu-by-longpress="true"></image>
				<view class="h5-hint">长按识别上方二维码，添加服务商！</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="button" @click="downloadImg('fws')">保存二维码到手机</view>
				<!-- #endif -->
				<block v-if="serviceInfo.server_info.wechat">
					<view class="button" @click="copyEvent('fws')">复制微信号</view>
					<!-- <view class="wx-text">微信号：{{serviceInfo.server_info.wechat}}</view> -->
				</block>
			</view>
		</view>
	</u-mask>
</template>

<script>
	export default {
		name:"serviceProvider",
		props:{
			show:{
				type: Boolean,
				default: false
			},
			hint:{
				type: String,
				default: '我是服务商'
			}

		},
		data() {
			return {
				serviceInfo: {}
			};
		},
		mounted() {
			this.getService()
		},
		methods:{
			// 点击下载图片事件，h5不适用
			downloadImg(type) {
				wx.showLoading({
					title: '加载中...'
				});
				let url = this.serviceInfo.qrcode;
				if(type == 'fws'){ // 服务商
					url = this.serviceInfo.server_info.qrcode;
				}
				wx.downloadFile({
					url: url, //图片地址
					success: function (res) {
						//wx.saveImageToPhotosAlbum方法：保存图片到系统相册
						wx.saveImageToPhotosAlbum({
							filePath: res.tempFilePath, //图片文件路径
							success: function (data) {
								wx.hideLoading(); //隐藏 loading 提示框
								wx.showModal({
									title: '提示',
									content: '保存成功',
									modalType: false,
								})
							},
							// 接口调用失败的回调函数
							fail: function (err) {
								if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
									wx.showModal({
										title: '提示',
										content: '需要您授权保存相册',
										modalType: false,
										success: modalSuccess => {
											wx.openSetting({
												success(settingdata) {
													if (settingdata.authSetting['scope.writePhotosAlbum']) {
														wx.showModal({
															title: '提示',
															content: '获取权限成功,再次点击图片即可保存',
															modalType: false,
														})
													} else {
														wx.showModal({
															title: '提示',
															content: '获取权限失败，将无法保存到相册哦~',
															modalType: false,
														})
													}
												},
												fail(failData) {
													console.log("failData", failData)
												},
												complete(finishData) {
													console.log("finishData", finishData)
												}
											})
										}
									})
								}
							},
							complete(res) {
								wx.hideLoading(); //隐藏 loading 提示框
							}
						})
					}
				})
			},
			// 获取客服信息
			async getService () {
				try {
					const url = this.$api.adzoneCreate_belongToYou;
				    const params = {}
				    uni.showLoading({ title: '加载中...', mask: true })
				    const { data: res } = await this.$postJSON(url, params)
					if (res && res.errno == 0) {
						this.serviceInfo = res.rst;
					} else {
						uni.showToast({ title: res.err || '操作失败', icon: 'none' })
					}
				} catch (error) {
					uni.showToast({ title: '服务器错误', icon: 'none' })
				} finally {
				  uni.hideLoading()
				}
			},
			//复制微信号
			copyEvent(type){
				let text = this.serviceInfo.wechat;
				if(type == 'fws'){ // 服务商
					text = this.serviceInfo.server_info.wechat;
				}
				this.$copyEvent({text})
			},
		}
	}
</script>

<style scoped lang="scss">
	.font-bold{
		font-weight: bold;
	}
	.kf-block{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;
		line-height: 50rpx;
		font-size: 32rpx;
		color: #333333;
		.avatar{
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
	}
	.text-block{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		line-height: 40rpx;
		margin-top: 20rpx;
		.img{
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}
	.kf-evm{
		display: block;
		width: 280rpx;
		height: 280rpx;
		margin: 80rpx auto;
	}
	.button{
		width: 440rpx;
		line-height: 70rpx;
		background-color: #F52B18;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		margin: auto;
		margin-top: 30rpx;
		border-radius: 6rpx;
	}
	.wx-text{
		font-size: 26rpx;
		text-align: center;
		line-height: 40rpx;
		margin-top: 10rpx;
	}
	.add-question{
		text-align: center;
		font-size: 26rpx;
		line-height: 40rpx;
		margin-top: 100rpx;
		.fws_button{
			color: #F52B18;
			margin-left: 6rpx;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
	.h5-hint{
		text-align: center;
		font-size: 26rpx;
		line-height: 40rpx;
		color:#666;
	}
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 600rpx;
		height: 860rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx 40rpx;
	}
</style>