dev

src/components/charge/CheckoutDetail.vue

@@ -1,8 +1,14 @@
 <template>
-  <Mask  :height="650" :width="900" :is-show="show" title="追溯码采集" @close="show = false" :show-footer="true">
+  <Mask :height="650" :width="900" :is-show="show" title="追溯码采集" @close="show = false" :show-footer="true">
-    <el-card>
+    <template #default>
       <div class="detail">
-        <el-input placeholder="请输入追溯码" v-model="inputIdCode" clearable @keydown.enter="openAssociationIdCode()">
+        <el-input
+            placeholder="请输入追溯码"
+            v-model="inputIdCode"
+            clearable
+            @keydown.enter="openAssociationIdCode()"
+            style="height: 42px;background: #FFFFFF;border-radius: 6px;border: 1px solid #EAEAEC;"
+        >
           <template #prefix>
             <el-icon>
               <Monitor/>
@@ -36,22 +42,20 @@
             </tr>
             </tbody>
           </table>
-
         </div>
-
-      </div>
-    </el-card>
-    <template #footer>
-      <div class="bottom-btn">
-        <el-button @click="saveRetail()" type="primary">确定</el-button>
-        <el-button @click="show = false">关闭</el-button>
       </div>
     </template>
-    <AssociationIdCode
+    <template #footer>
-        ref="associationIdCodeRef"
+      <div class="bottom">
-        @addIdCode="cleanInputIdCode"
+        <div class="default-btn" @click="show = false">关闭</div>
-        @addTraceabilityCode="addTraceAbilityCodeHandler"></AssociationIdCode>
+        <div class="default-btn" @click="saveRetail()" style="margin-left: 24px">确定</div>
+      </div>
+    </template>
   </Mask>
+  <AssociationIdCode
+      ref="associationIdCodeRef"
+      @addIdCode="cleanInputIdCode"
+      @addTraceabilityCode="addTraceAbilityCodeHandler"></AssociationIdCode>
 </template>
 <script setup lang="ts">
 import Mask from "@/components/common/Mask.vue";
@@ -106,7 +110,7 @@ const checkTraceCode = () => {
 const inputIdCode = ref()
 const associationIdCodeRef = ref()
 const openAssociationIdCode = () => {
-  if(!inputIdCode.value || inputIdCode.value.length <20){
+  if (!inputIdCode.value || inputIdCode.value.length < 20) {
     ElMessage({
       message: '追溯码长度不足20位',
       type: 'info',
@@ -140,7 +144,7 @@ const addTraceabilityCodeDo = (item: any, inputStr: any) => {
     item.traceAbilityCodeList = []
   }
   let traceAbilityCodeListList = item.traceAbilityCodeList.length
-  if(!inputStr || inputStr.length <20){
+  if (!inputStr || inputStr.length < 20) {
     ElMessage({
       message: '追溯码长度不足20位',
       type: 'info',
@@ -184,8 +188,18 @@ const addTraceAbilityCodeHandler = (item: any, code: any) => {
 }
 
 .detail {
+  padding: 24px 24px 0;
+
   .list {
     height: 400px;
   }
 }
+
+.bottom {
+  height: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 24px;
+}
 </style>

src/components/charge/TotalPrice.vue

@@ -24,13 +24,12 @@ const openSettlement =()=>{
     <div class="footer">
       <div>总金额：<span class="text icon">￥</span><span class="text">{{ totalAmount || '0' }}</span></div>
       <div class="btn-group" v-if="status">
-        <span type="primary" @click="openCheckOut">追溯码</span>
+        <span class="default-btn" @click="openCheckOut">追溯码</span>
-        <span type="primary" @click="openSettlement">收费</span>
+        <span class="default-btn" @click="openSettlement" style="margin-left: 24px">收费</span>
       </div>
     </div>
   </Panel>
 </template>
-
 <style scoped lang="scss">
 .footer {
   height: 86px;
@@ -53,14 +52,6 @@ const openSettlement =()=>{
   span{
     display: inline-block;
     width: 119px;
-    height: 48px;
-    background: #4D6DE4;
-    border-radius: 8px;
-    margin-left: 24px;
-    color: #fff;
-    line-height: 48px;
-    text-align: center;
-    cursor: pointer;
   }
 }
 </style>