智慧保安互联网APP
shuishen
2021-07-30 d4e6d3f7befe2586257eadfc8fd945e799ad6084
pages/securityStaff/information.vue
@@ -40,18 +40,81 @@
            <textarea name="" id=""  disabled="disabled" :placeholder="datalist.punishment"></textarea> -->
         </view>
         <view class="once">
            <u-button class="ubut" type="success" @click="openCongye" size="medium" :ripple="true"
               ripple-bg-color="#fff">从业单位</u-button>
            <u-button class="ubut" type="success" @click="openCertificates" size="medium" :ripple="true"
               ripple-bg-color="#fff">查看证件</u-button>
         </view>
      </view>
      <u-popup v-model="show" mode="bottom" length="30%" border-radius="10">
         <view>证件详情</view>
      <u-popup class="certificates" v-model="showi" mode="bottom" border-radius="10">
         <view class="certificatesnj">
            <view class="titleonce">
               保安员证
            </view>
            <view class="once">
               姓名: <view class="o-once"> {{datalist.name}}</view>
            </view>
            <view class="once">
               性别:<view class="o-once"> {{datalist.age}}</view>
            </view>
            <view class="once" >
               编号:<view class="o-once"> {{datalist.baoanzheng}}</view>
            </view>
            <view class="once" style="margin-bottom: 1rem;">
               发证机关:<view class="o-once" style="margin-right: 1rem;"> {{datalist.fzobj}}</view>
               发证日期:<view class="o-once">{{datalist.fztime}}</view>
            </view>
            <u-image class="img" width="150rpx" height="150rpx" :src="datalist.imgSrc">
               <view slot="error" style="font-size: 1rem;">暂无图片</view>
            </u-image>
         </view>
      </u-popup>
      <u-popup v-model="showc" mode="bottom" border-radius="10">
         <view class="">
            <u-empty text="没有数据" :color="'#0BB9C8'"  :icon-color="'#0BB9C8'" mode="list" :show="cylist.length == 0"></u-empty>
         </view>
         <view class="Congye">
            <u-time-line>
               <u-time-line-item nodeTop="2" v-for="(item,index) in cylist" :key="index">
                  <!-- 此处自定义了左边内容,用一个图标替代 -->
                  <template v-slot:node>
                     <view class="u-node" style="background: #19be6b;">
                        <!-- 此处为uView的icon组件 -->
                        <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
                     </view>
                  </template>
                  <template v-slot:content>
                     <view>
                        <view class="u-order-title">在职时间:<view class="titles">
                              {{item.entryTime.slice(0,11)}}至 {{item.departureTime.slice(0,11)}}
                           </view>
                        </view>
                        <view class="u-order-desc">公司名称:{{item.companyname}}</view>
                        <view class="u-order-desc">岗位:{{item.post}}</view>
                        <view class="u-order-desc">岗位职责:{{item.responsibilities}}</view>
                        <view class="u-order-time">离职原因:{{item.leaving}}</view>
                     </view>
                  </template>
               </u-time-line-item>
               <!-- <u-time-line-item>
                  <template v-slot:content>
                     <view>
                        <view class="u-order-desc">【深圳市】日照香炉生紫烟,遥看瀑布挂前川,飞流直下三千尺,疑是银河落九天。</view>
                        <view class="u-order-time">2019-12-06 22:30</view>
                     </view>
                  </template>
               </u-time-line-item> -->
            </u-time-line>
         </view>
      </u-popup>
   </view>
</template>
<script>
   import axios from "axios"
   export default {
      data() {
         return {
@@ -61,20 +124,52 @@
               obj: '适普科技',
               honor: '扶老奶奶过马路',
               punishment: '不看红绿灯',
               imgSrc: "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
               imgSrc: "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png",
               cardid: 342,
               baoanzheng: "赣06284538",
               fzobj: '南昌市公安局',
               fztime: "2014.04.20"
            },
            show: false
            showi: false,
            showc: false,
            cylist: {
            }
         }
      },
      methods: {
         openCertificates() {
            this.show = true;
            this.showi = true;
         },
         openCongye() {
            this.showc = true;
         },
         getcongye() {
            var url = 'http://192.168.0.109:81/experience/selectExperienceInfo',
               data = {
                  cardid: this.datalist.cardid
               },
               that = this;
            axios({
               url: url,
               params: data
            }).then(res => {
               var d = res.data.data;
               var a = []
               // for(var k = 1 ;k < 30; k++){
                  a.push(...d)
               // }
               console.log(d);
               that.cylist = a;
            })
         }
      },
      mounted() {
         if (this.$route.query.data != undefined) {
            this.datalist = JSON.parse(this.$route.query.data);
         }
         this.getcongye();
      }
   }
</script>
@@ -111,12 +206,89 @@
         .once:nth-child(5) {
            height: 88px;
         }
         .once:nth-child(7){
         .once:nth-child(7) {
            background-color: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
         }
      }
      .certificatesnj {
         background-image: url(../../static/images/salf/bazbj.png);
         background-size:100%;
      }
      .certificates {
         .img {
            position: absolute;
            top: 3rem;
            right: 1.5rem;
         }
         .titleonce {
            font-size: 1.3rem;
            width: 100%;
            height: 2.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            letter-spacing: 1rem;
            font-weight: 500;
         }
         .once {
            width: 100%;
            height: auto;
            line-height: 2rem;
            font-size: 0.8rem;
            padding: 0 2.5% 0 2.5%;
            .o-once {
               display: inline-block;
               font-size: 0.86rem;
               font-weight: 600;
            }
         }
      }
      .Congye {
         padding: 30rpx;
         max-height: 70vh;
         overflow: scroll;
      }
   }
   .u-node {
      width: 44rpx;
      height: 44rpx;
      border-radius: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #d0d0d0;
   }
   .u-order-title {
      color: #333333;
      font-weight: bold;
      font-size: 32rpx;
      .titles {
         font-size: 26rpx;
      }
   }
   .u-order-desc {
      // color: rgb(150, 150, 150);
      font-size: 28rpx;
      margin-bottom: 6rpx;
   }
   .u-order-time {
      // color: rgb(200, 200, 200);
      font-size: 26rpx;
   }
</style>