zhishifufei_uniapp/pages/special/task_text_info.vue

<template>
  <BaseContainer class="custom-wrapper">
    <NavBar :title="taskInfo.title">
      <template #right>
        <view class="browse">已浏览 {{ taskInfo.play_count }}</view>
      </template>
    </NavBar>
    <mp-html ref="content" class="content flex-auto" container-style="padding: 30rpx;background: #ffffff;"
      :content="!isPay && taskInfo.is_try ? taskInfo.try_content : taskInfo.content"></mp-html>
    <view v-if="!isPay && taskInfo.is_try" style="height: 128rpx"></view>
    <view v-if="!isPay && taskInfo.is_try" class="try-btn">
      <navigator :url="`/pages/special/details?id=${specialId}`">已试看，去购买</navigator>
    </view>
    <view class="catalog-button" @click="openToggle">
      <image class="image" :src="getImgPath('/wap/first/zsff/images/catalog-button.png')" />
    </view>
    <view :class="{ mask: dialogOpen }" @touchmove.prevent></view>
    <view :class="{ active: dialogOpen }" class="catalog-dialog">
      <view class="dialog-head">
        课程目录
        <view class="close-button" @click="dialogOpen = false">
          <i class="iconfont iconguanbi"></i>
        </view>
      </view>
      <view class="dialog-body" @scroll="scrollDialog">
        <view v-for="(item, index) in courseList" :key="item.id" class="item" @click="courseToggle(item)">
          <view class="item-body">
            <view class="li">
              <image class="image" src="@/static/images/special/video.png" mode="" />
              <view class="title">
                {{ index >= 9 ? index + 1 : '0' + (index + 1) }} | {{ item.title }}</view>
            </view>
            <view class="attribute">
              <view v-if="item.is_try" class="tag try">试看</view>
              <view class="tag">已学习</view>
            </view>
          </view>
          <view class="item-foot">
            <i v-if="item.is_free" :class="item.pay_status ? 'iconsuozi' : 'iconziyuan2'" class="iconfont"></i>
            <view v-else class="free-button">免费</view>
          </view>
        </view>
      </view>
    </view>
    <pay-dialog :open.sync="payDialogOpen" :money="Number(isMember ? specialInfo.member_money : specialInfo.money)"
      :now_money="now_money" :special_id="Number(specialId)" :pay_type_num="2" :is-wechat="isWechat"
      :is-alipay="is_alipay" :is-balance="is_yue" :template-id="templateIds" :wxpay-h5="wxpayH5" :is-member="isMember"
      :isMember="!!isMember" :memberMoney="Number(specialInfo.member_money)" :member-money="specialInfo.member_money"
      :member-link="memberLink" @change="changeVal" @fatherMethod="fatherMethod" :isMembership="true"></pay-dialog>
  </BaseContainer>
