feat(checkResult): 优化检票结果页面并添加返回首页功能- 优化了 checkResult 页面的布局和样式

- 添加了 onBackPress 生命周期方法,实现返回首页的功能
- 修改了 index 页面的快速扫描逻辑,增加了对扫描结果的验证
main
Tuzki 7 months ago
parent 996a8e5bda
commit 69f3dfe34c
  1. 125
      pages/checkResult/checkResult.vue
  2. 4
      pages/index.vue

@ -1,27 +1,27 @@
<template>
<view class="m-content">
<uni-nav-bar color="#fff" :fixed="true" :border="false" class="m-nav-bar" status-bar left-icon="left" left-text="" title="扫码检票" @clickLeft="back" />
<view class="m-ticket-status" v-if="checkInfo!=null&&!load">
<view class="m-ticket-status" v-if="checkInfo != null && !load">
<view class="m-head-bg">
<view class="m-head-content" :class="checkInfo.ticketCheckedNums > checkInfo.ticketChecksNums?'used':'success'">
<view class="m-head-content" :class="checkInfo.ticketCheckedNums > checkInfo.ticketChecksNums ? 'used' : 'success'">
<!-- <img class="success" src="/static/images/index/success.png" alt="" /> -->
<span>{{checkInfo.ticketCheckedNums > checkInfo.ticketChecksNums?'已使用':'检票成功'}}</span>
<span>{{ checkInfo.ticketCheckedNums > checkInfo.ticketChecksNums ? '已使用' : '检票成功' }}</span>
</view>
</view>
<view class="m-ticket-out">
<view class="m-ticket-name">
<img src="/static/images/index/icon_vote1.png" alt="" />
<span>{{checkInfo.ticketname}}</span>
<span>{{ checkInfo.ticketname }}</span>
</view>
<view class="m-driver top"></view>
<view class="m-ticket-inf">
<view class="m-inf-row">
<view class="m-row-label">票号</view>
<view class="m-row-value">{{checkInfo.ticketNumber}}</view>
<view class="m-row-value">{{ checkInfo.ticketNumber }}</view>
</view>
<view class="m-inf-row">
<view class="m-row-label">检票员</view>
<view class="m-row-value">{{checkInfo.conductorname}}</view>
<view class="m-row-value">{{ checkInfo.conductorname }}</view>
</view>
<!-- <view class="m-inf-row">
<view class="m-row-label">检票点</view>
@ -29,28 +29,24 @@
</view> -->
<view class="m-inf-row">
<view class="m-row-label">已入园次数</view>
<view class="m-row-value red">{{checkInfo.ticketCheckedNums}}/{{checkInfo.ticketChecksNums}}</view>
<view class="m-row-value red">{{ checkInfo.ticketCheckedNums }}/{{ checkInfo.ticketChecksNums }}</view>
</view>
<view class="m-inf-row">
<view class="m-row-label">本次检票次数</view>
<view class="m-row-value">{{checkInfo.ticketCheckedNums > checkInfo.ticketChecksNums?'0':'1'}}</view>
<view class="m-row-value">{{ checkInfo.ticketCheckedNums > checkInfo.ticketChecksNums ? '0' : '1' }}</view>
</view>
<view class="m-inf-row">
<view class="m-row-label">检票时间</view>
<view class="m-row-value">{{parseTime(checkInfo.checkedTime)}}</view>
<view class="m-row-value">{{ parseTime(checkInfo.checkedTime) }}</view>
</view>
</view>
<view class="m-driver-bottom"></view>
</view>
</view>
<view class="m-ticket-err" v-if="!load&&checkInfo==null">
<view class="m-ticket-err" v-if="!load && checkInfo == null">
<image src="@/static/images/index/err.png" alt="" />
<view class="m-err-tips">
票据无效
</view>
<view class="m-err-tip">
此票据无效或已过期
</view>
<view class="m-err-tips">票据无效</view>
<view class="m-err-tip">此票据无效或已过期</view>
</view>
<button v-if="isQuick" class="m-btn-big deep-blue" @click="qucikCheckTicket">继续检票</button>
<button v-if="!isQuick" class="m-btn-big" @click="checkTicket">继续检票</button>
@ -58,48 +54,50 @@
</template>
<script>
import {handsetCheckTicket} from '@/api/seal/seal.js'
import { parseTime } from '../../utils/ruoyi';
import { handsetCheckTicket } from '@/api/seal/seal.js';
import { parseTime } from '../../utils/ruoyi';
export default {
data() {
return {
checkInfo:null,
load:false,
isQuick:false
checkInfo: null,
load: false,
isQuick: false
};
},
onLoad(params) {
console.log(params)
if(params.result&&params.result!=''){
this.load = true
this.isQuick = params.quick == 1?true:false
console.log(params);
if (params.result && params.result != '') {
this.load = true;
this.isQuick = params.quick == 1 ? true : false;
uni.showLoading({
title:'请稍后'
})
title: '请稍后'
});
const obj = {
ticketQrCode:params.result,
ticketQrCode: params.result,
// ticketQrCode:'SC202408221345563143348_1',
devCode:uni.getStorageSync('SNcode')
devCode: uni.getStorageSync('SNcode')
// devCode:'V30723CU20870'
}
handsetCheckTicket(obj).then(res=>{
uni.hideLoading()
this.load = false
console.log(res)
this.checkInfo = res.data
}).catch(err=>{
uni.hideLoading()
this.load = false
console.log(err)
this.checkInfo = null
})
};
handsetCheckTicket(obj)
.then((res) => {
uni.hideLoading();
this.load = false;
console.log(res);
this.checkInfo = res.data;
})
.catch((err) => {
uni.hideLoading();
this.load = false;
console.log(err);
this.checkInfo = null;
});
}
//SC202408221354539668016_1,SC202408221354540164129_1
// const obj = {
// ticketQrCode:params.result,
// ticketQrCode:'SC202408221425517427956_1',
// devCode:uni.getStorageSync('SNcode')
// devCode:'V30723CU20870'
// ticketQrCode:params.result,
// ticketQrCode:'SC202408221425517427956_1',
// devCode:uni.getStorageSync('SNcode')
// devCode:'V30723CU20870'
// }
// handsetCheckTicket(obj).then(res=>{
// console.log(res)
@ -109,13 +107,22 @@ export default {
// this.checkInfo = null
// })
},
// methods
onBackPress(options) {
//
this.qucikCheckTicket();
// return true
return true;
},
methods: {
qucikCheckTicket(){
qucikCheckTicket() {
uni.reLaunch({
url: '/pages/index'
})
});
},
checkTicket(){
checkTicket() {
uni.scanCode({
onlyFromCamera: true,
scanType: ['qrCode'],
@ -125,17 +132,17 @@ export default {
console.log('条码类型:' + res.scanType);
console.log('条码内容:' + res.result);
uni.redirectTo({
url: '/pages/checkResult/checkResult?result='+res.result
url: '/pages/checkResult/checkResult?result=' + res.result
});
}
});
},
parseTime(val){
return parseTime(val)
parseTime(val) {
return parseTime(val);
},
back() {
uni.reLaunch({
url:'/pages/index'
url: '/pages/index'
});
}
}
@ -294,23 +301,23 @@ export default {
}
}
.m-ticket-err{
.m-ticket-err {
display: flex;
align-items: center;
flex-direction: column;
margin-top: 160upx;
image{
image {
width: 228upx;
height: 165upx;
}
.m-err-tips{
.m-err-tips {
font-family: Source Han Sans SC;
font-weight: 500;
font-size: 40upx;
color: #333333;
margin-top: 50upx;
}
.m-err-tip{
.m-err-tip {
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 26upx;
@ -319,8 +326,8 @@ export default {
}
}
.m-btn-big{
background: linear-gradient(90deg, #5097FA 0%, #2277F0 100%);
.m-btn-big {
background: linear-gradient(90deg, #5097fa 0%, #2277f0 100%);
border-radius: 16upx;
color: #fff;
position: fixed;
@ -329,7 +336,7 @@ export default {
transform: translateX(-50%);
bottom: 50upx;
}
.deep-blue{
.deep-blue {
background: linear-gradient(90deg, #4582dd 0%, #1a63ca 100%);
}
</style>

@ -87,7 +87,9 @@ export default {
watch:{
quickScanData:{
handler(val){
this.qucikScan()
if(val.includes('_')&&val.split('_').length>0&&val.split('_')[0].length==23){
this.qucikScan()
}
}
}
},

Loading…
Cancel
Save