Skip to content

D
DiscuzWeb
Commit d17eed53 by zhujunjie
Options

初步解决点赞，收藏，分享功能及iframe宽度修改和树状样式修改

parent fc7e9ca5
Showing with 445 additions and 55 deletions
pages/knowledge/knowledgeDetail.vue
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
/> />
</div> </div>
<div v-if="isfile == false"> <div v-if="isfile == false">
<img :src="fileSrc" class="detail-content-right-img" /> <img :src="fileSrc" class="detail-content-right-img">
</div> </div>
</div> </div>
<!-- <el-input <!-- <el-input
...@@ -55,6 +55,7 @@ ...@@ -55,6 +55,7 @@
:file-md5="fileMd5" :file-md5="fileMd5"
:input-content="inputContent" :input-content="inputContent"
/> --> /> -->
<div class="list-top-item"> <div class="list-top-item">
<nuxt-link :to="`/thread/`" target="_blank" class="top-title"> <nuxt-link :to="`/thread/`" target="_blank" class="top-title">
<template> <template>
...@@ -63,6 +64,25 @@ ...@@ -63,6 +64,25 @@
<div /> <div />
</nuxt-link> </nuxt-link>
</div> </div>
<topic-reward-list
:author="thread.user || {}"
:paid-information="paidInformation"
:can-paid="forums && forums.paycenter && forums.paycenter.wxpay_close"
:can-reward="
forums &&
forums.paycenter &&
forums.paycenter.wxpay_close &&
thread.canBeReward
"
:thread-type="thread.type || 0"
:user-lists="[
thread.paidUsers || [],
thread.rewardedUsers || [],
article.likedUsers || [],
[]
]"
@payOrReward="showCheckoutCounter = true"
/>
<topic-actions <topic-actions
:thread-id="threadId" :thread-id="threadId"
:actions="actions || []" :actions="actions || []"
...@@ -72,72 +92,189 @@ ...@@ -72,72 +92,189 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
import axios from "@/plugins/axios.js"; import axios from '@/plugins/axios.js';
import handleError from "@/mixin/handleError"; import handleError from '@/mixin/handleError';
import config from "@/config.js"; const threadInclude
= 'posts.replyUser,threadAudio,user.groups,user,'
+ 'user.groups.permissionWithoutCategories,posts,posts.user,posts.likedUsers,posts.images,'
+ 'firstPost,firstPost.likedUsers,firstPost.images,firstPost.attachments,rewardedUsers,'
+ 'category,threadVideo,paidUsers,question,question.beUser,question.images,onlookers';
import env from '@/utils/env';
import config from '@/config.js';
export default { export default {
data() { data() {
return { return {
threadId: "999999999", threadId: '26',
renderComponent: true, renderComponent: true,
loading: false,
showViewloading: false,
isShowView: false,
isfile: true,
fileSrc: '',
isPost: true,
qywxUserid: '',
publishType: 'knowledge',
fileMd5: '',
title: '',
inputContent: '',
data: [],
defaultProps: {
children: 'children',
label: 'label'
},
list: [],
thread: {},
article: {},
question: {},
postId: 0,
actions: [ actions: [
{ {
text: this.$t("topic.read"), text: this.$t('topic.read'),
count: 0, count: 0,
command: "", command: '',
canOpera: false, canOpera: false,
icon: "book" icon: 'book'
}, },
{ {
text: this.$t("topic.getLike"), text: this.$t('topic.getLike'),
count: 0, count: 0,
command: "isLiked", command: 'isLiked',
canOpera: false, canOpera: true,
isStatus: false, isStatus: false,
icon: "like" icon: 'like'
}, },
{ {
text: this.$t("topic.collection"), text: this.$t('topic.collection'),
command: "isFavorite", command: 'isFavorite',
canOpera: false, canOpera: true,
isStatus: false, isStatus: false,
icon: "favor" icon: 'favor'
}, },
{ {
text: this.$t("topic.share"), text: this.$t('topic.share'),
command: "showLink", command: 'showLink',
canOpera: true, canOpera: true,
icon: "link" icon: 'link'
} }
], ],
loading: false, paidInformation: {
showViewloading: false, price: '0',
isShowView: false, paid: false,
isfile: true, paidUsers: [],
fileSrc: "", paidCount: 0,
isPost: true, isPaidAttachment: false,
qywxUserid: "", attachmentPrice: '0'
publishType: "knowledge", },
fileMd5: "", payment: { wechat_qrcode: '', rewardAmount: '' },
title: "", location: { location: '', latitude: '', longitude: '' },
inputContent: "", managementList: [
data: [], {
defaultProps: { name: 'canEdit',
children: "children", command: 'toEdit',
label: "label" isStatus: false,
canOpera: false,
text: this.$t('topic.edit'),
type: '0'
}, },
list: [] {
name: 'canEssence',
command: 'isEssence',
isStatus: false,
canOpera: false,
text: this.$t('topic.essence'),
type: '1'
},
{
name: 'canSticky',
command: 'isSticky',
isStatus: false,
canOpera: false,
text: this.$t('topic.sticky'),
type: '2'
},
{
name: 'canHide',
command: 'isDeleted',
isStatus: false,
canOpera: false,
text: this.$t('topic.delete'),
type: '3'
}
],
showCheckoutCounter: false,
showPasswordInput: false,
showWxPay: false,
defaultLoading: false,
articleLoading: false,
passwordError: false,
passwordErrorTip: '',
findPassword: false
}; };
}, },
computed: {}, computed: {
threadId() {
return this.$route.params.id;
},
currentUser() {
return this.$store.state.user.info.attributes || {};
},
forums() {
return this.$store.state.site.info.attributes || {};
},
rewardOrPay() {
const price = parseFloat(this.paidInformation.price);
const attachmentPrice = parseFloat(this.paidInformation.attachmentPrice);
const questionPrice
= Object.keys(this.question).length > 0
? parseFloat(this.question.onlooker_unit_price)
: 0;
return price > 0 || attachmentPrice > 0 || questionPrice > 0
? 'pay'
: 'reward';
},
payOrRewardAmount() {
const price = parseFloat(this.paidInformation.price || '0');
const attachmentPrice = parseFloat(
this.paidInformation.attachmentPrice || '0'
);
const questionPrice
= Object.keys(this.question).length > 0
? parseFloat(this.question.onlooker_unit_price)
: 0;
return (
price || attachmentPrice || questionPrice || this.payment.rewardAmount
);
},
payOrderType() {
const price = parseFloat(this.paidInformation.price || '0');
const attachmentPrice = parseFloat(
this.paidInformation.attachmentPrice || '0'
);
const questionPrice
= Object.keys(this.question).length > 0
? parseFloat(this.question.onlooker_unit_price)
: 0;
// 1：注册，2：打赏，3：付费主题，4：付费用户组，5：问答提问支付，6：问答围观付费, 7: 付费附件
if (price > 0) {
return 3;
} else if (attachmentPrice > 0) {
return 7;
} else if (questionPrice > 0) {
return 6;
} else {
return 2;
}
}
},
created() { created() {
this.fileSrc = ""; this.fileSrc = '';
this.isShowView = false; this.isShowView = false;
this.inputContent = ""; this.inputContent = '';
this.title = ""; this.title = '';
this.qywxUserid = ""; this.qywxUserid = '';
this.data = []; this.data = [];
this.loading = true; this.loading = true;
// 获取知识库带过来的id // 获取知识库带过来的id
...@@ -161,6 +298,8 @@ export default { ...@@ -161,6 +298,8 @@ export default {
} }
} }
}); });
if (Object.keys(this.thread).length === 0) this.getThread();
else this.initData();
// 监听滚动事件 // 监听滚动事件
// window.addEventListener("scroll", this.onScroll, false); // window.addEventListener("scroll", this.onScroll, false);
// window.onload = function() { // window.onload = function() {
...@@ -190,18 +329,16 @@ export default { ...@@ -190,18 +329,16 @@ export default {
} }
return arr; return arr;
}, },
postCommand(item) {},
openNewForm() { openNewForm() {
window.open(this.fileSrc, "_blank"); window.open(this.fileSrc, '_blank');
}, },
handleNodeClick(data) { handleNodeClick(data) {
self=this; console.log(data);
self = this;
if (data.file) { if (data.file) {
this.showViewloading = true; this.showViewloading = true;
axios axios
.get( .get(`${config.WEI_PAN_URL}/weipan/GetFileInfo?fileId=${data.id}`)
`${config.WEI_PAN_URL}/weipan/GetFileInfo?fileId=${data.id}`
)
.then(res => { .then(res => {
// const ele = document.querySelector(".WACPageBorder"); // const ele = document.querySelector(".WACPageBorder");
// ele.style.border = "none"; // ele.style.border = "none";
...@@ -224,21 +361,265 @@ export default { ...@@ -224,21 +361,265 @@ export default {
this.fileSrc = `http://ow365.cn/?i=23468&furl=${filePath}`; this.fileSrc = `http://ow365.cn/?i=23468&furl=${filePath}`;
} }
} }
//获取fileid对应得threadId // 获取fileid对应得threadId
let threadId=res.data.result.threadId; const threadId = res.data.result.threadId;
this.threadId=threadId.toString(); this.threadId = threadId.toString();
this.forceRerenders(); // 强制从新渲染函数 this.forceRerenders(); // 强制从新渲染函数
console.log(this.threadId,3232); console.log(this.threadId, 3232);
} }
this.fileMd5 = data.md5; this.fileMd5 = data.md5;
console.log(this.threadId, "我是父组件"); console.log(this.threadId, '我是父组件');
}); });
} }
}, },
changTree(index) { changTree(index) {
console.log(index); console.log(index);
},
getThread() {
return this.$store
.dispatch('jv/get', [
`threads/${this.threadId}`,
{ params: { include: threadInclude }}
])
.then(
data => {
if (data.isDeleted) return this.$router.replace('/error');
this.articleLoading = false;
this.thread = data;
this.article = data.firstPost;
this.postId = this.article._jv.id;
this.initData();
},
e => this.handleError(e, 'thread')
);
},
initData() {
console.log('thread => ', this.thread);
this.initManagementList(this.thread);
this.initPaidInformation(this.thread);
this.initActions(this.thread, this.article);
this.initLocation(this.thread);
this.initQuestion(this.thread);
this.filterImages();
},
filterImages() {
this.article.imageSource = this.article.images; // 把原图路径记为 imageSource
if (
this.article.contentAttachIds
&& this.article.contentAttachIds.length > 0
&& this.article.images
&& this.article.images.length > 0
) {
this.article.images = this.article.images.filter(
image => this.article.contentAttachIds.indexOf(image._jv.id) < 0
);
}
},
initQuestion(data) {
if (!data.question) return;
this.question = data.question;
this.question.onlookerState = data.onlookerState;
console.log(this.question, 'question');
},
initLocation(data) {
for (const key in this.location) this.location[key] = data[key];
},
initPaidInformation(data) {
for (const key in this.paidInformation) {
this.paidInformation[key] = data[key];
} }
}, },
initManagementList(data) {
this.managementList.forEach(item => {
item.canOpera = data[item.name];
if (item.name === 'canEssence') {
item.isStatus = data.isEssence;
item.text = item.isStatus
? this.$t('topic.cancelEssence')
: this.$t('topic.essence');
} else if (item.name === 'canSticky') {
item.isStatus = data.isSticky;
item.text = item.isStatus
? this.$t('topic.cancelSticky')
: this.$t('topic.sticky');
}
});
if (
(this.thread.type === 4 || this.thread.type === 5)
&& this.managementList.filter(item => item.name === 'canEdit').length > 0
) {
// 语音贴和问答帖，不支持编辑
this.managementList.filter(
item => item.name === 'canEdit'
)[0].canOpera = false;
}
this.thread.isEssence = data.isEssence;
this.managementList = this.managementList.filter(item => item.canOpera);
},
initActions(data, firstPost) {
const viewInfo = { ...this.actions[0] };
const favorInfo = { ...this.actions[2] };
const likeInfo = { ...this.actions[1] };
if (data) {
viewInfo.count = data.viewCount;
favorInfo.isStatus = data.isFavorite;
favorInfo.text = favorInfo.isStatus
? this.$t('topic.collectionAlready')
: this.$t('topic.collection');
favorInfo.icon = favorInfo.isStatus ? 'favored' : 'favor';
favorInfo.canOpera = data.canFavorite;
}
if (firstPost) {
likeInfo.count = firstPost.likeCount;
likeInfo.isStatus = firstPost.isLiked;
likeInfo.canOpera = firstPost.canLike;
likeInfo.text = likeInfo.isStatus
? this.$t('topic.liked')
: this.$t('topic.getLike');
likeInfo.icon = likeInfo.isStatus ? 'liked' : 'like';
}
this.$set(this.actions, 0, viewInfo);
this.$set(this.actions, 1, likeInfo);
this.$set(this.actions, 2, favorInfo);
},
paying({ payWay, hideAvatar, rewardAmount }) {
if (
this.rewardOrPay === 'reward'
&& (!rewardAmount || parseFloat(rewardAmount) === 0)
) {
return this.$message.error(this.$t('pay.AmountCannotBeLessThan0'));
}
this.payment.rewardAmount = rewardAmount;
this.showCheckoutCounter = false;
if (payWay === 'walletPay') {
this.showPasswordInput = true;
this.createOrder(
hideAvatar,
this.payOrRewardAmount,
this.payOrderType,
20
).finally(() => {
this.defaultLoading = false;
});
} else if (payWay === 'wxPay') {
if (!this.forums.paycenter.wxpay_close) {
return this.$message.warning(this.$t('pay.wxPayClose'));
}
this.createOrder(
hideAvatar,
this.payOrRewardAmount,
this.payOrderType,
10
)
.then(() => {
this.payOrder().then(
wechatQrcode => {
this.payment.wechat_qrcode = wechatQrcode;
this.wxPayActive().then(
() => {
this.getThread();
},
() => console.log('支付失败')
);
},
() => console.log('支付失败')
);
})
.finally(() => {
this.defaultLoading = false;
});
}
},
onPasswordInputCompleted(password) {
this.payOrder(password).then(
() => {
this.getThread();
},
() => console.log('支付失败')
);
},
postCommand(item) {
if (this.defaultLoading) return;
this.defaultLoading = true;
const params
= item.command === 'isLiked'
? { _jv: { type: `posts`, id: this.postId }}
: { _jv: { type: `threads`, id: this.threadId }};
params[item.command] = !item.isStatus;
return this.$store
.dispatch('jv/patch', params)
.then(
data => {
data.firstPost && this.initManagementList(data);
data.firstPost && this.initActions(data);
if (item.command === 'isSticky') {
return item.isStatus
? this.$message.success(this.$t('topic.stickySuccess'))
: this.$message.success(this.$t('topic.cancelStickySuccess'));
}
if (item.command === 'isLiked') {
return this.setLikeUser(!item.isStatus, data);
}
if (item.command === 'isDeleted') return this.afterDeleted();
},
e => this.handleError(e)
)
.finally(() => {
this.defaultLoading = false;
});
},
setLikeUser(status, data) {
this.initActions(null, data);
status
? this.article.likedUsers.unshift(this.currentUser)
: this.article.likedUsers.forEach((item, index, array) => {
item.id === this.currentUser.id && array.splice(index, 1);
});
},
afterDeleted() {
this.$message({
typeInformation: 'success',
message: this.$t('topic.deleteSuccessAndJumpToBack')
});
setTimeout(() => {
this.$router.push('/');
}, 1000);
}
},
head() {
return {
title:
((this.thread && this.thread.title)
|| (this.thread
&& this.thread.firstPost
&& this.thread.firstPost.summaryText.slice(0, 15))
|| '主题详情页')
+ (this.forums && this.forums.set_site && this.forums.set_site.site_name
? ` - ${this.forums.set_site.site_name}`
: '\u200E'),
meta: [
{
hid: 'keywords',
name: 'keywords',
content: (this.thread.category && this.thread.category.name) || ''
},
{
hid: 'description',
name: 'description',
content:
(this.thread.firstPost
&& this.thread.firstPost.summaryText.slice(0, 80))
|| ''
},
{
name: 'og:video',
content:
(this.thread.threadVideo && this.thread.threadVideo.media_url) || ''
}
]
};
},
textChange() { textChange() {
alert(332); alert(332);
} }
...@@ -257,8 +638,18 @@ export default { ...@@ -257,8 +638,18 @@ export default {
width: 200px; width: 200px;
overflow: hidden; overflow: hidden;
} */ } */
.detail-content-left-text .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
color: #2e8cf0 !important;
}
.detail-content-left-text .el-tree-node:focus > .el-tree-node__content { .detail-content-left-text .el-tree-node:focus > .el-tree-node__content {
color: #2e8cf0; background-color: transparent !important;
color: #2e8cf0 !important;
}
.detail-content-left-text .el-tree-node.is-current > .el-tree-node__content {
background-color:transparent !important;
}
.detail-content-left-text .el-tree-node__hover{
color: #2e8cf0 !important;
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -277,13 +668,12 @@ export default { ...@@ -277,13 +668,12 @@ export default {
z-index: 99; z-index: 99;
} }
.detail { .detail {
width: 1009px;
&-content { &-content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
&-left { &-left {
background: #fff; background: #fff;
width: 220px; width: 210px;
padding: 10px 0 0 25px; padding: 10px 0 0 25px;
&-text { &-text {
position: fixed; position: fixed;
...@@ -303,7 +693,7 @@ export default { ...@@ -303,7 +693,7 @@ export default {
} }
} }
&-right { &-right {
width: 780px; width: 865px;
background: #fff; background: #fff;
margin-left: 9px; margin-left: 9px;
padding: 20px; padding: 20px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment