caoliancun/LSM_OIL_SITE
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

自定义扫码界面

Browse Source
This commit is contained in:
xk_guohonglei
2020-10-28 10:47:16 +08:00
parent 9320a99366
commit 679c43a03e
10 changed files with 301 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
pages/home/home.vue
View File

@@ -4,6 +4,7 @@
<block slot="content">{{site.oilSiteName?site.oilSiteName:'星油云站'}}</block>
</cu-custom>
<view class="main-money bg-main-oil">
<view class="padding-xs flex align-center">
<view class="flex-sub text-center padding-top-lg">
<view class="txet-xxs">
@@ -98,14 +99,14 @@
<script>
import cloudSiteApi from '@/api/cloud-site.js'
export default {
props:{
userAccount:{
type:Object,
default(){}
props: {
userAccount: {
type: Object,
default () {}
},
site:{
type:Object,
default(){}
site: {
type: Object,
default () {}
}
},
data() {
@@ -172,40 +173,33 @@
}
},
methods: {
scanQr() {
var that = this
uni.scanCode({
onlyFromCamera: true,
success: function(res) {
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
uni.setStorageSync('qrCode', res.result)
uni.navigateTo({
url: that.scanUrl,
fail: (err) => {
console.log(err)
},
success: (res) => {
console.log('chengg', res)
}
})
},
// 方便测试
// complete: () => {
// uni.setStorageSync('qrCode', 'XM&1309328197641433088')
// uni.navigateTo({
// url: that.scanUrl,
// fail: (err) => {
// console.log(err)
// },
// success: (res) => {
// console.log('chengg', res)
// }
// })
// }
scanQr() {
var scanUrl
scanUrl = '/pages/station-info/scan-camera/scan-camera'
uni.navigateTo({
url: scanUrl,
fail: (err) => {
console.log(err)
},
success: (res) => {
console.log('chengg', res)
},
})
// 方便测试
// complete: () => {
// uni.setStorageSync('qrCode', 'XM&1309328197641433088')
// uni.navigateTo({
// url: that.scanUrl,
// fail: (err) => {
// console.log(err)
// },
// success: (res) => {
// console.log('chengg', res)
// }
// })
// }
},
// 方便开发
// scanQr() {

39
pages/index/index.vue
View File

@@ -3,12 +3,6 @@
<home v-if="PageCur=='home'||PageCur=='scan'" :user-account="userAccount" :site="site"></home>
<setup v-if="PageCur=='setup'"></setup>
<view class="action text-gray add-action" @tap="scanCode1" data-cur="scan">
<button class="cu-btn cuIcon-scan sl shadow" :class="PageCur=='scan'?'bg-main-oil':'bg-gradual-orange'"></button>
<text :class="PageCur=='scan'?'text-red':'text-gray'">
一键扫码
</text>
</view>
<view class="bottom-view">
@@ -58,6 +52,7 @@
this.getUserInfo()
},
onShow() {
uni.preloadPage({url: "/pages/station-info/scan-camera/scan-camera"});
const token = uni.getStorageSync('Authorization')
const openid = uni.getStorageSync('device')
if (token && openid) {
@@ -83,11 +78,7 @@
}
},
methods: {
scanCode1(){
uni.navigateTo({
url:'/pages/station-info/scan-camera/scan-camera'
})
},
getSiteInfo() {
cloudSiteApi.getSiteDetail().then(res => {
if (res.code === 20000) {
@@ -106,7 +97,6 @@
uni.stopPullDownRefresh();
if (res.code === 20000) {
this.userAccount = res.data
}
})
@@ -122,22 +112,15 @@
var scanUrl
this.userMenu.forEach((item, index) => {
if (item.name === '扫码加油') {
scanUrl = item.path
uni.scanCode({
onlyFromCamera: true,
success: function(res) {
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
uni.setStorageSync('qrCode', res.result)
uni.navigateTo({
url: scanUrl,
fail: (err) => {
console.log(err)
},
success: (res) => {
console.log('chengg', res)
}
})
// scanUrl = item.path
scanUrl = '/pages/station-info/scan-camera/scan-camera'
uni.navigateTo({
url: scanUrl,
fail: (err) => {
console.log(err)
},
success: (res) => {
console.log('chengg', res)
}
})

8
pages/login/posLogin/posLogin.vue
View File

@@ -36,7 +36,9 @@
<view class="margin-lg padding-lg bottom-bg">
<button class="bg-main-oil round" v-if="showRandom" @tap="loginRandom">登录</button>
<button class="bg-main-oil round" v-else @tap="loginPwd">登录</button>
</view>
<official-account @binderror="bindload" @bindload="binderror"></official-account>
<view class="bottom-part">
<service-hotline />
</view>
@@ -66,6 +68,12 @@
uni.showShareMenu()
},
methods: {
bindload(){
console.log('组件夹杂')
},
binderror(){
console.log('组件夹杂失败')
},
loginWeixin() {
uni.login({
provider: 'weixin',

54
pages/orderList/OrderDetail/OrderDetail.vue
View File

@@ -104,12 +104,12 @@
</view>
<view class="padding-lg padding-top-0 padding-bottom-xl">
<button v-show="formQr" @tap="scanQr" class="bg-main-oil margin-bottom">
<text class="cuIcon-scan padding-right-xs"></text>
<text class="cuIcon-scan padding-right-xs"></text>
继续加油</button>
<button class="bg-red light margin-bottom" @tap="backHome">
<button class="bg-red light margin-bottom" @tap="backHome">
<text class="cuIcon-home padding-right-xs"></text>
返回首页</button>
</view>
</view>
</template>
@@ -120,7 +120,7 @@
return {
// orderId:'',
orderId: uni.getStorageSync('orderId'),
formQr: uni.getStorageSync('formQr')?true:false,
formQr: uni.getStorageSync('formQr') ? true : false,
orderItem: {},
baseURL: this.global.baseURL
}
@@ -128,53 +128,31 @@
created() {
this.getOrderDetail()
},
onHide(){
onHide() {
this.clearStatus()
},
onUnload() {
this.clearStatus()
},
methods: {
clearStatus(){
clearStatus() {
uni.removeStorageSync('formQr')
},
scanQr() {
var that = this
uni.scanCode({
onlyFromCamera: true,
success: function(res) {
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
uni.setStorageSync('qrCode', res.result)
uni.navigateTo({
url: '/pages/stationDetail/stationDetail',
fail: (err) => {
console.log(err)
},
success: (res) => {
console.log('chengg', res)
}
})
scanUrl = '/pages/station-info/scan-camera/scan-camera'
uni.navigateTo({
url: scanUrl,
fail: (err) => {
console.log(err)
},
// 方便测试
// complete: () => {
// uni.setStorageSync('qrCode', 'XM&1309328197641433088')
// uni.navigateTo({
// url: that.scanUrl,
// fail: (err) => {
// console.log(err)
// },
// success: (res) => {
// console.log('chengg', res)
// }
// })
// }
success: (res) => {
console.log('chengg', res)
}
})
},
backHome(){
backHome() {
uni.navigateBack({
delta:2
delta: 2
})
},
copyId(id, name) {

11
pages/qrcode/QrCode_xy.vue
View File

@@ -15,13 +15,13 @@
@result="qrR" />
</view>
</view>
<view @tap="refreashQr" class="text-center padding-bottom-xs padding-bottom-xs">
<view @tap="refreashQr" class="text-center padding-top padding-bottom-xs padding-bottom-xs">
<text class="color-999 font-12">
<text class="cuIcon-refresh padding-right-xs"></text>
<!-- 付款码自动 （25s） -->
付款码
付款码
<text class="oil-main-color">
刷新
刷新
</text>
</text>
</view>
@@ -93,7 +93,7 @@
// 引入二维码库
import QR from "@/utils/wxqrcode.js" // 二维码生成器
import cloudSiteApi from '@/api/cloud-site.js'
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue" //二维码生成器
export default {
components: {
@@ -103,6 +103,7 @@
data() {
return {
oilList: [],
xkPrice:'',
modalName: 'mod',
oilSiteName: '',
qrImg: "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1102530589,2787379918&fm=11&gp=0.jpg",
@@ -183,7 +184,7 @@
console.log('5555')
},
qrInit() {
this.qrImg = QR.createQrCodeImg('我是您粑粑', {
this.qrImg = QR.createQrCodeImg({
size: parseInt(300) //二维码大小
})
console.log('this.qrImg', this.qrImg)

300
pages/station-info/scan-camera/scan-camera.vue
View File

@@ -1,96 +1,240 @@
<template>
<view>
<view class="scan-view">
<view class='scan-border'>
<camera class='scan-camera' mode="scanCode" binderror="cameraError" bindscancode='scancode' frame-size='large'>
<cover-image class='cover-corner cover-left-top' src='/images/left-top.png'></cover-image>
<cover-image class='cover-corner cover-right-top' src='/images/right-top.png'></cover-image>
<cover-image class='cover-corner cover-left-bottom' src='/images/left-bottom.png'></cover-image>
<cover-image class='cover-corner cover-right-bottom' src='/images/right-bottom.png'></cover-image>
<view class="page-content">
<cu-custom :isBack="true" class="main-topbar bg-main-oil" bgColor="bg-main-oil">
<block slot="content">扫描二维码</block>
<block slot="backText">返回</block>
</cu-custom>
<camera class='scan-camera' :flash="flashValue" mode="scanCode" binderror="cameraError" bindscancode='scancode'
@scancode="scancode" frame-size='large'>
<cover-view class='scan-animation' :animation="animationData2"></cover-view>
<cover-view class="cover-aquare">
<cover-view class='cover-aquare-inner'></cover-view>
<cover-view class='cover-corner cover-left-top'>
<cover-view class="w-line"></cover-view>
<cover-view class="h-line"></cover-view>
</cover-view>
<cover-view class='cover-corner cover-right-top'>
<cover-view class="w-line w1-line"></cover-view>
<cover-view class="h-line h1-line"></cover-view>
</cover-view>
<cover-view class='cover-corner cover-left-bottom'>
<cover-view class="h-line"></cover-view>
<cover-view class="w-line"></cover-view>
</cover-view>
<cover-view class='cover-corner cover-right-bottom'>
<cover-view class="h-line h3-line"></cover-view>
<cover-view class="w-line w3-line"></cover-view>
</cover-view>
<!-- <cover-view class='scan-animation' animation="{{animation}}"></cover-view> -->
</camera>
<!-- 这里可以处理其他内容 -->
</view>
</view>
</cover-view>
<cover-view class="flash text-center">
<cover-view @tap="touchFlash" class=" text-white lg" v-show="flashValue!='on'">
打开手电筒
</cover-view>
<cover-view @tap="touchFlash" class=" text-white lg" v-show="flashValue=='on'">
关闭手电筒
</cover-view>
</cover-view>
</camera>
</view>
</template>
<script>
let diSrc = 'http://downsc.chinaz.net/Files/DownLoad/sound1/201711/9360.mp3'
let innerAudioContext = wx.createInnerAudioContext()
innerAudioContext.src = diSrc
export default {
data() {
return {
once: false,
lightOn: false,
animationData2: {},
flashValue: 'auto'
}
},
methods: {
onShow() {
this.donghua()
setInterval(() => {
this.donghua()
}, 6000);
},
// onShow() {
// this.donghua()
// },
methods: {
touchFlash() {
if (this.flashValue != 'on') {
this.flashValue = 'on'
} else if (this.flashValue == 'on') {
this.flashValue = 'off'
}
},
donghua() {
var animation2 = uni.createAnimation({
duration: 1000,
timingFunction: 'linear',
})
this.animation2 = animation2
animation2.translateY(235).step({
duration: 3000
})
this.animationData2 = animation2.export()
setTimeout(() => {
animation2.translateY(0).step({
duration: 3000
})
this.animationData2 = animation2.export()
}, 3000)
},
scancode(e) {
if (!this.once) {
var scanUrl = '/pages/stationDetail/stationDetail'
// uni.getStorageSync('scanUrl')
// 提示音
innerAudioContext.play()
console.log('play滴~')
// 校验扫描结果，并处理
let res = e.detail.result
console.log(res)
console.log(e)
uni.setStorageSync('qrCode', res)
this.once = true
uni.redirectTo({
url: scanUrl,
fail: (err) => {
console.log(err)
},
success: (res) => {
console.log('chengg', res)
}
})
}
}
}
}
</script>
<style scoped>
.scan-view {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background-color: #B9BEC4;
position: fixed;
align-items: center;
justify-content: space-around;
}
.scan-border {
width: 94%;
height: 94%;
border: 6rpx solid #08FDFE;
border-radius: 10rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.scan-camera {
width: 500rpx;
height: 500rpx;
border-radius: 6rpx;
margin: 30rpx;
}
.cover-corner {
width: 80rpx;
height: 80rpx;
position: absolute;
}
.cover-left-top {
left: 0;
top: 0;
}
.cover-right-top {
right: 0;
top: 0;
}
.cover-left-bottom {
left: 0;
bottom: 0;
}
.cover-right-bottom {
right: 0;
bottom: 0;
}
.scan-animation {
position: absolute;
top: -10rpx;
left: 10rpx;
width: 480rpx;
height: 8rpx;
background-color: #08FDFE;
border-radius: 50%;
}
.page-content {
overflow: hidden;
}
.scan-camera {
width: 750upx;
height: 92vh;
border-radius: 6rpx;
}
.cover-corner {
position: absolute;
z-index: 2;
}
.cover-left-top {
left: 0upx;
top: 0upx;
}
.cover-right-top {
right: 0;
top: 0;
}
.cover-left-bottom {
left: 0;
bottom: 0;
}
.cover-right-bottom {
right: 0;
bottom: 0;
}
.scan-animation {
position: absolute;
width: 480rpx;
height: 8rpx;
top: 200upx;
left: 135upx;
background-color: #FE0505;
border-radius: 50%;
box-shadow: 5upx 5upx 0 10upx #FE0505;
}
.cover-aquare-inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2upx solid #f1f3f7;
}
.cover-aquare {
position: absolute;
width: 500upx;
height: 500upx;
overflow: inherit;
top: 200upx;
left: 125upx;
/* border: 1px solid #FE0505; */
}
.h-line {
width: 10upx;
height: 20upx;
background-color: #FE0505;
}
.w-line {
width: 30upx;
height: 10upx;
background-color: #FE0505;
}
.h1-line {
width: 10upx;
float: right;
height: 20upx;
}
.w1-line {
width: 30upx;
height: 10upx;
}
.h3-line {
right: -21upx;
position: relative;
z-index: 4;
}
.flash {
position: absolute;
width: 750upx;
top: 800upx;
z-index: 4;
}
.cu-avatar {
text-align: center;
background: transparent;
}
.cu-avatar [class*="cuIcon-"] {
padding-left: 1.5rem;
}
</style>

BIN
static/img/backBar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/img/scanBar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
static/img/yellow-scanBar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

6
utils/request.js
View File

@@ -2,8 +2,12 @@ import axios from 'axios'
import utils from '@/utils/encode'
const service = axios.create({
// baseURL: 'http://192.168.0.104:48080', // 小杰
baseURL: 'http://a27389c632.qicp.vip',
// baseURL: 'http://a27389c632.qicp.vip', // 生产
// baseURL: 'http://121.199.72.230:2333/oil', // 生产,yds测试网关
// baseURL: 'http://192.168.0.112:48080', // 龙龙
baseURL: 'http://31g4904724.picp.vip', // 龙龙出差
// baseURL:'http://datou.wicp.vip',// 龙龙// 龙龙// 龙龙
// baseURL: 'https://www.51xingka.net/oilApp',
timeout: 5000
})