dvcp_v2_wechat_app/src/project/tianfuxing/AppHome/Activity.vue

<template>
  <div class="Activity">
    <div class="section">
      <h2>10.30线下公益宣传</h2>
      <p>在今天（4月28日）下午的联防联控机制新闻发布会上，有关负责人表示，预计“五一”假期客流量较去年明显下降，出游应严格做好疫情防控。</p>
    </div>
    <div class="section">
      <h2>基础信息</h2>
      <div class="info-wrapper">
        <div class="info-item">
          <h2>活动地点</h2>
          <span class="omit">成都市金牛区xxxx大厦成都成都市金牛区xxxx大厦成都成都市金牛区xxxx大厦成都</span>
          <div class="right">
            <image src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/dh.png" />
            <i>导航</i>
          </div>
        </div>
        <div class="info-item">
          <h2>进场打卡</h2>
          <span>2022-10-14  09:25:25  至
2022-10-28  12:00:00</span>
        </div>
        <div class="info-item">
          <h2>离场打卡</h2>
          <span>2022-10-14  09:25:25  至
2022-10-28  12:00:00</span>
        </div>
      </div>
    </div>
    <div class="signin">
      <div class="top" @click="getLocation">
        <h2>打卡签到</h2>
        <span>积分+5</span>
      </div>
      <p>符合打卡条件</p>
      <i>未到打卡时间/不在指定位置</i>
    </div>
  </div>
</template>

<script>
  var QQMapWX = require('./lib/qqmap-wx-jssdk.min.js')
  export default {
    name: 'AppActivity',
    appName: '活动',

    data () {
      return {
        qqmapsdk: null
      }
    },

    onLoad () {
      // this.getLocation()
      this.qqmapsdk = new QQMapWX({
        key: '3RZBZ-LZUCF-CT6J5-NWKZH-FCWOQ-UUFKY'
      })
    },

    methods: {
      getLocation () {
        wx.authorize({
          scope: 'scope.userLocation',
          success: () => {
            uni.getLocation({
              type: 'wgs84',
              success: res => {
                console.log('当前位置的经度：' + res.longitude)
                console.log('当前位置的纬度：' + res.latitude)
                this.latitude = res.latitude
                this.longitude = res.longitude
                this.qqmapsdk.reverseGeocoder({
                  location: `${res.latitude},${res.longitude}`,
                  success: data => {
                    console.log(data)
                  },
                  fail: function(info){
                    console.log(info)
                  }
                })

                this.qqmapsdk.calculateDistance({
                  from: {
                    longitude: res.longitude,
                    latitude: res.latitude
                  },
                  to: [{
                    longitude: 114.342093,
                    latitude: 30.499959
                  }],
                  success: res => {
                    console.log(res.result.elements[0].distance)
                  },
                  fail: function(error) {
                    console.error(error)
                  },
                  complete: function(res) {
                  }
                })
              },
              fail: () => {
              }
            })
          },
          fail: () => {
            this.$dialog.confirm({
              content: '您未授权定位，功能将无法使用'
            }).then(() => {
              uni.openSetting({
                success: res => {
                  if (!res.authSetting['scope.userLocation']) {
                    this.$dialog.alert({
                      content: '您未授权定位，功能将无法使用'
                    }).then(() => {
                    })
                  } else {
                  }
                }
              })
            })
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .Activity {
    padding-top: 16px;

    div {
      box-sizing: border-box;
    }

    .section {
      width: 718px;
      margin: 0 auto 24px;
      padding: 32px;
      background: #FFFFFF;
      border-radius: 32px;
      box-sizing: border-box;

      & > h2 {
        margin-bottom: 24px;
        font-weight: 600;
        font-size: 40px;
        color: #222222;
      }

      p {
        line-height: 1.3;
        font-size: 32px;
        color: #999;
        text-align: justify;
      }

      .info-wrapper {
        .info-item {
          display: flex;
          line-height: 1.2;
          margin-bottom: 24px;

          &:last-child {
            margin-bottom: 0;
          }

          h2 {
            margin-right: 40px;
            color: #999999;
            font-size: 28px;
          }

          span {
            flex: 1;
            color: #333333;
            font-size: 28px;
            text-align: justify;
          }

          .omit {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
          }

          .right {
            display: flex;
            align-items: center;
            margin-left: 20px;

            image {
              width: 32px;
              height: 32px;
              margin-right: 8px;
            }

            i {
              color: #687DA6;
              font-size: 28px;
            }
          }
        }
      }
    }

    .signin {
      margin-top: 120rpx;
      text-align: center;

      p {
        color: #999;
        font-size: 28px;
      }

      i {
        display: block;
        color: #FF883C;
        font-size: 28px;
      }

      .top {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 240px;
        height: 240px;
        margin: 0 auto 48px;
        background-image: linear-gradient(180deg, #75BDFF 0%, #4783FF 100%);
        border: 8px solid #FFFFFF;
        box-shadow: 0 8px 12px -4px rgba(133,196,255,0.65);
        border-radius: 50%;

        h2 {
          margin-bottom: 20px;
          color: #fff;
          font-size: 40px;
        }

        span {
          color: rgba(255, 255, 255, 0.8);
          font-size: 28px;
        }
      }
    }
  }
</style>