overseas 2.0.7

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}$/,
+  },
+]

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

@@ -0,0 +1,491 @@
+<template>
+  <div id="notified-panel" ref="notified-panel" class="notified-panel"
+       :style="[backgroundColorStyle, backgroundImgStyle]"
+  >
+    <div v-if="title || desc" class="notified-header">
+      <div v-if="title" class="notified-title">
+        {{ title }}
+      </div>
+      <div v-if="desc" class="notified-desc">
+        {{ desc }}
+      </div>
+    </div>
+    <div class="notified-form">
+      <van-form @submit="onSubmit">
+        <template v-for="(question, index) in questions">
+          <div v-if="question.entryType === 'phone'" :key="index" class="form-item">
+            <div class="item-label" :class="{ 'label-required': question.required }">
+              {{ question.title }}
+            </div>
+            <div class="item-body phone-body">
+              <van-field style="width:120px;border-right: 0px;" readonly clickable :value="areacodeText" 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="form.phone" name="phone"
+                         :rules="[{ required: question.required, message: 'Required' }, { validator: validatorPhone, message: 'Invalid phone number' }]"
+              />
+            </div>
+          </div>
+          <div v-if="question.entryType === 'mail'" :key="index" class="form-item">
+            <div class="item-label" :class="{ 'label-required': question.required }">
+              {{ question.title }}
+            </div>
+            <div class="item-body">
+              <van-field v-model="form.mail" name="mail"
+                         :rules="[{ required: question.required, message: 'Required' }, { validator, message: 'Invalid email format' }]"
+              />
+            </div>
+          </div>
+          <div v-if="question.entryType === 'name'" :key="index" class="form-item name-item">
+            <div class="form-name">
+              <div class="item-label" :class="{ 'label-required': question.required }">
+                {{ question.firstName }}
+              </div>
+              <div class="item-body name-body">
+                <van-field v-model="form.firstName" name="firstName"
+                           :rules="[{ required: question.required, message: 'Required' }]"
+                />
+              </div>
+            </div>
+            <div class="form-name">
+              <div class="item-label" :class="{ 'label-required': question.required }">
+                {{ question.lastName }}
+              </div>
+              <div class="item-body name-body">
+                <van-field v-model="form.lastName" name="lastName"
+                           :rules="[{ required: question.required, message: 'Required' }]"
+                />
+              </div>
+            </div>
+          </div>
+          <div v-if="question.entryType === 'grade'" :key="index" class="form-item">
+            <div class="item-label" :class="{ 'label-required': question.required }">
+              {{ question.title }}
+            </div>
+            <div class="item-body grade-body">
+              <van-field readonly clickable :value="form.grade" name="grade"
+                         right-icon="arrow-down"
+                         :rules="[{ required: question.required, message: 'Required' }]" placeholder="grade"
+                         @click="showGradePicker = true"
+              />
+              <van-popup v-model="showGradePicker" round position="bottom">
+                <van-picker show-toolbar
+                            :columns="questions.find(q => q.entryType === 'grade').gradeList.filter(i => i.checked).map(g => g.name)"
+                            @cancel="showGradePicker = false" @confirm="onConfirmGrade"
+                />
+              </van-popup>
+            </div>
+          </div>
+          <div v-if="question.entryType === 'wechat'" :key="index" class="form-item">
+            <div class="item-label" :class="{ 'label-required': question.required }">
+              {{ question.title }}
+            </div>
+            <div class="item-body">
+              <van-field v-model="form.wechat" name="wechat" :rules="[{ required: question.required, message: 'Required' }]" />
+            </div>
+          </div>
+          <div v-if="question.entryType === 'line'" :key="index" class="form-item">
+            <div class="item-label" :class="{ 'label-required': question.required }">
+              {{ question.title }}
+            </div>
+            <div class="item-body">
+              <van-field v-model="form.line" name="line" :rules="[{ required: question.required, message: 'Required' }]" />
+            </div>
+          </div>
+          <div v-if="question.entryType === 'whatsapp'" :key="index" class="form-item">
+            <div class="item-label" :class="{ 'label-required': question.required }">
+              {{ question.title }}
+            </div>
+            <div class="item-body">
+              <van-field v-model="form.whatsapp" name="whatsapp" :rules="[{ required: question.required, message: 'Required' }]" />
+            </div>
+          </div>
+          <div v-if="question.entryType === 'zipcode'" :key="index" class="form-item">
+            <div class="item-label" :class="{ 'label-required': question.required }">
+              {{ question.title }}
+            </div>
+            <div class="item-body">
+              <van-field v-model="form.zipcode" name="zipcode" :rules="[{ required: question.required, message: 'Required' }]" />
+            </div>
+          </div>
+          <div v-if="question.entryType === 'city'" :key="index" class="form-item">
+            <div class="item-label" :class="{ 'label-required': question.required }">
+              {{ question.title }}
+            </div>
+            <div class="item-body customize-body">
+              <template v-if="question.questionType === '1'">
+                <van-field v-model="form.city" name="city"
+                           :rules="[{ required: question.required, message: 'Required' }]"
+                />
+              </template>
+              <template v-if="question.questionType === '2'">
+                <van-field v-model="form.city" readonly clickable name="city"
+                           right-icon="arrow-down"
+                           :rules="[{ required: question.required, message: 'Required' }]" placeholder="city"
+                           @click="showCityPicker = true"
+                />
+                <van-popup v-model="showCityPicker" round position="bottom">
+                  <van-picker show-toolbar :columns="question.options.map(e => e.text)" @cancel="showCityPicker = false"
+                              @confirm="onConfirmCity"
+                  />
+                </van-popup>
+              </template>
+              <template v-if="question.questionType === '3'">
+                <van-field name="city" :rules="[{ required: question.required, message: 'Required' }]">
+                  <template #input>
+                    <van-radio-group v-model="form.city">
+                      <van-radio v-for="(option, ind) in question.options" :key="ind" :name="option.text"
+                                 checked-color="#FF9F0A"
+                      >
+                        <template #icon="props">
+                          <div class="radio-icon" :class="[props.checked?'activeRadioIcon':'inactiveRadioIcon']" />
+                        </template>
+                        {{ option.text }}
+                        <van-field v-if="option.isOther" v-model="option.value" />
+                      </van-radio>
+                    </van-radio-group>
+                  </template>
+                </van-field>
+              </template>
+            </div>
+          </div>
+          <div v-if="question.entryType === 'customize'" :key="index" class="form-item">
+            <div class="item-label" :class="{ 'label-required': question.required }">
+              {{ question.title }}
+            </div>
+            <div class="item-body customize-body">
+              <template v-if="question.questionType === '1'">
+                <van-field v-model="form[question.title]" :name="question.title"
+                           :rules="[{ required: question.required, message: 'Required' }]"
+                />
+              </template>
+              <template v-if="question.questionType === '2'">
+                <van-field v-model="form[question.title]" readonly clickable :name="question.title"
+                           right-icon="arrow-down"
+                           :rules="[{ required: question.required, message: 'Required' }]" @click="showCustomizePicker[index] = true"
+                />
+                <van-popup v-model="showCustomizePicker[index]" round position="bottom">
+                  <van-picker show-toolbar :columns="question.options.map(e => e.text)"
+                              @cancel="showCustomizePicker[index] = false" @confirm="(value) => {
+                                form[question.title] = value; showCustomizePicker[index] = false
+                              }"
+                  />
+                </van-popup>
+              </template>
+              <template v-if="question.questionType === '3'">
+                <van-field class="customize34" :name="question.title" :rules="[{ required: question.required, message: 'Required' }]">
+                  <template #input>
+                    <van-radio-group v-model="form[question.title]">
+                      <van-radio v-for="(option, ind) in question.options" :key="ind" :name="option.text"
+                                 checked-color="#FF9F0A"
+                      >
+                        <template #icon="props">
+                          <div class="radio-icon" :class="[props.checked?'activeRadioIcon':'inactiveRadioIcon']" />
+                        </template>
+                        {{ option.text }}
+                        <van-field v-if="option.isOther" v-model="option.value" />
+                      </van-radio>
+                    </van-radio-group>
+                  </template>
+                </van-field>
+              </template>
+              <template v-if="question.questionType === '4'">
+                <van-field class="customize34" :name="question.title" :rules="[{ required: question.required, message: 'Required' }]">
+                  <template #input>
+                    <van-checkbox-group v-model="form[question.title]">
+                      <van-checkbox v-for="(option, index) in question.options" :key="index" :name="option.text"
+                                    checked-color="#FF9F0A" shape="square"
+                      >
+                        {{ option.text }}
+                        <van-field v-if="option.isOther" v-model="option.value" />
+                      </van-checkbox>
+                    </van-checkbox-group>
+                  </template>
+                </van-field>
+              </template>
+            </div>
+          </div>
+        </template>
+        <div style="margin: 16px">
+          <van-button round block type="info" :color="buttonProps.backgroundColor" native-type="submit">
+            {{ buttonProps.text }}
+          </van-button>
+        </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 Radio from "vant/es/radio"
+import RadioGroup from "vant/es/radio-group"
+import Checkbox from "vant/es/checkbox"
+import CheckboxGroup from "vant/es/checkbox-group"
+import Popup from "vant/es/popup"
+import { areaCodeList } from './areaCodeList';
+export default {
+  name: 'TsNotifiedPanel',
+  components: {
+    [Button.name]: Button,
+    [Form.name]: Form,
+    [Field.name]: Field,
+    [Picker.name]: Picker,
+    [Radio.name]: Radio,
+    [RadioGroup.name]: RadioGroup,
+    [Checkbox.name]: Checkbox,
+    [CheckboxGroup.name]: CheckboxGroup,
+    [Popup.name]: Popup
+  },
+  props: {
+    title: {
+      type: String,
+      default:
+        'AMC 8 讲座报名表AMC 8 讲座报名表AMC 8 讲座报名表AMC 8 讲座报名表',
+    },
+    desc: {
+      type: String,
+      default:
+        '填写下方信息即可报名周末AMC 8 备考讲座填写下方信息即可报名周末AMC 8 备考讲座填写下方信息即可报名周末AMC 8 备考讲座',
+    },
+    crmTagList: {
+      type: Array,
+      default: () => [],
+    },
+    questions: {
+      type: Array,
+      default: () => [
+        {
+          entryType: 'name',
+          questionType: '4',
+          title: '自定义',
+          gradeList: [],
+          firstName: 'First Name',
+          lastName: 'Last Name',
+          options: [{
+            text: "123123",
+            value: "",
+            isOther: false
+          }, {
+            text: "11111111111",
+            value: "",
+            isOther: false
+          }, {
+            text: "2222222222222222",
+            value: "",
+            isOther: false
+          }, {
+            text: "33333333333333333",
+            value: "",
+            isOther: true
+          }],
+          areaCode: 'us',
+          required: true,
+        },
+      ],
+    },
+    buttonProps: {
+      type: Object,
+      default: () => {
+        return {
+          text: 'Submit',
+          backgroundColor: '#FF9F0A',
+          eventName: 'notified-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: '',
+    },
+    talWebhook: {
+      type: String,
+      default: '',
+    },
+    talSecret: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      areaCodeList,
+      form: {
+        phone: '',
+        name: '',
+        areaCode: "",
+        firstName: "",
+        lastName: "",
+        mail: "",
+        grade: "",
+        wechat: "",
+        line: "",
+        whatsapp: "",
+        city: "",
+        zipcode: ""
+      },
+      gradeList: [],
+      showGradePicker: false,
+      showAreaPicker: false,
+      showCityPicker: false,
+      showCustomizePicker: {},
+      areacodeText: "+1",
+      phoneReg: /^\d{1,99}$/
+    };
+  },
+  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: {
+    questions: {
+      handler(newValue) {
+        console.log("newValue", newValue)
+        this.questions.map((question, index) => {
+          if (question.entryType === "phone") {
+            const areaCodeObj = this.areaCodeList.find(e=>e.code === question.areaCode)
+            this.areacodeText = areaCodeObj.text
+            this.form.areaCode = areaCodeObj.value
+            this.phoneReg = areaCodeObj.reg
+          }
+          if (question.entryType === "grade") {
+            const gradeList = question.gradeList.filter(i => i.checked)
+            const grade = gradeList[0]
+            if (!this.form.grade) {
+              this.form.grade = grade.name
+              this.form.gradeValue = grade.value
+            }
+          }
+          if (question.entryType === "customize") {
+            this.$set(this.showCustomizePicker, index, false)
+          }
+        })
+      },
+      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)
+    },
+    bottomBtnClick() {
+      this.$emit('btn-click', 'notified-submit', {
+        props: this.$props,
+      });
+    },
+    onSubmit() {
+      console.log("this.form", this.form)
+      console.log(this.questions)
+      this.questions.forEach(question => {
+        // 有自定义
+        let isOtherOptions = question.options.filter(option => option.isOther)
+        if (!isOtherOptions.length) return
+        if (question.questionType === '3') {
+          if (question.entryType === 'city') {
+            question.options.map(e => {
+              if (e.text === this.form.city && e.isOther) {
+                this.form.city = this.form.city + e.value
+              }
+            })
+          } else if (question.entryType === 'customize') {
+            question.options.map(e => {
+              if (e.text === this.form[question.title] && e.isOther) {
+                this.form[question.title] = this.form[question.title] + e.value
+              }
+            })
+          }
+        }
+        if (question.questionType === '4') {
+          let isOtherOptions = question.options.filter(option => option.isOther)
+          if (!isOtherOptions.length) return
+          question.options.map(e => {
+            if (this.form[question.title].includes(e.text) && e.isOther) {
+              this.form[question.title].splice(this.form[question.title].indexOf(e.text), 1)
+              this.form[question.title].push(e.text + e.value)
+            }
+          })
+        }
+      })
+      this.form.crmTagList = this.crmTagList
+      this.form.name = `${this.form.firstName} ${this.form.lastName}`
+      this.form.talWebhook = this.talWebhook
+      this.form.talSecret = this.talSecret
+      this.$emit('btn-click', this.buttonProps.eventName, this.form);
+    },
+    onConfirmGrade(value, index) {
+      console.log("onConfirmGrade", value, index)
+      const gradeList = this.questions.find(q => q.entryType === 'grade').gradeList.filter(i => i.checked)
+      const grade = gradeList[index]
+      this.form.grade = grade.name
+      this.form.gradeValue = grade.value
+      this.showGradePicker = false;
+    },
+    onConfirmArea(value, index) {
+      console.log("onConfirmArea", value, index)
+      const areaObj = this.areaCodeList[index]
+      this.phoneReg = areaObj.reg
+      this.form.areaCode = areaObj.value
+      this.areacodeText = areaObj.text
+      this.showAreaPicker = false
+    },
+    onConfirmCity(value) {
+      this.form.city = value
+      this.showCityPicker = false
+    }
+  },
+};
+</script>

package/packages/business/page-render/index.js

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