1

components/tki-qrcode/tki-qrcode.vue

@@ -0,0 +1,210 @@
+<template xlang="wxml" minapp="mpvue">
+	<view class="tki-qrcode">
+		<!-- #ifndef MP-ALIPAY -->
+		<canvas class="tki-qrcode-canvas" :canvas-id="cid" :style="{width:cpSize+'px',height:cpSize+'px'}" />
+		<!-- #endif -->
+		<!-- #ifdef MP-ALIPAY -->
+		<canvas :id="cid" :width="cpSize" :height="cpSize" class="tki-qrcode-canvas" />
+		<!-- #endif -->
+		<image v-show="show" :src="result" :style="{width:cpSize+'px',height:cpSize+'px'}" />
+	</view>
+</template>
+
+<script>
+import QRCode from "./qrcode.js"
+let qrcode
+export default {
+	name: "tki-qrcode",
+	props: {
+		cid: {
+			type: String,
+			default: 'tki-qrcode-canvas'
+		},
+		size: {
+			type: Number,
+			default: 200
+		},
+		unit: {
+			type: String,
+			default: 'upx'
+		},
+		show: {
+			type: Boolean,
+			default: true
+		},
+		val: {
+			type: String,
+			default: ''
+		},
+		background: {
+			type: String,
+			default: '#ffffff'
+		},
+		foreground: {
+			type: String,
+			default: '#000000'
+		},
+		pdground: {
+			type: String,
+			default: '#000000'
+		},
+		icon: {
+			type: String,
+			default: ''
+		},
+		iconSize: {
+			type: Number,
+			default: 40
+		},
+		lv: {
+			type: Number,
+			default: 3
+		},
+		onval: {
+			type: Boolean,
+			default: false
+		},
+		loadMake: {
+			type: Boolean,
+			default: false
+		},
+		usingComponents: {
+			type: Boolean,
+			default: true
+		},
+		showLoading: {
+			type: Boolean,
+			default: true
+		},
+		loadingText: {
+			type: String,
+			default: '二维码生成中'
+		},
+	},
+	data() {
+		return {
+			result: '',
+		}
+	},
+	methods: {
+		_makeCode() {
+			let that = this
+			if (!this._empty(this.val)) {
+				qrcode = new QRCode({
+					context: that, // 上下文环境
+					canvasId:that.cid, // canvas-id
+					usingComponents: that.usingComponents, // 是否是自定义组件
+					showLoading: that.showLoading, // 是否显示loading
+					loadingText: that.loadingText, // loading文字
+					text: that.val, // 生成内容
+					size: that.cpSize, // 二维码大小
+					background: that.background, // 背景色
+					foreground: that.foreground, // 前景色
+					pdground: that.pdground, // 定位角点颜色
+					correctLevel: that.lv, // 容错级别
+					image: that.icon, // 二维码图标
+					imageSize: that.iconSize,// 二维码图标大小
+					cbResult: function (res) { // 生成二维码的回调
+						that._result(res)
+					},
+				});
+			} else {
+				uni.showToast({
+					title: '二维码内容不能为空',
+					icon: 'none',
+					duration: 2000
+				});
+			}
+		},
+		_clearCode() {
+			this._result('')
+			qrcode.clear()
+		},
+		_saveCode() {
+			let that = this;
+			if (this.result != "") {
+				uni.saveImageToPhotosAlbum({
+					filePath: that.result,
+					success: function () {
+						uni.showToast({
+							title: '二维码保存成功',
+							icon: 'success',
+							duration: 2000
+						});
+					}
+				});
+			}
+		},
+		_result(res) {
+			this.result = res;
+			this.$emit('result', res)
+		},
+		_empty(v) {
+			let tp = typeof v,
+				rt = false;
+			if (tp == "number" && String(v) == "") {
+				rt = true
+			} else if (tp == "undefined") {
+				rt = true
+			} else if (tp == "object") {
+				if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
+			} else if (tp == "string") {
+				if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
+			} else if (tp == "function") {
+				rt = false
+			}
+			return rt
+		}
+	},
+	watch: {
+		size: function (n, o) {
+			if (n != o && !this._empty(n)) {
+				this.cSize = n
+				if (!this._empty(this.val)) {
+					setTimeout(() => {
+						this._makeCode()
+					}, 100);
+				}
+			}
+		},
+		val: function (n, o) {
+			if (this.onval) {
+				if (n != o && !this._empty(n)) {
+					setTimeout(() => {
+						this._makeCode()
+					}, 0);
+				}
+			}
+		}
+	},
+	computed: {
+		cpSize() {
+			if(this.unit == "upx"){
+				return uni.upx2px(this.size)
+			}else{
+				return this.size
+			}
+		}
+	},
+	mounted: function () {
+		if (this.loadMake) {
+			if (!this._empty(this.val)) {
+				setTimeout(() => {
+					this._makeCode()
+				}, 0);
+			}
+		}
+	},
+}
+</script>
+<style>
+.tki-qrcode {
+  position: relative;
+}
+.tki-qrcode-canvas {
+  position: fixed;
+  top: -99999upx;
+  left: -99999upx;
+  z-index: -99999;
+}
+</style>

