overseas 0.0.1

package/packages/business/grade-panel/src/gradePanel.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="grade-selection-list-wrapper" :style="backgroundImgStyle">
+    <div class="grade-selection-list-title">
+      {{ guide }}
+    </div>
+    <div class="grade-selection-list-container">
+      <ul class="grade-selection-item-wrapper">
+        <li v-for="(item, index) in gradeList" :key="index">
+          <div
+            class="font-medium grade-selection-item"
+            :class="{ active: isActive == item.gradeId }"
+            @click="selectGrade(item)"
+          >
+            <span class="item-text">
+              {{ item.gradeName }}
+            </span>
+          </div>
+        </li>
+      </ul>
+      <ts-button
+        class="btn"
+        style-type="primary"
+        size="small"
+        width="100%"
+        height="48px"
+        @click="btnClick"
+      >
+        {{ title }}
+      </ts-button>
+    </div>
+  </div>
+</template>
+<script>
+import TsButton from "../../../base/button";
+
+export default {
+  name: "TsGradeSelectionList",
+  components: { TsButton },
+  props: {
+    guide: {
+      default: "请选择孩子年级",
+      type: String,
+    },
+    jumpType: {
+      default: "",
+      type: String,
+    },
+    action: {
+      default: "",
+      type: String,
+    },
+    linkUrl: {
+      default: "",
+      type: String,
+    },
+    backgroundImgUrl: {
+      default: "",
+      type: String,
+    },
+    title: {
+      default: "SIGN UP NOW",
+      type: String,
+    },
+    dataType: {
+      // 范围： courseId | packageId
+      default: "courseId",
+      type: String,
+    },
+    ids: {
+      default: () => [],
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      gradeList: [],
+      isActive: null,
+    };
+  },
+  computed: {
+    backgroundImgStyle(){
+      return {
+        backgroundImage: `url(${this.backgroundImgUrl})`,
+        backgroundSize: 'cover',
+        backgroundRepeat: 'no-repeat',
+        boxShadow: this.backgroundImgUrl ? 'none' : '0px 2px 11px 0px rgba(0, 45, 65, 0.17)',
+      }
+    }
+  },
+  mounted() {
+    this.getGradeList();
+    this.$sensors.track('h5_grade_list_show', {
+      button_name: this.title,
+      link_type: 2,
+      link_component: 2,
+    })
+  },
+  methods: {
+    selectGrade(item) {
+      this.isActive = item.gradeId;
+      this.touchAction()
+    },
+    btnClick() {
+      console.log("点击触发", this.$props)
+      if (!this.isActive) {
+        this.$toast("请选择年级");
+        return
+      }
+      this.touchAction()
+    },
+    touchAction(){
+      if (!this.jumpType) return;
+      this.$sensors.track('h5_grade_list_click', {
+        click_grade: this.isActive,
+        link_type: 2,
+        link_component: 2,
+      })
+      if (this.jumpType === "link" && this.linkUrl) {
+        this.$emit("open-other-links", {
+          link: this.linkUrl,
+          target: "_self",
+        });
+        return;
+      }
+      if (this.jumpType === "action" && this.action) {
+        this.$emit("btn-click", this.action, {gradeId: this.isActive});
+        this.$emit("btn-click", "switch-grade", {gradeId: this.isActive});
+      }
+    },
+    getGradeList() {
+      const data = {
+        source: {},
+        query: {
+        },
+      }
+      if (this.dataType === 'courseId') data.source.courseIdList = this.ids
+      else if (this.dataType === 'packageId') data.source.curriculumPackageIdList = this.ids
+      // queryGradeList(data, { rewritePostBody: true }).then((res) => {
+      //   const data = res.data.data || {};
+      //   this.gradeList = data.queryParams.gradeList;
+      // });
+      this.$axios.post("/one-api/shop/goods/api/coursePanel", data, { rewritePostBody: true }).then((res) => {
+        const data = res.data || {};
+        console.log(data)
+        this.gradeList = data.queryParams.gradeList;
+      });
+    },
+  },
+};
+</script>

package/packages/business/material-panel/index.js

