overseas 2.0.7

package/packages/business/selector-panel/src/selectorPanel.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="selection-list-wrapper" :style="backgroundImgStyle">
+    <div class="selection-list-title">
+      {{ title }}
+    </div>
+    <div class="selection-list-container">
+      <ul class="selection-item-wrapper">
+        <li v-for="(item, index) in optionCardList" :key="index">
+          <div
+            :class="{
+              'font-medium': true,
+              'selection-item': true,
+              'double': optionsNumber == '2',
+              'only-one': optionsNumber == '1',
+              'active': isActive == index,
+            }"
+            @click="selectGrade(item, index)"
+          >
+            <span class="item-text">{{ item.name }}</span>
+          </div>
+        </li>
+      </ul>
+      <ts-button
+        class="btn"
+        style-type="primary"
+        size="small"
+        width="100%"
+        height="48px"
+        @click="btnClick"
+      >
+        {{ btnTitle }}
+      </ts-button>
+    </div>
+  </div>
+</template>
+<script>
+import TsButton from "../../../base/button";
+
+export default {
+  name: "TsSelectorPanel",
+  components: { TsButton },
+  props: {
+    title: {
+      default: "选择器引导文案",
+      type: String,
+    },
+    optionsNumber: {
+      default: "3",
+      type: String,
+    },
+    backgroundImgUrl: {
+      default: "",
+      type: String,
+    },
+    btnTitle: {
+      default: "按钮操作文案",
+      type: String,
+    },
+    optionCardList: {
+      default: () => [],
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      isActive: null,
+      touchItem: {},
+    };
+  },
+  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.$sensors.track('h5_selector_panel_show', {
+      list_pattern: this.optionsNumber,
+      list_num: this.optionCardList.length,
+      button_name: this.btnTitle
+    })
+  },
+  methods: {
+    selectGrade(item, index) {
+      console.log("点击触发Item", index)
+      this.isActive = index;
+      this.touchAction(index)
+    },
+    btnClick() {
+      console.log("点击触发", this.$props)
+      if (!this.isActive && this.isActive !== 0) {
+        this.$toast("Please select at least one option before continue.");
+        return
+      }
+      this.touchAction(this.isActive)
+    },
+    touchAction(index) {
+      this.touchItem = { ...this.optionCardList[index] }
+      console.log(this.touchItem)
+      this.$sensors.track('h5_selector_panel_click', {
+        list_pattern: this.optionsNumber,
+        list_num: this.optionCardList.length,
+        click_panel: this.touchItem.name,
+        click_link_type: this.touchItem.jumpTo === "saleLinkUrl" ? 2 : 1 //1=h5链接或项目页面；2=打开班级页
+      })
+      if (this.touchItem.jumpTo === "saleLinkUrl") {
+        if (this.touchItem.idsString) {
+          this.$emit("btn-click", 'click-sell-link', {
+            id: this.touchItem.idsString,
+          });
+          return;
+        } else {
+          this.$toast("Please set at least one option before continue.");
+        }
+      }
+      if (this.touchItem.jumpTo === "linkUrl") {
+        if (this.touchItem.linkString) {
+          console.log('链接上报')
+          this.$emit("open-other-links", {
+            link: this.touchItem.linkString, //普通链接,
+            target: "_self",
+          });
+        } else {
+          this.$toast("Please set at least one option before continue.");
+        }
+      }
+    },
+  },
+};
+</script>

package/packages/business/student-info/index.js

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

package/packages/business/student-info/src/api/index.js

@@ -0,0 +1,10 @@
+import { net } from '@thinkacademy/overseas-ui/src/network/api'
+
+/**
+ *
+ * @param {修改个人信息} params
+ * @returns
+ */
+export function modifyUserInfo(params) {
+  return net.post('/v1/ucenter/basic_info/user/modify', params);
+}

package/packages/business/student-info/src/config.js

@@ -0,0 +1,11 @@
+export default {
+  rules: {
+    firstName: [{ required: true, message: 'The input is required.' }],
+    lastName: [{ required: true, message: 'The input is required.' }],
+    email: [
+      { required: true, message: 'The input is required.' },
+      { pattern: /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/, message: 'This input is invalid.' },
+    ],
+    grade: [{ required: true, message: 'The input is required.' }],
+  },
+}