</template>
<script>
  import { getTaskInfo, saveSpecialViewing, get_course, getSpecialPlayNum, getTaskLink, delSpecialOrder, } from "@/api/special";
  import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html.vue";
  import PayDialog from "@/components/PayDialog/index.vue";

  export default {
    components: {
      mpHtml,
      PayDialog
    },
    data() {
      return {
        templateIds: '',
        taskId: 0,
        specialId: 0,
        taskInfo: {
          play_count: 0,
        },
        isPay: false,
        specialUrl: "",
        isSourcePay: false,
        isMember: 0,
        linkUrl: '',
        specialInfo: {},
        taskInfo: {
          play_count: 0
        },
        dialogOpen: false,
        payDialogOpen: false,
        offsetHeight: 0,
        scrollHeight: 0,
        page: 1,
        limit: 8,
        courseList: [],
        finished: false,
        now_money: 0,
        isWechat: false,
        is_alipay: false,
        is_yue: false,
        wxpayH5: false,
        memberLink: '',
        orderId: ''
      };
    },
    onLoad({ specialId, id, isWechat, is_alipay, is_yue, wxpayH5, memberLink, now_money, templateIds }) {
      this.taskId = id;
      this.specialId = specialId;
      this.isWechat = !!isWechat;
      this.is_alipay = !!is_alipay;
      this.is_yue = !!is_yue;
      this.wxpayH5 = !!wxpayH5;
      this.memberLink = memberLink;
      this.now_money = Number(now_money);
      this.templateIds = templateIds;
      this.get_course_list();
    },
    onShow() {
      this.getTaskInfo().then(() => {
        this.$nextTick(async () => {
          const query1 = this.$util.getClientRect(".custom-wrapper");
          const query2 = this.$util.getClientRect(".content");
          const [
            { height: containerHeight },
            { height: contentHeight },
          ] = await Promise.all([query1, query2]);

          this.offsetHeight = contentHeight;
          this.scrollHeight = containerHeight;

          if (contentHeight <= containerHeight) {
            if (!this.isPay && this.taskInfo.is_try) {
            } else {
              this.setTaskView(containerHeight);
            }
          }
        });
      });
    },
    onPageScroll(e) {
      this.contentScroll(e);
    },
    methods: {
      scrollDialog: function (event) {
        var target = event.target;
        if (target.clientHeight + target.scrollTop === target.scrollHeight) {
          this.get_course_list();
        }
      },
      get_course_list() {
        if (this.finished) {
          return;
        }
        get_course({
          special_id: this.specialId,
          page: this.page,
          limit: this.limit,
        }).then(res => {
          var data = res.data;
          var list = [];
          if (!Array.isArray(data)) {
            list = data.list;
          }
          this.courseList = this.courseList.concat(list);
          this.finished = list.length < this.limit;
        }).catch(function (err) {
        })
      },
      // 获取图文信息
      async getTaskInfo() {
        uni.showLoading({ mask: true });
        try {
          const { data, code } = await getTaskInfo(this.specialId, this.taskId);
          uni.hideLoading();
          if (code === 200) {
            this.taskInfo = data.taskInfo;
            this.specialInfo = data.specialInfo;
            this.isPay = data.isPay;
            this.isPay = data.isPay;
            this.isSourcePay = data.isSourcePay;
            this.isMember = data.is_member;
            this.linkUrl = data.link_url;
            this.specialInfo = data.specialInfo;
          }
        } catch (err) {
          uni.hideLoading();
          this.$util.showMsg(err);
        }
      },
      fatherMethod() {
        this.payDialogOpen = false;
      },
      changeVal(opt) {
        if (typeof opt != "object") opt = {};
        let action = opt.action || "";
        let value = opt.value || "";
        this[action] && this[action](value);
      },
      courseToggle(course) {
        if (course.id == this.taskId) return;
        if (!this.isPay && course.is_free && !course.is_try) {
          uni.showModal({
            title: "提示",
            content: "购买后即可操作，是否购买？",
            confirmText: "购买",
            success: ({ confirm }) => {
              // console.log(confirm)
              if (!confirm) return;
              this.dialogOpen = false;
              this.payDialogOpen = true;
              this.taskIdClicked = course.id;
            },
          });
        } else {
          this.taskId = course.id;
          getTaskLink(this.taskId, this.specialId).then(res => {
            getSpecialPlayNum(this.taskId, this.specialId).then(res => {
              this.getTaskInfo();
            }).catch(err => {
              console.log(err)
            })
          });

        }

      },
      pay_order(data) {
        this.orderId = data.data.result.orderId || "";
        console.log()
        switch (data.data.status) {
          case "PAY_ERROR":
          case "ORDER_EXIST":
          case "ORDER_ERROR":
            this.extendOrder(data.msg);
            break;
          case "WECHAT_PAY":
            this.wechatPay(data.data.result.jsConfig);
            // this.$util.weixinAppPay(data.data.result.jsConfig,this);
            break;
          case "WECHAT_H5_PAY":
            this.payDialogOpen = false;
            this.$util.wechatH5Pay(data.data.result.jsConfig, this);
            break;
          case "WECHAT_ROUTINE_PAY":
            this.$util.wechatRoutinePay(data.data.result.jsConfig, this);
            break;
          case "SUCCESS":
            this.successOrder(data.msg);
            break;
          case "ZHIFUBAO_PAY":
            this.aliPay(data.data.result, "special");
            break;
          case 'TOUTIAO_PAY':
            this.$util.toutiaoPay(data.data.result.jsConfig, this);
            break;
          case 'KUAISHOU_PAY':
            this.$util.kuaishouPay(data.data.result.jsConfig, this);
            break
        }
      },
      aliPay(msn, type) {
        this.$util.aliPay(msn, type, this);
      },
      extendOrder(msg) {
        let that = this;
        if (typeof msg === "object") {
          if (msg.errMsg === "chooseWXPay:cancel") {
            msg = "微信支付取消";
          } else {
            msg = "支付失败";
          }
        } else {
          msg = "支付失败";
        }
        this.$util.showMsg(msg);
        this.payDialogOpen = false;
        if (this.orderId) {
          delSpecialOrder(this.orderId).then((res) => {
            console.log(res);
          });
        }
      },
      wechatPay: function (config) {
        this.$util.weixinpay(config, this);
      },
      successOrder(msg) {
        this.$util.showMsg(msg ? msg : "支付成功");
        this.is_pay = true;
        this.payDialogOpen = false;
        this.getTaskInfo();
        this.page = 1;
        this.finished = false;
        this.courseList = [];
        this.get_course_list();
      },
      // 设置记录
      setTaskView(viewingTime) {
        saveSpecialViewing({
          special_id: this.specialId,
          task_id: this.taskId,
          viewing_time: viewingTime,
          percentage: Math.floor((viewingTime / this.scrollHeight) * 100),
          total: this.scrollHeight,
        });
      },
      openToggle() {
        this.dialogOpen = true;
      },
      // 页面滚动
      contentScroll({ scrollTop }) {
        console.log(scrollTop);
        if (!this.isPay && this.taskInfo.is_try) {
          return;
        }

        if (this.isCenter && this.isEnd) return;

        if ((this.offsetHeight + scrollTop) * 2 >= this.scrollHeight && !this.isCenter) {
          this.setTaskView(this.offsetHeight + scrollTop);
          this.isCenter = true;
        }
        if (this.offsetHeight + scrollTop === this.scrollHeight && !this.isEnd) {
          this.setTaskView(this.offsetHeight + scrollTop);
          this.isEnd = true;
        }
      },
    },
  };
