lz-insurance

src/views/sz-public-new/index.vue

@@ -6,22 +6,18 @@
       :header-info="headerInfo"
     />
     <div class="insurance-register-bg">
-      <div class="bg-img">
+      <div class="bg-img back-img">
         <img
-          src="https://files.yunqueyi.com/image/png/common/2023061315234016.png"
-          alt="success"
+          :src="bgPath"
         >
       </div>
       <div class="wrap-reg">
-        <div
-          class="sz-appoint-form-tips"
-        >
-          <van-icon
-            name="warning-o"
-            class="tips-icon"
-          /> 请如实填写参保人信息，我们将对您的身份进行核验。
-        </div>
         <div class="choose-section">
+          <div class="sz-appoint-form-tips">
+            <img
+              src="https://files.yunqueyi.com/image/png/common/20230628155802981.png"
+            >
+          </div>
           <van-form
             ref="dectionForm"
             validate-first
@@ -77,18 +73,27 @@
             </van-field>
           </van-form>
         </div>
-        <van-button
-          round
-          block
-          type="info"
-          :disabled="!canSubmit"
-          class="appoint-form-submit "
-          :class="canSubmit ? 'appoint-form-submit-active':''"
-          @click="appointment"
-        >
-          预约领取
-        </van-button>
+        <div class="bg-img mt20">
+          <img
+            src="https://files.yunqueyi.com/image/png/common/20230628141616682.png"
+          >
+        </div>
+        <div class="bg-img mt20">
+          <img
+            src="https://files.yunqueyi.com/image/png/common/20230628141650960.png"
+          >
+        </div>
       </div>
+
+    </div>
+    <div class="bottom-btn">
+      <van-button
+        class="btn"
+        :class="canSubmit ? 'appoint-form-submit-active':''"
+        @click="appointment"
+      >
+        领取权益
+      </van-button>
     </div>
     <van-popup
       v-model="showProtocol"
@@ -126,6 +131,7 @@
 
 <script>
 import { createOrderSzV2} from '@/api/question';
+import {getBanner} from '@/api/entitlement';
 const { VUE_APP_ENV } = process.env;
 let that;
 export default {
@@ -154,6 +160,7 @@ export default {
         path:'pagesInsurance/all-entrance/index', // 打开页面
         extraData: JSON.stringify({})
       },
+      bgPath: ''
     };
   },
   computed: {
@@ -172,10 +179,20 @@ export default {
     this.projectEquityNo = projectEquityNo;
     this.externalOrderNo = externalOrderNo;
     // this.$loading.show();
+    this.getBanner(7, projectEquityNo);
 
   },
   methods: {
-
+    getBanner(pageType, yunOrderNo) {
+      const self = this;
+      self.$loading.show();
+      getBanner(pageType, yunOrderNo).then(res => {
+        if(res.code === '000000') {
+          self.bgPath = res.data.logoUrl;
+          self.$loading.hide();
+        }
+      });
+    },
     // 创建深圳订单
     createOrderSz() {
       const { externalOrderNo, projectEquityNo } = this;
@@ -233,16 +250,15 @@ export default {
 <style lang="scss" scoped>
 .sz-appoint {
   width: 100%;
-  height: 100vh;
   overflow: auto;
   box-sizing: border-box;
-  color: #ffffff;
-  background: #F3FCFF;
+  padding-bottom: 70px;
+  background-color: #BEE2FD;
   .insurance-register-bg{
     width: 100%;
-    position: relative;
     .bg-img{
       width: 100%;
+
       img{
         width: 100%;
         height: 100%;
@@ -250,20 +266,24 @@ export default {
     }
     .wrap-reg{
       width: 350px;
-      background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
-      box-shadow: 0px 18px 12px 0px #EBF9F8;
       border-radius: 20px;
-      position: absolute;
-      top: 93px;
-      left: 13px;
+      margin: 0 auto;
+      margin-top: 230px;
+      position: relative;
+
     }
   }
-
+  .back-img{
+    position: absolute;
+    top: 0;
+  }
   .choose-section {
     padding: 10px 12px;
     background: #ffffff;
     border-radius: 11px;
     font-weight: 600;
+    padding-top: 0px;
+    margin: 0 auto;
     /deep/ .van-field__label{
       color: #212121;
     }
@@ -331,21 +351,12 @@ export default {
     font-size: 16px;
     font-weight: 600;
   }
-  .appoint-form-submit-active{
-    background: #00BDA5;
-  }
+
   .sz-appoint-form-tips {
-    display: flex;
-    padding: 10px 15px;
-    background: linear-gradient(99deg, #fffbe5 0%, #fdfcf8 100%);
-    border-radius: 22px 22px 0px 0px;
-    font-size: 12px;
-    font-weight: 400;
-    color: #dc780c;
-    align-items: center;
-    .tips-icon {
-      margin-right: 7px;
-    }
+    width: 175px;
+    height:32px;
+    margin: 0 auto;
+    margin-bottom: 10px;
   }
   /deep/.van-cell{
     display: block;
@@ -389,5 +400,35 @@ export default {
   /deep/.van-popup--center{
     border-radius: 20px;
   }
+  .bottom-btn{
+    width: 100%;
+    background: #FFFFFF;
+    box-shadow: inset 0px 1px 0px 0px #E9E9E9;
+    overflow: hidden;
+    text-align: center;
+    padding-bottom: calc(5px + env(safe-area-inset-bottom) / 2);
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    .btn{
+      width: 351px;
+      height: 40px;
+      border-radius: 20px;
+      margin: 4px auto;
+      font-size: 16px;
+      background: #cccccc;
+      font-weight: 600;
+      color: #FFFFFF;
+      line-height: 40px;
+      text-align: center;
+    }
+    .appoint-form-submit-active{
+      background: linear-gradient(270deg, #FF7400 0%, #FE4000 100%);
+    }
+  }
+  .mt20{
+    margin-top: 10px;
+    background-color: #BEE2FD;
+  }
 }
 </style>