ContactUs

src/components/Widgets/ContactUs/ContactUs.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="ContactUs"
+       :style="localOptions.style"
+       :class="localOptions.className">
+    <q-banner class="q-mb-md">
+      ارسال تیکت
+    </q-banner>
+    <div class="box">
+      <div class="message">
+        {{ message }}
+      </div>
+      <div class="action">
+        <q-btn color="primary"
+               :to="{name: 'UserPanel.Ticket.Create'}">
+          {{ btnText }}
+        </q-btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mixinWidget, mixinAuth } from 'src/mixin/Mixins.js'
+
+export default {
+  name: 'ContactUs',
+  mixins: [mixinWidget, mixinAuth],
+  data() {
+    return {
+      message: 'جهت ارتباط با ما عضو سایت شوید و در قسمت تیکت با ما ارتباط برقرار کنید',
+      btnText: 'ورود / ثبت نام',
+      defaultOptions: {
+      }
+    }
+  },
+  mounted() {
+    if (this.isUserLogin) {
+      this.message = 'جهت ارتباط با ما در قسمت تیکت با ما ارتباط برقرار کنید'
+      this.btnText = 'ارسال تیکت'
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.ContactUs {
+  .box {
+    padding: 30px;
+    background: #F5F5F5;
+    border-radius: 8px;
+    display: flex;
+    justify-content: space-between;
+    .message {
+      font-size: 18px;
+      color: #212121;
+    }
+    .action {}
+  }
+}
+</style>

src/components/Widgets/ContactUs/OptionPanel.vue

@@ -0,0 +1,112 @@
+<template>
+  <option-panel-tabs v-model:options="localOptions">
+    <template #main-tab>
+      <div class="option-panel-container">
+        <div class="row q-mt-sm">
+          <div class="col-md-12">
+            <editor v-model:value="localOptions.text" />
+          </div>
+          <editor-options v-model:options="localOptions" />
+        </div>
+      </div>
+    </template>
+  </option-panel-tabs>
+</template>
+<script>
+import { defineComponent } from 'vue'
+import { mixinOptionPanel } from 'quasar-ui-q-page-builder'
+import OptionPanelTabs from 'quasar-ui-q-page-builder/src/components/OptionPanelComponents/OptionPanelTabs.vue'
+import Editor from 'components/Utils/Editor.vue'
+import EditorOptions from 'components/EditorOptions.vue'
+
+export default defineComponent({
+  name: 'OptionPanel',
+  components: { Editor, OptionPanelTabs, EditorOptions },
+  mixins: [mixinOptionPanel],
+  props: {
+    options: {
+      type: Object,
+      default() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      fontStyle: ['inherit', 'normal', 'italic'],
+      foreColor: '#000000',
+      token: null,
+      responsiveOpts: ['xs', 'sm', 'md', 'lg', 'xl'],
+      responsive: 'xs',
+      defaultOptions: {
+        fontFamily: null,
+        color: null,
+        fontSize: null,
+        fontWeight: null,
+        fontStyle: null,
+        xs: {
+          fontSize: null,
+          fontWeight: null,
+          fontStyle: null,
+          lineHeight: null
+        },
+        sm: {
+          fontSize: null,
+          fontWeight: null,
+          fontStyle: null,
+          lineHeight: null
+        },
+        md: {
+          fontSize: null,
+          fontWeight: null,
+          fontStyle: null,
+          lineHeight: null
+        },
+        lg: {
+          fontSize: null,
+          fontWeight: null,
+          fontStyle: null,
+          lineHeight: null
+        },
+        xl: {
+          fontSize: null,
+          fontWeight: null,
+          fontStyle: null,
+          lineHeight: null
+        }
+      }
+    }
+  },
+  watch: {
+    localOptions: {
+      handler(newVal) {
+        this.$emit('update:options', newVal)
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    const windowWidth = window.innerWidth
+    if (windowWidth > 1920) {
+      this.responsive = 'xl'
+    } else if (windowWidth > 1440 < 1920) {
+      this.responsive = 'lg'
+    } else if (windowWidth > 1024 < 1440) {
+      this.responsive = 'md'
+    } else if (windowWidth > 600 < 1024) {
+      this.responsive = 'sm'
+    } else if (windowWidth < 600) {
+      this.responsive = 'xs'
+    }
+  },
+  methods: {
+    color(cmd, name) {
+      const edit = this.$refs.editor
+      this.$refs.token.hide()
+      edit.caret.restore()
+      edit.runCmd(cmd, name)
+      edit.focus()
+    }
+  }
+})
+</script>

src/router/routes.js

@@ -377,6 +377,7 @@ const routes = [
               {
                 path: 'create',
                 name: 'UserPanel.Ticket.Create',
+                meta: { middlewares: [Authenticated] },
                 component: () => import('src/pages/User/Ticket/Create.vue')
               }
             ]