zc_saas_h5/pages5/mockExam/registrationSuccess.vue

<template>
  <view class="registration_success">
    <nav-bar title="模考报名成功"></nav-bar>
    <view class="exam_success">
      <image class="imgs" src="../static/ping_bg.png"></image>
      <view class="activity_time">
        活动时间：{{ startTime | formate("yyyy年mm月dd日") }}-{{
          endTime | formate("yyyy年mm月dd日")
        }}
      </view>
    </view>
    <view class="exam_times">
      <view class="time_up">
        <view class="start_time all_time">
          <view class="time_left">
            <text class="numbers">{{ startTime | getLastDay }}</text>
            <text class="days">天</text>
          </view>
          <view class="words">距模考开始时间</view>
        </view>
        <view class="lines"></view>
        <view class="end_time all_time">
          <view class="time_left">
            <text class="numbers">{{ endTime | getLastDay }}</text>
            <text class="days">天</text>
          </view>
          <view class="words">距模考结束时间</view>
        </view>
      </view>
      <view class="time_down">
        <view class="look_mock" @click="toLookMock()">立即进入模考</view>
      </view>
    </view>
    <view class="mains">
      <view class="gives">
        <view>高命中率类原题</view>
        <view>通关有保障</view>
      </view>
      <view class="middles">
        <view class="qr_codes">
          <image
            class="code"
            src="../static/erCode.png"
            show-menu-by-longpress="true"
          ></image>
        </view>
        <view class="discern">扫码查看类原题</view>
      </view>
      <!-- <view class="middle_line">
        <view class="half_cir_left"></view>
        <view class="line"></view>
        <view class="half_cir_rig"></view>
      </view> -->
      <!-- <view class="flows">
        <view class="f_title">活动流程</view>
        <view class="f_lines">
          <view class="numbers">1</view>
          <view class="line line_one"></view>
          <view class="numbers">2</view>
          <view class="line line_two"></view>
          <view class="numbers">3</view>
          <view class="line line_three"></view>
          <view class="numbers">4</view>
        </view>
        <view class="f_words">
          <view class="word word_one">预约报名</view>
          <view class="word word_two">扫码添加活动 专属微信号</view>
          <view class="word word_three">模考</view>
          <view class="word word_four">领福利</view>
        </view>
      </view> -->
    </view>
    <view class="activity_phone">
      <view class="titles">活动咨询电话</view>
      <view class="phone_num">
        <text @click="call('020-87085982')">020-87085982</text>、
        <text @click="call('87085983')">87085983</text>
      </view>
      <view class="titles">报名咨询</view>
      <view class="phone_num">
        <text style="margin-right: 20rpx" @click="call('13631379636')"
          >苏老师13631379636
        </text>
        <text @click="call('13138489426')">13138489426</text>
      </view>
      <view class="titles">联系地址</view>
      <view class="phone_num">广州市天河区燕岭路123号建设大厦3楼</view>
    </view>

    <view v-if="courseList.length" class="course_list">
      <view class="titles">
        <image class="code" src="@/static/learn/act_icon.png"></image>
        <text class="title">推荐课程</text>
      </view>
      <view
        class="list_item"
        v-for="(item, index) in courseList"
        :key="index"
        @click="toBuy(item)"
      >
        <view class="course_content">
          <view class="c_title">{{ item.goodsName }}</view>
          <view class="c_downs">
            <view class="img">
              <image :src="$method.splitImgHost(item.coverUrl, true)"></image>
              <view class="time" v-if="item.year">{{
                item.year ? item.year : ""
              }}</view>
            </view>
            <view class="text">
              <view class="desc">
                <view class="left">
                  <text class="mon_t">¥ {{ item.standPrice }}</text>
                  <text v-if="item.linePrice" class="sale"> ¥ </text>
                  <text v-if="item.linePrice" class="price_line"
                    >&nbsp;{{ item.linePrice }}</text
                  >
                </view>
                <view class="right">
                  <view class="regiser_row" v-if="!hideBuyState">立即购买</view>
                </view>
              </view>
              <view v-if="item.buyUserNum" class="joins">
                <!-- 为0时，不显示 -->
                <view class="people">{{ item.buyUserNum }}人参与</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
