u

code/container-ocr/ocr-uniapp/src/pages-sub/login/index.vue

@@ -56,8 +56,7 @@ async function onSubmit() {
         icon: 'success',
       })
 
-      uni.navigateTo({
-        // url: '/pages-sub/upload/index',
+      uni.switchTab({
         url: '/pages/home/index',
       })
     }

code/container-ocr/ocr-uniapp/src/pages-sub/upload/index.vue

@@ -317,12 +317,103 @@ async function continueAdd() {
 <template>
   <view class="g3-container">
     <template v-if="!showResult">
-      <view class="g3-content">
+      <wd-cell-group custom-class="group" title="集装箱号（OCR识别）" border use-slot>
+        <template #title>
+          <sar-icon name="close" size="32rpx" style="margin-right: 16rpx;"/>
+
+          <text>
+            集装箱号（OCR识别）
+          </text>
+        </template>
+        <view class="step-content box">
+          <view v-if="ocrFinish" class="header">
+            <sar-alert
+              v-if="!isError"
+              type="success"
+              show-icon
+              closable
+              :root-style="{
+                width: '100%',
+              }"
+            >
+              识别成功，请检查箱号是否正确！
+              <view>
+                准确率：{{ computedOcrScore }}
+              </view>
+            </sar-alert>
+            <sar-alert
+              v-else
+              type="danger"
+              show-icon
+              closable
+              :root-style="{
+                width: '100%',
+              }"
+            >
+              识别失败，请检查手动填写集装箱号
+            </sar-alert>
+          </view>
+
+          <view class="box-main">
+            <view v-if="!boxImage" class="box-placeholder" @click="handleChooseBox">
+              <sar-icon name="plus" size="156rpx" color="#999" />
+            </view>
+
+            <view v-else class="box-image">
+              <wd-img
+                :src="boxImage.path"
+                width="100%"
+                height="100%"
+                :enable-preview="true"
+              />
+
+              <view class="delete-btn" @click="handleDeleteBoxImage()">
+                <sar-icon name="close" size="20rpx" color="#fff" />
+              </view>
+            </view>
+          </view>
+
+          <view class="box-input">
+            <view class="header">
+              <view class="label-container">
+                <view>集装箱号</view>
+                <view class="required-asterisk">
+                  *
+                </view>
+              </view>
+              <view class="format">
+                格式: 4字母 + 7数字
+              </view>
+            </view>
+            <sar-input
+              v-model="form.containerNo"
+              placeholder="请输入箱号"
+            />
+          </view>
+        </view>
+      </wd-cell-group>
+
+      <wd-cell-group custom-class="group" title="其他图片" border style="margin-top: 32rpx;">
+        <view class="step-content">
+          <sar-upload
+            v-model="subFileList"
+            multiple
+            :after-read="afterRead"
+            :before-read="beforeRead"
+            :before-remove="beforeRemove"
+            @item-click="onItemClick"
+            @remove="onRemove"
+          />
+        </view>
+      </wd-cell-group>
+      <!-- <view class="g3-content">
         <view class="step">
           <view class="step-header">
-            <sar-tag theme="primary" mark="right" size="large">
-              1、集装箱号识别（OCR自动识别）
+            <sar-tag theme="primary" size="large">
+              1
             </sar-tag>
+
+            <view>集装箱号识别（OCR自动识别）</view>
           </view>
 
           <view class="step-content box">
@@ -422,7 +513,7 @@ async function continueAdd() {
             确认上传
           </view>
         </view>
-      </view>
+      </view> -->
     </template>
 
     <view v-else class="g3-result">
@@ -444,6 +535,10 @@ async function continueAdd() {
 </template>
 
 <style lang="scss" scoped>
+page {
+  background-color: #f8f9fa;
+}
+
 .g3-result {
   height: 100%;
   display: flex;
@@ -487,20 +582,17 @@ async function continueAdd() {
     align-items: center;
     margin-bottom: 24rpx;
   }
+}
 
-  .step-content {
-    padding: 0rpx 32rpx;
-  }
+.step-content {
+  padding: 32rpx;
 }
 
 .box {
   display: flex;
   flex-direction: column;
-
   .box-main {
     height: 326rpx;
-    border: 1px dashed #ddd;
-    border-radius: 16rpx;
   }
 
   .box-placeholder {
@@ -509,7 +601,8 @@ async function continueAdd() {
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    background-color: #ecedee;
+    background: var(--sar-upload-select-bg);
+    border-radius: var(--sar-upload-select-border-radius);
 
     .placeholder-text {
       color: #999;