cancel-yunyubang/pages/index/index.vue

<template>
    <view class="content">
		<view>
			<view class="btn">
				<input ref="inputs" v-model="qrCodeRes" type="text" placeholder="请扫码或输入活动码" :focus="isfocus">
				<img :src="scanimg" @click="scanCode" alt="" srcset="">
			</view>
			
			<view class="admin">
				<button type="primary" @click="usecode" plain="true">核销</button>
			</view>
		</view>
	</view>
</template>

<script>
	let Qrcode = require('../../utils/reqrcode.js')
    export default {
        data() {
            return {
				qrCodeRes:"",
				isfocus:true,
				showQr:false,
				scanimg:require("@/static/scan.png")
            }
        },
		onShow() {
			uni.getNetworkType({
			    success: function (res) {
			        console.log(res.networkType);//网络类型 wifi、2g、3g、4g、ethernet、unknown、none
			        if(res.networkType === "none" ){
			            console.log("当前无网络");
						uni.showToast({
							icon:"none",
							title:"当前无网络",
							duration:2000
						})
			        }else{
			            
			        }
			    }
			});
		},
        methods: {
			usecode() {
				var that = this;
				if(that.qrCodeRes==""){
					uni.showToast({
						icon:"none",
						title:"请扫码或输入活动码",
						duration:2000,
						complete() {
						}
					})
					return
				}
				that.isfocus = false
				that.util.request({
					api: '/api/member/code_use',
					method: "get",
					data: {
						code:that.qrCodeRes
					},
					utilSuccess: function(res) {
						if(res.errcode){
							uni.showToast({
								icon:"none",
								title:res.errmsg,
								duration:4000,
								complete() {
									that.qrCodeRes = "";
									that.isfocus=true
								}
							})
							
						}else{
							uni.showToast({
								icon:"none",
								title:res.msg||'核销成功',
								duration:4000,
								complete() {
									that.qrCodeRes = ""
									that.isfocus=true
								}
							})
							
						}
						// that.areaList = result.detail
					},
					utilFail: function(res) {
						that.util.alert(res);
					}
				});
			},
			
			// 扫码
			scanCode() {
				// #ifdef APP-PLUS
				this.scanCodeAPP()
				// #endif
				
				// #ifdef H5
				this.scanCodeH5()
				// #endif
			},
			// APP直接调用 uni.scanCode 接口
			scanCodeAPP() {
				uni.scanCode({
					scanType: ['qrCode'],
					success: (res) => {
						this.qrCodeRes = res.result
					}
				})
			},
			// H5通过拉起相机拍照来识别二维码
			scanCodeH5() {
				uni.chooseImage({
					count: 1,
					success: imgRes => {
						Qrcode.qrcode.decode(this.getObjectURL(imgRes.tempFiles[0]))
						Qrcode.qrcode.callback = (codeRes) => {
							if (codeRes.indexOf('error') >= 0) {
								// 二维码识别失败
								this.qrCodeRes = '不合法二维码：' + codeRes
							} else {
								// 二维码识别成功
								let r = this.decodeStr(codeRes)
								this.qrCodeRes = r
							}
						}
					}
				})
			},
			// 获取文件地址函数
			getObjectURL(file) {
				var url = null
				if (window.createObjectURL !== undefined) { // basic
					url = window.createObjectURL(file)
				} else if (window.URL !== undefined) { // mozilla(firefox)
					url = window.URL.createObjectURL(file)
				} else if (window.webkitURL !== undefined) { // webkit or chrome
					url = window.webkitURL.createObjectURL(file)
				}
				return url
			},
			// 解码，输出：中文
			decodeStr(str) {
				var out, i, len, c;
				var char2, char3;
				out = "";
				len = str.length;
				i = 0;
				while (i < len) {
					c = str.charCodeAt(i++);
					switch (c >> 4) {
						case 0:
						case 1:
						case 2:
						case 3:
						case 4:
						case 5:
						case 6:
						case 7:
							// 0xxxxxxx
							out += str.charAt(i - 1);
							break;
						case 12:
						case 13:
							// 110x xxxx 10xx xxxx
							char2 = str.charCodeAt(i++);
							out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
							break;
						case 14:
							// 1110 xxxx 10xx xxxx 10xx xxxx
							char2 = str.charCodeAt(i++);
							char3 = str.charCodeAt(i++);
							out += String.fromCharCode(((c & 0x0F) << 12) |
								((char2 & 0x3F) << 6) |
								((char3 & 0x3F) << 0));
							break;
					}
				}
				return out;
			},
			
			
        }
    }
</script>

<style>
	.content{
		
	}
	.btn{
		display: flex;
		justify-content: space-between;
	}
	.btn input{
		width:calc(100%-80);
		border: 1px solid #ddd;
		height: 40px;
		padding: 15px 10px;
		margin: 10px;
		margin-top: 30px;
		font-size: 26px;
	}
	.btn img{
		width:80px;
		height:80px;
		margin-top:26px;
		margin-right:5px;
	}
	.admin{
		text-align: center;
	}
	.admin button{
		margin:10px;
		margin-top:20px;
		padding: 10px;
		font-size: 24px;
		
	}
</style>