CBB3/components/ui-public/customer-wiget.nvue

<template>
	<uv-popup ref='openKf' :zIndex="20" mode="center" bgColor="transparent">
		
		<view class="pop-body">
			<view class="inner">
				<text class="title">已为您定制专属客服</text>
				<image src="/static/img/kfu.png" class="kfu-icon"></image>
				<view class="wx">客服VX:{{ wxName }}</view>

				<view class="btns">
					<text class="n-btn ihover" @tap="tapCancel">取消</text>
					<text class="copy-btn ihover" @tap="tapCopy">复制微信</text>
				</view>

			</view>
			<view class="m-close">
				<uv-icon @tap="tapCancel" name="close-circle" size="35" color="#fff"></uv-icon>
			</view>
		</view>
		<view class="top-bg">
			<image class='image' src="/static/img/tip-bg.png"></image>
			<text class="text">联系客服</text>
		</view>
	</uv-popup>
</template>
<style lang="scss">
	.top-bg {
		position: absolute;
		top: 0;
		left:0;
		right: 0;
		align-items: center;
		.image {
			width: 450rpx;
			height: 135rpx;
		}
		.text {
			margin-top: -142rpx;
			height: 135rpx;
			font-size: 32rpx;
			color: #734227;
			line-height: 135rpx;
		}
	}

	.pop-body {
		position: relative;
		padding-top: 65rpx;
		.inner {
			padding: 20px;
			width: 600rpx;
			position: relative;
			background: #fff;
			border-radius: 20rpx;
			align-items: center;

			.title {
				font-size: 32rpx;
				color: #333333;
				margin-bottom: 20rpx;
				padding-top: 20rpx;
			}

			.wx {
				font-size: 32rpx;
				color: #333333;
				margin-top: 20rpx;
			}

			.kfu-icon {
				width: 180rpx;
				height: 143rpx;
			}

			.btns {
				margin-top: 30rpx;
				flex-direction: row;
				width: 560rpx;

				.n-btn {
					flex: 1;
					border-radius: 10rpx;
					border: 2rpx solid #DFC77C;
					font-size: 32rpx;
					color: #625120;
					padding: 0 80rpx;
					margin-right: 40rpx;
					height: 80rpx;
					line-height: 80rpx;
				}

				.copy-btn {
					background-image: linear-gradient(-90deg, #D4BA6C, #F9E8A5);
					border-radius: 10px;
					font-size: 32rpx;
					color: #625120;
					padding: 0 80rpx;
					height: 80rpx;
					line-height: 80rpx;
				}
			}
		}

		.m-close {
			margin-top: 60rpx;
			align-items: center;
		}
	}
</style>

<script>
	import Request from '@/library/Request.js'
	var swH = 0;
	export default {
		name: 'ui-customer',
		props: {},
		data() {
			return {
				wxName: ""
			}
		},
		methods: {
			tapCancel: function() {
				this.$refs.openKf.close()
			},
			open() {
				const that = this;
				uni.showLoading({
					title: '获取数据中..'
				});
				console.log(Request, 'Request')
				Request
					.post("indexGuLx")
					.then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							that.wxName = res.data.wxname;
							that.$refs.openKf.open()
						} else {
							that.utils.Tip(res.msg);
						}
					})
					.catch((res) => {
						console.log(res);
						uni.hideLoading();
						uni.showModal({
							title: '系统提示',
							content: '加载失败，返回在尝试',
							showCancel: false
						});
					});

			},
			tapCopy() {
				uni.setClipboardData({
					data: value,
					showToast: true
				});
			}
		}
	}
</script>