打卡相关

zhangwei

2024-08-28 91a6d368073912a2e54bbd8c8a39c44d783881d8

 src/pages/checkin/checkin.vue

@@ -2,28 +2,43 @@
   <view>
      <view class='chuany-flex camera-fill chuany-justify-center chuany-align-center'>
         <fui-upload immediate :url="`${apiBaseUrl}api/UpFile/UpdateFile`" ref="uploadB" max='1' @success="success"
            @error="error" @complete="complete" width="300" height="300">
            <image v-if="src" :src="src" mode="widthFix" style="width: 300rpx;height: 300rpx;"></image>
            <fui-icon v-else name="camera-fill"></fui-icon>
            @error="error" @complete="complete" width="280" height="280">
            <image v-if="checkPhoto" :src="checkPhoto" mode="widthFix" style="width: 280rpx;height: 280rpx;">
            </image>
            <view class=" chuany-flex chuany-flex-direction chuany-align-center" v-else>
               <fui-icon name="camera-fill"></fui-icon>
               <view class="chuany-font20">拍摄环境照片</view>
            </view>
         </fui-upload>
         <fui-upload ref="uploadB" max='1' @error="error" @complete="completePerson" width="280" height="280">
            <image v-if="src" :src="src" mode="widthFix" style="width: 280rpx;height: 280rpx;"></image>
            <view class=" chuany-flex chuany-flex-direction chuany-align-center" v-else>
               <fui-icon name="addfriends-fill"></fui-icon>
               <view class="chuany-font20">拍摄人脸照片</view>
            </view>
         </fui-upload>
      </view>
      <view class="c-m-30 c-p-t-20 c-p-b-20">
      <view class="c-m-20 chuany-font24">
         为了保证打卡的正确性，‌建议在公司门口或进入办公室的门口再打卡。‌同时，‌确保照片的清晰、‌明亮，‌面部可见。
      </view>
      <view class="c-p-20">
         <view class="chuany-flex chuany-justify-between c-p-t-20">
            <view class="chuany-flex chuany-flex-direction chuany-align-center textclo chuany-font24 step_item"
               v-for="(item,index) in 4">
               <up-avatar shape="square" size="38" src="https://uview-plus.jiangruyi.com/album/1.jpg"
                  @click="previewImage"></up-avatar>
               <view class="line line-active" v-if="index!==3">

      <view>
         <view class="chuany-flex chuany-justify-evenly chuany-flex-wrap c-p-t-20">
            <view
               class="chuany-flex chuany-flex-direction chuany-align-center chuany-justify-around textclo chuany-font24 c-p-b-30 daka"
               :key="index" v-for="(item,index) in dakaList">
               <up-avatar shape="square" size="56" :src="item.checkPhoto"
                  @click="previewImage(item.checkPhoto)"></up-avatar>
               <view class="step_item">
                  <up-icon name="checkmark-circle-fill" :color="item.checktime?'#2979ff':'#e9e8e8'"
                     size="22"></up-icon>
                  <view class="line" :class="item.checkPhoto?'line-active':''"
                     v-if="index!==dakaList.length-1&&index%2==0">
                  </view>
               </view>
               <up-icon name="checkmark-circle-fill" color="#2979ff" size="22"></up-icon>
               <text>已打卡</text>
               <text>10:00</text>
               <text>{{item.checktime?'已打卡':'未打卡'}}</text>
               <text
                  :class="$util.formatDate(item.checktime,true)=='-'?'core-opa':''">{{$util.formatDate(item.checktime,true)}}</text>
            </view>

         </view>
      </view>
      <view class="tabbtns">