@@ -0,0 +1,10 @@
+import TsMaterialPanel from './src/index.vue'
+
+// install 是默认的方法，供按需引入
+// 当外界在 use 这个组件的时候，就会调用本身的install方法，同时传一个Vue这个类的参数
+
+TsMaterialPanel.install = (Vue) => {
+  Vue.component(TsMaterialPanel.name, TsMaterialPanel)
+}
+
+export default TsMaterialPanel

package/packages/business/material-panel/src/index.vue

@@ -0,0 +1,136 @@
+<template>
+  <div id="material-panel" ref="material-panel">
+    <material-list :file-list="fileList" :title="title" />
+    <div class="bottom-fixed-btns-wrapper">
+      <div class="bottom-fixed-btns-container">
+        <ts-button
+          class="bottom-btn"
+          style-type="primary"
+          size="small"
+          width="100%"
+          height="48px"
+          @click="bottomBtnClick"
+        >
+          {{ btnTitle }}
+        </ts-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import TsButton from "../../../base/button";
+import MaterialList from "../../../base/material-list/src/material-list.vue";
+export default {
+  name: "TsMaterialPanel",
+  components: {
+    TsButton,
+    MaterialList,
+  },
+  props: {
+    fileList: {
+      type: Array,
+      default: () => [],
+    },
+    title: {
+      type: String,
+      default: "Content Preview",
+    },
+    btnTitle: {
+      type: String,
+      default: "click",
+    },
+    precondition: {
+      type: Number,
+      default: 1,
+    },
+    shareDesc: {
+      type: String,
+      default: "",
+    },
+    shareDuration: {
+      type: Number || String,
+      default: 72,
+    },
+    shareNum: {
+      type: Number || String,
+      default: 3,
+    },
+    sharePoster: {
+      type: String,
+      default:
+        "https://kjdsfz-cdn.thethinkacademy.com/website/8601/20211126/1637893880920mLUcPnPD1B.png",
+    },
+    teacherQRCode: {
+      type: String,
+      default:
+        "https://kjdsfz-cdn.thethinkacademy.com/website/8601/20211126/16378938916160msIeKMVze.png",
+    },
+  },
+  data() {
+    return {
+      observer: "",
+      time: "",
+    };
+  },
+  mounted() {
+    this.$sensors.track('h5_resource_card_show', {
+      resource_num: this.fileList.length,
+      get_type: this.precondition,
+      share_num: this.shareNum,
+      button_name: this.btnTitle
+    })
+    this.observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((item) => {
+          if (item.isIntersecting) {
+            this.time = Date.now();
+          } else {
+            this.upload();
+          }
+        });
+      },
+      {
+        root: null,
+        rootMargin: "0px 0px",
+        threshold: 0.7,
+      }
+    );
+    this.observer.observe(this.$refs["material-panel"]);
+    window.addEventListener("unload", this.upload);
+  },
+  beforeDestroy() {
+    this.upload();
+  },
+  destroyed() {
+    window.removeEventListener("unload", this.upload);
+  },
+  methods: {
+    bottomBtnClick() {
+      this.$emit("btn-click", "fix-bottom-share", {
+        props: this.$props,
+      });
+      if (this.$sensors) {
+        this.$sensors.track('h5_resource_card_click', {
+          resource_num: this.fileList.length,
+          get_type: this.precondition,
+          share_num: this.shareNum,
+          button_name: this.btnTitle
+        })
+      }
+    },
+    upload() {
+      if (this.time && Date.now() - this.time > 1000) {
+        if (this.$sensors) {
+          this.$sensors.track("show_activity_pv", {
+            exposure_time: Date.now() - this.time,
+            active_type:
+              this.precondition === 1 ? "直接领取" : "助力领取",
+          });
+          this.time = ""
+        }
+      }
+    },
+  },
+};
+</script>

package/packages/business/notified-panel/index.js

@@ -0,0 +1,10 @@
+import TsNotifiedPanel from './src/index.vue'
+
+// install 是默认的方法，供按需引入
+// 当外界在 use 这个组件的时候，就会调用本身的install方法，同时传一个Vue这个类的参数
+
+TsNotifiedPanel.install = (Vue) => {
+  Vue.component(TsNotifiedPanel.name, TsNotifiedPanel)
+}
+
+export default TsNotifiedPanel

