From 31ea8a4facc593f0ef905d82c7f77efde21018cd Mon Sep 17 00:00:00 2001
From: ChenQiuYu <chenqiuyu@jizhiweb.cn>
Date: Fri, 16 May 2025 16:23:18 +0800
Subject: [PATCH] dev

---
 src/components/charge/OrderDetail.vue         | 381 +++++++++---------
 src/components/charge/Settlement.vue          |  20 +-
 .../member/memberProfile/FlowingWater.vue     |  40 +-
 src/views/member/index.vue                    |   7 +-
 src/views/social/directory.vue                |  51 ++-
 5 files changed, 278 insertions(+), 221 deletions(-)

diff --git a/src/components/charge/OrderDetail.vue b/src/components/charge/OrderDetail.vue
index fd89891..a860f03 100644
--- a/src/components/charge/OrderDetail.vue
+++ b/src/components/charge/OrderDetail.vue
@@ -1,66 +1,66 @@
 <template>
-  <Mask :width="1000" :height="560" :is-show="show" @close="show = false" title="订单详情">
-    <div class="container">
-      <div class="title">
-        <CloseBtn @click="show = false"></CloseBtn>
-      </div>
+  <Mask :width="1252" :height="777" :is-show="show" @close="show = false" title="订单详情"
+        :show-footer="orderInfo?.status == 1">
+    <template #default>
       <div class="content">
         <div class="left">
           <div class="goods-detail">
             <div class="title">药品详情</div>
-          <el-table border  :header-cell-style="{ backgroundColor: '#f5f7fa' }"  :data="orderInfo.goodsDetail" style="height: 100%">
-            <el-table-column label="商品" prop="name"  width="100" show-overflow-tooltip></el-table-column>
-            <el-table-column label="数量" prop="number" width="100" show-overflow-tooltip></el-table-column>
-            <el-table-column label="单位" prop="unit" width="100" show-overflow-tooltip></el-table-column>
-            <el-table-column label="单价"  width="100"  show-overflow-tooltip>
-              <template #default="scope">
-                {{ scope.row.preUnitPrice }}元
-              </template>
-            </el-table-column >
-            <el-table-column label="实价" width="100" show-overflow-tooltip>
-              <template #default="scope">
-                {{ scope.row.unitPrice }}元
-              </template>
-            </el-table-column>
-            <el-table-column label="小计" width="100" show-overflow-tooltip>
-              <template #default="scope">
-                {{ scope.row.subTotalPrice }}元
-              </template>
-            </el-table-column>
-            <el-table-column label="追溯码"  show-overflow-tooltip>
-              <template #default="scope">
-                {{ scope.row.traceabilityCode?.length ==2 ?"未绑定追溯码":scope.row.traceabilityCode}}
-              </template>
-            </el-table-column>
-          </el-table>
+            <el-table border :header-cell-style="{ backgroundColor: '#F1F5FB' }" :data="orderInfo.goodsDetail"
+                      style="flex: 1">
+              <el-table-column label="商品" prop="name" width="100" show-overflow-tooltip></el-table-column>
+              <el-table-column label="数量" prop="number" width="100" show-overflow-tooltip></el-table-column>
+              <el-table-column label="单位" prop="unit" width="100" show-overflow-tooltip></el-table-column>
+              <el-table-column label="单价" width="100" show-overflow-tooltip>
+                <template #default="scope">
+                  {{ scope.row.preUnitPrice }}元
+                </template>
+              </el-table-column>
+              <el-table-column label="实价" width="100" show-overflow-tooltip>
+                <template #default="scope">
+                  {{ scope.row.unitPrice }}元
+                </template>
+              </el-table-column>
+              <el-table-column label="小计" width="100" show-overflow-tooltip>
+                <template #default="scope">
+                  {{ scope.row.subTotalPrice }}元
+                </template>
+              </el-table-column>
+              <el-table-column label="追溯码" show-overflow-tooltip>
+                <template #default="scope">
+                  {{ scope.row.traceabilityCode?.length == 2 ? "未绑定追溯码" : scope.row.traceabilityCode }}
+                </template>
+              </el-table-column>
+            </el-table>
           </div>
           <div class="service-detail">
