jiangping
2024-06-07 73af3ed9fbcc616cdecc739fc4307163c19c5764
h5/n_pages/visitorApplication/visitorApplication.vue
@@ -1,1220 +1,1361 @@
<template>
   <view class="visit">
      <view class="head">拜访信息</view>
      <view class="list">
         <view class="list_item">
            <view class="list_item_label">
               <text>被访人姓名</text>
               <text>*</text>
            </view>
            <view class="list_item_content" @click="show1 = true">
               <text :style="{color: form1.receptMemberName ? '#000000' : ''}">{{form1.receptMemberName ? form1.receptMemberName : '请选择'}}</text>
               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
            </view>
         </view>
         <view class="list_item">
            <view class="list_item_label">
               <text>入厂时间</text>
               <text>*</text>
            </view>
            <view class="list_item_content" @click="show4 = true">
               <text :style="{color: form1.starttime ? '#000000' : ''}">{{form1.starttime ? form1.starttime : '请选择'}}</text>
               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
            </view>
         </view>
         <view class="list_item">
            <view class="list_item_label">
               <text>离厂时间</text>
               <text>*</text>
            </view>
            <view class="list_item_content" @click="show5 = true">
               <text :style="{color: form1.endtime ? '#000000' : ''}">{{form1.endtime ? form1.endtime : '请选择'}}</text>
               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
            </view>
         </view>
         <view class="list_item" @click="show = true">
            <view class="list_item_label">
               <text>访问门禁</text>
               <text>*</text>
            </view>
            <view class="list_item_content">
               <text :style="{color: form1.doorSelectName ? '#000000' : ''}">{{form1.doorSelectName ? form1.doorSelectName : '请选择'}}</text>
               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
            </view>
         </view>
         <view class="list_item">
            <view class="list_item_label">
               <text>拜访事由</text>
               <text></text>
            </view>
            <view class="list_item_content">
               <input type="text" v-model="form1.reason" placeholder="请输入来访事由" placeholder-style="color: #999999;" />
            </view>
         </view>
      </view>
      <view class="list">
         <view class="list_item">
            <view class="list_item_label">
               <text>访客姓名</text>
               <text>*</text>
            </view>
            <view class="list_item_content">
               <input type="text" v-model="form1.reason" placeholder="请输入访客的真实姓名" placeholder-style="color: #999999;" />
            </view>
         </view>
         <view class="list_item">
            <view class="list_item_label">
               <text>访客手机号</text>
               <text>*</text>
            </view>
            <view class="list_item_content">
               <input type="text" v-model="form1.reason" placeholder="请输入访客的手机号" placeholder-style="color: #999999;" />
            </view>
         </view>
         <view class="list_item">
            <view class="list_item_label">
               <text>证件类型</text>
               <text>*</text>
            </view>
            <view class="list_item_content" @click="show4 = true">
               <text :style="{color: form1.starttime ? '#000000' : ''}">{{form1.starttime ? form1.starttime : '请选择'}}</text>
               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
            </view>
         </view>
         <view class="list_item">
            <view class="list_item_label">
               <text>证件号码</text>
               <text>*</text>
            </view>
            <view class="list_item_content">
               <input type="text" v-model="form1.reason" placeholder="请输入访客的证件号码" placeholder-style="color: #999999;" />
            </view>
         </view>
         <view class="list_item">
            <view class="list_item_label">
               <text>公司名称</text>
            </view>
            <view class="list_item_content">
               <input type="text" v-model="form1.reason" placeholder="请输入访客的公司名称" placeholder-style="color: #999999;" />
            </view>
         </view>
         <view class="list_item">
            <view class="list_item_label">
               <text>随行车辆</text>
            </view>
            <view class="list_item_content">
               <input type="text" v-model="form1.reason" placeholder="请输入车牌号" placeholder-style="color: #999999;" />
            </view>
         </view>
         <view class="cell" style="padding: 24rpx 0;">
            <view class="title1">
               <text class="title1_a">人脸照片<b>*</b></text>
               <text class="title1_b">1、请提供五官清晰,人脸居中的正面人脸免</text>
               <text class="title1_b">2、照片无逆光、无PS、无过度美颜处理</text>
            </view>
            <view class="content">
               <view class="content_uplaod" @click="upload('faceImg')">
                  <u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>
               </view>
               <!-- <view class="content_uplaod" @click="upload('faceImg')" v-else>
  <view class="visit">
    <view class="head">拜访信息</view>
    <view class="list">
      <view class="list_item">
        <view class="list_item_label">
          <text>被访人姓名</text>
          <text>*</text>
        </view>
        <view class="list_item_content" @click="show1 = true">
          <text :style="{ color: form1.receptMemberName ? '#000000' : '' }">{{
            form1.receptMemberName ? form1.receptMemberName : "请选择"
          }}</text>
          <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
        </view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>入园时间</text>
          <text>*</text>
        </view>
        <view class="list_item_content" @click="show4 = true">
          <text :style="{ color: form1.starttime ? '#000000' : '' }">{{
            form1.starttime ? form1.starttime : "请选择"
          }}</text>
          <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
        </view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>离园时间</text>
          <text>*</text>
        </view>
        <view class="list_item_content" @click="show5 = true">
          <text :style="{ color: form1.endtime ? '#000000' : '' }">{{
            form1.endtime ? form1.endtime : "请选择"
          }}</text>
          <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
        </view>
      </view>
      <view class="list_item" @click="show = true">
        <view class="list_item_label">
          <text>访问门禁</text>
          <text>*</text>
        </view>
        <view class="list_item_content">
          <text :style="{ color: form1.doorSelectName ? '#000000' : '' }">{{
            form1.doorSelectName ? form1.doorSelectName : "请选择"
          }}</text>
          <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
        </view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>拜访事由</text>
          <text></text>
        </view>
        <view class="list_item_content">
          <input
            type="text"
            v-model="form1.reason"
            placeholder="请输入来访事由"
            placeholder-style="color: #999999;"
          />
        </view>
      </view>
    </view>
    <view class="list">
      <view class="list_item">
        <view class="list_item_label">
          <text>访客姓名</text>
          <text>*</text>
        </view>
        <view class="list_item_content">
          <input
            type="text"
            v-model="form1.reason"
            placeholder="请输入访客的真实姓名"
            placeholder-style="color: #999999;"
          />
        </view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>访客手机号</text>
          <text>*</text>
        </view>
        <view class="list_item_content">
          <input
            type="text"
            v-model="form1.reason"
            placeholder="请输入访客的手机号"
            placeholder-style="color: #999999;"
          />
        </view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>证件类型</text>
          <text>*</text>
        </view>
        <view class="list_item_content" @click="show4 = true">
          <text :style="{ color: form1.starttime ? '#000000' : '' }">{{
            form1.starttime ? form1.starttime : "请选择"
          }}</text>
          <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
        </view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>证件号码</text>
          <text>*</text>
        </view>
        <view class="list_item_content">
          <input
            type="text"
            v-model="form1.reason"
            placeholder="请输入访客的证件号码"
            placeholder-style="color: #999999;"
          />
        </view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>公司名称</text>
        </view>
        <view class="list_item_content">
          <input
            type="text"
            v-model="form1.reason"
            placeholder="请输入访客的公司名称"
            placeholder-style="color: #999999;"
          />
        </view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>随行车辆</text>
        </view>
        <view class="list_item_content">
          <input
            type="text"
            v-model="form1.reason"
            placeholder="请输入车牌号"
            placeholder-style="color: #999999;"
          />
        </view>
      </view>
      <view class="cell" style="padding: 24rpx 0">
        <view class="title1">
          <text class="title1_a">人脸照片<b>*</b></text>
          <text class="title1_b">1、请提供五官清晰,人脸居中的正面人脸免</text>
          <text class="title1_b">2、照片无逆光、无PS、无过度美颜处理</text>
        </view>
        <view class="content">
          <view class="content_uplaod" @click="upload('faceImg')">
            <u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>
          </view>
          <!-- <view class="content_uplaod" @click="upload('faceImg')" v-else>
                  <image :src="visitorData.faceImgUrl" mode="widthFix"></image>
               </view> -->
            </view>
         </view>
         <view class="cell" style="padding: 24rpx 0;">
            <view class="title">健康证<b>*</b></view>
            <view class="content">
               <view class="content_uplaod" @click="upload('imgurl')">
                  <u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>
               </view>
               <!-- <view class="content_uplaod" @click="upload('imgurl')" v-else>
        </view>
      </view>
      <view class="cell" style="padding: 24rpx 0">
        <view class="title">健康证<b>*</b></view>
        <view class="content">
          <view class="content_uplaod" @click="upload('imgurl')">
            <u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>
          </view>
          <!-- <view class="content_uplaod" @click="upload('imgurl')" v-else>
                  <image :src="visitorData.imgurlUrl" mode="widthFix"></image>
               </view> -->
            </view>
         </view>
      </view>
      <view class="cate">
         <view class="cate_head">随访人员信息</view>
         <view class="cate_list">
            <view class="cate_list_item" v-for="(item,index) in personnel" :key="index">
               <text>{{item.name}}</text>
               <u-icon name="close" color="#999999" size="20" @click="deleUser(index)"></u-icon>
            </view>
         </view>
         <view class="cate_add" @click="show3 = true">+添加随访人员</view>
      </view>
      <view class="zw"></view>
      <view class="footer">
         <view class="footer_btn" @click="submit">提交</view>
      </view>
      <!-- 入场时间 -->
      <u-datetime-picker
         :show="show4"
         :minDate="new Date().getTime()"
         mode="datetime"
         @cancel="show4 = false"
         @confirm="setinDate"
      ></u-datetime-picker>
      <!-- 离场时间 -->
      <u-datetime-picker
         :show="show5"
         :minDate="new Date().getTime()"
         mode="datetime"
         @cancel="show5 = false"
         @confirm="setoutDate"
      ></u-datetime-picker>
      <!-- 门禁 -->
      <u-popup :show="show" :round="10" :safeAreaInsetBottom="true" :closeable="true" mode="bottom" @close="show = false">
         <view class="menjin">
            <view class="respondent-title">
               选择门禁
            </view>
            <scroll-view scroll-y class="list">
               <view class="list_item" v-for="(item, index) in columns" :key="index" @click="seleMJ(index)">
                  <text>{{item.name}}</text>
                  <image src="@/static/video@2x.png" mode="widthFix" v-show="!item.active"></image>
                  <image src="@/static/video_sel@2x.png" mode="widthFix" v-show="item.active"></image>
               </view>
            </scroll-view>
            <view class="menjin_footer">
               <view class="menjin_footer_item" @click="show = false">取消</view>
               <view class="menjin_footer_item" @click="submitMJ">确认</view>
            </view>
         </view>
      </u-popup>
      <!-- 选择随行人员 -->
      <u-popup :show="show1" :round="10" :safeAreaInsetBottom="true" :closeable="true" mode="bottom" @close="show1 = false">
         <view class="popup-content">
            <view class="respondent-title">
               选择
            </view>
            <view class="search-box">
               <view class="search-box-top">
                  <view class="search-box-top-ipt">
                     <image src="@/static/ic_search@2x.png" mode="widthFix"></image>
                     <input type="text" placeholder="搜索姓名/手机号" />
                  </view>
                  <!-- <text @click="show1 = false; show3 = true">新增</text> -->
               </view>
               <view class="search-box-total">共0条数据</view>
            </view>
            <scroll-view scroll-y class="list">
               <view class="item" v-for="(item, index) in 8" :key="index">
                  <view class="item_a">
                     <!-- <image src="@/static/checkbox.png" mode="widthFix" v-if="!item.active" /> -->
                     <image src="@/static/checkbox_sel@2x.png" mode="widthFix" />
                  </view>
                  <view class="item_b">
                     <image src="@/static/ic_mima@2x.png" mode="widthFix" />
                  </view>
                  <view class="item_c">
                     <text>用户名</text>
                     <text>行政部</text>
                  </view>
               </view>
            </scroll-view>
            <view class="footer1">
               <!-- <view class="footer_left">
        </view>
      </view>
    </view>
    <view class="cate">
      <view class="cate_head">随访人员信息</view>
      <view class="cate_list">
        <view
          class="cate_list_item"
          v-for="(item, index) in personnel"
          :key="index"
        >
          <text>{{ item.name }}</text>
          <u-icon
            name="close"
            color="#999999"
            size="20"
            @click="deleUser(index)"
          ></u-icon>
        </view>
      </view>
      <view class="cate_add" @click="show3 = true">+添加随访人员</view>
    </view>
    <view class="zw"></view>
    <view class="footer">
      <view class="footer_btn" @click="submit">提交</view>
    </view>
    <!-- 入园时间 -->
    <u-datetime-picker
      :show="show4"
      :minDate="new Date().getTime()"
      mode="datetime"
      @cancel="show4 = false"
      @confirm="setinDate"
    ></u-datetime-picker>
    <!-- 离园时间 -->
    <u-datetime-picker
      :show="show5"
      :minDate="new Date().getTime()"
      mode="datetime"
      @cancel="show5 = false"
      @confirm="setoutDate"
    ></u-datetime-picker>
    <!-- 门禁 -->
    <u-popup
      :show="show"
      :round="10"
      :safeAreaInsetBottom="true"
      :closeable="true"
      mode="bottom"
      @close="show = false"
    >
      <view class="menjin">
        <view class="respondent-title"> 选择门禁 </view>
        <scroll-view scroll-y class="list">
          <view
            class="list_item"
            v-for="(item, index) in columns"
            :key="index"
            @click="seleMJ(index)"
          >
            <text>{{ item.name }}</text>
            <image
              src="@/static/video@2x.png"
              mode="widthFix"
              v-show="!item.active"
            ></image>
            <image
              src="@/static/video_sel@2x.png"
              mode="widthFix"
              v-show="item.active"
            ></image>
          </view>
        </scroll-view>
        <view class="menjin_footer">
          <view class="menjin_footer_item" @click="show = false">取消</view>
          <view class="menjin_footer_item" @click="submitMJ">确认</view>
        </view>
      </view>
    </u-popup>
    <!-- 选择随行人员 -->
    <u-popup
      :show="show1"
      :round="10"
      :safeAreaInsetBottom="true"
      :closeable="true"
      mode="bottom"
      @close="show1 = false"
    >
      <view class="popup-content">
        <view class="respondent-title"> 选择 </view>
        <view class="search-box">
          <view class="search-box-top">
            <view class="search-box-top-ipt">
              <image src="@/static/ic_search@2x.png" mode="widthFix"></image>
              <input type="text" placeholder="搜索姓名/手机号" />
            </view>
            <!-- <text @click="show1 = false; show3 = true">新增</text> -->
          </view>
          <view class="search-box-total">共0条数据</view>
        </view>
        <scroll-view scroll-y class="list">
          <view class="item" v-for="(item, index) in 8" :key="index">
            <view class="item_a">
              <!-- <image src="@/static/checkbox.png" mode="widthFix" v-if="!item.active" /> -->
              <image src="@/static/checkbox_sel@2x.png" mode="widthFix" />
            </view>
            <view class="item_b">
              <image src="@/static/ic_mima@2x.png" mode="widthFix" />
            </view>
            <view class="item_c">
              <text>用户名</text>
              <text>行政部</text>
            </view>
          </view>
        </scroll-view>
        <view class="footer1">
          <!-- <view class="footer_left">
                  <text class="footer_left_a">已选择:0人</text>
                  <text class="footer_left_b">李伟;</text>
               </view> -->
               <view class="footer_btn">确认</view>
            </view>
         </view>
      </u-popup>
      <!-- 添加随行人员 -->
      <u-popup :show="show3" :round="10" :safeAreaInsetBottom="true" :closeable="true" mode="bottom" @close="show3 = false">
         <view class="adduser">
            <view class="adduser_head">随行人员</view>
            <view class="adduser_list">
               <view class="adduser_list_item">
                  <view class="adduser_list_item_label">
                     <text>姓名</text>
                     <text>*</text>
                  </view>
                  <view class="adduser_list_item_ipt">
                     <input type="text" v-model="withUserList.name" placeholder-style="color: #999999;font-size: 28rpx;" placeholder="请输入真实姓名" />
                  </view>
               </view>
               <view class="adduser_list_item">
                  <view class="adduser_list_item_label">
                     <text>手机号</text>
                     <text>*</text>
                  </view>
                  <view class="adduser_list_item_ipt">
                     <input type="number" v-model="withUserList.phone" maxlength="11" placeholder-style="color: #999999;font-size: 28rpx;" placeholder="请输入手机号" />
                  </view>
               </view>
               <view class="adduser_list_item">
                  <view class="adduser_list_item_label">
                     <text>证件类型</text>
                     <text>*</text>
                  </view>
                  <view class="adduser_list_item_ipt" @click="show6 = true">
                     <text :style="{color: withUserList.idcardTypeName ? '#000000' : ''}">{{withUserList.idcardTypeName ? withUserList.idcardTypeName : '请选择'}}</text>
                     <u-icon name="arrow-right" color="#CCCCCC" size="16"></u-icon>
                  </view>
               </view>
               <view class="adduser_list_item">
                  <view class="adduser_list_item_label">
                     <text>证件号码</text>
                     <text>*</text>
                  </view>
                  <view class="adduser_list_item_ipt">
                     <input type="text" v-model="withUserList.idcardNo" placeholder-style="color: #999999;font-size: 28rpx;" placeholder="请输入证件号码" />
                  </view>
               </view>
               <view class="adduser_list_item">
                  <view class="adduser_list_item_label">
                     <text>公司</text>
                     <text></text>
                  </view>
                  <view class="adduser_list_item_ipt">
                     <input type="text" v-model="withUserList.companyName" placeholder-style="color: #999999;font-size: 28rpx;" placeholder="请输入公司名称" />
                  </view>
               </view>
               <view class="adduser_list_item">
                  <view class="adduser_list_item_label">
                     <text>随行车辆</text>
                     <text></text>
                  </view>
                  <view class="adduser_list_item_ipt">
                     <input type="text" v-model="withUserList.carNos" placeholder-style="color: #999999;font-size: 28rpx;" placeholder="请输入车牌号" />
                  </view>
               </view>
               <view class="adduser_list_item">
                  <view class="adduser_list_item_label1">
                     <text class="cc">人脸照片<b>*</b></text>
                     <text class="aa">1、请提供五官清晰,人脸居中的正面人脸免</text>
                     <text class="aa">2、照片无逆光、无PS、无过度美颜处理</text>
                  </view>
                  <view class="adduser_list_item_ipt">
                     <view class="adduser_list_item_ipt1_upload" @click="upload('faceImg')" v-if="!withUserList.faceImgUrl">
                        <u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>
                     </view>
                     <view class="adduser_list_item_ipt1_upload" @click="upload('faceImg')" v-else>
                        <image :src="withUserList.faceImgUrl" mode="widthFix"></image>
                     </view>
                  </view>
               </view>
               <view class="adduser_list_item">
                  <view class="adduser_list_item_label">
                     <text>健康证照片</text>
                     <text v-if="visit === '1'">*</text>
                  </view>
                  <view class="adduser_list_item_ipt">
                     <view class="adduser_list_item_ipt1_upload" @click="upload('imgurl')" v-if="!withUserList.imgurlUrl">
                        <u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon>
                     </view>
                     <view class="adduser_list_item_ipt1_upload" @click="upload('imgurl')" v-else>
                        <image :src="withUserList.imgurlUrl" mode="widthFix"></image>
                     </view>
                  </view>
               </view>
            </view>
            <view class="adduser_footer">
               <view class="adduser_footer_item" @click="show3 = false">取消</view>
               <view class="adduser_footer_item t" @click="submitUser">提交</view>
            </view>
         </view>
      </u-popup>
      <u-picker keyName="name" :show="show6" :columns="columns1" @confirm="seleIdcard" @cancel="show6 = false"></u-picker>
   </view>
          <view class="footer_btn">确认</view>
        </view>
      </view>
    </u-popup>
    <!-- 添加随行人员 -->
    <u-popup
      :show="show3"
      :round="10"
      :safeAreaInsetBottom="true"
      :closeable="true"
      mode="bottom"
      @close="show3 = false"
    >
      <view class="adduser">
        <view class="adduser_head">随行人员</view>
        <view class="adduser_list">
          <view class="adduser_list_item">
            <view class="adduser_list_item_label">
              <text>姓名</text>
              <text>*</text>
            </view>
            <view class="adduser_list_item_ipt">
              <input
                type="text"
                v-model="withUserList.name"
                placeholder-style="color: #999999;font-size: 28rpx;"
                placeholder="请输入真实姓名"
              />
            </view>
          </view>
          <view class="adduser_list_item">
            <view class="adduser_list_item_label">
              <text>手机号</text>
              <text>*</text>
            </view>
            <view class="adduser_list_item_ipt">
              <input
                type="number"
                v-model="withUserList.phone"
                maxlength="11"
                placeholder-style="color: #999999;font-size: 28rpx;"
                placeholder="请输入手机号"
              />
            </view>
          </view>
          <view class="adduser_list_item">
            <view class="adduser_list_item_label">
              <text>证件类型</text>
              <text>*</text>
            </view>
            <view class="adduser_list_item_ipt" @click="show6 = true">
              <text
                :style="{ color: withUserList.idcardTypeName ? '#000000' : '' }"
                >{{
                  withUserList.idcardTypeName
                    ? withUserList.idcardTypeName
                    : "请选择"
                }}</text
              >
              <u-icon name="arrow-right" color="#CCCCCC" size="16"></u-icon>
            </view>
          </view>
          <view class="adduser_list_item">
            <view class="adduser_list_item_label">
              <text>证件号码</text>
              <text>*</text>
            </view>
            <view class="adduser_list_item_ipt">
              <input
                type="text"
                v-model="withUserList.idcardNo"
                placeholder-style="color: #999999;font-size: 28rpx;"
                placeholder="请输入证件号码"
              />
            </view>
          </view>
          <view class="adduser_list_item">
            <view class="adduser_list_item_label">
              <text>公司</text>
              <text></text>
            </view>
            <view class="adduser_list_item_ipt">
              <input
                type="text"
                v-model="withUserList.companyName"
                placeholder-style="color: #999999;font-size: 28rpx;"
                placeholder="请输入公司名称"
              />
            </view>
          </view>
          <view class="adduser_list_item">
            <view class="adduser_list_item_label">
              <text>随行车辆</text>
              <text></text>
            </view>
            <view class="adduser_list_item_ipt">
              <input
                type="text"
                v-model="withUserList.carNos"
                placeholder-style="color: #999999;font-size: 28rpx;"
                placeholder="请输入车牌号"
              />
            </view>
          </view>
          <view class="adduser_list_item">
            <view class="adduser_list_item_label1">
              <text class="cc">人脸照片<b>*</b></text>
              <text class="aa">1、请提供五官清晰,人脸居中的正面人脸免</text>
              <text class="aa">2、照片无逆光、无PS、无过度美颜处理</text>
            </view>
            <view class="adduser_list_item_ipt">
              <view
                class="adduser_list_item_ipt1_upload"
                @click="upload('faceImg')"
                v-if="!withUserList.faceImgUrl"
              >
                <u-icon
                  name="plus"
                  color="rgb(153, 153, 153)"
                  size="28"
                ></u-icon>
              </view>
              <view
                class="adduser_list_item_ipt1_upload"
                @click="upload('faceImg')"
                v-else
              >
                <image :src="withUserList.faceImgUrl" mode="widthFix"></image>
              </view>
            </view>
          </view>
          <view class="adduser_list_item">
            <view class="adduser_list_item_label">
              <text>健康证照片</text>
              <text v-if="visit === '1'">*</text>
            </view>
            <view class="adduser_list_item_ipt">
              <view
                class="adduser_list_item_ipt1_upload"
                @click="upload('imgurl')"
                v-if="!withUserList.imgurlUrl"
              >
                <u-icon
                  name="plus"
                  color="rgb(153, 153, 153)"
                  size="28"
                ></u-icon>
              </view>
              <view
                class="adduser_list_item_ipt1_upload"
                @click="upload('imgurl')"
                v-else
              >
                <image :src="withUserList.imgurlUrl" mode="widthFix"></image>
              </view>
            </view>
          </view>
        </view>
        <view class="adduser_footer">
          <view class="adduser_footer_item" @click="show3 = false">取消</view>
          <view class="adduser_footer_item t" @click="submitUser">提交</view>
        </view>
      </view>
    </u-popup>
    <u-picker
      keyName="name"
      :show="show6"
      :columns="columns1"
      @confirm="seleIdcard"
      @cancel="show6 = false"
    ></u-picker>
  </view>
