{"version":3,"sources":["webpack:///./src/views/NewsSubscription.vue?e58f","webpack:///./src/views/NewsSubscription.vue","webpack:///./src/views/NewsSubscription.vue?a43e","webpack:///./node_modules/core-js/modules/es.array.join.js"],"names":["speech","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","join","isSubscription","message","success","resetForm","error","dataIsEmpty","identifyCode","refreshCode","identifyCodes","randomNum","min","max","Math","floor","random","makeCode","len","i","length","__exports__","$","IndexedObject","toIndexedObject","arrayMethodIsStrict","nativeJoin","ES3_STRINGS","Object","STRICT_METHOD","target","proto","forced","separator","call","this","undefined"],"mappings":"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","file":"js/chunk-629de810.7b3fadd6.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=0bfae7be&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 type=\"radio\" id=\"contactChoice1\" name=\"contact\" :value=\"true\" />\r\n        <label for=\"contactChoice1\">訂閱</label>\r\n        <input type=\"radio\" id=\"contactChoice2\" name=\"contact\" :value=\"false\" />\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            <input\r\n              type=\"checkbox\"\r\n              id=\"subscribeNews\"\r\n              name=\"subscribe\"\r\n              :value=\"value\"\r\n            />\r\n            <label for=\"subscribeNews\">{{ label }}</label>\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            />\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        ></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        ></a-input>\r\n        <div class=\"verify_code\">\r\n          <div class=\"code\" @clcik=\"refreshCode\" value=\"驗證碼\">\r\n            <s-identify\r\n              :identifyCode=\"identifyCode\"\r\n              title=\"驗證碼\"\r\n            ></s-identify>\r\n          </div>\r\n          <a class=\"refresh_btn\" @click=\"refreshCode\" title=\"變更驗證碼\">\r\n            <i class=\"fas fa-sync-alt\"></i>\r\n          </a>\r\n          <a\r\n            @click=\"speak(identifyCode)\"\r\n            value=\"播放語音驗證碼\"\r\n            class=\"refresh_btn\"\r\n          >\r\n            <i class=\"fas fa-play\"></i>\r\n          </a>\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\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: [],\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: subscriptionState.subscriptionType.join(\",\"),\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    return false;\r\n  } else {\r\n    if (subscriptionState.verifyCode !== identifyCode.value) {\r\n      message.error(\"驗證碼錯誤\");\r\n      refreshCode();\r\n      return false;\r\n    } else if (!isEmail(subscriptionState.email)) {\r\n      message.error(\"請確認信箱格式\");\r\n      return false;\r\n    } else return true;\r\n  }\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 = [];\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  }\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</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=0bfae7be&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-0bfae7be\"]])\n\nexport default __exports__","'use strict';\nvar $ = require('../internals/export');\nvar IndexedObject = require('../internals/indexed-object');\nvar toIndexedObject = require('../internals/to-indexed-object');\nvar arrayMethodIsStrict = require('../internals/array-method-is-strict');\n\nvar nativeJoin = [].join;\n\nvar ES3_STRINGS = IndexedObject != Object;\nvar STRICT_METHOD = arrayMethodIsStrict('join', ',');\n\n// `Array.prototype.join` method\n// https://tc39.es/ecma262/#sec-array.prototype.join\n$({ target: 'Array', proto: true, forced: ES3_STRINGS || !STRICT_METHOD }, {\n  join: function join(separator) {\n    return nativeJoin.call(toIndexedObject(this), separator === undefined ? ',' : separator);\n  }\n});\n"],"sourceRoot":""}