package/packages/business/notified-panel/src/areaCodeList.js

@@ -0,0 +1,181 @@
+/**
+ * 国际区号配置
+ */
+export const areaCodeList = [
+  {
+    // 美国
+    value: '1',
+    text: '+1',
+    code: 'us',
+    name: 'United States',
+    reg: /^\d{10}$/,
+  },
+  {
+    // 英国
+    value: '44',
+    text: '+44',
+    code: 'uk',
+    name: 'United Kingdom',
+    reg: /(^[0-9]{10,11}$)/,
+  },
+  {
+    // 新加坡
+    value: '65',
+    text: '+65',
+    code: 'sg',
+    name: 'Singapore',
+    reg: /^\d{8}$/,
+  },
+  {
+    // 中国
+    value: '86',
+    text: '+86',
+    code: 'cn',
+    name: 'China',
+    reg: /^\d{11}$/,
+  },
+  {
+    // 澳大利亚
+    value: '61',
+    text: '+61',
+    code: 'au',
+    name: 'Australia',
+    reg: /(^[0-9]{1,99}$)/,
+  },
+  {
+    // 柬埔寨
+    value: '855',
+    text: '+855',
+    code: 'kh',
+    name: 'Cambodia',
+    reg: /^\d{10}$/,
+  },
+  {
+    // 加拿大
+    value: '1',
+    text: '+1',
+    code: 'ca',
+    name: 'Canada',
+    reg: /(^[0-9]{1,99}$)/,
+  },
+  {
+    // 法国
+    value: '33',
+    text: '+33',
+    code: 'fr',
+    name: 'France',
+    reg: /^\d{10}$/,
+  },
+  {
+    // 德国
+    value: '49',
+    text: '+49',
+    code: 'de',
+    name: 'Germany',
+    reg: /^\d{11}$/,
+  },
+  {
+    // 香港
+    value: '852',
+    text: '+852',
+    code: 'hk',
+    name: 'Hong Kong, China',
+    reg: /^\d{8}$/,
+  },
+  {
+    // 印度
+    value: '91',
+    text: '+91',
+    code: 'in',
+    name: 'India',
+    reg: /^\d{10}$/,
+  },
+  {
+    // 印度尼西亚
+    value: '62',
+    text: '+62',
+    code: 'id',
+    name: 'Indonesia',
+    reg: /^\d{11}$/,
+  },
+  {
+    // 爱尔兰
+    value: '353',
+    text: '+353',
+    code: 'ie',
+    name: 'Ireland',
+    reg: /^\d{9,10}$/,
+  },
+  {
+    // 意大利
+    value: '39',
+    text: '+39',
+    code: 'it',
+    name: 'Italy',
+    reg: /^\d{10}$/,
+  },
+  {
+    // 日本
+    value: '81',
+    text: '+81',
+    code: 'jp',
+    name: 'Japan',
+    reg: /^\d{11}$/,
+  },
+  {
+    // 澳门
+    value: '853',
+    text: '+853',
+    code: 'mo',
+    name: 'Macau, China',
+    reg: /^\d{6,7}$/,
+  },
+  {
+    // 马来西亚
+    value: '60',
+    text: '+60',
+    code: 'ms',
+    name: 'Malaysia',
+    reg: /(^[0-9]{1,99}$)/,
+  },
+  {
+    // 挪威
+    value: '47',
+    text: '+47',
+    code: 'no',
+    name: 'Norway',
+    reg: /^\d{8}$/,
+  },
+  {
+    // 波兰
+    value: '48',
+    text: '+48',
+    code: 'pl',
+    name: 'Poland',
+    reg: /^\d{9}$/,
+  },
+  {
+    // 韩国
+    value: '82',
+    text: '+82',
+    code: 'kr',
+    name: 'South Korea',
+    reg: /^\d{11}$/,
+  },
+  {
+    // 西班牙
+    value: '34',
+    text: '+34',
+    code: 'es',
+    name: 'Spain',
+    reg: /^\d{10}$/,
+  },
+  {
+    // 泰国
+    value: '66',
+    text: '+66',
+    code: 'th',
+    name: 'Thailand',
+    reg: /^\d{10}$/,
+  },
+]