</template>
<script>
   export default {
      data() {
         return {
            show: false,
            show1: false,
            show3: false,
            show4: false,
            show5: false,
            show6: false,
            fileList: [],
            columns1: [[{name: '身份证', id: 0}, {name: '港澳证件', id: 1},{name: '护照', id: 2}]],
            columns: [],
            personnel: [],
            userAnswerId: '',
            form1: {
               phone1: '',
               receptMemberId: '',
               receptMemberName: '',
               starttime: '',
               endtime: '',
               doors: '',
               doorSelectName: '',
               reason: '',
               carNos: ''
            },
            withUserList: {
               name: '',
               phone: '',
               idcardType: '',
               idcardTypeName: '',
               companyName: '',
               idcardNo: '',
               faceImg: '',
               faceImgUrl: '',
               imgurl: '',
               imgurlUrl: ''
            },
            visit: '',
            form: {},
            accessControl: '',
            verify: ''
         };
      },
      onLoad(options) {
         // this.form = JSON.parse(options.data)
         // this.getvisit()
         // this.getVisit1()
         // this.getUserValid()
      },
      methods: {
         submit() {
            if (!this.form1.receptMemberId) return uni.showToast({
               title: '被访人不能为空',
               icon: 'none'
            })
            if (!this.form1.starttime) return uni.showToast({
               title: '入场时间不能为空',
               icon: 'none'
            })
            if (!this.form1.endtime) return uni.showToast({
               title: '离场时间不能为空',
               icon: 'none'
            })
            if (!this.form1.doorSelectName) return uni.showToast({
               title: '访问门禁不能为空',
               icon: 'none'
            })
            if (!this.form1.reason) return uni.showToast({
               title: '拜访事由不能为空',
               icon: 'none'
            })
            this.$u.api.createFk({
               ...this.form,
               ...this.form1,
               openid: this.$store.state.openId,
               withUserList: this.personnel
            }).then(res => {
               if (res.code === 200) {
                  console.log(res)
               }
            })
         },
         deleUser(i) {
            this.personnel.splice(i, 1)
         },
         getVisit1() {
            // 是否需要答题
            this.$u.api.getSystemDictData({
               dictCode: 'SYSTEM',
               label: 'HEALTH_CARD'
            }).then(res => {
               if (res.code === 200) {
                  this.visit = res.data.code
               }
            })
         },
         submitUser() {
            if (!this.withUserList.name) return uni.showToast({
               title: '姓名不能为空',
               icon: 'none'
            })
            if (!this.withUserList.phone) return uni.showToast({
               title: '手机号不能为空',
               icon: 'none'
            })
            if (!String(this.withUserList.idcardType)) return uni.showToast({
               title: '证件类型不能为空',
               icon: 'none'
            })
            if (!this.withUserList.idcardNo) return uni.showToast({
               title: '证件号码不能为空',
               icon: 'none'
            })
            if (!this.withUserList.faceImg) return uni.showToast({
               title: '人脸照片不能为空',
               icon: 'none'
            })
            if (this.visit === '1') {
               if (!this.withUserList.imgurl) return uni.showToast({
                  title: '人脸照片不能为空',
                  icon: 'none'
               })
            }
            let arr = JSON.parse(JSON.stringify(this.withUserList))
            this.personnel.push(arr)
            this.show3 = false
            this.withUserList.name = ''
            this.withUserList.phone = ''
            this.withUserList.idcardType = ''
            this.withUserList.idcardTypeName = ''
            this.withUserList.companyName = ''
            this.withUserList.idcardNo = ''
            this.withUserList.faceImg = ''
            this.withUserList.faceImgUrl = ''
            this.withUserList.imgurl = ''
            this.withUserList.imgurlUrl = ''
         },
         upload(type) {
            uni.chooseImage({
               success: (chooseImageRes) => {
                  uni.showLoading({ title: '上传中', mask: true });
                  for (let i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
                     uni.uploadFile({
                        url: `${this.$baseUrl}public/api/uploadFtp.do`,
                        filePath: chooseImageRes.tempFilePaths[i],
                        name: 'file',
                        formData: {
                           folderCode: 'MEMBER_IMG'
                        },
                        success: (uploadFileRes) => {
                           let res = JSON.parse(uploadFileRes.data)
                           if (type === 'faceImg') {
                              this.withUserList.faceImg = res.data.halfPath
                              this.withUserList.faceImgUrl = res.data.prefixPath + res.data.folder + res.data.halfPath
                           } else {
                              this.withUserList.imgurl = res.data.halfPath
                              this.withUserList.imgurlUrl = res.data.prefixPath + res.data.folder + res.data.halfPath
                           }
                        },
                        complete() {
                           if (i === chooseImageRes.tempFilePaths.length - 1) {
                              uni.hideLoading();
                           }
                        }
                     });
                  }
               }
            });
         },
         submitMJ() {
            let arr = []
            let names = []
            this.columns.forEach(item => {
               if (item.active) {
                  arr.push(item.id)
                  names.push(item.name)
               }
            })
            if (arr.length === 0) return uni.showToast({
               title: '请选择门禁',
               icon: 'none'
            })
            this.form1.doorSelectName = names.join(',')
            this.form1.doors = arr.join(',')
            this.show = false
         },
         seleMJ(i) {
            this.columns.forEach((item,index) => {
               if (index === i) {
                  item.active = !item.active
               }
            })
         },
         setinDate(e) {
            this.form1.starttime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
            this.show4 = false
         },
         setoutDate(e) {
            this.form1.endtime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
            this.show5 = false
         },
         // 查询用户
         getUser() {
            console.log(this.verify)
            console.log(this.form1.phone1)
            console.log(this.form1.receptMemberName)
            if (this.verify === '0') {
               if (this.form1.phone1) {
                  this.$u.api.getVisitedMember({
                     mobile: this.form1.phone1
                  }).then(res => {
                     if (res.code === 200) {
                        this.form1.receptMemberId = res.data.id
                        this.form1.receptMemberName = res.data.name
                     }
                  })
               }
            } else {
               if (this.form1.phone1 && this.form1.receptMemberName) {
                  this.$u.api.getVisitedMember({
                     mobile: this.form1.phone1,
                     name: this.form1.receptMemberName
                  }).then(res => {
                     if (res.code === 200) {
                        this.form1.receptMemberId = res.data.id
                        this.form1.receptMemberName = res.data.name
                     }
                  })
               }
            }
         },
         // 被拜访人信息校验方式(0手机号单独校验 1手机号和姓名组合校验)
         getUserValid() {
            this.$u.api.getSystemDictData({
               dictCode: 'SYSTEM',
               label: 'BEVISITED_USER_VALID'
            }).then(res => {
               if (res.code === 200) {
                  console.log(res)
                  this.verify = res.data.code
               }
            })
         },
         // 获取是否需要选择门禁/门禁列表
         getvisit() {
            this.$u.api.getSystemDictData({
               dictCode: 'SYSTEM',
               label: 'SELECT_DOORS_VISIT_REQUIRED'
            }).then(res => {
               if (res.code === 200) {
                  this.accessControl = res.data.code
                  if (res.data.code === '1') {
                     this.$u.api.deviceRoleList({ type: 1 })
                        .then(device => {
                           if (device.code === 200) {
                              if (device.data.length > 0) {
                                 device.data.forEach(item => {
                                    item.active = false
                                 })
                                 this.columns = device.data
                              }
                           }
                        })
                  }
               }
            })
         },
         confirm(e) {
            this.show = false
         }
      }
   }
