提交 e99b8668 authored 作者: 常超凡's avatar 常超凡
......@@ -6,7 +6,8 @@
"pages/upload/upload",
"pages/anti/anti",
"pages/fenggu/AICheck/AICheck",
"pages/fenggu/takephoto/takephoto"
"pages/fenggu/takephoto/takephoto",
"pages/fenggu/success/success"
],
"window": {
"backgroundTextStyle": "light",
......
assets/fenggu/开始认证.png

4.8 KB | W: | H:

assets/fenggu/开始认证.png

4.6 KB | W: | H:

assets/fenggu/开始认证.png
assets/fenggu/开始认证.png
assets/fenggu/开始认证.png
assets/fenggu/开始认证.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -4,7 +4,18 @@ Page({
const values = 'fenggu'
wx.navigateTo({
// url: '../takePhoto/takePhoto'
url: '/pages/cameraTakePhoto/cameraTakePhoto?param=' + values,
url: '/pages/cameraTakePhoto/cameraTakePhoto?param=' + values
})
},
// 关闭遮罩层
closeMask() {
this.setData({
showMask: false
})
},
// 联系客服
handleServe() {
console.log(999)
}
})
<view class="AICheck">
<image src="/assets/fenggu/ai认证背景.jpg" class="bgImage" />
<view class="content-box">
<image src="/assets/fenggu/logo.png" mode="widthFix" class="logo-img"/>
<image src="/assets/fenggu/logo.png" mode="widthFix" class="logo-img" />
<image src="/assets/fenggu/AI.png" mode="widthFix" class="ai-img"/>
<image src="/assets/fenggu/开始认证.png" bindtap="takePhoto" mode="widthFix" style="width: 400rpx;"/>
</view>
<view wx:if="{{showMask}}" class="mask">
<!-- 未通过 -->
<view class="fali mask-card" wx:if="{{false}}">
<image src="/assets/fenggu/未通过卡片.png" mode="widthFix" />
<view class="content">
<view class="top">
<view class="reason">
<text>未通过</text>
<text>请重新认证!</text>
</view>
<image bind:tap="closeMask" src="/assets/fenggu/关闭.png" mode="widthFix" style="width: 50rpx;" />
</view>
<view class="text">
请保证相机稳定,检查标签码<text style="font-weight: 700;">是否有破损,并前往光照适宜的环境进行验证。</text>
</view>
<view class="btn-box">
<text class="link">验证流程有疑问?点击跳转</text>
<view class="btn" style="background-color: #FFB44C;">重新验证</view>
</view>
</view>
</view>
<!-- 不是标签 -->
<view class="fali mask-card" wx:if="{{true}}" >
<image src="/assets/fenggu/不是标签卡片.png" mode="widthFix" />
<view class="content">
<view class="top">
<view class="reason">
<text>请注意此标签</text>
<text>可能存在问题!</text>
</view>
<image bind:tap="closeMask" src="/assets/fenggu/关闭.png" mode="widthFix" style="width: 50rpx;" />
</view>
<view class="text">
请确认标签<text style="font-weight: 700;">是否在电子设备上进行识别</text>,可结合标签物理触感进行二次验证,<text bind:tap="handleServe" style="color: #1340E7;text-decoration: underline;">可点击联系客服</text>必要时处理。
</view>
<view class="btn-box">
<text class="link">验证流程有疑问?点击跳转</text>
<view class="btn" style="background-color: #FF7E7E;">重新验证</view>
</view>
</view>
</view>
</view>
</view>
\ No newline at end of file
......@@ -32,3 +32,79 @@
margin: 100rpx 0;
width: 450rpx;
}
.AICheck .mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 99999;
background: rgba(0, 0, 0, 0.6);
box-sizing: border-box;
}
.mask-card {
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-sizing: border-box;
}
.mask-card image {
width: 100%;
}
.mask-card .content {
position: absolute;
top: 0;
left: 0;
padding: 50rpx;
width: 100%;
height: 100%;
z-index: 99999;
box-sizing: border-box;
}
.mask-card .content .top {
display: flex;
justify-content:space-between;
}
.mask-card .content .reason {
display: flex;
flex-direction: column;
font-size: 40rpx;
}
.mask-card .content .text {
margin: 80rpx 0;
line-height: 48rpx;
}
.mask-card .content .btn-box {
text-align: center;
}
.mask-card .content .btn-box {
display: flex;
flex-direction: column;
align-items: center;
}
.mask-card .content .btn-box .link {
font-size: 26rpx;
text-decoration: underline;
}
.mask-card .content .btn-box .btn {
margin: 20rpx;
font-size: 36rpx;
font-weight: 700;
width: 80%;
height: 80rpx;
line-height: 80rpx;
border-radius: 80rpx;
background-color: #FFB44C;
}
\ No newline at end of file
// pages/fenggu/success/success.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
\ No newline at end of file
{
"usingComponents": {}
}
\ No newline at end of file
<view class="successPage">
<image src="/assets/fenggu/认证成功背景.jpg" style="height: 100%;width: 100%;"/>
<view class="content-box">
<view class="logo">
<image src="/assets/fenggu/logo.png" mode="widthFix" style="width: 280rpx;"/>
</view>
<view class="info">
<image src="/assets/fenggu/打勾.png" mode="widthFix" style="margin: 20rpx 0;width: 100rpx;"/>
<view class="text">
<view class="title tshadow">认证成功</view>
<view class="success-info">
<text class="tshadow" style="font-size: 34rpx;">该产品为丰谷酒业正品标识,请放心使用!</text>
<text style="font-size: 22rpx;">本次认证时间:2024年1月19日14:31:06 本次认证耗时:0.388S</text>
</view>
</view>
</view>
</view>
</view>
\ No newline at end of file
.successPage {
width: 100vw;
height: 100vh;
box-sizing: border-box;
}
.content-box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 999;
}
.logo {
padding: 40rpx 0 0 40rpx;
}
.info {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: #FBBF30;
}
.info .text .title {
font-size: 50rpx;
}
.tshadow {
text-shadow: -10rpx 0 10rpx #333;
}
.info .text .success-info {
margin: 20rpx 0;
display: flex;
flex-direction: column;
align-items: center;
}
\ No newline at end of file
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论