{"version":3,"sources":["webpack:///./src/views/NewsSubscription.vue?384d","webpack:///./src/views/NewsSubscription.vue","webpack:///./src/views/NewsSubscription.vue?a43e"],"names":["speech","emailInput","verifyCodeInput","speechInit","setLanguage","init","rate","speak","t","text","isEmploymentType","subscriptEmploymentType","subscriptionState","subscriptionType","indexOf","option","subscription","frequency","fetchSubscriptionOptions","data","map","value","label","fetchFrequencyOptions","email","verifyCode","submitForm","verify","mail","isSubscription","message","success","resetForm","error","dataIsEmpty","document","querySelector","focus","identifyCode","refreshCode","identifyCodes","randomNum","min","max","Math","floor","random","makeCode","len","i","length","__exports__"],"mappings":"gHAAA,W,ykDCuHA,IAAMA,EAAS,IAAI,IAEbC,EAAa,eAAI,MACjBC,EAAkB,eAAI,MAE5B,gBAAU,WACRC,OAGF,IAAMA,EAAa,WACjBH,EAAOI,YAAY,SACnBJ,EAAOK,KAAK,CAAEC,KAAM,MAGhBC,EAAQ,SAACC,GACbR,EAAOO,MAAM,CAAEE,KAAMD,EAAE,GAAK,IAAMA,EAAE,GAAK,IAAMA,EAAE,GAAK,IAAMA,EAAE,GAAK,OAE/DE,EAAmB,KACnBC,EAA0B,gBAC9B,kBAAMC,EAAkBC,iBAAiBC,QAAQJ,IAAqB,KAElEK,EAAS,eAAS,CACtBC,aAAc,GACdC,UAAW,KAGPC,EAAwB,yDAAG,sHACR,iBADQ,gBACvBC,EADuB,EACvBA,KACRJ,EAAOC,aAAeG,EAAKC,KAAI,gBAAGC,EAAH,EAAGA,MAAOZ,EAAV,EAAUA,KAAV,MAAsB,CACnDa,MAAOb,EACPY,YAJ6B,2CAAH,qDAOxBE,EAAqB,yDAAG,sHACL,iBADK,gBACpBJ,EADoB,EACpBA,KACRJ,EAAOE,UAAYE,EAAKC,KAAI,gBAAGC,EAAH,EAAGA,MAAOZ,EAAV,EAAUA,KAAV,MAAsB,CAChDa,MAAOb,EACPY,YAGFT,EAAkBK,UAAYF,EAAOE,UAAU,GAAGI,MAPtB,2CAAH,qDAU3BH,IACAK,IAEA,IAAMX,EAAoB,eAAS,CACjCI,cAAc,EACdH,iBAAkB,CAAC,MACnBI,UAAW,GACXO,MAAO,GACPC,WAAY,KAGRC,EAAU,yDAAG,wGACbC,IADa,wBAETR,EAAO,CACXS,KAAMhB,EAAkBY,MACxBX,iBAAkB,KAClBI,UAAWN,EAAwBU,MAC/BT,EAAkBK,UAClB,GACJY,eAAgBjB,EAAkBI,cARrB,kBAYP,eAAcG,GAZP,OAabW,EAAA,KAAQC,QACNnB,EAAkBI,aAAe,OAAS,SAE5CgB,IAhBa,mDAkBbF,EAAA,KAAQG,MAAMrB,EAAkBI,aAAe,OAAS,QAlB3C,yDAAH,qDAuBVW,EAAS,WACb,OAAIO,KACFJ,EAAA,KAAQG,MAAM,YACdE,SAASC,cAAc,iBAAiBC,SACjC,GAGJ,eAAQzB,EAAkBY,OAM3BZ,EAAkBa,aAAea,EAAajB,QAChDnB,EAAgBmB,MAAMgB,QACtBP,EAAA,KAAQG,MAAM,SACdM,KACO,IATPtC,EAAWoB,MAAMgB,QACjBP,EAAA,KAAQG,MAAM,YACP,IAaLC,EAAc,WAClB,OAAKtB,EAAkBY,QAAUZ,EAAkBC,kBAK/CmB,EAAY,WAChBpB,EAAkBI,cAAe,EACjCJ,EAAkBC,iBAAmB,CAAC,MACtCD,EAAkBK,UAAY,GAC9BL,EAAkBY,MAAQ,GAC1BZ,EAAkBa,WAAa,GAE/Bc,KAGID,EAAe,eAAI,IACnBE,EAAgB,eAAI,0CACpBC,EAAY,SAACC,EAAKC,GAEtB,OADAA,GAAY,EACLC,KAAKC,MAAMD,KAAKE,UAAYH,EAAMD,GAAOA,IAE5CK,EAAW,SAAC5B,EAAM6B,GACtB,IAAK,IAAIC,EAAI,EAAGA,EAAID,EAAKC,IACvBX,EAAajB,OAASF,EAAKsB,EAAU,EAAGtB,EAAK+B,OAAS,KAGpDX,EAAc,WAClBD,EAAajB,MAAQ,GACrB0B,EAASP,EAAcnB,MAAO,I,OAEhCkB,I,41ECpPA,MAAMY,EAA2B,IAAgB,EAAQ,CAAC,CAAC,YAAY,qBAExD,gB","file":"js/chunk-48487b62.89e1247b.js","sourcesContent":["export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js??ref--0-1!./NewsSubscription.vue?vue&type=style&index=0&id=46a53550&lang=scss&scoped=true\"","<template>\r\n  <div class=\"title\">\r\n    <h2>訂閱電子報</h2>\r\n  </div>\r\n  <table>\r\n    <tr>\r\n      <td class=\"title\">訂閱電子報<span>（必填）</span></td>\r\n      <td class=\"content\">\r\n        <input\r\n          type=\"radio\"\r\n          id=\"contactChoice1\"\r\n          name=\"contact\"\r\n          :value=\"true\"\r\n          required\r\n        />\r\n        <label for=\"contactChoice1\">訂閱</label>\r\n        <input\r\n          type=\"radio\"\r\n          id=\"contactChoice2\"\r\n          name=\"contact\"\r\n          :value=\"false\"\r\n          required\r\n        />\r\n        <label for=\"contactChoice2\">取消訂閱</label>\r\n      </td>\r\n    </tr>\r\n    <tr>\r\n      <td class=\"title\">電子報類別<span>（必填）</span></td>\r\n      <td class=\"content\">\r\n        <a-checkbox-group v-model:value=\"subscriptionState.subscriptionType\">\r\n          <div v-for=\"{ label, value } in option.subscription\" :key=\"value\">\r\n            <a-checkbox :value=\"value\">{{ label }}</a-checkbox>\r\n            <a-radio-group\r\n              v-if=\"value === isEmploymentType && subscriptEmploymentType\"\r\n              v-model:value=\"subscriptionState.frequency\"\r\n              name=\"subscriptionFrequency\"\r\n              :options=\"option.frequency\"\r\n              required\r\n            />\r\n          </div>\r\n        </a-checkbox-group>\r\n      </td>\r\n    </tr>\r\n    <tr>\r\n      <td class=\"title\">\r\n        <label for=\"email\">電子信箱<span>（必填）</span></label>\r\n      </td>\r\n      <td class=\"content\">\r\n        <a-input\r\n          id=\"email\"\r\n          title=\"電子信箱\"\r\n          v-model:value=\"subscriptionState.email\"\r\n          :style=\"{\r\n            width: '200px',\r\n          }\"\r\n          ref=\"emailInput\"\r\n          required\r\n        ></a-input>\r\n      </td>\r\n    </tr>\r\n    <tr>\r\n      <td class=\"title\">\r\n        <label for=\"verify\">驗證碼<span>（必填）</span></label>\r\n      </td>\r\n      <td class=\"content verify\">\r\n        <a-input\r\n          id=\"verify\"\r\n          title=\"驗證碼\"\r\n          v-model:value=\"subscriptionState.verifyCode\"\r\n          :style=\"{ width: '100px' }\"\r\n          ref=\"verifyCodeInput\"\r\n          required\r\n        ></a-input>\r\n        <div class=\"verify_code\">\r\n          <div class=\"code\" @click=\"refreshCode\" value=\"驗證碼\">\r\n            <s-identify\r\n              :identifyCode=\"identifyCode\"\r\n              title=\"驗證碼\"\r\n            ></s-identify>\r\n          </div>\r\n          <a-button class=\"refresh_btn\" @click=\"refreshCode\" type=\"button\">\r\n            <i class=\"fas fa-sync-alt\"></i>變更驗證碼\r\n          </a-button>\r\n          <a-button\r\n            @click=\"speak(identifyCode)\"\r\n            class=\"refresh_btn\"\r\n            type=\"button\"\r\n          >\r\n            <i class=\"fas fa-play\"></i>播放語音驗證碼\r\n          </a-button>\r\n        </div>\r\n        <p class=\"verify_description\">英文需區分大小寫</p>\r\n      </td>\r\n    </tr>\r\n  </table>\r\n  <div class=\"btns\">\r\n    <a-button\r\n      type=\"primary\"\r\n      :style=\"{ padding: '4px 8px', marginRight: '8px' }\"\r\n      @click=\"submitForm\"\r\n      >完成送出</a-button\r\n    >\r\n    <a-button :style=\"{ padding: '4px 8px' }\" @click=\"resetForm\"\r\n      >重新輸入</a-button\r\n    >\r\n  </div>\r\n</template>\r\n\r\n<script setup>\r\nimport {\r\n  getSubscribableOptions,\r\n  getSubscriptionFrequencyOptions,\r\n  subscriptInfo,\r\n} from \"@/api/api\";\r\nimport { reactive, ref, computed, onMounted } from \"vue\";\r\nimport SIdentify from \"./sIdentify.vue\";\r\nimport { message } from \"ant-design-vue\";\r\nimport { isEmail } from \"@/func\";\r\nimport Speech from \"speak-tts\";\r\nconst speech = new Speech();\r\n\r\nconst emailInput = ref(null);\r\nconst verifyCodeInput = ref(null);\r\n\r\nonMounted(() => {\r\n  speechInit();\r\n});\r\n\r\nconst speechInit = () => {\r\n  speech.setLanguage(\"zh-tw\");\r\n  speech.init({ rate: 0.5 });\r\n};\r\n\r\nconst speak = (t) => {\r\n  speech.speak({ text: t[0] + \" \" + t[1] + \" \" + t[2] + \" \" + t[3] + \" \" });\r\n};\r\nconst isEmploymentType = \"01\";\r\nconst subscriptEmploymentType = computed(\r\n  () => subscriptionState.subscriptionType.indexOf(isEmploymentType) > -1\r\n);\r\nconst option = reactive({\r\n  subscription: [],\r\n  frequency: [],\r\n});\r\n\r\nconst fetchSubscriptionOptions = async () => {\r\n  const { data } = await getSubscribableOptions();\r\n  option.subscription = data.map(({ value, text }) => ({\r\n    label: text,\r\n    value,\r\n  }));\r\n};\r\nconst fetchFrequencyOptions = async () => {\r\n  const { data } = await getSubscriptionFrequencyOptions();\r\n  option.frequency = data.map(({ value, text }) => ({\r\n    label: text,\r\n    value,\r\n  }));\r\n\r\n  subscriptionState.frequency = option.frequency[0].value;\r\n};\r\n\r\nfetchSubscriptionOptions();\r\nfetchFrequencyOptions();\r\n\r\nconst subscriptionState = reactive({\r\n  subscription: true,\r\n  subscriptionType: [\"02\"],\r\n  frequency: \"\",\r\n  email: \"\",\r\n  verifyCode: \"\",\r\n});\r\n\r\nconst submitForm = async () => {\r\n  if (verify()) {\r\n    const data = {\r\n      mail: subscriptionState.email,\r\n      subscriptionType: \"02\",\r\n      frequency: subscriptEmploymentType.value\r\n        ? subscriptionState.frequency\r\n        : \"\",\r\n      isSubscription: subscriptionState.subscription,\r\n    };\r\n\r\n    try {\r\n      await subscriptInfo(data);\r\n      message.success(\r\n        subscriptionState.subscription ? \"訂閱成功\" : \"已取消訂閱\"\r\n      );\r\n      resetForm();\r\n    } catch (error) {\r\n      message.error(subscriptionState.subscription ? \"訂閱失敗\" : \"取消失敗\");\r\n    }\r\n  }\r\n};\r\n\r\nconst verify = () => {\r\n  if (dataIsEmpty()) {\r\n    message.error(\"必填欄位不可為空\");\r\n    document.querySelector(\"input:invalid\").focus();\r\n    return false;\r\n  }\r\n\r\n  if (!isEmail(subscriptionState.email)) {\r\n    emailInput.value.focus();\r\n    message.error(\"請確認信箱格式\");\r\n    return false;\r\n  }\r\n\r\n  if (subscriptionState.verifyCode !== identifyCode.value) {\r\n    verifyCodeInput.value.focus();\r\n    message.error(\"驗證碼錯誤\");\r\n    refreshCode();\r\n    return false;\r\n  }\r\n\r\n  return true;\r\n};\r\n\r\nconst dataIsEmpty = () => {\r\n  if (!subscriptionState.email || !subscriptionState.subscriptionType)\r\n    return true;\r\n  return false;\r\n};\r\n\r\nconst resetForm = () => {\r\n  subscriptionState.subscription = true;\r\n  subscriptionState.subscriptionType = [\"02\"];\r\n  subscriptionState.frequency = \"\";\r\n  subscriptionState.email = \"\";\r\n  subscriptionState.verifyCode = \"\";\r\n\r\n  refreshCode();\r\n};\r\n\r\nconst identifyCode = ref(\"\");\r\nconst identifyCodes = ref(\"0123456789abcdwerwshdjeJKDHRJHKOOPLMKQ\");\r\nconst randomNum = (min, max) => {\r\n  max = max + 1;\r\n  return Math.floor(Math.random() * (max - min) + min);\r\n};\r\nconst makeCode = (data, len) => {\r\n  for (let i = 0; i < len; i++) {\r\n    identifyCode.value += data[randomNum(0, data.length - 1)];\r\n  }\r\n};\r\nconst refreshCode = () => {\r\n  identifyCode.value = \"\";\r\n  makeCode(identifyCodes.value, 4);\r\n};\r\nrefreshCode();\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.title {\r\n  margin-bottom: 12px;\r\n  background: linear-gradient(\r\n    to right,\r\n    $main_sec_color 0 3%,\r\n    $main_color 3% 100%\r\n  );\r\n\r\n  h2 {\r\n    margin-left: 3%;\r\n    padding: 20px;\r\n    text-align: start;\r\n    font-size: $h2;\r\n    color: #fff;\r\n  }\r\n}\r\n\r\ntable {\r\n  margin-bottom: 12px;\r\n  width: 100%;\r\n  border-collapse: separate;\r\n  border-spacing: 0;\r\n  white-space: pre-wrap;\r\n  word-wrap: break-word;\r\n  font-size: $p;\r\n\r\n  tr {\r\n    &:first-child {\r\n      td {\r\n        border-top: 1px solid #d9d9d9;\r\n      }\r\n      td.title {\r\n        &:first-child {\r\n          border-radius: 4px 0 0 0;\r\n        }\r\n      }\r\n\r\n      td.content {\r\n        &:last-child {\r\n          border-radius: 0 4px 0 0;\r\n        }\r\n      }\r\n    }\r\n\r\n    &:last-child {\r\n      td.title {\r\n        &:first-child {\r\n          border-radius: 0 0 0 4px;\r\n        }\r\n      }\r\n      td.content {\r\n        &:last-child {\r\n          border-radius: 0 0 4px 0;\r\n        }\r\n      }\r\n    }\r\n\r\n    td {\r\n      padding: 8px;\r\n      border-bottom: 1px solid #d9d9d9;\r\n      text-align: start;\r\n    }\r\n\r\n    td.title {\r\n      border-left: 1px solid #d9d9d9;\r\n      width: 0;\r\n      white-space: nowrap;\r\n      background: #f5f5f5;\r\n\r\n      span {\r\n        color: red;\r\n      }\r\n    }\r\n\r\n    td.content {\r\n      border-right: 1px solid #d9d9d9;\r\n    }\r\n  }\r\n}\r\n\r\n.verify {\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  .verify_code {\r\n    display: flex;\r\n    align-items: center;\r\n    .code {\r\n      background-color: #eee;\r\n      margin-left: 8px;\r\n      border: 1px solid #d9d9d9;\r\n      border-radius: 2px;\r\n    }\r\n    .refresh_btn {\r\n      border: 1.5px solid #d9d9d9;\r\n      border-radius: 2px;\r\n      padding: 4px 8px;\r\n      margin-left: 8px;\r\n      background-color: #fff;\r\n    }\r\n    .ant-btn {\r\n      height: auto;\r\n      padding: 4px 16px;\r\n\r\n      &:focus {\r\n        outline: 2px solid black;\r\n        outline-offset: 2px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .verify_description {\r\n    margin-left: 8px;\r\n    color: red;\r\n    font-size: 0.95em;\r\n  }\r\n}\r\n\r\n.ant-btn:focus {\r\n  outline: 2px solid black;\r\n  outline-offset: 2px;\r\n}\r\n</style>\r\n","import script from \"./NewsSubscription.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./NewsSubscription.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./NewsSubscription.vue?vue&type=style&index=0&id=46a53550&lang=scss&scoped=true\"\n\nimport exportComponent from \"D:\\\\Project\\\\Current\\\\oversea-website\\\\node_modules\\\\@vue\\\\cli-service\\\\node_modules\\\\vue-loader-v16\\\\dist\\\\exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-46a53550\"]])\n\nexport default __exports__"],"sourceRoot":""}