rebatedine-mini/src/pagesSub/activity/signUpOutcome.vue

<template>
  <view class="main">
    <network-error />
    <view class="success u-flex u-row-center">
      <view class="icon-success-wh icon-success"></view>
      <view class="u-font-36 line-50">报名成功</view>
    </view>
    <view class="date">
      <view class="mtb">截止日期：{{endTime}}</view>
      <view>参与结果可在【首页底部导航栏-订单】中查看</view>
    </view>
    <view class="u-flex u-row-center">
      <view class="message">
        <view class="title u-font-24 line-28">返利规则</view>
        <view class="content u-font-24 line-34">点餐后需按要求提交订单信息，当天报名当天截止时间前提交才可获得<span class="money">返利金额</span></view>
      </view>
    </view>
    <view class="btn u-flex u-row-center">
      <button @click="toOrderList">查看订单</button>
      <button class="active"
              @click="toOrderMeal">去点餐</button>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      platType: '',
      endTime: ''
    }
  },
  onLoad (options) {
    this.platType = options.platType
    this.endTime = this.$dayjs(`${this.$dayjs().format('YYYY-MM-DD')} ${options.endTime}`).format('YYYY-MM-DD HH:mm:ss')
  },
  methods: {
    toOrderList () {
      uni.switchTab({
        url: '/pages/order'
      })
    },
    toOrderMeal () {
      this.$store.dispatch('toOtherApplte', this.platType)
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  background-color: #fff;
  padding-top: 15px;
}
.success {
  color: $u-main-color;
  font-weight: 1000;
  margin: 48px 0;
}
.icon-success-wh {
  width: 92px;
  height: 92px;
  margin-right: 16px;
}
.date {
  font-size: 26px;
  color: $u-main-color;
  line-height: 36px;
  margin: 16px 0 40px 32px;
  .mtb {
    margin: 16px 0;
  }
}
.message {
  width: 686px;
  height: 156px;
  color: $u-main-color;
  background-color: #f7f8f9;
  padding: 24px;
  border-radius: 8px;
  .title {
    font-family: Helvetica;
    margin-bottom: 8px;
  }
  .money {
    color: #4a6d8d;
  }
}
.btn {
  button {
    width: 280px;
    height: 84px;
    border: 1px solid #d3d4d5;
    border-radius: 42px;
    font-size: 28px;
    line-height: 40px;
    color: $u-main-color;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0;
  }
  .active {
    border: 1px solid #ff6632;
    color: #ff6632;
    margin-left: 30px;
  }
}
</style>