Skip to content

D
DiscuzWeb
Commit d17eed53 by zhujunjie
Options

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

parent fc7e9ca5
Showing with 446 additions and 56 deletions
pages/knowledge/knowledgeDetail.vue
......@@ -40,7 +40,7 @@
/>
</div>
<div v-if="isfile == false">
<img :src="fileSrc" class="detail-content-right-img" />
<img :src="fileSrc" class="detail-content-right-img">
</div>
</div>
<!-- <el-input
......@@ -55,6 +55,7 @@
:file-md5="fileMd5"
:input-content="inputContent"
/> -->
<div class="list-top-item">
<nuxt-link :to="`/thread/`" target="_blank" class="top-title">
<template>
......@@ -63,6 +64,25 @@
<div />
</nuxt-link>
</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
:thread-id="threadId"
:actions="actions || []"
......@@ -72,72 +92,189 @@
</div>
</div>
</div>
</div>
</template>
<script>
import axios from "@/plugins/axios.js";
import handleError from "@/mixin/handleError";
import config from "@/config.js";
import axios from '@/plugins/axios.js';
import handleError from '@/mixin/handleError';
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 {
data() {
return {
threadId: "999999999",
threadId: '26',
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: [
{
text: this.$t("topic.read"),
text: this.$t('topic.read'),
count: 0,
command: "",
command: '',
canOpera: false,
icon: "book"
icon: 'book'
},
{
text: this.$t("topic.getLike"),
text: this.$t('topic.getLike'),
count: 0,
command: "isLiked",
canOpera: false,
command: 'isLiked',
canOpera: true,
isStatus: false,
icon: "like"
icon: 'like'
},
{
text: this.$t("topic.collection"),
command: "isFavorite",
canOpera: false,
text: this.$t('topic.collection'),
command: 'isFavorite',
canOpera: true,
isStatus: false,
icon: "favor"
icon: 'favor'
},
{
text: this.$t("topic.share"),
command: "showLink",
text: this.$t('topic.share'),
command: 'showLink',
canOpera: true,
icon: "link"
icon: 'link'
}
],
loading: false,
showViewloading: false,
isShowView: false,
isfile: true,
fileSrc: "",
isPost: true,
qywxUserid: "",
publishType: "knowledge",
fileMd5: "",
title: "",
inputContent: "",
data: [],
defaultProps: {
children: "children",
label: "label"
paidInformation: {
price: '0',
paid: false,
paidUsers: [],
paidCount: 0,
isPaidAttachment: false,
attachmentPrice: '0'
},
list: []
payment: { wechat_qrcode: '', rewardAmount: '' },
location: { location: '', latitude: '', longitude: '' },
managementList: [
{
name: 'canEdit',
command: 'toEdit',
isStatus: false,
canOpera: false,
text: this.$t('topic.edit'),
type: '0'
},
{
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() {
this.fileSrc = "";
this.fileSrc = '';
this.isShowView = false;
this.inputContent = "";
this.title = "";
this.qywxUserid = "";
this.inputContent = '';
this.title = '';
this.qywxUserid = '';
this.data = [];
this.loading = true;
// 获取知识库带过来的id
......@@ -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.onload = function() {
......@@ -190,18 +329,16 @@ export default {
}
return arr;
},
postCommand(item) {},
openNewForm() {
window.open(this.fileSrc, "_blank");
window.open(this.fileSrc, '_blank');
},
handleNodeClick(data) {
self=this;
console.log(data);
self = this;
if (data.file) {
this.showViewloading = true;
axios
.get(
`${config.WEI_PAN_URL}/weipan/GetFileInfo?fileId=${data.id}`
)
.get(`${config.WEI_PAN_URL}/weipan/GetFileInfo?fileId=${data.id}`)
.then(res => {
// const ele = document.querySelector(".WACPageBorder");
// ele.style.border = "none";
......@@ -224,21 +361,265 @@ export default {
this.fileSrc = `http://ow365.cn/?i=23468&furl=${filePath}`;
}
}
//获取fileid对应得threadId
let threadId=res.data.result.threadId;
this.threadId=threadId.toString();
this.forceRerenders(); // 强制从新渲染函数
console.log(this.threadId,3232);
// 获取fileid对应得threadId
const threadId = res.data.result.threadId;
this.threadId = threadId.toString();
this.forceRerenders(); // 强制从新渲染函数
console.log(this.threadId, 3232);
}
this.fileMd5 = data.md5;
console.log(this.threadId, "我是父组件");
console.log(this.threadId, '我是父组件');
});
}
},
changTree(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() {
alert(332);
}
......@@ -257,8 +638,18 @@ export default {
width: 200px;
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 {
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 lang="scss" scoped>
......@@ -277,13 +668,12 @@ export default {
z-index: 99;
}
.detail {
width: 1009px;
&-content {
display: flex;
justify-content: space-between;
&-left {
background: #fff;
width: 220px;
width: 210px;
padding: 10px 0 0 25px;
&-text {
position: fixed;
......@@ -303,7 +693,7 @@ export default {
}
}
&-right {
width: 780px;
width: 865px;
background: #fff;
margin-left: 9px;
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