var curTime = new Date().getTime(); // 当前时间的时间戳
export default {
  name: "registrationSuccess",
  data() {
    return {
      startTime: "",
      endTime: "",
      // lastStartDay: '',
      // lastEndDay: '',
      // sDay: '',
      // eDay: '',
      activityId: "",
      courseList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
    };
  },
  filters: {
    getLastDay(time) {
      var padDate = function (va) {
        va = va < 10 ? "0" + va : va;
        return va;
      };
      if (time) {
        var value = new Date(time * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var year = value.getFullYear();
        var month = padDate(value.getMonth() + 1);
        var day = padDate(value.getDate());
        let t_value = year + "/" + month + "/" + day;
        let curTimeLast =
          new Date(new Date(t_value).toLocaleDateString()).getTime() +
          24 * 60 * 60 * 1000 -
          1;

        let lastStartDay =
          parseInt(curTimeLast / 1000) - parseInt(curTime / 1000);
        let days = parseInt(lastStartDay / 24 / 60 / 60);
        return days >= 1 ? days : 0;
      }
    },
  },
  computed: { ...mapGetters(["hideBuyState"]) },
  onLoad(option) {
    // console.log('option: ', option)
    // endTime=1663084800&startTime=1662998400&activityId=13
    this.startTime = option.startTime;
    this.endTime = option.endTime;
    this.activityId = option.activityId;
  },
  onShow() {
    this.courseList = [];
    this.getAct();
  },
  onPullDownRefresh() {
    this.pageNum = 1;
    this.getAct();
  },
  onReachBottom() {
    console.log(this.total, "total");
    console.log(this.courseList.length, "length");
    if (this.courseList.length < this.total) {
      this.pageNum++;
      this.getAct();
    }
  },
  methods: {
    getAct() {
      this.$http({
        url: `/app/common/activity/goodsList/${this.activityId}`,
        method: "get",
        noToken: true,
        data: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          // this.courseList = res.data.data || []
          this.courseList.push(...res.data.rows);
          this.total = res.data.total;
        }
      });
    },
    toBuy(item) {
      if (item.goodsType == 2) {
        uni.navigateTo({
          url: "/pages2/bank/detail?id=" + item.goodsId,
        });
      } else {
        // /pages5/liveDetail/index
        uni.navigateTo({
          url:
            "/pages3/course/detail?id=" +
            item.goodsId +
            "&goodsType=" +
            item.goodsType,
        });
      }
    },
    // 查看模考
    toLookMock() {
      uni.navigateTo({
        url: "/pages5/examList/index?state=0",
      });
    },
    call(phone) {
      wx.makePhoneCall({
        phoneNumber: phone, //仅为示例，并非真实的电话号码
        success: function () {
          console.log("拨打电话成功！");
        },
        fail: function () {
          console.log("拨打电话失败！");
        },
      });
    },
  },
};
</script>

