uniapp 微信小程序 二维码和复制模板

uniapp yekong 824℃

uniapp 二维码和复制模板

<template>
	<view class="home">
		<u-sticky>
			<view>
				<div class="topbg">
					<u-navbar leftIconColor="#D5D9E7" :titleStyle="titleStyle" title="企业识别码" :placeholder="true"
						:safeAreaInsetTop="true" :fixed="true" bgColor="rgba(0,0,0,0)" :autoBack="true">
					</u-navbar>
				</div>
			</view>
		</u-sticky>
		<view class="list">
			<uqrcode v-if="code" size="150" class="uqrcode" ref="uQRCode" :text="code" />
			<div class="copybut">
				<u-button type="primary" color="#2b438a" text="复制" @click="copy"></u-button>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
				titleStyle: {
					color: '#FFFFFF'
				},
			}
		},
		components: {

		},
		onShow() {

		},
		onLoad(e) {
			console.log(e)
			this.code = e.code
		},
		mounted() {

		},
		methods: {
			copy() {
				var that = this;
				uni.setClipboardData({
					data: that.code, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			}
		}
	}
</script>
<style lang="scss">
	page {
		background: #F5F6FA;
	}
</style>
<style scoped lang="scss">
	.list {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: column;
		align-content: flex-start;
		padding-top: 30rpx;
	}

	.copybut {
		width: 690rpx;
		margin: 30rpx;
	}

	.topbg {
		width: 100%;
		background: url(https://images.wanjunshijie.com/mini/buildingMaterialsCloud/gsgl/gsgl.png) center top no-repeat #F5F6FA;
		background-size: 750rpx 192rpx;
		position: relative;
		padding-bottom: 28rpx;
		border-radius: 0 0 20rpx 20rpx;
	}
</style>

uniapp 小程序二维码生成插件

喜欢 (0)