5 changed files with 244 additions and 41 deletions
-
6src/pages.json
-
4src/pages/order/list.vue
-
36src/subpackage/order/components/detail/verify.vue
-
75src/subpackage/order/pages/detail.vue
-
162src/subpackage/order/pages/enter_code.vue
@ -0,0 +1,162 @@ |
|||||
|
<script setup> |
||||
|
import { onLoad } from '@dcloudio/uni-app'; |
||||
|
import { reactive, ref } from 'vue'; |
||||
|
import server from '@/api/server'; |
||||
|
const codeInfo = ref({}); // 核销码信息 |
||||
|
onLoad(option => { |
||||
|
server.post({ |
||||
|
url: '/stadium/order/session/get' + `/${option?.code_id ?? ''}`, |
||||
|
data: { |
||||
|
id: option?.code_id |
||||
|
} |
||||
|
}) |
||||
|
.then(res => { |
||||
|
console.log('获取code详情', res); |
||||
|
codeInfo.value = res?.data || {}; |
||||
|
}) |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
// 复制核销码 |
||||
|
function copyVerifyCode(code = ''){ |
||||
|
uni.setClipboardData({ data: `${code}` }); |
||||
|
} |
||||
|
|
||||
|
// 是否显示二维码状态覆盖 |
||||
|
function isShowCodeMask(_showCodeInfo){ |
||||
|
if(!_showCodeInfo)return false; |
||||
|
let _status = _showCodeInfo.status || ''; |
||||
|
// 20230823 多次进出， 【ID1001365】次卡多次进出需求 |
||||
|
if(+_status === 2 && _showCodeInfo.is_many_enter)return false; |
||||
|
return [ 2, 3, 4, -1 ].includes(+_status) || _showCodeInfo.qr_status != 1; |
||||
|
} |
||||
|
|
||||
|
// 二维码失效覆盖icon |
||||
|
// 20210111 2（已使用）/3（已失效）/4（已退款）/-1（已失效）, 目前只有4个状态 |
||||
|
function codeMaskImgPath(status){ |
||||
|
if(status==2||status==4)return `status_${status}.png`; |
||||
|
if(!status)return 'status_3.png'; |
||||
|
return 'status_3.png' |
||||
|
} |
||||
|
|
||||
|
// 预览核销码 |
||||
|
function previewCode(e){ |
||||
|
if(isShowCodeMask(e))return; |
||||
|
uni.previewImage({ urls: [e.verify_qrcode] }) |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<view class="order-enter-code"> |
||||
|
<view class="oec-section" v-if="codeInfo?.id"> |
||||
|
<view class="os-stadium"> |
||||
|
<image mode="aspectFit" :src="codeInfo?.stadium_logo ?? ''"></image> |
||||
|
<view>{{ codeInfo?.stadium_name ?? '-' }}</view> |
||||
|
</view> |
||||
|
<view class="cci-tip"> |
||||
|
<view class="ct-text"> |
||||
|
<text>点击二维码可放大查看</text> |
||||
|
<!-- <view class="ct-tag">可再次进场</view> --> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="cci-code"> |
||||
|
<image @click="previewCode(codeInfo)" mode="aspectFit" :src="codeInfo?.verify_qrcode ?? ''"></image> |
||||
|
<!-- <view class="cc-cover" v-if="isShowCodeMask(codeInfo)" @click.prevent="_=>false"> |
||||
|
<image mode="aspectFit" :src="'/subpackage/venue/static/images/appoint/'+ codeMaskImgPath(codeInfo&&codeInfo.status)" ></image> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
<view class="cci-v-code"> |
||||
|
验证码：{{ codeInfo?.verify_code ?? '' }} |
||||
|
<text v-if="codeInfo?.verify_code" @click="copyVerifyCode(codeInfo?.verify_code)">复制</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
page{ |
||||
|
background-color: #fff; |
||||
|
} |
||||
|
.order-enter-code{ |
||||
|
@include isPd(0upx); |
||||
|
|
||||
|
} |
||||
|
.oec-section{ |
||||
|
padding-bottom: 60upx; |
||||
|
.os-stadium{ |
||||
|
@include ctf(flex-start); |
||||
|
padding: 30upx; |
||||
|
>image{ |
||||
|
flex-shrink: 0; |
||||
|
margin-right: 10upx; |
||||
|
width: 40upx; |
||||
|
height: 40upx; |
||||
|
} |
||||
|
>view{ |
||||
|
@include tHide(1); |
||||
|
@include flcw(28upx, 40upx, #333, 500); |
||||
|
} |
||||
|
} |
||||
|
.cci-tip{ |
||||
|
padding: 20upx 0 14upx; |
||||
|
@include ctf(center); |
||||
|
.ct-text{ |
||||
|
position: relative; |
||||
|
text-align: center; |
||||
|
font-size: 24upx; |
||||
|
@include flcw(24upx, 34upx, #9A9A9D, 500); |
||||
|
.ct-tag{ |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
transform: translateX(100%); |
||||
|
margin-right: -24upx; |
||||
|
padding: 0 4upx; |
||||
|
text-align: center; |
||||
|
border: 1px solid #68C43B; |
||||
|
border-radius: 4upx; |
||||
|
@include flcw(18upx, 28upx, #68C43B); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.cci-code{ |
||||
|
margin: 0 auto 8upx; |
||||
|
position: relative; |
||||
|
width: 384upx; |
||||
|
height: 384upx; |
||||
|
>image{ |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
border: 0; |
||||
|
} |
||||
|
.cc-cover{ |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background-color: rgba($color: #fff, $alpha: .8); |
||||
|
>image{ |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
width: 152upx; |
||||
|
height: 152upx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.cci-v-code{ |
||||
|
margin-bottom: 34upx; |
||||
|
text-align: center; |
||||
|
@include flcw(28upx, 40upx, #333, 600); |
||||
|
>text{ |
||||
|
color: $mColor; |
||||
|
margin-left: 28upx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue