feat: 积木H5增加优惠券弹窗支持

app/web/page/activity/component/CouponModal/index.vue

 <template>
   <div class="couponModal">
-    <cr-popup v-model="show" round :close-on-click-overlay="false">
-11
+    <cr-popup v-model="show" round>
+      <div class="modal">
+        <div class="modal-header" :style="headerStyle" />
+        <div class="modal-content">
+          <div class="modal-content-fill" :style="contentMainStyle" />
+          <div class="modal-content-main" :style="contentMainStyle">
+            <div class="coupon-item" v-for="(item, index) in couponList" :key="`coupon-item-${index}`">
+              <div class="icon">
+                <cr-image :src="item.iconUrl" />
+              </div>
+              <div class="coupon-item-desc">
+                <div class="face-value" v-if="item.faceValue">
+                  <span class="unit">¥</span><span class="value">{{ item.faceValue }}</span>
+                </div>
+                <div class="limit" v-if="item.limitDesc">{{ item.limitDesc }}</div>
+              </div>
+              <div class="coupon-item-info">
+                <p class="name">{{ item.name }}</p>
+                <p class="time" v-if="item.useStartDate && item.useEndDate">{{item.useStartDate | filterYMD}} - {{item.useEndDate | filterYMD}}</p>
+              </div>
+            </div>
+          </div>
+          <div class="modal-content-img" :style="contentImgStyle"></div>
+        </div>
+        <div class="modal-footer" @click="close" :style="footerStyle"></div>
+      </div>
     <cr-icon type="close" size="34px" color="#FFF" @click="close" />
     </cr-popup>
   </div>
