意见反馈模板

src/layout/components/Navbar.vue

@@ -26,7 +26,11 @@
           <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
         </el-tooltip> -->
 
-        <!-- <span style="vertical-align: top; font-size: 18px">鸿运运货运平台</span> -->
+        <span
+          @click="feedback"
+          style="vertical-align: top; font-size: 13px; cursor: pointer"
+          >意见反馈</span
+        >
 
         <!-- <screenfull id="screenfull" class="right-menu-item hover-effect" /> -->
 
@@ -56,6 +60,62 @@
         </el-dropdown-menu>
       </el-dropdown>
     </div>
+
+    <el-dialog title="意见反馈" :visible.sync="dialogVisible" width="40%">
+      <div>
+        <div style="margin-bottom: 10px; font-size: 14px">
+          我们非常重视你提出的每一个问题，期待你的反馈!
+        </div>
+
+        <div>
+          <el-form ref="formRef" :model="formModel" label-width="80px">
+            <!-- 问题分类 -->
+            <div>
+              <el-form-item label="问题分类" required>
+                <el-checkbox-group v-model="formModel.checkedCities">
+                  <el-checkbox
+                    v-for="city in cityOptions"
+                    :label="city"
+                    :key="city"
+                    >{{ city }}</el-checkbox
+                  >
+                </el-checkbox-group>
+              </el-form-item>
+            </div>
+
+            <!-- 问题描述 -->
+            <div>
+              <el-form-item label="问题描述" required>
+                <el-input
+                  type="textarea"
+                  :rows="2"
+                  placeholder="请输入内容"
+                  v-model="formModel.textarea"
+                >
+                </el-input>
+              </el-form-item>
+            </div>
+
+            <!--联系方式 -->
+            <div>
+              <el-form-item label="联系方式" required>
+                <el-input
+                  placeholder="请留下回访电话，更快速问你解决问题"
+                  v-model="formModel.textarea"
+                >
+                </el-input>
+              </el-form-item>
+            </div>
+          </el-form>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" size="mini" @click="dialogVisible = false"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -71,6 +131,25 @@ import RuoYiGit from "@/components/RuoYi/Git";
 import RuoYiDoc from "@/components/RuoYi/Doc";
 
 export default {
+  data() {
+    return {
+      dialogVisible: false,
+      formModel: {
+        textarea: "",
+        checkedCities: [],
+      },
+
+      cityOptions: [
+        "优化建议",
+        "功能BUG",
+        "支付问题",
+        "账号问题",
+        "认证问题",
+        "性能缺陷",
+        "其他",
+      ],
+    };
+  },
   components: {
     Breadcrumb,
     TopNav,
@@ -101,6 +180,11 @@ export default {
     },
   },
   methods: {
+    // 意见反馈
+    feedback() {
+      this.dialogVisible = true;
+    },
+
     toggleSideBar() {
       this.$store.dispatch("app/toggleSideBar");
     },