feat: merge master

app/web/api/editor.api.ts

@@ -46,4 +46,8 @@ export default {
   getServerTime() {
     return http.get(`${config.apiHost}/editor/getServerTime`);
   },
+
+  getTongDunIdByKey(params) {
+    return http.post(`${config.kdspHost}/api/kdsp/fraud/getDeviceId`, params);
+  },
 };
\ No newline at end of file

app/web/api/modal.api.ts

+import http from '../service/http.service';
+import config from '../config';
+
+export default {
+  // 获取优惠券弹窗
+  getCouponModal(params) {
+    return http.post(`${config.kdspHost}/api/kdsp/app-config-push/coupon/push`, params);
+  },
+};
\ No newline at end of file

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

+<template>
+  <div class="couponModal">
+    <cr-popup v-model="show" round style="z-index: 901">
+      <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>
+</template>
+<script>
+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: {
+    close() {
+      this.show = false;
+    }
+  },
+  watch: {
+    value(val) {
+      this.show = val;
+    },
+    modalData: {
+      immediate: true,
+      handler(val) {
+        this.couponModalConfig = val.couponPush ? val.couponPush : {};
+        this.couponList = val.couponList ? val.couponList : [];
+      }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+@deep: ~'>>>';
+.couponModal{
+  /deep/ .cr-overlay{
+    z-index: 900;
+  }
+}
+.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: 8px;
+        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: 3px 0;
+      pointer-events: none;
+    }
+  }
+  &-footer{
+    width: 311px;
+    height: 80px;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+.cr-popup {
+  z-index: 104;
+  background-color: transparent;
+  border-radius: 0;
+}
+.cr-icon {
+  display: block;
+  margin: 20px auto 0;
+}
+</style>
\ No newline at end of file

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

@@ -3,6 +3,7 @@ import { Getter, State, Mutation } from 'vuex-class';
 import FreedomContainer from '../../component/FreedomContainer/index.vue';
 import BackTop from '../../component/BackTop/index.vue';
 import InvalidNotice from '../../component/invalidNotice/index.vue';
+import CouponModal from '../../component/CouponModal/index.vue';
 import EmptyState from '../../component/EmptyState/index.vue';
 import PageBottomTip from '../../component/PageBottomTip/index.vue';
 import GridLayout from '../../component/VueGridLayout/GridLayout.vue';
@@ -21,7 +22,10 @@ import Bridge from '@qg/js-bridge';
 import MpBridge from '@qg/citrus-ui/src/helper/service/mp';
 import navigatorApi from '@/api/navigator.api';
 import editorApi from '@/api/editor.api';
-@Component({ components: { FreedomContainer, GridLayout, GridItem, PageBottomTip, BackTop, InvalidNotice, EmptyState }, name: 'Activity'})
+import modalApi from '@/api/modal.api';
+import { getTokenFromApp } from '@qg/citrus-ui/src/helper/service/utils';
+import { registeredEvents } from '@/service/sa.service';
+@Component({ components: { FreedomContainer, GridLayout, GridItem, PageBottomTip, BackTop, InvalidNotice, EmptyState, CouponModal }, name: 'Activity'})
 export default class Activity extends Mixins(TransformStyleMixin, BottomNavStyleMixin, SaMixin, DisableTouchMixin) {
 
   @Getter('pageData') pageData;
@@ -52,6 +56,8 @@ export default class Activity extends Mixins(TransformStyleMixin, BottomNavStyle
   targetEle: HTMLElement | null = null;
   loading: boolean = true;
   modfiTabsStyleDebounce = debounce(this.modfiTabsStyle, 300);
+  showCouponModal: boolean = false;
+  couponModalData: object = {};
   get layout() {
     if (!isApp && !isWxMp && !EASY_ENV_IS_NODE) {
       this.pageData.elements = this.pageData.elements.filter(v => v.name !== 'cs-search-bar' && v.name !== 'cs-snap-up');
@@ -144,14 +150,78 @@ 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');
-    console.log(serverTime, 'time');
+    // console.log(res, 'finance result');
+    // console.log(serverTime, 'time');
     if (res && res.showFlag === 0) {
       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) {
+      const couponPushIdList = this.pageData.props.couponModal.join(',');
+      let tongdunDeviceId = '';
+      // 先获取同盾ID，再调用优惠券弹窗推送接口
+      if (EASY_ENV_IS_BROWSER) {
+        if (isApp) {
+          // app的时候通过事件获取同盾id
+          EventBus.$on('NATIVE_EVENT_GET_TDONGDUN_ID', res => {
+            console.log('getTongdunIdInAppSuccess', JSON.stringify(res));
+            tongdunDeviceId = res.data.tongdunDeviceId || '';
+            this.getCouponModalDetailReq(couponPushIdList, tongdunDeviceId);
+          });
+          const bridge = new Bridge();
+          bridge.run({
+            event: 'getTongdunId',
+            data: {},
+          });
+        }
+      }
+    }
+  },
+  async getCouponModalDetailReq(couponPushIdList, tongdunDeviceId) {
+    // 获取推送弹窗数据
+    if (!couponPushIdList || !tongdunDeviceId) { return; }
+    const [res, err] = await modalApi.getCouponModal({
+      couponPushIdList,
+      tongdunDeviceId
+    });
+    if (err) { return; }
+    if (res && Object.keys(res).length) {
+      this.couponModalData = res;
+      this.showCouponModal = true;
+      try {
+        const popupwindow_name = res.couponPush && res.couponPush.componentName ? res.couponPush.componentName : '';
+        const popupwindow_id = res.couponPush && res.couponPush.appConfigPushNo ? res.couponPush.appConfigPushNo : '';
+        const coupon_id = res.couponList.map(item => item.id).join(',');
+        registeredEvents('H5_ActivityPageCouponPopupExposure', {
+          activity_id: this.pageInfo.uuid,
+          popupwindow_name,
+          popupwindow_id,
+          coupon_id
+        });
+      } catch (e) {
+        console.log(e);
+      }
+    }
   }
   comparePageTime(serverTime) {
     const { validStartTime, validEndTime } = this.pageInfo;
@@ -458,7 +528,9 @@ 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) {
+    }
+  }
+    // if (isApp) {
         // nativeBridge = new Bridge();
         // nativeBridge.openNewUrl({
         //   data: {

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

@@ -24,6 +24,7 @@
         </div>
         <back-top v-if="showBackTop" :show-back-top="showBackTop" ref="backTop" />
         <invalid-notice v-model="pageInvalid" @toOtherActivity="toOtherActivity"/>
+        <coupon-modal :modal-data="couponModalData" v-model="showCouponModal" />
       </template>
       <empty-state v-else />
     </div>