+保安证改成大弹窗

liuyg

2021-12-23 7b66a6de088f85e706a8cfacd49e92200fab006b

 pages/securityStaff/information.vue

@@ -49,8 +49,8 @@
               ripple-bg-color="#fff">查看证件</u-button>
         </view>
      </view>
      <u-popup class="certificates" v-model="showi" mode="bottom" border-radius="10">
         <view class="certificatesnj">
      <!--<u-popup class="certificates" v-model="showi" mode="bottom" border-radius="10">
          <view class="certificatesnj">
            <view class="titleonce">
               保安员证
            </view>
@@ -73,6 +73,21 @@
            <u-image class="img" width="150rpx" height="150rpx" :src="datalist.avatar">
               <view slot="error" style="font-size: 1rem;">暂无证件</view>
            </u-image>
         </view> 
      </u-popup>-->
      <u-popup class="certificates-ourScreen" :closeable="true" v-model="showi" mode="bottom" border-radius="50">
         <view class="certificates-screen-in">
            <view class="se-sc-in-head">
               <image class="se-sc-in-img" src="./sers.png" mode=""></image>
            </view>
            <view class="c-s-in-once" v-for="(item,index) in sfxx" :key="item.value +index">
               <view class="c-s-in-o-title">
                  {{item.label}}
               </view>
               <view class="c-s-in-o-center">
                  {{item.value}}
               </view>
            </view>
         </view>
      </u-popup>
      <u-popup v-model="showc" mode="bottom" border-radius="10">
@@ -135,9 +150,58 @@
               // fztime: "2014.04.20",
               // politicaloutlook: '党员'
            },
            showi: false,
            showi: true,
            showc: false,
            cylist: []
            cylist: [],
            sfxx: [{
               label: '姓名:',
               prop: 'realName',
               value: "",
            }, {
               label: '性别:',
               prop: 'sex',
               value: ""
            }, {
               label: '联系电话:',
               prop: 'phone',
               value: ""
            }, {
               label: '身份证号:',
               prop: 'cardid',
               value: ""
            }, {
               label: '出身日期:',
               prop: 'birthday',
               value: ""
            }, {
               label: '年龄:',
               prop: 'age',
               value: ""
            }, {
               label: '发证机关:',
               prop: 'fazheng',
               value: ""
            }, {
               label: '保安证编号:',
               prop: 'securitynumber',
               value: ""
            }, {
               label: '公司名称:',
               prop: 'deptName',
               value: ""
            }, {
               label: '派遣单位名称:',
               prop: 'dispatchUnitName',
               value: ""
            }, {
               label: '派遣开始时间:',
               prop: 'dispatchStartTime',
               value: ""
            }, {
               label: '派遣结束时间:',
               prop: 'dispatchEndTime',
               value: ""
            }]
         }
      },
      onLoad(event) {
@@ -145,7 +209,20 @@
         var that = this;

         this.datalist = JSON.parse(decodeURIComponent(event.detailData))

         // console.log(this.datalist)
         let num = this.sfxx.length;
         for (let k = 1; k < num; k++) {
            if (this.datalist[this.sfxx[k].prop]) {
               if (this.sfxx[k].prop == "sex") {
                  this.sfxx[k].value = this.datalist[this.sfxx[k].prop] == 1 ? "男" : "女"
               } else {
                  this.sfxx[k].value = this.datalist[this.sfxx[k].prop]
               }
            } else if (this.sfxx[k].prop == "fazheng") {
               let frist = this.datalist.securitynumber.split("")[0];
               this.sfxx[k].value = frist == "赣" ? "南昌市公安局" : "";
            }
         }
      },
      methods: {
         openCertificates() {
@@ -172,8 +249,8 @@
                  a.push(...d)
                  // }
                  that.cylist = a;
						
                  console.log(that.cylist, 456)

                  // console.log(that.cylist, 456)
               }

            })
@@ -272,8 +349,6 @@
      }

      .certificates {
			

         .img {
            position: absolute;
            top: 3rem;
@@ -304,6 +379,62 @@
         }
      }

      .certificates-ourScreen {
         width: 100%;
         height: 100%;

         .certificates-screen-in {
            border-radius: 40px;
            width: 100%;
            height: 100%;

            // border: 1px solid red;
            // background-color: #fff;
            .se-sc-in-head {
               margin-top: 20px;
               width: 100%;
               height: 140px;
               display: flex;
               align-items: center;
               justify-content: center;
               // border: 1px solid red;

               .se-sc-in-img {
                  width: 80%;
                  height: 120px;
               }
            }

            .c-s-in-once {
               width: 100%;
               height: auto;
               padding: 12px 15px;
               border-bottom: 1px solid rgba(220, 220, 220, 0.4);
               display: flex;
               align-items: center;
               justify-content: space-between;
               // font-size: 16px;
               font-weight: 500;
               color: #939393;

               .c-s-in-o-title {
                  width: 35%;
                  font-size: 0.8rem;
                  font-weight: 550;
                  // margin-left: 4%;
                  // border: 1px solid red;
               }

               .c-s-in-o-center {
                  width: 65%;
                  font-size: 0.85rem;
                  // border: 1px solid red;
                  text-align: right;
               }
            }
         }
      }

      .Congye {
         padding: 30rpx;
         max-height: 70vh;