项目启动

npm install

npm start

npm run build//打包

将打包好的dist文件放到hbuilder中转换成app


 

< template >
< div >
   < topbar title= "扫码" >
     < router-link to= "/home" slot= "left" @click.native=' cancelScan' class= "mui-action-back mui-icon mui-icon-left-nav mui-pull-left" ></ router-link >
   </ topbar >
< div class= "mui-content" >
< div class= "scan" >
< div id= "bcid" >
< div class= "content" ></ div >
< p class= "tip" >...载入中... </ p >
</ div >
< footer >
< button @click=" startScan" v-show=" isShow" >点击扫描 </ button >
< button @click=" cancelScan" >取消 </ button >
</ footer >
</ div >
</ div >
</ div >
</ template >

< script type= 'text/ecmascript-6' >

let scan = null;
//点手机虚拟返回键
document. addEventListener( "plusready", function() {
// 注册返回按键事件
plus. key. addEventListener( 'backbutton', function() {
// 事件处理
scan. close(); //关闭条码识别控件
window. history. back();
}, false);
});
   export default{
data(){
return{
codeUrl: '',
isShow: true
}
},
components:{
topbar
},
mounted () {
this. startScan()//进入页面就调取扫一扫
},
created(){
this. startRecognize();
this. startScan();
},
methods: {
//创建扫描控件
startRecognize() {
let that = this;
if (! window. plus) return;
that. isShow= false;
// 创建条码扫描识别控件
scan = new plus. barcode. Barcode( 'bcid');
// 条码识别成功
scan. onmarked = onmarked;
function onmarked( type, result, file) {
switch ( type) {
case plus. barcode. QR:
type = 'QR';
break;
case plus. barcode. EAN13:
type = 'EAN13';
break;
case plus. barcode. EAN8:
type = 'EAN8';
break;
default:
type = '其它' + type;
break;
}
result = result. replace( /\n/ g, '');
that. codeUrl = result; //扫描后返回值
alert( result);
scan. cancel(); //关闭扫描
scan. close(); //关闭条码识别控件
if( that. codeUrl){
that. isShow= true
}
}
},
//开始扫描
startScan() {
if (! window. plus) return;
this. startRecognize() //创建控件
scan. start();
},

cancelScan(){
this. isShow= true;
scan. cancel(); //关闭扫描
scan. close(); //关闭条码识别控件
}
}
  };
</ script >
< style scoped >
.mui-content{
padding: 44px 0 60px 0; /*px*/
box-sizing: border-box;
margin-top: 60px; /*px*/
}
.scan {
height: 100%;
}
.scan #bcid {
width: 100%;
position: absolute;
left: 0;
right: 0;
top: 50px; /*px*/
bottom: 3rem;
text-align: center;
color: #fff;
background: #ccc;
}
.scan footer {
position: absolute;
left: 50%;
transform: translate( -50%);
bottom: 1rem;
width: 100%;
height: 1rem;
/*line-height: 2rem;*/
z-index: 2;
display: flex;
justify-content: center;
}
.scan footer button{
width: 45%;
font-size: 30px; /*px*/
}
.clickBtn,.cancelBtn{
margin-top: 20px; /*px*/
width: 150px; /*px*/
height: 60px; /*px*/
text-align: center;;
}
.cancelBtn{
margin-left: 20px; /*px*/
}
</ style >


Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue