Merge branch 'feature/ui-optimize-0801' into 'release'

feat: 调整交互

See merge request !265

src/views/appointDetails/index.vue

@@ -6,32 +6,38 @@
       :header-info="headerInfo"
     />
     <div class="insurance-reseach-detail">
-      <div class="detail-status">
-        <img
-          v-if="expireFlag"
-          src="https://files.yunqueyi.com/image/png/common/20230301105920798.png"
-          alt=""
-        >
-        <img
-          v-else
-          src="https://files.yunqueyi.com/image/png/common/20230228133738711.png"
-          alt=""
-        >
-
-        {{ !expireFlag ? statusMap(detailInfo.status) : '已过期' }}
-      </div>
       <div class="detail-top insurance-detection">
+        <div class="detail-status">
+          <img
+            v-if="expireFlag"
+            src="https://files.yunqueyi.com/image/png/common/20230804161425552.png"
+            alt=""
+          >
+          <img
+            v-else
+            src="https://files.yunqueyi.com/image/png/common/20230804161508175.png"
+            alt=""
+          >
+
+          {{ !expireFlag ? statusMap(detailInfo.status) : '已过期' }}
+        </div>
         <div class="detection-title">
           您的{{ isUnderLine ? '领取' : '检测' }}时间
         </div>
-        <div class="detection-time mb5">
+        <div class="detection-time">
           {{ detailInfo.appointmentTimeStr }}
         </div>
-        <div class="detection-time">
+        <div class="detection-time mb5">
           {{ detailInfo.appointmentTimeStr2 }}
         </div>
-        <div class="detail-top-info">
-          <div class="detail-top-address">
+        <div
+          class="detail-top-info"
+          :class="{ 'navigation-img--active': !isRemark }"
+        >
+          <div
+            class="detail-top-address"
+            :class="{ 'navigation-img--active': isRemark }"
+          >
             <div class="detail-top-address-name">
               {{ detailInfo.hospitalName || '--' }}
             </div>
@@ -48,33 +54,31 @@
             >
               <img
                 class="navigation-img"
-                src="https://files.yunqueyi.com/image/png/common/20230301160437750.png"
+                src="https://files.yunqueyi.com/image/png/common/2023080416441238.png"
               >
-              <div class="navigation-text">
+              <!-- <div class="navigation-text">
                 导航
-              </div>
+              </div> -->
             </div>
           </div>
-          <img
-            class="detail-top-img"
-            src="https://files.yunqueyi.com/image/png/common/20230228180052259.png"
-            alt=""
-          >
           <div
-            v-if="
-              detailInfo.hospitalRemarks && detailInfo.hospitalRemarks !== ''
-            "
+            v-if="isRemark"
             class="detail-top-hospitalInfo"
           >
             <img
               src="https://files.yunqueyi.com/image/png/common/20230228181040335.png"
               alt=""
             >
-            {{ detailInfo.hospitalRemarks }}
+            提示备注信息提示备注信息提示备注信息提示{{
+              detailInfo.hospitalRemarks
+            }}
           </div>
         </div>
       </div>
       <div class="detail-qrcode-content">
+        <div class="tips">
+          请截图保存图片<br>检测时出示给检测人员
+        </div>
         <van-image
           width="189px"
           height="189px"
@@ -83,9 +87,6 @@
         <div class="cancel-code">
           {{ `核销码:${verificationCode}` }}
         </div>
-        <div class="tips">
-          请截图保存图片<br>检测时出示给检测人员
-        </div>
       </div>
       <div
         v-if="!expireFlag"
