overseas 2.0.7

package/packages/business/page-render/src/pageRender.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="ts-page-render-wrapper">
+    <template v-for="(comData, index) in schemeData">
+      <component :is="`Ts${comData.component}`" :ref="comData.component" :key="`${comData.name}_${index}`" v-bind="comData.props" @btn-click="doAction" />
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TsPageRender',
+  props: {
+    pageScheme: {
+      type: Array,
+      default: () => [],
+    },
+    // 是否可交互
+    interactive: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      schemeData: [],
+    }
+  },
+  watch: {
+    pageScheme(val) {
+      this.schemeData = [...val]
+    },
+  },
+  mounted() {
+    this.init()
+  },
+  methods: {
+    init() {
+      this.schemeData = [...this.formatPageScheme(this.pageScheme)]
+    },
+    /**
+     * 格式化页面组件配置
+     */
+    formatPageScheme(orgData) {
+      if (!orgData || !Array.isArray(orgData) || !orgData.length > 0) return orgData
+      const scheme = []
+      const orgDataLen = orgData.length
+      let bottomFixedBtn = null
+
+      // 排序调整，吸底按钮调整至最后
+      for (let i = 0; i < orgDataLen; i += 1) {
+        if (orgData[i].component === 'BottomFixedButton') {
+          bottomFixedBtn = { ...orgData[i] }
+        } else {
+          scheme.push(orgData[i])
+        }
+      }
+
+      if (bottomFixedBtn) scheme.push(bottomFixedBtn)
+      return scheme
+    },
+    /**
+     * 吸底按钮点击事件处理
+     */
+    doAction(action) {
+      const currAction = action
+      // 打开选课面板行为
+      if (currAction.includes('CoursesPanel')) {
+        if (this.$refs[currAction] && this.$refs[currAction].open) this.$refs[currAction].open()
+      }
+    },
+  },
+}
+</script>

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

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

package/packages/business/registration-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}$/,
+  },
+]

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

