mteacher/src/views/app/PeriodExchange.vue

<template>
  <div class="periodExchange">
    <m-header v-if="headerStatus" />

    <van-cell-group>
      <van-cell :center="true">
        <template slot="icon">
          <img class="logo" v-if="userInfo.avatar" :src="userInfo.avatar" alt="" />
          <img class="logo" v-else src="@/assets/images/icon_student.png" alt="" />
        </template>
        <template slot="title">
          <p class="exchangeText">{{ userInfo.realName }}</p>
        </template>
        <template slot="label">
          <p class="info">剩余时长：{{ availableMinutes }}</p>
        </template>
      </van-cell>
    </van-cell-group>

    <div class="activeList" v-if="dataShow">
      <h2>优惠活动：</h2>

      <div class="active" @click="onPayOrder(item)" v-for="(item, index) in dataList" :key="index">
        <van-icon name="question-o" v-if="imageStatus" @click.stop="onMore(item)" class="icon_question" />
        <!-- <img :src="item.coverImg" alt=""> -->
        <van-image :src="item.coverImg" @load="onImageLoad">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
      </div>
    </div>
    <div class="activeList" v-else>
      <h2>优惠活动：</h2>
      <m-empty class="empty" msg="暂无优惠活动" key="data" />
    </div>

    <!-- <div class="pay_btn" >确认兑换</div> -->
    <van-popup v-model="popupShow" closeable position="bottom" :style="{ minHeight: '30%', maxHeight: '60%' }">
      <div class="popupContent" v-html="popupContent"></div>
    </van-popup>

    <m-payment :closeStatus="isStatus" :amount="payMoney" :payment="payment" @onChangeStatus="onChangeStatus" />
  </div>
</template>
<script>
/* eslint-disable */
import MHeader from "@/components/MHeader";
import MEmpty from "@/components/MEmpty";
import MPayment from "@/components/MPayment";
import { browser, calcMinute } from "@/common/common";
import { tenantEntryActivitesList, queryUserInfo, sysTenantAccountGet, createOrder } from "@/api/app";

