feat: 新增移动端购买页广告位优化

apps/mobile/src/views/create-order/components/analysis-report/FooterProductionCard.vue

@@ -26,8 +26,10 @@
         <span class='label-text'>已选规格</span>
         <div class='select-spec-info flex flex-(1 row items-center justify-right)' @click='popupSelect = true'>
           <div class='spec-c-label flex flex-(row items-center)' v-if='specActiveInfo'>
-            <div class="activity-badge" v-if="specActiveInfo.badge">
-              <span class="j-icon icon-huo-badge" />&nbsp;{{specActiveInfo.badge}}
+            <div class="activity-badge" :class='{"is-huo": specActiveInfo?.badge !== "权益特价"}' v-if="specActiveInfo.badge">
+              <span v-if='specActiveInfo?.badge === "权益特价"' class="j-icon icon-crown"></span>
+              <span v-else class="j-icon icon-huo-badge"></span>
+              &nbsp;{{specActiveInfo.badge}}
             </div>
             <span class='spec-name'>{{specActiveInfo.label}}</span>
             <span class='vip-label' :class='{ [specActiveInfo.packLevel]: true }' v-if='specActiveInfo.pack'>
@@ -93,7 +95,14 @@ export default {
   },
   mixins: [orderActivityHelper],
   setup() {
-    const { zhimaReportAccountInfo } = useAccountInfoModel()
+    const { zhimaReportAccountInfo } = useAccountInfoModel(() => {
+      // 非首购、非会员时选中年卡
+      if (!this.isFirstBuy && !this.useNowState.inPack) {
+        this.updateProductSpecId(1514)
+      } else {
+        this.updateProductSpecId(1511)
+      }
+    })
     return {
       zhimaReportAccountInfo
     }
@@ -210,13 +219,9 @@ export default {
       footerNotice: true
     })
   },
-  mounted() {
-    this.updatePayAmount()
-    this.getUserInfoFun()
-    // 非首购、非会员时选中年卡
-    if (!this.isFirstBuy && !this.useNowState.inPack) {
-      this.updateProductSpecId(1514)
-    }
+   mounted() {
+     this.updatePayAmount()
+     this.getUserInfoFun()
   },
   methods: {
     ...mapMutations('createOrder', ['updateProductSpecId', 'updateLayout']),
@@ -460,18 +465,25 @@ export default {
     height: 54px;
     padding: 0 16px;
     .label-text {}
+
     .activity-badge {
       display: flex;
       align-items: center;
       margin-right: 8px;
-      padding: 2px 4px;
-      background: rgba(255, 243, 239, 1);
-      border: 1px solid rgba(255, 98, 107, 1);
-      border-radius: 4px;
-      text-align: center;
-      color: #FB483D;
+      padding: 2px 8px;
       font-size: 11px;
       line-height: 14px;
+      background: linear-gradient(98deg, #ff7c32 0%, #f33838 100%);
+      border-radius: 9px 0px;
+      text-align: center;
+      color: #fff;
+      &.is-huo {
+        padding: 2px 4px;
+        background: rgba(255, 243, 239, 1);
+        border: 1px solid rgba(255, 98, 107, 1);
+        border-radius: 4px;
+        color: #FB483D;
+      }
     }
     .vip-label {
       display: inline-flex;

apps/mobile/src/views/create-order/components/analysis-report/SpecCard.vue

@@ -11,8 +11,10 @@
           <span class='vip-label' :class='{ [spec.packLevel]: true }' v-if='spec.pack'>
             <i class='iconfont icon-vip'></i>
           </span>
-          <div class="activity-badge" v-if="spec.badge">
-            <span class="j-icon icon-huo-badge" />&nbsp;{{spec.badge}}
+          <div class="activity-badge" :class='{"is-huo": spec.badge !== "权益特价"}' v-if="spec.badge">
+            <span v-if='spec?.badge === "权益特价"' class="j-icon icon-crown"></span>
+            <span v-else class="j-icon icon-huo-badge"></span>
+            &nbsp;{{spec.badge}}
           </div>
         </div>
 
@@ -100,14 +102,20 @@ export default {
     display: flex;
     align-items: center;
     margin-left: 8px;
-    padding: 2px 4px;
-    background: rgba(255, 243, 239, 1);
-    border: 1px solid rgba(255, 98, 107, 1);
-    border-radius: 4px;
-    text-align: center;
-    color: #FB483D;
+    padding: 2px 8px;
     font-size: 11px;
     line-height: 14px;
+    background: linear-gradient(98deg, #ff7c32 0%, #f33838 100%);
+    border-radius: 9px 0px;
+    text-align: center;
+    color: #fff;
+    &.is-huo {
+      padding: 2px 4px;
+      background: rgba(255, 243, 239, 1);
+      border: 1px solid rgba(255, 98, 107, 1);
+      border-radius: 4px;
+      color: #FB483D;
+    }
   }
   .vip-label {
     display: inline-flex;

apps/mobile/src/views/create-order/components/analysis-report/model/account.js

@@ -31,16 +31,17 @@ const zhimaReportAccountInfo = computed(() => {
   }
 })
 
-function getAccountInfoModel () {
+function getAccountInfoModel (cb) {
   pdfaccount().then(res => {
     accountInfoModel.value = res.data.zhima || {}
+    typeof cb === 'function' && cb()
   })
 }
 
-export default function useAccountInfoModel () {
+export default function useAccountInfoModel (cb) {
   if (!window[TEMP_KEY]) {
     window[TEMP_KEY] = Date.now()
-    getAccountInfoModel()
+    getAccountInfoModel(cb)
   }
   return {
     zhimaReportAccountInfo,