新增名片查询功能

.config.dev.js

 module.exports = {
   domain: 'dev.ezijing.com',
-  url: 'https://project-api2.ezijing.com',
+  url: 'https://project-api.ezijing.com',
   isEnableToIphoneDebugger: false,
-  apiBaseURL: 'https://project-api2.ezijing.com/api',
+  apiBaseURL: 'https://project-api.ezijing.com/api',
   webpack: {
     externals: {
       CKEDITOR: 'window.CKEDITOR',

src/api/my.js

@@ -188,3 +188,15 @@ export function certSendCode(params) {
 export function certSearch(params) {
   return httpRequest.get('/certs/v1/prp/search', params, { headers: { 'Content-Type': 'application/json' }})
 }
+/**
+ * 获取用户名片相关信息
+ */
+ export function getCardInfo() {
+  return httpRequest.get('/certs/v1/prp/card-info', {}, { headers: { 'Content-Type': 'application/json' }})
+}
+/**
+ * 获取用户名片下载地址
+ */
+ export function getCardUrl(params) {
+  return httpRequest.post('/certs/v1/prp/get-card', params, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
+}

src/components/layout/header.vue

@@ -107,7 +107,11 @@ export default {
       this.passport.checkLoginStatus((isLogin, user = {}) => {
         this.isLogin = isLogin
         this.user = user
-        this.$router.push('/my')
+        if (this.$route.path === '/card') {
+          window.location.href = this.$route.fullPath
+        } else {
+          this.$router.push('/my')
+        }
       })
     }
   }

src/pages/card/index.vue

+<template>
+  <div class="card-container">
+    <h5>名片查询</h5>
+    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px" class="rule-form">
+      <el-form-item label="姓名" required>
+        <el-input v-model="form.name" size="small" placeholder="请输入姓名" disabled></el-input>
+      </el-form-item>
+      <el-form-item label="手机号" required>
+        <el-input v-model="form.mobile" size="small" placeholder="请输入手机号" disabled></el-input>
+      </el-form-item>
+      <el-form-item label="证书号" required>
+        <el-input v-model="form.number" size="small" placeholder="请输入证书号" disabled></el-input>
+      </el-form-item>
+      <el-form-item label="邮箱" prop="email">
+        <el-input v-model="form.email" size="small" placeholder="请输入邮箱"></el-input>
+      </el-form-item>
+      <el-form-item label="地址" prop="address">
+        <el-input v-model="form.address" size="small" placeholder="请输入地址"></el-input>
+      </el-form-item>
+      <el-form-item label="">
+        <el-button type="primary" @click="handleSubmit" size="mini">确认信息正确，查询名片</el-button>
+        <!-- <el-button v-if="cardUrl" type="primary" @click="handleDownload" size="mini" plain style="margin-left:50px;">下载名片</el-button> -->
+      </el-form-item>
+    </el-form>
+    <div class="card" v-if="cardUrl">
+      <embed :src="cardUrl">
+    </div>
+  </div>
+</template>
+<script>
+import BeforeRouter from '@/components/before/index'
+import { getCardInfo, getCardUrl } from '@/api/my'
+const EMAIL_REG = /^[A-Za-z0-9]+([_.\\-][A-Za-z0-9]+)*@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/
+const checkEmail = (rule, value, callback) => {
+  if (value) {
+    if (!EMAIL_REG.test(value)) {
+      callback(new Error('邮箱格式错误'));
+    } else {
+      callback()
+    }
+  }
+}
+export default {
+  data() {
+    return {
+      form: {
+        name: '',
+        mobile: '',
+        number: '',
+        email: '',
+        address: ''
+      },
+      rules: {
+        email: [
+          { required: true, message: '请输入邮箱', trigger: 'blur' },
+          { validator: checkEmail, trigger: 'blur' }
+        ],
+        address: { required: true, message: '请输入地址', trigger: 'blur' }
+      },
+      cardUrl: '', // https://webapp-pub.oss-cn-beijing.aliyuncs.com/certificate/13034769668.jpg
+      isLogin: false
+    }
+  },
+  created() {
+    this.needLogin()
+  },
+  methods: {
+    handleSubmit() {
+      if (!this.isLogin) {
+        this.$message.error('请先登录')
+        return
+      }
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          this.fetchCertSearch()
+        } else {
+          return false
+        }
+      })
+    },
+    handleDownload() {
+      this.fileDownload(this.cardUrl, this.cardUrl)
+    },
+    async fileDownload(fileUrl, fileName) {
+      const elink = document.createElement('a')// 创建一个a标签
+      elink.download = fileName;// 设置a标签的下载属性
+      elink.style.display = 'none';// 将a标签设置为隐藏
+      elink.href = fileUrl;// 把之前处理好的地址赋给a标签的href
+      document.body.appendChild(elink);// 将a标签添加到body中
+      elink.click();// 执行a标签的点击方法
+      // URL.revokeObjectURL(elink.href) // 下载完成释放URL 对象
+      document.body.removeChild(elink)// 移除a标签
+    },
+    fetchCardInfo() {
+      this.isLogin = true
+      getCardInfo().then(res => {
+        if (res.code === 0 && res.data && res.data.sso_id) {
+          this.form.name = res.data.name
+          this.form.mobile = res.data.mobile
+          this.form.number = res.data.number
+        }
+      })
+    },
+    fetchCertSearch() {
+      const { email, address } = this.form
+      getCardUrl({ email, address }).then(res => {
+        if (res.code === 0 && res.name === 'Bad Request') {
+          this.$message.error(res.message || '获取名片失败')
+        } else {
+          this.cardUrl = res.url
+        }
+      }).catch(err => {
+        console.log(err)
+      })
+    },
+    async needLogin() {
+      const isLogin = await BeforeRouter.loginInfo.isLogin()
+      if (isLogin) this.fetchCardInfo()
+      else this.$message.error('请先登录')
+    }
+  }
+}
+</script>
+<style scoped>
+h5{
+  font-size:20px;
+  line-height:80px;
+  text-align:center;
+}
+.rule-form{
+  width: 400px;
+  margin:0 auto;
+}
+.card{
+  width:1200px;
+  height:500px;
+  margin:0 auto;
+  padding: 10px 0 30px;
+}
+.card embed{
+  width:100%;
+  height:100%;
+}
+</style>
\ No newline at end of file

src/pages/home/index.vue

@@ -40,11 +40,11 @@
           </div>
           <div class="txt">证书查询</div>
         </li>
-        <li @click="goPage('no')">
+        <li @click="goPage('/card')">
           <div class="icon">
             <img src="../../assets/img/lang/banner-i4.png" alt="" />
           </div>
-          <div class="txt">资料下载</div>
+          <div class="txt">名片查询</div>
         </li>
       </ul>
     </div>

src/router/routes.js

@@ -81,6 +81,18 @@ export default [
       }
     ]
   },
+  {
+    path: '/card',
+    component: Layout,
+    props: { hasFooter: false },
+    children: [
+      {
+        name: 'CardQuery',
+        path: '',
+        component: () => import('@/pages/card/index.vue')
+      }
+    ]
+  },
   // 推荐信
   {
     path: '/letter',