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

<template>
  <div class="Watermark7" @click.stop="linkTo('./WatermarkConfig')">
    <image src="../../images/hjws.png" />
    <h2 v-if="isShowTitle">{{ title }}</h2>
    <div class="middle">
      <div class="top">
        <h2>{{ time }}</h2>
        <span>{{ weather }}</span>
      </div>
      <div class="bottom">{{ date }} {{ weekCn }}</div>
    </div>
    <div class="bottom" v-if="isShowAddress">{{ address }}</div>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'
  export default {
    props: ['config'],

    data () {
      return {
        date: '',
        time: '',
        title: '',
        week: '',
        weather: '',
        address: '',
        timer: null,
        isShowTitle: true,
        isShowAddress: true,
        configList: []
      }
    },

    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 '星期天'
      }
    },

    watch: {
      configList: {
        handler: function (v) {
          if (v.length) {
            const address = v.filter(v => v.type === '3')[0]
            const title = v.filter(v => v.type === '5')[0]
            this.isShowAddress = address.status === '1'
            this.isShowTitle = title.status === '1'
            this.title = title.defaultValue || ''
            this.address = uni.getStorageSync('address').address || ''
            this.weather = uni.getStorageSync('address').weather || ''
          }
        },
        deep: true
      },
    },

    created () {
      this.configList = JSON.parse(JSON.stringify(this.config)).map(v => {
        if (v.fieldType === '3') {
          v.defaultValue = uni.getStorageSync('address').address || ''
        }
        if (v.fieldType === '2') {
          v.defaultValue = uni.getStorageSync('address').weather || ''
        }
        if (v.fieldType === '7') {
          v.defaultValue = this.$dayjs().format('YYYY-MM-DD')
          this.week = new Date().getDay()
        }
        if (v.fieldType === '6') {
          v.defaultValue = this.$dayjs().format('HH:mm')
        }

        return v
      })
      this.date = this.$dayjs(new Date).format('YYYY-MM-DD')
      this.time = this.$dayjs().format('HH:mm')
      this.week = new Date().getDay()

      uni.$on('change', e => {
        this.configList = e
      })

      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.setStorageSync('waterConfig', this.configList)
        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>