liedou_uniapp/pages/subPackages/my/zskf.vue

<template>
	<view>
		<!-- 顶部导航 -->
		<u-navbar class="navbar-wrap" :is-back="true" title="专属客服" :background="background" title-color="#ffffff" back-icon-color="#ffffff" />
		<view class="kf-block">
			<image class="avatar" v-if="serviceInfo.headimgurl" :src="serviceInfo.headimgurl" />
			<image class="avatar" v-else src="https://ld.726p.com/ldyx_static/imgs/avatar-login.png" />
			<text>我是你的专属客服，添加微信好友可：</text>
		</view>
		<block v-if="serviceInfo.text">
			<view class="text-block" v-for="item in serviceInfo.text">
				<image class="img" src="https://ld.726p.com/ldyx_static/imgs/kefu_icon.png" mode="widthFix"></image>
				<text>{{item}}</text>
			</view>
		</block>
		<image class="kf-evm" :src="serviceInfo.qrcode" mode="widthFix" :show-menu-by-longpress="true"></image>
		<!-- #ifdef H5 -->
		<view class="h5-hint">长按识别二维码或保存二维码到手机</view>
		<view class="h5-hint">您还可以复制微信号添加专属客服</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="button" @click="downloadImg">保存二维码到手机</view>
		<!-- #endif -->
		<block v-if="serviceInfo.wechat">
			<view class="button" @click="copyEvent">复制微信号</view>
			<!-- <view class="wx-text">微信号：{{serviceInfo.wechat}}</view> -->
		</block>
		<!-- #ifdef MP-WEIXIN -->
		<view class="wx-text">长按识别上方二维码，添加客服</view>
		<!-- #endif -->
		<view class="add-question">
			添加客服遇到问题，请联系<text class="fws_button" @click="showMask = true">服务商</text>
		</view>
		<!-- 服务商弹窗 -->
		<u-mask :show="showMask" @click="showMask = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="kf-block">
						<image class="avatar" v-if="serviceInfo.server_info.headimgurl" :src="serviceInfo.server_info.headimgurl" />
						<image class="avatar" v-else src="https://ld.726p.com/ldyx_static/imgs/avatar-login.png" />
						<text>我是服务商</text>
					</view>
					<image class="kf-evm" :src="serviceInfo.server_info.qrcode" mode="widthFix" :show-menu-by-longpress="true"></image>
					<!-- #ifdef H5 -->
					<view class="h5-hint">长按识别二维码或保存二维码到手机</view>
					<view class="h5-hint">您还可以复制微信号添加专属客服</view>
					<!-- #endif -->
					<!-- #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>
					<!-- #ifdef MP-WEIXIN -->
					<view class="wx-text">长按识别上方二维码，添加客服</view>
					<!-- #endif -->
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				background: app.globalData.navbarBackground,
				serviceInfo: {}, // 客服信息
				showMask: false, // 服务商弹框
			}
		},
		onLoad() {
			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">
	.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: 900rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx 40rpx;
	}
</style>