5 changed files with 244 additions and 41 deletions
-
6src/pages.json
-
4src/pages/order/list.vue
-
36src/subpackage/order/components/detail/verify.vue
-
77src/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