@@ -39,22 +54,39 @@
   export default {
      data() {
         return {
            src: ''
            src: '',
            apiBaseUrl,
            orderBiddingId: '', //招工明细OrderBiddingId
            checkPhoto: '', //打卡照片
            faceImg: '', //人脸图片
            dakaList: null
         }
      },
      onLoad(option) {
         let {
            orderid
         } = option
         this.$api.getDaka({
            orderId: orederid
         }).then(res => {
            console.log(res, '打卡');
         })
         this.apiBaseUrl = apiBaseUrl
         let id = option.orderid
         this.orderBiddingId = id
         this.getDaka(id)
      },
      methods: {
         getDaka(id) {
            this.$api.getDaka({
               orderId: id
            }).then(res => {
               if(res.code==1){
                  this.dakaList = res.data.orderBiddingDetailCheck
                  this.dakaList.length = 3
                  if (this.dakaList.length % 2 !== 0) {
                     this.dakaList.push({})
                  }
               }else{
                  this.$util.showToast({
                     title: res.error
                  })
               }
            })
         },
         openCamera() {
            console.log('-----------------')
            // 拍照和相册
            uni.chooseImage({
               count: 1,
@@ -69,18 +101,20 @@
            });

         },

         success(e) {
            //e.res 为服务器返回数据
            //上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
            let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
            console.log(res.data);
            if (res.data.url) {
               enterpriseInfo.businessLicense = res.data.url
               enterpriseInfo.suppliername = res.data.info.name //企业名称
               enterpriseInfo.regtime = res.data.info.setDate //注册时间
               enterpriseInfo.address = res.data.info.address //联系地址
               enterpriseInfo.suppliercode = res.data.info.regNum //企业注册号
               enterpriseInfo.contact = res.data.info.person //联系人
            if (res.data) {
               this.checkPhoto = res.data //打卡照片
               //人脸图片
               // enterpriseInfo.businessLicense = res.data.url
               // enterpriseInfo.suppliername = res.data.info.name //企业名称
               // enterpriseInfo.regtime = res.data.info.setDate //注册时间
               // enterpriseInfo.address = res.data.info.address //联系地址
               // enterpriseInfo.suppliercode = res.data.info.regNum //企业注册号
               // enterpriseInfo.contact = res.data.info.person //联系人
            }
         },
         error() {
@@ -92,9 +126,48 @@
            }
            console.log(e, '删除')
         },
         previewImage() {
         completePerson(e) {
            this.$util.pathToBase64(e.urls[0]).then(res => {
               this.faceImg = res
            })
         },
         previewImage(url) {
            uni.previewImage({
               urls: ['https://uview-plus.jiangruyi.com/album/1.jpg']
               urls: [url]
            })
         },
         enroll() {
            if (!this.checkPhoto) {
               this.$util.showToast({
                  title: "请拍摄环境照片！",
                  icon: "error"
               })
               return
            }
            if (!this.faceImg) {
               this.$util.showToast({
                  title: "请拍摄人脸照片！",
                  icon: "error"
               })
               return
            }
            let obj = {
               OrderId: this.orderBiddingId, //招工明细OrderBiddingId
               checkPhoto: this.checkPhoto, //打卡照片
               faceImg: this.faceImg,
            }
            this.$api.saveDaka(obj).then(res => {
               if (res.code == 1) {
                  this.$util.showToast({
                     title: "打卡成功！",
                     icon: "success"
                  })
                  this.getDaka(this.orderBiddingId)
               } else {
                  this.$util.showToast({
                     title: res.data,
                  })
               }
            })
         }
      }
@@ -103,10 +176,15 @@

<style lang="scss">
   .camera-fill {
      width: 400rpx;
      height: 400rpx;
      // width: 400rpx;
      // height: 400rpx;
      margin: 20rpx auto;
      border-radius: 20rpx;
   }

   .daka {
      width: 260rpx;
      height: 230rpx;
   }

   .step_item {
@@ -116,12 +194,13 @@

      .line {
         position: absolute;
         top: 92rpx;
         left: 52rpx;
         top: 17rpx;
         left: 35rpx;
         content: "";
         height: 4rpx;
         width: 192rpx;
         width: 310rpx;
         background-color: #e9e8e8;
         z-index: -1;
      }

      .line-active {