@@ -265,6 +266,12 @@ export default {
   },
   computed: {
     ...mapGetters('home', ['insuranceInfo']),
+    isRemark() {
+      return (
+        this.detailInfo.hospitalRemarks &&
+        this.detailInfo.hospitalRemarks !== ''
+      );
+    },
   },
 
   created() {
@@ -626,20 +633,20 @@ export default {
   box-sizing: border-box;
   background: #f5f6f8;
   background: linear-gradient(180deg, #00bda5 0%, #20c5b0 125px, #f5f6f8 257px);
-  padding: 20px 12px 160px;
+  padding: 0 12px 160px 12px;
   overflow: auto;
   .detail-status {
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 20px;
+    font-size: 18px;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
-    color: #ffffff;
-    line-height: 28px;
+    color: #212121;
+    line-height: 18px;
     img {
-      width: 24px;
-      height: 24px;
+      width: 20px;
+      height: 20px;
       margin-right: 6px;
     }
   }
@@ -652,7 +659,7 @@ export default {
   }
 
   .detail-qrcode-content {
-    padding: 20px 0;
+    padding: 12px 0;
     border-radius: 11px;
     background: #fff;
     display: flex;
@@ -663,13 +670,14 @@ export default {
 
     .cancel-code {
       width: 165px;
-      height: 31px;
+      height: 32px;
       background: #f9fafb;
       border-radius: 15px;
       font-size: 14px;
-      color: #666666;
+      color: #212121;
       text-align: center;
-      line-height: 31px;
+      line-height: 32px;
+      font-weight: 600;
       margin: 2px 0 4.5px 0;
     }
 
@@ -684,10 +692,15 @@ export default {
     }
   }
 
+  .navigation-img--active {
+    background-image: url('https://files.yunqueyi.com/image/png/common/2023080416421136.png') !important;
+    background-position: 100% !important;
+    background-size: cover !important;
+  }
+
   .detail-top-info {
-    background: #f9fafb;
+    background-color: #f9fafb;
     border-radius: 11px;
-    padding-bottom: 10px;
     .detail-top-img {
       position: relative;
       left: 50%;
@@ -699,18 +712,21 @@ export default {
     .detail-top-hospitalInfo {
       position: relative;
       display: flex;
-      padding-left: 27px;
       font-size: 13px;
       font-family: PingFangSC-Regular, PingFang SC;
       font-weight: 400;
       color: #212121;
       line-height: 19px;
       align-items: center;
+      padding: 10px 0 10px 27px;
+      border-top: 1px solid #f0f1f2;
+      background-color: #f9fafb;
+      border-radius: 0 0 11px 11px;
 
       img {
         position: absolute;
         left: 12px;
-        top: 1px;
+        top: 12px;
         width: 12px;
         height: 14px;
         margin-right: 5px;
@@ -744,6 +760,7 @@ export default {
   .detail-top-address {
     position: relative;
     padding: 15px 52px 6px 12px;
+    border-radius: 11px 11px 0 0;
     .detail-top-address-name {
       height: 21px;
       width: 257px;
@@ -763,14 +780,16 @@ export default {
       font-weight: 400;
       color: #9f9f9f;
       line-height: 16px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
     .detail-top-address-navigation {
       position: absolute;
       top: 13px;
       right: 12px;
       .navigation-img {
-        width: 28px;
-        height: 28px;
+        width: 36px;
         margin-bottom: 4px;
       }
       .navigation-text {
@@ -896,29 +915,28 @@ export default {
   background: #ffffff;
   border-radius: 11px;
   padding: 20px 15px;
-  margin-top: 22px;
+  margin-top: 12px;
   .detection-title {
-    height: 18px;
+    height: 13px;
     font-size: 13px;
     font-family: PingFangSC-Regular, PingFang SC;
     font-weight: 400;
     color: #666666;
-    line-height: 18px;
+    line-height: 13px;
     text-align: center;
-    margin-bottom: 1px;
+    margin-top: 17px;
+    margin-bottom: 6px;
   }
   .detection-time {
-    height: 30px;
-    font-size: 21px;
+    font-size: 20px;
     font-family: PingFangSC-Semibold, PingFang SC;
     font-weight: 600;
     color: #212121;
-    line-height: 30px;
+    line-height: 24px;
     text-align: center;
-    margin-bottom: 15px;
   }
   .mb5 {
-    margin-bottom: 5px;
+    margin-bottom: 15px;
   }
 }
 .appoint-detail-tel {
@@ -926,7 +944,7 @@ export default {
   font-size: 14px;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
-  color: #666666;
+  color: #999999;
   line-height: 22px;
   text-align: center;
   .serve-time {

vue.config.js

@@ -36,7 +36,7 @@ module.exports = {
     port: 8083,
     proxy: {
       '/proxy': {
-        target: 'https://dev-sc.yunqueyi.com/',
+        target: 'https://test1-sc.yunqueyi.com/',
         // target: 'https://test1-sc.yunqueyi.com/',
         // target: 'https://uat-sc.yunqueyi.com/',
         // http://10.241.65.90:3000/mock/1071/cs/route/removeUser