judicial-hy / 0.200103

<template>
<div class="like">
<!-- <div class='title'>2018年</div>
<div class='eachmonth' v-for='(item, i) in months' :key='i'>
  <div class='month'>{{item}}</div>
  <div class='bar'>
    <div class='red' :style="like_percent[i]"></div>
    <div class='num'>{{like[i]}}</div>
    <div class='grey'></div>
  </div>
</div> 
<div class='total'>{{'总获赞数: '+total}}</div>-->
<div class='Red' @tap='confirm(1)'>打卡</div>
<div class='Blue' @tap='confirm(2)'>打卡</div>
<div class='Green' @tap="confirm(3)">打卡</div>
</div>
</template>

<script>
export default {
  data() {
    return {
      months: [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月"
      ],
      like: [],
      like_percent: [],
      total: -1,
      hasHandleAuth: false
    };
  },
  watch: {
    like(val) {
      let arr = [];
      let total = 0;
      val.forEach(function(item) {
        let style = "width:" + Math.round(item / 100).toFixed(0) + "%;";
        arr.push(style);
        total += item;
      });
      console.log(arr);
      this.like_percent = arr;
      this.total = total;
    }
  },
  methods: {
    load() {
      this.like = [
        1345,
        1058,
        2557,
        3058,
        4017,
        5550,
        8220,
        8575,
        7420,
        5402,
        4520,
        6327
      ];
    },
    confirm(sort=1){
      wx.showModal({
        title:'',
        content: '确定要定位吗?',
        success: res =>{
          if(res.confirm){
            if(sort==1){
              this.getLocation()
            }else if(sort==2){
              this.getLocation('wgs84')
            }else if(sort==3){
              this.getLocation1()
            }
          }
        }
      })
    },
    getLocation(type='gcj02') {
      wx.showLoading({ title: '正在定位' })
      let lat, lng
      wx.getLocation({
        type,
        success: res => {
          lat = res.latitude
          lng = res.longitude
          wx.request({
            url: 'https://api.map.baidu.com/geocoder/v2/',
            data: {
              ak: 'AnWpq9Kc3C8cq5CCGAzsq3NxpBkxRnl0',
              location: `${lat},${lng}`,
              coordtype: type + 'll',
              output: 'json'
            },
            success: res => {
              const formatted_address = res.data.result.formatted_address
              wx.hideLoading()
              wx.showModal({title: '定位成功',content:formatted_address,showCancel:false})
            }
          })
        },
        fail: err => {
          console.log(JSON.stringify(res))
          wx.hideLoading()
          let authSetting
          wx.getSetting({
            success: res => {
              authSetting = res.authSetting['scope.userLocation']
              console.log(authSetting)
            },
            complete: () => {
              if (authSetting) {
                if (this.hasHandleAuth) {
                  this.getLocation(type)
                } else{
                  this.service.UploadBug(this.rootUrl,'test/getLocation/',JSON.stringify(err))
                  wx.showModal({
                    title: '定位失败',
                    content: '微信未获得位置权限\n请在您手机的系统设置-权限管理中，打开微信的位置信息获取权限',
                    showCancel: false
                  })
                }
              } else {
                wx.showModal({
                  title: '授权请求',
                  content: '您已拒绝小程序获取地理位置，若要使用定位功能，请重新授权',
                  showCancel: false,
                  success: res => {
                    if (res.confirm) {
                      wx.openSetting({
                        success: res => {
                          if (res.authSetting['scope.userLocation']) {
                            this.hasHandleAuth = true
                            this.getLocation(type)
                          }
                        }
                      })
                    }
                  }
                })
              }
            }
          })
        }
      })
    },
    getLocation1(type='gcj02') {
      wx.showLoading({ title: '正在定位' })
      let lat, lng
      wx.getLocation({
        type,
        success: res => {
          lat = res.latitude
          lng = res.longitude
          wx.request({
            url: 'https://api.map.baidu.com/geocoder/v2/',
            data: {
              ak: 'AnWpq9Kc3C8cq5CCGAzsq3NxpBkxRnl0',
              location: `${lat},${lng}`,
              coordtype: type + 'll',
              output: 'json'
            },
            success: res => {
              const formatted_address = res.data.result.formatted_address
              wx.hideLoading()
              wx.showModal({title: '定位成功',content:formatted_address,showCancel:false})
            }
          })
        },
        fail: res => {
          wx.hideLoading()
          let authSetting
          wx.getSetting({
            success: res => {
              authSetting = res.authSetting['scope.userLocation']
              console.log(authSetting)
            },
            complete: () => {
              if (authSetting) {
                if (this.hasHandleAuth) {
                  this.getLocation1(type)
                } else if(type=='gcj02'){
                  this.getLocation1('wgs84')
                } else{
                  wx.showModal({
                    title: '定位失败',
                    content: '微信未获得位置权限\n请在您手机的系统设置-权限管理中，打开微信的位置信息获取权限',
                    showCancel: false
                  })
                }
              } else {
                wx.showModal({
                  title: '授权请求',
                  content: '您已拒绝小程序获取地理位置，若要使用定位功能，请重新授权',
                  showCancel: false,
                  success: res => {
                    if (res.confirm) {
                      wx.openSetting({
                        success: res => {
                          if (res.authSetting['scope.userLocation']) {
                            this.hasHandleAuth = true
                            this.getLocation1(type)
                          }
                        }
                      })
                    }
                  }
                })
              }
            }
          })
        }
      })
    },
  },
  // onLoad() {
  //   this.load();
  //   let that = this;
  //   setTimeout(function() {
  //     that.$set(that.like, 6, 4444);
  //   }, 3000);
  // }
};
</script>
<style lang="stylus" scoped>
.like
  position fixed
  Height_Width(100%)
  top 0
  Background()
.title
  Flex(flex, center, center)
  height 100rpx
  font 550 35rpx / 35rpx !specified
  color themeColor
.eachmonth
  Flex(flex, , center)
  margin 0 40rpx 10rpx 40rpx
  .month
    flex none
    Font(26rpx, 35rpx)
    width 60rpx
  .bar
    display flex
    flex auto
    .red
      flex none
      height 35rpx
      background themeColor
    .num
      flex none
      padding-left 10rpx
      Font(24rpx, 35rpx)
      color themeColor
      background #EEE
    .grey
      flex auto
      height 35rpx
      background #EEE
.total
  Font(26rpx, 45rpx)
  color grey
  text-align right
  padding-right 40rpx

//以下是临时脚本

.like
  Flex(flex, center, center, column)
  background black
  > div
    Height_Width(180rpx)
    Flex(flex, center, center)
    margin 40rpx 0
    border-radius 50%
    Font(40rpx, 40rpx, bold)
    color white

  .Red
    background red
  .Blue
    background blue
  .Green
    background green
</style>