From 9b8d8d0799da8fe91829f45a72e041a12c6feae5 Mon Sep 17 00:00:00 2001
From: wangxia <779219182@qq.com>
Date: Thu, 16 Mar 2023 08:21:26 +0800
Subject: [PATCH] 1

---
 src/App.vue                                        |   2 +
 src/api/userinfo.js                                |   7 +
 .../userinfo/usercenter/components/mybill.vue      | 450 ++++++++++++++++-----
 .../userinfo/usercenter/components/townsman.vue    |  85 ++--
 4 files changed, 379 insertions(+), 165 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9997b4c..92647c5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -33,6 +33,8 @@ export default {
 };
 </script>
 <style lang="less">
+@import 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/ant.css';
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
diff --git a/src/api/userinfo.js b/src/api/userinfo.js
index b577bc8..78649b9 100644
--- a/src/api/userinfo.js
+++ b/src/api/userinfo.js
@@ -48,6 +48,13 @@ export function userBillNumberApi(data) {
     params: data,
   });
 }
+// 获取跟进记录详情
+export function userBillDetailApi(data) {
+  return request({
+    url: "/yishoudan/user/apply/order/details?orderId=" + data,
+    // method: "post",
+  });
+}
 // 获取用户信息
 export function userBaseInfoApi(data) {
   return request({
diff --git a/src/components/userinfo/usercenter/components/mybill.vue b/src/components/userinfo/usercenter/components/mybill.vue
index 78c3213..0e3110f 100644
--- a/src/components/userinfo/usercenter/components/mybill.vue
+++ b/src/components/userinfo/usercenter/components/mybill.vue
@@ -2,46 +2,25 @@
   <div class="mybill-container w">
     <div class="contenttitle">
       <ul @click="resetpag">
-        <li
-          @click="pagination.status = -1"
-          :class="{ townsmanactive: pagination.status === -1 }"
-        >
+        <li @click="pagination.status = -1" :class="{ townsmanactive: pagination.status === -1 }">
           全部<span>{{ billNumber.num == 0 ? "" : billNumber.num }}</span>
         </li>
-        <li
-          @click="pagination.status = 10"
-          :class="{ townsmanactive: pagination.status === 10 }"
-        >
+        <li @click="pagination.status = 10" :class="{ townsmanactive: pagination.status === 10 }">
           待审核<span>{{ billNumber.num10 == 0 ? "" : billNumber.num10 }}</span>
         </li>
-        <li
-          @click="pagination.status = 20"
-          :class="{ townsmanactive: pagination.status === 20 }"
-        >
+        <li @click="pagination.status = 20" :class="{ townsmanactive: pagination.status === 20 }">
           待接待<span>{{ billNumber.num20 == 0 ? "" : billNumber.num20 }}</span>
         </li>
-        <li
-          @click="pagination.status = 25"
-          :class="{ townsmanactive: pagination.status === 25 }"
-        >
+        <li @click="pagination.status = 25" :class="{ townsmanactive: pagination.status === 25 }">
           待面试<span>{{ billNumber.num25 == 0 ? "" : billNumber.num25 }}</span>
         </li>
-        <li
-          @click="pagination.status = 30"
-          :class="{ townsmanactive: pagination.status === 30 }"
-        >
+        <li @click="pagination.status = 30" :class="{ townsmanactive: pagination.status === 30 }">
           待入职<span>{{ billNumber.num30 == 0 ? "" : billNumber.num30 }}</span>
         </li>
-        <li
-          @click="pagination.status = 40"
-          :class="{ townsmanactive: pagination.status === 40 }"
-        >
+        <li @click="pagination.status = 40" :class="{ townsmanactive: pagination.status === 40 }">
           跟在职<span>{{ billNumber.num40 == 0 ? "" : billNumber.num40 }}</span>
         </li>
-        <li
-          @click="pagination.status = 999"
-          :class="{ townsmanactive: pagination.status === 999 }"
-        >
+        <li @click="pagination.status = 999" :class="{ townsmanactive: pagination.status === 999 }">
           已完成<span>{{
             billNumber.num999 == 0 ? "" : billNumber.num999
           }}</span>
@@ -69,13 +48,7 @@
     <div class="contentbody">
       <div class="searchbox">
         <div class="searchinput">
-          <a-input
-            placeholder="搜索工单号/职位/姓名/电话/身份证号"
-            allowClear
-            @keyup.enter="onSearch"
-            @input="resetsearch"
-            v-model="pagination.keys"
-            ><i slot="prefix" class="iconfont icon-sousuo"></i>
+          <a-input placeholder="搜索工单号/职位/姓名/电话/身份证号" allowClear @keyup.enter="onSearch" @input="resetsearch" v-model="pagination.keys"><i slot="prefix" class="iconfont icon-sousuo"></i>
             <button slot="suffix" @click="onSearch">搜索</button>
           </a-input>
           <div>
@@ -98,22 +71,9 @@
             <!-- <button @click="statusFilter">filter</button> -->
             <li>
               <div>状态：</div>
-              <a-select
-                size="small"
-                placeholder=""
-                allowClear
-                @change="resetStatus"
-                :dropdownMatchSelectWidth="false"
-                dropdownClassName="statusclass"
-                style=""
-              >
-                <a-select-option
-                  v-for="(i, index) in orderStatus"
-                  :key="index"
-                  @click="handleChange(i)"
-                >
-                  {{ i.name }}</a-select-option
-                >
+              <a-select size="small" placeholder="" allowClear @change="resetStatus" :dropdownMatchSelectWidth="false" dropdownClassName="statusclass" style="">
+                <a-select-option v-for="(i, index) in orderStatus" :key="index" @click="handleChange(i)">
+                  {{ i.name }}</a-select-option>
               </a-select>
             </li>
           </ul>
@@ -125,12 +85,7 @@
           <a-empty class="nodata" description="暂无数据" />
         </template>
         <div class="subsetbox" v-if="!isspinning">
-          <div
-            class="infoSubset"
-            v-for="(item, index) in billList"
-            :key="item.id"
-            :class="item.isDown ? '' : 'isDownstyle'"
-          >
+          <div class="infoSubset" v-for="(item, index) in billList" :key="item.id" :class="item.isDown ? '' : 'isDownstyle'">
             <ul class="proxyInfo">
               <li>报名时间: {{ item.createTime }}</li>
               <li>工单号: {{ item.orderNum }}</li>
@@ -143,14 +98,9 @@
             <ul class="billInfo" style="">
               <li>
                 <div class="serial">{{ index + 1 }}</div>
-                <i
-                  class="iconfont icon-shenfenzheng"
-                  :style="{
+                <i class="iconfont icon-shenfenzheng" :style="{
                     color: item.idCardImageUrl !== '' ? '#ff4400cc' : '#666',
-                  }"
-                  @click.stop="showdiymodal(item)"
-                ></i
-                ><span>{{ item.userName }}/{{ item.sex }}/{{ item.age }}</span>
+                  }" @click.stop="showdiymodal(item)"></i><span>{{ item.userName }}/{{ item.sex }}/{{ item.age }}</span>
                 <span>{{ item.tel }}</span>
               </li>
               <li>
@@ -158,49 +108,23 @@
               </li>
               <li>
                 <p>{{ item.policy }}</p>
-                <div
-                  v-show="item.isunfold"
-                  class="policyControl"
-                  @click="changeStatus(item, index)"
-                  :ref="'Control' + index"
-                >
-                  <span v-show="item.controlUnfold">展开</span
-                  ><span v-show="!item.controlUnfold">收起</span>
+                <div v-show="item.isunfold" class="policyControl" @click="changeStatus(item, index)" :ref="'Control' + index">
+                  <span v-show="item.controlUnfold">展开</span><span v-show="!item.controlUnfold">收起</span>
                 </div>
               </li>
               <li>
-                <span
-                  style="color: #ff4400; cursor: pointer"
-                  @click="showDetail(item)"
-                  >{{ item.statusTag }}</span
-                ><span v-show="item.statusShowTime"
-                  >{{ item.statusTimeInfo }}: {{ item.statusShowTime }}</span
-                >
-                <span v-show="item.status == 40 || item.status == 50"
-                  >具体以出名单时间为准</span
-                >
+                <span style="color: #ff4400; cursor: pointer" @click="showDetail(item)">{{ item.statusTag }}</span><span v-show="item.statusShowTime">{{ item.statusTimeInfo }}: {{ item.statusShowTime }}</span>
+                <span v-show="item.status == 40 || item.status == 50">具体以出名单时间为准</span>
               </li>
             </ul>
           </div>
         </div>
       </div>
       <div class="pagecontainer" v-if="billList.length !== 0">
-        <a-pagination
-          :current="+pagination.pageNum"
-          :default-current="1"
-          :defaultPageSize="10"
-          :total="pagination.total"
-          @change="onChange"
-        />
+        <a-pagination :current="+pagination.pageNum" :default-current="1" :defaultPageSize="10" :total="pagination.total" @change="onChange" />
         <div class="ant-pagination-options-quick-jumper">
           <span>共{{ pagination.total }}条，</span>
-          跳至<input
-            ref="pageinput"
-            type="text"
-            @keyup.enter="inputpageChange"
-            @blur="inputpageChange"
-            style=""
-          />页
+          跳至<input ref="pageinput" type="text" @keyup.enter="inputpageChange" @blur="inputpageChange" style="" />页
         </div>
       </div>
     </div>
@@ -210,10 +134,7 @@
       </div>
       <div class="body" @mousewheel.prevent="mousewhell">
         <div class="imgbox1" v-if="idcardimg !== ''">
-          <div
-            class="imgbox"
-            :style="{ background: `url('${idcardimg}')` }"
-          ></div>
+          <div class="imgbox" :style="{ background: `url('${idcardimg}')` }"></div>
         </div>
         <div class="warningbox" v-else>
           <div>
@@ -225,23 +146,99 @@
         <!-- <img :src="idcardimg" alt="" draggable="false" /> -->
       </div>
       <div class="footer">
-        <i
-          class="iconfont icon-rotatexuanzhuan"
-          title="旋转"
-          @click="rotate(-90)"
-        ></i>
-        <i
-          class="iconfont icon-rotatexuanzhuan2"
-          title="旋转"
-          @click="rotate(90)"
-        ></i>
+        <i class="iconfont icon-rotatexuanzhuan" title="旋转" @click="rotate(-90)"></i>
+        <i class="iconfont icon-rotatexuanzhuan2" title="旋转" @click="rotate(90)"></i>
       </div>
     </div>
+    <a-modal class="billDetailModal" v-model="billDetailVisible" width="756px" @cancel="billDetailModalClose" :footer="null">
+      <div slot='title'>
+        跟进记录
+      </div>
+      <div id="progressinfo" v-if="Object.keys(currentBillDetail).length != 0">
+        <template v-for="(group,key) in currentBillDetail">
+          <div class="titleMain" :key="key">
+            <div v-if="spliceStr(key) == '1'">
+              <img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/shz.svg" alt="">
+              报名审核中
+            </div>
+            <div v-if="spliceStr(key) == '2'"> <img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/bmcg.svg" alt="">报名成功</div>
+            <div v-if="spliceStr(key) == '3'"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/mstg.svg" alt="">待入职</div>
+            <div v-if="spliceStr(key) == '4'"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/rzcg.svg" alt="">在职中</div>
+            <div v-if="spliceStr(key) == '5'"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/ylz.svg" alt="">已离职</div>
+            <div v-if="spliceStr(key) == '6'"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/bmcg.svg" alt="">已完成</div>
+            <div v-if="spliceStr(key) == '9'"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/yylz.svg" alt="">约离职</div>
+            <div v-if="spliceStr(key) == '11'"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/wei.svg" alt="">报名失败</div>
+            <div v-if="spliceStr(key) == '12'"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/yjd.svg" alt="">已接到</div>
+            <div v-if="spliceStr(key) == '13'"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/wei.svg" alt="">未接到</div>
+            <div v-if="spliceStr(key) == '14'"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/wei.svg" alt="">面试未通过</div>
+            <div v-if="spliceStr(key) == '15'"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/imgs/wei.svg" alt="">未入职</div>
+          </div>
+          <div v-for="(item,index) in group" class="ui-step-one">
+            <div class="cb-cricle"></div>
+            <div class="ui-list-info">
+              <!-- :style="padding-bottom: item.desp == '' ? '18px' : '24px';" -->
+              <div class="f12 c6" style="white-space: pre-line;" v-if="item.desp != ''">{{item.desp}}
+                <template v-if="item.policy"><span class="ml12" style="color:#1890ff;cursor: pointer;" @click="showInfo2(item.policy)">详情</span>
+                </template>
+                <a-modal title="报名信息" :visible="zzvisible" @cancel="policyModalCancel">
+                  <span class="f16 c3 mb8  mt8 display-flex">
+                    <span style="min-width:90px" class="dib tr">姓名：</span>
+                    <span class="fwb" v-if='currentBillInfo.userName'>{{currentBillInfo.userName}}</span>
+                    <span class="fwb" v-if='currentBillInfo.sex'>/{{currentBillInfo.sex == '1' || currentBillInfo.sex == '男' ? '男' : '女'}}</span>
+                    <span class="fwb" v-if='currentBillInfo.age'>/{{currentBillInfo.age}}岁</span>
+                    <span class="fwb" v-if='currentBillInfo.nation && currentBillInfo.nation!="族"'>/{{currentBillInfo.nation}}</span>
+                  </span>
+                  <span class="f16 c3 mb8 display-flex">
+                    <span style="min-width:90px" class="dib tr">电话：</span>
+                    <span style="color:#576B95;">{{currentBillInfo.tel == '' || currentBillInfo.tel == null || currentBillInfo.tel == 'undefined' ? '-' : currentBillInfo.tel}}</span>
+                  </span>
+                  <span class="f16 c3 mb8 display-flex">
+                    <span style="min-width:90px" class="dib tr">身份证号：</span>
+                    <span>{{currentBillInfo.idCard == '' || currentBillInfo.idCard == null || currentBillInfo.idCard == 'undefined' ? '-' : currentBillInfo.idCard}}</span>
+                  </span>
+                  <span class="f16 c3 mb8 display-flex">
+                    <span style="min-width:90px" class="dib tr">家庭住址：</span>
+                    <span>{{currentBillInfo.address == '' || currentBillInfo.address == null || currentBillInfo.address == 'undefined' ? '-' : currentBillInfo.address}}</span>
+                  </span>
+                  <div style="border-top: 1px dashed #eeeeee;margin-top: 10px;margin-bottom: 10px;"></div>
+                  <span class="f16 c3 mb8 display-flex">
+                    <span style="min-width:90px" class="dib tr">报名岗位：</span>
+                    <span class="fwb">{{currentBillInfo.storeJobName || '-'}}</span>
+                  </span>
+                  <span class="f16 c3 mb8 display-flex">
+                    <span style="min-width:90px" class="dib tr">政策：</span>
+                    <span>{{currentBillInfo.policy || '-'}}</span>
+                  </span>
+                  <div class="bfbutton">
+                    <a-button style="marginRight: 8px" @click="handleCancel">
+                      复制文本
+                    </a-button>
+                    <a-button type="primary" @click="handleOk">
+                      确定
+                    </a-button>
+                  </div>
+                </a-modal>
+              </div>
+              <div class="f12 c9 mt8">{{item.creator}} <span class="ml8">
+                  {{ formatDateYMDHM(item.createTime) }}
+                </span></div>
+            </div>
+          </div>
+        </template>
+      </div>
+      <div v-else>
+        <a-empty class="nodata" description="暂无数据" style="padding:40px"/>
+      </div>
+    </a-modal>
   </div>
 </template>
 
 <script>
-import { userBillApi, userBillNumberApi } from "../../../../api/userinfo";
+import {
+  userBillApi,
+  userBillNumberApi,
+  userBillDetailApi,
+} from "../../../../api/userinfo";
 import {
   getUserApplyOrderStatusById,
   isEmptyCheck,
@@ -267,6 +264,10 @@ export default {
       searchvalue: "", // 搜索框检索信息
       filterStatus: 1, // 排序状态
       saveBill: [], // 缓存的报名列表
+      billDetailVisible: false, // 工单详情显示
+      currentBillDetail: {}, // 当前点击的报名详情
+      zzvisible: false, // 跟进记录的政策信息弹出框显示
+      currentBillInfo: {}, // 当前的工单跟进详情
       pagination: {
         pageNum: 1,
         pageSize: 10,
@@ -759,11 +760,112 @@ export default {
       // console.log(e);
     },
     /* 
-      显示报名详情  
+      显示工单跟进记录弹出框
     */
     showDetail(item) {
+      userBillDetailApi(item.id).then((res) => {
+        let { data } = res;
+        if (data.status == 200) {
+          console.log(res);
+          this.currentBillDetail = data.data.records;
+        } else {
+          this.currentBillDetail = {};
+        }
+        console.log(this.currentBillDetail);
+        console.log(this.currentBillDetail.length);
+        let test = {
+        }
+        console.log(test[0]);
+        console.log(toString(this.currentBillDetail) == '{}');
+      });
+      this.billDetailVisible = true;
       console.log(item);
     },
+    /* 
+      关闭工单跟进记录弹出框
+    */
+    billDetailModalClose() {
+      this.billDetailVisible = false;
+    },
+    /* 
+      关闭政策显示框
+    */
+    policyModalCancel() {
+      this.zzvisible = false;
+    },
+    /* 
+      截出跟进记录字符串
+    */
+    spliceStr(str) {
+      return str.split("_")[1];
+    },
+    /* 
+      显示跟进记录详情弹出框
+    */
+    showInfo2(record) {
+      this.currentBillInfo = record;
+      this.zzvisible = true;
+    },
+    /* 
+    复制跟进记录详情文本
+     */
+    handleCancel() {
+      var that = this;
+
+      var text =
+        "姓名：" +
+        that.currentBillInfo.userName +
+        "/" +
+        (that.currentBillInfo.sex == 1 || that.currentBillInfo.sex == "男"
+          ? "男"
+          : "女") +
+        "/" +
+        that.currentBillInfo.age +
+        "岁" +
+        (that.currentBillInfo.nation == "族"
+          ? ""
+          : "/" + that.currentBillInfo.nation) +
+        "\n电话：" +
+        (that.currentBillInfo.tel == "" ||
+        that.currentBillInfo.tel == undefined ||
+        that.currentBillInfo.tel == null
+          ? "-"
+          : that.currentBillInfo.tel) +
+        "\n身份证号：" +
+        (that.currentBillInfo.idCard == ""
+          ? "-"
+          : that.currentBillInfo.idCard) +
+        "\n家庭地址：" +
+        (that.currentBillInfo.address == "" ||
+        that.currentBillInfo.address == undefined ||
+        that.currentBillInfo.address == null
+          ? "-"
+          : that.currentBillInfo.address) +
+        "\n报名岗位：" +
+        that.currentBillInfo.storeJobName +
+        "\n政策：" +
+        that.currentBillInfo.policy;
+
+      this.zzvisible = false;
+      this.$copyText(text).then(
+        (e) => {
+          console.log("复制成功：", e);
+          that.$message.success("复制成功");
+        },
+        (e) => {
+          console.log("复制失败：", e);
+        }
+      );
+    },
+    /* 
+      关闭跟进详情弹出框
+    */
+    handleOk() {
+      this.zzvisible = false;
+    },
+    formatDateYMDHM(time) {
+      return formatDateYMDHM(time);
+    },
   },
 };
 </script>
@@ -1307,4 +1409,128 @@ export default {
 .icon-zhengjian {
   transform: scaleX(-1.2);
 }
+.billDetailModal {
+  /deep/ .ant-modal-content {
+    .ant-modal-body {
+      max-height: 700px;
+      overflow: auto;
+      padding: 30px;
+      // 跟进信息的状态
+      #progressinfo {
+        margin: 0 !important;
+      }
+      #progressinfo > div {
+        margin-left: 24px;
+        padding-top: 0;
+        padding-bottom: 0;
+        padding-right: 16px;
+        position: relative;
+      }
+
+      .titleMain div {
+        padding-bottom: 20px;
+        padding-left: 13px;
+        border-left: 2px solid #cccccc;
+        left: 16px;
+        line-height: 20px;
+        /*height: 22px;*/
+        font-size: 16px;
+        font-weight: bold;
+        color: #333333;
+      }
+
+      .cg-cricle,
+      .cb-cricle {
+        position: absolute;
+        left: -4.5px;
+        top: 1px;
+        background: #cccccc;
+        width: 10px;
+        height: 10px;
+        border-radius: 100%;
+      }
+
+      .ui-list-info {
+        padding-bottom: 24px;
+        border-left: 2px solid #cccccc;
+        padding-left: 13px;
+        position: relative;
+        top: -3px;
+        margin-bottom: -4px;
+      }
+      #progressinfo {
+        margin-top: 24px;
+        font-size: 14px;
+        margin-bottom: 125px;
+        ul {
+          margin-bottom: 0;
+
+          li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-left: 1px solid #e8e8e8;
+            margin-left: 4px;
+            position: relative;
+            padding-bottom: 29px;
+
+            p {
+              margin-bottom: 0;
+            }
+
+            > div:first-child {
+              position: absolute;
+              width: 8px;
+              height: 8px;
+              left: -4.5px;
+              top: 0;
+              border: 2px solid #1890ff;
+              background-color: #fff;
+              border-radius: 50%;
+              box-sizing: border-box;
+            }
+
+            > div:nth-child(2) {
+              margin-left: 37px;
+              margin-top: -7px;
+            }
+
+            > div:last-child {
+              color: #ccc;
+              cursor: pointer;
+            }
+          }
+
+          li:last-child {
+            border-color: transparent;
+          }
+        }
+
+        .loadmore {
+          text-align: center;
+          color: #1890ff;
+        }
+      }
+      .titleMain > div > img {
+        position: absolute;
+        top: 0px;
+        left: -10px;
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        background-color: #ccc;
+        line-height: 20px;
+        border-radius: 50%;
+        padding: 2px;
+      }
+      .titleMain:first-of-type > div > img {
+        background-color: #ff4400;
+      }
+    }
+    .ant-modal-header {
+      background-color: #f5f5f5;
+      border-bottom: 0px solid #000;
+    }
+  }
+}
 </style>