pagesHome/shop/index.vue

@@ -10,7 +10,8 @@
 						<scroll-view scroll-y="true" class="scroll-view">
 							<view class="list-scroll-view">
 								<view class="list" v-for="(item,index) in shoplist" :key="index">
-									<image class="image" :src="item.file&&item.file.length>0?item.file[0].url:''" mode=""></image>
+									<image class="image" :src="item.file&&item.file.length>0?item.file[0].url:''"
+										mode=""></image>
 									<view class="name">
 										{{item.name}}
 									</view>
@@ -36,17 +37,20 @@
 						<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
 							<view class="list-scroll-view">
 								<view class="second_1">
-									<view :class="['list',condActive==index?'activeList':'']" v-for="(item,index) in condList" :key="index" @tap="toCond(index,item)">
+									<view :class="['list',condActive==index?'activeList':'']"
+										v-for="(item,index) in condList" :key="index" @tap="toCond(index,item)">
 										<view class="name">
 											{{item.name}}
 										</view>
 										<view class="icon">
 											<view class="icon_1">
-												<text :class="['iconfont',item.shangActive]" v-if="condActive==index&&shang=='1'"></text>
+												<text :class="['iconfont',item.shangActive]"
+													v-if="condActive==index&&shang=='1'"></text>
 												<text :class="['iconfont',item.shang]" v-else></text>
 											</view>
 											<view class="icon_1">
-												<text :class="['iconfont', item.xiaActive]" v-if="condActive==index&&xia=='-1'"></text>
+												<text :class="['iconfont', item.xiaActive]"
+													v-if="condActive==index&&xia=='-1'"></text>
 												<text :class="['iconfont', item.xia]" v-else></text>
 											</view>
 										</view>
@@ -54,7 +58,8 @@
 								</view>
 								<view class="second_2">
 									<view class="list" v-for="(item,index) in list" :key="index">
-										<image class="image" :src="item.file&&item.file.length>0?item.file[0].url:''" mode=""></image>
+										<image class="image" :src="item.file&&item.file.length>0?item.file[0].url:''"
+											mode=""></image>
 										<view class="sale" v-if="item.is_sale==true">
 											<text>已售尽</text>
 										</view>
@@ -98,7 +103,10 @@
 						</view>
 						<view class="second_2">
 							<view class="second_2_bor">
-								<image class="image" :src="info.qrcode&&info.qrcode.length>0?info.qrcode[0].url:''" mode=""></image>
+								<!-- <image class="image" :src="info.qrcode&&info.qrcode.length>0?info.qrcode[0].url:''" mode=""></image> -->
+								<tki-qrcode cid="qrcode1" ref="qrcode" :val="val" :size="size" :unit="unit"
+									:background="background" :foreground="foreground" :pdground="pdground"
+									:onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
 							</view>
 							<view class="txt">
 								店铺二维码
@@ -126,12 +134,24 @@
 </template>
 
 <script>
+	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
 	export default {
+		components: {
+			tkiQrcode
+		},
 		data() {
 			return {
+				val: 'https://coding.imweb.io/demo/flex/index.html', // 要生成的二维码值
+				size: 300, // 二维码大小
+				unit: 'upx', // 单位
+				background: '#FFFFFF', // 背景色
+				foreground: '#000000', // 前景色
+				pdground: '#000000', // 角标色
+				onval: true, // val值变化时自动重新生成二维码
+				loadMake: true, // 组件加载完成后自动生成二维码
+				src: '', // 二维码生成后的图片地址或base64
 				user: {},
 				id: '',
-
 				barActive: '0',
 				barList: [ //底部菜单
 					{
@@ -203,6 +223,9 @@
 		},
 		onShow: function() {},
 		methods: {
+			qrR(res) {
+				this.src = res
+			},
 			// 监听用户是否登录
 			watchLogin() {
 				const that = this;