ll

liukangdong

2024-12-13 75428aa3f870b62c7ccc7ebc7c0360c5fa4fb3e6

 h5/pages/userinfo/userinfo.vue

@@ -1,409 +1,468 @@
<template>
   <view class="container">
      <view class="visitor-form">
         <view class="cell">
            <view class="title"><b>*</b>姓名</view>
            <view class="content">
               <input class="input" @focus="showKeyboard = true" @blur="showKeyboard = false" placeholder-style="color: #999999;" maxlength="30" v-model="visitorData.name" placeholder="请输入您的真实姓名" />
            </view>
         </view>
         <view class="cell">
            <view class="title"><b>*</b>手机号</view>
            <view class="content">
               <input type="number" @focus="showKeyboard = true" @blur="showKeyboard = false" class="input" maxlength="11" placeholder-style="color: #999999;" v-model="visitorData.phone" placeholder="请输入您的手机号" />
            </view>
         </view>
         <view class="cell">
            <view class="title"><b>*</b>证件类型</view>
            <view class="content" @click="show = true">
               <text :style="{color: visitorData.idcardTypeName ? '#000000' : ''}">{{visitorData.idcardTypeName ? visitorData.idcardTypeName : '请选择'}}</text>
               <u-icon name="arrow-right" color="#CCCCCC" size="16" class="ml6"></u-icon>
            </view>
         </view>
         <view class="cell">
            <view class="title"><b>*</b>证件号码</view>
            <view class="content">
               <input class="input" maxlength="18" @focus="showKeyboard = true" @blur="showKeyboard = false" placeholder-style="color: #999999;" v-model="visitorData.idcardNo" placeholder="请输入您的证件号码" />
            </view>
         </view>
         <view class="empty"></view>
         <view class="cell">
            <view class="title"><b>*</b>公司名称</view>
            <view class="content">
               <input class="input" maxlength="50" @focus="showKeyboard = true" @blur="showKeyboard = false" placeholder-style="color: #999999;" v-model="visitorData.companyName" placeholder="请输入您的公司名称" />
            </view>
         </view>
         <view class="cell">
            <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')" v-if="!visitorData.faceImgUrl">
                  <u-icon name="plus" color="rgb(153, 153, 153)" size="20"></u-icon>
               </view>
               <view class="content_uplaod" @click="upload('faceImg')" v-else>
                  <image :src="visitorData.faceImgUrl" mode="widthFix"></image>
               </view>
            </view>
         </view>
         <view style="height: 20rpx; background-color: #F7F7F7;"></view>
         <!-- <view class="cell">
            <view class="title">健康证<b v-if="visit === '1'">*</b></view>
            <view class="content">
               <view class="content_uplaod" @click="upload('imgurl')" v-if="!visitorData.imgurlUrl">
                  <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 v-if="!showKeyboard" class="footer-box">
         <view class="submit-button" @click="submit">下一步</view>
      </view>
      <!-- <tly-picture-cut ref="tlyPictureCut" :pictureSrc="photoSrc" @createImg="uploadImg"></tly-picture-cut> -->
      <u-picker :show="show" :columns="columns" keyName="name" @cancel="show = false" @confirm="confirm"></u-picker>
      <qf-image-cropper ref="cropper" :width="280" :height="280" :radius="0" fileType="jpg" @crop="uploadImg"></qf-image-cropper>
   </view>
</template>

