wechat/src/pages/user/calendar/calendar.vue

<template>
  <div style="padding-bottom:.6rem;">
    <div class="top">
      <img :src="topImg" alt>
    </div>
    <div class="middle">
      <p>云台天境定制专属你的台历</p>
      <span>时间: 2018年12月12日-2018年12月19日</span>
      <span>地点: 江宁区云台山河路1号云台天境售楼处</span>
    </div>
    <div class="bottom">
      <p class="title">活动详情</p>
      <div>用户在线上传照片生成2019年台历，可通过填写邮箱，获得电子版台历（1个工作日内）。</div>
      <div>前200名上传成功用户，可在关注【城的空间】公众号接到推送或接到短信通知后来云台天境售楼处领取精美实物台历一份。</div>
      <div>活动电话：025-86426666</div>
      <div>服务案场：银城旭辉云台天境</div>
      <div>地址：江宁区云台山河路1号云台天境售楼处</div>
      <div>*活动最终解释权归南京佳运城房地产开发有限公司所有</div>
    </div>
    <div class="btn">
      <div v-if="state === 1" @click="toCheckModel">立即参与</div>
      <div v-if="state === 2" class="disable">已参与</div>
      <div v-if="state === 3" class="disable">活动已结束</div>
    </div>
  </div>
</template>

<script>
import wxsdk from '../../../util/share'
import { mapState, createNamespacedHelpers } from 'vuex'
const { mapActions: mapMakingActions } = createNamespacedHelpers('making')
const { mapActions: actions } = createNamespacedHelpers('userCenter')
import topImg from '@/common/icon/topImg.png'
export default {
  data () {
    return {
      topImg,
      state: 1,
      endTime: "2018/12/19 00:00:00"
    }
  },
  created () {
    wxsdk({ url: encodeURIComponent(window.location.href.split('#')[0]) }, {
      title: '幸福升舱 云帆起航',
      desc: '有一份2019年的台历待您查收！',
      link: `${window.location.origin}${window.location.pathname}#/calendar`,
      thu_image: 'http://spaceofcheng.oss-cn-beijing.aliyuncs.com/DE4F9402-9449-48fc-8C0D-61C198E82E481543982444.png'
    })
    this.getUserInfo({ org: this.org }).then(() => {
      this.getCalendarCustomer().then((res) => {
        if (res) {
          this.state = 2
        } else {
          let timestamp = new Date(this.endTime).getTime()
          let now = new Date().getTime()
          if (timestamp >= now) {
            this.state = 1
          } else {
            this.state = 3
          }
        }
      })
    })
  },
  computed: {
    ...mapState({
      org: x => x.app.orgId,
      userInfo: x => x.userCenter.userInfo
    })
  },
  methods: {
    ...actions(['getUserInfo']),
    ...mapMakingActions(['getCalendarCustomer']),
    toCheckModel () {
      if (!this.userInfo.customer.Phone) {
        this.$dialog.confirm({
          title: '提示',
          message: '您还不是注册会员，注册成功后即可参与此活动'
        }).then(() => {
          // on confirm
          this.$router.push({ name: 'bindMobile' })
        }).catch(() => {
          // on cancel
        });
      } else {
        this.$router.push({ name: 'checkModel' })
      }
    }
  }
}
</script>
 
<style lang="scss" scoped>
.top {
  width: 100%;
  img {
    width: 100%;
  }
}
.middle {
  padding: 0.14rem 0.25rem;
  border-bottom: 0.1rem solid rgba(235, 241, 242, 1);
  p {
    font-size: 0.16rem;
    padding-bottom: 0.05rem;
    font-weight: bold;
  }
  span {
    padding-bottom: 0.05rem;
    display: block;
  }
}
.bottom {
  padding: 0.14rem 0.25rem;
  p {
    font-size: 0.16rem;
    padding-bottom: 0.05rem;
    font-weight: bold;
  }
  div {
    padding-bottom: 0.08rem;
  }
}
.btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.1rem 0.25rem;
  box-sizing: border-box;
  background: #fff;
  div {
    width: 100%;
    height: 0.4rem;
    border-radius: 0.2rem;
    background-color: rgba(252, 98, 67, 1);
    color: #fff;
    text-align: center;
    line-height: 0.4rem;
  }
  .disable {
    background: #ccc;
  }
}
</style>