差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン | 次のリビジョン両方とも次のリビジョン | ||
apps:public:inquiry [2020/03/18 17:24] – admin | apps:public:inquiry [2020/06/30 17:30] – 外部編集 127.0.0.1 | ||
---|---|---|---|
行 119: | 行 119: | ||
</ | </ | ||
- | <script> | + | < |
- | const VueRecaptcha | + | |
- | + | ||
- | Vue.component(' | + | |
- | template: '# | + | |
- | components: { | + | |
- | ' | + | |
- | }, | + | |
- | data: function() { | + | |
- | return { | + | |
- | message: { | + | |
- | type: '', | + | |
- | title: '', | + | |
- | content: '', | + | |
- | name: '', | + | |
- | email: '' | + | |
- | } | + | |
- | } | + | |
- | }, | + | |
- | methods: { | + | |
- | show(message) { | + | |
- | this.message = message; | + | |
- | jQuery('# | + | |
- | }, | + | |
- | hide() { | + | |
- | jQuery('# | + | |
- | }, | + | |
- | sendButtonClickHandler() { | + | |
- | this.$emit(' | + | |
- | this.hide(); | + | |
- | }, | + | |
- | cancelButtonClickHandler() { | + | |
- | this.hide(); | + | |
- | } | + | |
- | } | + | |
- | }); | + | |
- | + | ||
- | var app = new Vue({ | + | |
- | el: '# | + | |
- | components: { | + | |
- | ' | + | |
- | }, | + | |
- | data: { | + | |
- | message: { | + | |
- | type: '', | + | |
- | title: '', | + | |
- | content: '', | + | |
- | name: '', | + | |
- | email: '' | + | |
- | }, | + | |
- | errors: { | + | |
- | type: '', | + | |
- | title: '', | + | |
- | content: '', | + | |
- | name: '', | + | |
- | email: '' | + | |
- | } | + | |
- | }, | + | |
- | methods: { | + | |
- | clearMessage() { | + | |
- | this.message.type = ''; | + | |
- | this.message.title = ''; | + | |
- | this.message.content = ''; | + | |
- | this.message.name = ''; | + | |
- | this.message.email = ''; | + | |
- | this.message.recaptcha = ''; | + | |
- | }, | + | |
- | clearErrors() { | + | |
- | this.errors.type = ''; | + | |
- | this.errors.title = ''; | + | |
- | this.errors.content = ''; | + | |
- | this.errors.name = ''; | + | |
- | this.errors.email = ''; | + | |
- | this.errors.recaptcha = ''; | + | |
- | }, | + | |
- | validate() { | + | |
- | let isValid = true; | + | |
- | this.clearErrors(); | + | |
- | this.message.recaptcha = document.getElementById(' | + | |
- | if (!this.message.recaptcha) { | + | |
- | this.errors.recaptcha = ' | + | |
- | isValid = false; | + | |
- | } | + | |
- | if (!this.message.type) { | + | |
- | this.errors.type = ' | + | |
- | isValid = false; | + | |
- | } | + | |
- | if (!this.message.name) { | + | |
- | this.errors.name = ' | + | |
- | isValid = false; | + | |
- | } | + | |
- | if (!this.message.email) { | + | |
- | this.errors.email = ' | + | |
- | isValid = false; | + | |
- | } | + | |
- | if (this.message.type == ' | + | |
- | this.errors.content = ' | + | |
- | isValid = false; | + | |
- | } | + | |
- | return isValid; | + | |
- | }, | + | |
- | showConfirmModalHandler() { | + | |
- | if (this.validate()) { | + | |
- | this.$refs.confirmModal.show(this.message); | + | |
- | } | + | |
- | }, | + | |
- | sendMessageHandler() { | + | |
- | this.loading = true; | + | |
- | const url = '/lib/ | + | |
- | const api = axios.create({withCredentials: | + | |
- | api.post(url, | + | |
- | resource: 'apps:inquiry', | + | |
- | action: ' | + | |
- | params: this.message | + | |
- | }) | + | |
- | .then((res) => { | + | |
- | alert(' | + | |
- | }) | + | |
- | .catch((res) => { | + | |
- | alert(' | + | |
- | this.loading = false; | + | |
- | }); | + | |
- | }, | + | |
- | clearMessageHandler() { | + | |
- | this.clearErrors(); | + | |
- | this.clearMessage(); | + | |
- | } | + | |
- | } | + | |
- | }) | + | |
- | </ | + | |
</ | </ |