@@ -11,10 +35,57 @@ export default {
   name: 'CouponModal',
   props: {
     value: Boolean,
+    modalData: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
   },
   data() {
     return {
       show: false,
+      couponList: [],
+      couponModalConfig: {}
+    }
+  },
+  filters: {
+    filterYMD(val) {
+      return typeof val === 'string' ? val.split(' ')[0].replace(/\-/g, '.') : ''
+    }
+  },
+  computed: {
+    headerStyle() {
+      // 弹窗背景头图设置
+      const style = {};
+      if (this.couponModalConfig.couponTopImg) {
+        style.backgroundImage = `url(${this.couponModalConfig.couponTopImg})`;
+      }
+      return style;
+    },
+    contentImgStyle() {
+      // 弹窗氛围图设置
+      const style = {};
+      if (this.couponModalConfig.couponFrameImg) {
+        style.backgroundImage = `url(${this.couponModalConfig.couponFrameImg})`;
+      }
+      return style;
+    },
+    contentMainStyle() {
+      // 弹窗优惠券区域样式设置
+      const style = {};
+      if (this.couponModalConfig.couponBackgroundColour) {
+        style.backgroundColor = this.couponModalConfig.couponBackgroundColour;
+      }
+      return style;
+    },
+    footerStyle() {
+      // 弹窗氛按钮图设置
+      const style = {};
+      if (this.couponModalConfig.couponButton) {
+        style.backgroundImage = `url(${this.couponModalConfig.couponButton})`;
+      }
+      return style;
     }
   },
   methods: {
@@ -25,6 +96,13 @@ export default {
   watch: {
     value(val) {
       this.show = val;
+    },
+    modalData: {
+      immediate: true,
+      handler(val) {
+        this.couponModalConfig = val.couponPush ? val.couponPush : {};
+        this.couponList = val.couponList ? val.couponList : [];
+      }
     }
   }
 }
@@ -36,6 +114,132 @@ export default {
     z-index: 103;
   }
 }
+.modal{
+  width: 368px;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  &-header{
+    width: 311px;
+    height: 150px;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+  &-content{
+    width: 100%;
+    padding: 0 28px;
+    position: relative;
+    &-fill{
+      width: 311px;
+      height: 8px;
+      margin: 0 auto;
+    }
+    &-main{
+      position: relative;
+      width: 311px;
+      min-height: 90px;
+      max-height: 228px;
+      overflow-y: auto;
+      margin: 0 auto;
+      box-sizing: border-box;
+      padding: 0 12px;
+      .coupon-item{
+        position: relative;
+        width: 287px;
+        height: 83px;
+        background: #FFFFFF;
+        border-radius: 6px;
+        margin-bottom: 4px;
+        display: flex;
+        flex-direction: row;
+        &:last-child{
+          margin-bottom: 0;
+        }
+        .icon{
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 40px;
+        }
+        &-desc{
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          flex-shrink: 0;
+          width: 95px;
+          height: 100%;
+          color: #EC3333;
+          .face-value{
+            font-weight: bold;
+            margin-bottom: 4px;
+            padding-top: 6px;
+            box-sizing: border-box;
+            // display: flex;
+            // justify-content: center;
+            // align-items: baseline;
+            .unit{
+              font-size: 16px;
+            }
+            .value{
+              font-size: 30px;
+            }
+          }
+          .limit{
+            font-size: 12px;
+            line-height: 17px;
+          }
+        }
+        &-info{
+          flex-shrink: 0;
+          width: 192px;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          p{
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            text-align: left;
+            &.name {
+              line-height: 20px;
+              font-size: 14px;
+              color:#333;
+              font-weight: bold;
+              margin-bottom: 4px;
+            }
+            &.time{
+              line-height: 17px;
+              font-size: 12px;
+              color: #666;
+            }
+          }
+        }
+      }
+      // z-index: -2;
+    }
+    &-img{
+      position: absolute;
+      top:50%;
+      left: 0;
+      transform: translateY(-50%);
+      width: 100%;
+      height: 169px;
+      background-repeat: no-repeat;
+      background-size: 100%;
+      background-position: center;
+      pointer-events: none;
+    }
+  }
+  &-footer{
+    width: 311px;
+    height: 80px;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
 .cr-popup {
   z-index: 104;
   background-color: transparent;

app/web/page/activity/view/activity/index.ts

@@ -23,6 +23,7 @@ import MpBridge from '@qg/citrus-ui/src/helper/service/mp';
 import navigatorApi from '@/api/navigator.api';
 import editorApi from '@/api/editor.api';
 import modalApi from '@/api/modal.api';
+import { getTokenFromApp } from '@qg/citrus-ui/src/helper/service/utils';
 @Component({ components: { FreedomContainer, GridLayout, GridItem, PageBottomTip, BackTop, InvalidNotice, EmptyState, CouponModal }, name: 'Activity'})
 export default class Activity extends Mixins(TransformStyleMixin, BottomNavStyleMixin, SaMixin, DisableTouchMixin) {
 
@@ -148,6 +149,17 @@ export default class Activity extends Mixins(TransformStyleMixin, BottomNavStyle
     this.layoutReadyEvent();
   }
   async created() {
+    if (EASY_ENV_IS_BROWSER) {
+      const token = localStorage.get('vccToken') || '';
+      // 检测页面是否需要强制登录
+      if (this.pageData?.props?.pageNeedLogin && !token && (isApp || isWxMp)) {
+        getTokenFromApp().then(() => {
+          window.location.href = this.addOrEditUrlParams(window.location.href, 'vccToken', localStorage.get('vccToken'));
+        });
+        return;
+      }
+    }
+
     const [res, ] = await editorApi.getFinanceSetting();
     const [serverTime, ] = await editorApi.getServerTime();
     // console.log(res, 'finance result');
@@ -156,8 +168,11 @@ export default class Activity extends Mixins(TransformStyleMixin, BottomNavStyle
       this.pageData.elements = this.pageData.elements.filter(v => v.name !== 'freedom-container' || !v.props.isFinance);
     }
     this.comparePageTime(serverTime); // 验证活动是否在设定的有效期范围内
+    if (EASY_ENV_IS_BROWSER && isApp) {
+      // 优惠券弹窗仅限app使用
       this.getCouponModalDetail();
     }
+  }
   async getCouponModalDetail() {
     // 获取优惠券弹窗相关配置
     if (this.pageData?.props?.couponModal && this.pageData?.props?.couponModal.length) {
@@ -494,6 +509,8 @@ export default class Activity extends Mixins(TransformStyleMixin, BottomNavStyle
       if (token) { url = this.addOrEditUrlParams(url, 'vccToken', token); }
       console.log(url, 5);
       window.location.href = url;
+    }
+  }
     // if (isApp) {
         // nativeBridge = new Bridge();
         // nativeBridge.openNewUrl({

app/web/page/activity/view/activity/index.vue

 <template>
   <div class="pageContent">
-    {{couponModalData}}
     <div class="activity" :class="{hasBottomNav: navigatorConfig}" :style="transformStyle(pageData.commonStyle)">
       <template v-if="!noPageData && tenantIdCorrect">
         <div class="layout">
@@ -25,7 +24,7 @@
         </div>
         <back-top v-if="showBackTop" :show-back-top="showBackTop" ref="backTop" />
         <invalid-notice v-model="pageInvalid" @toOtherActivity="toOtherActivity"/>
-        <coupon-modal v-modeo="showCouponModal" />
+        <coupon-modal :modal-data="couponModalData" v-model="showCouponModal" />
       </template>
       <empty-state v-else />
     </div>