diff --git a/src/components/userinfo/usercenter/components/townsman.vue b/src/components/userinfo/usercenter/components/townsman.vue
index 3e6883a..767ebc3 100644
--- a/src/components/userinfo/usercenter/components/townsman.vue
+++ b/src/components/userinfo/usercenter/components/townsman.vue
@@ -2,28 +2,16 @@
   <div class="townsman-container w">
     <div class="contenttitle">
       <ul @click="resetpag">
-        <li
-          @click="pagination.status = 0"
-          :class="{ townsmanactive: pagination.status === 0 }"
-        >
+        <li @click="pagination.status = 0" :class="{ townsmanactive: pagination.status === 0 }">
           全部<span>{{ statusNum.num0 == 0 ? "" : statusNum.num0 }}</span>
         </li>
-        <li
-          @click="pagination.status = 1"
-          :class="{ townsmanactive: pagination.status === 1 }"
-        >
+        <li @click="pagination.status = 1" :class="{ townsmanactive: pagination.status === 1 }">
           空闲中<span>{{ statusNum.num1 == 0 ? "" : statusNum.num1 }}</span>
         </li>
-        <li
-          @click="pagination.status = 2"
-          :class="{ townsmanactive: pagination.status === 2 }"
-        >
+        <li @click="pagination.status = 2" :class="{ townsmanactive: pagination.status === 2 }">
           报名中<span>{{ statusNum.num2 == 0 ? "" : statusNum.num2 }}</span>
         </li>