export default {
  data() {
    return {
      show: false,
      show1: false,
      show3: false,
      show4: false,
      show5: false,
      show6: false,
      fileList: [],
      columns1: [[{ name: '身份证', id: 0 }, { name: '港澳证件', id: 1 }, { name: '护照', id: 2 }]],
      columns: [],
      personnel: [],
      userAnswerId: '',
      form1: {
        phone1: '',
        receptMemberId: '',
        receptMemberName: '',
        starttime: '',
        endtime: '',
        doors: '',
        doorSelectName: '',
        reason: '',
        carNos: ''
      },
      withUserList: {
        name: '',
        phone: '',
        idcardType: '',
        idcardTypeName: '',
        companyName: '',
        idcardNo: '',
        faceImg: '',
        faceImgUrl: '',
        imgurl: '',
        imgurlUrl: ''
      },
      visit: '',
      form: {},
      accessControl: '',
      verify: ''
    }
  },
  onLoad(options) {
    // this.form = JSON.parse(options.data)
    // this.getvisit()
    // this.getVisit1()
    // this.getUserValid()
  },
  methods: {
    submit() {
      if (!this.form1.receptMemberId) return uni.showToast({
        title: '被访人不能为空',
        icon: 'none'
      })
      if (!this.form1.starttime) return uni.showToast({
        title: '入园时间不能为空',
        icon: 'none'
      })
      if (!this.form1.endtime) return uni.showToast({
        title: '离园时间不能为空',
        icon: 'none'
      })
      if (!this.form1.doorSelectName) return uni.showToast({
        title: '访问门禁不能为空',
        icon: 'none'
      })
      if (!this.form1.reason) return uni.showToast({
        title: '拜访事由不能为空',
        icon: 'none'
      })
      this.$u.api.createFk({
        ...this.form,
        ...this.form1,
        openid: this.$store.state.openId,
        withUserList: this.personnel
      }).then(res => {
        if (res.code === 200) {
          console.log(res)
        }
      })
    },
    deleUser(i) {
      this.personnel.splice(i, 1)
    },
    getVisit1() {
      // 是否需要答题
      this.$u.api.getSystemDictData({
        dictCode: 'SYSTEM',
        label: 'HEALTH_CARD'
      }).then(res => {
        if (res.code === 200) {
          this.visit = res.data.code
        }
      })
    },
    submitUser() {
      if (!this.withUserList.name) return uni.showToast({
        title: '姓名不能为空',
        icon: 'none'
      })
      if (!this.withUserList.phone) return uni.showToast({
        title: '手机号不能为空',
        icon: 'none'
      })
      if (!String(this.withUserList.idcardType)) return uni.showToast({
        title: '证件类型不能为空',
        icon: 'none'
      })
      if (!this.withUserList.idcardNo) return uni.showToast({
        title: '证件号码不能为空',
        icon: 'none'
      })
      if (!this.withUserList.faceImg) return uni.showToast({
        title: '人脸照片不能为空',
        icon: 'none'
      })
      if (this.visit === '1') {
        if (!this.withUserList.imgurl) return uni.showToast({
          title: '人脸照片不能为空',
          icon: 'none'
        })
      }
      let arr = JSON.parse(JSON.stringify(this.withUserList))
      this.personnel.push(arr)
      this.show3 = false
      this.withUserList.name = ''
      this.withUserList.phone = ''
      this.withUserList.idcardType = ''
      this.withUserList.idcardTypeName = ''
      this.withUserList.companyName = ''
      this.withUserList.idcardNo = ''
      this.withUserList.faceImg = ''
      this.withUserList.faceImgUrl = ''
      this.withUserList.imgurl = ''
      this.withUserList.imgurlUrl = ''
    },
    upload(type) {
      uni.chooseImage({
        success: (chooseImageRes) => {
          uni.showLoading({ title: '上传中', mask: true })
          for (let i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
            uni.uploadFile({
              url: `${this.$baseUrl}public/api/uploadFtp.do`,
              filePath: chooseImageRes.tempFilePaths[i],
              name: 'file',
              formData: {
                folderCode: 'MEMBER_IMG'
              },
              success: (uploadFileRes) => {
                let res = JSON.parse(uploadFileRes.data)
                if (type === 'faceImg') {
                  this.withUserList.faceImg = res.data.halfPath
                  this.withUserList.faceImgUrl = res.data.prefixPath + res.data.folder + res.data.halfPath
                } else {
                  this.withUserList.imgurl = res.data.halfPath
                  this.withUserList.imgurlUrl = res.data.prefixPath + res.data.folder + res.data.halfPath
                }
              },
              complete() {
                if (i === chooseImageRes.tempFilePaths.length - 1) {
                  uni.hideLoading()
                }
              }
            })
          }
        }
      })
    },
    submitMJ() {
      let arr = []
      let names = []
      this.columns.forEach(item => {
        if (item.active) {
          arr.push(item.id)
          names.push(item.name)
        }
      })
      if (arr.length === 0) return uni.showToast({
        title: '请选择门禁',
        icon: 'none'
      })
      this.form1.doorSelectName = names.join(',')
      this.form1.doors = arr.join(',')
      this.show = false
    },
    seleMJ(i) {
      this.columns.forEach((item, index) => {
        if (index === i) {
          item.active = !item.active
        }
      })
    },
    setinDate(e) {
      this.form1.starttime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
      this.show4 = false
    },
    setoutDate(e) {
      this.form1.endtime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
      this.show5 = false
    },
    // 查询用户
    getUser() {
      console.log(this.verify)
      console.log(this.form1.phone1)
      console.log(this.form1.receptMemberName)
      if (this.verify === '0') {
        if (this.form1.phone1) {
          this.$u.api.getVisitedMember({
            mobile: this.form1.phone1
          }).then(res => {
            if (res.code === 200) {
              this.form1.receptMemberId = res.data.id
              this.form1.receptMemberName = res.data.name
            }
          })
        }
      } else {
        if (this.form1.phone1 && this.form1.receptMemberName) {
          this.$u.api.getVisitedMember({
            mobile: this.form1.phone1,
            name: this.form1.receptMemberName
          }).then(res => {
            if (res.code === 200) {
              this.form1.receptMemberId = res.data.id
              this.form1.receptMemberName = res.data.name
            }
          })
        }
      }
    },
    // 被拜访人信息校验方式(0手机号单独校验 1手机号和姓名组合校验)
    getUserValid() {
      this.$u.api.getSystemDictData({
        dictCode: 'SYSTEM',
        label: 'BEVISITED_USER_VALID'
      }).then(res => {
        if (res.code === 200) {
          console.log(res)
          this.verify = res.data.code
        }
      })
    },
    // 获取是否需要选择门禁/门禁列表
    getvisit() {
      this.$u.api.getSystemDictData({
        dictCode: 'SYSTEM',
        label: 'SELECT_DOORS_VISIT_REQUIRED'
      }).then(res => {
        if (res.code === 200) {
          this.accessControl = res.data.code
          if (res.data.code === '1') {
            this.$u.api.deviceRoleList({ type: 1 })
              .then(device => {
                if (device.code === 200) {
                  if (device.data.length > 0) {
                    device.data.forEach(item => {
                      item.active = false
                    })
                    this.columns = device.data
                  }
                }
              })
          }
        }
      })
    },
    confirm(e) {
      this.show = false
    }
  }
}
</script>
<style>
   page {
      background-color: #F7F7F7 !important;
   }
   .u-upload__button {
      margin: 0 !important;
   }
   .content_uplaod {
      width: 120rpx;
      height: 120rpx;
      background-color: #ececec;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
   }
   .content_uplaod image {
      width: 100%;
      height: 100%;
   }
   .title {
      font-size: 30rpx;
      font-weight: 400;
      color: #222222;
      display: flex;
      align-items: center;
   }
   .title b {
      color: red;
      font-weight: bold;
   }
   .title1 {
      display: flex;
      flex-direction: column;
      .title1_a {
         font-size: 30rpx;
         font-weight: 400;
         color: #222222;
         display: flex;
         align-items: center;
         margin-bottom: 20rpx;
         b {
            color: red;
            font-weight: bold;
         }
      }
      .title1_b {
         font-size: 24rpx;
         font-weight: 400;
         color: #999999;
      }
   }
