添加激活码

src/router/routes-common.ts

@@ -228,6 +228,13 @@ export default [
         meta: {
           title: '曲谱列表'
         }
+      },
+      {
+        path: '/activationCode',
+        component: () => import('@/views/activation-code'),
+        meta: {
+          title: '激活码'
+        }
       }
     ]
   },

src/views/activation-code/index.module.less

@@ -0,0 +1,195 @@
+.hotMusicMore {
+  min-height: 100vh;
+  background: url('./images/woring-bg.png') no-repeat top center;
+  background-size: contain;
+
+  :global {
+    .van-search {
+      padding-top: 20px;
+    }
+
+    .van-sticky--fixed {
+      background: url('./images/woring-bg.png') no-repeat top center;
+      background-size: 100%;
+    }
+  }
+}
+
+.woringHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--van-nav-bar-height);
+
+  .leftArrow {
+    padding: 0 var(--k-padding-md);
+  }
+
+  .title {
+    position: relative;
+    z-index: 1;
+
+    i {
+      width: 60px;
+      height: 20px;
+      display: inline-block;
+      background: url('./images/woring-title.png') no-repeat center;
+      background-size: contain;
+    }
+
+    &::after {
+      content: ' ';
+      display: inline-block;
+      position: absolute;
+      left: 0;
+      bottom: -2px;
+      width: 48px;
+      height: 6px;
+      background: linear-gradient(270deg, rgba(119, 255, 239, 0.59) 0%, #42CDFF 100%);
+      opacity: 0.5;
+      z-index: -1;
+    }
+  }
+
+  .recordBtn {
+    background: #FFFFFF;
+    border-radius: 50px;
+    border: 1px solid #1CACF1;
+    font-size: 14px;
+    color: #0E71BC;
+    line-height: 20px;
+    padding: 4px 7px;
+    display: flex;
+    align-items: center;
+    margin-right: 14px;
+    cursor: pointer;
+
+    .iconBook {
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      background: url('./images/icon-book.png') no-repeat center;
+      background-size: contain;
+      margin-right: 3px;
+    }
+  }
+}
+
+.activationContainer {
+  min-height: calc(100vh - var(--header-height) - 90px);
+  background: #F8F9FC;
+  border-radius: 20px 20px 0px 0px;
+  margin-top: 90px;
+  overflow: hidden;
+}
+
+.activationContent {
+  background: #FFFFFF;
+  border-radius: 20px;
+  margin: 13px;
+  overflow: hidden;
+}
+
+.inputGroup {
+  position: relative;
+  padding: 26px 12px;
+  border-bottom: 1px dashed #EBEBEB;
+
+  &::before,
+  &::after {
+    position: absolute;
+    bottom: 0;
+    content: '';
+    width: 16px;
+    height: 16px;
+    border: 8px solid #fff;
+    background-color: #F8F9FC;
+    border-radius: 50%;
+  }
+
+  &::before {
+    left: -16px;
+    bottom: -16px;
+  }
+
+  &::after {
+    right: -16px;
+    bottom: -16px;
+  }
+
+  .input {
+    background: #F2F2F2;
+    border-radius: 29px;
+    --van-cell-line-height: 24px;
+    --van-field-icon-size: 24px;
+    --van-padding-base: 10px;
+    padding: 8px
+  }
+
+  .btnGroup {
+    margin: 22px 34px 0;
+  }
+}
+
+.tipCotnent {
+  padding: 21px 6px 16px 12px;
+
+  h2 {
+    display: flex;
+    align-items: center;
+    font-weight: 600;
+    font-size: 14px;
+    color: #666666;
+    line-height: 20px;
+    padding-bottom: 12px;
+
+    &::before {
+      display: inline-block;
+      content: '';
+      margin-right: 8px;
+      width: 4px;
+      height: 14px;
+      background: linear-gradient(135deg, #31C7FF 0%, #007AFE 100%);
+      border-radius: 3px;
+    }
+  }
+
+  .tips {
+    font-size: 12px;
+    color: #666666;
+    line-height: 28px;
+
+    p {
+      display: flex;
+      align-items: center;
+    }
+
+    .num {
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      margin-right: 5px;
+      flex-shrink: 0;
+    }
+
+    .num1 {
+      background: url('./images/num1.png') no-repeat center;
+      background-size: contain;
+    }
+
+    .num2 {
+      background: url('./images/num2.png') no-repeat center;
+      background-size: contain;
+    }
+
+    .num3 {
+      background: url('./images/num3.png') no-repeat center;
+      background-size: contain;
+    }
+
+    .num4 {
+      background: url('./images/num4.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+}

src/views/activation-code/index.tsx

@@ -0,0 +1,98 @@
+import { browser } from '@/helpers/utils';
+import { defineComponent } from 'vue';
+import styles from './index.module.less';
+import MSticky from '@/components/m-sticky';
+import MHeader from '@/components/m-header';
+import { useRouter } from 'vue-router';
+import { Button, Field } from 'vant';
+import iconKey from './images/icon-key.png';
+
+export default defineComponent({
+  name: 'activationCode',
+  setup() {
+    const router = useRouter();
+    return () => (
+      <div
+        class={[
+          styles.hotMusicMore,
+          browser().isTablet ? styles.hotMusicMoreTablet : ''
+        ]}>
+        <MSticky position="top">
+          <MHeader border={false} background={'transparent'}>
+            {{
+              content: () => (
+                <div class={styles.woringHeader}>
+                  <div>
+                    <i
+                      onClick={() => {
+                        if (browser().isApp) {
+                          postMessage({
+                            api: 'goBack'
+                          });
+                        } else {
+                          router.back();
+                        }
+                      }}
+                      class={[
+                        'van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow',
+                        styles.leftArrow
+                      ]}></i>
+                    <span class={styles.title}>
+                      <i></i>
+                    </span>
+                  </div>
+                  <div class={styles.recordBtn}>
+                    <i class={styles.iconBook}></i>
+                    激活记录
+                  </div>
+                </div>
+              )
+            }}
+          </MHeader>
+        </MSticky>
+
+        <div class={styles.activationContainer}>
+          <div class={styles.activationContent}>
+            <div class={styles.inputGroup}>
+              <Field
+                class={styles.input}
+                leftIcon={iconKey}
+                placeholder="请输入您的互通码"
+              />
+
+              <div class={styles.btnGroup}>
+                <Button
+                  round
+                  block
+                  color="linear-gradient( 135deg, #31C7FF 0%, #007AFE 100%)">
+                  激活
+                </Button>
+              </div>
+            </div>
+            <div class={styles.tipCotnent}>
+              <h2>互通码使用须知：</h2>
+              <div class={styles.tips}>
+                <p>
+                  <i class={[styles.num, styles.num1]}></i>
+                  互通码只可使用一次，不能重复使用；
+                </p>
+                <p>
+                  <i class={[styles.num, styles.num2]}></i>
+                  为确保安全，请勿将互通码泄露，以免造成不必要的损失；
+                </p>
+                <p>
+                  <i class={[styles.num, styles.num3]}></i>
+                  互通码请尽快激活使用，避免激活码过期；
+                </p>
+                <p>
+                  <i class={[styles.num, styles.num4]}></i>
+                  互通码内容已实际购买页面内容为准。
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+});