sishitongtang-worker/package_sub/pages/addChecks/addChecks.vue

<template>
  <view>
    <cpn-navbar title="督查" :is-back="true"></cpn-navbar>

    <view class="container">
      <u-form :model="form" ref="uForm" :label-width="200" :error-type="['message', 'border-bottom']">
        <u-form-item label="结果" prop="result">
          <u-radio-group v-model="form.result">
            <u-radio v-for="(item, index) in results" :key="item.value" :name="item.value">
              {{ item.label }}
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="督查备注" prop="remark">
          <u-input v-model="form.remark" type="textarea"></u-input>
        </u-form-item>
        <u-form-item label="督查图片">
          <u-upload ref="uUpload" :custom-btn="true" :action="action" :file-list="fileList"
                    :source-type="['camera']">
            <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
              <u-icon name="camera" size="60" color="#c0c4cc" label="点击拍摄" label-pos="bottom"></u-icon>
            </view>
          </u-upload>
        </u-form-item>
        <u-form-item label="所在位置">
          <view>
            <u-button type="primary" size="mini" :throttle-time="3000" @click="getLoaction">获取位置</u-button>
            <view style="word-break: break-all;">
              {{ `${(form.lng || form.lat) ? ('(' + form.lng + ',' + form.lat + ')') : ''}${form.address}` }}
            </view>
          </view>
        </u-form-item>
      </u-form>
      <u-button type="primary" @click="submit">提交</u-button>
    </view>
  </view>
</template>

<script>
import QQMapWX from '@/libs/qqmap-wx-jssdk.js'
import { ROOTPATH } from "@/common/config"
export default {
  data() {
    return {
      action: `${ROOTPATH}/api/admin/upload-file`,
      fileList: [],
      id: "",
      type: "add",
      form: {
        schedule_list_id: "",
        result: 1,
        remark: "",
        file_ids: [],
        lat: "",
        lng: "",
        address: ""
      },
      results: [
        {
          label: "异常",
          value: 0
        },
        {
          label: "正常",
          value: 1
        },
      ],
    };
  },
  methods: {
    load() {
      this.qqmapsdk = new QQMapWX({
        key: 'I5FBZ-LMN33-BK63F-OGUO7-XE3JK-WJBP5'
      });
    },
    getLoaction() {
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: 'gcj02',
          isHighAccuracy: true
        }).then(res => {
          if (res[1]) {
            this.form.lat = res[1]?.latitude
            this.form.lng = res[1]?.longitude

            this.qqmapsdk.reverseGeocoder({
              location: {
                latitude: this.form.lat,
                longitude: this.form.lng
              },
              success: (res) => {
                this.form.address = res.result.address + res.result.formatted_addresses.recommend
                console.log(this.form)
                resolve(res)
              },
              fail: (err) => {
                reject(err)
              }
            })
          } else {
            uni.showToast({
              icon: 'none',
              title: '操作频繁,请稍后再试'
            })
            reject(res)
            console.log(res);
          }
        })
      })
    },

    submit () {
      this.form.file_ids = this.$refs.uUpload.lists.filter(i => i.progress === 100).map(i => i.response?.id)
      if (this.type === 'add') {
        delete this.form.id
      } else {
        this.form.id = this.id
      }
      this.$u.api.adminSaveCheck(this.form).then(res => {
        uni.showToast({
          icon: 'success',
          title: '保存成功',
        })
        setTimeout(() => {
          uni.navigateBack()
        },1500)
      })
    },

    async getDetail () {
      const res = await this.$u.api.adminCheckDetail(this.id)
      for (let key in this.form) {
        this.form[key] = res[key]
      }
      console.log(this.form)
      this.fileList = res.files.map(i => ({
        url: i.url,
        response: i
      }))
    }
  },
  onLoad(option) {
    this.form.schedule_list_id = option.schedule_list_id;
    this.id = option.id;
    this.type = option.id ? 'edit' : 'add';
    if (this.type === 'edit') {
      this.getDetail()
    }
  },
  onReady() {
    this.load();
  },
}
</script>

<style lang="scss">
.container {
  border-radius: 10rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);
  margin: 20rpx;
  padding: 20rpx;
}

.slot-btn {
  width: 200rpx;
  height: 200rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(244, 245, 246);
  border: 2rpx #108cff solid;
  border-radius: 10rpx;
  box-sizing: content-box;
  filter: drop-shadow(0 0 4rpx #0fc7ff) drop-shadow(0 0 6rpx #00eaff);
}
.slot-btn__hover {
  background-color: rgb(235, 236, 238);
}

</style>