@@ -0,0 +1,329 @@
+<template>
+  <div
+    id="registration-panel"
+    ref="registration-panel"
+    class="registration-panel"
+    :style="[backgroundColorStyle, backgroundImgStyle]"
+  >
+    <div class="registration-form">
+      <van-form @submit="onSubmit">
+        <div class="form-item">
+          <div class="item-body phone-body">
+            <van-field
+              style="width: 120px; margin-right: -1px"
+              readonly
+              clickable
+              :value="'+' + areaCodeValue"
+              name="areaCode"
+              right-icon="arrow-down"
+              @click="showAreaPicker = true"
+            />
+            <van-popup v-model="showAreaPicker" round position="bottom">
+              <van-picker
+                show-toolbar
+                :columns="areaCodeList.map((e) => `(${e.text}) ${e.name}`)"
+                @cancel="showAreaPicker = false"
+                @confirm="onConfirmArea"
+              />
+            </van-popup>
+            <van-field
+              v-model="phone"
+              name="phone"
+              :placeholder="languagetxt.enterPhone"
+              @input="phoneRules"
+              :rules="[
+                { required: true, message: languagetxt.enterPhonePlease },
+                {
+                  validator: validatorPhone,
+                  message: languagetxt.invalidPhone,
+                },
+              ]"
+            />
+          </div>
+          <div class="item-body code-body" style="margin-top: 16px">
+            <van-field
+              v-model="phoneCode"
+              name="phoneCode"
+              :placeholder="languagetxt.enterCode"
+              @input="phoneRules"
+              :rules="[
+                { required: true, message: languagetxt.enterCodePlease },
+              ]"
+            />
+            <!-- <van-field style="width:120px;border-right: 0px;" readonly clickable :value="areacodeText" name="areaCode2"
+                         right-icon="arrow-down" @click="showAreaPicker = true"
+              /> -->
+            <div
+              class="code-box"
+              :class="{ hide: codeType }"
+              v-if="isCodeSu == 1"
+              @click="getCode"
+            >
+              <div class="pa-box">
+                {{ languagetxt.send }}
+              </div>
+            </div>
+            <div class="code-box countdown" v-else-if="isCodeSu == 2">
+              <div class="pa-box">
+                {{ countdown + languagetxt.countdown }}
+                <span>{{ languagetxt.resend }}</span>
+              </div>
+            </div>
+            <div
+              class="code-box"
+              :class="{ hide: codeType }"
+              v-else
+              @click="getCode"
+            >
+              <div class="pa-box">
+                {{ languagetxt.resend }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <van-button
+            round
+            block
+            type="info"
+            :color="buttonProps.backgroundColor"
+            native-type="submit"
+            :class="{ hide: btnType }"
+          >
+            {{ buttonProps.text }}
+          </van-button>
+        </div>
+        <div
+          class="agreement-box"
+          @click="
+            () => {
+              agreement = !agreement;
+              phoneRules();
+            }
+          "
+        >
+          <span class="icon" :class="{ on: agreement }"></span>
+          <div class="text" v-html="languagetxt.policyText"></div>
+        </div>
+      </van-form>
+    </div>
+  </div>
+</template>
+  
+<script>
+import Button from "vant/es/button";
+import Field from "vant/es/field";
+import Form from "vant/es/form";
+import Picker from "vant/es/picker";
+import Popup from "vant/es/popup";
+import { areaCodeList } from "./areaCodeList";
+import { languageList } from "./languageList";
+export default {
+  name: "TsRegistrationPanel",
+  components: {
+    [Button.name]: Button,
+    [Form.name]: Form,
+    [Field.name]: Field,
+    [Picker.name]: Picker,
+    [Popup.name]: Popup,
+  },
+  props: {
+    crmTagList: {
+      type: Array,
+      default: () => [],
+    },
+    areacodeText: {
+      type: String,
+      default: "us",
+    },
+    buttonProps: {
+      type: Object,
+      default: () => {
+        return {
+          text: "Submit",
+          backgroundColor: "#FF9F0A",
+          eventName: "registration-submit",
+          dialogType: "alert",
+          alert: {
+            title: "Successfully Submitted",
+            message: "",
+            buttonText: "ok",
+            buttonBgColor: "#FF9F0A",
+          },
+        };
+      },
+    },
+    backgroundImgUrl: {
+      type: String,
+      default:
+        "https://img2.baidu.com/it/u=3202947311,1179654885&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
+    },
+    backgroundColor: {
+      type: String,
+      default: "",
+    },
+    languageType: {
+      type: String,
+      default: "us",
+    },
+    isCodeSuProps: {
+      type: Number,
+      default: 1,
+    },
+  },
+  data() {
+    return {
+      areaCodeList,
+      languagetxt: languageList.us,
+      phone: "",
+      areaCode: "us",
+      areaCodeValue: "1",
+      gradeList: [],
+      showAreaPicker: false,
+      showCustomizePicker: {},
+      phoneReg: /^\d{1,99}$/,
+      phoneCode: "",
+      countdown: 60,
+      isCodeSu: 1,
+      agreement: false,
+      codeType: true,
+      btnType: true,
+    };
+  },
+  computed: {
+    areaCodeNameList() {
+      return this.areaCodeList.map((area) => {
+        return {
+          value: area.value,
+          text: area.text,
+        };
+      });
+    },
+    backgroundImgStyle() {
+      if (this.backgroundImgUrl) {
+        return {
+          backgroundImage: `url(${this.backgroundImgUrl})`,
+          backgroundSize: "cover",
+          backgroundRepeat: "no-repeat",
+        };
+      } else {
+        return {};
+      }
+    },
+    backgroundColorStyle() {
+      if (this.backgroundColor) {
+        return {
+          backgroundColor: this.backgroundColor,
+        };
+      } else {
+        return {};
+      }
+    },
+  },
+  watch: {
+    languageType: {
+      handler(newValue) {
+        console.log("languageType", newValue);
+        switch (this.languageType) {
+          case "us":
+            this.languagetxt = languageList.us;
+            break;
+          case "cn":
+            this.languagetxt = languageList.cn;
+            break;
+          case "hk":
+            this.languagetxt = languageList.hk;
+            break;
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+    areacodeText: {
+      handler(newValue) {
+        console.log("areacodeText", newValue);
+        const areaCodeObj = this.areaCodeList.find(
+          (e) => e.code === this.areacodeText
+        );
+        this.areaCodeValue = areaCodeObj.value;
+        this.phoneReg = areaCodeObj.reg;
+      },
+      deep: true,
+      immediate: true,
+    },
+    isCodeSuProps: {
+      handler(newValue) {
+        console.log("isCodeSuProps", newValue);
+        if (this.isCodeSuProps !== 1) {
+          this.isCodeSu = 2;
+          let time = setInterval(() => {
+            if (this.countdown > 0) {
+              this.countdown--;
+            } else {
+              clearTimeout(time);
+              this.isCodeSu = 3;
+              this.countdown = 60;
+            }
+          }, 1000);
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+  },
+  mounted() {
+    console.log("form", this.form);
+  },
+  destroyed() {},
+  methods: {
+    validator(val) {
+      return (
+        !val ||
+        /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+.([A-Za-z]{2,8})$/.test(val)
+      );
+    },
+    validatorPhone(val) {
+      return !val || this.phoneReg.test(val);
+    },
+    // 设置区号
+    onConfirmArea(value, index) {
+      console.log("onConfirmArea", value, index);
+      const areaObj = this.areaCodeList[index];
+      this.phoneReg = areaObj.reg;
+      this.areaCodeValue = areaObj.value;
+      this.showAreaPicker = false;
+    },
+    // 验证码
+    getCode() {
+      if (!this.phone) return this.$toast(this.languagetxt.enterPhonePlease);
+      if (!this.phoneReg.test(this.phone))
+        return this.$toast(this.languagetxt.enterPhonePlease);
+      console.log("send code");
+      let params = {
+        contactInfo: this.phone,
+        countryCallingCode: this.areaCodeValue,
+      };
+      this.$emit("btn-click", "registration-submit-getCode", params);
+    },
+    // 注册
+    onSubmit() {
+      if (!this.agreement) return this.$toast(this.languagetxt.confirmPlease);
+      let params = {
+        crmTagList: this.crmTagList,
+        contactInfo: this.phone,
+        countryCallingCode: this.areaCodeValue,
+        verificationCode: this.phoneCode,
+      };
+      this.$emit("btn-click", "registration-submit", params);
+    },
+    phoneRules() {
+      this.codeType = !this.phoneReg.test(this.phone);
+      if (!this.codeType && this.agreement && this.phoneCode) {
+        this.btnType = false;
+      } else {
+        this.btnType = true;
+      }
+    },
+  },
+};
+</script>

package/packages/business/registration-panel/src/languageList.js

@@ -0,0 +1,41 @@
+export const languageList = {
+  us:{
+    enterPhone: 'Phone number',
+    enterCode: 'SMS verification code',
+    send: 'Send',
+    resend: 'Resend',
+    countdown: 's',
+    enterPhonePlease: 'Please enter your phone number',
+    invalidPhone: 'Invalid phone number',
+    enterCodePlease: 'Please enter the verification code',
+    codeErr: 'Verification code incorrect',
+    confirmPlease: 'Please confirm the policies to continue',
+    policyText: `By continuing, you need to be the parents or legal guardian of the students to agree to Think Academy’s <a class="link-text" href="/terms-of-use" target="_blank">【Term of Use】</a> and confirm that you have read the <a class="link-text" href="/privacy-policy" target="_blank">【Privacy Policy】</a>`
+  },
+  cn:{
+    enterPhone: '请输入手机号',
+    enterCode: '请输入验证码',
+    send: '获取验证码',
+    resend: '重新获取',
+    countdown: '秒',
+    enterPhonePlease: '请输入手机号',
+    invalidPhone: '手机号格式不正确',
+    enterCodePlease: '请输入验证码',
+    codeErr: '验证码错误',
+    confirmPlease: '请在下方点击同意用户协议',
+    policyText: `继续即代表您已阅读并同意Think Academy的<a class="link-text" href="/terms-of-use" target="_blank">【用户协议】</a>、<a class="link-text" href="/privacy-policy" target="_blank">【隐私政策】</a>`,
+  },
+  hk:{
+    enterPhone: '請輸入手機號',
+    enterCode: '請輸入驗證碼',
+    send: '獲取驗證碼',
+    resend: '重新獲取',
+    countdown: '秒',
+    enterPhonePlease: '請輸入手機號',
+    invalidPhone: '手機號格式不正確',
+    enterCodePlease: '請輸入驗證碼',
+    codeErr: '驗證碼錯誤',
+    confirmPlease: '請在下方點擊同意用戶協議',
+    policyText: `繼續即代表您已閱讀並同意香港學而思的<a class="link-text" href="/terms-of-use" target="_blank">【用戶協議】</a>、<a class="link-text" href="/privacy-policy" target="_blank">【隱私政策和兒童隱私政策】</a>`, 
+  },
+}

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

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