</script>

<style scoped lang="scss">
  .content {
    flex: 1;
    padding: 30rpx;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .try-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20rpx 30rpx;
  }

  .try-btn navigator {
    display: block;
    width: 100%;
    height: 88rpx;
    border-radius: 44rpx;
    background-color: #2c8eff;
    font-size: 28rpx;
    line-height: 88rpx;
    text-align: center;
    color: #ffffff;
  }

  .browse {
    margin-right: 30rpx;
    font-size: 24rpx;
    color: #999999;
  }

  .catalog-button {
    position: fixed;
    right: 30rpx;
    bottom: 47rpx;
    width: 106rpx;
    height: 108rpx;
  }

  .image {
    width: 105rpx;
    height: 105rpx;
  }

  .catalog-dialog {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    max-height: 75%;
    border-radius: 16rpx 16rpx 0 0;
    background-color: #FFFFFF;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s;
  }

  .catalog-dialog.active {
    transform: translateY(0);
  }

  .catalog-dialog .dialog-head {
    position: relative;
    height: 105rpx;
    text-align: center;
    font-weight: 500;
    font-size: 32rpx;
    line-height: 105rpx;
    color: #282828;
  }

  .catalog-dialog .close-button {
    position: absolute;
    top: 50%;
    right: 30rpx;
    transform: translateY(-50%);
  }

  .catalog-dialog .close-button .iconfont {
    font-size: 30rpx;
    color: #8A8A8A;
  }

  .catalog-dialog .dialog-body {
    flex: 1;
    min-height: 0;
    padding: 10rpx 30rpx;
    overflow-y: auto;
    word-wrap: break-word;
    -webkit-overflow-scrolling: touch;
  }

  .catalog-dialog .dialog-body .item {
    display: flex;
    align-items: center;
    height: 140rpx;
    padding: 0 20rpx 0 30rpx;
    border-radius: 12rpx;
    background-color: #F2F8FF;
    cursor: pointer;
  }

  .catalog-dialog .dialog-body .item+.item {
    margin-top: 20rpx;
  }

  .catalog-dialog .dialog-body .item-body {
    flex: 1;
    min-width: 0;

    .li {
      display: flex;
      align-items: center;

      .image {
        width: 40rpx;
        height: 25rpx;

      }
    }

  }

  .catalog-dialog .dialog-body .title {
    padding-left: 20rpx;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 28rpx;
    line-height: 40rpx;
    color: #333333;

  }

  .catalog-dialog .dialog-body .attribute {
    display: flex;
    padding: 15rpx 0 0 58rpx;
  }

  .catalog-dialog .dialog-body .tag {
    height: 25rpx;
    padding: 0 8rpx;
    border-radius: 3rpx;
    background-color: #FF9500;
    color: #fff;
    border: 1px solid transparent;
    font-size: 18rpx;
    line-height: 33rpx;
		height: 33rpx;
  }

  .catalog-dialog .dialog-body .tag+.tag {
    margin-left: 15rpx;
  }

  .catalog-dialog .dialog-body .tag.try {
    border-color: #2C8EFF;
    background-color: transparent;
    color: #2C8EFF;
  }

  .catalog-dialog .dialog-body .item-foot {
    width: 90rpx;
    margin-left: 15rpx;
    text-align: center;
  }

  .catalog-dialog .dialog-body .iconfont {
    font-size: 39rpx;
    color: #CCCCCC;
  }

  .catalog-dialog .dialog-body .free-button {
    width: 90rpx;
    height: 40rpx;
    border: 1px solid #FF6B00;
    border-radius: 20rpx;
    font-size: 22rpx;
    line-height: 38rpx;
    color: #FF6B00;
  }
</style>