MingGaoApp_vue/MingGaoApp/pages/index/clockDetail.vue

<template>
  <view class="clock-details">
    <view class="clock-details__header">
      <view class="clock-details__title">
        <uni-icons type="location-filled" color="#fff"></uni-icons>
        <view class="text">
          {{ address || '暂未获取到具体地址' }}
        </view>
      </view>
      <view
        class="clock-details__title fixed-width"
        @click="updateCurrentLocation"
      >
        <uni-icons
          :type="isPendingLocation ? 'spinner-cycle' : 'loop'"
          color="#fff"
        ></uni-icons>
        <view class="text"> 重新定位 </view>
      </view>
    </view>
    <view class="clock-details__body">
      <view class="clock-details__img-container">
        <view class="clock-details__imgs">
          <view
            class="clock-details__img"
            v-for="(item, index) in urllist"
            :key="index + item"
          >
            <view class="icon" @click="handleRemove(index)">
              <u-icon name="close" color="#fff"></u-icon>
            </view>
            <image :src="baseUrl + item" mode="aspectFit" class="img"></image>
          </view>
          <view
            class="clock-details__upload"
            @click="chooseImage"
            v-if="urllist.length < 3"
          >
            <u-icon size="20" name="plus" color="#409eff"></u-icon>
          </view>
        </view>
      </view>
      <view class="clock-details__area">
        <view
          class="clock-details__edit-icon"
          v-if="!isEdit"
          @click="isEdit = !isEdit"
        >
          <uni-icons type="compose" color="#1B76FF"></uni-icons>
        </view>
        <u--textarea
          :focus="true"
          v-else
          v-model="message"
          placeholder=""
          :maxlength="200"
          autoHeight
          border="none"
        >
        </u--textarea>
      </view>
    </view>
    <view class="clock-details__footer">
      <u-button
        type="primary"
        text="签到"
        @click="handleClockInSubmit"
      ></u-button>
    </view>
    <u-loading-page
      loading-text="加载中..."
      :loading="loading"
      font-size="16"
    ></u-loading-page>
  </view>
</template>

<script>
import * as taskService from '@/service/task.js'
import { Debounce } from '@/util/anitthro.js'
import { pullAt } from 'lodash-es'

