<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>电子工牌</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" type="text/css" href="../../assets/css/weui.css" />
  <link rel="stylesheet" type="text/css" href="../../assets/css/weuix.css" />
  <link rel="stylesheet" type="text/css" href="../../../bi/css/vant.css" />

  <!-- vue -->
  <script src="../../../bi/js/vue.js"></script>
  <script src="../../../bi/js/vant.min.js"></script>
  <!--全局配置-->
  <script src="../../../config.js"></script>
</head>
<body style="background-color: #f1f1f1;">
<div id="app" class="dy-card" >
  <van-cell-group>
    <van-cell title="照片">
      <van-image
        width="50px"
        height="50px"
        :src="imgUrl"
        @click="fnImagePreview(imgUrl,0)"
      ></van-image>
    </van-cell>
    <van-cell title="姓名" :value="pd.NAME"></van-cell>
    <van-cell title="性别" :value="gender"></van-cell>
    <van-cell title="年龄" :value="pd.AGE"></van-cell>
    <van-cell title="所属单位" :value="pd.RELEVANT_UNIT_NAME"></van-cell>
    <van-cell title="职务" :value="pd.POST_NAME"></van-cell>
    <van-cell title="联系电话" :value="pd.PHONE"></van-cell>
    <van-cell title="流动范围" :value="pd.TRAIN_AREA"></van-cell>
  </van-cell-group>
  <van-image-preview v-model="show" :images="images" :start-position="startPosition">
  </van-image-preview>
</div>
<script type="text/javascript" src="../../assets/js/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: '#app',
    data:{
      USER_ID : '',
      pd:{
        NAME: '',
        SEX: '',
        AGE: '',
        RELEVANT_UNIT_NAME: '',
        POST_NAME: '',
        PHONE: '',
        TRAIN_AREA: ''
      },
      show: false,
      startPosition: 0,
      images: [],
      imgUrl: '',
      gender: ''
    },
    methods: {
      //初始执行
      init() {
        this.USER_ID = this.getUrlKey('USER_ID');
        this.getData();
      },
      getData: function(){
        var _this = this;
        _this.loading = true;
        $.ajax({
          xhrFields: {
            withCredentials: true
          },
          type: "POST",
          url: config.httpurl +'/app/user/getFloatPersonDetailById' ,
          dataType: 'json',
          data: {
            USER_ID: _this.USER_ID,
          },
          success: function(data){
            _this.pd = Object.assign(_this.pd, data.eCard)
            if (_this.pd.PHOTO) {
              _this.imgUrl = config.fileUrl + _this.pd.PHOTO
            } else {
              _this.imgUrl = 'https://img01.yzcdn.cn/vant/cat.jpeg'
            }
            if (_this.pd.SEX == '0') {
              _this.gender = '男'
            } else if (_this.pd.SEX == '1') {
              _this.gender = '女'
            }
            /* _this.pd.NAME = data.eCard.NAME
            _this.pd.SEX = data.eCard.SEX
            _this.pd.AGE = data.eCard.AGE
            _this.pd.RELEVANT_UNIT_NAME = data.eCard.RELEVANT_UNIT_NAME
            _this.pd.POST_NAME = data.eCard.POST_NAME
            _this.pd.PHONE = data.eCard.PHONE
            _this.pd.TRAIN_AREA = data.eCard.TRAIN_AREA */
          }
        })
      },
      //根据url参数名称获取参数值
      getUrlKey: function (name) {
        return decodeURIComponent(
          (new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null;
      },
      fnImagePreview(images, startPosition) {
        this.images = [images];
        this.startPosition = startPosition
        this.show = true
      },
    },
    mounted(){
      this.init();
    }
  })

  function back(e) {
    window.history.go(-1);
  }
</script>
</body>
</html>
