打卡

zhangwei

2024-08-27 71d2e42ae642cecb5e8f6776c702cd20bafe6c01

 src/pages/checkin/checkin.vue

@@ -1,22 +1,131 @@
<template>
   <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>
         </fui-upload>
      </view>
      <view class="c-m-30 c-p-t-20 c-p-b-20">
         为了保证打卡的正确性，‌建议在公司门口或进入办公室的门口再打卡。‌同时，‌确保照片的清晰、‌明亮，‌面部可见。
      </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>
               <up-icon name="checkmark-circle-fill" color="#2979ff" size="22"></up-icon>
               <text>已打卡</text>
               <text>10:00</text>
            </view>

         </view>
      </view>
      <view class="tabbtns">
         <up-button color='#fece01' class="text-69" text="确认打卡" @click="enroll"></up-button>
      </view>
   </view>
</template>

<script>
   import {
      apiBaseUrl
   } from '@/common/setting/constVarsHelper.js';
   export default {
      data() {
         return {
				
            src: ''
         }
      },
      onLoad(option) {
         let {
            orderid
         } = option
         this.$api.getDaka({
            orderId: orederid
         }).then(res => {
            console.log(res, '打卡');
         })
      },
      methods: {
			
         openCamera() {
            console.log('-----------------')
            // 拍照和相册
            uni.chooseImage({
               count: 1,
               sizeType: ["original", "compressed"],
               sourceType: ["camera"],
               success: (res) => {
                  const {
                     tempFilePaths
                  } = res;
                  console.log(tempFilePaths);
               },
            });

         },
         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 //联系人
            }
         },
         error() {

         },
         complete(e) {
            if (e.action == 'delete') {
               // 删除处理
            }
            console.log(e, '删除')
         },
         previewImage() {
            uni.previewImage({
               urls: ['https://uview-plus.jiangruyi.com/album/1.jpg']
            })
         }
      }
   }
</script>

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

</style>
   .step_item {
      position: relative;
      /* width: 144rpx; */
      display: flex;

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

      .line-active {
         background-color: #2979ff;
      }
   }
</style>