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

<template>
  <div class="Watermark6" @click="linkTo('./WatermarkConfig')">
    <div class="title">
      <h2>{{ title }}</h2>
    </div>
    <div class="info">
      <div class="info-item">
        <label>时间：</label>
        <span>{{ date }} {{ weekCn}} {{ time }}</span>
      </div>
      <div class="info-item">
        <label>地点：</label>
        <span>{{ address }}</span>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapActions } from 'vuex'

  export default {
    props: ['config'],

    data () {
      return {
        date: '',
        timer: null,
        week: '',
        title: '定格在这一刻',
        address: '武汉市·绿地蓝海A座',
      }
    },

    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) {
          }
        },
        deep: true
      },
    },

    created () {
      this.configList = JSON.parse(JSON.stringify(this.config)).map(v => {
        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()

      this.timer = setInterval(() => {
        this.time = this.$dayjs().format('HH:mm')
      }, 1000)

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

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

    methods: {
      ...mapActions(['injectJWeixin']),

      linkTo (url) {
        uni.setStorageSync('waterConfig', this.configList)
        uni.navigateTo({
          url
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .Watermark6 {
    width: 450px;
    box-sizing: border-box;

    h2 {
      font-weight: normal;
    }

    * {
      box-sizing: border-box;
    }

    .info {
      padding: 24px;
      background: rgba(255, 255, 255, 0.7);

      .info-item {
        display: flex;
        line-height: 1.3;
        margin-bottom: 8px;

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

        label {
          color: #333;
          font-size: 28px;
        }

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

    .title {
      position: relative;
      height: 60px;
      line-height: 60px;
      text-align: center;
      color: #fff;
      background: rgba(23, 91, 255, 0.7);

      h2 {
        font-size: 32px;
      }

      &::after {
        position: absolute;
        left: 16px;
        top: 50%;
        z-index: 1;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #FFCA32;
        content: ' ';
        transform: translateY(-50%);
      }

      &::before {
        position: absolute;
        right: 16px;
        top: 50%;
        z-index: 1;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #FFCA32;
        content: ' ';
        transform: translateY(-50%);
      }
    }
  }
</style>