限时抢购

ghsApp/src/admin/home/me.vue

@@ -37,15 +37,17 @@
           </view>
           <view class="image-box" >
             <view class="dec">
-              <block v-if="showDeadline">
-                <text class="dec-deadline-text" @click="goRenew()">到期时间 {{ myInfo.shopInfo && myInfo.shopInfo.deadline ? myInfo.shopInfo.deadline.substr(0,11) : '' }}</text>
-                <view class="dec-renew" @click="goRenew()">
-                  <text class="dec-renew-label">去续费</text>
-                  <text class="iconfont iconxiangyou dec-renew-arrow"></text>
-                </view>
-              </block>
-              <block v-else>
-                <text>微信小程序上可以查看时间</text>
+              <block v-if="myInfo.lifelong == 0">
+                <block v-if="showDeadline">
+                  <text class="dec-deadline-text" @click="goRenew()">到期时间 {{ myInfo.shopInfo && myInfo.shopInfo.deadline ? myInfo.shopInfo.deadline.substr(0,11) : '' }}</text>
+                  <view class="dec-renew" @click="goRenew()">
+                    <text class="dec-renew-label">去续费</text>
+                    <text class="iconfont iconxiangyou dec-renew-arrow"></text>
+                  </view>
+                </block>
+                <block v-else>
+                  <text>微信小程序上可以查看时间</text>
+                </block>
               </block>
             </view>
             <image :src="`${constant.imgUrl}/ghs/me/upgrade2.png`"></image> 
@@ -70,6 +72,31 @@
           </view>
         </template>
 
+        <view
+          v-if="myInfo.lifelong == 0"
+          class="renew-promo-banner"
+          @click="goRenew"
+        >
+          <view class="renew-promo-inner">
+            <view class="renew-promo-left">
+              <view class="renew-promo-badge">
+                <text class="renew-promo-badge-text">热抢</text>
+              </view>
+              <view class="renew-promo-copy">
+                <view class="renew-promo-line1">
+                  <text class="renew-promo-line1-em">限时抢购</text>
+                  <text class="renew-promo-line1-rest">终身版套餐</text>
+                </view>
+                <text class="renew-promo-line2">单店多店 · 多档可选 · 尊享福利</text>
+              </view>
+            </view>
+            <view class="renew-promo-action">
+              <text class="renew-promo-action-text">立即查看</text>
+              <text class="iconfont iconxiangyou renew-promo-action-icon"></text>
+            </view>
+          </view>
+        </view>
+
         <view class="content_box" v-if="myInfo.showAd && myInfo.showAd==1" style="margin-top: 20upx; padding: 20upx; text-align: center; color: #ff5722; font-size:35upx; font-weight: bold;">
           介绍一家批发店使用销花宝，得790元现金
         </view>
@@ -762,6 +789,100 @@ export default {
         }
       }
     }
+    & .renew-promo-banner {
+      margin-top: 24upx;
+      border-radius: 20upx;
+      overflow: hidden;
+      box-shadow: 0 10upx 28upx rgba(37, 99, 235, 0.35);
+    }
+    & .renew-promo-inner {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      padding: 28upx 22upx 28upx 20upx;
+      background: linear-gradient(128deg, #1d4ed8 0%, #3b82f6 42%, #6366f1 100%);
+      border-width: 1upx;
+      border-style: solid;
+      border-color: rgba(255, 255, 255, 0.22);
+      box-sizing: border-box;
+    }
+    & .renew-promo-left {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+    }
+    & .renew-promo-badge {
+      flex-shrink: 0;
+      margin-right: 18upx;
+      padding: 8upx 14upx;
+      border-radius: 12upx;
+      background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
+      border-width: 1upx;
+      border-style: solid;
+      border-color: rgba(180, 83, 9, 0.35);
+    }
+    & .renew-promo-badge-text {
+      font-size: 20upx;
+      font-weight: 800;
+      color: #78350f;
+      letter-spacing: 2upx;
+    }
+    & .renew-promo-copy {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+    }
+    & .renew-promo-line1 {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: baseline;
+    }
+    & .renew-promo-line1-em {
+      font-size: 34upx;
+      font-weight: 800;
+      color: #fef08a;
+      letter-spacing: 1upx;
+      text-shadow: 0 2upx 4upx rgba(0, 0, 0, 0.18);
+    }
+    & .renew-promo-line1-rest {
+      margin-left: 8upx;
+      font-size: 30upx;
+      font-weight: 700;
+      color: #ffffff;
+      letter-spacing: 1upx;
+    }
+    & .renew-promo-line2 {
+      margin-top: 12upx;
+      font-size: 22upx;
+      line-height: 32upx;
+      color: rgba(255, 255, 255, 0.9);
+      font-weight: 500;
+    }
+    & .renew-promo-action {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      flex-shrink: 0;
+      margin-left: 16upx;
+    }
+    & .renew-promo-action-text {
+      font-size: 26upx;
+      font-weight: 700;
+      color: #ffffff;
+      letter-spacing: 1upx;
+    }
+    & .renew-promo-action-icon {
+      font-size: 24upx;
+      color: rgba(255, 255, 255, 0.95);
+      margin-left: 8upx;
+      line-height: 1;
+      transform: translateY(1upx);
+    }
     .bottom-agreement{
       z-index:99999;
       text-align:center;