feat(认证): 管理用户认证数据

src/api/user.js

@@ -10,7 +10,6 @@ import lstore from "@/plugins/lstore/lstore.js";
 
 const userState = vuex.state.USERS;
 const resArray = { data: [] };
-const noop = () => {};
 
 /**
  * 关注 || 取关 操作
@@ -191,17 +190,15 @@ export function signinByAccount(payload) {
  * 刷新用户信息
  * @author jsonleex <[email protected]>
  * @export
- * @param {Function} [callback = noop]
  * @returns {Promise<UserObject>}
  */
-export function refreshCurrentUserInfo(callback = noop) {
+export function refreshCurrentUserInfo() {
   return api.get(`/user`).then(
     ({ data }) => {
       // 保存本地
       lstore.setData("H5_CUR_USER", data);
       // 保存 vuex
       vuex.commit("SAVE_CURRENTUSER", data);
-      callback();
       return data;
     },
     err => {
@@ -238,3 +235,33 @@ export function rewardUser(userId, data) {
   const url = `/user/${userId}/new-rewards`;
   return api.post(url, data, { validateStatus: s => s === 201 });
 }
+
+/**
+ * 申请认证
+ * @author mutoe <[email protected]>
+ * @export
+ * @param {Object} payload
+ * @param {string} payload.type 'user' or 'org'
+ * @param {string} payload.name 真实姓名 or 负责人名字
+ * @param {string} payload.phone 用户联系方式 or 负责人联系方式
+ * @param {string} payload.number 身份证号码 or 营业执照注册号
+ * @param {string} payload.desc 认证描述
+ * @param {string} [payload.org_name] 企业或机构名称
+ * @param {string} [payload.org_address] 企业或机构地址
+ * @param {number[]} [payload.files]
+ * @returns
+ */
+export function postCertification(payload) {
+  const url = "/user/certification";
+  return api.post(url, payload, { validateStatus: s => s === 201 });
+}
+
+/**
+ * 获取用户认证信息
+ * @author mutoe <[email protected]>
+ * @export
+ * @returns
+ */
+export function getUserVerifyInfo() {
+  return api.get("/user/certification", { validateStatus: s => s === 200 });
+}

src/page/Profile.vue

@@ -169,10 +169,10 @@
 
 <script>
 import bus from "@/bus";
+import _ from "lodash";
 import { mapState } from "vuex";
 import { resetUserCount } from "@/api/message.js";
 import { refreshCurrentUserInfo } from "@/api/user.js";
-import { getUserVerifyInfo } from "@/api/profile.js";
 
 export default {
   name: "Profile",
@@ -187,7 +187,8 @@ export default {
       new_mutual: state => state.MESSAGE.NEW_UNREAD_COUNT.mutual || 0,
       CONFIG: state =>
         state.CONFIG || { site: { currency_name: { name: "积分" } } },
-      user: state => state.CURRENTUSER
+      user: state => state.CURRENTUSER,
+      verified: state => state.USER_VERIFY
     }),
     currency_name() {
       return this.CONFIG.site.currency_name.name;
@@ -206,31 +207,24 @@ export default {
     },
     sum() {
       return this.currency.sum;
-    },
-    verified: {
-      get() {
-        return this.user.verified;
-      },
-      set(val) {
-        this.$set(this.user, "verified", val);
-      }
     }
   },
   watch: {
-    verified() {
-      if (this.verified && this.verified.status === 0) {
+    verified(to) {
+      if (to && to.status === 0) {
         this.verifiedText = "待审核";
-      } else if (this.verified && this.verified === 1) {
+      } else if (to && to.status === 1) {
         this.verifiedText = "通过审核";
+      } else if (to && to.status === 2) {
+        this.verifiedText = "被驳回";
       } else {
         this.verifiedText = "未认证";
       }
     }
   },
   mounted() {
-    refreshCurrentUserInfo(() => {
-      this.getUserVerifyInfo();
-    });
+    refreshCurrentUserInfo();
+    this.$store.dispatch("FETCH_USER_VERIFY");
     this.$store.dispatch("GET_NEW_UNREAD_COUNT");
   },
   beforeRouteLeave(to, from, next) {
@@ -244,19 +238,15 @@ export default {
   },
   methods: {
     selectCertType() {
-      const actions = [
-        { text: "个人认证", method: () => this.certificate("user") },
-        { text: "企业认证", method: () => this.certificate("org") }
-      ];
-      bus.$emit("actionSheet", actions, "取消");
-    },
-    /**
-     * 获取用户认证信息
-     */
-    getUserVerifyInfo() {
-      getUserVerifyInfo().then(({ data }) => {
-        this.verified = data;
-      });
+      if (_.isEmpty(this.verified) || this.verified.status === 2) {
+        const actions = [
+          { text: "个人认证", method: () => this.certificate("user") },
+          { text: "企业认证", method: () => this.certificate("org") }
+        ];
+        bus.$emit("actionSheet", actions, "取消");
+      } else {
+        this.$router.push({ path: "/profile/certification" });
+      }
     },
     /**
      * 认证

src/page/profile/Certification.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="p-profile-certification">
+    <header class="m-box m-pos-f m-main m-bb1 m-head-top">
+      <div
+        class="m-box m-aln-center m-flex-none"
+        @click="goBack">
+        <v-icon type="base-back" />
+      </div>
+      <div class="m-box m-aln-center m-flex-auto m-justify-center m-head-top-title">
+        <span>{{ type === 'user' ? '个人' : '企业' }}认证</span>
+      </div>
+      <div class="m-box m-aln-center m-flex-none btn-submit"/>
+    </header>
+    <main class="m-box-model main">
+      <div
+        v-if="verified.status === 0"
+        class="info-bar">
+        认证信息审核中，我们会在7个工作日内给您答复
+      </div>
+      <div class="info-main">
+        <div class="row">
+          <span class="label">{{ formInfo[type].name }}</span>
+          <span class="value">{{ verified.data.name }}</span>
+        </div>
+        <div class="row">
+          <span class="label">{{ formInfo[type].number }}</span>
+          <span class="value">{{ verified.data.number }}</span>
+        </div>
+        <div class="row">
+          <span class="label">{{ formInfo[type].phone }}</span>
+          <span class="value">{{ verified.data.phone }}</span>
+        </div>
+        <div class="row">
+          <span class="label">{{ formInfo[type].desc }}</span>
+          <span class="value">{{ verified.data.desc }}</span>
+        </div>
+        <div class="row">
+          <span class="label">认证资料</span>
+          <span class="value">
+            <img
+              v-for="imageId in verified.data.files"
+              :key="imageId"
+              :src="getImageSrc(imageId)">
+          </span>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+/**
+ * 认证状态页面
+ */
+
+import _ from "lodash";
+import { mapState } from "vuex";
+
+const formInfo = {
+  user: {
+    name: "真实姓名",
+    number: "身份证号码",
+    phone: "手机号码",
+    desc: "认证描述"
+  },
+  org: {
+    name: "负责人",
+    number: "身份证号码",
+    phone: "手机号码",
+    desc: "认证描述",
+    orgName: "机构名称",
+    orgAddress: "机构地址"
+  }
+};
+
+export default {
+  name: "Certification",
+  data() {
+    return {
+      formInfo
+    };
+  },
+  computed: {
+    ...mapState({
+      verified: state => state.USER_VERIFY
+    }),
+    type() {
+      const { certification_name = "user" } = this.verified;
+      return certification_name;
+    }
+  },
+  watch: {
+    verified(to) {
+      console.log(to);
+      // 如果被驳回或没有数据则返回个人页面
+      if (to.id && ![0, 1].includes(to.status)) {
+        this.$router.replace("/profile");
+      }
+    }
+  },
+  created() {
+    // 如果 store 中没有数据则重新获取认证数据，用于首屏加载
+    if (_.isEmpty(this.verified) || !this.verified.id) {
+      this.$store.dispatch("FETCH_USER_VERIFY");
+    }
+  },
+  methods: {
+    /**
+     * @param {number} id
+     * @returns {string}
+     */
+    getImageSrc(id) {
+      return `${this.$http.defaults.baseURL}/files/${id}?w=250&h=185`;
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.p-profile-certification {
+  main {
+    padding-top: 0.9rem;
+
+    .info-bar {
+      background-color: #4bb893;
+      color: #fff;
+      font-size: 24px;
+      padding: 18px;
+      text-align: center;
+    }
+
+    .row {
+      font-size: 30px;
+      line-height: 36px;
+      margin-top: 78px;
+      margin-left: 30px;
+
+      .label {
+        display: inline-block;
+        width: 5em;
+        margin-right: 1em;
+        color: #999;
+        vertical-align: top;
+      }
+
+      img {
+        width: ~"calc(50% - 4em)";
+        margin-left: 4px;
+      }
+    }
+  }
+}
+</style>

src/stores/action.js

@@ -1,4 +1,6 @@
 import Api from "@/api/api.js";
+import * as userApi from "@/api/user.js";
+
 export default {
   async BOOTSTRAPPERS({ commit }) {
     const { data = {} } = await Api.get("/bootstrappers");
@@ -11,6 +13,14 @@ export default {
     });
   },
 
+  // 获取用户验证信息
+  FETCH_USER_VERIFY({ commit }) {
+    return userApi.getUserVerifyInfo().then(({ data = {} }) => {
+      commit("SAVE_USER_VERIFY", data);
+      return data;
+    });
+  },
+
   // 注销登录
   SIGN_OUT({ commit }) {
     try {

src/stores/index.js

@@ -40,6 +40,13 @@ const state = {
    */
   USERS: lstore.getData("H5_USERS") || {},
 
+  // 用户认证信息
+  USER_VERIFY: {
+    category: {},
+    data: {},
+    files: []
+  },
+
   GROUP_CATES: lstore.getData("H5_GROUP_CATES") || []
 };
 

src/stores/mutations.js

@@ -63,6 +63,11 @@ export default {
     lstore.setData("USERTAGS", state.USERTAGS);
   },
 
+  // 保存用户认证数据
+  SAVE_USER_VERIFY(state, verified) {
+    state.USER_VERIFY = verified;
+  },
+
   // 保存创建圈子时选择的位置 临时数据
   SAVE_GROUP_LOCATION(state, location) {
     state.CUR_GROUP_LOCATION = location;