mobile_uniapp_mmhy/components/w-load/w-load.vue

<template>
	<view class="wxload">
		<u-popup v-model="wxHide" :mask-close-able="false" mode="center" border-radius="20">
			<view class="wx">
				<view class="layer1">
					<view class="upimg" @tap="up()">
						<image src="../../static/img/up.png" class="label2" ></image>
					</view>
					<view class="wrap1">
						<text lines="1" decode="true" class="info4">微信公众号：{{isFlow?config.flow_service_qrcode_name:config.wxp_name}}&nbsp;&nbsp;</text>
						<view class="wrap2" @tap="copyNumHandle()">复制</view>	
					</view>
				  <image class="img1" :src="config.wxp_qrcode" mode="" v-if="!isFlow"></image>
				  <image class="img1" :src="config.flow_service_qrcode" mode="" v-else></image>
				<!--  <view class="mobiles" v-if="config.system_service_mobile_show">
				  	客服电话:{{config.service_mobile}}
				  </view> -->
				  <text lines="1" class="txt2">点击上方二维码关注公众号，一键查询订单</text>
				</view>
			</view>
		</u-popup>
	</view>
</template> 

<script>
	export default {
		props:["wx","isFlow"],
		data() {
			return {
				config:'',
				wxHide:false,
			}
		},
		 watch: {
		    wx(val) {
				console.log(val)
				this.wxHide = val;
				this.commonConfig()
		    }
		  },
		onLoad() {
			
		},
		methods: {
			configMet(){
				console.log(1)
				let _this=this;
				uni.getStorage({
					//key值为custom
					key: `config`,
					success: function(res) {
						_this.config = JSON.parse(res.data)
					},
					fail:function(err){
						_this.commonConfig()
					},
				})
			},
			// 系统配置
			commonConfig(){
				this.$http.commonConfig()
				.then(res=>{
					if(res.data.code==1){
						this.config=res.data.data
						uni.setStorage({
							key: 'config',
							data: JSON.stringify(res.data.data)
						})
					}
				})
			},
			up(){
				this.wxHide=false
				this.$emit('childByValue', this.wxHide)
			},
			copyNumHandle(){
				uni.setClipboardData({
					data:this.isFlow?this.config.flow_service_qrcode_name:this.config.wxp_name, // data的值为你要复制的内容
					success: res => {
						
					}
				});
			},
		}
	}
</script>

<style lang="scss">
 .wxload{
	// 联系客服弹框公共样式
	.wx{
		
		padding: 30rpx;
		border: 1rpx solid #484848;
		border-radius: 10rpx;
		.mobiles{
			text-align: center;
			margin-top:20rpx;
			font-size: 34rpx;
			font-family: PingFangSC-Regular;
		}
		.txt2 {
			display: inline-block;
			margin-top: 20rpx;
		  margin-bottom: 20rpx;
		  text-align: center;
		  color: rgba(126,126,126,1);
		  font-size: 32rpx;
		  font-family: PingFangSC-Regular;	
		}
		.layer1 {
			position: relative;
			box-sizing: border-box;
		  width: 650rpx;
		  height: 650rpx;
		  text-align: center;
		  padding-top: 40rpx;
		  .upimg{
			  position: absolute;
			  right: 0rpx;
			  top: 0rpx;
			  width: 100rpx;
			  text-align: center;
			  height: 80rpx;
		  }
		}
		.label2 {
		  width: 21rpx;
		  height: 21rpx;
		}
		.wrap1 {
		  text-align: center;
		}
		.info4 {
		  width: 448rpx;
		  height: 29rpx;
		  overflow-wrap: break-word;
		  color: rgba(22, 22, 22, 1);
		  font-size: 30rpx;
		  font-family: PingFangSC-Regular;
		  text-align: left;
		  white-space: nowrap;
		  line-height: 30rpx;
		}
	
		.wrap2 {
			margin-left: 20rpx;
		  background-color: rgba(213,46,76,1);
		  border-radius: 24rpx;
		  width: 122rpx;
		  height: 50rpx;
		  text-align: center;
		  color: #fff;
		  line-height: 50rpx;
		  display: inline-block;
		}
		.img1 {
		  width: 401rpx;
		  height: 401rpx;
		  margin-top: 40rpx;
		}
		
	}
 }
</style>