-          <div class="title">服务详情</div>
-          <el-table border  :header-cell-style="{ backgroundColor: '#f5f7fa' }" :data="orderInfo.serviceDetail" style="height: 100%">
-            <el-table-column label="商品" prop="name" width="100" show-overflow-tooltip></el-table-column>
-            <el-table-column label="数量" prop="number" width="100" show-overflow-tooltip></el-table-column>
-            <el-table-column label="单位" prop="unit" width="100" show-overflow-tooltip></el-table-column>
-            <el-table-column label="单价" width="100" show-overflow-tooltip>
-              <template #default="scope">
-                {{ scope.row.preUnitPrice }}元
-              </template>
-            </el-table-column >
-            <el-table-column label="实价" width="100" show-overflow-tooltip>
-              <template #default="scope">
-                {{ scope.row.unitPrice }}元
-              </template>
-            </el-table-column>
-            <el-table-column label="小计" width="100" show-overflow-tooltip>
-              <template #default="scope">
-                {{ scope.row.subTotalPrice }}元
-              </template>
-            </el-table-column>
-            <el-table-column label="追溯码"  show-overflow-tooltip>
-              <template #default="scope">
-                -
-              </template>
-            </el-table-column>
-          </el-table>
+            <div class="title">服务详情</div>
+            <el-table border :header-cell-style="{ backgroundColor: '#FBF6EB' }" :data="orderInfo.serviceDetail"
+                      style="flex: 1">
+              <el-table-column label="商品" prop="name" width="100" show-overflow-tooltip></el-table-column>
+              <el-table-column label="数量" prop="number" width="100" show-overflow-tooltip></el-table-column>
+              <el-table-column label="单位" prop="unit" width="100" show-overflow-tooltip></el-table-column>
+              <el-table-column label="单价" width="100" show-overflow-tooltip>
+                <template #default="scope">
+                  {{ scope.row.preUnitPrice }}元
+                </template>
+              </el-table-column>
+              <el-table-column label="实价" width="100" show-overflow-tooltip>
+                <template #default="scope">
+                  {{ scope.row.unitPrice }}元
+                </template>
+              </el-table-column>
+              <el-table-column label="小计" width="100" show-overflow-tooltip>
+                <template #default="scope">
+                  {{ scope.row.subTotalPrice }}元
+                </template>
+              </el-table-column>
+              <el-table-column label="追溯码" show-overflow-tooltip>
+                <template #default="scope">
+                  -
+                </template>
+              </el-table-column>
+            </el-table>
           </div>
         </div>
         <div class="right">
@@ -69,11 +69,11 @@
             <div class="info">
               <div class="item">
                 <div class="label">开单时间</div>
-                <div class="value">{{formatDate(orderInfo.createDatetime)}}</div>
+                <div class="value">{{ formatDate(orderInfo.createDatetime) }}</div>
               </div>
               <div class="item">
                 <div class="label">完成时间</div>
-                <div class="value">{{ formatDate(orderInfo.payTime)}}</div>
+                <div class="value">{{ formatDate(orderInfo.payTime) }}</div>
               </div>
               <div class="item">
                 <div class="label">收费员</div>
@@ -81,7 +81,7 @@
               </div>
               <div class="item">
                 <div class="label">药师</div>
-                <div class="value">{{ orderInfo.dockerName}}</div>
+                <div class="value">{{ orderInfo.dockerName }}</div>
               </div>
               <div class="item">
                 <div class="label">销售人</div>
@@ -93,7 +93,7 @@
               </div>
               <div class="item">
                 <div class="label">优惠</div>
-                <div class="value">￥{{ (orderInfo.preTotalPrice-orderInfo.totalPrice).toFixed(2)}}</div>
+                <div class="value">￥{{ (orderInfo.preTotalPrice - orderInfo.totalPrice).toFixed(2) }}</div>
               </div>
               <div class="item">
                 <div class="label">应收</div>
@@ -123,23 +123,27 @@
               <div class="name">{{ orderInfo.salePersonName }}</div>
               <div>备注：-</div>
             </div>
-            <div class="value">￥{{orderInfo.totalPrice}}</div>
+            <div class="value">￥{{ orderInfo.totalPrice }}</div>
           </div>
         </div>
       </div>
+    </template>
+    <template #footer>
       <div class="footer">