<style>
page {
  /* background-color: #DFECFD; */
  background: linear-gradient(90deg, #edf1ff 0%, #d9f0ff 100%);
}
</style>

<style lang="scss" scoped>
.registration_success {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.exam_success {
  width: 100%;
  height: 360rpx;
  // margin-top: 68rpx;
  display: flex;
  align-items: center;
  position: relative;
  top: 0;
  left: 0;
  .imgs {
    width: 100%;
    height: 360rpx;
    // width: 56rpx;
    // height: 56rpx;
  }
  .activity_time {
    width: 662rpx;
    height: 72rpx;
    line-height: 72rpx;
    text-align: center;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 16rpx;
    border: 2rpx solid #ffffff;
    font-size: 30rpx;
    font-weight: 500;
    color: #2d5692;
    position: absolute;
    bottom: 12rpx;
    left: 40rpx;
  }
}
.exam_times {
  margin-top: 28rpx;
  width: 670rpx;
  // height: 178rpx;
  background: #ffffff;
  border-radius: 24rpx;
  padding: 0rpx 64rpx;
  .time_up {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 178rpx;
  }
  .time_down {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40rpx;
    .look_mock {
      width: 288rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      background: #ffffff;
      border-radius: 160rpx;
      border: 2rpx solid #f67205;
      font-size: 32rpx;
      color: #f67205;
    }
  }
  .all_time {
    .time_left {
      text-align: center;
    }
    .numbers {
      font-size: 52rpx;
      font-weight: 800;
      color: #f67205;
    }
    .days {
      font-size: 28rpx;
      font-weight: 500;
      color: #f67205;
    }
    .words {
      font-size: 28rpx;
      color: #6d7d94;
      margin-top: 10rpx;
    }
  }
  .time_title {
    font-size: 48rpx;
    font-weight: bold;
    color: #3487ff;
  }
  .time_range {
    font-size: 26rpx;
    font-weight: 500;
    color: #222222;
    margin-top: 12rpx;
  }
  .lines {
    width: 2rpx;
    height: 84rpx;
    background: #e4e4e4;
  }
}
.mains {
  width: 670rpx;
  background: #ffffff;
  border-radius: 16rpx;
  margin-top: 36rpx;
  padding-bottom: 64rpx;
  .gives {
    width: 100%;
    height: 160rpx;
    padding: 32rpx 60rpx;
    background-color: #3f8dfd;
    font-size: 36rpx;
    font-weight: bold;
    color: #ffffff;
    border-radius: 16rpx 16rpx 0rpx 0rpx;
    text-align: center;
    view {
      line-height: 50rpx;
    }
  }
  .middles {
    margin-top: 48rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .qr_codes {
      width: 268rpx;
      height: 268rpx;
      background: #ffffff;
      border-radius: 24rpx;
      border: 4rpx solid #91beff;
      position: relative;
      top: 0;
      left: 0;
      .code {
        width: 248rpx;
        height: 248rpx;
        position: absolute;
        top: 6rpx;
        left: 6rpx;
      }
    }
    .discern {
      font-size: 28rpx;
      color: #222222;
      margin-top: 24rpx;
    }
  }
  .middle_line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28rpx;
    .half_cir_left {
      width: 20rpx;
      height: 40rpx;
      border-radius: 0rpx 20rpx 20rpx 0rpx;
      background-color: #dfecfd;
    }
    .half_cir_rig {
      width: 20rpx;
      height: 40rpx;
      border-radius: 20rpx 0rpx 0rpx 20rpx;
      background-color: #dfecfd;
    }
    .line {
      width: 588rpx;
      height: 2rpx;
      border-bottom: 2rpx dashed #c4dcff;
    }
  }
  .flows {
    margin-top: 18rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .f_title {
      font-size: 32rpx;
      font-weight: bold;
      color: #222222;
      position: relative;
      top: 0rpx;
      left: 0rpx;
      &::after {
        content: "";
        width: 32rpx;
        height: 8rpx;
        background: #3f8dfd;
        position: absolute;
        bottom: -8rpx;
        left: 40rpx;
      }
    }
    .f_lines {
      width: 500rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 26rpx 0rpx 16rpx 0rpx;
      .numbers {
        width: 40rpx;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        background: #d5e6ff;
        border-radius: 50%;
        font-size: 24rpx;
        font-weight: bold;
        color: #3f8dfd;
      }
      .line {
        height: 2rpx;
        border-bottom: 2rpx dashed #c4dcff;
      }
      .line_one {
        width: 112rpx;
      }
      .line_two {
        width: 86rpx;
      }
      .line_three {
        width: 48rpx;
      }
    }
    .f_words {
      display: flex;
      align-items: flex-start;
      width: 526rpx;
      justify-content: space-between;
      .word {
        font-size: 26rpx;
        font-weight: 400;
        color: #3f8dfd;
      }
      .word_two {
        width: 156rpx;
        text-align: center;
      }
    }
  }
}
.distance_time {
  margin-top: 56rpx;
  .time_item {
    font-size: 32rpx;
    color: #222222;
    margin-bottom: 24rpx;
  }
}
.activity_phone {
  margin: 40rpx 0rpx 56rpx 0rpx;
  padding: 32rpx 0rpx 32rpx 44rpx;
  width: 670rpx;
  // height: 148rpx;
  background: #ffffff;
  border-radius: 24rpx;
  .titles {
    font-size: 28rpx;
    color: #222222;
    margin-bottom: 12rpx;
  }
  .phone_num {
    font-size: 28rpx;
    color: #3f8dfd;
    margin-bottom: 32rpx;
  }
}
.exam_entry {
  font-size: 32rpx;
  font-weight: 500;
  color: #222222;
  margin-bottom: 80rpx;
}
.course_list {
  // width: 100%;
  padding: 0rpx 32rpx;
  box-shadow: 0px 10rpx 9rpx 1rpx rgba(165, 196, 239, 0.1);
  .titles {
    margin-left: 10rpx;
    margin-bottom: 32rpx;
    .code {
      width: 38rpx;
      height: 24rpx;
    }
    .title {
      font-size: 40rpx;
      font-family: OPPOSans-Bold, OPPOSans;
      font-weight: bold;
      color: #222222;
      margin-left: 14rpx;
    }
  }
  .list_item {
    padding: 24rpx;
    // height: 278rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 20rpx 1rpx rgba(1, 99, 235, 0.1);
    border-radius: 24rpx;
    background: #fff;
    margin-bottom: 32rpx;
    display: flex;
    align-items: center;
    .c_title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 24rpx;
      font-weight: bold;
      color: #222222;
    }
    .c_downs {
      display: flex;
    }
    .img {
      position: relative;
      margin-right: 24rpx;
      border-radius: 16rpx;
      overflow: hidden;
      width: 204rpx;
      height: 120rpx;
      image {
        width: 100%;
        height: 100%;
      }

      .time {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 80rpx;
        height: 32rpx;
        background: rgba(1, 25, 45, 0.4);
        color: #fff;
        text-align: center;
        line-height: 32rpx;
        font-size: 24rpx;
        border-radius: 10rpx 0px 10rpx 0px;
      }
    }

    .text {
      width: 440rpx;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 120rpx;
      .joins {
        .people {
          width: 160rpx;
          font-size: 20rpx;
          color: #999999;
          padding: 0rpx 8rpx;
          text-align: center;
          height: 36rpx;
          line-height: 36rpx;
          background: #f6f7fb;
          border-radius: 4px;
        }
      }
      .desc {
        margin-top: 10rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        .left {
          flex: 1;
          color: #333;
          font-size: 26rpx;
          .mon_t {
            font-weight: bold;
            color: #fc3f3f;
            font-size: 36rpx;
          }
          .sale {
            color: #999999;
            font-size: 24rpx;
            margin-left: 8rpx;
          }
          .price_line {
            color: #999999;
            font-size: 24rpx;
            text-decoration: line-through;
            font-weight: 400;
          }
        }

        .right {
          font-size: 24rpx;
          font-weight: bold;
          .regiser_row {
            width: 144rpx;
            height: 52rpx;
            line-height: 52rpx;
            text-align: center;
            border-radius: 16rpx;
            background-color: #fc3f3f;
            color: #fff;
            font-weight: 500;
            font-size: 26rpx;
          }
        }
      }
    }
  }
}
</style>