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-21日</span>
      <span>地点: 宁区秣陵街道创新东路2号银城蓝溪郡营销中心</span>
    </div>
    <div class="bottom">
      <p class="title">活动详情</p>
      <div>相关活动介绍参与活动需出示“城的空间”官微报名截图并支付198元现金（现金需在活动现场支付）</div>
      <div>以上礼品需成交方可享受，成交指签订车位销售合同/商品房现售合同，并支付全部价款或支付首付款且办理完毕贷款手续，开发商承诺客户交纳的198元，我司无条件退还，活动名额仅限10人，先到先得。</div>
      <div>活动电话：025-86426677</div>
      <div>服务案场：银城蓝溪郡</div>
      <div>地址：江宁区秣陵街道创新东路2号</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 { createNamespacedHelpers } from 'vuex'
const { mapActions: mapMakingActions } = createNamespacedHelpers('making')
import topImg from '@/common/icon/topImg.png'
export default {
  data () {
    return {
      topImg,
      state: 1
    }
  },
  created () {
    this.getCalendarCustomer().then((res) => {
      if (res) {
        this.state = 2
      } else {
        let stringTime = "2018-12-22 00:00:00"
        let timestamp = Date.parse(new Date(stringTime))
        let now = new Date().getTime()
        if (timestamp >= now) {
          this.state = 1
        } else {
          this.state = 3
        }
      }
    })
  },
  methods: {
    ...mapMakingActions(['getCalendarCustomer']),
    toCheckModel () {
      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: .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>