添加活动页面

src/router/routes-student.ts

@@ -81,6 +81,14 @@ export default [
         }
       },
       {
+        path: '/memberActiveO',
+        name: 'memberActiveO',
+        component: () => import('@/student/member-center/member-active-o'),
+        meta: {
+          title: '元旦狂想曲小酷送好礼'
+        }
+      },
+      {
         path: '/memberRecord',
         name: 'memberRecord',
         component: () => import('@/student/member-center/member-record'),

src/student/member-center/member-active-o.tsx

@@ -0,0 +1,63 @@
+import { defineComponent, onMounted, ref } from 'vue'
+import styles from './member-active.module.less'
+import p1 from './images/active-o/1.png'
+import p2 from './images/active-o/2.png'
+import p3 from './images/active-o/3.png'
+import btn from './images/active-o/btn.png'
+import { useRouter } from 'vue-router'
+import { postMessage } from '@/helpers/native-message'
+import { Icon } from 'vant'
+import { browser } from '@/helpers/utils'
+import ColSticky from '@/components/col-sticky'
+
+export default defineComponent({
+  setup() {
+    const router = useRouter()
+    const navBarHeight = ref(0)
+
+    const onDetail = () => {
+      router.push('/memberCenter')
+    }
+
+    const onBack = () => {
+      if (browser().isApp) {
+        postMessage({ api: 'goBack' })
+      } else {
+        router.back()
+      }
+    }
+
+    onMounted(() => {
+      postMessage({ api: 'getNavHeight' }, res => {
+        const { content } = res as any
+        const dpi = content.dpi || 2
+        if (content.navHeight) {
+          const navHeight = content.navHeight / dpi
+          navBarHeight.value = navHeight
+        }
+      })
+    })
+    return () => (
+      <div class={[styles.memberActive, styles.memberActiveO]}>
+        <Icon
+          name="arrow-left"
+          class={styles.backIcon}
+          style={{
+            top: `calc(${navBarHeight.value}px + 12px)`
+          }}
+          onClick={onBack}
+        />
+
+        <img src={p1} style={{ 'margin-bottom': '-1px' }} />
+        <img src={p2} />
+        <img src={p3} />
+
+        <ColSticky position="bottom">
+          <div class={styles.memberBtn}>
+            <img src={btn} onClick={onDetail} />
+          </div>
+        </ColSticky>
+      </div>
+    )
+  }
+})

src/student/member-center/member-active.module.less

@@ -1,6 +1,7 @@
 .memberActive {
   font-size: 0;
   background-color: #ebe2b9;
+  line-height: 0;
 
   .backIcon {
     position: fixed;
@@ -13,6 +14,7 @@
   &>img {
     width: 100%;
     line-height: 0;
+    font-size: 0;
   }
 
   .memberBtn {
@@ -24,4 +26,29 @@
       width: 100%
     }
   }
+}
+
+.memberActiveO {
+  background-color: #e23810;
+
+  .backIcon {
+    position: fixed;
+    top: 20px;
+    font-size: 22px;
+    color: #fff;
+    left: 0.42667rem;
+    background-color: rgba(0, 0, 0, .3);
+    border-radius: 50%;
+    padding: 6px;
+  }
+
+  .memberBtn {
+    width: 100%;
+    background-color: #e23810;
+    text-align: center;
+
+    img {
+      width: 55%;
+    }
+  }
 }