<template>
<view>
<!-- #ifdef APP-PLUS -->
<barcode :style="{height: $store.state.windowHeight + 'px'}" id='1' class="barcode"
:autostart="true"
background="rgb(0,0,0)" frameColor="#FFFFFF" scanbarColor="#FFFFFF"
ref="barcode" :filters="fil"
@marked="success1" @error="fail1"></barcode>
<!-- #endif -->
<view class="navbar" :style="{height: $store.state.statusBarHeight * 2 + 88 + 'upx',
paddingTop: $store.state.statusBarHeight * 2 + 'upx'}">
<view class="flex-between flex-y-center con">
<view class="btn-btn" @click="toBack">
<image class="icon5" src="@/static/image/my/icon5.png" mode="widthFix"></image>
</view>
<view><text class="title">扫一扫</text></view>
<view class="btn-btn-1" @click="toFlash">
<image class="icon6" src="@/static/image/my/icon6.png" mode="widthFix"></image>
</view>
</view>
</view>
<view class="tips"><text class="t1">正在识别中…</text></view>
<view class="tips2">
<view class="tips2-box">
<text class="t2-t">条形码/二维码</text>
</view>
</view>
<view class="tabbar">
<view class="image-box">
<image @click="toNFCPage" class="img" src="@/static/image/my/icon7.png" mode="widthFix"></image>
<image @click="chooseImage" class="img" src="@/static/image/my/icon8.png" mode="widthFix"></image>
</view>
</view>
</view>
</template>
<script>
import {request} from '@/common/http/nvue.api.js'
import isNFC from '@/common/utils.js'
export default {
data() {
return {
fil: [0, 2, 1],
flash: false,
}
},
onLoad() {
this.$nextTick(() => {
setTimeout(() => {
uni.$on('restartScan', () => {
console.log('33333333')
this.$refs.barcode.cancel();
this.$refs.barcode.start();
})
}, 1000)
})
},
onUnload() {
uni.$off('restartScan')
},
mounted() {
console.log("barcode:", this.$refs.barcode)
console.log("start:", this.$refs.barcode.start)
this.$refs.barcode.start();
},
methods: {
toBack() {
uni.navigateBack()
},
// 手电筒
toFlash() {
this.flash = !this.flash
this.$refs.barcode.setFlash(this.flash);
},
chooseImage() {
this.$refs.barcode.cancel();
uni.chooseImage({
count: 1,
sourceType: ['album'],
success: (res) => {
console.log(res)
this.scanImg(res.tempFiles[0].path)
},
fail: err => {
this.$refs.barcode.start();
console.log(err)
}
});
},
scanImg(path) {
plus.barcode.scan(path, (type, reuslt) => {
console.log("Scan success:(" + type + ")" + reuslt);
uni.navigateTo({
url: '/pages/scan/payMoney?url=' + reuslt + '&type=QR'
})
},
err => {
uni.showToast({
title: "未发现指定的条码",
icon: 'none',
duration: 2500
})
setTimeout(() => {
this.$refs.barcode.start();
}, 1500)
})
},
success1(e) {
console.log('e', e)
uni.navigateTo({
url: '/pages/scan/payMoney?url=' + e.detail.message + '&type=QR'
})
},
fail1(e) {
console.log("fail1:" + JSON.stringify(e));
},
toNFCPage() {
if(isNFC()) {
this.$refs.barcode.cancel();
uni.navigateTo({
url: '/pages/scan/nfc?type=PAY_CASHIER'
})
}else {
setTimeout(() => {
uni.navigateBack()
}, 1500)
}
}
}
}
</script>
<style lang="scss" scoped>
.navbar {
width: 750upx;
background: #000;
position: fixed;
top: 0;
z-index: 100;
color: #fff;
align-items: center;
justify-content: center;
.con {
height: 88upx;
width: 690upx;
flex-direction: row;
align-items: center;
.btn-btn {
width: 100upx;
}
.btn-btn-1 {
width: 80upx;
flex-direction: row;
justify-content: center;
}
.title {
font-size: 40upx;
color: #fff;
font-weight: 500;
}
.icon5 {
width: 20upx;
height: 36upx;
display: block;
}
.icon6 {
width: 24upx;
height: 40upx;
display: block;
}
}
}
.tips {
position: fixed;
top: 250upx;
width: 750upx;
align-items: center;
justify-content: center;
.t1 {
color: #fff;
font-size: 32upx;
}
}
.tips2 {
position: fixed;
bottom: 300upx;
width: 750upx;
align-items: center;
justify-content: center;
.tips2-box {
align-items: center;
justify-content: center;
width: 210upx;
height: 40upx;
border-radius: 20upx;
background: #fff;
.t2-t {
font-size: 24upx;
color: #000;
}
}
}
.tabbar {
width: 750upx;
position: fixed;
bottom: 50upx;
align-items: center;
justify-content: center;
.image-box {
width: 600upx;
flex-direction: row;
justify-content: space-between;
align-items: center;
.img {
width: 72upx;
height: 72upx;
display: block;
}
}
}
.barcode {
width: 750rpx;
background-color: #808080;
}
</style>
- 发布:2023-03-09 11:45
- 更新:2023-03-09 16:22
- 阅读:691
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: macOS 13.0.1 M1
HBuilderX类型: 正式
HBuilderX版本号: 3.6.18
手机系统: Android
手机系统版本号: Android 9.0
手机厂商: 小米
手机机型: MI 9 SE , ReamiK40
页面类型: nvue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
App下载地址或H5⽹址: https://mcube.mpaas.accelerate.aliyuncs.com/ALIPUB9C08053141818-default/1.0.5/ANDROID/享云付_39.apk
示例代码:
操作步骤:
- 多次返回上一页,进入扫码界面
- 多次返回上一页,进入扫码界面
预期结果:
- 不会出现扫码黑屏,百分百扫码成功
- 不会出现扫码黑屏,百分百扫码成功
实际结果:
- 多次操作会黑屏
- 多次操作会黑屏
UNIAPP郭 (作者)
上传demo 了,在安卓小米真机上反复操作几次就会黑屏
2023-03-09 13:50