958 lines
44 KiB
Vue
958 lines
44 KiB
Vue
<template>
|
||
<div style="display:flex;flex-direction:row;flex-wrap: nowrap">
|
||
<div style="display: flex;flex-direction:column;flex-wrap: nowrap">
|
||
<div class="PageHeader">
|
||
<br/>
|
||
<el-page-header @back="goBack" style="justify-content:left;display: flex;">
|
||
<div slot="title" style="font-size:23px;font-weight: 600;"></div>
|
||
<div slot="content" style="font-size:23px;font-weight: 600;">
|
||
项目详情
|
||
</div>
|
||
</el-page-header>
|
||
</div>
|
||
<div class="PageContent">
|
||
<el-card class="box-card" style="border: none">
|
||
<div style="display: flex;flex-direction: row;justify-content: space-between">
|
||
<div style="display: flex;flex-direction: row;">
|
||
<el-avatar style="background-color: transparent" shape="square" :size="70" :src="github.avatar_url"></el-avatar>
|
||
<div style="display: flex;flex-direction: column;justify-content: space-between;margin-left: 10px">
|
||
<el-link :underline="false" :href="projectUrl" target="_blank" type="primary">
|
||
<span class="title" v-if="projectName" style="font-size: 30px;color: black;font-weight: bold;display: flex;justify-content: flex-start;text-align: left">
|
||
{{ briefTopName }}
|
||
</span>
|
||
</el-link>
|
||
<span v-if="projectTitle" style="text-align: left;display: flex;flex-direction:row;justify-content: flex-start;font-size: 20px;color: rgb(107 114 128);">
|
||
{{projectTitle}}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex;flex-direction: row;justify-content: space-between">
|
||
<el-divider direction="vertical" ></el-divider>
|
||
<div style="display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: space-between">
|
||
<span style="font-size: 14px;color: #6b7280;display: flex;justify-content: flex-start">
|
||
HelloGitHub 评分
|
||
</span>
|
||
<el-rate v-model="average" style="display: flex;justify-content: flex-start" disabled show-score text-color="#ff9900"
|
||
score-template="{value}"></el-rate>
|
||
<span v-if="commentNum" style="font-size: 12px;color: #59A3A4;display: flex;justify-content: flex-start">
|
||
{{ commentNum }} 个评分
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div style="display: flex;flex-direction: row;margin-top: 10px;justify-content: space-between">
|
||
<div style="width: 250px;height: 60px;">
|
||
<img v-if="projectName" :src="'https://starchart.cc/'+projectName+'.svg'" style="width: 250px;height: 60px;">
|
||
</div>
|
||
<div style="display: flex;flex-direction: row;align-items: center;">
|
||
<el-dropdown>
|
||
<el-button type="primary" style="height: 60px">
|
||
访问<i class="el-icon-arrow-down el-icon--right"></i>
|
||
</el-button>
|
||
<el-dropdown-menu slot="dropdown">
|
||
<el-dropdown-item><el-link :underline="false" @click="goTo(projectUrl)">源码</el-link></el-dropdown-item>
|
||
<el-dropdown-item> <el-link :underline="false" @click="goTo('https://github.com/'+projectName+'/releases')">官方下载</el-link></el-dropdown-item>
|
||
<el-dropdown-item v-show="fileAddress!==undefined"> <el-link @click="Download" :underline="false">快速下载</el-link></el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
<el-button v-show="isRouterAlive" v-if="Like===0" @click="addStar" style="height: 60px;width: 150px;margin-left: 10px" icon="el-icon-star-off" type="success">点 赞 {{startNum}}</el-button>
|
||
<el-button v-show="isRouterAlive" v-if="Like===1" @click="cancleStar" style="height: 60px;width: 150px;margin-left: 10px" icon="el-icon-star-on" type="danger">取消点赞 {{startNum}}</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;margin-top: 10px;justify-content: space-between">
|
||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center" >
|
||
<span>开源</span><div style="width: 8px;height: 8px;background-color: #9ca3af;border-radius: 50px;margin-left: 5px"></div>
|
||
<span v-if="github.license" style="margin-left: 5px;color: #00b2ff">{{github.license}}</span>
|
||
</div>
|
||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;">
|
||
<el-link :underline="false" @click="toComment('#comment')" icon="el-icon-chat-dot-square">评论</el-link>
|
||
<el-link :underline="false" @click="copyText" icon="el-icon-share" style="margin-left: 5px">分享 </el-link>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display: flex;margin-top: 20px">
|
||
<el-collapse v-model="activeNames">
|
||
<el-collapse-item name="1">
|
||
<template slot="title">
|
||
<table>
|
||
<tr>
|
||
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">星数</th>
|
||
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">名称</th>
|
||
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">主语言</th>
|
||
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">活跃</th>
|
||
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">订阅者</th>
|
||
</tr>
|
||
<tr>
|
||
<td v-if="github.starNum" style="font-size: 20px;color: black;font-weight: bold">{{formatNumber(github.starNum)}}</td>
|
||
<td v-if="github.name!==null" style="font-size: 20px;color: black;font-weight: bold;">{{briefName}}</td>
|
||
<td v-if="github.language!==null" style="font-size: 20px;color: black;font-weight: bold">{{brief}}</td>
|
||
<td v-if="github.allow_forking" style="font-size: 20px;color: black;font-weight: bold">是</td>
|
||
<td v-if="!github.allow_forking" style="font-size: 20px;color: black;font-weight: bold">否</td>
|
||
<td v-if="github.subscribers_count" style="font-size: 20px;color: black;font-weight: bold">{{formatNumber(github.subscribers_count)}}</td>
|
||
</tr>
|
||
</table>
|
||
</template>
|
||
<div>
|
||
<table>
|
||
<tr>
|
||
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">Issues</th>
|
||
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">组织</th>
|
||
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">默认分支</th>
|
||
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">Forks</th>
|
||
<th style="width: 10vw;color: #9ca3af;font-size: 15px;font-weight: bold">协议</th>
|
||
</tr>
|
||
<tr>
|
||
<td v-if="github.open_issues_count" style="font-size: 20px;color: black;font-weight: bold">{{github.open_issues_count}}</td>
|
||
<td v-if="github.organization==='Organization'" style="font-size: 20px;color: black;font-weight: bold">是</td>
|
||
<td v-else-if="github.organization!=='Organization'" style="font-size: 20px;color: black;font-weight: bold">否</td>
|
||
<td v-if="github.default_branch" style="font-size: 20px;color: black;font-weight: bold">{{github.default_branch}}</td>
|
||
<td v-if="github.forks_count" style="font-size: 20px;color: black;font-weight: bold">{{formatNumber(github.forks_count)}}</td>
|
||
<td v-if="github.license" style="font-size: 20px;color: black;font-weight: bold">{{github.license}}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
</div>
|
||
|
||
<div>
|
||
<el-tabs v-model="activeName">
|
||
<el-tab-pane label="介绍" name="first">
|
||
<el-tiptap style="text-align: left;border: 1px solid rgba(150,152,150,0.87)" v-model="projectDescription" :readonly="true" :showMenubar="false" :extensions="extensions" />
|
||
<div style="display:flex;align-items: center;flex-direction: row;justify-content: space-between">
|
||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center">
|
||
<span style="font-size: 14px;margin-top: 10px">收录于: </span><el-tag style="margin-left: 10px;margin-top: 10px" size="medium">第 {{periodicals}} 期</el-tag>
|
||
<div style="display: flex;flex-direction: row;margin-left: 10px;margin-top: 10px;align-items: center">
|
||
<span>标签: </span>
|
||
<div style="margin-left: 10px">
|
||
<el-tag v-for="(item,index) in CategoryName" :key="index" size="medium" style="margin-left: 10px">{{item}}</el-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div @click="toUserPage" style="cursor: pointer;display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center">
|
||
<span style="font-size: 14px;margin-top: 10px">由</span>
|
||
<el-avatar class="avatar" style="margin-left: 5px;margin-right: 5px;margin-top: 10px" :src="imageUrl" :size="30"></el-avatar>
|
||
<span style="font-size: 14px;margin-top: 10px">分享</span>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
|
||
</el-card>
|
||
|
||
<el-card class="box-card" style="margin-top: 10px;border: none">
|
||
<div slot="header" class="clearfix" style="display: flex;justify-content: flex-start">
|
||
<span id="comment" style="font-size: 24px;font-weight: bold">评论</span>
|
||
</div>
|
||
<div class="text item">
|
||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap">
|
||
<div style="width: 50px;height: 50px">
|
||
<el-avatar v-if="this.$cookie.get('username')!==null" :src="'http://localhost:8082/helloGithub_war_exploded/retUserAv?username='+this.$cookie.get('username')" :size="50"></el-avatar>
|
||
<el-avatar v-else-if="this.$cookie.get('username')===null" :size="50" style="background-color: rgb(192,196,204)">未登录</el-avatar>
|
||
</div>
|
||
<el-input
|
||
style="margin-left: 10px"
|
||
type="textarea"
|
||
:rows="2"
|
||
placeholder="请输入内容"
|
||
v-model="textarea">
|
||
</el-input>
|
||
</div>
|
||
<div style="display: flex;flex-wrap: nowrap;flex-direction: row;align-items: center;margin-top: 10px;justify-content: space-between">
|
||
<div style="display: flex;flex-direction: row">
|
||
<el-radio v-model="radio" label="0" style="margin-left: 60px">没用过</el-radio>
|
||
<el-radio v-model="radio" label="1" style="margin-left: -10px">用过</el-radio>
|
||
</div>
|
||
|
||
<el-divider direction="vertical"></el-divider>
|
||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;margin-left: -500px">
|
||
<span>评 分:</span>
|
||
<el-rate
|
||
style="margin-left: 10px"
|
||
v-model="startValue"
|
||
>
|
||
</el-rate>
|
||
</div>
|
||
<el-button type="primary" plain @click="publishComment">发布</el-button>
|
||
|
||
</div>
|
||
<el-divider></el-divider>
|
||
<div v-if="isRouterAlive" style="display: flex;flex-direction: column;flex-wrap: nowrap;margin-top: 20px">
|
||
<div style="display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: flex-start">
|
||
<span style="display: flex;flex-direction: row;justify-content: flex-start;font-size: 16px;font-weight: bold">{{ commentNum }} 条精选评论</span>
|
||
<!-- <el-button-group>-->
|
||
<!-- <el-button :disabled="isDisabled" @click.once="getLastComment" type="primary" icon="el-icon-star-on" size="small">最新</el-button>-->
|
||
<!-- <el-button :disabled="isDisabled2" @click.once="getHotComment" type="primary" icon="el-icon-s-opportunity" size="small">最热</el-button>-->
|
||
<!-- </el-button-group>-->
|
||
<el-empty v-show="commentContent.length ===0" description="暂无评论"></el-empty>
|
||
<el-tabs v-show="commentContent.length!==0" type="card" style="margin-top: 10px" v-model="activeCommentName" @tab-click="getComment">
|
||
<el-tab-pane name="last">
|
||
<span slot="label"><i class="el-icon-star-on"></i>最新</span>
|
||
<div v-for="(item,index) in commentContent" :key="index" style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;margin-top: 20px">
|
||
<div style="display: flex;flex-direction: row">
|
||
<div style="cursor: pointer;width: 50px;height: 50px;" @click="toUserPage2(item.username)" >
|
||
<el-avatar :size="50" :src="'http://localhost:8082/helloGithub_war_exploded/retUserAv?username='+item.username">{{item.username}}</el-avatar>
|
||
</div>
|
||
<div style="display: flex;flex-direction: column;justify-content: space-between">
|
||
<div style="display: flex;flex-direction: row;margin-left: 10px;align-items: center">
|
||
<span style="font-size: 14px;font-weight: bold;">{{item.username}}</span>
|
||
<span style="margin-left: 10px">评分: </span>
|
||
<el-rate
|
||
style="margin-left: 10px"
|
||
v-model="item.star" disabled>
|
||
</el-rate>
|
||
<span style="margin-left: 10px">
|
||
|
||
<el-tag v-if="item.isUsed===0" type="warning" size="mini">没用过</el-tag>
|
||
<el-tag v-if="item.isUsed===1" type="success" size="mini">用过</el-tag>
|
||
</span>
|
||
</div>
|
||
<div style="margin-left: 10px;margin-top: 5px">
|
||
<el-card style="border: none;text-align:left;">
|
||
<span>{{item.content}}</span>
|
||
</el-card>
|
||
|
||
</div>
|
||
<div style="display: flex;flex-direction: row;justify-content: space-between;margin-left: 10px;margin-top: 5px">
|
||
<span v-if="item.commentTime" style="font-size: 14px;color: #9ca3af">{{item.commentTime}}</span>
|
||
<div style="display: flex;align-items: center">
|
||
<span v-if="item.likeNum" style="margin-right: 5px;font-size: 14px; color: rgb(156, 163, 175);">{{ formatNumber(item.likeNum) }}</span>
|
||
<el-link v-if="item.commentId" @click="addLike(item.commentId)" icon="el-icon-star-off" :underline="false">点赞</el-link>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane name="hot">
|
||
<span slot="label"><i class="el-icon-s-opportunity"></i>最热</span>
|
||
<div v-for="(item,index) in commentContent" :key="index" style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;margin-top: 20px">
|
||
<div style="display: flex;flex-direction: row">
|
||
<div style="cursor: pointer;width: 50px;height: 50px;" @click="toUserPage2(item.username)">
|
||
<el-avatar :src="'http://localhost:8082/helloGithub_war_exploded/retUserAv?username='+item.username" :size="50">{{item.username}}</el-avatar>
|
||
</div>
|
||
<div style="display: flex;flex-direction: column;justify-content: space-between">
|
||
<div style="display: flex;flex-direction: row;margin-left: 10px;align-items: center">
|
||
<span style="font-size: 14px;font-weight: bold;">{{item.username}}</span>
|
||
<span style="margin-left: 10px">评分: </span>
|
||
<el-rate
|
||
style="margin-left: 10px"
|
||
v-model="item.star" disabled>
|
||
</el-rate>
|
||
<span style="margin-left: 10px">
|
||
|
||
<el-tag v-if="item.isUsed===0" type="warning" size="mini">没用过</el-tag>
|
||
<el-tag v-if="item.isUsed===1" type="success" size="mini">用过</el-tag>
|
||
</span>
|
||
</div>
|
||
<div style="margin-left: 10px;margin-top: 5px">
|
||
<el-card style="border: none;text-align:left;">
|
||
<span v-if="item.content">{{item.content}}</span>
|
||
</el-card>
|
||
|
||
</div>
|
||
<div style="display: flex;flex-direction: row;justify-content: space-between;margin-left: 10px;margin-top: 5px">
|
||
<span v-if="item.commentTime" style="font-size: 14px;color: #9ca3af">{{item.commentTime}}</span>
|
||
<div style="display: flex;align-items: center">
|
||
<span v-if="item.likeNum" style="margin-right: 5px;font-size: 14px; color: rgb(156, 163, 175);">{{ formatNumber(item.likeNum) }}</span>
|
||
<el-link v-if="item.commentId" @click.once="addLike(item.commentId)" icon="el-icon-star-off" :underline="false">点赞</el-link>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</div>
|
||
<RightTools></RightTools>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import axios from "axios";
|
||
import Vue from "vue";
|
||
import {
|
||
// 罗列出需要的功能按钮
|
||
Doc,
|
||
Text,
|
||
Paragraph,
|
||
Heading,
|
||
Bold,
|
||
Underline,
|
||
Italic,
|
||
Strike,
|
||
ListItem,
|
||
BulletList,
|
||
OrderedList,
|
||
} from 'element-tiptap';
|
||
import RightTools from "@/components/Home/RightTools.vue";
|
||
|
||
export default {
|
||
name: "ProjectDetail",
|
||
components: {RightTools},
|
||
data(){
|
||
return{
|
||
starValue:null,
|
||
activeNames: [],
|
||
activeName:'first',
|
||
activeCommentName:'last',
|
||
loginDialogVisible:false,
|
||
editorOption: {
|
||
theme: 'bubble',
|
||
modules: {
|
||
toolbar: null,
|
||
},
|
||
},
|
||
textarea:'',
|
||
radio:'0',
|
||
startValue: 0,
|
||
CategoryName:null,
|
||
projectName:null,
|
||
projectTitle:null,
|
||
projectUrl:null,
|
||
startNum:null,
|
||
num:null,
|
||
projectDescription:null,
|
||
projectIco:null,
|
||
periodicals:null,
|
||
userId:null,
|
||
projectId:null,
|
||
commentContent:[],
|
||
commentNum:0,
|
||
extensions: [
|
||
new Doc(),
|
||
new Text(),
|
||
new Paragraph(),
|
||
new Heading({ level: 5 }), // 支持多级标题，设置为5级
|
||
new Bold({ bubble: false }), // 在气泡菜单中渲染菜单按钮
|
||
new Underline({ bubble: false, menubar: false }), // 在气泡菜单而不在菜单栏中渲染菜单按钮
|
||
new Italic(),
|
||
new Strike(),
|
||
new ListItem(),
|
||
new BulletList(),
|
||
new OrderedList(),
|
||
],
|
||
isRouterAlive:true,
|
||
isDisabled:false,
|
||
isDisabled2:false,
|
||
Like:null,
|
||
checked:false,
|
||
tabCheckedLast:true,
|
||
tabCheckedHot:false,
|
||
username:'',
|
||
userUri:'',
|
||
average:0,
|
||
github:{
|
||
starNum:null,
|
||
language:'',
|
||
watchers_count:null,
|
||
subscribers_count:null,
|
||
allow_forking:null,
|
||
open_issues_count:null,
|
||
forks_count:null,
|
||
organization:null,
|
||
license:null,
|
||
name:'',
|
||
default_branch:null,
|
||
avatar_url:null,
|
||
},
|
||
totalStar:3.7,
|
||
Content:'',
|
||
imageUrl:'',
|
||
fileAddress:'',
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getProjectDetail();
|
||
this.getLastComment();
|
||
this.isStart();
|
||
// this.getUserInfo();
|
||
this.getGithub();
|
||
},
|
||
watch: {
|
||
$route () {
|
||
if(this.$route.query.refresh){
|
||
this.getProjectDetail() //重新调用http请求实现页面的重新渲染
|
||
}
|
||
}
|
||
},
|
||
methods:{
|
||
toUserPage() {
|
||
if(this.username){
|
||
this.$router.push({
|
||
path: '/UserInfoPage',
|
||
query: {
|
||
name: this.username,
|
||
refresh: true
|
||
}
|
||
})
|
||
}else {
|
||
return false;
|
||
}
|
||
|
||
},
|
||
toUserPage2(username) {
|
||
if(username){
|
||
this.$router.push({
|
||
path: '/UserInfoPage',
|
||
query: {
|
||
name: username,
|
||
refresh: true
|
||
}
|
||
})
|
||
}else {
|
||
return false;
|
||
}
|
||
|
||
},
|
||
toComment(id){
|
||
document.querySelector(id).scrollIntoView(true)
|
||
var auchor=this.$el.querySelector(id)
|
||
document.body.scrollTop=auchor.offsetTop
|
||
},
|
||
|
||
goTo(url){
|
||
window.open(url);
|
||
},
|
||
goBack() {
|
||
window.history.go(-1);
|
||
},
|
||
getProjectDetail(){
|
||
var that=this;
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/selectProById',
|
||
// URL 中的查询参数
|
||
params: {
|
||
id:this.$route.query.id
|
||
}
|
||
}).then(function (res) {
|
||
that.CategoryName=res.data.CategoryName;
|
||
that.projectName=res.data.project.projectName;
|
||
that.projectTitle=res.data.project.projectTitle;
|
||
that.projectUrl=res.data.project.projectUrl;
|
||
that.startNum=res.data.project.startNum;
|
||
that.projectDescription=res.data.project.projectDescription;
|
||
that.projectIco=res.data.project.projectIco;
|
||
that.periodicals=res.data.project.periodicals;
|
||
that.userId=res.data.project.userId;
|
||
that.projectId=res.data.project.projectId;
|
||
that.num=res.data.project.num;
|
||
that.average=res.data.project.average;
|
||
that.username=res.data.project.username;
|
||
that.fileAddress=res.data.project.fileAddress;
|
||
// that.userUri=res.data.project.userUri;
|
||
if(res.data){
|
||
that.getDetailByGitHub();
|
||
// that.getGithub();
|
||
that.changeAvatarByLocal();
|
||
}
|
||
|
||
});
|
||
},
|
||
reload() {
|
||
this.isRouterAlive = false;
|
||
this.$nextTick( ()=> {
|
||
this.isRouterAlive = true;
|
||
});
|
||
},
|
||
|
||
getComment(tab){
|
||
var that=this;
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/selectCommentBy',
|
||
// URL 中的查询参数
|
||
params: {
|
||
id:this.$route.query.id,
|
||
trait:tab.name
|
||
}
|
||
}).then(function (res) {
|
||
that.commentContent=res.data;
|
||
that.commentNum=Object.keys(that.commentContent).length;
|
||
if(tab.name==='last'){
|
||
that.tabCheckedLast=true;
|
||
that.tabCheckedHot=false;
|
||
}else if(tab.name==='hot'){
|
||
that.tabCheckedHot=true;
|
||
that.tabCheckedLast=false;
|
||
}
|
||
});
|
||
},
|
||
publishComment(){
|
||
var that=this;
|
||
if(this.$cookie.get('username')!=null){
|
||
if(this.textarea !==''){
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/comment',
|
||
// URL 中的查询参数
|
||
params: {
|
||
id:that.$route.query.id,
|
||
star:that.startValue,
|
||
content:that.textarea,
|
||
isUsed: that.radio,
|
||
}
|
||
}).then(function (res) {
|
||
if (res.data.code === 200) {
|
||
Vue.prototype.$notify({
|
||
title: '成功',
|
||
message: ('i', {style: 'color: teal'}, res.data.msg),
|
||
type: 'success',
|
||
offset: 50
|
||
});
|
||
that.getLastComment();
|
||
that.getProjectDetail();
|
||
that.reload();
|
||
} else {
|
||
Vue.prototype.$notify.error({
|
||
title: '错误',
|
||
message: res.data.msg,
|
||
offset: 50
|
||
});
|
||
}
|
||
});
|
||
}else{
|
||
Vue.prototype.$notify.error({
|
||
title: '错误',
|
||
message: "请填写评论内容！",
|
||
offset: 50
|
||
});
|
||
}
|
||
|
||
}else{
|
||
Vue.prototype.$notify.error({
|
||
title: '错误',
|
||
message: "请先登录！",
|
||
offset: 50
|
||
});
|
||
}
|
||
|
||
|
||
},
|
||
formatNumber(num) {
|
||
return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
|
||
},
|
||
// getUserInfo() {
|
||
// var that = this;
|
||
// if(this.$cookie.get("username")!=null){
|
||
// axios({
|
||
// method: 'post',
|
||
// // 请求的地址
|
||
// url: 'http://localhost:8082/helloGithub_war_exploded/retUser',
|
||
// // URL 中的查询参数
|
||
// params: {
|
||
// username: this.$cookie.get("username")
|
||
// }
|
||
// }).then(function (res) {
|
||
// that.imageUrl = res.data.userAvatar;
|
||
// // console.log(res);
|
||
// });
|
||
// }else{
|
||
// return;
|
||
// }
|
||
// },
|
||
|
||
addLike(id){
|
||
var that=this;
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/addLike',
|
||
// URL 中的查询参数
|
||
params: {
|
||
id:id
|
||
}
|
||
}).then((res)=>{
|
||
if(res.data.code===500){
|
||
Vue.prototype.$notify.error({
|
||
title: '错误',
|
||
message: res.data.msg,
|
||
offset: 50
|
||
});
|
||
return;
|
||
}else{
|
||
if(!that.tabCheckedLast){
|
||
that.getHotComment();
|
||
}else{
|
||
that.getLastComment();
|
||
}
|
||
}
|
||
})
|
||
},
|
||
getHotComment(){
|
||
var that=this;
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/selectCommentBy',
|
||
// URL 中的查询参数
|
||
params: {
|
||
id:this.$route.query.id,
|
||
trait:'hot'
|
||
}
|
||
}).then(function (res) {
|
||
that.commentContent=res.data;
|
||
});
|
||
},
|
||
getLastComment(){
|
||
var that=this;
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/selectCommentBy',
|
||
// URL 中的查询参数
|
||
params: {
|
||
id:this.$route.query.id,
|
||
trait:'last'
|
||
}
|
||
}).then(function (res) {
|
||
// console.log(res);
|
||
that.commentContent=res.data;
|
||
that.commentNum=Object.keys(that.commentContent).length;
|
||
|
||
});
|
||
},
|
||
isStart(){
|
||
var that=this;
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/whetherLike',
|
||
// URL 中的查询参数
|
||
params: {
|
||
proId:this.$route.query.id,
|
||
|
||
}
|
||
}).then(function (res) {
|
||
that.Like=res.data;
|
||
});
|
||
},
|
||
addStar(){
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/whetherAddLike',
|
||
// URL 中的查询参数
|
||
params: {
|
||
proId:this.$route.query.id,
|
||
}
|
||
}).then((res)=>{
|
||
if (res.data.code === 500) {
|
||
Vue.prototype.$notify.error({
|
||
title: '错误',
|
||
message: res.data.msg,
|
||
offset: 50
|
||
});
|
||
} else {
|
||
this.getProjectDetail();
|
||
this.isStart();
|
||
this.$router.push({
|
||
path:'/ProjectDetail',
|
||
query: {
|
||
id: this.projectId, refresh: true
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
cancleStar(){
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/whetherCancelLike',
|
||
// URL 中的查询参数
|
||
params: {
|
||
proId:this.$route.query.id,
|
||
}
|
||
}).then((res)=>{
|
||
if (res.data.code === 500) {
|
||
Vue.prototype.$notify.error({
|
||
title: '错误',
|
||
message: res.data.msg,
|
||
offset: 50
|
||
});
|
||
} else {
|
||
this.getProjectDetail();
|
||
this.isStart();
|
||
// window.location.reload()
|
||
this.$router.push({
|
||
path:'/ProjectDetail',
|
||
query: {
|
||
id: this.projectId, refresh: true
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
|
||
getDetailByGitHub(){
|
||
var that=this;
|
||
axios({
|
||
method: 'get',
|
||
// 请求的地址
|
||
url: '/github/'+this.projectName,
|
||
// URL 中的查询参数
|
||
}).then((res)=>{
|
||
if(res.data){
|
||
that.github.starNum=res.data.stargazers_count;
|
||
if(res.data.language===null){
|
||
that.github.language='无';
|
||
|
||
}else {
|
||
that.github.language=res.data.language;
|
||
}
|
||
that.github.watchers_count=res.data.watchers_count;
|
||
that.github.subscribers_count=res.data.subscribers_count;
|
||
that.github.allow_forking=res.data.allow_forking;
|
||
that.github.open_issues_count=res.data.open_issues_count;
|
||
that.github.forks_count=res.data.forks_count;
|
||
that.github.organization=res.data.owner.type;
|
||
if(!res.data.license){
|
||
that.github.license='无';
|
||
}else{
|
||
that.github.license=res.data.license.spdx_id;
|
||
}
|
||
that.github.name=res.data.name;
|
||
that.github.default_branch=res.data.default_branch;
|
||
that.github.avatar_url=res.data.owner.avatar_url;
|
||
if(that.$route.query.id){
|
||
that.saveGithubInfo();
|
||
}else{
|
||
return false;
|
||
}
|
||
return true;
|
||
}else{
|
||
return false;
|
||
}
|
||
|
||
});
|
||
|
||
},
|
||
copyText(){
|
||
this.Content=this.projectName+' : ' +this.projectTitle+', 更多详情尽在 : '+this.projectUrl;
|
||
var input = document.createElement("input"); // js创建一个input输入框
|
||
input.value = this.Content; // 将需要复制的文本赋值到创建的input输入框中
|
||
document.body.appendChild(input); // 将输入框暂时创建到实例里面
|
||
input.select(); // 选中输入框中的内容
|
||
document.execCommand("Copy"); // 执行复制操作
|
||
document.body.removeChild(input); // 最后删除实例中临时创建的input输入框，完成复制操作
|
||
Vue.prototype.$notify({
|
||
title: '成功',
|
||
message: ('i', {style: 'color: teal'}, "项目信息已复制，快去分享吧~"),
|
||
type: 'success',
|
||
offset: 50
|
||
});
|
||
},
|
||
|
||
saveGithubInfo(){
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/insertGithubInfo',
|
||
// URL 中的查询参数
|
||
params: {
|
||
projectId:this.$route.query.id,
|
||
avatar:this.github.avatar_url,
|
||
name:this.github.name,
|
||
starImgUrl:'https://starchart.cc/'+this.projectName+'.svg',
|
||
starCount:this.github.starNum,
|
||
mainLanguage:this.github.language,
|
||
isActive:this.github.allow_forking,
|
||
subscriber:this.github.subscribers_count,
|
||
issues:this.github.open_issues_count,
|
||
isOrganization:this.github.organization,
|
||
defaultBranch:this.github.default_branch,
|
||
forks:this.github.forks_count,
|
||
protocol:this.github.license,
|
||
version:'0',
|
||
}
|
||
})
|
||
},
|
||
|
||
changeAvatarByLocal(){
|
||
if(this.username!==null){
|
||
var that=this;
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: '/api/retUserAv',
|
||
// URL 中的查询参数
|
||
params:{
|
||
username:this.username,
|
||
},
|
||
responseType:'blob'
|
||
}).then((res)=>{
|
||
that.imageUrl = window.URL.createObjectURL(res.data)//这里也是关键,调用window的这个方法URL方法
|
||
})
|
||
}else{
|
||
return;
|
||
}
|
||
|
||
|
||
},
|
||
Download(){
|
||
window.open('http://localhost:8082/helloGithub_war_exploded/DownLoad?id='+this.$route.query.id);
|
||
// axios({
|
||
// method: 'post',
|
||
// // 请求的地址
|
||
// url: '/api/DownLoad',
|
||
// // URL 中的查询参数
|
||
// params:{
|
||
// id:this.$route.query.id,
|
||
// },
|
||
// responseType: 'blob'
|
||
// }).then(()=>{
|
||
// Vue.prototype.$notify({
|
||
// title: '提示',
|
||
// message: "请等待下载执行",
|
||
// offset: 50,
|
||
// type:"success"
|
||
// });
|
||
// })
|
||
},
|
||
|
||
getGithub(){
|
||
var that=this;
|
||
axios({
|
||
method: 'post',
|
||
// 请求的地址
|
||
url: 'http://localhost:8082/helloGithub_war_exploded/returnGithubInfo',
|
||
// URL 中的查询参数
|
||
params: {
|
||
projectId:this.$route.query.id
|
||
}
|
||
}).then(function (res) {
|
||
if(!res.data){
|
||
return false;
|
||
}else{
|
||
that.github.starNum=res.data.starCount;
|
||
that.github.language=res.data.mainLanguage;
|
||
that.github.subscribers_count=res.data.subscriber;
|
||
that.github.open_issues_count=res.data.issues;
|
||
that.github.forks_count=res.data.forks;
|
||
that.github.allow_forking=res.data.isActive;
|
||
that.github.license=res.data.protocol;
|
||
that.github.name=res.data.name;
|
||
that.github.default_branch=res.data.defaultBranch;
|
||
that.github.avatar_url=res.data.avatar;
|
||
}
|
||
|
||
});
|
||
},
|
||
|
||
|
||
},
|
||
computed: {
|
||
// 对时间进行格式化
|
||
formatTime: function() {
|
||
if (this.projectLists) {
|
||
const dt = new Date(this.projectLists.submitTime)
|
||
const year=dt.getFullYear()
|
||
const month = dt.getMonth()
|
||
const date = dt.getDate()
|
||
return `${year}-${month}-${date}`
|
||
}
|
||
return '';
|
||
},
|
||
// 截取文章内容的前 35 个字，并加上省略号
|
||
brief: function() {
|
||
if(this.github.language){
|
||
return this.github.language.substr(0, 7)+'...';
|
||
}else{
|
||
return false;
|
||
}
|
||
|
||
},
|
||
briefName: function() {
|
||
if(this.github.name){
|
||
return this.github.name.substr(0, 7)+'...';
|
||
}else{
|
||
return false;
|
||
}
|
||
|
||
},
|
||
|
||
briefTopName: function() {
|
||
if(this.projectName){
|
||
return this.projectName.substr(0, 20)+'...';
|
||
}else{
|
||
return false;
|
||
}
|
||
|
||
},
|
||
}
|
||
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
::v-deep .el-page-header__left{
|
||
left:-300px;
|
||
}
|
||
::v-deep .el-divider--vertical {
|
||
display: inline-block;
|
||
width: 1px;
|
||
height: auto;
|
||
margin: 0 8px;
|
||
vertical-align: middle;
|
||
position: relative;
|
||
}
|
||
::v-deep .el-collapse-item__header {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 100px;
|
||
line-height: 48px;
|
||
background-color: #FFFFFF;
|
||
color: #303133;
|
||
cursor: pointer;
|
||
border-bottom: 1px solid #D0E0DB;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
transition: border-bottom-color .3s;
|
||
outline: none;
|
||
}
|
||
::v-deep .ql-toolbar.ql-snow {
|
||
border: 1px solid #ccc;
|
||
box-sizing: border-box;
|
||
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
||
padding: 8px;
|
||
display: none;
|
||
}
|
||
::v-deep .el-card__header{
|
||
border-bottom: none;
|
||
}
|
||
|
||
::v-deep .avatar :hover{
|
||
transform: rotate(360deg);
|
||
}
|
||
|
||
::v-deep .el-page-header__left{
|
||
left:10px;
|
||
}
|
||
::v-deep .el-page-header__content{
|
||
flex:1;
|
||
}
|
||
::v-deep .title:hover{
|
||
color: #00b2ff !important;
|
||
}
|
||
</style> |