emblemscanner: Add scan guide
This commit is contained in:
Fam Zheng
parent
ff358cf595
commit
8c315b1c3f
BIN
scanner/pages/emblemscanner/assets/return.png
Normal file
BIN
scanner/pages/emblemscanner/assets/return.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
scanner/pages/emblemscanner/assets/scan-guide-qr.png
Normal file
BIN
scanner/pages/emblemscanner/assets/scan-guide-qr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
scanner/pages/emblemscanner/assets/scan-guide-qrmarkers-glow.png
Normal file
BIN
scanner/pages/emblemscanner/assets/scan-guide-qrmarkers-glow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
scanner/pages/emblemscanner/assets/scan-guide-qrmarkers.png
Normal file
BIN
scanner/pages/emblemscanner/assets/scan-guide-qrmarkers.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@ -361,6 +361,7 @@ Page({
|
||||
|
||||
|
||||
show_scanguide() {
|
||||
console.log('show_scanguide');
|
||||
this.setData({
|
||||
show_modal: 'scanguide',
|
||||
show_tip: false
|
||||
|
||||
@ -177,13 +177,49 @@
|
||||
</view>
|
||||
|
||||
<!-- Scan Guide -->
|
||||
<view wx:if="{{ show_modal == 'scanguide' }}" class="modal">
|
||||
<view class="modal-content">
|
||||
<text>扫描指南</text>
|
||||
<view>1. 将QR码置于框内</view>
|
||||
<view>2. 保持稳定</view>
|
||||
<view>3. 确保光线充足</view>
|
||||
<button bindtap="close_modal">开始扫描</button>
|
||||
<button bindtap="show_service">联系客服</button>
|
||||
<view wx:if="{{ show_modal == 'scanguide' }}" class="scanguide-mask">
|
||||
<view class="scanguide-container">
|
||||
<view class="scanguide-header">
|
||||
<view class="scanguide-title-text">
|
||||
扫描指南
|
||||
</view>
|
||||
<view class="scanguide-subtitle">
|
||||
按以下步骤完成扫描
|
||||
</view>
|
||||
</view>
|
||||
<view class="scanguide-content">
|
||||
<view class="scanguide-title">
|
||||
<view class="scanguide-text1">
|
||||
移近一点
|
||||
</view>
|
||||
<view class="scanguide-text2">
|
||||
等待对焦
|
||||
</view>
|
||||
<view class="scanguide-text3">
|
||||
对齐定位点
|
||||
</view>
|
||||
<view class="scanguide-text4">
|
||||
采集完成
|
||||
</view>
|
||||
</view>
|
||||
<view class="scanguide-scan">
|
||||
<image class="scanguide-markers-glow" src="./assets/scan-guide-qrmarkers-glow.png"></image>
|
||||
<image class="scanguide-markers" src="./assets/scan-guide-qrmarkers.png"></image>
|
||||
<image class="scanguide-qr" src="./assets/scan-guide-qr.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="scanguide-actions">
|
||||
<view class="scanguide-buttons">
|
||||
<view class="scanguide-left-half">
|
||||
<button bindtap="show_service">人工客服</button>
|
||||
</view>
|
||||
<view class="scanguide-right-half">
|
||||
<button bindtap="close_modal">
|
||||
<image class="scanguide-return" src="./assets/return.png" />
|
||||
采集
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -428,4 +428,243 @@ view.tooltip {
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scanguide modal styles - inlined from scanguide component */
|
||||
.scanguide-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.scanguide-container {
|
||||
position: fixed;
|
||||
top: 75rpx;
|
||||
left: 75rpx;
|
||||
z-index: 200;
|
||||
width: 600rpx;
|
||||
height: 1000rpx;
|
||||
border-radius: 15rpx;
|
||||
background-image: linear-gradient(0deg, #8b8986 0%, #414141 36%, #414141 92%, #515151 100%);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.scanguide-header {
|
||||
padding: 40rpx 0 20rpx 0;
|
||||
}
|
||||
|
||||
.scanguide-content {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 400rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.scanguide-title {
|
||||
margin-top: 0rpx;
|
||||
color: #eee;
|
||||
position: relative;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.scanguide-title view {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.scanguide-text1 {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
animation: scanguide-anime-text-1 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scanguide-anime-text-1 {
|
||||
0%, 5% { opacity: 0; }
|
||||
8%, 38% { opacity: 1; }
|
||||
40%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
.scanguide-text2 {
|
||||
animation: scanguide-anime-text-2 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scanguide-anime-text-2 {
|
||||
0%, 45% { opacity: 0; }
|
||||
48%, 60% { opacity: 1; }
|
||||
63%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
.scanguide-text3 {
|
||||
animation: scanguide-anime-text-3 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scanguide-anime-text-3 {
|
||||
0%, 75% { opacity: 0; }
|
||||
78%, 90% { opacity: 1; }
|
||||
93%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
.scanguide-text4 {
|
||||
animation: scanguide-anime-text-4 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scanguide-anime-text-4 {
|
||||
0%, 90% { opacity: 0; }
|
||||
93%, 98% { opacity: 1; }
|
||||
100% { opacity: 0; }
|
||||
}
|
||||
|
||||
.scanguide-scan {
|
||||
background-color: #aaa;
|
||||
padding: 30rpx 0;
|
||||
border-radius: 15rpx;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 400rpx;
|
||||
top: 80rpx;
|
||||
}
|
||||
|
||||
.scanguide-markers {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 340rpx;
|
||||
left: 30rpx;
|
||||
height: 340rpx;
|
||||
z-index: 3;
|
||||
animation: scanguide-anime-markers 10s linear infinite;
|
||||
}
|
||||
|
||||
.scanguide-markers-glow {
|
||||
position: absolute;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 340rpx;
|
||||
left: 30rpx;
|
||||
height: 340rpx;
|
||||
z-index: 2;
|
||||
animation: scanguide-anime-markers-glow 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scanguide-anime-markers-glow {
|
||||
0%, 90% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.scanguide-qr {
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
display: block;
|
||||
width: 340rpx;
|
||||
left: 30rpx;
|
||||
height: 340rpx;
|
||||
animation: scanguide-anime-qr 10s linear infinite;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@keyframes scanguide-anime-qr {
|
||||
0% {
|
||||
transform: scale(0.3);
|
||||
}
|
||||
10% {
|
||||
transform: scale(0.3) translate(-6%, 6%);
|
||||
}
|
||||
20% {
|
||||
transform: scale(0.42) translate(-3%, 1%);
|
||||
}
|
||||
30% {
|
||||
transform: scale(0.43);
|
||||
filter: blur(0);
|
||||
}
|
||||
47% {
|
||||
transform: scale(1.02) translate(-6%, -5%);
|
||||
filter: blur(3.5px);
|
||||
}
|
||||
60% {
|
||||
transform: scale(1.05) translate(-5%, 1%);
|
||||
filter: blur(3.5px);
|
||||
}
|
||||
63% {
|
||||
transform: scale(1.05) translate(-6%, -1%);
|
||||
filter: blur(0);
|
||||
}
|
||||
90% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.scanguide-actions {
|
||||
padding: 20rpx 0 40rpx 0;
|
||||
}
|
||||
|
||||
.scanguide-actions .scanguide-buttons {
|
||||
display: block;
|
||||
width: 500rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.scanguide-title-text {
|
||||
color: #eee;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.scanguide-subtitle {
|
||||
color: #ccc;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.scanguide-left-half {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.scanguide-right-half {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.scanguide-buttons button {
|
||||
display: inline-block;
|
||||
width: 220rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.scanguide-left-half button {
|
||||
border: 1px solid #666;
|
||||
border: 1px solid rgba(239, 72, 35, 0.7);
|
||||
color: rgba(239, 72, 35, 0.7);
|
||||
background-color: #666;
|
||||
border: 1px solid #555;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.scanguide-right-half button {
|
||||
border: 1px solid rgba(239, 72, 35, 0.7);
|
||||
color: rgba(239, 72, 35, 0.7);
|
||||
}
|
||||
|
||||
.scanguide-return {
|
||||
height: 18rpx;
|
||||
width: 18rpx;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user