页面搭建

zhangwei

2024-08-20 ef1114c22614762e54e49bc7c600d2a2cd460791

 src/pages/mine/apply.vue

@@ -1,21 +1,34 @@
<template>
   <view class="full-page">
      <view class="content">
         <up-form labelPosition="left" :model="model1" :rules="rules" ref="form1" labelWidth='90'>
            <up-form-item label="身份证正面" prop="userInfo.sex" required borderBottom @click="showSex = true; hideKeyboard()"
         <up-form labelPosition="left" :model="userInfo" :rules="rules" ref="form1" labelWidth='90'>
            <up-form-item label="身份证正面" prop="userInfo.sex" required borderBottom @click="uploadIdCard('FRONT')"
               ref="item1">
               <tem-upload src="/static/positive.png" />
               <fui-upload immediate :url="`${apiBaseUrl}api/UpFile/UploadIdCord?PageName=FRONT`" ref="uploadF"
                  max='1' background='#fff' @success="success" @error="error" @complete="complete" width="300"
                  height="150">
                  <image src="/static/positive.png" mode="widthFix" style="width: 300rpx;height: 150rpx;"></image>
               </fui-upload>
               <!-- <template #right>
                  <up-icon name="arrow-right"></up-icon>
               </template> -->
            </up-form-item>
            <up-form-item label="身份证反面" prop="userInfo.sex" required borderBottom @click="showSex = true; hideKeyboard()"
               ref="item1">
               <tem-upload src="/static/negative.png"/>
					
            <up-form-item label="身份证反面" prop="userInfo.sex" required borderBottom ref="item1">
               <fui-upload immediate :url="`${apiBaseUrl}api/UpFile/UploadIdCord?PageName=Back`" ref="uploadB"
                  max='1' background='#fff' @success="success" @error="error" @complete="complete" width="300"
                  height="150">
                  <image src="/static/negative.png" mode="widthFix" style="width: 300rpx;height: 150rpx;"></image>
               </fui-upload>
            </up-form-item>
            <up-form-item label="姓名" required prop="userInfo.name" borderBottom ref="item1">
               <up-input v-model="state.model1.userInfo.name" border="none" placeholder="请输入姓名"></up-input>
            </up-form-item>
            <up-form-item label="性别" required prop="Gender" borderBottom ref="item2">
               <up-radio-group v-model="userInfo.Gender">
                  <up-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in radiolist1" :key="index"
                     :label="item.name" :name="item.name">
                  </up-radio>
               </up-radio-group>
            </up-form-item>
            <up-form-item label="联系电话" required prop="userInfo.name" borderBottom ref="item1">
               <up-input v-model="state.model1.userInfo.name" border="none" placeholder="请输入联系电话"></up-input>
@@ -24,11 +37,15 @@
               <up-input v-model="state.model1.userInfo.name" border="none" placeholder="请输入身份证号"></up-input>
            </up-form-item>
            <up-form-item label="简历描述" required prop="userInfo.name" borderBottom ref="item1">
               <up-textarea v-model="state.model1.userInfo.name" placeholder="请输入简历描述" ></up-textarea>
               <up-textarea v-model="state.model1.userInfo.name" placeholder="请输入简历描述"></up-textarea>
            </up-form-item>

            <view class="tabbtns">
               <up-button color='#fece01' class="text-69" text="保存"></up-button>
               <up-button color='#fece01' class="text-69" text="人脸识别" @click='IaiAddPerso'></up-button>
            </view>
            <!-- <view class="tabbtns">
               <up-button color='#fece01' class="text-69" text="保存"></up-button>
            </view> -->
         </up-form>
      </view>

@@ -37,10 +54,31 @@

<script setup>
   import {
      apiBaseUrl
   } from '@/common/setting/constVarsHelper.js';
   import {
      getCurrentInstance
   } from 'vue'
   const {
      $upload,
      $api
   } = getCurrentInstance().appContext.config.globalProperties
   import {
      ref,
      reactive
   } from 'vue';

   let radiolist1 = [{
         name: '男',
      },
      {
         name: '女',
      }
   ]
   const userInfo = reactive({
      CordId: '430621198204264616',
      Name: '邹大志',
      Gender: 1
   })
   // 使用 reactive 创建响应式状态  
   const state = reactive({
      showSex: false,
@@ -60,14 +98,44 @@
            name: '保密'
         },
      ],
		

      radio: '',
      switchVal: false,
   });

   // 使用 ref 创建响应式引用  
   const formRef = ref(null);

   const session = wx.createVKSession({
    track: {
       face: {mode: 2}
    },
    version: 'v1',
   })
   // 逐帧分析
   const onFrame = timestamp => {
     // 开发者可以自己控制帧率
     const frame = session.getVKFrame(canvasWidth, canvasHeight)
       if (frame) {
         // 分析完毕，可以拿到帧对象
         doRender(frame)
       }
	
     session.requestAnimationFrame(onFrame)
   }
   session.start(err => {
     if (!err) session.requestAnimationFrame(onFrame)
   })
	
   // 渲染函数
   const doRender = frame => {
     // ...
   }
   const IaiAddPerso = (e) => {
      onFrame()
      // $api.IaiAddPerso({}, userInfo).then(res => {
      //    console.log(res, '人脸识别');
      // })
   }
   // 定义方法  
   function sexSelect(e) {
      state.model1.userInfo.sex = e.name;
@@ -75,11 +143,88 @@
         formRef.value.validateField('userInfo.sex');
      }
   }

   //上传图片Base64
   const uploadFilesFByBase64s = (el) => {
      $api.UpdateFileBase64({
         fileBase64: el
      }).then(res => {

         // if (res.code == 1) {

         uni.hideLoading();
         console.log(res.data.src);
         // } else {

         // }
      });
   }
   const uploadIdCard = (msg, event) => {

      // getBase64(msg.file.url).then(res => {
      //    console.log(res);
      //    // uploadFilesFByBase64s(res)
      // })
      // $api.UpdateFileBase64().then(res=>{
      //    console.log(res,'UpdateFileBase64');
      // })
      $api.UploadIdCord(msg.file.url, {
         PageName: 'Back'
      }).then(res => {
         console.log(res);
      })
      uni.showLoading({
         title: '上传中...'
      });
      // uni.getFileSystemManager().readFile({
      //    filePath: msg.file.url, // 替换为你的文件路径
      //    encoding: 'base64',
      //    success: res => {
      //       uploadFilesFByBase64s(res.data)
      //       console.log('文件内容的base64：', res.data);
      //    },
      //    fail: err => {
      //       console.error('读取文件失败：', err);
      //    }
      // });

   }
   //上传成功时触发
   const success = (e) => {
      console.log(e)
      //e.res 为服务器返回数据
      //上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
      let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")

      if (res.data.url) {
         userInfo.CordId = res.data.info.idNum
         userInfo.name = res.data.info.name
         userInfo.Gender = res.data.info.sex
         //处理结果返回给组件 
         //res.data.url为上传成功后返回的图片地址
         //e.index为图片索引值
         // this.$refs.upload.result(res.data.url, e.index)
      }
   }
   //上传失败时触发
   const error = (e) => {}
   //选择图片或上传完成时触发
   const complete = (e) => {
      if (e.action == 'delete') {
         // 删除处理
      }
      console.log(e, '删除')

   }
</script>

<style>
   .content{
   .content {
      background-color: #fff;
      padding: 0 20rpx;
   }

   .fui-upload__item {
      margin-top: 20rpx !important;
   }
</style>