You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
509 lines
14 KiB
509 lines
14 KiB
<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> |