打卡登记，数据驾驶舱页面编写，调整部分按钮样式。调整出租房管理页面样式

Lou

2023-12-04 ae820a43aa6b20bea341e78d1bbbc15db5a1454a

 subPackage/user/clockIn/index.vue

@@ -1,31 +1,27 @@
<template>
   <view>
      <view class="content bgc-ff">
         <u-form labelPosition="left" :model="info" :rules="rules" ref="uForm" labelWidth="90"
         <u-form labelPosition="left" :model="info" :rules="rules" ref="form" labelWidth="90"
            :labelStyle="{fontSize:'28rpx'}">
            <u-form-item label="工作主题" prop="info.title" borderBottom ref="item1">
               <u-input v-model="info.title" border="none" placeholder="请输入工作主题" placeholderClass="f-28 c-99"
            <u-form-item label="工作主题" prop="info.workTheme" borderBottom>
               <u-input v-model="info.workTheme" border="none" placeholder="请输入工作主题" placeholderClass="f-28 c-99"
                  inputAlign="right"></u-input>
            </u-form-item>
            <u-form-item label="当前位置" borderBottom ref="item1">
               <u-input v-model="info.address" border="none"  placeholderClass="f-28 c-99"
                  inputAlign="right">
                  <template slot="suffix">
                     <button class="location-btn c-main f-24"   @click="getLocation()">获取地址</button>
                  </template>
               </u-input>
            </u-form-item>
				
            <!-- <view class="row flex a-i-c j-c-s-b">
               <text class="f-28">当前位置</text>
               <view class="flex">
                  <view class="f-28">当前位置</view>
                  <button class="location-btn c-main f-24"   @click="getLocation()">获取地址</button>
            <u-form-item label="当前位置" prop="address" borderBottom>
               <view class="address-row flex">
                  <view class="address-content f-28" v-if="info.address">
                     {{info.address}}
                  </view>
                  <view class="address-content f-28 c-99" v-if="!info.address">
                     请选择地址
                  </view>
                  <view class="location-btn c-main f-24" @click="getLocation()">
                     获取地址
                  </view>
               </view>
            </view> -->
				
            <u-form-item label="工作内容" prop="info.content" :borderBottom="false" ref="item1">
               <u-input v-model="info.content" border="none" placeholder="请输入工作内容" placeholderClass="f-28 c-99"
            </u-form-item>
            <u-form-item label="工作内容" prop="info.workContent" :borderBottom="false" ref="item1">
               <u-input v-model="info.workContent" border="none" placeholder="请输入工作内容" placeholderClass="f-28 c-99"
                  inputAlign="right"></u-input>
            </u-form-item>
         </u-form>
@@ -33,7 +29,7 @@
      <view class="upload bgc-ff">
         <view class="f-28">场所图片</view>
         <view class="mt-20">
            <u-upload :fileList="images" :previewFullImage="uploadConfig.previewFullImage"
            <u-upload :fileList="form.images" :previewFullImage="uploadConfig.previewFullImage"
               :accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple" :maxCount="uploadConfig.maxCount"
               :capture="uploadConfig.capture" @afterRead="afterReadImg" @delete="deletePic">
               <view class="upload-item upload-icon flex_base">
@@ -43,9 +39,12 @@
         </view>
      </view>

      <view class="footer">
      <!-- <view class="footer">
         <button class="footer-btn">提交</button>
      </view>
      </view> -->

      <footer-btn @click="submitInfo" />


   </view>

@@ -53,40 +52,74 @@

<script>
   import uploadMixin from "@/mixin/uploadMixin";
   import {
      addCheckIn
   } from "@/api/checkIn/checkIn.js"
   export default {
      mixins: [uploadMixin],
      data() {
         return {
            info: {
               title: "",
               content: ""
               workTheme: "",
               workContent: "",
               address: ""
            },
            form: {
               images: []
            },
            rules: {
               'title': {
               'workTheme': {
                  type: 'string',
                  required: true,
                  message: '请输入工作主题',
                  trigger: ['blur', 'change']
               },
               'content': {
               'workContent': {
                  type: 'string',
                  required: true,
                  message: '请输入工作内容',
                  trigger: ['blur', 'change']
               },
               'address': {
                  type: 'string',
                  required: true,
                  message: '请选择地址',
                  trigger: ['blur', 'change']
               },
            },

            images: [

            ]
         }
      },
      methods:{
         getLocation(){
      methods: {
         getLocation() {
            uni.chooseLocation({
               success:(res)=>{
                  console.log(res);
               success: (res) => {
                  this.$set(this.info, "address", res.address);
                  this.$set(this.info, "lat", res.latitude);
                  this.$set(this.info, "lng", res.longitude)
               }
            })
         },

         submitInfo() {
            this.$refs.form.validate().then(valid => {
               if (this.form.images.length > 0) {
                  let urls = []
                  this.form.images.forEach(e => {
                     urls.push(e.name)
                  })
                  this.info.img = urls.join(",")
               }
               addCheckIn(this.info).then(res => {
                  uni.showToast({
                     title: '提交成功',
                     success() {
                        setTimeout(() => {
                           this.$u.func.globalNavigator("", "navBack")
                        }, 1000)
                     }
                  })
               })
            })
         }
      }
@@ -102,23 +135,26 @@
      margin: 20rpx 30rpx;
      padding: 0 30rpx;
   }
   .row{
      padding:20rpx 0;
      border-bottom:1px solid 

   .row {
      padding: 20rpx 0;
      border-bottom: 1px solid
   }
   .location-btn{
      width:116rpx;
      height:46rpx;

   .location-btn {
      width: 116rpx;
      height: 46rpx;
      line-height: 46rpx;
      border-radius: 4rpx;
      border:1px solid currentColor;
      padding:0;
      border: 1px solid currentColor;
      padding: 0;
      background-color: #fff;
   }

   .upload {
      margin: 0 30rpx;
      padding: 30rpx;

      .upload-item {
         width: 140rpx;
         height: 140rpx;
@@ -126,23 +162,26 @@
      }
   }

   .footer {
      width: 100%;
      padding: 30rpx;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 10;
      box-sizing: border-box;
   .address-row {
      flex: 1;
      justify-content: flex-end;
      align-items: center;
   }

      .footer-btn {
         width: 100%;
         height: 78rpx;
         line-height: 78rpx;
         background: linear-gradient(163deg, #01BDFC 0%, #017BFC 100%);
         border-radius: 8rpx;
         color: #fff;
         font-size: 32rpx;
      }
   .address-content {
      width: calc(100% - 116rpx - 20rpx);
      margin-right: 20rpx;
      text-align: right;
   }

   .location-btn {
      width: 116rpx;
      height: 46rpx;
      line-height: 46rpx;
      border-radius: 4rpx;
      border: 1px solid currentColor;
      padding: 0;
      background-color: #fff;
      text-align: center;
   }
</style>