权益查看开发

src/modules/home/components/Menu.vue

@@ -18,7 +18,7 @@ const menus: Array<{
     icon: 'https://webapp-pub.ezijing.com/project/prp-h5/home_menu_2.png'
   },
   {
-    path: '#query',
+    path: 'query',
     name: '权益查看',
     icon: 'https://webapp-pub.ezijing.com/project/prp-h5/home_menu_3.png'
   },

src/modules/query/components/BusinessCardQuery.vue

 <script setup lang="ts">
 import * as api from '../api'
-import { reactive, onMounted } from 'vue'
+import { reactive, ref, onMounted } from 'vue'
 
+//  表单数据
 const FormInfo = reactive({
   email: '',
   address: ''
 })
+// 个人信息
 const userInfo = reactive({
   name: '',
   mobile: '',
   certificate_number: ''
 })
 onMounted(() => {
+  // 获取用户个人信息
   getUserInfo()
 })
+// 名片图片
+const imgUrl = ref('')
 // 获取用户信息
 function getUserInfo() {
   api.getUserInfo().then(res => {
@@ -30,13 +35,14 @@ function handleSubmit() {
   }
   api.getBussinessCard(params).then(res => {
     console.log(res, '0000')
+    imgUrl.value = res.data.url
   })
 }
 </script>
 
 <template>
   <div class="main_content">
-    <van-form>
+    <van-form v-if="imgUrl === ''">
       <van-cell-group inset>
         <van-field
           v-model="userInfo.name"
@@ -90,27 +96,32 @@ function handleSubmit() {
         </van-button>
       </div>
     </van-form>
-    <template>
-      <div class="main_content_card"></div>
+    <div v-else>
+      <div class="main_content_card">
+        <img :src="imgUrl" alt="" />
+      </div>
       <div class="main_content_bottom"></div>
-    </template>
+    </div>
   </div>
 </template>
 <style lang="scss" scoped>
 .main_content {
-  height: 8.02rem;
   padding: 0.23rem 0.3rem 0 0.3rem;
   background: #ffffff;
   border-radius: 0.2rem;
   .main_content_card {
     margin: 0.83rem 0.38rem 0 0.34rem;
-    height: 3.22rem;
     background-color: red;
+    img {
+      width: 100%;
+      display: block;
+    }
   }
   .main_content_bottom {
+    width: 100%;
     height: 3.28rem;
+    display: block;
     margin-top: 0.66rem;
-    // background-color: red;
     background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/prp_h5/card_img.png) no-repeat;
     background-size: 100% 100%;
   }

src/modules/query/components/CertificateQuery.vue

@@ -16,9 +16,7 @@ const isShowForm = ref(false)
 function getCode() {
   console.log('00000', FormInfo.phone)
   if (FormInfo.phone === '') {
-    console.log('1111')
     Toast('请输入手机号')
-    console.log('2222')
     return
   }
 
@@ -53,6 +51,9 @@ function handleQuery() {
   api.getCertificate(params).then(res => {
     url.value = res.data.url
     console.log(res.data.url, 'res.data.url')
+    FormInfo.phone = ''
+    FormInfo.code = ''
+    isDisposed.value = false
   })
 }
 // 他人代查
@@ -72,13 +73,6 @@ function handleOther() {
           placeholder="请输入手机号"
           :rules="[{ required: true, message: '请输入手机号' }]"
         />
-        <!-- <van-field
-          v-model="FormInfo.code"
-          name="验证码"
-          label="验证码"
-          placeholder="请输入验证码"
-         
-        /> -->
         <van-field
           v-model="FormInfo.code"
           :center="true"
@@ -110,7 +104,7 @@ function handleOther() {
           @click="handleQuery"
           :disabled="FormInfo.code === '' || FormInfo.code === ''"
         >
-          确认信息正确，查询名片
+          查询证书
         </van-button>
       </div>
     </van-form>
@@ -133,6 +127,8 @@ function handleOther() {
     background-color: rgb(3, 57, 116);
   }
   .main_content_card {
+    padding: 0 0.3rem 0 0.3rem;
+
     .main_content_card_img {
       width: 100%;
       display: block;

src/utils/axios.ts

 import axios from 'axios'
 import qs from 'qs'
+import { Toast } from 'vant'
 
 const httpRequest = axios.create({
-  baseURL: 'https://project-api.ezijing.com',
+  // baseURL: 'https://project-api.ezijing.com',
   timeout: 60000,
   withCredentials: true,
   headers: {
@@ -39,7 +40,8 @@ httpRequest.interceptors.response.use(
       return Promise.reject(data)
     }
     if (data.code === 1) {
-      return Promise.reject(data)
+      Toast.fail(data.message)
+      // return Promise.reject(data)
     }
     return data
   },