-        <li
-          @click="pagination.status = 3"
-          :class="{ townsmanactive: pagination.status === 3 }"
-        >
+        <li @click="pagination.status = 3" :class="{ townsmanactive: pagination.status === 3 }">
           在职中<span>{{ statusNum.num3 == 0 ? "" : statusNum.num3 }}</span>
         </li>
       </ul>
@@ -31,12 +19,7 @@
     <div class="contentbody">
       <div class="searchbox">
         <div class="searchinput">
-          <a-input
-            placeholder="请输入老乡姓名/身份证号"
-            @keyup.enter="onSearch"
-            @input="resetsearch"
-            v-model="pagination.keys"
-            ><i slot="prefix" class="iconfont icon-sousuo"></i>
+          <a-input placeholder="请输入老乡姓名/身份证号" @keyup.enter="onSearch" @input="resetsearch" v-model="pagination.keys"><i slot="prefix" class="iconfont icon-sousuo"></i>
             <button slot="suffix" @click="onSearch">搜索</button>
           </a-input>
         </div>
@@ -45,46 +28,28 @@
           <button @click="changepage(1)">下一页</button>
         </div>
       </div>
-      <a-table
-        :columns="columns"
-        :data-source="data"
-        :pagination="false"
-        @change="onChange"
-        :loading="{
+      <a-table :columns="columns" :data-source="data" :pagination="false" @change="onChange" :loading="{
           spinning: isspinning,
           tip: '加载中',
           wrapperClassName: 'spinstyle',
