{"version":3,"sources":["webpack:///./src/views/NewsSubscription.vue?f492","webpack:///./src/views/NewsSubscription.vue","webpack:///./src/views/NewsSubscription.vue?a43e","webpack:///./node_modules/core-js/modules/es.array.join.js"],"names":["isEmploymentType","subscriptEmploymentType","subscriptionState","subscriptionType","indexOf","option","subscription","frequency","fetchSubscriptionOptions","data","map","value","text","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":"kHAAA,W,s6CCiGA,IAAMA,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,MAAOC,EAAV,EAAUA,KAAV,MAAsB,CACnDC,MAAOD,EACPD,YAJ6B,2CAAH,qDAOxBG,EAAqB,yDAAG,sHACL,iBADK,gBACpBL,EADoB,EACpBA,KACRJ,EAAOE,UAAYE,EAAKC,KAAI,gBAAGC,EAAH,EAAGA,MAAOC,EAAV,EAAUA,KAAV,MAAsB,CAChDC,MAAOD,EACPD,YAGFT,EAAkBK,UAAYF,EAAOE,UAAU,GAAGI,MAPtB,2CAAH,qDAU3BH,IACAM,IAEA,IAAMZ,EAAoB,eAAS,CACjCI,cAAc,EACdH,iBAAkB,GAClBI,UAAW,GACXQ,MAAO,GACPC,WAAY,KAGRC,EAAU,yDAAG,wGACbC,IADa,wBAETT,EAAO,CACXU,KAAMjB,EAAkBa,MACxBZ,iBAAkBD,EAAkBC,iBAAiBiB,KAAK,KAC1Db,UAAWN,EAAwBU,MAC/BT,EAAkBK,UAClB,GACJc,eAAgBnB,EAAkBI,cARrB,kBAYP,eAAcG,GAZP,OAaba,EAAA,KAAQC,QACNrB,EAAkBI,aAAe,OAAS,SAE5CkB,IAhBa,mDAkBbF,EAAA,KAAQG,MAAMvB,EAAkBI,aAAe,OAAS,QAlB3C,yDAAH,qDAuBVY,EAAS,WACb,OAAIQ,KACFJ,EAAA,KAAQG,MAAM,aACP,GAEHvB,EAAkBc,aAAeW,EAAahB,OAChDW,EAAA,KAAQG,MAAM,SACdG,KACO,KACG,eAAQ1B,EAAkBa,SACpCO,EAAA,KAAQG,MAAM,YACP,IAKPC,EAAc,WAClB,OAAKxB,EAAkBa,QAAUb,EAAkBC,kBAK/CqB,EAAY,WAChBtB,EAAkBI,cAAe,EACjCJ,EAAkBC,iBAAmB,GACrCD,EAAkBK,UAAY,GAC9BL,EAAkBa,MAAQ,GAC1Bb,EAAkBc,WAAa,GAE/BY,KAGID,EAAe,eAAI,IACnBE,EAAgB,eAAI,0CACpBC,EAAY,SAACC,EAAKC,GAEtB,OADAA,GAAY,EACLC,KAAKC,MAAMD,KAAKE,UAAYH,EAAMD,GAAOA,IAE5CK,EAAW,SAAC3B,EAAM4B,GACtB,IAAK,IAAIC,EAAI,EAAGA,EAAID,EAAKC,IACvBX,EAAahB,OAASF,EAAKqB,EAAU,EAAGrB,EAAK8B,OAAS,KAGpDX,EAAc,WAClBD,EAAahB,MAAQ,GACrByB,EAASP,EAAclB,MAAO,I,OAEhCiB,I,qnECtMA,MAAMY,EAA2B,IAAgB,EAAQ,CAAC,CAAC,YAAY,qBAExD,gB,kCCPf,IAAIC,EAAI,EAAQ,QACZC,EAAgB,EAAQ,QACxBC,EAAkB,EAAQ,QAC1BC,EAAsB,EAAQ,QAE9BC,EAAa,GAAGzB,KAEhB0B,EAAcJ,GAAiBK,OAC/BC,EAAgBJ,EAAoB,OAAQ,KAIhDH,EAAE,CAAEQ,OAAQ,QAASC,OAAO,EAAMC,OAAQL,IAAgBE,GAAiB,CACzE5B,KAAM,SAAcgC,GAClB,OAAOP,EAAWQ,KAAKV,EAAgBW,WAAqBC,IAAdH,EAA0B,IAAMA,O","file":"js/chunk-2aa97890.63bcebfd.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=4a197191&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\"><span>* </span><label for=\"email\">電子信箱</label></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\"><span>* </span><label for=\"verify\">驗證碼</label></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        </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 } from \"vue\";\r\nimport SIdentify from \"./sIdentify.vue\";\r\nimport { message } from \"ant-design-vue\";\r\nimport { isEmail } from \"@/func\";\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: 150px;\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.625em;\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=4a197191&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-4a197191\"]])\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":""}