export default {
  data() {
    return {
      isEdit: false,
      latitude: 0,
      longitude: 0,
      address: '',
      taskID: '',
      message: '',
      logs: [],
      kpsurlL: '',
      urllist: [],
      loading: false,
      isPendingLocation: false,
    }
  },
  onLoad(options) {
    console.warn('clock detail ', options)
    this.message = ''
    this.urllist = []
    this.taskID = options.taskID
  },
  mounted() {
    console.log('mounted clock detail')
    this.updateCurrentLocation()
  },
  methods: {
    updateCurrentLocation() {
      console.log('updateCurrentLocation ')
      if (this.isPendingLocation) {
        return
      }

      this.isPendingLocation = true
      uni.getLocation({
        type: 'gcj02',
        // altitude: true, // 高度
        geocode: true,
        success: (res) => {
          console.warn(res, 'get location')
          console.log('当前位置的经度1：' + res.longitude)
          console.log('当前位置的纬度1：' + res.latitude)

          this.logs.push(
            `center-position:当前位置的经度${res.longitude};当前位置的纬度${res.latitude}`
          )

          this.latitude = res.latitude
          this.longitude = res.longitude

          if (res.address) {
            const {
              country,
              province,
              city,
              district,
              street,
              streetNum,
              poiName,
            } = res.address || {}
            this.address =
              province + city + district + street + streetNum + poiName
          }
        },
        fail(err) {
          console.warn(err, 'get location error')
        },
        complete: () => {
          console.log('complete get location')
          this.isPendingLocation = false
        },
      })
    },
    validate() {
      if (!this.address) {
        throw new Error('请重新获取下定位信息')
      }

      if (!this.taskID) {
        throw new Error('请返回重新进行打卡操作')
      }

      if (!this.latitude && !this.longitude) {
        throw new Error('请重新获取下定位信息')
      }

      if (!this.urllist.length) {
        throw new Error('请先拍摄图片再进行打卡')
      }

      if (!this.message) {
        throw new Error('请输入内容')
      }
    },
    // 签到提交
    handleClockInSubmit() {
      try {
        this.validate()
      } catch (error) {
        return uni.$u.toast(error.message)
      }

      this.loading = true
      console.log(this.urllist, '------------- clock in submit')
      const payload = {
        task_id: this.taskID,
        message: this.message,
        img_list: JSON.stringify(this.urllist),
        address: this.address,
        lng: this.longitude,
        lat: this.latitude,
      }
      console.warn(payload, 'clock in data')
      taskService
        .addTaskClockInData(payload)
        .then((res) => {
          uni.$u.toast('打卡成功')
          // TODO 返回上一页
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/index/index',
            })
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
    chooseImage() {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['camera', 'album'], //从相册选择
        success: (res) => {
          console.log(res)
          // this.urllist.push(res.tempFilePaths[0])
          // this.kpsurlL = res.tempFilePaths[0]

          this.onok({ path: res.tempFilePaths[0] })
        },
      })
    },
    handleRemove(index) {
      console.log(index, 'handle remove', this.urllist)
      if (index !== undefined) {
        // pullAt(this.urllist, index)
        this.urllist.splice(index, 1)
        console.log(this.urllist, 'remove finished ')
      }
    },
    oncancle() {
      this.kpsurlL = ''
    },
    onok(ev) {
      this.loading = true
      Debounce(() => {
        uni.uploadFile({
          url:
            this.baseUrl +
            '/api/api_gateway?method=monitor_manage.cbd_manage.add_img', //仅为示例，非真实的接口地址
          filePath: ev.path,
          name: 'img_file',
          success: (uploadFileRes) => {
            console.log(JSON.parse(uploadFileRes.data).data.src)
            this.urllist.push(JSON.parse(uploadFileRes.data).data.src)
            console.log(this.urllist, ' upload file')
            this.kpsurlL = ''

            this.loading = false
          },
          complete() {
            console.log('上传完成 1355566')
            this.loading = false
          },
        })
      }, 1000)()
    },
  },
}
</script>

<style lang="scss" scoped>
.clock-details {
  &__header {
    height: 320rpx;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-image: url(~@/static/image/task/clock.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }

  &__title {
    // width: 0;
    flex: 1 1 auto;
    padding: 48rpx 24rpx;
    display: flex;
    align-items: flex-start;
    font-size: 12px;
    line-height: 18px;
    color: #ffffff;

    .text {
      margin-left: 10rpx;
    }

    &.fixed-width {
      width: 140rpx;
      flex: 0 0 auto;
    }
  }

  &__upload {
    width: 144rpx;
    height: 144rpx;
    border: 1px dashed #409eff;
    display: flex;
    justify-content: space-around;
    margin-left: 32rpx;
    margin-bottom: 30rpx;
  }

  &__img-container {
    border-bottom: 1px solid rgba(151, 151, 151, 0.09);
    // @include hairline-bottom(rgba(151, 151, 151, 0.09));
  }

  &__imgs {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 40rpx 0;
    margin-left: -32rpx;
  }

  &__img {
    flex: 0 0 auto;
    width: 198rpx;
    height: 198rpx;
    margin-left: 32rpx;
    margin-bottom: 30rpx;
    position: relative;

    .img {
      width: 100%;
      height: 100%;
    }

    .icon {
      position: absolute;
      top: -20rpx;
      right: -20rpx;
      z-index: 9;
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      display: flex;
      justify-content: space-around;
      background-color: red;
    }
  }

  &__body {
    min-height: 600rpx;
    padding: 0 24rpx;
    margin: -156rpx 24rpx 0;
    border-radius: 16rpx;
    background-color: #fff;
  }

  &__area {
    font-size: 12px;
    line-height: 18px;
    color: #656565;
    font-weight: 400;
  }

  &__edit-icon {
    padding: 24rpx 0;
  }

  &__footer {
    position: fixed;
    left: 76rpx;
    right: 76rpx;
    bottom: 110rpx;
  }
}
</style>
<style>
page {
  background: #f7f8fb;
}
</style>