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

<template>
		<u-popup :show="isShow" :zIndex="20" mode="center" bgColor="transparent">
			<view class="pop-body fx-h fx-bc">
				<view class="top-bg">
					<image src="/static/img/tip-bg.png"></image>
					<view class="text">联系客服</view>
				</view>
				<view class="inner fx-h fx-bc">
					<view class="title">已为您定制专属客服</view>
					<image src="/static/img/kfu.png" class="kfu-icon"></image>
					<view class="wx">客服VX:{{ wxName }}</view>
					
					<view class="btns fx-r fx-bc">
						<view class="n-btn ihover" @tap="tapCancel">取消</view>
						<view class="copy-btn ihover" @tap="tapCopy">复制微信</view>
					</view>
					
				</view>
				<view class="m-close">
					<u-icon  @tap="tapCancel" name="close-circle" size="35" color="#fff"></u-icon>
				</view>
			</view>
		</u-popup>
</template>
<style lang="scss">
	.pop-body{
		position: relative;
		.top-bg{
			position: absolute;
			top: -9vw;
			z-index: 1;
			image{
				width: 60vw;
				height: 18vw;
			}
			.text{
				position: absolute;width: 100%;height: 100%;top: 0;left: 0;
				font-size: 32rpx;
				color: #734227;
				text-align: center;
				line-height: 16vw;
			}
		}
		.inner{
			padding: 20px;
			width: 80vw;
			position: relative;
			background: #fff;
			border-radius: 20rpx;
			.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;
				.n-btn{
					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: linear-gradient(-90deg, #D4BA6C 0%, #F9E8A5 100%);
					border-radius: 10px;
					font-size: 32rpx;
					color: #625120;
					padding: 0 80rpx;
					height: 80rpx;
					line-height: 80rpx;
				}
			}
		}
		.m-close{
			margin-top: 60rpx;
		}
	}
	
</style>

<script>
	var swH = 0;
	export default {
		name: 'ui-customer',
		props:{},
		data() {
			return{ 
				isShow : false,
				wxName : ""
			}
		},
		methods: {
			
			tapCancel:function(){
				this.isShow = false;
			},
			open(){
				uni.showLoading({ title: '获取数据中..' });
				this
					.request
					.post("indexGuLx")
					.then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							this.wxName = res.data.wxname;
							this.isShow = true;
						} else {
							this.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>