bonus
/
bonus-material-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

OCR 二维码 识别

This commit is contained in:
bb_pan 2025-10-31 13:22:00 +08:00
parent 40476d45b6
commit bd4ff86fdf
2 changed files with 915 additions and 1454 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1468
src/pages/devicesSearch/ocrSearch.vue
View File

File diff suppressed because it is too large Load Diff

901
src/pages/devicesSearch/qrSearch.vue
View File

@ -1,454 +1,447 @@
<template>
<view class="page-container">
<!-- 表单信息区域 -->
<scroll-view scroll-y style="height: 100vh;">
<view class="outbound-btn" @click="scanStart"> 二维码扫描 </view>
<ScanQrCode ref="scanQrCodeRef" @scanSuccess="handleScanSuccess" @scanError="handleScanError" />
<view class="form-section">
<view class="section-header">
<text class="title">设备信息</text>
</view>
<view class="form-content">
<uni-forms :model="formData" label-width="100" :border="true">
<uni-forms-item label="设备类型：" name="maName">
<span class="form-view">{{codeData.maName}}</span>
</uni-forms-item>
<uni-forms-item label="规格型号：" name="maModel">
<span class="form-view">{{codeData.maModel}}</span>
</uni-forms-item>
<uni-forms-item label="二维码编码：" name="qrCode">
<span class="form-view">{{codeData.qrCode}}</span>
</uni-forms-item>
<uni-forms-item label="设备编码：" name="maCode">
<span class="form-view">{{codeData.maCode}}</span>
</uni-forms-item>
<uni-forms-item label="设备状态：" name="maStatus">
<span class="form-view">{{codeData.maStatus}}</span>
</uni-forms-item>
<uni-forms-item label="本次检修时间：" name="checkTimeSynch">
<text class="form-view">{{codeData.thisCheckTime}}</text>
</uni-forms-item>
<uni-forms-item label="下次检修时间：" name="nextCheckTimeSynch">
<text class="form-view">{{codeData.nextCheckTime}}</text>
</uni-forms-item>
<uni-forms-item label="出入库次数：" name="inOutNum">
<text class="form-view">{{codeData.inOutNum}}</text>
</uni-forms-item>
<uni-forms-item label="初次入库：" name="inTime">
<text class="form-view">{{codeData.inTime}}</text>
</uni-forms-item>
<uni-forms-item label="服务工程次数：" name="serviceNum">
<text class="form-view">{{codeData.serviceNum}}</text>
</uni-forms-item>
<uni-forms-item label="检验次数：" name="serviceNum">
<text class="form-view">{{codeData.serviceNum}}</text>
</uni-forms-item>
<uni-forms-item label="更换配件次数：" name="checkNum">
<text class="form-view">{{codeData.checkNum}}</text>
</uni-forms-item>
<uni-forms-item label="报废：" name="scrapTime">
<text class="form-view">{{codeData.scrapTime}}</text>
</uni-forms-item>
<uni-forms-item label="生产厂家：" name="maVender">
<text class="form-view">{{codeData.maVender}}</text>
</uni-forms-item>
<uni-forms-item label="领料单位：" name="leaseUnit">
<text class="form-view">{{codeData.leaseUnit}}</text>
</uni-forms-item>
<uni-forms-item label="领料工程：" name="leaseProject">
<text class="form-view">{{codeData.leaseProject}}</text>
</uni-forms-item>
<uni-forms-item label="领料时间：" name="leaseTime">
<text class="form-view">{{codeData.leaseTime}}</text>
</uni-forms-item>
<uni-forms-item label="退料单位：" name="backUnit">
<text class="form-view">{{codeData.backUnit}}</text>
</uni-forms-item>
<uni-forms-item label="退料工程：" name="backProject">
<text class="form-view">{{codeData.backProject}}</text>
</uni-forms-item>
<uni-forms-item label="退料时间：" name="backTime">
<text class="form-view">{{codeData.backTime}}</text>
</uni-forms-item>
</uni-forms>
</view>
</view>
<div v-if="isOverToday && codeData.nextCheckTime">该工器具已临近下次检验时间，请及时退还至机具（物流）分公司！</div>
<ElectronicSeal v-else v-show="codeData.maId" :maCode="codeData?.maCode" :maId="codeData?.maId" :devType="2" />
</scroll-view>
</view>
</template>
<script setup>
import { ref, computed, onUnmounted } from 'vue'
import { onLoad, onShow, } from '@dcloudio/uni-app'
import { debounce } from 'lodash-es'
import ScanQrCode from '@/pages/devicesSearch/ScanQrCode.vue'
import { getDeviceListAPI } from '@/services/picking/outbound.js'
import ElectronicSeal from '@/components/ElectronicSeal/index.vue'
const scanQrCodeRef = ref(null)
const queryParams = ref({})
const formData = ref({})
// 编码设备列表查询参数
const queryCodeParams = ref({
maCode: '',
})
const qrCodeScan = ref('')
const codeData = ref({})
const isOverToday = ref(false)
// 页面加载完毕
onLoad((options) => {
// scanStart()
})
onShow(() => {
})
const handleIsOverToday = () => {
console.log('🚀 ~ .nextCheckTime:', codeData.value.nextCheckTime)
if (!codeData.value.nextCheckTime) {
isOverToday.value = true
} else {
const now = Date.now()
const nextCheckTimestamp = new Date(codeData.value.nextCheckTime).getTime()
isOverToday.value = nextCheckTimestamp <= now
// console.log('🚀 ~ isOverToday ~ :', nextCheckDate < today)
}
}
// // 扫码识别按钮
// const scanStart = () => {
// var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module")
// mpaasScanModule.mpaasScan({
// // 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
// 'scanType': ['qrCode','barCode'],
// // 是否隐藏相册，默认false不隐藏
// 'hideAlbum': false,
// //ios需要设置这个参数，只支持中英文 zh-Hans、en，默认中文
// 'language' : 'en',
// //相册选择照片识别错误提示(ios)
// 'failedMsg': '未识别到二维码，请重试',
// //Android支持全屏需要设置此参数
// 'screenType': 'full'
// },(ret) => {
// if(ret.resp_code==10){
// uni.showToast({ title: '用户取消', icon: 'none' })
// }
// if(ret.resp_code==11){
// uni.showToast({ title: '扫码失败', icon: 'none' })
// }
// if(ret.resp_code==1000){
// // uni.showToast({ title: '成功', icon: 'none' })
// qrCodeScan.value = ret.resp_result.split("qrcode=")[1]
// if (qrCodeScan.value=="") {
// uni.showToast({ title: '扫码识别失败', icon: 'none'})
// }else{
// getMaInfoScan()
// }
// }
// })
// }
// 扫码识别按钮点击事件
const scanStart = () => {
qrCodeScan.value = ''
codeData.value = {}
if (scanQrCodeRef.value) {
scanQrCodeRef.value.scanQrCode()
}
// 调试用 --↓
// qrCodeScan.value = '201807-00009'
// getMaInfoScan()
}
// 处理扫描成功事件
const handleScanSuccess = (result) => {
console.log('🚀 ~ handleScanSuccess ~ result:', result)
qrCodeScan.value = result?.data?.split('?qrcode=')[1] || result?.data
console.log('🚀 ~ handleScanSuccess ~ qrCodeScan.value:', qrCodeScan.value)
if (qrCodeScan.value === '') {
uni.showToast({ title: '扫码识别失败', icon: 'none' })
} else {
getMaInfoScan()
}
}
// 处理扫描失败事件
const handleScanError = (error) => {
console.error('扫描出错:', error.message)
uni.showToast({ title: error.message, icon: 'none' })
}
//查看是否是该规格型号
const getMaInfoScan = async () => {
try {
uni.showLoading({ title: '加载中...', mask: true })
let param = {
qrCode: qrCodeScan.value,
}
console.log(param)
const res = await getDeviceListAPI(param)
console.log(res)
if (res.code == 200) {
if (res.data) {
codeData.value = res.data[0]
setTimeout(() => {
handleIsOverToday()
}, 500)
}else{
uni.showToast({ title: res.data.msg, icon: 'none'})
}
} else {
uni.showToast({ title: res.data.msg, icon: 'none' })
}
} catch (error) {
console.log('🚀 ~ getMaInfoScan ~ error:', error)
} finally {
uni.hideLoading()
}
}
</script>
<style lang="scss" scoped>
.uni-forms-item--border[data-v-4c3fe719] {
margin-bottom: 0;
padding: 0 0;
border-top: 1px #eee solid;
}
.page-container {
display: flex;
height: 100%;
flex-direction: column;
background-color: #f7f8fa;
padding: 24rpx;
.table-list-item {
background: #fff;
padding: 32rpx;
border-radius: 20rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
margin-bottom: 24rpx;
// 表单样式
:deep(.uni-forms) {
.uni-forms-item {
margin-bottom: 24rpx;
padding: 0;
&:last-child {
margin-bottom: 0;
}
.uni-forms-item__label {
color: #8c8c8c;
font-size: 28rpx;
font-weight: 500;
padding: 0;
line-height: 1.8;
}
.uni-forms-item__content {
display: flex;
align-items: center;
min-height: unset;
}
}
}
// 编码按钮组
.coding-btn {
padding: 16rpx 0;
background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
border-radius: 12rpx;
text-align: center;
color: #fff;
font-size: 28rpx;
font-weight: 600;
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
opacity: 0.9;
}
// 编码检索按钮特殊样式
&.search-btn {
padding: 12rpx 0;
background: #fff;
color: #ff9800;
border: 2rpx solid rgba(255, 152, 0, 0.5);
background: linear-gradient(to bottom, rgba(255, 152, 0, 0.05), rgba(255, 152, 0, 0.1));
box-shadow: none;
font-weight: 600;
letter-spacing: 1rpx;
&:active {
background: rgba(255, 152, 0, 0.15);
border-color: rgba(255, 152, 0, 0.6);
transform: translateY(1rpx);
}
}
}
// 编码列表样式
:deep(.uni-row) {
/* margin-bottom: 20rpx; */
&:last-child {
margin-bottom: 0;
}
.uni-col-6 {
color: #8c8c8c;
font-size: 28rpx;
font-weight: 500;
}
.cont {
color: #262626;
font-size: 28rpx;
font-weight: 500;
line-height: 1.8;
}
}
// 输入框样式
:deep(.uni-easyinput__content) {
background-color: #f7f8fa;
border: 2rpx solid #e8e8e8;
border-radius: 12rpx;
height: 75rpx;
transition: all 0.3s ease;
&:focus-within {
border-color: #3784fb;
box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
}
.uni-easyinput__content-input {
font-size: 28rpx;
color: #262626;
}
}
// 复选框样式
:deep(checkbox) {
.wx-checkbox-input {
width: 36rpx;
height: 36rpx;
border-radius: 8rpx;
border: 2rpx solid #e8e8e8;
background: transparent;
&.wx-checkbox-input-checked {
background: #3784fb;
border-color: #3784fb;
&::before {
font-size: 28rpx;
color: #fff;
}
}
&.wx-checkbox-input-disabled {
background: #f5f5f5;
border-color: #e8e8e8;
}
}
}
}
// 底部出库按钮
.outbound-btn {
width: 96%;
height: 88rpx;
margin: 10rpx auto;
background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
text-align: center;
line-height: 88rpx;
color: #fff;
border-radius: 12rpx;
font-size: 32rpx;
font-weight: 600;
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
transition: all 0.3s ease;
}
}
// 加载提示文字
.loading-text {
text-align: center;
font-size: 26rpx;
color: #8c8c8c;
padding: 32rpx 0;
letter-spacing: 1rpx;
}
.form-section {
background: #fff;
border-radius: 20rpx;
margin-bottom: 24rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
// 头部样式
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 32rpx;
background: #fff;
cursor: pointer;
transition: all 0.3s ease;
&:active {
background: #f7f8fa;
}
.title {
font-size: 32rpx;
font-weight: 600;
color: #262626;
}
}
// 表单内容区域
.form-content {
// max-height: 0;
overflow: auto;
transition: max-height 0.3s ease-out;
:deep(.uni-forms) {
padding: 0 32rpx 32rpx;
}
:deep(.uni-forms-item) {
margin-bottom: 10rpx;
&:last-child {
margin-bottom: 0;
}
.uni-forms-item__label {
color: #8c8c8c;
}
.form-view {
height: 100%;
display: flex;
align-items: center;
color: #262626;
font-size: 28rpx;
}
}
}
}
</style>
<template>
<view class="page-container">
<!-- 表单信息区域 -->
<scroll-view scroll-y style="height: 100vh;">
<view class="outbound-btn" @click="scanStart"> 二维码扫描 </view>
<!-- <ScanQrCode ref="scanQrCodeRef" @scanSuccess="handleScanSuccess" @scanError="handleScanError" />-->
<view class="form-section">
<view class="section-header">
<text class="title">设备信息</text>
</view>
<view class="form-content">
<uni-forms :model="formData" label-width="100" :border="true">
<uni-forms-item label="设备类型：" name="maName">
<span class="form-view">{{codeData.maName}}</span>
</uni-forms-item>
<uni-forms-item label="规格型号：" name="maModel">
<span class="form-view">{{codeData.maModel}}</span>
</uni-forms-item>
<uni-forms-item label="二维码编码：" name="qrCode">
<span class="form-view">{{codeData.qrCode}}</span>
</uni-forms-item>
<uni-forms-item label="设备编码：" name="maCode">
<span class="form-view">{{codeData.maCode}}</span>
</uni-forms-item>
<uni-forms-item label="设备状态：" name="maStatus">
<span class="form-view">{{codeData.maStatus}}</span>
</uni-forms-item>
<uni-forms-item label="本次检修时间：" name="checkTimeSynch">
<text class="form-view">{{codeData.thisCheckTime}}</text>
</uni-forms-item>
<uni-forms-item label="下次检修时间：" name="nextCheckTimeSynch">
<text class="form-view">{{codeData.nextCheckTime}}</text>
</uni-forms-item>
<uni-forms-item label="出入库次数：" name="inOutNum">
<text class="form-view">{{codeData.inOutNum}}</text>
</uni-forms-item>
<uni-forms-item label="初次入库：" name="inTime">
<text class="form-view">{{codeData.inTime}}</text>
</uni-forms-item>
<uni-forms-item label="服务工程次数：" name="serviceNum">
<text class="form-view">{{codeData.serviceNum}}</text>
</uni-forms-item>
<uni-forms-item label="检验次数：" name="serviceNum">
<text class="form-view">{{codeData.serviceNum}}</text>
</uni-forms-item>
<uni-forms-item label="更换配件次数：" name="checkNum">
<text class="form-view">{{codeData.checkNum}}</text>
</uni-forms-item>
<uni-forms-item label="报废：" name="scrapTime">
<text class="form-view">{{codeData.scrapTime}}</text>
</uni-forms-item>
<uni-forms-item label="生产厂家：" name="maVender">
<text class="form-view">{{codeData.maVender}}</text>
</uni-forms-item>
<uni-forms-item label="领料单位：" name="leaseUnit">
<text class="form-view">{{codeData.leaseUnit}}</text>
</uni-forms-item>
<uni-forms-item label="领料工程：" name="leaseProject">
<text class="form-view">{{codeData.leaseProject}}</text>
</uni-forms-item>
<uni-forms-item label="领料时间：" name="leaseTime">
<text class="form-view">{{codeData.leaseTime}}</text>
</uni-forms-item>
<uni-forms-item label="退料单位：" name="backUnit">
<text class="form-view">{{codeData.backUnit}}</text>
</uni-forms-item>
<uni-forms-item label="退料工程：" name="backProject">
<text class="form-view">{{codeData.backProject}}</text>
</uni-forms-item>
<uni-forms-item label="退料时间：" name="backTime">
<text class="form-view">{{codeData.backTime}}</text>
</uni-forms-item>
</uni-forms>
</view>
</view>
<div v-if="isOverToday && codeData.nextCheckTime">该工器具已临近下次检验时间，请及时退还至机具（物流）分公司！</div>
<ElectronicSeal v-else v-show="codeData.maId" :maCode="codeData?.maCode" :maId="codeData?.maId" :devType="2" />
</scroll-view>
</view>
</template>
<script setup>
import { ref, computed, onUnmounted } from 'vue'
import { onLoad, onShow, } from '@dcloudio/uni-app'
import { debounce } from 'lodash-es'
import ScanQrCode from '@/pages/devicesSearch/ScanQrCode.vue'
import { getDeviceListAPI } from '@/services/picking/outbound.js'
import ElectronicSeal from '@/components/ElectronicSeal/index.vue'
const scanQrCodeRef = ref(null)
const queryParams = ref({})
const formData = ref({})
const qrCodeScan = ref('')
const codeData = ref({})
const isOverToday = ref(false)
// ✅ 使用全局 hwqrcodescan 对象（由 Cordova 注入）
let hwqrcodescan = null
if (typeof window !== 'undefined' && window.cordova) {
try {
hwqrcodescan = require('cordova/plugin/hwscan')
} catch (e) {
console.warn('HwQrcodeScan插件未正确加载', e)
}
}
// 页面加载完毕
onLoad(() => {
// 页面加载时可检测插件是否可用
if (!hwqrcodescan) {
console.warn('HwQrcodeScan 插件不可用，请检查 Android 端是否已集成')
}
})
onShow(() => {
})
const handleIsOverToday = () => {
console.log('🚀 ~ .nextCheckTime:', codeData.value.nextCheckTime)
if (!codeData.value.nextCheckTime) {
isOverToday.value = true
} else {
const now = Date.now()
const nextCheckTimestamp = new Date(codeData.value.nextCheckTime).getTime()
isOverToday.value = nextCheckTimestamp <= now
// console.log('🚀 ~ isOverToday ~ :', nextCheckDate < today)
}
}
// 扫码识别按钮点击事件
// const scanStart = () => {
// qrCodeScan.value = ''
// codeData.value = {}
// if (scanQrCodeRef.value) {
// scanQrCodeRef.value.scanQrCode()
// }
//
// // 调试用 --↓
// // qrCodeScan.value = '201807-00009'
// // getMaInfoScan()
// }
// ✅ 新的扫码逻辑
const scanStart = () => {
qrCodeScan.value = ''
codeData.value = {}
if (hwqrcodescan && typeof hwqrcodescan.startScan === 'function') {
hwqrcodescan.startScan("QrCode", function (result) {
console.log('扫码成功:', result)
handleScanSuccess({ data: result })
})
} else {
uni.showToast({
title: '扫码功能不可用，请确认已集成HwQrcodeScan插件',
icon: 'none'
})
}
// 调试用：
// qrCodeScan.value = '201807-00009'
// getMaInfoScan()
}
// 处理扫描成功事件
const handleScanSuccess = (result) => {
console.log('🚀 ~ handleScanSuccess ~ result:', result)
qrCodeScan.value = result?.data?.split('?qrcode=')[1] || result?.data || result
console.log('🚀 ~ handleScanSuccess ~ qrCodeScan.value:', qrCodeScan.value)
if (!qrCodeScan.value) {
uni.showToast({ title: '扫码识别失败', icon: 'none' })
} else {
getMaInfoScan()
}
}
// 处理扫描失败事件
const handleScanError = (error) => {
console.error('扫描出错:', error.message)
uni.showToast({ title: error.message, icon: 'none' })
}
//查看是否是该规格型号
const getMaInfoScan = async () => {
try {
uni.showLoading({ title: '加载中...', mask: true })
let param = {
qrCode: qrCodeScan.value,
}
console.log(param)
const res = await getDeviceListAPI(param)
console.log(res)
if (res.code === 200 && res.data) {
codeData.value = res.data[0] || {}
setTimeout(handleIsOverToday, 500)
} else {
uni.showToast({ title: res?.msg || '未查询到设备信息', icon: 'none' })
}
} catch (error) {
console.log('🚀 ~ getMaInfoScan ~ error:', error)
} finally {
uni.hideLoading()
}
}
</script>
<style lang="scss" scoped>
.uni-forms-item--border[data-v-4c3fe719] {
margin-bottom: 0;
padding: 0 0;
border-top: 1px #eee solid;
}
.page-container {
display: flex;
height: 100%;
flex-direction: column;
background-color: #f7f8fa;
padding: 24rpx;
.table-list-item {
background: #fff;
padding: 32rpx;
border-radius: 20rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
margin-bottom: 24rpx;
// 表单样式
:deep(.uni-forms) {
.uni-forms-item {
margin-bottom: 24rpx;
padding: 0;
&:last-child {
margin-bottom: 0;
}
.uni-forms-item__label {
color: #8c8c8c;
font-size: 28rpx;
font-weight: 500;
padding: 0;
line-height: 1.8;
}
.uni-forms-item__content {
display: flex;
align-items: center;
min-height: unset;
}
}
}
// 编码按钮组
.coding-btn {
padding: 16rpx 0;
background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
border-radius: 12rpx;
text-align: center;
color: #fff;
font-size: 28rpx;
font-weight: 600;
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
opacity: 0.9;
}
// 编码检索按钮特殊样式
&.search-btn {
padding: 12rpx 0;
background: #fff;
color: #ff9800;
border: 2rpx solid rgba(255, 152, 0, 0.5);
background: linear-gradient(to bottom, rgba(255, 152, 0, 0.05), rgba(255, 152, 0, 0.1));
box-shadow: none;
font-weight: 600;
letter-spacing: 1rpx;
&:active {
background: rgba(255, 152, 0, 0.15);
border-color: rgba(255, 152, 0, 0.6);
transform: translateY(1rpx);
}
}
}
// 编码列表样式
:deep(.uni-row) {
/* margin-bottom: 20rpx; */
&:last-child {
margin-bottom: 0;
}
.uni-col-6 {
color: #8c8c8c;
font-size: 28rpx;
font-weight: 500;
}
.cont {
color: #262626;
font-size: 28rpx;
font-weight: 500;
line-height: 1.8;
}
}
// 输入框样式
:deep(.uni-easyinput__content) {
background-color: #f7f8fa;
border: 2rpx solid #e8e8e8;
border-radius: 12rpx;
height: 75rpx;
transition: all 0.3s ease;
&:focus-within {
border-color: #3784fb;
box-shadow: 0 0 0 2rpx rgba(55, 132, 251, 0.1);
}
.uni-easyinput__content-input {
font-size: 28rpx;
color: #262626;
}
}
// 复选框样式
:deep(checkbox) {
.wx-checkbox-input {
width: 36rpx;
height: 36rpx;
border-radius: 8rpx;
border: 2rpx solid #e8e8e8;
background: transparent;
&.wx-checkbox-input-checked {
background: #3784fb;
border-color: #3784fb;
&::before {
font-size: 28rpx;
color: #fff;
}
}
&.wx-checkbox-input-disabled {
background: #f5f5f5;
border-color: #e8e8e8;
}
}
}
}
// 底部出库按钮
.outbound-btn {
width: 96%;
height: 88rpx;
margin: 10rpx auto;
background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
text-align: center;
line-height: 88rpx;
color: #fff;
border-radius: 12rpx;
font-size: 32rpx;
font-weight: 600;
box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
transition: all 0.3s ease;
}
}
// 加载提示文字
.loading-text {
text-align: center;
font-size: 26rpx;
color: #8c8c8c;
padding: 32rpx 0;
letter-spacing: 1rpx;
}
.form-section {
background: #fff;
border-radius: 20rpx;
margin-bottom: 24rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
// 头部样式
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx 32rpx;
background: #fff;
cursor: pointer;
transition: all 0.3s ease;
&:active {
background: #f7f8fa;
}
.title {
font-size: 32rpx;
font-weight: 600;
color: #262626;
}
}
// 表单内容区域
.form-content {
// max-height: 0;
overflow: auto;
transition: max-height 0.3s ease-out;
:deep(.uni-forms) {
padding: 0 32rpx 32rpx;
}
:deep(.uni-forms-item) {
margin-bottom: 10rpx;
&:last-child {
margin-bottom: 0;
}
.uni-forms-item__label {
color: #8c8c8c;
}
.form-view {
height: 100%;
display: flex;
align-items: center;
color: #262626;
font-size: 28rpx;
}
}
}
}
</style>