-        }"
-        :locale="tablenodata"
-        :rowKey="(record) => record.index"
-      >
+        }" :locale="tablenodata" :rowKey="(record) => record.index">
         <a slot="name" slot-scope="text">{{ text }}</a>
-        <a
-          slot="userDetail"
-          style="color: #ff4400"
-          slot-scope="text, text1"
-          @click="toDetail(text1)"
-          >详情</a
-        >
+        <a slot="userDetail" style="color: #ff4400" slot-scope="text, text1" @click="toDetail(text1)">详情</a>
       </a-table>
       <div class="pagecontainer">
-        <a-pagination
-          :current="+pagination.pageNum"
-          :default-current="1"
-          :defaultPageSize="8"
-          :total="pagination.total"
-          @change="onChange"
-        />
+        <a-pagination :current="+pagination.pageNum" :default-current="1" :defaultPageSize="8" :total="pagination.total" @change="onChange" />
         <div class="ant-pagination-options-quick-jumper">
-          <span>共{{ pagination.total }}条，</span>跳至<input
-            ref="pageinput"
-            type="text"
-            @keyup.enter="inputpageChange"
-            @blur="inputpageChange"
-          />页
+          <span>共{{ pagination.total }}条，</span>跳至<input ref="pageinput" type="text" @keyup.enter="inputpageChange" @blur="inputpageChange" />页
         </div>
       </div>
     </div>
