HS_MZAP/src/views/placeManage/placePersoninfo.vue

<template>
  <div class="banner">
    <h2>扎实提升“三力”</h2>
    <h2>深入推进“三化”</h2>
    <h2>坚持“三个思维”</h2>
  </div>
  <div class="content">
    <div class="itemInfo">
    <h3 style="color: #40abf4">个人信息-{{data.data.name}}</h3>
      <van-row justify="space-between">
        <van-col span="14">
          <van-row class="item">
            <van-col span="24">
              <van-row justify="space-between">
                <van-col span="8"> 姓名： </van-col>
                <van-col span="8" style="text-align: right"> {{data.data.name}} </van-col>
              </van-row>
            </van-col>
          </van-row>
          <van-row class="item">
            <van-col span="24">
              <van-row justify="space-between">
                <van-col span="8"> 性别： </van-col>
                <van-col span="8" style="text-align: right"> {{data.data.sex == 1?'男':'女'}} </van-col>
              </van-row>
            </van-col>
          </van-row>
          <van-row class="item">
            <van-col span="24">
              <van-row justify="space-between">
                <van-col span="12"> 证件类型： </van-col>
                <van-col span="6" style="text-align: right"> {{data.data.idType==1?'身份证':'其他'}} </van-col>
              </van-row>
            </van-col>
          </van-row>
        </van-col>
        <van-col span="8">
          <img class="personImg" :src="data.data.workPicture" alt="" />
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-col span="10"> 证件号码： </van-col>
            <van-col span="14" style="text-align: right">
              {{data.data.idcard}}
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-col span="10"> 手机号： </van-col>
            <van-col span="14" style="text-align: right">
              {{data.data.phone}}
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-col span="10"> 所属场所： </van-col>
            <van-col span="14" style="text-align: right">
              {{data.data.locationName}}
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-col span="10"> 人员类型： </van-col>
            <van-col span="14" style="text-align: right">
              <span v-if="data.data.personnelType==1">宗教从业人员</span>
              <span v-else-if="data.data.personnelType==2">民族场所从业人员</span>
              <span v-else-if="data.data.personnelType==3">教职人员</span>
              <span v-else-if="data.data.personnelType==4">固定信徒</span>
              <span v-else-if="data.data.personnelType==5">场所居住人员</span>
              <span v-else-if="data.data.personnelType==6">境外人员</span>
              <span v-else-if="data.data.personnelType==7">非本市人员</span>
              <span v-else-if="data.data.personnelType==8">非本教人员</span>
              <span v-else-if="data.data.personnelType==9">新增信徒人员</span>
              <span v-else-if="data.data.personnelType==10">临时人员</span>
              <span v-else-if="data.data.personnelType==11">异常人员</span>
              <span v-else-if="data.data.personnelType==12">邪教人员</span>
              <span v-else-if="data.data.personnelType==13">管理人员</span>
              <span v-else-if="data.data.personnelType==14">全能神离家人员</span>
              <span v-else-if="data.data.personnelType==15">全能神骨干人员</span>
              <span v-else-if="data.data.personnelType==16">网络运营人员</span>
              <span v-else-if="data.data.personnelType==17">涉政有害活动人员</span>
              <span v-else-if="data.data.personnelType==18">境内外记者</span>
              <span v-else-if="data.data.personnelType==19">境外法轮功骨干人员</span>
              <span v-else-if="data.data.personnelType==20">其他邪教骨干人员</span>
              <span v-else-if="data.data.personnelType==21">心灵法门骨干人员</span>
              <span v-else>“精神控制”有害培训骨干人员</span>
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-col span="10"> 从业类型： </van-col>
            <van-col span="14" style="text-align: right">
              <span v-if="data.data.typeOfEmployees==1">场所负责人</span>
              <span v-if="data.data.typeOfEmployees==2">堂管会成员</span>
              <span v-if="data.data.typeOfEmployees==3">小组负责人</span>
              <span v-if="data.data.typeOfEmployees==4">财会</span>
              <span v-if="data.data.typeOfEmployees==5">义工</span>
              <span v-if="data.data.typeOfEmployees==6">保安</span>
              <span v-if="data.data.typeOfEmployees==7">信息审核员</span>
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-col span="10"> 籍贯： </van-col>
            <van-col span="14" style="text-align: right">
              {{data.data.nativePlace}}
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-col span="10"> 现居地： </van-col>
            <van-col span="14" style="text-align: right">
              {{data.data.currentResidence}}
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <van-row class="item">
        <van-col span="24">
          <van-row justify="space-between">
            <van-col span="10"> 详细地址： </van-col>
            <van-col span="14" style="text-align: right">
              {{data.data.currentResidenceDetail}}
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <h3 style="color: #40abf4;margin-top:10px;">拓展信息</h3>
      <van-row class="item" v-for="(item,index) in data.data.userManagenmetDetailsDTOList" :key="index">
        <van-col span="24" v-if="item.dataType === '1' && item.dataDictionary==''">
          <van-row justify="space-between">
            <van-col span="10"> {{item.chineseName}} </van-col>
            <van-col span="14" style="text-align: right">
              {{item.value}}
            </van-col>
          </van-row>
        </van-col>
        <van-col span="24" v-if="item.dataType === '1' && item.dataDictionary=='hs_religion_type'">
          <van-row justify="space-between">
            <van-col span="10"> {{item.chineseName}} </van-col>
            <van-col span="14" style="text-align: right">
              <span v-if="item.value==1">伊斯兰教</span>
              <span v-if="item.value==2">基督教</span>
              <span v-if="item.value==3">天主教</span>
              <span v-if="item.value==4">佛教</span>
              <span v-if="item.value==5">道教</span>
            </van-col>
          </van-row>
        </van-col>
        <van-col span="24" v-if="item.dataType === '1' && item.dataDictionary=='hs_faculty_type'">
          <van-row justify="space-between">
            <van-col span="10"> {{item.chineseName}} </van-col>
            <van-col span="14" style="text-align: right">
              <span v-if="item.value==1">负责人</span>
              <span v-if="item.value==2">牧师</span>
              <span v-if="item.value==3">长老</span>
              <span v-if="item.value==4">传道员</span>
              <span v-if="item.value==5">神学生</span>
            </van-col>
          </van-row>
        </van-col>
        <van-col span="24" v-if="item.dataType === '5'">
          <van-row justify="space-between">
            <van-col span="10"> {{item.chineseName}} </van-col>
            <van-col span="14" style="text-align: right">
              {{item.value}}
            </van-col>
          </van-row>
        </van-col>
        <van-col span="24" v-if="item.dataType === '6'">
          <van-row justify="space-between">
            <van-col span="10"> {{item.chineseName}} </van-col>
            <van-col span="14" style="text-align: right">
              {{item.value}}
            </van-col>
          </van-row>
        </van-col>
        <van-col span="24" v-if="item.dataType === '4'">
          <van-row>
            <van-col span="10"> 证书照片： </van-col>
          </van-row>
          <van-row>
            <van-col span="10">
                <img class="personImg" :src="item.value" alt="" />
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import {onMounted, reactive,ref} from "vue"
export default {
  setup(){
    const data = reactive({
      //个人数据
      data:{},
    })
    //数据接收
    const router = useRouter();
    onMounted(()=>{
      var item = JSON.parse(router.currentRoute.value.query.data)
      data.data = item;
    })
    //返回
    const goback = () => {
      history.back();
    };
    return{
      goback,
      data
    }
  }
};
</script>

<style lang="less">
body,
html {
  margin: 0;
  padding: 0;
  background-color: #f2f2f2;
}
.van-nav-bar {
  background-color: #36a7f3;
  .van-nav-bar__title {
    color: #fff;
  }
  .van-badge__wrapper {
    color: #fff;
  }
}
.banner {
  background-color: #36a7f3;
  padding: 20px 50px 40px 50px;
  color: #fff;
  h2 {
    &:nth-child(1) {
      margin-top: 0px;
      text-align: left;
    }
    &:nth-child(2) {
      text-align: center;
    }
    &:nth-child(3) {
      text-align: right;
    }
  }
}
.content {
  position: fixed;
  width: 85%;
  top: 140px;
  left: 50%;
  padding: 20px 10px;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 10px;
  font-size: 16px;
  height: 540px;
  overflow: auto;
  h3 {
    margin: 0;
    padding: 0;
  }
  .itemInfo{
    height: 100%;
    .item{
        padding: 15px 0;
        border-bottom: 1px solid #f2f2f2;
        .van-col{
            .van-row{
                .van-col{
                    &:nth-child(2){
                        color: #7f7f7f;
                    }
                }
            }
        }
    }
    .personImg{
        width: 100%;
        height: 100%;
    }
  }
}
</style>