dvcp_v2_wxcp_app/src/saas/AppCountryAlbum/components/watermark/Watermark7.vue

<template>
  <div class="Watermark7" @click="linkTo('./WatermarkConfig')">
    <image src="../../images/hjws.png" />
    <h2>整好环境卫生</h2>
    <div class="middle">
      <div class="top">
        <h2>{{ time }}</h2>
        <span>多云 7℃</span>
      </div>
      <div class="bottom">{{ date }} {{ weekCn }}</div>
    </div>
    <div class="bottom">武汉市·绿地蓝海A座</div>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'
  export default {
    data () {
      return {
        date: '',
        time: '',
        week: '',
        timer: null
      }
    },

    computed: {
      weekCn() {
        if (this.week === 1) {
          return '星期一'
        }
        if (this.week === 2) {
          return '星期二'
        }
        if (this.week === 3) {
          return '星期三'
        }
        if (this.week === 4) {
          return '星期四'
        }
        if (this.week === 5) {
          return '星期五'
        }

        if (this.week === 6) {
          return '星期六'
        }

        return '星期天'
      }
    },

    created () {
      this.date = this.$dayjs(new Date).format('YYYY-MM-DD')
      this.time = this.$dayjs().format('HH:mm')

      this.timer = setInterval(() => {
        this.date = this.$dayjs().format('YYYY-MM-DD')
        this.time = this.$dayjs().format('HH:mm')
        this.week = new Date().getDay()
      }, 1000)

      this.injectJWeixin(['getLocation']).then(res => {
        console.log(res)
        wx.getLocation({
          type: 'wgs84',
          success: function (res) {
            var latitude = res.latitude
            var longitude = res.longitude
            var speed = res.speed
            var accuracy = res.accuracy
          }
        });
      })
    },

    destroyed () {
      clearInterval(this.timer)
    },

    methods: {
      ...mapActions(['injectJWeixin']),
      getLocation () {
        uni.getLocation({
          type: 'wgs84',
          success: res => {
            console.log(res)
            this.$http.get('https://apis.map.qq.com/ws/geocoder/v1/?location=39.984154,116.307490&key=3RZBZ-LZUCF-CT6J5-NWKZH-FCWOQ-UUFKY&get_poi=1').then(res => {
              console.log(res)
            })
          },
          fail: error => {
            console.log(error)
          }
        })
      },

      linkTo (url) {
        uni.navigateTo({
          url
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .Watermark7 {
    width: 400px;
    font-size: 0;
    box-sizing: border-box;

    h2 {
      font-weight: normal;
    }

    * {
      box-sizing: border-box;
    }

    & > image {
      width: 100%;
      height: 64px;
    }

    & > .bottom {
      line-height: 1.3;
      padding: 10px 16px;
      font-size: 26px;
      text-align: justify;
      background: rgba(27, 120, 65, 0.8);
    }

    .middle {
      line-height: 1;
      padding: 16px;
      background: rgba(0, 0, 0, 0.5);

      .top {
        display: flex;
        align-items: center;
        margin-bottom: 6px;

        h2 {
          margin-right: 16px;
          color: #FFFFFF;
          font-size: 48px;
        }

        span {
          color: #62CD8B;
          font-size: 26px;
        }
      }

      .bottom {
        font-size: 26px;
      }
    }

    & > h2 {
      height: 64px;
      line-height: 64px;
      text-align: center;
      color: #fff;
      font-size: 32px;
      background: #1B7841;
    }
  }
</style>