-<!--       <el-button type="primary" plain>追溯码</el-button>-->
-      <div>
-<!--        <el-button type="danger" plain @click="cancel" v-if="orderInfo.status == 0">取消</el-button>-->
-        <el-button type="danger" plain @click="refund" v-if="orderInfo.status == 1">退款</el-button>
-        <el-button type="primary" @click="print" v-if="orderInfo.status == 1">
-          打印<el-icon class="el-icon--right"><Upload /></el-icon>
-        </el-button>
+        <!--       <el-button type="primary" plain>追溯码</el-button>-->
+        <div>
+          <!--        <el-button type="danger" plain @click="cancel" v-if="orderInfo.status == 0">取消</el-button>-->
+          <el-button type="danger" plain @click="refund" v-if="orderInfo.status == 1">退款</el-button>
+          <el-button type="primary" @click="print" v-if="orderInfo.status == 1">
+            打印
+            <el-icon class="el-icon--right">
+              <Upload/>
+            </el-icon>
+          </el-button>
+        </div>
       </div>
-      </div>
-    </div>
+    </template>
   </Mask>
-
 </template>
 <script setup lang="ts">
 import {onMounted, onUnmounted, ref} from "vue";
@@ -157,7 +161,7 @@ const orderInfo = ref<any>({});
 
 const init = (code: any) => {
   show.value = true;
-  post("charge/getByCode", {code: code}).then((res: any)=>{
+  post("charge/getByCode", {code: code}).then((res: any) => {
     orderInfo.value = res;
   })
 
@@ -198,7 +202,7 @@ const close = () => {
 defineExpose({init})
 const refund = () => {
   console.log(orderInfo.value)
-  post("charge/refund",{changeOrderCode:orderInfo.value.code}).then((res:any)=>{
+  post("charge/refund", {changeOrderCode: orderInfo.value.code}).then((res: any) => {
     close()
   })
 }
@@ -213,23 +217,23 @@ const wsStore = useWsStore();
 type MedTypeKey = keyof typeof medTypeJson;
 
 const print = () => {
-  if (!orderInfo.value.code){
+  if (!orderInfo.value.code) {
     return
   }
   let code = orderInfo.value.code;
-  
+
   const printConfig = {} as any;
-  post("common/config/getPrintConfig").then((res:any)=>{
-    printConfig.printName=res.printName
-    printConfig.pageType=res.pageType
-    if (!printConfig.printName || !printConfig.pageType){
+  post("common/config/getPrintConfig").then((res: any) => {
+    printConfig.printName = res.printName
+    printConfig.pageType = res.pageType
+    if (!printConfig.printName || !printConfig.pageType) {
       ElMessage.error("打印机未设置，请先到设置-打印管理中设置")
       return;
     }
     post("charge/getPrintInfoByCode", {code}).then((res: any) => {
       res.printerName = printConfig.printName
       res.pageType = printConfig.pageType
-      if (res.chargeSocialPayLog){
+      if (res.chargeSocialPayLog) {
         res.chargeSocialPayLog.medTypeStr = medTypeJson[res.chargeSocialPayLog.medType as MedTypeKey];
       }
       console.log(res)
@@ -262,127 +266,142 @@ onUnmounted(() => {
 </script>
 <style scoped lang="scss">
 @use "@/assets/scss/base";
-:deep(.el-scrollbar__view){
+
+:deep(.el-scrollbar__view) {
   height: 100%;
 }
-.container {
+
+
+.content {
   width: 100%;
   height: 100%;
   display: flex;
-  flex-direction: column;
   min-height: 0;
-  padding:0 24px;
 
-  .title {
-    height: 35px;
-  }
-  .content {
+  .left {
     flex: 1;
+    height: 100%;
+    margin-right: 10px;
+    min-height: 0;
     display: flex;
-    .left {
-      flex: 2;
-      height: 100%;
-      margin-right: 10px;
-      min-height: 0;
-      .goods-detail{
+    flex-direction: column;
+    min-width: 0;
 
-        height: 40%;
-        .title{
-          font-weight: bold;
-        }
-      }
-      .service-detail{
-        height: 40%;
-        margin-top: 50px;
-        .title{
-          font-weight: bold;
-        }
-      }
-    }
-
-    .right {
-      min-width: 100px;
-      height: 100%;
-      flex: 1;
-      min-height: 0;
-      border: solid 1px #e6e6e6;
+    .goods-detail {
+      height: 311px;
+      background: #F9FAFC;
+      padding: 24px;
       display: flex;
       flex-direction: column;
-      .right_head {
-        padding: 10px;
 
-        .title {
-          font-size: 12px;
-          font-weight: 600;
-          height: 25px;
-        }
-
-        .info {
-          font-size: 12px;
-          font-weight: 400;
-          color: #999ca1;
-
-          .item {
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 10px;
-
-            .value {
-              color: #000;
-            }
-          }
-        }
+      .title {
+        font-weight: bold;
+        margin-bottom: 24px;
       }
+    }
 
-      .right_body {
-        padding: 0 10px;
-        font-size: 12px;
-        font-weight: 400;
-        height: 30px;
-        color: #999ca1;
-        border-top: 1px solid #e6e6e6;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .value {
-          color: base.$warning-color;
-        }
-      }
-      .right_foot {
-        flex: 1;
-        padding: 0 10px;
-        font-size: 12px;
-        font-weight: 400;
-        color: #999ca1;
-        border-top: 1px solid #e6e6e6;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .label {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          height: 100%;
-          .pay{
-            color: #000;
-          }
-          .name{
-            margin: 5px 0;
-          }
-        }
-        .value {
-          color: #000;
-        }
+    .service-detail {
+      flex: 1;
+      background: #FEFCF8;
+      padding: 24px;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+
+      .title {
+        font-weight: bold;
+        margin-bottom: 24px;
       }
     }
   }
-  .footer {
-    height: 40px;
+
+  .right {
+    width: 314px;
+    height: 100%;
+    border: solid 1px #e6e6e6;
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 15px;
+    flex-direction: column;
+
+    .right_head {
+      padding: 10px;
+
+      .title {
+        font-size: 12px;
+        font-weight: 600;
+        height: 25px;
+      }
+
+      .info {
+        font-size: 12px;
+        font-weight: 400;
+        color: #999ca1;
+
+        .item {
+          display: flex;
+          justify-content: space-between;
+          margin-bottom: 10px;
+
+          .value {
+            color: #000;
+          }
+        }
+      }
+    }
+
+    .right_body {
+      padding: 0 10px;
+      font-size: 12px;
+      font-weight: 400;
+      height: 30px;
+      color: #999ca1;
+      border-top: 1px solid #e6e6e6;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .value {
+        color: base.$warning-color;
+      }
+    }
+
+    .right_foot {
+      flex: 1;
+      padding: 0 10px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #999ca1;
+      border-top: 1px solid #e6e6e6;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .label {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        height: 100%;
+
+        .pay {
+          color: #000;
+        }
+
+        .name {
+          margin: 5px 0;
+        }
+      }
+
+      .value {
+        color: #000;
+      }
+    }
   }
 }
 
+.footer {
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/charge/Settlement.vue b/src/components/charge/Settlement.vue
index bf8ca4c..9dffa4c 100644
--- a/src/components/charge/Settlement.vue
+++ b/src/components/charge/Settlement.vue
@@ -5,14 +5,15 @@
         <div class="btns">
           <div
               class="btn"
+              style="cursor: pointer"
               :style="{
               backgroundColor:
-                selectedIndex == index
+                selectedIndex === index
                   ? item.activeBackgroundColor
-                  : hoverIndex == index
+                  : hoverIndex === index
                   ? item.activeBackgroundColor
-                  : item.backgrountColor,
-            }"
+                  : item.backgrountColor
+         }"
               v-for="(item, index) in btnsList"
               :key="index"
               @click="changePriceType(item.type,index)"
@@ -42,7 +43,7 @@
     <template #footer>
       <div class="footer">
         <el-checkbox v-model="printReceipt">同时打印凭证</el-checkbox>
-        <el-button @click="completeSettlement()" type="primary">完成收费</el-button>
+        <div class="default-btn" @click="completeSettlement()" type="primary">完成收费</div>
       </div>
     </template>
   </Mask>
@@ -77,6 +78,7 @@ const close = () => {
   show.value = false;
   payType.value = null;
   selectedIndex.value = null
+  loading.value = false
 }
 const init = async (code: any, psnNo: any) => {
   retailOrder.value = await post("charge/getByCode", {code: code});
@@ -111,8 +113,12 @@ const completeSettlement = () => {
   } else {
     //其他结算
     loading.value = true;
-    post('charge/completeOrder', {id: retailOrder.value.id, payType: payType.value}).then((res: any) => {
+    post('charge/completeOrder', {id: retailOrder.value.id, payType: payType.value}, {catch_error:true}).then((res: any) => {
       orderCompleted()
+      loading.value = false
+    }).catch((e)=>{
+      loading.value = false
+      ElMessage.error(e)
     })
   }
 
@@ -263,12 +269,14 @@ const btnsList = [
         //color: #fff;
         //background-color: #409EFF;
         border: 1px solid #409EFF;
+        cursor: pointer;
       }
     }
 
     .active {
       color: #fff !important;
       background-color: #409EFF;
+      cursor: pointer;
     }
 
   }
diff --git a/src/components/member/memberProfile/FlowingWater.vue b/src/components/member/memberProfile/FlowingWater.vue
index 7c0ae61..7790bca 100644
--- a/src/components/member/memberProfile/FlowingWater.vue
+++ b/src/components/member/memberProfile/FlowingWater.vue
@@ -1,8 +1,8 @@
 <template>
-  <Mask :width="798" :height="540" :is-show="isFlowingWater" @close="isFlowingWater = false" title="流水记录"
+  <Mask :width="798" :height="540" :is-show="isFlowingWater" @close="close" title="流水记录"
         :show-footer="true">
     <template #default>
-      <div class="content">
+      <div class="content-flowing">
         <div class="head">
           <img style="width: 60px;height: 60px"
                :src="'/static/images/member/' + (props.info.sex === 1 ? 'man' : 'women') + '.png'"
@@ -23,18 +23,17 @@
             </div>
           </div>
         </div>
-        <el-table class="body_list" :data="tableData"
-                  style="border-radius: 8px;border: 1px solid #EAEAEC;border-bottom: none"
+        <el-table class="body_list" :data="tableData" style="width: 100%;height: 100%"
                   :header-cell-style="{ backgroundColor: '#F1F5FB'}">
-          <el-table-column prop="createTime" label="创建时间" width="180">
+          <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip>
             <template #default="scope">
               {{ formatDate(scope.row.createTime) }}
             </template>
           </el-table-column>
-          <el-table-column prop="beforeIntegral" label="变化前"/>
-          <el-table-column prop="changeIntegral" label="变化量"/>
-          <el-table-column prop="afterIntegral" label="变化后"/>
-          <el-table-column prop="remark" label="备注"/>
+          <el-table-column prop="beforeIntegral" label="变化前" show-overflow-tooltip/>
+          <el-table-column prop="changeIntegral" label="变化量" show-overflow-tooltip/>
+          <el-table-column prop="afterIntegral" label="变化后" show-overflow-tooltip/>
+          <el-table-column prop="remark" label="备注" show-overflow-tooltip/>
         </el-table>
       </div>
     </template>
@@ -63,37 +62,33 @@ const props = defineProps({
     type: Object,
     default: () => ({})
   },
-  id: {
-    type: String || Number,
-    default: ""
-  }
 })
 const currentPage = ref(1)
 const tableData: any = ref<any>([])
 const total = ref(0)
 const emit = defineEmits(['close'])
 const close = () => {
+  isFlowingWater.value = false
+  id.value = ""
   emit('close')
 }
-onMounted(() => {
-  if (!props.id) return
-  init()
-})
 const changePage = (page: any) => {
   const query = {
     pageNum: page,
     pageSize: 20,
-    vipId: props.id
+    vipId: id.value
   }
   post('vip/integral/list', {query: query}).then((res: any) => {
     tableData.value.splice(0, tableData.length, ...res.list)
   })
 }
-const init = () => {
+const id = ref('')
+const init = (id: any) => {
+  if (!id) return
   const query = {
     pageNum: 1,
     pageSize: 10,
-    vipId: props.id
+    vipId: id
   }
   post('vip/integral/list', {query: query}).then((res: any) => {
     tableData.value.splice(0, tableData.length, ...res.list)
@@ -105,15 +100,18 @@ const formatDate = (isoStr: any) => {
   const date = new Date(isoStr);
   return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
 }
+defineExpose({init})
 </script>
 <style scoped lang="scss">
-.content {
+.content-flowing {
+  width: 100%;
   padding-top: 24px;
   height: 100%;
   display: flex;
   flex-direction: column;
 
   .head {
+    width: 100%;
     height: 60px;
     display: flex;
     align-items: center;
diff --git a/src/views/member/index.vue b/src/views/member/index.vue
index bde3d9a..524753a 100644
--- a/src/views/member/index.vue
+++ b/src/views/member/index.vue
@@ -157,7 +157,7 @@
   <VipLevelEdit ref="levelEditRef" @close="init"></VipLevelEdit>
   <Grant v-model="isGrant" :info="listItem" @close="closeGrant()"></Grant>
   <Exchange v-model="isExchange" :info="listItem" @close="closeExchange()"></Exchange>
-  <FlowingWater :id="flowingId" v-model="isFlowingWater" :info="listItem"></FlowingWater>
+  <FlowingWater v-model="isFlowingWater" ref="flowingWaterRef" :info="listItem"></FlowingWater>
   <OrderDetail ref="orderDetailRef" @updateOrderList="getChargeList(listItem.id)"></OrderDetail>
 </template>
 <script setup lang="ts">
@@ -378,10 +378,15 @@ const levelEditRef = ref();
 const antysList = ref<any>(Object.entries(antys).map(([id, name]) => ({id, name})))
 const certTypeList = ref<any>(Object.entries(psnCertTypes).map(([id, name]) => ({id, name})))
 const flowingId = ref();
+const flowingWaterRef = ref();
 const openFlowingWater=()=>{
   isFlowingWater.value=true
   flowingId.value=listItem.value.id
+  nextTick(()=>{
+    flowingWaterRef.value?.init(flowingId.value)
+  })
 }
+
 </script>
 <style scoped lang="scss">
 @use "@/assets/scss/base.scss";
diff --git a/src/views/social/directory.vue b/src/views/social/directory.vue
index a2499f3..e6a9e0a 100644
--- a/src/views/social/directory.vue
+++ b/src/views/social/directory.vue
@@ -52,26 +52,32 @@
                        v-model:current-page="current_page" @current-change="change_page"/>
       </div>
     </div>
-    <Mask :is-show="UpdateDirectoryLoading" :width="300" :height="300" title="更新版本" :close="false">
-      {{ tip_message }}
-      <div class="demo-progress" style="margin-top: 20px">
-        <el-progress :percentage="100" :stroke-width="15" striped
-                     striped-flow :show-text="false"/>
+    <Mask :is-show="UpdateDirectoryLoading" :width="540" :height="163" title="更新版本" :close="false">
+      <div class="updateDirectory">
+        <div>{{ tip_message }}</div>
+        <div class="demo-progress">
+          <el-progress :percentage="100" :stroke-width="15" striped
+                       striped-flow :show-text="false"/>
+        </div>
       </div>
     </Mask>
-
-    <Mask :is-show="isUpdate1312" :width="600" :height="300" title="有效期更新" @close="isUpdate1312=false">
+    <Mask :is-show="isUpdate1312" :width="540" :height="347" title="有效期更新" @close="isUpdate1312=false">
       <div class="update_box">
         <el-date-picker
             v-model="updt_time"
             type="date"
             placeholder="选择一个起始日期"
             size="default"
+            style="flex: 1;height: 42px"
         />
-        <div class="btn" @click="update1312(1)">开始更新</div>
+        <div class="default-btn" @click="update1312(1)"
+             :style="{background: showBtn ? '#EDEFF6' : '', color: showBtn ? '#333333' : ''}" style="margin-left: 24px">
+          开始更新
+        </div>
+      </div>
+      <div class="tip-body">
         <div class="tip">{{ tip }}</div>
       </div>
-
     </Mask>
   </div>
 </template>
@@ -109,9 +115,12 @@ const tabs = [
 ];
 let tableData: any = ref([])
 let content: any = ref(null);
+const showBtn = ref(false)
 let update1312 = (current_page: number) => {
+  showBtn.value = true
   if (current_page == 1) {
     tip.value = "开始更新第1页"
+    showBtn.value = false
   }
   post("social/directory_upinfo/get_page", {
     updt_time: updt_time.value,
@@ -127,11 +136,13 @@ let update1312 = (current_page: number) => {
     } else {
       tip.value = "所有更新已完成"
       isUpdate1312.value = false
+      showBtn.value = false
     }
 
   }).catch((err: any) => {
     isUpdate1312.value = false;
     current_page = 1;
+    showBtn.value = false
   })
 }
 const openUpdateBox = (type: number) => {
@@ -254,10 +265,10 @@ let download = (ver: any, type: any) => {
 
 <style scoped lang="scss">
 .update_box {
-  position: relative;
   width: 100%;
-  height: 100%;
-  padding: 20px;
+  height: 90px;
+  padding: 24px;
+  display: flex;
 }
 
 .container-wrapper {
@@ -328,4 +339,20 @@ let download = (ver: any, type: any) => {
 
 }
 
+.tip-body {
+  height: 100%;
+  padding: 0 24px;
+
+  .tip {
+    width: 492px;
+    height: 160px;
+    background: #F9FAFC;
+    border-radius: 8px;
+    padding: 24px;
+    font-weight: 500;
+    font-size: 16px;
+    color: #999999;
+    font-style: normal;
+  }
+}
 </style>
\ No newline at end of file