<script>
   import tlyPictureCut from "@/components/tly-picture-cut/tlyPictureCut.vue";
   import QfImageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue';
   import { mapState } from 'vuex'
   import { uploadAvatar } from "@/utils/config"
   import { getSystemDictData, visitorSub } from '@/api'
   export default {
      data() {
         return {
            photoSrc: "",
            show: false,
            showKeyboard: false,
            visit: '',
            type: '',
            columns: [[{name: '身份证', id: 0}, {name: '港澳证件', id: 1},{name: '护照', id: 2}]],
            fileList: [],
            visitorData: {
               userAnswerId: '',
               name: '',
               phone: '',
               idcardType: 0,
               idcardTypeName: '身份证',
               idcardNo: '',
               faceImg: '',
               faceImgUrl: '',
               imgurl: '',
               imgurlUrl: '',
               companyName: ''
            }
<template>

   <view class="container">

      <view class="visitor-form">

         <view class="cell">

            <view class="title"><b>*</b>姓名</view>

            <view class="content">

               <input class="input" @focus="showKeyboard = true" @blur="showKeyboard = false"

                  placeholder-style="color: #999999;" maxlength="30" v-model="visitorData.name" placeholder="请输入您的真实姓名" />

            </view>

         </view>

         <view class="cell">

            <view class="title"><b>*</b>手机号</view>

            <view class="content">

               <input type="number" @focus="showKeyboard = true" @blur="showKeyboard = false" class="input" maxlength="11"

                  placeholder-style="color: #999999;" v-model="visitorData.phone" placeholder="请输入您的手机号" />

            </view>

         </view>

         <view class="cell">

            <view class="title"><b>*</b>证件类型</view>

            <view class="content" @click="show = true">

               <text

                  :style="{color: visitorData.idcardTypeName ? '#000000' : ''}">{{visitorData.idcardTypeName ? visitorData.idcardTypeName : '请选择'}}</text>

               <u-icon name="arrow-right" color="#CCCCCC" size="16" class="ml6"></u-icon>

            </view>

         </view>

         <view class="cell">

            <view class="title"><b>*</b>证件号码</view>

            <view class="content">

               <input class="input" maxlength="18" @focus="showKeyboard = true" @blur="showKeyboard = false"

                  placeholder-style="color: #999999;" v-model="visitorData.idcardNo" placeholder="请输入您的证件号码" />

            </view>

         </view>

         <view class="empty"></view>

         <view class="cell">

            <view class="title"><b>*</b>公司名称</view>

            <view class="content">

               <input class="input" maxlength="50" @focus="showKeyboard = true" @blur="showKeyboard = false"

                  placeholder-style="color: #999999;" v-model="visitorData.companyName" placeholder="请输入您的公司名称" />

            </view>

         </view>

         <view class="cell">

            <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')" v-if="!visitorData.faceImgUrl">

                  <u-icon name="plus" color="rgb(153, 153, 153)" size="20"></u-icon>

               </view>

               <view class="content_uplaod" @click="upload('faceImg')" v-else>

                  <image :src="visitorData.faceImgUrl" mode="widthFix"></image>

               </view>

            </view>

         </view>

         <view style="height: 20rpx; background-color: #F7F7F7;"></view>

         <!-- <view class="cell">

            <view class="title">健康证<b v-if="visit === '1'">*</b></view>

            <view class="content">

               <view class="content_uplaod" @click="upload('imgurl')" v-if="!visitorData.imgurlUrl">

                  <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 v-if="!showKeyboard" class="footer-box">

         <view class="submit-button" @click="submit">下一步</view>

      </view>

      <!-- <tly-picture-cut ref="tlyPictureCut" :pictureSrc="photoSrc" @createImg="uploadImg"></tly-picture-cut> -->

      <u-picker :show="show" :columns="columns" keyName="name" @cancel="show = false" @confirm="confirm"></u-picker>

      <qf-image-cropper ref="cropper" :width="280" :height="280" :radius="0" fileType="jpg"

         @crop="uploadImg"></qf-image-cropper>

   </view>

</template>



<script>

   import tlyPictureCut from "@/components/tly-picture-cut/tlyPictureCut.vue";

   import QfImageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue';

   import {

      mapState

   } from 'vuex'

   import {

      uploadAvatar

   } from "@/utils/config"

   import {

      getSystemDictData,

      visitorSub

   } from '@/api'

   export default {

      data() {

         return {

            photoSrc: "",

            show: false,

            showKeyboard: false,

            visit: '',

            type: '',

            columns: [

               [{

                  name: '身份证',

                  id: 0

               }, {

                  name: '港澳证件',

                  id: 1

               }, {

                  name: '护照',

                  id: 2

               }]

            ],

            fileList: [],

            visitorData: {

               userAnswerId: '',

               name: '',

               phone: '',

               idcardType: 0,

               idcardTypeName: '身份证',

               idcardNo: '',

               faceImg: '',

               faceImgUrl: '',

               imgurl: '',

               imgurlUrl: '',

               companyName: ''

            }

         }

      },

      components: {

         tlyPictureCut,

         QfImageCropper

      },



      onLoad(option) {

         const visitorData = uni.getStorageSync('member')

         if (visitorData.faceImg) {

            visitorData.faceImgUrl = visitorData.prefixUrl + visitorData.faceImg

         }

         if (visitorData && visitorData.name) {

            this.visitorData = visitorData

         }

         this.visitorData.companyName = visitorData.visitCompanyName

         this.visitorData.idcardNo = visitorData.idcardDecode

         if (this.visitorData.idcardType === 0) {

            this.visitorData.idcardTypeName = '身份证'

         } else if (this.visitorData.idcardType === 1) {

            this.visitorData.idcardTypeName = '港澳证件'

         } else if (this.visitorData.idcardType === 2) {

            this.visitorData.idcardTypeName = '护照'

         }
      },
      components: { tlyPictureCut, QfImageCropper },
		
      onLoad(option) {
         const visitorData = uni.getStorageSync('visitorData')
         if(visitorData && visitorData.name){
            this.visitorData = visitorData
         }
         // if (this.member ) {
         //    this.visitorData.name = this.member.name
         //    this.visitorData.phone = this.member.phone
         //    this.visitorData.idcardNo = this.member.idcardDecode
         //    this.visitorData.companyName = this.member.visitCompanyName
         //    this.visitorData.faceImg = this.member.faceImg
         //    if (this.member.faceImg) {
         //       this.visitorData.faceImgUrl = this.member.prefixUrl + this.member.faceImg
         //    }
         //    this.visitorData.imgurl = this.member.imgurl
         //    if (this.member.imgurl) {
         //       this.visitorData.imgurlUrl = this.member.prefixUrl + this.member.imgurl
         //    }
         //    this.visitorData.idcardType = this.member.idcardType
         //    if (this.member.idcardType === 0) {
         //       this.visitorData.idcardTypeName = '身份证'
         //    } else if (this.member.idcardType === 1) {
         //       this.visitorData.idcardTypeName = '港澳证件'
         //    } else if (this.member.idcardType === 2) {
         //       this.visitorData.idcardTypeName = '护照'
         //    }
         // }
         this.visitorData.userAnswerId = option.answerId || ''
         // this.getVisit()
         // uni.$on('update', (data) => {
         //    this.uploadImg(data.tempFilePath)
         // })
      },

      methods: {
         submit() {
            const { visitorData } = this
            if (!this.visitorData.name) return uni.showToast({
               title: '姓名不能为空',
               icon: 'none'
            })
            if (!this.visitorData.phone) return uni.showToast({
               title: '手机号不能为空',
               icon: 'none'
            })
            const regExp = /^1[3456789]\d{9}$/;
            if (!regExp.test(this.visitorData.phone)) return uni.showToast({
               title: '手机号格式错误',
               icon: 'none'
            })
            if (!String(this.visitorData.idcardType)) return uni.showToast({
               title: '证件类型不能为空',
               icon: 'none'
            })
            if (!this.visitorData.idcardNo) return uni.showToast({
               title: '证件号码不能为空',
               icon: 'none'
            })
            if (this.visitorData.idcardType === 0) {
               const regex = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dxX]$/;
               if (!regex.test(this.visitorData.idcardNo)) return uni.showToast({
                  title: '证件号码格式错误',
                  icon: 'none'
               })
            }
            if (!this.visitorData.companyName) return uni.showToast({
               title: '公司不能为空',
               icon: 'none'
            })
            if (!this.visitorData.faceImg) return uni.showToast({
               title: '人脸照片不能为空',
               icon: 'none'
            })
            // if (this.visit === '1') {
            //    if (!this.visitorData.imgurl) return uni.showToast({
            //       title: '健康证不能为空',
            //       icon: 'none'
            //    })
            // }
            uni.setStorageSync('visitorData', this.visitorData)
            uni.navigateTo({
               url: `/pages/visitorApplication/visitorApplication?data=${JSON.stringify(this.visitorData)}`
            });
         },
         getVisit() {
            // 是否需要 健康证
            getSystemDictData({
               dictCode: 'SYSTEM',
               label: 'HEALTH_CARD'
            }).then(res => {
               if (res.code === 200) {
                  this.visit = res.data.code
               }
            })
         },
         uploadImg(file) {
            var that = this
            that.$refs.cropper.close()
            uni.showLoading({ title: '上传中', mask: true });
            uni.uploadFile({
               url: uploadAvatar,
               filePath: file.tempFilePath,
               name: 'file',
               formData: {
                  folderCode: 'MEMBER_IMG',
                  isFace: 0
               },
               success: (uploadFileRes) => {
                  let res = JSON.parse(uploadFileRes.data)
                  this.visitorData.faceImg = res.data.halfPath
                  this.visitorData.faceImgUrl = res.data.prefixPath + res.data.folder + res.data.halfPath
               },
               fail(err) {
                  alert('失败')
               },
               complete() {
                  uni.hideLoading();
               }
            });
         },
         upload(type) {
            var that = this
            that.type = type
            if (type === 'faceImg') {
               that.$refs.cropper.chooseImage()
               return
            }
            uni.chooseImage({
               count: 1,
               success: (chooseImageRes) => {
                  // if (type === 'faceImg') {
                  //    that.photoSrc = chooseImageRes.tempFilePaths[0];
                  //    that.$refs.tlyPictureCut.showPop();
                  // }
                  if (type === 'imgurl') {
                     uni.showLoading({ title: '上传中', mask: true });
                     uni.uploadFile({
                        url: uploadAvatar,
                        filePath: chooseImageRes.tempFilePaths[0],
                        name: 'file',
                        formData: {
                           folderCode: 'MEMBER_IMG'
                        },
                        timeout: 60000,
                        success: (uploadFileRes) => {
                           let res = JSON.parse(uploadFileRes.data)
                           that.visitorData.imgurl = res.data.halfPath
                           that.visitorData.imgurlUrl = res.data.prefixPath + res.data.folder + res.data.halfPath
                        },
                        complete() {
                           uni.hideLoading();
                        }
                     });
                  }
               },
               fail(err) {
                  alert('api报错')
               }
            });
         },
         confirm(e) {
            this.visitorData.idcardType = e.value[0].id
            this.visitorData.idcardTypeName = e.value[0].name
            this.show = false
         }
      }
   }
</script>

<style lang="scss">
   page {
      background-color: #F7F7F7 !important;
   }
   .u-upload__button {
      margin: 0 !important;
   }
   .content_uplaod {
      width: 120rpx;
      height: 120rpx;
      background: #F7F7F7;
      border-radius: 8rpx;
      border: 2rpx solid #E5E5E5;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
   }
   .content_uplaod image {
      width: 100%;
      height: 100%;
   }
   .empty{
      width: 750rpx;
      height: 20rpx;
      margin: 0 -30rpx;
      background-color: #f7f7f7;;
   }
   .title {
      font-size: 30rpx;
      font-weight: 400;
      color: #222222;
      display: flex;
      align-items: center;
   }

   .title b {
      color: #E42D2D;
      margin-right: 4rpx;
   }
	
   .title1 {
      display: flex;
      flex-direction: column;
      .title1_a {
         font-size: 30rpx !important;
         font-weight: 400;
         color: #222222;
         display: flex;
         align-items: center;
         margin-bottom: 20rpx;
         b {
            color: #E42D2D;
            margin-right: 4rpx;

         }
      }
      .title1_b {
         font-size: 24rpx !important;
         font-weight: 400;
         color: #999999;
      }
   }

   .add-other {
      border: 1rpx solid #4d99a8;
      color: #4d99a8;
      font-size: 11rpx;
      padding: 0 12rpx;
      height: 32rpx;
      line-height: 32rpx;
      width: 120rpx;
      text-align: center;
      border-radius: 24rpx;
      margin: 20rpx auto;
   }

   .footer-box {
      width: 100%;
      position: fixed;
      bottom: 30rpx;
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
   }

   .submit-button {
      width: calc(100% - 60rpx);
      height: 88rpx;
      line-height: 88rpx;
      background: #4d99a8;
      border-radius: 4rpx;
      color: #fff;
      border-radius: 44rpx;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
   }
</style>

<style lang="scss" scoped>
   .popup-content {
      padding: 20rpx;
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-flow: column;

      .input {
         border: 1rpx solid #ccc;
         border-radius: 4rpx;
         padding: 4rpx 12rpx;
         font-size: 28rpx;
         font-weight: 400;
         color: #333333;
      }

      .respondent-item {
         padding: 10rpx;
         border-bottom: 1rpx solid #eee;
         cursor: pointer;

         &:hover {
            background-color: #eee;
         }
      }

      .van-list {
         flex: 1;
         overflow: auto;
      }
   }
         if (this.visitorData.imgurl) {
               this.visitorData.imgurlUrl = this.visitorData.prefixUrl + this.visitorData.imgurl
            }

         // if (this.member ) {

         //    this.visitorData.name = this.member.name

         //    this.visitorData.phone = this.member.phone

         //    this.visitorData.idcardNo = this.member.idcardDecode

         //    this.visitorData.companyName = this.member.visitCompanyName

         //    this.visitorData.faceImg = this.member.faceImg

         //    if (this.member.faceImg) {

         //       this.visitorData.faceImgUrl = this.member.prefixUrl + this.member.faceImg

         //    }

         //    this.visitorData.imgurl = this.member.imgurl

         //    if (this.member.imgurl) {

         //       this.visitorData.imgurlUrl = this.member.prefixUrl + this.member.imgurl

         //    }

         //    this.visitorData.idcardType = this.member.idcardType

         //    if (this.member.idcardType === 0) {

         //       this.visitorData.idcardTypeName = '身份证'

         //    } else if (this.member.idcardType === 1) {

         //       this.visitorData.idcardTypeName = '港澳证件'

         //    } else if (this.member.idcardType === 2) {

         //       this.visitorData.idcardTypeName = '护照'

         //    }

         // }

         this.visitorData.userAnswerId = option.answerId || ''

         // this.getVisit()

         // uni.$on('update', (data) => {

         //    this.uploadImg(data.tempFilePath)

         // })

      },



      methods: {

         submit() {

            const {

               visitorData

            } = this

            if (!this.visitorData.name) return uni.showToast({

               title: '姓名不能为空',

               icon: 'none'

            })

            if (!this.visitorData.phone) return uni.showToast({

               title: '手机号不能为空',

               icon: 'none'

            })

            const regExp = /^1[3456789]\d{9}$/;

            if (!regExp.test(this.visitorData.phone)) return uni.showToast({

               title: '手机号格式错误',

               icon: 'none'

            })

            if (!String(this.visitorData.idcardType)) return uni.showToast({

               title: '证件类型不能为空',

               icon: 'none'

            })

            if (!this.visitorData.idcardNo) return uni.showToast({

               title: '证件号码不能为空',

               icon: 'none'

            })

            if (this.visitorData.idcardType === 0) {

               const regex = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dxX]$/;

               if (!regex.test(this.visitorData.idcardNo)) return uni.showToast({

                  title: '证件号码格式错误',

                  icon: 'none'

               })

            }

            if (!this.visitorData.companyName) return uni.showToast({

               title: '公司不能为空',

               icon: 'none'

            })

            if (!this.visitorData.faceImg) return uni.showToast({

               title: '人脸照片不能为空',

               icon: 'none'

            })

            // if (this.visit === '1') {

            //    if (!this.visitorData.imgurl) return uni.showToast({

            //       title: '健康证不能为空',

            //       icon: 'none'

            //    })

            // }

            uni.setStorageSync('visitorData', this.visitorData)

            uni.navigateTo({

               url: `/pages/visitorApplication/visitorApplication?data=${JSON.stringify(this.visitorData)}`

            });

         },

         getVisit() {

            // 是否需要 健康证

            getSystemDictData({

               dictCode: 'SYSTEM',

               label: 'HEALTH_CARD'

            }).then(res => {

               if (res.code === 200) {

                  this.visit = res.data.code

               }

            })

         },

         uploadImg(file) {

            var that = this

            that.$refs.cropper.close()

            uni.showLoading({

               title: '上传中',

               mask: true

            });

            uni.uploadFile({

               url: uploadAvatar,

               filePath: file.tempFilePath,

               name: 'file',

               formData: {

                  folderCode: 'MEMBER_IMG',

                  isFace: 0

               },

               success: (uploadFileRes) => {

                  let res = JSON.parse(uploadFileRes.data)

                  this.visitorData.faceImg = res.data.halfPath

                  this.visitorData.faceImgUrl = res.data.prefixPath + res.data.folder + res.data.halfPath

               },

               fail(err) {

                  alert('失败')

               },

               complete() {

                  uni.hideLoading();

               }

            });

         },

         upload(type) {

            var that = this

            that.type = type

            if (type === 'faceImg') {

               that.$refs.cropper.chooseImage()

               return

            }

            uni.chooseImage({

               count: 1,

               success: (chooseImageRes) => {

                  // if (type === 'faceImg') {

                  //    that.photoSrc = chooseImageRes.tempFilePaths[0];

                  //    that.$refs.tlyPictureCut.showPop();

                  // }

                  if (type === 'imgurl') {

                     uni.showLoading({

                        title: '上传中',

                        mask: true

                     });

                     uni.uploadFile({

                        url: uploadAvatar,

                        filePath: chooseImageRes.tempFilePaths[0],

                        name: 'file',

                        formData: {

                           folderCode: 'MEMBER_IMG'

                        },

                        timeout: 60000,

                        success: (uploadFileRes) => {

                           let res = JSON.parse(uploadFileRes.data)

                           that.visitorData.imgurl = res.data.halfPath

                           that.visitorData.imgurlUrl = res.data.prefixPath + res.data.folder + res.data.halfPath

                        },

                        complete() {

                           uni.hideLoading();

                        }

                     });

                  }

               },

               fail(err) {

                  alert('api报错')

               }

            });

         },

         confirm(e) {

            this.visitorData.idcardType = e.value[0].id

            this.visitorData.idcardTypeName = e.value[0].name

            this.show = false

         }

      }

   }

