overseas 2.0.7

package/packages/business/class-choose/src/index.vue

@@ -0,0 +1,316 @@
+<template>
+  <div class="choose-course-wrapper">
+    <ts-bottom-popup
+      :show.sync="showPop"
+      :show-left-icon="false"
+      :close-on-click-overlay="true"
+      :overlay="false"
+      :popup-title="title"
+      :show-right-icon="true"
+      @right-icon-handler="close"
+    >
+      <!-- <template v-slot:right-icon>
+        <div
+          class="header-icon-btn-container success-icon-container"
+          @click="close"
+        >
+          <i class="iconfont icon-close-new-e658" />
+        </div>
+      </template> -->
+      <template v-slot:body>
+        <div class="goods-list">
+          <div
+            v-for="item in goodsList"
+            :key="item.id"
+            @click="handleClickCourseCard(item)"
+          >
+            <course-card
+              :good-item="item"
+              :class-name-option="classNameOption"
+              :difficulty-option="difficultyOption"
+              :active="item.id === selectedId"
+              @enroll="enroll"
+            />
+          </div>
+        </div>
+
+        <div
+          v-show="canUseCount && showVoucher"
+          class="font-medium voucher-show-wrapper"
+        >
+          <div class="voucher-show">
+            <span class="voucher-text">You have an {{ currency }}{{ discount }} voucher, sign up now to apply your
+              discount!</span>
+            <img src="./img/icon_close_bottomcard.svg" @click="closeVoucher">
+          </div>
+        </div>
+        <div
+          :class="{'btn-bottom-class-choose':true, 'showBackground': canUseCount}"
+        >
+          <div class="price">
+            <span class="price-top">{{ currency }}{{ (currentSellPrice - discount) | priceUnitConvert(minorUnit, isKeepTwoDecimal) }}
+              <s>{{ currency }}{{ currentOrgPrice | priceUnitConvert(minorUnit, isKeepTwoDecimal) }}</s>
+            </span>
+            <div v-show="canUseCount" class="price-bottom">
+              Discounted price
+            </div>
+          </div>
+          <div class="btn-wrapper">
+            <button class="btn" @click="enroll">
+              {{ enrollText }}
+            </button>
+          </div>
+        </div>
+      </template>
+    </ts-bottom-popup>
+  </div>
+</template>
+<script>
+
+import { getCookies } from '../../../../src/utils/utils'
+import TsBottomPopup from '../../../base/bottom-popup'
+import courseCard from './courseCard.vue'
+export default {
+  name: "TsTouchCoursesPanel",
+  components: {
+    TsBottomPopup,
+    courseCard,
+  },
+  props: {
+    ids: {
+      type: Array,
+      default: () => [],
+    },
+    dataType: {
+      // 范围： courseId | packageId
+      default: "courseId",
+      type: String,
+    },
+    classNameOption: {
+      type: Boolean,
+      default: false,
+    },
+    difficultyOption: {
+      type: Boolean,
+      default: false,
+    },
+    name: {
+      type: String,
+      default: "",
+    },
+    showRight: {
+      default: true,
+      type: Boolean,
+    },
+    talWebhook: {
+      type: String,
+      default: '',
+    },
+    talSecret: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      showPop: false,
+      title: "Select course",
+      goodsList: [],
+      selectedId: "",
+      isLogin: getCookies(),
+      canUseCount: 0,
+      discount: 0,
+      currentSellPrice: null,
+      currentOrgPrice: null,
+      showVoucher: true,
+      gradeId: "",
+      // 优惠券相关
+      products: [],
+      courseDetail: {},
+      activitySellPrice: null,
+      activityInfo: {},
+      selectedClass: null,
+    }
+  },
+  computed: {
+    //获取货币
+    currency() {
+      return this.$store.state.basicData.currency[this.$store.state.locale].symbol
+    },
+    minorUnit() {
+      return this.$store.state.basicData.currency[this.$store.state.locale].minorUnit;
+    },
+    enrollText(){
+      return this.$store.state.countryCode === 'uk' ? 'Enrol' : 'Enroll'
+    },
+    isKeepTwoDecimal(){
+      if (this.$store.state.locale === 'uk'){
+        return '1'
+      } else {
+        return '0'
+      }
+    }
+  },
+  watch: {
+    async selectedId(){
+      if (this.isLogin){
+        await this.loginSuccess()
+      }
+    },
+  },
+  methods: {
+    enroll() {
+      this.$sensors.track('h5_course_pop_enroll_click', {
+        course_pop_type: 2,
+        course_id: this.selectedClass.spec.courseId,
+        class_id: this.selectedClass.spec.clazzId,
+        grade_name: this.selectedClass.spec.gradeName,
+        payment: this.selectedClass.sellPrice,
+      })
+      this.$emit("btn-click", "switch-class", {
+        name: this.name,
+        skuNo: this.selectedId,
+        currentSellPrice: this.currentSellPrice,
+        canUseCount: this.canUseCount,
+        talWebhook: this.talWebhook,
+        talSecret: this.talSecret,
+      });
+    },
+    handleClickCourseCard(selectedItem) {
+      this.selectedClass = selectedItem
+      this.selectedId = selectedItem.id
+      this.currentSellPrice = selectedItem.sellPrice
+      this.currentOrgPrice = selectedItem.orgPrice
+    },
+    close() {
+      this.showPop = false;
+    },
+    async open({ gradeId }) {
+      this.gradeId = gradeId
+
+      await this.queryCourseList()
+      this.showPop = true
+
+    },
+    openPopup(){
+      this.showPop = true
+    },
+    closeVoucher(){
+      this.showVoucher = false
+    },
+    // 登录成功之后调用优惠券接口
+    async loginSuccess(){
+      // 成功之后的逻辑
+      await this.queryCourseDetail()
+      await this.getVoucher()
+    },
+    // 获取优惠券信息
+    async getVoucher() {
+      const data = {
+        products: this.products,
+      }
+      let res = await this.$axios.post('/one-api/coupon/api/recommend', data,  {rewritePostBody: true, header: { studentId: this.$store.state.ucenter.user.uid }, })
+      if (res.code !== 0){
+        this.$toast.fail(res.msg)
+        return
+      }
+      const resData = res.data || {}
+      this.canUseCount = resData.canUseCount
+      this.discount = resData.useCouponInfo.discount || 0
+    },
+    // 获取课程列表
+    async queryCourseList(){
+      const data = {
+        source: {},
+        query: {
+          gradeId: this.gradeId,
+        },
+      }
+      if (this.dataType === 'courseId') data.source.courseIdList = this.ids
+      else if (this.dataType === 'packageId') data.source.curriculumPackageIdList = this.ids
+      let res = await this.$axios.post("/one-api/shop/goods/api/coursePanel", data, { rewritePostBody: true })
+      if (res.code !== 0){
+        this.$message.error(res.msg)
+      }
+      const resData = res.data || {};
+      console.log(resData)
+      this.goodsList = [].concat([...resData.goodsList]) 
+      this.selectedClass = this.goodsList[0]
+      this.selectedId = this.goodsList[0].id
+      this.currentSellPrice = this.goodsList[0].sellPrice
+      this.currentOrgPrice = this.goodsList[0].orgPrice
+    },
+    // 获取用户详情
+    async queryCourseDetail() {
+      const data =     {
+        // skuId: '3238' // 选择商品的ID
+        skuId: this.selectedId
+      }
+      let res = await this.$axios.post('/one-api/shop/goods/api/detail', data, { rewritePostBody: true } )
+      console.log(res)
+      if (res.code !== 0){
+        this.$message.error(res.msg)
+      }
+      const resData = res.data || {}
+      this.courseDetail = resData
+      this.$emit('btn-click', "get-detail", resData)
+      this.activityInfo = this.courseDetail.activityInfo || ''
+      if ( this.activityInfo ){
+        this.activitySellPrice = this.courseDetail.activityInfo.sellPrice
+      } else {
+        this.activitySellPrice = null // 没有活动
+      }
+      this.setGoodsData()
+    },
+    // 设置购买商品(请求优惠券接口使用)
+    setGoodsData() {
+      let price = 0
+      if (this.activitySellPrice !== null || Number(this.activitySellPrice) - Number(this.courseDetail.sellPrice) < 0) {
+        price = this.activitySellPrice
+      } else {
+        price = this.courseDetail.singleSellPrice
+      }
+      this.products = [
+        {
+          skuInfo: {
+            clazzId: this.courseDetail.spec ? this.courseDetail.spec.clazzId : '',
+            skuId: this.selectedId,
+            goodsCategoryId: this.courseDetail.clazzCategory,
+            courseType: this.courseDetail.spec.courseType,
+            year: this.courseDetail.spec.year,
+            subjectId: this.courseDetail.spec.subjectId,
+            platformType: this.courseDetail.spec.platformType,
+            levelDegreeId: this.courseDetail.spec.levelDegreeId,
+            gradeIds: this.courseDetail.spec.gradeList.map((gradeItem) => gradeItem.id) || [],
+            term: this.courseDetail.spec.term,
+            courseId: this.courseDetail.spec.courseId,
+          },
+          price,
+          amount: 1,
+        },
+      ]
+      if (this.courseDetail.attachedItems && this.courseDetail.attachedItems.length > 0) {
+        this.courseDetail.attachedItems.forEach((item) => {
+          this.products.push({
+            skuInfo: {
+              clazzId: this.courseDetail.spec.clazzId,
+              skuId: item.skuId,
+              goodsCategoryId: item.category,
+              courseType: this.courseDetail.spec.courseType,
+              year: this.courseDetail.spec.year,
+              subjectId: this.courseDetail.spec.subjectId,
+              platformType: this.courseDetail.spec.platformType,
+              levelDegreeId: this.courseDetail.spec.levelDegreeId,
+              gradeIds: this.courseDetail.spec.gradeList.map((gradeItem) => gradeItem.id) || [],
+              term: this.courseDetail.spec.term,
+              courseId: this.courseDetail.spec.courseId,
+            },
+            price: item.price,
+            amount: 1,
+          });
+        })
+      }
+    },
+  }
+}
+</script>

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

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

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