result.vue 4.8 KB
<template>
  <div class="page">
    <div class="result" v-if="starInfo.activity_result.result!=16">
      <div class="float">结果公示</div>
      <div v-if="starInfo.activity_result.result==11">
        <h2>恭喜两个阶段全勤挑战成功</h2>
        <p>赠送 猜猜我是谁系列双语洞洞书(4册)</p>
        <p>培生预备级英语启蒙绘本(35册)</p>
        <div class="imgbox">
          <img :src="starPage.star_prize1" alt>
          <img :src="starPage.star_prize2" alt>
        </div>
      </div>
      <div v-if="starInfo.activity_result.result==13">
        <h2>恭喜第一阶段全勤挑战成功</h2>
        <p>赠送 猜猜我是谁系列双语洞洞书(4册)</p>
        <div class="imgbox">
          <img :src="starPage.star_prize1" alt>
        </div>
      </div>
      <div v-if="starInfo.activity_result.result==14">
        <h2>恭喜第二阶段全勤挑战成功</h2>
        <p>培生预备级英语启蒙绘本(35册)</p>
        <div class="imgbox">
          <img :src="starPage.star_prize2" alt>
        </div>
      </div>
      <div class="addr" v-if="addressObj">
        <span>
          {{addressObj.receive_name}}&nbsp;{{addressObj.receive_mobile}}&nbsp;
          {{addressObj.province_name}}{{addressObj.city}}{{addressObj.area}}{{addressObj.address}}
        </span>
        <!-- <i class="iconfont icon-youjiantou"></i> -->
      </div>
      <div class="tip">注意:请于{{starInfo.start_twenty_five}}之前填写完您的收货地址,否则无法寄送礼品,过期不填视为放弃领取机会</div>
    </div>
    <div class="result fal" v-if="starInfo.activity_result.result==16">
      <div class="float">结果公示</div>
      <div class="fal_title">很抱歉两个阶段全勤挑战失败</div>
      <div class="fal_tip">学习没有终点,任何时候都是一个起点</div>
    </div>
  </div>
</template>

<script>
import rankBg from "../../assets/rankBg.png";
import star_inner from "../../assets/star_inner.png";
import { starPage } from "../../util/imgUrl";
import { getUserIntegralApi, getUserIntegralListApi } from "../../service/api";
import { Toast } from "vant";
export default {
  name: "starResult",
  data() {
    return {
      pullup: true,
      rankBg: rankBg,
      starNum: "",
      userDetail: {},
      loading: true,
      finished: false,
      star_inner: star_inner,
      starList: [],
      page: 1,
      offset: 30,
      starPage: starPage,
      starInfo: {},
      addressObj: false
    };
  },
  components: {},
  methods: {
    initPage() {
      this.starInfo = this.$route.query.starInfo;
    }
  },
  mounted() {
    this.initPage();
  }
};
</script>

<style scoped lang="less">
@import "../../util/public";
.star-activity-page {
  border-top: 1px solid transparent;
}
.page {
  padding: 10 * @toVw;
  box-sizing: border-box;
}
.result {
  position: relative;
  text-align: center;
  background: url("https://cdn.singsingenglish.com/new-sing/number_img_bg_win@2x.png");
  background-size: 100% 100%;
  padding: 39 * @toVw 13 * @toVw 12 * @toVw;
  box-shadow: 0px 1 * @toVw 8 * @toVw 0 * @toVw rgba(175, 175, 175, 0.53);
  border-radius: 8 * @toVw;
  margin-bottom: 10 * @toVw;
  background-color: #fff9f2;
  .float {
    width: 74 * @toVw;
    height: 27 * @toVw;
    background: linear-gradient(
      270deg,
      rgba(255, 227, 126, 1) 0%,
      rgba(255, 167, 114, 1) 100%
    );
    border-radius: 0 8 * @toVw 0 8 * @toVw;
    color: white;
    line-height: 27 * @toVw;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 13 * @toVw;
  }
  .imgbox {
    margin-top: 8 * @toVw;
    img {
      width: 111 * @toVw;
      margin: 0 12 * @toVw;
    }
  }
  .addr {
    background: linear-gradient(
      270deg,
      rgba(252, 171, 69, 1) 0%,
      rgba(247, 115, 33, 1) 100%
    );
    border-radius: 12 * @toVw;
    height: 24 * @toVw;
    line-height: 24 * @toVw;
    text-indent: 10 * @toVw;
    color: white;
    font-size: 13 * @toVw;
    margin: 15 * @toVw 0;
    text-align: left;
    display: flex;
    span {
      max-width: 296 * @toVw;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    i {
      margin-left: -6 * @toVw;
      width: 20 * @toVw;
      font-size: 12 * @toVw;
    }
  }
  .tip {
    color: #937148;
    font-size: 12 * @toVw;
    text-align: left;
  }
  h2 {
    color: #d33500;
    margin: 0 0 8 * @toVw;
  }
  p {
    color: #f65c28;
  }
}
.fal {
  padding: 39 * @toVw 0 12 * @toVw;
  height: 189 * @toVw;
  background: url("https://cdn.singsingenglish.com/new-sing/number_img_bg_lose@2x.png");
  background-size: 100% 100%;
  box-sizing: border-box;
  .fal_title {
    color: #2a455a;
    font-size: 24 * @toVw;
    font-weight: bold;
  }
  .fal_tip {
    color: #f65c28;
    font-size: 13 * @toVw;
    margin-top: 10 * @toVw;
  }
}

</style>
<style>
</style>