</script>



<style lang="scss">

   page {

      background-color: #F7F7F7 !important;

   }



   .u-upload__button {

      margin: 0 !important;

   }



   .content_uplaod {

      width: 120rpx;

      height: 120rpx;

      background: #F7F7F7;

      border-radius: 8rpx;

      border: 2rpx solid #E5E5E5;

      display: flex;

      align-items: center;

      justify-content: center;

      overflow: hidden;

   }



   .content_uplaod image {

      width: 100%;

      height: 100%;

   }



   .empty {

      width: 750rpx;

      height: 20rpx;

      margin: 0 -30rpx;

      background-color: #f7f7f7;

      ;

   }



   .title {

      font-size: 30rpx;

      font-weight: 400;

      color: #222222;

      display: flex;

      align-items: center;

   }



   .title b {

      color: #E42D2D;

      margin-right: 4rpx;

   }



   .title1 {

      display: flex;

      flex-direction: column;



      .title1_a {

         font-size: 30rpx !important;

         font-weight: 400;

         color: #222222;

         display: flex;

         align-items: center;

         margin-bottom: 20rpx;



         b {

            color: #E42D2D;

            margin-right: 4rpx;



         }

      }



      .title1_b {

         font-size: 24rpx !important;

         font-weight: 400;

         color: #999999;

      }

   }



   .add-other {

      border: 1rpx solid #4d99a8;

      color: #4d99a8;

      font-size: 11rpx;

      padding: 0 12rpx;

      height: 32rpx;

      line-height: 32rpx;

      width: 120rpx;

      text-align: center;

      border-radius: 24rpx;

      margin: 20rpx auto;

   }



   .footer-box {

      width: 100%;

      position: fixed;

      bottom: 30rpx;

      height: 80rpx;

      display: flex;

      justify-content: center;

      align-items: center;

   }



   .submit-button {

      width: calc(100% - 60rpx);

      height: 88rpx;

      line-height: 88rpx;

      background: #4d99a8;

      border-radius: 4rpx;

      color: #fff;

      border-radius: 44rpx;

      font-size: 32rpx;

      display: flex;

      align-items: center;

      justify-content: center;

   }

</style>



<style lang="scss" scoped>

   .popup-content {

      padding: 20rpx;

      height: 100%;

      overflow: hidden;

      display: flex;

      flex-flow: column;



      .input {

         border: 1rpx solid #ccc;

         border-radius: 4rpx;

         padding: 4rpx 12rpx;

         font-size: 28rpx;

         font-weight: 400;

         color: #333333;

      }



      .respondent-item {

         padding: 10rpx;

         border-bottom: 1rpx solid #eee;

         cursor: pointer;



         &:hover {

            background-color: #eee;

         }

      }



      .van-list {

         flex: 1;

         overflow: auto;

      }

   }

</style>