[add] Complain Page

src/api/user.js

@@ -382,3 +382,27 @@ export function getMails() {
 export function opMails(ids, op) {
   return request.post("user/mails_oper", { ids: ids, oper: op });
 }
+
+/**
+ * 获取反馈页面信息
+ * @returns {*}
+ */
+export function getSupport() {
+  return request.get("support/complaint");
+}
+
+/**
+ * 提交反馈信息
+ * @param subject
+ * @param body
+ * @param type
+ * @returns {*}
+ */
+export function support(subject, body, type = 0) {
+  return request.post("support/message", {
+    subject: subject,
+    body: body,
+    type: type,
+    img: ""
+  });
+}

src/views/user/Complaint.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="Complaint">
+    <NavBar></NavBar>
+    <div class="list">
+      <!-- <div class="qrcode">
+            <img />
+        </div> -->
+      <div class="website">
+        <span class="iconfont icon-shouye2 "></span> 官网：{{
+          info.official_site
+        }}
+      </div>
+      <div class="website">
+        <span class="addfont icon-email " style="font-size: 0.26rem;"></span>
+        邮箱：{{ info.email }}
+      </div>
+      <div class="item">
+        <div class="data">
+          <span
+            class="addfont icon-phonenew "
+            style="font-size: 0.35rem;"
+          ></span>
+          电话：<span class="text">{{ info.phone }}</span>
+        </div>
+        <div
+          class="btn phone"
+          :data-clipboard-text="info.phone"
+          @click="copy('phone')"
+        >
+          复制
+        </div>
+        <button></button>
+      </div>
+      <div class="item">
+        <div class="data">
+          <span class="iconfont icon-weixin1 "></span> 微信：<span
+            class="text"
+            >{{ info.wechat }}</span
+          >
+        </div>
+        <div
+          class="btn wechat"
+          :data-clipboard-text="info.wechat"
+          @click="copy('wechat')"
+        >
+          复制
+        </div>
+      </div>
+      <div class="submit">
+        <!-- <div class="header">提交反馈</div> -->
+        <div class="title">
+          <div>标题</div>
+          <input type="text" v-model="title" placeholder="必填项*" />
+        </div>
+        <div class="content">
+          <div class="title">内容</div>
+          <textarea type="text" v-model="content" />
+        </div>
+      </div>
+    </div>
+    <div class="bottom">
+      <div class="submit bg-color-red" @click="submit">提交反馈</div>
+    </div>
+  </div>
+</template>
+<script>
+import { getSupport, support } from "@api/user";
+import NavBar from "@components/NavBar";
+import ClipboardJS from "clipboard";
+
+export default {
+  name: "Complaint",
+  components: {
+    NavBar
+  },
+  data() {
+    return {
+      info: {},
+      title: "",
+      content: ""
+    };
+  },
+  watch: {
+    // $route(n) {
+    //    if (n.name === "Complaint") {
+    //    }
+    // }
+  },
+  methods: {
+    copy: function(text) {
+      const that = this;
+      const copy = document.getElementsByClassName(text);
+      const clipboard = new ClipboardJS(copy);
+      const tips = text === "wechat" ? "微信" : "电话";
+      clipboard.on("success", () => {
+        that.$dialog.success(tips + "复制成功");
+      });
+      clipboard.on("error", () => {
+        that.$dialog.success("复制失败");
+      });
+    },
+    submit: function() {
+      const that = this;
+      if (this.title.trim() === "") {
+        return this.$dialog.error("请输入标题");
+      }
+      support(this.title, this.content).then(
+        res => {
+          that.$dialog.message(res.msg);
+          that.title = "";
+          that.content = "";
+        },
+        err => {
+          that.$dialog.error(err.msg);
+        }
+      );
+    }
+  },
+  mounted() {
+    const that = this;
+    getSupport()
+      .then(res => {
+        that.info = res.data;
+      })
+      .catch(err => {
+        that.$dialog.error(err.msg);
+      });
+  }
+};
+</script>
+<style scoped>
+.Complaint .list {
+  margin: 0.5rem;
+}
+.Complaint .list .qrcode {
+  margin-bottom: 0.5rem;
+  text-align: center;
+}
+.Complaint .list .qrcode img {
+  width: 5rem;
+  height: 5rem;
+}
+.Complaint .list .item {
+  display: flex;
+  line-height: 0.6rem;
+}
+.Complaint .list .item .data {
+  width: 5.2rem;
+}
+.Complaint .list .item .data .text {
+  font-weight: bold;
+}
+.Complaint .list .item .btn {
+  background-color: #c3c3c3;
+  border-radius: 0.5rem;
+  height: 0.5rem;
+  line-height: 0.5rem;
+  color: white;
+  margin-top: 0.05rem;
+  padding: 0 0.3rem;
+  right: 1rem;
+}
+
+.Complaint .submit {
+  margin-top: 2rem;
+}
+.Complaint .submit .header {
+  padding: 0.2rem 0;
+  text-align: center;
+  font-size: 0.4rem;
+  font-weight: bold;
+}
+.Complaint .submit .title input {
+  margin-top: 0.1rem;
+  width: 100%;
+  border-radius: 0.1rem;
+  border-width: 1px;
+  border-bottom: black;
+  background-color: white;
+  height: 0.6rem;
+  padding: 0.1rem;
+}
+.Complaint .submit .content {
+  margin-top: 0.3rem;
+}
+.Complaint .submit .content textarea {
+  margin-top: 0.1rem;
+  width: 100%;
+  border-radius: 0.1rem;
+  height: 4rem;
+  resize: none;
+  background-color: white;
+  padding: 0.1rem;
+}
+
+.bottom {
+  text-align: center;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+}
+.bottom .submit {
+  border-radius: 0.5rem;
+  height: 0.8rem;
+  color: white;
+  text-align: center;
+  font-size: 0.3rem;
+  line-height: 0.76rem;
+  width: 6.9rem;
+  margin: 0 auto 15px;
+}
+
+.Complaint .list .website {
+  line-height: 0.6rem;
+}
+</style>