+    <!-- 老乡详情的弹出框 -->
+    <a-modal class="townsmanDetailModal" transitionName="" v-model="townsmanDetailVisible" width="756px" @cancel="townsmanDetailModalClose" :footer="null">
+      <div slot='title'>
+        老乡详情
+      </div>
+
+    </a-modal>
   </div>
 </template>
 
@@ -136,6 +101,7 @@ export default {
         num3: 0,
       },
       data: [],
+      townsmanDetailVisible: false, // 控制详情弹出框的显示
     };
   },
   // 计算属性
@@ -351,11 +317,18 @@ export default {
       this.getTownsman();
     },
     /* 
-    前往详情页
+    弹出详情页
     */
     toDetail(e) {
+      this.townsmanDetailVisible = true;
       console.log(e);
     },
+    /* 
+      关闭详情弹出框
+    */
+    townsmanDetailModalClose() {
+      this.townsmanDetailVisible = false;
+    },
   },
 };
 </script>
@@ -571,4 +544,10 @@ export default {
 /deep/ .ant-table-column-sorter-inner {
   height: 16px !important;
 }
+.townsmanDetailModal {
+  /deep/ .ant-modal-header {
+    background-color: #f5f5f5;
+    border-bottom: 0px solid #000;
+  }
+}
 </style>