digitalMen/components/wike-modal-qrcode/wike-modal-qrcode.vue

<template>
	<view>
		<u-popup :show="showconcern" mode="center" :round="10" @close="tuexchange" :closeOnClickOverlay="false">
			<view class="carmimodal">
				<view class="carmiclose" @click="tuexchange"><u-icon name="close-circle-fill" color="#fff" size="22"></u-icon></view>
		
				<view class="carmititle">长按识别二维码关注</view>
				
				<view v-if="qrcode" class="kf_qrcode tn-flex justify-center">
					<u--image :showLoading="true" radius="10" showMenuByLongpress :src="qrcode" width="280px" height="280px" @click="clickuimage(qrcode)"></u--image>
				</view>
				<view @click="exchange" class="carmiexchange">我已关注·不再提醒</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"wike-modal-qrcode",
		props:{
			showconcern: {
				type: Boolean,
				default:false
			},
			qrcode: {
				type: String,
				default:''
			}
		},
		data() {
			return {
				
			};
		},
		
		methods:{
			exchange(){
				uni.setStorageSync('focuson', true);
				this.$emit('concernclose');
			},
			tuexchange(){
				this.$emit('concernclose');
			}
		}
	}
</script>

<style lang="scss">
.carmimodal {
    	width: 600rpx;
    	border-radius: 20rpx;
    	position: relative;
    	.carmiclose {
    		position: absolute;
    		right: 15rpx;
    		top: 15rpx;
    	}
    	.carmititle {
    		background: linear-gradient(to right, #00ca88, #00BCD4);
    		color: #fff;
    		height: 120rpx;
    		line-height: 120rpx;
    		font-size: 38rpx;
    		font-weight: bold;
    		text-align: center;
    		border-radius: 20rpx 20rpx 0 0;
    		// margin-bottom: 60rpx;
    	}
    	.carmiinput {
    		margin: 30rpx;
    	}
    	.carmiexchange {
    		margin: 40rpx 30rpx;
    		background: linear-gradient(to right, #00ca88, #00BCD4);
    		color: #fff;
    		border-radius: 60rpx;
    		height: 90rpx;
    		line-height: 90rpx;
    		text-align: center;
			font-size: 32rpx;
    	}
    	.kf_qrcode{
    		// margin-left: 200rpx;
    		margin: 30rpx;
    	}
    }
</style>