|
@@ -6,11 +6,16 @@
|
|
left-arrow
|
|
left-arrow
|
|
@click-left="onClickLeft"
|
|
@click-left="onClickLeft"
|
|
></van-nav-bar>
|
|
></van-nav-bar>
|
|
- <div id="link" style="display: none;" :aria-label="giveLink"></div>
|
|
|
|
|
|
+ <div id="linkCode" style="display: none;" :data-clipboard-text="giveLink">
|
|
|
|
+ {{ giveLink }}
|
|
|
|
+ </div>
|
|
<div class="courseContent">
|
|
<div class="courseContent">
|
|
- <scroller
|
|
|
|
- ref="scroller"
|
|
|
|
- :on-infinite='getMoreList'>
|
|
|
|
|
|
+ <scroller
|
|
|
|
+ ref="recordScroller"
|
|
|
|
+ :on-infinite="getMoreList"
|
|
|
|
+ :list="recordList"
|
|
|
|
+ noDataText="没有更多..."
|
|
|
|
+ >
|
|
<courseList :dataList="courseInfo" :showNum="2"></courseList>
|
|
<courseList :dataList="courseInfo" :showNum="2"></courseList>
|
|
<div class="record">
|
|
<div class="record">
|
|
<p>名额变动明细</p>
|
|
<p>名额变动明细</p>
|
|
@@ -22,14 +27,15 @@
|
|
>
|
|
>
|
|
<div class="flex-name-num">
|
|
<div class="flex-name-num">
|
|
<p>{{ item.subjectName }}</p>
|
|
<p>{{ item.subjectName }}</p>
|
|
- <span>{{Number(item.amount)>0?`+${item.amount}`:item.amount}}</span>
|
|
|
|
|
|
+ <span>{{
|
|
|
|
+ Number(item.amount) > 0 ? `+${item.amount}` : item.amount
|
|
|
|
+ }}</span>
|
|
</div>
|
|
</div>
|
|
<p>{{ item.content }}</p>
|
|
<p>{{ item.content }}</p>
|
|
<span>{{ item.createTime }}</span>
|
|
<span>{{ item.createTime }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <van-divider :style="{ color: '#333', borderColor: '#333', padding: '10px 16px' }" v-if='recordList.length == page.total'>没有更多了</van-divider>
|
|
|
|
</scroller>
|
|
</scroller>
|
|
</div>
|
|
</div>
|
|
<div class="courseShare" @click="comfirmCode">
|
|
<div class="courseShare" @click="comfirmCode">
|
|
@@ -40,13 +46,15 @@
|
|
title="立即赠送给好友"
|
|
title="立即赠送给好友"
|
|
:options="options"
|
|
:options="options"
|
|
@select="onSelect"
|
|
@select="onSelect"
|
|
|
|
+ :aria-label="giveLink"
|
|
|
|
+ class="linkCodeShare"
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
-
|
|
|
|
<script>
|
|
<script>
|
|
-import {getCourseRecordList,createCourseCode} from '../api'
|
|
|
|
|
|
+import { getCourseRecordList, createCourseCode } from "../api";
|
|
import Clipboard from "clipboard";
|
|
import Clipboard from "clipboard";
|
|
|
|
+import axios from "axios";
|
|
import courseList from "../components/courseList.vue";
|
|
import courseList from "../components/courseList.vue";
|
|
export default {
|
|
export default {
|
|
name: "",
|
|
name: "",
|
|
@@ -54,46 +62,49 @@ export default {
|
|
props: [],
|
|
props: [],
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- showShare:false,
|
|
|
|
- canReq:true,
|
|
|
|
|
|
+ showShare: false,
|
|
|
|
+ canReq: true,
|
|
loading: false,
|
|
loading: false,
|
|
finished: false,
|
|
finished: false,
|
|
activeTab: 0,
|
|
activeTab: 0,
|
|
title: "课程详情",
|
|
title: "课程详情",
|
|
- giveLink:"",
|
|
|
|
- options:[
|
|
|
|
|
|
+ giveLink: "",
|
|
|
|
+ noDate: false,
|
|
|
|
+ options: [
|
|
// { name: '微信', icon: 'wechat' },
|
|
// { name: '微信', icon: 'wechat' },
|
|
- { name: '复制链接', icon: 'link' },
|
|
|
|
|
|
+ { name: "复制链接", icon: "link" }
|
|
// { name: '二维码', icon: 'qrcode' },
|
|
// { name: '二维码', icon: 'qrcode' },
|
|
],
|
|
],
|
|
- page:{
|
|
|
|
- cur:1,
|
|
|
|
- total:0,
|
|
|
|
- size:10
|
|
|
|
|
|
+ page: {
|
|
|
|
+ cur: 1,
|
|
|
|
+ total: 0,
|
|
|
|
+ size: 10
|
|
},
|
|
},
|
|
courseDetail: {
|
|
courseDetail: {
|
|
- id: 0,//资产id
|
|
|
|
- userId:0,//用户id
|
|
|
|
- subjectId:0,//课程id
|
|
|
|
- subjectName:"",
|
|
|
|
- subjectThumb:"",//缩略图
|
|
|
|
- subjectPrice:0,//课程价格
|
|
|
|
- sectionsNum:0,//章节数
|
|
|
|
- subjectEnable:1,//是否上架
|
|
|
|
- amount:0,//剩余名额
|
|
|
|
- statistics:{
|
|
|
|
- saleAmount:0,//已卖出
|
|
|
|
- transferOutAmount:0,//已转入
|
|
|
|
- transferInAmount:0,//已转出
|
|
|
|
- },
|
|
|
|
|
|
+ id: 0, //资产id
|
|
|
|
+ userId: 0, //用户id
|
|
|
|
+ subjectId: 0, //课程id
|
|
|
|
+ subjectName: "",
|
|
|
|
+ subjectThumb: "", //缩略图
|
|
|
|
+ subjectPrice: 0, //课程价格
|
|
|
|
+ sectionsNum: 0, //章节数
|
|
|
|
+ subjectEnable: 1, //是否上架
|
|
|
|
+ amount: 0, //剩余名额
|
|
|
|
+ statistics: {
|
|
|
|
+ saleAmount: 0, //已卖出
|
|
|
|
+ transferOutAmount: 0, //已转入
|
|
|
|
+ transferInAmount: 0 //已转出
|
|
|
|
+ }
|
|
},
|
|
},
|
|
- recordList:[]
|
|
|
|
|
|
+ recordList: []
|
|
};
|
|
};
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
courseInfo() {
|
|
courseInfo() {
|
|
let list = [];
|
|
let list = [];
|
|
- list.push(this.courseDetail);
|
|
|
|
|
|
+ if (this.courseDetail && this.courseDetail.userId != 0) {
|
|
|
|
+ list.push(this.courseDetail);
|
|
|
|
+ }
|
|
return list;
|
|
return list;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -101,26 +112,89 @@ export default {
|
|
this.init();
|
|
this.init();
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- onSelect(option){
|
|
|
|
- console.log(option)
|
|
|
|
- if(option.name == '复制链接'){
|
|
|
|
- this.$dialog.confirm({
|
|
|
|
- title: '提示',
|
|
|
|
- message: '确定要生成课程分享码?',
|
|
|
|
- }).then(() => {
|
|
|
|
- createCourseCode(this.courseDetail.subjectId).then(res=>{
|
|
|
|
- this.giveLink = res
|
|
|
|
- this.copyLink('#link')
|
|
|
|
- })
|
|
|
|
- }).catch(err=>{
|
|
|
|
- this.showShare = false
|
|
|
|
- })
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
|
|
+ onSelect(option) {
|
|
|
|
+ if (option.name == "复制链接") {
|
|
|
|
+ this.$dialog
|
|
|
|
+ .confirm({
|
|
|
|
+ title: "提示",
|
|
|
|
+ message: "确定要生成课程分享码?"
|
|
|
|
+ })
|
|
|
|
+ .then(() => {
|
|
|
|
+ createCourseCode(this.courseDetail.subjectId).then(res => {
|
|
|
|
+ this.giveLink = `${
|
|
|
|
+ window.location.href.split("#")[0]
|
|
|
|
+ }#/courseDetail/${this.$route.params.id}?code=${res}`;
|
|
|
|
+ this.copyLink(this.giveLink);
|
|
|
|
+ // this.copyTextToClipboard(this.giveLink);
|
|
|
|
+ });
|
|
|
|
+ })
|
|
|
|
+ .catch(err => {
|
|
|
|
+ this.showShare = false;
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ async copyTextToClipboard(text) {
|
|
|
|
+ try {
|
|
|
|
+ await navigator.clipboard.writeText(text);
|
|
|
|
+ this.$toast.success("复制成功~");
|
|
|
|
+ this.showShare = false;
|
|
|
|
+ } catch (err) {
|
|
|
|
+ console.error("Failed to copy: ", err);
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ wxShare() {
|
|
|
|
+ let that = this;
|
|
|
|
+ let url = window.location.href;
|
|
|
|
+ let newurl = url.split("#")[0];
|
|
|
|
+ axios(
|
|
|
|
+ "https://i.g107.com/564/Ajax/getJsSdk",
|
|
|
|
+ {
|
|
|
|
+ url: newurl
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ headers: {
|
|
|
|
+ "Content-Type": "application/x-www-form-urlencoded"
|
|
|
|
+ },
|
|
|
|
+ transformRequest: [
|
|
|
|
+ function(data) {
|
|
|
|
+ // 对 data 进行任意转换处理
|
|
|
|
+ return qs.stringify(data);
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ )
|
|
|
|
+ .then(function(response) {
|
|
|
|
+ console.log(response);
|
|
|
|
+ var config = response.data;
|
|
|
|
+ var adress = "ceshi";
|
|
|
|
+ wx.config({
|
|
|
|
+ debug: false,
|
|
|
|
+ appId: config.appId,
|
|
|
|
+ timestamp: config.timestamp,
|
|
|
|
+ nonceStr: config.nonceStr,
|
|
|
|
+ signature: config.signature,
|
|
|
|
+ jsApiList: ["updateAppMessageShareData"]
|
|
|
|
+ });
|
|
|
|
+ wx.ready(function() {
|
|
|
|
+ wx.updateAppMessageShareData({
|
|
|
|
+ title: `${that.courseDetail.subjectName}`, // 分享标题
|
|
|
|
+ desc: `分享简介`, // 分享描述
|
|
|
|
+ link: `${window.location.href.split("#")[0]}#/courseAdDetail/${
|
|
|
|
+ this.$route.params.id
|
|
|
|
+ }/code=${res}`, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
|
|
|
|
+ imgUrl: `${that.courseDetail.subjectThumb}`, // 分享图标
|
|
|
|
+ success: function() {
|
|
|
|
+ // 设置成功
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ })
|
|
|
|
+ .catch(function(error) {
|
|
|
|
+ console.log(error);
|
|
|
|
+ });
|
|
},
|
|
},
|
|
//复制剪切板
|
|
//复制剪切板
|
|
- copyLink(event) {
|
|
|
|
- console.log(23333)
|
|
|
|
|
|
+ copyLink2(event, text) {
|
|
let that = this;
|
|
let that = this;
|
|
//这里是复制目标的类名
|
|
//这里是复制目标的类名
|
|
let clipboard = new Clipboard(event, {
|
|
let clipboard = new Clipboard(event, {
|
|
@@ -128,7 +202,6 @@ export default {
|
|
return trigger.getAttribute("aria-label");
|
|
return trigger.getAttribute("aria-label");
|
|
}
|
|
}
|
|
});
|
|
});
|
|
- console.log(clipboard)
|
|
|
|
clipboard.on("success", function(e) {
|
|
clipboard.on("success", function(e) {
|
|
e.clearSelection(); //清除选中的文字的选择状态
|
|
e.clearSelection(); //清除选中的文字的选择状态
|
|
that.$toast.success("复制成功~");
|
|
that.$toast.success("复制成功~");
|
|
@@ -136,48 +209,74 @@ export default {
|
|
});
|
|
});
|
|
|
|
|
|
clipboard.on("error", function(e) {
|
|
clipboard.on("error", function(e) {
|
|
- console.log(5544332)
|
|
|
|
console.error(e);
|
|
console.error(e);
|
|
});
|
|
});
|
|
},
|
|
},
|
|
- comfirmCode(){
|
|
|
|
- this.showShare = true
|
|
|
|
|
|
+ copyLink() {
|
|
|
|
+ //创建输入框
|
|
|
|
+ var input = document.createElement("input");
|
|
|
|
+ //对输入框进行赋值
|
|
|
|
+ input.value = this.giveLink;
|
|
|
|
+
|
|
|
|
+ //添加到body中。
|
|
|
|
+ document.body.appendChild(input);
|
|
|
|
+ input.select();
|
|
|
|
+ var copyResult = document.execCommand("copy");
|
|
|
|
+ if (copyResult) {
|
|
|
|
+ this.$toast.success("复制成功~");
|
|
|
|
+ that.showShare = false;
|
|
|
|
+ //移除
|
|
|
|
+ document.body.removeChild(input);
|
|
|
|
+ } else {
|
|
|
|
+ navigator.clipboard.writeText(str);
|
|
|
|
+ this.$toast.success("复制成功~");
|
|
|
|
+ that.showShare = false;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ comfirmCode() {
|
|
|
|
+ this.showShare = true;
|
|
},
|
|
},
|
|
- getMoreList(){
|
|
|
|
- console.log("到底了")
|
|
|
|
- if(this.recordList.length<this.page.total && this.canReq){
|
|
|
|
- this.canReq = false
|
|
|
|
- this.$toast.loading({
|
|
|
|
- duration: 1,
|
|
|
|
- message: '加载中...',
|
|
|
|
- forbidClick: true,
|
|
|
|
- })
|
|
|
|
- this.page.cur+=1
|
|
|
|
- this.getRecord()
|
|
|
|
|
|
+ getMoreList(done) {
|
|
|
|
+ console.log("到底了");
|
|
|
|
+ if (!this.noDate1) {
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.getRecord(done);
|
|
|
|
+ }, 300);
|
|
|
|
+ } else {
|
|
|
|
+ this.$refs.recordScroller.finishInfinite(true);
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- getRecord(){
|
|
|
|
|
|
+ getRecord(done) {
|
|
let data = {
|
|
let data = {
|
|
- page:this.page.cur,
|
|
|
|
- pageSize:this.page.size,
|
|
|
|
- subjectId:this.courseId
|
|
|
|
- }
|
|
|
|
- getCourseRecordList(data).then(res=>{
|
|
|
|
- this.recordList = this.recordList.concat(res.list)
|
|
|
|
- this.page.cur = res.current
|
|
|
|
- this.page.total = res.total
|
|
|
|
- if(this.recordList.length<this.page.total){
|
|
|
|
- this.canReq = true
|
|
|
|
|
|
+ page: this.page.cur,
|
|
|
|
+ pageSize: this.page.size,
|
|
|
|
+ subjectId: this.courseId
|
|
|
|
+ };
|
|
|
|
+ getCourseRecordList(data).then(res => {
|
|
|
|
+ this.recordList = this.recordList.concat(res.list);
|
|
|
|
+ this.page.cur = res.current;
|
|
|
|
+ this.page.total = res.total;
|
|
|
|
+ if (this.recordList.length >= this.page.total) {
|
|
|
|
+ if (done) done(true);
|
|
|
|
+ this.noDate = true;
|
|
|
|
+ } else {
|
|
|
|
+ if (done) done();
|
|
|
|
+ this.page.cur++; //下拉一次页数+1
|
|
|
|
+ this.noDate = false;
|
|
}
|
|
}
|
|
- })
|
|
|
|
|
|
+ });
|
|
},
|
|
},
|
|
onClickLeft() {
|
|
onClickLeft() {
|
|
this.$router.go(-1);
|
|
this.$router.go(-1);
|
|
},
|
|
},
|
|
init() {
|
|
init() {
|
|
this.courseId = this.$route.params.id;
|
|
this.courseId = this.$route.params.id;
|
|
- this.courseDetail = this.$route.query
|
|
|
|
|
|
+ this.courseDetail = JSON.parse(sessionStorage.getItem("course_detail"));
|
|
this.getRecord();
|
|
this.getRecord();
|
|
|
|
+ // this.wxShare();
|
|
|
|
+ },
|
|
|
|
+ destroyed() {
|
|
|
|
+ sessionStorage.removeItem("course_detail");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
};
|
|
@@ -202,7 +301,7 @@ img {
|
|
border-bottom: 1px solid #999;
|
|
border-bottom: 1px solid #999;
|
|
& > p {
|
|
& > p {
|
|
font-size: 0.28rem;
|
|
font-size: 0.28rem;
|
|
- line-height: .8rem;
|
|
|
|
|
|
+ line-height: 0.8rem;
|
|
color: #000;
|
|
color: #000;
|
|
font-weight: 550;
|
|
font-weight: 550;
|
|
padding: 0 0.2rem;
|
|
padding: 0 0.2rem;
|
|
@@ -245,20 +344,20 @@ img {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- .courseShare{
|
|
|
|
- width: calc(100% - .6rem);
|
|
|
|
- height: .8rem;
|
|
|
|
|
|
+ .courseShare {
|
|
|
|
+ width: calc(100% - 0.6rem);
|
|
|
|
+ height: 0.8rem;
|
|
position: absolute;
|
|
position: absolute;
|
|
- left: .3rem;
|
|
|
|
- bottom: .1rem;
|
|
|
|
|
|
+ left: 0.3rem;
|
|
|
|
+ bottom: 0.1rem;
|
|
border: 1px solid #999;
|
|
border: 1px solid #999;
|
|
- background-color: #FFF;
|
|
|
|
|
|
+ background-color: #fff;
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
- border-radius: .1rem;
|
|
|
|
- span{
|
|
|
|
- font-size: .26rem;
|
|
|
|
|
|
+ border-radius: 0.1rem;
|
|
|
|
+ span {
|
|
|
|
+ font-size: 0.26rem;
|
|
color: #333;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
}
|