package/packages/business/student-info/src/studentInfo.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="desc">
+    <ts-bottom-popup
+      :popup-title="title"
+      :show.sync="showPop"
+      :show-left-icon="showLeft"
+      :show-right-icon="showRight"
+      @right-icon-handler="closePopoup"
+    >
+      <template v-slot:left-icon>
+        <div class="header-icon-btn-container left-icon-container" @click="closePopoup">
+          <i class="iconfont icon-left" />
+        </div>
+      </template>
+      <template v-slot:right-icon>
+        <div class="header-icon-btn-container right-icon-container" @click="closePopoup">
+          <i class="iconfont icon-close-new-e658" />
+        </div>
+      </template>
+      <template v-slot:body>
+        <div class="popup-body-wrapper">
+          <!-- <div class="popup-txt" v-html="contentFirstBlock" /> -->
+          <div class="popup-txt">
+            <form>
+              <div class="student-info font-medium">
+                <span>First name</span>
+                <input v-model.trim="formData.firstName" type="text" name="firstname" placeholder="Edit First name" maxlength="32">
+              </div>
+              <div v-show="formData.firstName === ' '" class="invalid">
+                {{ textTips }}
+              </div>
+              <div class="student-info font-medium">
+                <span>Last name</span>
+                <input v-model.trim="formData.lastName" type="text" name="lastname" placeholder="Edit Last name" maxlength="32">
+              </div>
+              <div v-show="formData.lastName === ' '" class="invalid">
+                {{ textTips }}
+              </div>
+            </form>
+          </div>
+          <!-- <div class="popup-txt" v-html="contentSecondBlock" /> -->
+          <div class="popup-tips font-medium">
+            {{ tips }}
+          </div>
+          <ts-button class="btn" style-type="primary" size="small" width="100%" height="48px" type="submit" @click="submitForm">
+            Continue Sign Up
+          </ts-button>
+        </div>
+      </template>
+    </ts-bottom-popup>
+  </div>
+</template>
+
+<script>
+import TsBottomPopup from '../../../base/bottom-popup'
+import TsButton from '../../../base/button'
+
+
+export default {
+  name: 'TsStudentInfo',
+  components: { TsBottomPopup, TsButton },
+  props: {
+    title: {
+      default: 'Complete Student Info', // or 'Add a Student'
+      type: String,
+    },
+    showLeft: {
+      default: false,
+      type: Boolean,
+    },
+    showRight: {
+      default: true,
+      type: Boolean,
+    },
+    tips: {
+      default: 'Information in the student profile can help teachers get to know your child. When you are ready. click "Continue Sign Up" and proceed to checkout.',
+      type: String,
+    }
+  },
+  data() {
+    return {
+      // 默认为false
+      showPop: false,
+      textTips: 'This input is required.',
+      formData: {
+        firstName: '',
+        lastName: '',
+      },
+      isAdd: false
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    closePopoup() {
+      this.showPop = false
+    },
+    submitForm() {
+      // Maximun 32 letters. Letters supported
+      console.log("submitForm fun")
+      const reg = /^[a-zA-Z]+$/
+      // 提交表单 调用修改个人信息的接口
+      if (!reg.test(this.formData.firstName)) {
+        this.formData.firstName = ' '
+        this.textTips = 'Maximun 32 letters. Letters supported'
+        return
+      }
+      if (!this.formData.firstName){
+        this.formData.firstName = ' '
+        return
+      }
+      if (!reg.test(this.formData.lastName)) {
+        this.formData.lastName = ' '
+        this.textTips = 'Maximun 32 letters. Letters supported'
+        return
+      }
+      if (!this.formData.lastName){
+        if (this.formData.lastName && reg.test(this.formData.lastName)) {
+          this.textTips = 'Maximun 32 letters. Letters supported'
+        }
+        this.formData.lastName = ' '
+        return
+      }
+      if (this.isAdd) {
+        console.log("新增")
+        this.$emit('btn-click', 'added-student', {
+          ...this.formData
+        })
+      } else {
+        console.log("补充")
+        this.$emit('btn-click', 'submit-info', {
+          ...this.formData
+        })
+      }
+    },
+    openPopup(val) {
+      console.log("student info showPop")
+      this.showPop = true
+      this.isAdd = val.isAdd || false
+      this.formData.firstName = val.firstName || ''
+      this.formData.lastName = val.lastName || ''
+    },
+  }
+}
+</script>

package/packages/business/switch-student/index.js

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

package/packages/business/switch-student/src/api/index.js

@@ -0,0 +1,28 @@
+import { net } from '@thinkacademy/overseas-ui/src/network/api'
+
+/**
+ *
+ * @param {账号列表} params
+ * @returns
+ */
+export function queryAccount(params) {
+  return net.post('/v1/ucenter/account/associated/list', params);
+}
+
+/**
+ *
+ * @param {电话号码获取} params
+ * @returns
+ */
+export function queryPhone(params) {
+  return net.post('/basic_info/master_user/get', params);
+}
+
+/**
+ *
+ * @param {获取基本信息} params
+ * @returns
+ */
+export function queryUserInfo(params) {
+  return net.post('/basic_info/user/get', params);
+}

package/packages/business/switch-student/src/switchStudent.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="desc">
+    <ts-bottom-popup
+      :popup-title="title"
+      :show.sync="showPop"
+      :show-left-icon="false"
+      :show-right-icon="true"
+      @right-icon-handler="closePopoup"
+    >
+      <!-- 右边按钮 -->
+      <template v-slot:right-icon>
+        <div class="header-icon-btn-container right-icon-container" @click="closePopoup">
+          <i class="iconfont icon-close-new-e658" />
+        </div>
+      </template>
+      <!-- 中间部分 -->
+      <template v-slot:body>
+        <div class="popup-body-wrapper">
+          <!-- 优惠券提示信息 -->
+          <div v-if="switchStuTipText" class="coupon-tip-container">
+            <div class="coupon-tip font-medium">
+              <i class="iconfont icon-alert" />
+              <!-- <img class="icon-alert" src="images/alert.png" alt=""> -->
+              <span>{{ switchStuTipText }}</span>
+            </div>
+          </div>
+          <!-- 电话号码提示 -->
+          <div class="students-list-title font-medium">
+            {{ phoneNumTip[0] }}
+            {{ '(' + countryCallingCode + ')' }}
+            {{ encryptPhone(phone) }}
+            {{ phoneNumTip[1] }}
+          </div>
+          <!-- 账号获取 -->
+          <div class="stu-switch-popup-txt">
+            <div class="students-list-wrapper">
+              <div v-for="(student, index) in studentsList" :key="index" class="students-list">
+                <div class="student-card-wrapper">
+                  <div class="student-card-container">
+                    <div class="card-main-container">
+                      <div class="stu-avatar-container">
+                        <img :src="student.avatar" alt="avatar">
+                      </div>
+                      <div class="stu-info-container font-medium">
+                        <div class="stu-name">
+                          {{ student.nickName }}
+                        </div>
+                        <div class="stu-no">
+                          <span>No.</span><span>{{ formatCardNo(student.card) }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="btn-select-student" @click="itemClick(student)">
+                    <i v-show="isSelect == student.uid" class="iconfont icon-selected" />
+                    <i v-show="isSelect !== student.uid" class="iconfont icon-unselect" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- 提示信息 -->
+          <div class="guide-to-add-student font-medium">
+            {{ addTip[0] }}
+            <span class="btn-add-student" @click="addStudentHandler">{{ addTip[1] }}</span>
+            {{ addTip[2] }}
+          </div>
+          <!-- 底部按钮 -->
+          <ts-button class="stu-switch-btn" style-type="primary" size="small" width="100%" height="48px" @click="closePopoupHandler">
+            Continue Sign Up
+          </ts-button>
+          <div class="empty-box" />
+        </div>
+      </template>
+    </ts-bottom-popup>
+  </div>
+</template>
+
+<script>
+import TsBottomPopup from '../../../base/bottom-popup'
+import TsButton from '../../../base/button'
+import { queryAccount, queryPhone, queryUserInfo } from './api'
+
+export default {
+  name: 'TsSwitchStudent',
+  components: { TsBottomPopup, TsButton },
+  inject: ["app"],
+  props: {
+    title: {
+      default: 'Choose a Student',
+      type: String,
+    },
+    switchStuTipText: {
+      default: 'Please note that the discount total may change by switching to another student account.',
+      type: String,
+    },
+    phoneNumTip: {
+      default: () => [
+        'Your mobile number',
+        'is registered to the following student accounts:',
+      ],
+      type: Array,
+    },
+    addTip: {
+      default: () => [
+        'Registering for a different child not listed above?',
+        'Click here ',
+        'to add a new student account under this mobile number andregister for them.',
+        'You can complete the student profile afterclicking "Continue Sign Up".',
+      ],
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      // 默认为false
+      showPop: true,
+      isSelect: null,
+      phone: '',
+      countryCallingCode: '',
+      studentsList: [],
+      getSchoolCode: '',
+    }
+  },
+  methods: {
+    closePopoup() {
+      this.showPop = false
+    },
+
+    open(val) {
+      this.showPop = true
+      this.getSchoolCode = val.schoolCode
+      queryAccount({
+        header: {
+          schoolCode: val.schoolCode,
+          studentId: val.studentId,
+        },
+      }).then((res)=>{
+        const resData = res.data.data || {}
+        this.studentsList = resData.associatedAccount || [];
+        // 添加当前登录学员
+        this.studentsList.unshift(resData.currentAccount);
+        // 默认选中第一个
+        this.isSelect =  this.studentsList[0].uid
+      })
+      queryPhone({
+        header: {
+          schoolCode: val.schoolCode,
+        },
+      }).then((res)=>{
+        const resData = res.data.data || {}
+        this.phone = resData.phone || [];
+        this.countryCallingCode = resData.countryCallingCode || [];
+      })
+    },
+
+    addStudentHandler() {
+      // 跳到添加学员
+      this.$emit('btn-click', 'TsStudentInfo', { title: "Add a student", 'show-left': true, 'show-right': false})
+    },
+    itemClick(student) {
+      this.isSelect = student.uid
+      this.switchLogin()
+    },
+    closePopoupHandler() {
+      // 判断是否需要提示入学测试
+
+      // 如果没有直接跳到支付页
+
+
+      //可以拿到uid
+      queryUserInfo({
+        header: {
+          schoolCode: this.getSchoolCode,
+          studentId: this.isSelect,
+        },
+      }).then((res)=>{
+        const resData = res.data.data || {}
+        const resFirstName = resData.firstName
+        const resLastName = resData.lastName
+        const resEmail = resData.email
+        const resNickName = resData.nickName
+        if (!resFirstName || !resLastName || !resEmail){
+          return this.$emit('btn-click', 'TsStudentInfo', {
+            firstName: resFirstName,
+            lastName: resLastName,
+            email: resEmail,
+            nickName: resNickName,
+          })
+        }
+        // 跳转判断是否 价格为0
+        // localtion.href = ''
+      })
+
+      this.showPop = false
+    },
+    // 加密手机号
+    encryptPhone(phone) {
+      if (!phone || phone === '') {
+        return ''
+      }
+      const phoneLen = phone.length;
+      const length = Math.floor(phoneLen / 3);
+      let replaceStr = [];
+      replaceStr.length = 2 * length - length + 1 + 1;
+      replaceStr = replaceStr.join('*');
+
+      return phone.replace(phone.substring(length, 2 * length + 1), replaceStr);
+    },
+    // 处理 card
+    formatCardNo(val) {
+      if (!val) return ''
+      return val.replace(/(.{4})/g, '$1 ')
+    },
+    // 切换登录账号
+    async switchLogin(){
+      const data = {
+        data: {
+          targetUid: this.isSelect
+        }
+      }
+      let res = await this.$axios.post("/one-api/ucenter/account/switch_login", data, { rewritePostBody: true })
+      console.log(res)
+    },
+    // 校验是否需要测试
+    async reportClassCheck() {
+      const data = {
+        data: {
+          skuNo: this.skuNo
+        }
+      }
+      let res = await this.$axios.post("/one-api/aggregate/signup/check", data, { rewritePostBody: true })
+      if (res.data.continue) {
+        this.$emit("btn-click", "toOrder")
+      } else {
+        this.$emit("btn-click", 'helper', res.data.helper)
+      }
+    },
+    // 判断是否需要补充用户信息
+    async supplementInfo() {
+      this.$axios.post("/one-api/ucenter/basic_info/user/get", {},)
+    }
+  },
+}
+</script>

package/packages/business/tips-popup/index.js

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

package/packages/business/tips-popup/src/tipsPopup.vue

@@ -0,0 +1,76 @@
+<template>
+  <van-popup v-model="show">
+    <div class="tips-popup-wrapper">
+      <div class="tips-popup-container">
+        <div class="font-semibold title">
+          {{ title }}
+        </div>
+        <div class="font-medium message">
+          {{ message }}
+        </div>
+      </div>
+      <div v-if="type == 1" class="btn-wrapper">
+        <ts-button class="btn" style-type="primary" size="small" width="64%" height="48px" @click="confirmBtnClick">
+          {{ btnText }}
+        </ts-button>
+      </div>
+      <div v-if="type == 2" class="btn-wrapper-2">
+        <ts-button class="btn btn-left" style-type="primary" size="small" width="42%" height="48px" @click="closePopupHandler">
+          Cancel
+        </ts-button>
+        <ts-button class="btn" style-type="primary" size="small" width="42%" height="48px" @click="nextStepClick">
+          {{ btnText }}
+        </ts-button>
+      </div>
+    </div>
+  </van-popup>
+</template>
+<script>
+
+import TsButton from '../../../base/button'
+
+export default {
+  name: 'TsTipsPopup',
+  components: {
+    TsButton,
+  },
+  props: {
+    title: {
+      default: '',
+      type: String,
+    },
+    message: {
+      default: '',
+      type: String,
+    },
+    btnText: {
+      default: '',
+      type: String,
+    },
+    type: {
+      default: 2,
+      type: Number,
+    },
+  },
+  data(){
+    return {
+      show: false
+    }
+  },
+  methods: {
+    openDialog() {
+      this.show = true
+      
+    },
+    confirmBtnClick() {
+      this.show = false
+    },
+    closePopupHandler() {
+      this.show = false
+    },
+    nextStepClick() {
+      this.$emit('btn-click', "to-test")
+    },
+  },
+}
+</script>