抽奖

src/components/yan-qr/yan-qr.md

@@ -0,0 +1,95 @@
+## 使用方式
+``` javascript
+<yan-qr />
+```
+
+## 属性说明
+|属性名		|类型	| 默认值		     |说明				|
+|--			|--		|-----------|--					|
+|canvasId		|String	| 'qrcode'	 |canvas-id			|
+|text		|String	| 'hello'	  |二维码内容			|
+|size		|Number	| 340		     |单位是px			|
+|margin		|Number	| 0		       |边距			|
+|level	|String	| 'L'		     |二维码解析度L/M/Q/H	|
+|fColor	|String	| '#000000'	 |二维码颜色			|
+|bColor	|String	| '#ffffff'	 |二维码背景颜色			|
+|fileType	|String	| 'png'	 |二维码图片类型		|
+
+## 示例代码
+``` javascript
+<template>
+	<view>
+		<view>
+			<view>
+				<view>需要转换的文本：</view>
+				<textarea v-model="content" @blur="inputText" placeholder="请在这里输入" />
+			</view>
+		</view>
+		二维码
+			<view>
+				<yan-qr :filePath.sync="filePath" :text="text" :margin="20" />
+			</view>
+		二维码图片地址
+			<view>
+				<textarea  v-model="filePath" disabled />
+			</view>
+			<button @click='btn'>生成二维码</button>
+	</view>
+</template>
+
+<script>
+	export default {
+
+		data() {
+			return {
+				qrShow: false,
+				content: '',
+				filePath: '',
+				text: ''
+			}
+		},
+		watch: {
+			filePath() {
+				console.log(this.filePath);
+			}
+		},
+
+		methods: {
+			//*获取文本框内容*//
+			inputText: function(e) {
+				this.content = e.detail.value
+			},
+
+			//*按钮*//
+			btn: function() {
+				if (this.content == '') {
+					uni.showToast({ //显示对话框
+						title: "请输入文本",
+						icon: 'none',
+						duration: 1000,
+					})
+				} else {
+					this.text = this.content
+				}
+			},
+
+
+		}
+	}
+</script>
+
+<style>
+	textarea {
+		border: 1px solid #000000;
+		width: 98%;
+	}
+	button {
+		width: 80%;
+		margin-top: 180rpx;
+		border-radius: 25px;
+		color: aliceblue;
+		background-color: #55aaff;
+	}
+
+</style>
+```

src/components/yan-qr/yan-qr.vue

@@ -0,0 +1,115 @@
+<template>
+	<view>
+		<canvas :canvas-id="canvasId" v-show="qrShow" :style="qrShowStyle" />
+	</view>
+</template>
+
+<script>
+	import uQRCode from './qrcode.js'
+	export default {
+		props: {
+			canvasId: {
+				type: String,
+				default: 'qrcode' //canvas-id
+			},
+			text: {
+				type: String,
+				default: 'hello' //二维码内容
+			},
+			size: {
+				type: Number,
+				default: 150 //二维码大小
+			},
+			margin: {
+				type: Number,
+				default: 0 //二维码边距
+			},
+			level: {
+				type: String,
+				default: 'L' //二维码质量L/M/Q/H
+			},
+			bColor: {
+				type: String,
+				default: '#ffffff' //二维码背景颜色
+			},
+			fColor: {
+				type: String,
+				default: '#000000' //二维码颜色
+			},
+			fileType: {
+				type: String,
+				default: 'png' //二维码图片类型
+			}
+		},
+		data() {
+			return {
+				qrShow: false,
+				qrShowStyle: {
+					"width": "150px",
+					"height": "150px",
+				}
+			}
+		},
+		watch: {
+			text(newVal, oldVal) {
+				this.onQrFun()
+			}
+		},
+		mounted() {
+			this.onQrFun()
+		},
+		methods: {
+			onQrFun() {
+				this.qrShow = this.text != ''
+				if(this.qrShow){
+					this.qrShowStyle.width = this.size+"px"
+					this.qrShowStyle.height = this.size+"px"
+					let level;
+					switch (this.level) {
+						case "M":
+						case "m":
+							level = uQRCode.errorCorrectLevel.M
+							break;
+						case "Q":
+						case "q":
+							level = uQRCode.errorCorrectLevel.Q
+							break;
+						case "H":
+						case "h":
+							level = uQRCode.errorCorrectLevel.H
+							break;
+						default:
+							level = uQRCode.errorCorrectLevel.L
+							break;
+					}
+					uQRCode.make({
+						canvasId: this.canvasId,
+						componentInstance: this,
+						text: this.text,
+						size: this.size,
+						margin: this.margin,
+						backgroundColor: this.bColor,
+						foregroundColor: this.fColor,
+						fileType: this.fileType,
+						errorCorrectLevel: level,
+						success: res => {}
+					})
+					
+					setTimeout(() => {
+						uni.canvasToTempFilePath({
+							canvasId: this.canvasId,
+							success: (res) => {
+								// 在H5平台下，tempFilePath 为 base64
+								this.$emit("update:filePath", res.tempFilePath);
+							}
+						}, this);			
+					}, 600)
+				}
+				
+			}
+		}
+	}
+</script>
+
+<style>
+</style>