epdc-resident-mp-js/subpages/heart/pages/clockIn/clockIn.js

import {
  BASEURL
} from '../../../../utils/config';
var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
const api = require('../../../../utils/api')
Page({

  /**
   * 页面的初始数据
   */
  data: {
    BASEURL: BASEURL(),
    qqmapsdk:"",
    signin: {},//活动打卡地点详情
    actId: "",//活动ID
    operationDesc: "",//打卡描述
    operationDesc_:"",
    locationLongitude: Number,//打卡位置经度
    locationLatitude: Number,// 打卡位置纬度
    operationAddress:"",//打卡地址
    images: [],//图片
    clockType: Number,//打卡类型（0-打卡，1-更新打卡）
    effectiveFlag: Number,//打卡是否有效（0-否，1-是）
    phraseList:[],//常用于列表
    phraseId:"",//常用语id
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const qqmapsdk = new QQMapWX({
      key: 'CMJBZ-4DECI-JXGGN-5B4WU-QLV2H-B5BEJ'
    })

    if (options.currentUserStatus == "4") {//0-打卡
      this.setData({
        clockType: 0
      })
    }else{//更新打卡
      this.setData({
        clockType: 1
      })
    }
    this.setData({
      qqmapsdk,
      id: options.id,
      effectiveFlag:1
    })
    this.getPhraseList();//常用语列表
    this.getPosition();
    this.clockAddressDetail();
  },
  getPhraseList(){
    let that = this;
    api.getPhraseList().then(function (res) {//常用语列表
      console.log('常用语列表:' + JSON.stringify(res.data))
      that.setData({
        phraseList: res.data,
      })
    })
  },
  toOperationDesc(phrase){//常用于点击事件
    // console.log(phrase.currentTarget.dataset.phrase)
    this.setData({
      operationDesc: this.data.operationDesc + phrase.currentTarget.dataset.phrase,
      phraseId: phrase.currentTarget.dataset.id
    })
    // console.log(phrase.currentTarget.dataset.phrase)
  },
  //获取经纬度
  getPosition() {
    wx.showLoading({
      title: '正在获取位置',
    })
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        this.reverseGeocoder(res)
        this.setData({
          location: {
            locationLongitude: res.latitude,
            locationLatitude: res.longitude
          }
        })
      }
    })
  },
  // 逆地址解析
  reverseGeocoder({ latitude, longitude }) {
    var that = this;
    that.data.qqmapsdk.reverseGeocoder({
      location: {
        latitude,
        longitude
      },
      success: (res) => {
        wx.hideLoading();
        if (res.message === 'query ok') {
          that.setData({
            operationAddress: res.result.address
          })
        }
      }
    })
  },


  // 上传图片
  onChange(e) {
    // console.log('onChange', e)
    const {
      file
    } = e.detail
    if (file.status === 'uploading') {
      this.setData({
        progress: 0,
      })
      wx.showLoading()
    } else if (file.status === 'done') {
      this.setData({
        imageUrl: file.url,
      })
    }

    let images = []
    e.detail.fileList.forEach((item, index, array) => {
      if (item.res !== undefined) {
        const imageUrl = JSON.parse(e.detail.fileList[index].res.data).data
        images.push(imageUrl)
      }
    })
    this.setData({
      images: images
    })

    // console.log("~~~~~~@@@@@@@@" + JSON.stringify(images))

  },
  onSuccess(e) {
    // console.log('onSuccess', e)

  },
  onFail(e) {
    // console.log('onFail', e)
  },
  // 上传完成
  onComplete(e) {
    // console.log('onComplete', e)
    wx.hideLoading()
  },
  // 点击图片放大
  onPreview(e) {
    // console.log('onPreview', e)
    const {
      file,
      fileList
    } = e.detail
    wx.previewImage({
      current: file.url,
      urls: fileList.map((n) => n.url),
    })
  },
  // 填写意见
  // bindInput: function (e) {
  //   this.setData({
  //     operationDesc: e.detail.value + this.data.operationDesc,
  //     operationDesc_: e.detail.value
  //   })
  //   if (this.data.operationDesc_.length == 0){
  //     this.setData({
  //       operationDesc: e.detail.value,
  //       operationDesc_: e.detail.value
  //     })
  //   }
  //   console.log(this.data.operationDesc_)
  // },
  getbindinput(e) {
    this.setData({
      operationDesc: e.detail.value,
    })
  },
  /**
  * 数据提交方法
  */
  submission() {
    if (this.data.operationDesc === '') {
      wx.showToast({
        title: '请先输入打卡描述',
        icon: 'none',
        duration: 3000
      })
      return false
    }

    if (this.data.images.length==0){
      wx.showToast({
        title: '请上传打卡图片',
        icon: 'none',
        duration: 3000
      })
      return false
    }

    if (this.data.phraseId) {
      api.sagenumAddOne(this.data.phraseId).then(function (res) {
        console.log('常用语言：' + res)
      })
    }

    const signinLongitude = this.data.signin.signinLongitude;//经度
    const signinLatitude = this.data.signin.signinLatitude;//纬度

    const clockLongitude = this.data.location.locationLatitude;//经度
    const clockLatitude = this.data.location.locationLongitude;//纬度  

    // console.log("signinLongitude" + signinLongitude + "signinLatitude" + signinLatitude)
    // console.log("clockLongitude" + clockLongitude + "clockLatitude" + clockLatitude)

    // Lat1 Lung1 表示A点纬度和经度，Lat2 Lung2 表示B点纬度和经度；
    // a = Lat1 – Lat2 为两点纬度之差  b = Lung1 - Lung2 为两点经度之差；
    // 6378.137为地球半径，单位为公里；计算出来的结果单位为公里；


    var radLat1 = this.Rad(signinLatitude);
    var radLat2 = this.Rad(clockLatitude);
    var a = radLat1 - radLat2;
    var b = this.Rad(signinLongitude) - this.Rad(clockLongitude);
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
      Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
    s = s * 6378.137;// EARTH_RADIUS;
    s = Math.round(s * 10000) / 10000 *1000;
    //s=s.toFixed(4);

    if (s > this.data.signin.clockRadius){
      this.setData({
        effectiveFlag:0
      })
    }else{
      this.setData({
        effectiveFlag: 1
      })
    }
    const  params={
      actId: this.data.id,
      clockDesc: this.data.operationDesc,
      clockLongitude: this.data.location.locationLongitude,
      clockLatitude: this.data.location.locationLatitude,
      clockAddress: this.data.operationAddress,
      images: this.data.images,
      clockType: this.data.clockType,//打卡类型（0-打卡，1-更新打卡）
      effectiveFlag: this.data.effectiveFlag//打卡是否有效（0-否，1-是）
    }
    // console.log('~~~~~~~":::::' + JSON.stringify(params))
    api.clock(params).then(function (res) {
      if (res.code == 0) {
        wx.showToast({
          title: '打卡成功',
          icon: 'none',
          duration: 3000,
          complete: function () {
            setTimeout(function () {
              wx.navigateBack()
            }, 1000);
          }
        })
      }
      
    })
  },
  Rad(d) {//经纬度转换成三角函数中度分表形式。
    return d * Math.PI / 180.0;
  },
  clockAddressDetail() {//活动打卡地点详情
    let that = this;
    const id = that.data.id;
    
    api.clockAddressDetail(id).then(function (res) {
      if (res.code == 0) {
        that.setData({
          signin: res.data
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})