page {
  background-color: #f7f7f7 !important;
}
.u-upload__button {
  margin: 0 !important;
}
.content_uplaod {
  width: 120rpx;
  height: 120rpx;
  background-color: #ececec;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.content_uplaod image {
  width: 100%;
  height: 100%;
}
.title {
  font-size: 30rpx;
  font-weight: 400;
  color: #222222;
  display: flex;
  align-items: center;
}
.title b {
  color: red;
  font-weight: bold;
}
.title1 {
  display: flex;
  flex-direction: column;
  .title1_a {
    font-size: 30rpx;
    font-weight: 400;
    color: #222222;
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    b {
      color: red;
      font-weight: bold;
    }
  }
  .title1_b {
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
  }
}
</style>
<style lang="scss" scoped>
   .visit {
      width: 100%;
      .menjin {
         width: 100%;
         .respondent-title {
            width: 100%;
            height: 100rpx;
            line-height: 100rpx;
            text-align: center;
            font-size: 32rpx;
            font-weight: 500;
            color: #222222;
         }
         .list {
            width: 100%;
            height: 400rpx;
            display: flex;
            flex-direction: column;
            .list_item {
               width: 100%;
               display: flex;
               align-items: center;
               justify-content: space-between;
               text {
                  font-size: 28rpx;
                  color: #000000;
               }
               image {
                  width: 30rpx;
                  height: 30rpx;
               }
            }
         }
         .menjin_footer {
            width: 100%;
            padding: 30rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .menjin_footer_item {
               flex: 1;
               height: 80rpx;
               display: flex;
               align-items: center;
               justify-content: center;
               border-radius: 10rpx;
               background-color: #025EEF;
               color: #ffffff;
               font-size: 26rpx;
               margin-left: 30rpx;
               &:first-child {
                  margin-left: 0 !important;
               }
            }
         }
      }
      .adduser {
         padding: 30rpx;
         width: 100%;
         box-sizing: border-box;
         .adduser_head {
            width: 100%;
            text-align: center;
            font-size: 32rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #222222;
         }
         .adduser_list {
            width: 100%;
            margin-top: 40rpx;
            .adduser_list_item {
               width: 100%;
               padding: 24rpx 0;
               box-sizing: border-box;
               border-bottom: 1rpx solid #E5E5E5;
               display: flex;
               align-items: center;
               justify-content: space-between;
               .adduser_list_item_label1 {
                  flex-shrink: 0;
                  display: flex;
                  flex-direction: column;
                  .cc {
                     font-size: 30rpx;
                     font-family: PingFangSC, PingFang SC;
                     font-weight: 400;
                     color: #222222;
                     margin-bottom: 20rpx;
                     b {
                        font-size: 30rpx;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #E0312A;
                     }
                  }
                  .aa {
                     font-size: 24rpx;
                     font-weight: 400;
                     color: #999999;
                  }
               }
               .adduser_list_item_label {
                  flex-shrink: 0;
                  display: flex;
                  align-items: center;
                  text {
                     &:nth-child(1) {
                        font-size: 30rpx;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #222222;
                     }
                     &:nth-child(2) {
                        font-size: 30rpx;
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        color: #E0312A;
                     }
                  }
               }
               .adduser_list_item_ipt {
                  flex: 1;
                  text-align: right;
                  font-size: 28rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  color: #333333;
                  margin-left: 30rpx;
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;
                  .adduser_list_item_ipt1_upload {
                     width: 120rpx;
                     height: 120rpx;
                     background-color: #ececec;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     overflow: hidden;
                     image {
                        width: 100%;
                        height: 100%;
                     }
                  }
                  text {
                     font-size: 28rpx;
                     font-family: PingFangSC, PingFang SC;
                     font-weight: 400;
                     color: #999999;
                  }
               }
            }
         }
         .adduser_footer {
            width: 100%;
            margin-top: 60rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .t {
               background: #025EEF !important;
               color: #ffffff !important;
            }
            .adduser_footer_item {
               width: 336rpx;
               height: 88rpx;
               line-height: 88rpx;
               text-align: center;
               border-radius: 44rpx;
               border: 1rpx solid #025EEF;
               font-size: 32rpx;
               font-family: PingFangSC, PingFang SC;
               font-weight: 400;
               color: #025EEF;
               margin-right: 18rpx;
               &:last-child {
                  margin: 0 !important;
               }
            }
         }
      }
      .addcar {
         padding: 30rpx;
         width: 100%;
         box-sizing: border-box;
         .addcar_head {
            text-align: center;
            font-size: 32rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #222222;
         }
         .addcar_ipt {
            width: 100%;
            height: 100rpx;
            line-height: 100rpx;
            text-align: center;
            background: #F7F7F7;
            border-radius: 50rpx;
            margin-top: 60rpx;
            input {
               width: 100%;
               height: 100%;
               font-size: 28rpx;
               font-weight: 400;
               color: #000000;
               text-align: center;
            }
         }
         .addcar_footer {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 60rpx;
            .t {
               background: #025EEF !important;
               color: #ffffff !important;
            }
            .addcar_footer_item {
               flex: 1;
               height: 88rpx;
               line-height: 88rpx;
               font-size: 32rpx;
               font-weight: 400;
               color: #025EEF;
               text-align: center;
               border-radius: 44rpx;
               border: 1rpx solid #025EEF;
               margin-right: 18rpx;
               &:last-child {
                  margin-right: 0 !important;
               }
            }
         }
      }
      .popup-content {
         padding: 30rpx 30rpx 0 30rpx;
         overflow: hidden;
         display: flex;
         flex-flow: column;
         .respondent-title {
            width: 100%;
            text-align: center;
            font-size: 32rpx;
            font-weight: 500;
            color: #222222;
         }
         .search-box {
            width: 100%;
            margin-top: 40rpx;
            .search-box-top {
               width: 100%;
               height: 68rpx;
               display: flex;
               align-items: center;
               .search-box-top-ipt {
                  flex: 1;
                  height: 100%;
                  padding: 0 30rpx;
                  box-sizing: border-box;
                  background: #F7F7F7;
                  border-radius: 4rpx;
                  display: flex;
                  align-items: center;
                  image {
                     width: 36rpx;
                     height: 36rpx;
                     flex-shrink: 0;
                     margin-right: 22rpx;
                  }
                  input {
                     flex: 1;
                     height: 100%;
                     font-size: 26rpx;
                     font-weight: 400;
                     color: #B2B2B2;
                  }
               }
               text {
                  flex-shrink: 0;
                  margin-left: 30rpx;
                  font-size: 28rpx;
                  font-weight: 400;
                  color: #025EEF;
               }
            }
            .search-box-total {
               font-size: 26rpx;
               font-weight: 400;
               color: #666666;
               margin-top: 24rpx;
            }
         }
         .list {
            width: 100%;
            height: 800rpx;
            margin-top: 30rpx;
            padding: 0 !important;
            .item {
               width: 100%;
               height: 102rpx;
               display: flex;
               align-items: center;
               border-bottom: 1rpx solid #E5E5E5;
               &:last-child {
                  border: none;
               }
               .item_a {
                  flex-shrink: 0;
                  width: 36rpx;
                  height: 36rpx;
                  margin-right: 24rpx;
                  image {
                     width: 100%;
                     height: 100%;
                  }
               }
               .item_b {
                  flex-shrink: 0;
                  width: 80rpx;
                  height: 80rpx;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  overflow: hidden;
                  margin-right: 24rpx;
                  image {
                     width: 100%;
                     height: 100%;
                  }
               }
               .item_c {
                  flex: 1;
                  display: flex;
                  align-items: flex-start;
                  flex-direction: column;
                  text {
                     &:nth-child(1) {
                        font-size: 30rpx;
                        font-weight: 400;
                        color: #222222;
                     }
                     &:nth-child(2) {
                        font-size: 26rpx;
                        font-weight: 400;
                        color: #777777;
                     }
                  }
               }
            }
         }
         .footer1 {
            width: 100%;
            height: 100rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14rpx 0 0 0;
            box-sizing: border-box;
            .footer_left {
               flex: 1;
               display: flex;
               flex-direction: column;
               .footer_left_a {
                  font-size: 26rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  color: #333333;
               }
               .footer_left_b {
                  font-size: 24rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  color: #999999;
               }
            }
            .footer_btn {
               flex-shrink: 0;
               width: 100%;
               height: 72rpx;
               line-height: 72rpx;
               text-align: center;
               background: #025EEF;
               border-radius: 8rpx;
               font-size: 28rpx;
               font-weight: 500;
               color: #FFFFFF;
               border-radius: 44rpx;
            }
         }
      }
.visit {
  width: 100%;
  .menjin {
    width: 100%;
    .respondent-title {
      width: 100%;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      font-size: 32rpx;
      font-weight: 500;
      color: #222222;
    }
    .list {
      width: 100%;
      height: 400rpx;
      display: flex;
      flex-direction: column;
      .list_item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text {
          font-size: 28rpx;
          color: #000000;
        }
        image {
          width: 30rpx;
          height: 30rpx;
        }
      }
    }
    .menjin_footer {
      width: 100%;
      padding: 30rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .menjin_footer_item {
        flex: 1;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10rpx;
        background-color: #025eef;
        color: #ffffff;
        font-size: 26rpx;
        margin-left: 30rpx;
        &:first-child {
          margin-left: 0 !important;
        }
      }
    }
  }
  .adduser {
    padding: 30rpx;
    width: 100%;
    box-sizing: border-box;
    .adduser_head {
      width: 100%;
      text-align: center;
      font-size: 32rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #222222;
    }
    .adduser_list {
      width: 100%;
      margin-top: 40rpx;
      .adduser_list_item {
        width: 100%;
        padding: 24rpx 0;
        box-sizing: border-box;
        border-bottom: 1rpx solid #e5e5e5;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .adduser_list_item_label1 {
          flex-shrink: 0;
          display: flex;
          flex-direction: column;
          .cc {
            font-size: 30rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #222222;
            margin-bottom: 20rpx;
            b {
              font-size: 30rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #e0312a;
            }
          }
          .aa {
            font-size: 24rpx;
            font-weight: 400;
            color: #999999;
          }
        }
        .adduser_list_item_label {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          text {
            &:nth-child(1) {
              font-size: 30rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #222222;
            }
            &:nth-child(2) {
              font-size: 30rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              color: #e0312a;
            }
          }
        }
        .adduser_list_item_ipt {
          flex: 1;
          text-align: right;
          font-size: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #333333;
          margin-left: 30rpx;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .adduser_list_item_ipt1_upload {
            width: 120rpx;
            height: 120rpx;
            background-color: #ececec;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            image {
              width: 100%;
              height: 100%;
            }
          }
          text {
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #999999;
          }
        }
      }
    }
    .adduser_footer {
      width: 100%;
      margin-top: 60rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .t {
        background: #025eef !important;
        color: #ffffff !important;
      }
      .adduser_footer_item {
        width: 336rpx;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        border-radius: 44rpx;
        border: 1rpx solid #025eef;
        font-size: 32rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #025eef;
        margin-right: 18rpx;
        &:last-child {
          margin: 0 !important;
        }
      }
    }
  }
      .head {
         width: 100%;
         padding: 20rpx 30rpx;
         box-sizing: border-box;
         font-size: 28rpx;
         font-weight: 400;
         color: #666666;
      }
  .addcar {
    padding: 30rpx;
    width: 100%;
    box-sizing: border-box;
    .addcar_head {
      text-align: center;
      font-size: 32rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #222222;
    }
    .addcar_ipt {
      width: 100%;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      background: #f7f7f7;
      border-radius: 50rpx;
      margin-top: 60rpx;
      input {
        width: 100%;
        height: 100%;
        font-size: 28rpx;
        font-weight: 400;
        color: #000000;
        text-align: center;
      }
    }
    .addcar_footer {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 60rpx;
      .t {
        background: #025eef !important;
        color: #ffffff !important;
      }
      .addcar_footer_item {
        flex: 1;
        height: 88rpx;
        line-height: 88rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: #025eef;
        text-align: center;
        border-radius: 44rpx;
        border: 1rpx solid #025eef;
        margin-right: 18rpx;
        &:last-child {
          margin-right: 0 !important;
        }
      }
    }
  }
      .list {
         width: 100%;
         padding: 0 30rpx;
         box-sizing: border-box;
         background-color: #ffffff;
         margin-bottom: 20rpx;
         &:last-child {
            margin: 0 !important;
         }
  .popup-content {
    padding: 30rpx 30rpx 0 30rpx;
    overflow: hidden;
    display: flex;
    flex-flow: column;
    .respondent-title {
      width: 100%;
      text-align: center;
      font-size: 32rpx;
      font-weight: 500;
      color: #222222;
    }
    .search-box {
      width: 100%;
      margin-top: 40rpx;
      .search-box-top {
        width: 100%;
        height: 68rpx;
        display: flex;
        align-items: center;
        .search-box-top-ipt {
          flex: 1;
          height: 100%;
          padding: 0 30rpx;
          box-sizing: border-box;
          background: #f7f7f7;
          border-radius: 4rpx;
          display: flex;
          align-items: center;
          image {
            width: 36rpx;
            height: 36rpx;
            flex-shrink: 0;
            margin-right: 22rpx;
          }
          input {
            flex: 1;
            height: 100%;
            font-size: 26rpx;
            font-weight: 400;
            color: #b2b2b2;
          }
        }
        text {
          flex-shrink: 0;
          margin-left: 30rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #025eef;
        }
      }
      .search-box-total {
        font-size: 26rpx;
        font-weight: 400;
        color: #666666;
        margin-top: 24rpx;
      }
    }
    .list {
      width: 100%;
      height: 800rpx;
      margin-top: 30rpx;
      padding: 0 !important;
      .item {
        width: 100%;
        height: 102rpx;
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #e5e5e5;
        &:last-child {
          border: none;
        }
        .item_a {
          flex-shrink: 0;
          width: 36rpx;
          height: 36rpx;
          margin-right: 24rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .item_b {
          flex-shrink: 0;
          width: 80rpx;
          height: 80rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          margin-right: 24rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .item_c {
          flex: 1;
          display: flex;
          align-items: flex-start;
          flex-direction: column;
          text {
            &:nth-child(1) {
              font-size: 30rpx;
              font-weight: 400;
              color: #222222;
            }
            &:nth-child(2) {
              font-size: 26rpx;
              font-weight: 400;
              color: #777777;
            }
          }
        }
      }
    }
    .footer1 {
      width: 100%;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14rpx 0 0 0;
      box-sizing: border-box;
      .footer_left {
        flex: 1;
        display: flex;
        flex-direction: column;
        .footer_left_a {
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
        .footer_left_b {
          font-size: 24rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
      }
      .footer_btn {
        flex-shrink: 0;
        width: 100%;
        height: 72rpx;
        line-height: 72rpx;
        text-align: center;
        background: #025eef;
        border-radius: 8rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #ffffff;
        border-radius: 44rpx;
      }
    }
  }
         .list_item {
            width: 100%;
            height: 98rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1rpx solid #E5E5E5;
  .head {
    width: 100%;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    font-weight: 400;
    color: #666666;
  }
            .list_item_label {
               flex-shrink: 0;
               display: flex;
               align-items: center;
  .list {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    margin-bottom: 20rpx;
               text {
                  &:nth-child(1) {
                     font-size: 30rpx;
                     font-weight: 400;
                     color: #222222;
                  }
    &:last-child {
      margin: 0 !important;
    }
                  &:nth-child(2) {
                     font-size: 30rpx;
                     font-weight: 400;
                     color: #E42D2D;
                  }
               }
            }
    .list_item {
      width: 100%;
      height: 98rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #e5e5e5;
            .list_item_content {
               flex: 1;
               height: 100%;
               margin-left: 30rpx;
               display: flex;
               align-items: center;
               justify-content: flex-end;
      .list_item_label {
        flex-shrink: 0;
        display: flex;
        align-items: center;
               text {
                  font-size: 28rpx;
                  font-weight: 400;
                  color: #999999;
                  margin-right: 6rpx;
               }
        text {
          &:nth-child(1) {
            font-size: 30rpx;
            font-weight: 400;
            color: #222222;
          }
               input {
                  width: 100%;
                  height: 100%;
                  text-align: right;
                  font-size: 28rpx;
                  font-weight: 400;
                  color: #222222;
               }
            }
         }
      }
          &:nth-child(2) {
            font-size: 30rpx;
            font-weight: 400;
            color: #e42d2d;
          }
        }
      }
      .cate {
         width: 100%;
         padding: 30rpx;
         box-sizing: border-box;
         background-color: #ffffff;
         margin-top: 20rpx;
      .list_item_content {
        flex: 1;
        height: 100%;
        margin-left: 30rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;
         .cate_head {
            font-size: 32rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #222222;
         }
        text {
          font-size: 28rpx;
          font-weight: 400;
          color: #999999;
          margin-right: 6rpx;
        }
         .cate_list {
            width: 100%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 30rpx;
        input {
          width: 100%;
          height: 100%;
          text-align: right;
          font-size: 28rpx;
          font-weight: 400;
          color: #222222;
        }
      }
    }
  }
            .cate_list_item {
               height: 64rpx;
               padding: 0 20rpx;
               box-sizing: border-box;
               background-color: #EEEEEE;
               border-radius: 4rpx;
               margin-right: 20rpx;
               margin-bottom: 20rpx;
               display: flex;
               align-items: center;
  .cate {
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    margin-top: 20rpx;
               &:last-child {
                  margin-right: 0 !important;
               }
    .cate_head {
      font-size: 32rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #222222;
    }
               text {
                  font-size: 26rpx;
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  color: #333333;
                  margin-right: 30rpx;
               }
            }
         }
    .cate_list {
      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 30rpx;
         .cate_add {
            width: 200rpx;
            height: 50rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(2, 94, 239, 0);
            border-radius: 25rpx;
            border: 1rpx solid #025EEF;
            font-size: 22rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            margin-top: 20rpx;
            color: #025EEF;
            margin: 0 auto;
         }
      }
      .cate_list_item {
        height: 64rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
        background-color: #eeeeee;
        border-radius: 4rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;
      .zw {
         width: 100%;
         height: calc(env(safe-area-inset-bottom) + 118rpx);
      }
        &:last-child {
          margin-right: 0 !important;
        }
      .footer {
         width: 100%;
         padding: 0 30rpx;
         padding-bottom: env(safe-area-inset-bottom);
         box-sizing: border-box;
         position: fixed;
         left: 0;
         bottom: 30rpx;
        text {
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #333333;
          margin-right: 30rpx;
        }
      }
    }
         .footer_btn {
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            background: #025EEF;
            border-radius: 44rpx;
            font-size: 32rpx;
            font-weight: 500;
            color: #FFFFFF;
         }
      }
   }
    .cate_add {
      width: 200rpx;
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(2, 94, 239, 0);
      border-radius: 25rpx;
      border: 1rpx solid #025eef;
      font-size: 22rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      margin-top: 20rpx;
      color: #025eef;
      margin: 0 auto;
    }
  }
  .zw {
    width: 100%;
    height: calc(env(safe-area-inset-bottom) + 118rpx);
  }
  .footer {
    width: 100%;
    padding: 0 30rpx;
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 30rpx;
    .footer_btn {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      background: #025eef;
      border-radius: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
    }
  }
}
</style>