export default {
  name: "courseApply",
  components: { MHeader, MEmpty, MPayment },
  data() {
    return {
      userInfo: {},
      availableMinutes: 0,
      headerStatus: true,
      result: {}, // 生成订单的数据
      dataList: [],
      isClick: false,
      popupShow: false,
      popupContent: null,
      dataShow: true, // 是否有数据
      imageStatus: false,
      isStatus: false,
      payment: {}, // 支付对象
      payMoney: 0,
    };
  },
  mounted() {
    let params = this.$route.query;
    if (params.Authorization) {
      localStorage.setItem("Authorization", decodeURI(params.Authorization));
      localStorage.setItem("userInfo", decodeURI(params.Authorization));
    }

    document.title = "课时兑换";
    if (browser().android || browser().iPhone) {
      this.headerStatus = false;
    }

    this.__init();
  },
  methods: {
    async __init() {
      let loadingStatus = true;
      this.$toast.loading({
        duration: 0,
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
      });
      await queryUserInfo().then((res) => {
        let result = res.data;
        if (result) {
          this.userInfo = result;
        }
      });

      await sysTenantAccountGet().then((res) => {
        let result = res.data;
        if (result.code == 200) {
          let tempResult = result.data;
          if (tempResult) {
            this.availableMinutes = calcMinute(tempResult.availableMinutes ? tempResult.availableMinutes : 0);
          }
        } else {
          loadingStatus = false;
          this.$toast(result.msg);
        }
      });

      await tenantEntryActivitesList().then((res) => {
        let result = res.data;
        if (result.code == 200) {
          this.dataList = result.data.rows ? result.data.rows : [];
        } else {
          loadingStatus = false;
          this.$toast(result.msg);
        }
        if (this.dataList.length <= 0) {
          this.dataShow = false;
        }
      });
      if (loadingStatus) {
        this.$toast.clear();
      }
    },
    onImageLoad() {
      this.imageStatus = true;
    },
    onPayOrder(item) {
      // activitiesId
      if (this.isClick) {
        return;
      }
      this.$toast.loading({
        duration: 0,
        message: "加载中...",
        forbidClick: true,
        loadingType: "spinner",
      });
      this.isClick = true;
      createOrder({ activitiesId: item.id }).then((res) => {
        let result = res.data;
        this.$toast.clear();
        this.isClick = false;
        if (result.code == 200) {
          this.result = result.data;
          this.onSubmit();
        } else if (result.code == 100) {
          this.$dialog
            .confirm({
              // title: '提示',
              message: result.data,
              confirmButtonColor: "#269a93",
              cancelButtonText: "取消",
              confirmButtonText: "继续付款",
            })
            .then(() => {
              this.$toast.loading({
                duration: 0,
                message: "加载中...",
                forbidClick: true,
                loadingType: "spinner",
              });
              // 继续支付
              createOrder({ activitiesId: item.id, isContinuePay: true }).then((res) => {
                let result = res.data;
                this.$toast.clear();
                if (result.code == 200) {
                  this.result = result.data;
                  this.onSubmit();
                } else {
                  this.$toast(result.msg);
                }
              });
            });
        } else {
          this.$toast(result.msg);
        }
      });
    },
    onChangeStatus(val) {
      this.isStatus = val;
    },
    onSubmit() {
      // submit 提交
      let result = this.result;
      let f = result.payMap;
      this.payMoney = Number(f.amount);
      if (result.type == "YQPAY") {
        document.querySelector("#onSubmit").action = f.host;
        document.querySelector("#apiContent").value = f.apiContent;
        document.querySelector("#merNo").value = f.merNo;
        document.querySelector("#notifyUrl").value = f.notifyUrl;
        document.querySelector("#sign").value = f.sign;
        document.querySelector("#signType").value = f.signType;
        document.querySelector("#timestamp").value = f.timestamp;
        document.querySelector("#version").value = f.version;
        document.querySelector("#onSubmit").submit();
      } else if (result.type == "ADAPAY" || result.type == "YEEPAY") {
        // 汇付天下
        this.payment = result;
        // 开始支付窗口
        this.isStatus = true;
      }
    },
    onMore(item) {
      this.popupContent = item.detail;
      this.popupShow = true;
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../assets/commonLess/variable.less");
.periodExchange {
  min-height: 100vh;
  position: relative;
  background: #fff;
  .logo {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 0.13rem;
  }
  /deep/.van-cell {
    margin-top: -1px;
    padding: 0.26rem 0.16rem 0.15rem;
    // background: #14928A;
    line-height: 0.24rem;
  }
  .exchangeText {
    font-size: 0.21rem;
    color: #1a1a1a;
    font-weight: 500;
  }
  .info {
    font-size: 0.14rem;
    color: #808080;
  }
  [class*="van-hairline"] {
    &::after {
      border: 0 solid #fff;
    }
  }
}
.activeList {
  padding: 0.15rem 0.16rem 0;
  // margin-top: -.6rem;
  position: relative;
  z-index: 49;
  h2 {
    font-size: 0.16rem;
    color: #444;
    padding-left: 0.15rem;
    padding-bottom: 0.15rem;
    position: relative;
    &::before {
      content: " ";
      width: 0.04rem;
      height: 0.15rem;
      background: @mColor;
      border-radius: 0.02rem;
      position: absolute;
      left: 0.02rem;
      top: 0.04rem;
    }
    span {
      float: right;
    }
  }
  .active {
    position: relative;
    margin-bottom: 0.15rem;
    line-height: 0;
    // box-shadow:0px 0px 16px 0px rgba(155,145,41,0.19);
  }
  img {
    width: 100%;
  }
  .icon_question {
    position: absolute;
    z-index: 10;
    bottom: 0.06rem;
    right: 0.12rem;
    color: #e94a47;
    font-size: 0.18rem;
  }
}
.popupContent {
  padding: 0.4rem 0.16rem 0.1rem;
}
.van-image {
  display: block;
  width: 100%;
  min-width: 1rem;
}
.pay_btn {
  background: @mColor;
  line-height: 0.45rem;
  color: #fff;
  font-size: 0.18rem;
  border-radius: 0.5rem;
  text-align: center;
  position: absolute;
  width: 90%;
  margin-left: 5%;
  bottom: 0.2rem;
}
</style>