Skip to content

B
beyond-clouds-front
Commit 8365a197 by yanju
Options

personal-center and topic

parent fd62a4a9
Showing with 524 additions and 146 deletions
action/config.js
......@@ -209,6 +209,9 @@ export default {
event:{
listenPageChange:'listenPageChange',
listenDateChange:'listenDateChange',
listenCropperPic:'listenCropperPic',
listenPopupValue:'listenpopupvalue',
},
default_data: {
......
action/utils/get-key.js
function getKey(length=9){
//length为id的长度
//timestamp为当前时间戳
var timestamp = (new Date()).getTime()
//timestamp32为时间戳转化为32进制后的结果
var timestamp32 = timestamp.toString(32)
if(length<=9){
var start_num = 9 - length
var res_str = timestamp32.substring(start_num, 9)
} else if (length>9){
var length2=length-9
var str = "";
var str_arr = [
"0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H",
"I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z",
"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r",
"s", "t", "u", "v", "w", "x", "y", "z", "_"];
for (var i = 0; i < length2; i++) {
var r = parseInt(Math.random() * 62);//生成0-62之间的随机数
str += str_arr[r];
}
res_str = str + timestamp32
}
return res_str;
}
export {getKey}
components/common/cropper/src/cropper.vue
......@@ -41,11 +41,15 @@
<script>
import config from '../../../../action/config';
export default {
name:'yun-cropper',
data(){
return{
// 裁剪组件的基础配置option
dialogVisible:false,
loading:false,
option: {
img: '', // 裁剪图片的地址
info: true, // 裁剪框的大小信息
......@@ -71,7 +75,6 @@
},
props:{
file:[Object ,Blob],
dialogVisible:Boolean,
cropperW:{
type:Number,
default: 1,
......@@ -95,7 +98,6 @@
methods:{
changeUpload(e) {
console.log(e);
let file = e;
const isLt5M = file.size / 1024 / 1024 < 5;
if (!isLt5M) {
......@@ -115,40 +117,42 @@
},
submitPhoto(){
let that = this;
// this.addImg(this.img)
this.$refs.cropper.getCropData((e) => {
this.loading = true
let bytes = window.atob(e.split(',')[1]);
let array = [];
for(let i = 0;i<bytes.length;i++){
array.push(bytes.charCodeAt(i))
}
let blob = new Blob([new Uint8Array(array)],{type:'image/jpeg'});
// let picFile = new File(blob)
let a = new FormData();
let type = 0;
//0-用户头像
//1-博客封面
// 2-项目封面
a.append('file',new File([blob],+new Date()+'y.png'));
a.append('type',type); //0是头像
this.$axios.$post(config.api.post.Resource.file,a).then((res)=>{
if(res.code === 0){
this.$emit(config.event.listenCropperPic,res.data);
}else{
this.$message({
message:res.msg,
type:'warning'
})
}
this.loading = false
this.dialogVisible = false
this.addImg(this.img)
// this.$refs.cropper.getCropData((e) => {
// this.loading = true
// let bytes = window.atob(e.split(',')[1]);
// let array = [];
// for(let i = 0;i<bytes.length;i++){
// array.push(bytes.charCodeAt(i))
// }
// let blob = new Blob([new Uint8Array(array)],{type:'image/jpeg'});
//
// let a = new FormData();
// a.append('files',blob);
// post(config.api.post.user.uploadfile,a,{
// 'Content-Type':'multipart/form-data',
// token:this.$store.state.token
// }).then(function (data) {
// that.loading = false
// if(data.success){
// that.$store.state.userInfo.user_avatar = data.url;
// that.$message({
// message:data.info,
// type:'success'
// })
// }else{
// that.$message({
// message:data.info,
// type:'error'
// })
// }
//
// })
//
// })
})
})
},
},
......
components/common/popup-box/src/main.js
......@@ -24,12 +24,14 @@ const PopupBox = function (options,callback) {
data:options
});
instance.$mount();
instance.visible = true;
document.body.appendChild(instance.$el);
return instance;
};
PopupBox.close = function (userOnClose) {
instance.visible = false;
};
......
components/common/popup-box/src/main.vue
<template>
<div class="popup-box__wrap">
<div class="popup-box__wrap"
v-if="visible"
>
<div class="popup-box">
<div class="header">
<p>{{title}}</p>
<yun-icon name="close1"size="12px" color="#999"></yun-icon>
<yun-icon name="close1"size="12px" color="#999" @click.native="handleClose"></yun-icon>
</div>
<div class="box-body">
<div class="box-body__top">
<div class="box-body__top" v-if="name">
<yun-avatar size="18px" :src="avatar"></yun-avatar>
<p>{{name}}<span>:</span>{{content}}</p>
</div>
<textarea name="" placeholder="转发动态" class="box-body__bottom" cols="30" rows="10"></textarea>
<slot></slot>
<textarea v-model="inputValue" name="" placeholder="Write Here" class="box-body__bottom" cols="30" rows="10"></textarea>
</div>
<div class="footer">
<div class="type"><span>公开</span><yun-icon name="down_arrow" style="margin-left: 8px" size="8px" color="#999"></yun-icon></div>
<div class="submit">发布</div>
<div class="type" v-if="name"><span>公开</span><yun-icon name="down_arrow" style="margin-left: 8px" size="8px" color="#999"></yun-icon></div>
<div class="submit" @click="popupSubmit">提交</div>
</div>
</div>
......@@ -23,6 +27,7 @@
<script>
import config from '../../../../action/config';
export default {
name:'popupBox',
props:{
......@@ -35,7 +40,24 @@
avatar:'',
name:'aa',
content:'黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉黎莉莉',
visible:false,
inputValue:'',
onSubmit:null,
onClose:null,
}
},
methods:{
handleClose(){
console.log(this.visible);
this.visible = false;
},
popupSubmit(){
this.onSubmit(this.inputValue);
},
},
watch:{
}
}
</script>
......
components/pc/datePicker/datePicker.vue
......@@ -57,7 +57,8 @@
</template>
<script>
import BDate from './Date';
import BDate from './date';
import config from '../../../action/config'
export default {
name: 'DatePicker',
......@@ -82,6 +83,8 @@
this.selectedDate = selectedDate.value;
console.log( selectedDate)
this.$refs.input.blur();
this.$emit(config.event.listenDateChange,selectedDate)
},
// 设定日期单元格样式
tableCellClass(cell) {
......
components/pc/nav/navCard.vue
......@@ -27,7 +27,8 @@
</template>
<script>
export default {
export default {
name: "navCard",
props: {
childList: Array,
......
components/pc/nav/navWrap.vue
......@@ -2,7 +2,7 @@
<div class="nav-wrap" :style="{ width: width, height: height}">
<nav-card
v-for="(item,index) in list"
:key="item.address"
:key="item.address+index"
:navAddress="item.address"
:labelId="item.id"
:childList="item.childList"
......@@ -23,7 +23,7 @@ export default {
list: Array,
width: String,
height: String
}
},
}
</script>
......
components/pc/pageHeader.vue
......@@ -227,7 +227,6 @@
},
routeToHome(){
console.log();
this.$router.push('/home');
},
......
components/pc/projectCard.vue
......@@ -100,7 +100,7 @@
this.src = info.cover;
this.cardTags = info.tags;
this.cardTime = dateConvert(info.createTime);
this.cardUser = info.userId;
this.cardUser = info.userNick;
this.cardType = 2;
}
if(this.info.projectId){
......
components/pc/releaseCard.vue
......@@ -58,36 +58,12 @@
<div class="func-item__abs" v-if="showTopicCard">
<yun-input style="border:1px solid #EFEFEF;margin-top:12px" iconName="search" width='270px' placeholder="搜索话题" v-model="TopicValue"></yun-input>
<div class="topic-content">
<div class="topic-content__c">
<p># 切并严回保写工又些却 #</p>
<h6>1.4w</h6>
</div>
<div class="topic-content__c">
<p># 切并严回保写工又些却 #</p>
<h6>1.4w</h6>
</div>
<div class="topic-content__c">
<p># 切并严回保写工又些却 #</p>
<h6>1.4w</h6>
</div>
<div class="topic-content__c">
<p># 切并严回保写工又些却 #</p>
<h6>1.4w</h6>
</div>
<div class="topic-content__c">
<p># 切并严回保写工又些却 #</p>
<h6>1.4w</h6>
</div>
<div class="topic-content__c">
<p># 切并严回保写工又些却 #</p>
<h6>1.4w</h6>
</div>
<div class="topic-content__c">
<p># 切并严回保写工又些却 #</p>
<h6>1.4w</h6>
<div class="topic-content__c" v-for="(val,index) in topicList" :key="val.topicId" @click="clickToAddTopic(val.topicId,val.topicName)">
<p>#{{val.topicName}}#</p>
<h6>{{val.referenceCount}}</h6>
</div>
</div>
<div class="more">创建新话题</div>
<div class="more" @click="clickToOpenPopup">创建新话题</div>
</div>
</transition>
</div>
......@@ -202,11 +178,15 @@
],
showVideoUploadP:false,
showCoverUploadP:false,
topicList:[],
}
},
computed:{
},
created(){
this.dataGetTopicList();
},
mounted(){
},
methods:{
......@@ -223,7 +203,6 @@
console.log(e.target.files[0]);
this.addFile = e.target.files[0];;
},
getCroppedPic(pic){
this.imgArr.push(pic)
},
......@@ -233,7 +212,6 @@
let arr2 = this.imgArr.slice(index+1)
this.imgArr = [...arr1,...arr2]
},
changeToUploadVideo(e){
console.log(e.target);
//let file = e.target.files[0];
......@@ -242,7 +220,6 @@
this.showVideoUploadP = true;
},
changeToUploadCover(e){
console.log(e.target);
//let file = e.target.files[0];
......@@ -252,6 +229,48 @@
this.showCoverUploadP = true;
},
clickToOpenPopup(){
this.$popupbox({
title:'发布话题',
name:'',
onSubmit: (value)=>{
this.$axios.$post(config.api.post.Topic.release,{
topicName:value
}).then((res)=>{
if(res.code===0){
this.dataGetTopicList();
this.$message({
type:'success',
message:'话题发布成功!'
})
}else{
this.$message({
type:'warning',
message:res.msg
})
}
})
}
})
},
dataGetTopicList(){
this.$axios.$get(config.api.get.Topic.list,{
params:{
page:1,
size:10
}
}).then((response)=>{
this.topicList = response.data.dataList;
this.pages = response.data.totalPage;
})
},
clickToAddTopic(id,name){
this.releaseWord = this.releaseWord +"#"+name+"#";
this.showTopicCard = false;
},
}
......
components/pc/topicCard.vue
......@@ -10,19 +10,29 @@
</div>
<div class="topic-card-right">
<div class="right-header">
<span class="right-title"># Java #</span>
<span class="right-title"># {{cardName}} #</span>
<span class="right-label" @click="handleFocus" :style="{color: fontColor}">{{focus}}</span>
</div>
<p class="right-content">java是一门好的编程语言编程语言</p>
<p class="right-footer">56万讨论 · 1.45亿阅读</p>
<p class="right-content">{{cardIntro}}</p>
<p class="right-footer">{{cardNum1}}使用 · 1.45亿阅读</p>
</div>
</div>
</div>
</template>
<script>
export default {
import {dateConvert} from "../../action/utils/dataConvert";
export default {
name: 'topicCard',
props:{
info:{
type:Object,
default:()=>({})
}
},
data(){
return{
isPhoto: true,
......@@ -30,6 +40,13 @@ export default {
focus: '+关注',
fontColor: '#55B946'
}
},
created(){
this.dateGet2Info();
},
methods:{
handleFocus(){
......@@ -39,7 +56,19 @@ export default {
} else {
this.fontColor = '#55B946'
}
}
},
dateGet2Info(){
let info = this.info;
if(this.info.topicId){
this.cardName = info.topicName;
this.cardIntro = info.topicDescrption;
this.cardId = info.topicId;
this.src = info.cover;
this.cardTags = info.tags;
this.cardTime = dateConvert(info.createTime);
this.cardNum1 = info.referenceCount;
}
},
}
}
</script>
......
components/pc/userCard.vue
<template>
<div class="user-card__wrap">
<div class="user-card1">
<yun-avatar style="margin:40px auto 0;" :src="src" size="84px"></yun-avatar>
<yun-avatar style="margin:40px auto 0;" :src="userAvatar" size="84px"></yun-avatar>
<div class="info1">
<p class="name">{{name}}</p>
<yun-icon name="sex_man" size="12px" color="#00AAE6"></yun-icon>
<yun-icon name="sex_woman" size="12px" color="#F08E8E"></yun-icon>
<p class="name">{{nickName}}</p>
<yun-icon name="sex_man" size="12px" color="#00AAE6" v-if="gender===1"></yun-icon>
<yun-icon name="sex_woman" size="12px" color="#F08E8E" v-if="gender===2"></yun-icon>
</div>
<p class="info2">{{autograph}}</p>
<p class="info2">{{signature}}</p>
<div class="button">修改资料</div>
<nuxt-link tag="div" class="button" to="/personal-center/account/info">修改资料</nuxt-link>
<div class="footer">
<div class="footer-item">
<p>项目</p>
......@@ -47,15 +47,17 @@
<script>
import config from '../../action/config';
export default {
name:'userCard',
data(){
return{
src:'https://s2.ax1x.com/2020/01/15/lO2kIf.png',
userAvatar:'https://s2.ax1x.com/2020/01/15/lO2kIf.png',
name:'man',
sex:'man',
autograph:'manmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanmanman',
nickName:'',
gender:0,
signature:'',
projectNum:6,
blogNum:6,
answerNum:6,
......@@ -63,7 +65,34 @@
follow:7,
fans:7,
}
}
},
props:{
userId:{
type:String,
default:'',
},
},
created(){
if(this.userId){
this.getDataUserInfo();
}
},
methods:{
getDataUserInfo(){
this.$axios.$get(config.api.get.User.otherInfo+this.userId+'/baseinfo').then((response) => {
if(response.code===0){
let data = response.data;
this.nickName=data.nickName;
this.gender= data.gender;
this.signature = data.signature;
this.userAvatar = data.userAvatar;
}
})
},
},
}
</script>
......@@ -104,6 +133,7 @@
&:hover{
color: #fff;
background-color: #00AAE6;
border:1px solid transparent;
}
......
package-lock.json
......@@ -3609,6 +3609,11 @@
"resolved": "http://registry.npm.taobao.org/cookie-signature/download/cookie-signature-1.0.6.tgz",
"integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
},
"cookieparser": {
"version": "0.1.0",
"resolved": "https://registry.npm.taobao.org/cookieparser/download/cookieparser-0.1.0.tgz",
"integrity": "sha1-6hLLEIXBdPMWf66veYX3mr5nHQ4="
},
"cookies": {
"version": "0.8.0",
"resolved": "https://registry.npm.taobao.org/cookies/download/cookies-0.8.0.tgz?cache=0&sync_timestamp=1570851324736&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcookies%2Fdownload%2Fcookies-0.8.0.tgz",
......@@ -7042,6 +7047,11 @@
"integrity": "sha1-Hvo57yxfeYC7F4St5KivLeMpESE=",
"dev": true
},
"js-cookie": {
"version": "2.2.1",
"resolved": "https://registry.npm.taobao.org/js-cookie/download/js-cookie-2.2.1.tgz",
"integrity": "sha1-aeEG3F1YBolFYpAqpbrsN0Tpsrg="
},
"js-levenshtein": {
"version": "1.1.6",
"resolved": "http://registry.npm.taobao.org/js-levenshtein/download/js-levenshtein-1.1.6.tgz",
......
pages/home.vue
......@@ -3,10 +3,10 @@
<div class="home-container__l">
<banner :imgArr="imgArr" style="margin-top: 40px"></banner>
<card-container style="margin-top: 40px" title="项目推荐" label="换一换" more="加载更多">
<project-card v-for="(val,index) in projectList" :info="val"></project-card>
<project-card v-for="(val,index) in projectList" :key="val.projectId" :info="val"></project-card>
</card-container>
<card-container style="margin-top: 16px" title="精选博文" label="换一换" more="加载更多">
<project-card v-for="(val,index) in blogList" :info="val"></project-card>
<project-card v-for="(val,index) in blogList" :key="val.blogId" :info="val"></project-card>
</card-container>
</div>
<div class="home-container__r">
......
pages/personal-center/account/info.vue
......@@ -2,68 +2,48 @@
<div>
<card-container style="margin-top: 16px;padding-bottom: 32px" title="个人信息">
<div class="info-account-item__wrap">
<yun-avatar size="90px" name="昵称"> </yun-avatar>
<p class="change-button">修改头像</p>
<input type="text" class="input1">
<yun-avatar size="90px" :src="this.$store.state.userProfile.avatar" :name="this.$store.state.userProfile.nickName"> </yun-avatar>
<p class="change-button">修改头像
<input type="file"@change="(e)=>openCropper(e)" />
</p>
<input type="text" v-model="nickName" :placeholder="nickName" class="input1" />
</div>
<div class="info-account-item__wrap">
<div class="radio-box1">
<div class="input-radio">
<input id="man" type="radio" name="sex" />
<input id="man" type="radio" name="sex" v-model="gender" :value="1" />
<label for="man">男</label>
</div>
<div class="input-radio">
<input id="woman" type="radio" name="sex" value="0">
<input id="woman" type="radio" name="sex" v-model="gender" :value="2">
<label for="woman">女</label>
</div>
<div class="input-radio">
<input id="unknow" type="radio" name="sex" value="0">
<input id="unknow" type="radio" name="sex" v-model="gender" :value="0">
<label for="unknow">保密</label>
</div>
</div>
<div class="select-box__wrap">
<div class="select-box">
<p>生日·年</p>
<h6>
<yun-icon name="down_arrow" size="8px" color="#999"></yun-icon>
</h6>
</div>
<div class="select-box">
<p>月</p>
<h6>
<yun-icon name="down_arrow" size="8px" color="#999"></yun-icon>
</h6> </div>
<div class="select-box">
<p>日</p>
<h6>
<yun-icon name="down_arrow" size="8px" color="#999"></yun-icon>
</h6> </div>
<date-picker v-on:listenDateChange="getData2Date"></date-picker>
</div>
</div>
<div class="info-account-item__wrap">
<input type="text" class="input2" placeholder="请输入个人签名">
<input type="text" class="input2" v-model="signature" :placeholder="signature" placeholder="请输入个人签名">
</div>
<p class="submit-button">保存</p>
<p class="submit-button" @click="dataPostSaveUserInfo(1)">保存</p>
</card-container>
<card-container style="margin-top: 16px;padding-bottom: 32px" title="联系方式" >
<div class="info-account-item__wrap">
<input type="text" class="input1" placeholder="微信号">
<input type="text" class="input1" v-model="wxNumber" placeholder="微信号">
<div class="radio-box2">
<div class="input-radio">
......@@ -89,7 +69,7 @@
</div>
<div class="info-account-item__wrap">
<input type="text" class="input1" placeholder="QQ号">
<input type="text" class="input1" v-model="qqNumber" placeholder="QQ号">
<div class="radio-box2">
<div class="input-radio">
<input id="everyone-qq" type="radio" name="qq" />
......@@ -113,7 +93,7 @@
</div>
<div class="info-account-item__wrap">
<input type="text" class="input1" placeholder="手机号">
<input type="text" class="input1" v-model="mobile" placeholder="手机号">
<div class="radio-box2">
<div class="input-radio">
<input id="everyone-phone" type="radio" name="phone" />
......@@ -135,8 +115,10 @@
</div>
</div>
</div>
<p class="submit-button">保存</p>
<p class="submit-button" @click="dataPostSaveUserInfo(2)">保存</p>
</card-container>
<yun-cropper :file="addFile" v-on:listenCropperPic="getCroppedPic"></yun-cropper>
</div>
</template>
......@@ -144,12 +126,90 @@
<script>
import CardContainer from '../../../components/pc/cardContainer';
import DatePicker from '../../../components/pc/datePicker/datePicker';
import config from '../../../action/config';
export default {
name:'info',
components:{
CardContainer
}
CardContainer,DatePicker
},
data(){
return{
gender:0,
mobile:null,
nickName:null,
qqNumber:null,
signature:null,
wxNumber:null,
birthday:null,
addFile:{},
}
},
mounted(){
this.getDataUserInfo();
},
methods:{
getData2Date(data){
this.birthday = data.date;
},
getCroppedPic(pic){
if(pic){
this.userAvatar = pic;
this.dataPostSaveUserInfo(1);
}
},
openCropper(e){
this.addFile = e.target.files[0];
},
getDataUserInfo(){
this.$axios.$get(config.api.get.User.myInfo).then((response) => {
if(response.code===0){
console.log(response);
let data = response.data;
this.nickName=data.nickName;
this.gender= data.gender;
this.signature = data.signature;
this.userAvatar = data.userAvatar;
this.mobile = data.mobile;
this.qqNumber = data.qqNumber;
this.wxNumber = data.wxNumber;
}
})
},
dataPostSaveUserInfo(type){
let userInfo1 = {
gender:this.gender,
nickName:this.nickName,
signature:this.signature,
userAvatar:this.userAvatar};
let userInfo2 = {};
if (this.mobile) userInfo2.mobile =this.mobile;
if (this.qqNumber) userInfo2.qqNumber =this.qqNumber;
if (this.wxNumber) userInfo2.wxNumber =this.wxNumber;
this.$axios.$put(config.api.put.User.reviseInfo,type===1?userInfo1:userInfo2).then((response)=>{
if(response.code===0){
let user = {userAvatar:this.userAvatar}
this.$store.commit('userProfile/setUser', user);
this.getDataUserInfo();
this.$message({
message:response.msg,
type:'success'
})
}else{
this.$message({
message:response.msg,
type:'warning'
})
}
})
}
},
}
</script>
......@@ -163,6 +223,7 @@
@extend %flex-row-spb;
justify-content: flex-start;
.change-button{
position:relative;
margin-left: 16*$length;
margin-right: 156*$length;
@include fontStyle(14,19,500,#999,left);
......@@ -171,6 +232,15 @@
&:hover{
color:#75D098;
}
input{
position:absolute;
top:0;
right:0;
height:100%;
width:100%;
opacity: 0;
@extend %cursorPointer;
}
}
.input1{
......
pages/personal-center/home/index.vue
......@@ -8,7 +8,7 @@
<div class="bottom-container__bg"></div>
<div class="bottom-container">
<div class="bottom-left">
<user-card></user-card>
<user-card :userId="this.$store.state.userProfile.userId"></user-card>
<card-container style="margin-top: 16px" title="项目草稿箱">
</card-container>
......@@ -124,7 +124,8 @@
// });
// }
});
}
},
},
......
pages/topic/detail.vue
<template>
<div class="topic-container">
<div class="topic-container__main">
<div class="topic-container__left">
<nav-wrap
width="106px"
:list="list"
></nav-wrap>
</div>
<div class="topic-container__center">
<card-container
width="816px"
height="1070px"
:title="labelTitle"
>
<topic-card></topic-card>
</card-container>
<div class="pagination">
<pagination style="margin: 0 auto;"></pagination>
</div>
</div>
<div class="topic-container__right">
<card-container
title="话题热搜榜"
label="实时更新"
more="更多"
width="302px"
height="430px"
></card-container>
</div>
</div>
</div>
</template>
<script>
import NavWrap from "../../components/pc/nav/navWrap";
import CardContainer from "../../components/pc/cardContainer";
import ProjectCard from "../../components/pc/projectCard";
import Pagination from "../../components/pc/pagination";
import TopicCard from "../../components/pc/topicCard";
export default {
components: {TopicCard, Pagination, ProjectCard, CardContainer, NavWrap},
data(){
return{
list: [
{
label: '推荐',
address: '/topic',
id: '推荐'
},
{
label: '热门',
address: '/topic',
id: '热门'
},
{
label: '关注',
address: '/topic',
id: '关注'
},
{
label: '最新',
address: '/topic',
id: '最新'
}
]
}
},
created() {
this.$router.replace({
path: '/topic',
query: {
id: '推荐'
}
});
},
computed: {
labelTitle: function () {
return this.$route.query.id + '话题'
}
}
}
</script>
<style lang="scss" scoped>
.topic-container{
> .topic-container__main{
width: $pageWidth;
margin: 0 auto;
padding-top: 16*$length;
padding-bottom: 32*$length;
@extend %flex-row-spb;
align-items: start;
.topic-container__left{}
.topic-container__center{
.pagination{
margin: 32*$length;
}
}
.topic-container__right{
.right__write-topic{
width: 302*$length;
background-color: #fff;
@include fontStyle(14,56,500,#00AAE6,center);
@include border-radius(4*$length);
@extend %animate-transition;
&:hover {
color: #fff;
background-color: #00AAE6;
}
}
}
}
}
</style>
pages/topic/index.vue
......@@ -10,13 +10,12 @@
<div class="topic-container__center">
<card-container
width="816px"
height="1070px"
:title="labelTitle"
>
<topic-card></topic-card>
<topic-card v-for="(val,index) in topicList" :key="val.topicId" :info="val"></topic-card>
</card-container>
<div class="pagination">
<pagination style="margin: 0 auto;"></pagination>
<pagination style="margin: 0 auto;" :pages="pages" v-on:listenPageChange="changePage"></pagination>
</div>
</div>
<div class="topic-container__right">
......@@ -39,6 +38,8 @@ import CardContainer from "../../components/pc/cardContainer";
import ProjectCard from "../../components/pc/projectCard";
import Pagination from "../../components/pc/pagination";
import TopicCard from "../../components/pc/topicCard";
import config from '../../action/config';
export default {
components: {TopicCard, Pagination, ProjectCard, CardContainer, NavWrap},
data(){
......@@ -64,7 +65,10 @@ export default {
address: '/topic',
id: '最新'
}
]
],
topicList:[],
currentPage:1,
pages:1
}
},
created() {
......@@ -73,13 +77,37 @@ export default {
query: {
id: '推荐'
}
});
},
computed: {
labelTitle: function () {
return this.$route.query.id + '话题'
}
}
},
mounted(){
},
methods:{
dataGetTopicList(currentPage){
this.$axios.$get(config.api.get.Topic.list,{
params:{
page:currentPage,
size:10
}
}).then((response)=>{
this.topicList = response.data.dataList;
this.pages = response.data.totalPage;
})
},
changePage(currentPage){
//返回页数 请求新的数据
this.dataGetTopicList(currentPage);
}
},
}
</script>
......
store/userProfile.js
......@@ -7,11 +7,21 @@ export const state = () => defaultUser
export const mutations = {
setUser (state, user) {
Object.assign(state, {
userId: user.userId,
avatar: user.userAvatar,
nickName: user.nickName
})
if(user.userId){
Object.assign(state, {
userId: user.userId,
})
}
if(user.userAvatar){
Object.assign(state, {
avatar: user.userAvatar,
})
}
if(user.nickName){
Object.assign(state, {
nickName: user.nickName
})
}
},
removeUser (state) {
Object.assign(state, defaultUser)
......
vim.exe.stackdump
......@@ -13,7 +13,7 @@ Frame Function Args
00000000001 0010057F413 (00000000008, 001006642E0, 00000000000, 00000000000)
00000000001 001005747F6 (00000000000, 0005A6D26A9, 0001772867C, 00000010000)
00000000001 001005D381B (00000000001, 0006B7E1F10, 00180053BD3, 00100666620)
00600049090 001005E0BAA (00000000020, 001802DA8E0, 00180047B96, 00180046BA0)
00600049080 001005E0BAA (00000000020, 001802DA8E0, 00180047B96, 00180046BA0)
000FFFFCCB0 00180047C07 (00000000000, 00000000000, 00000000000, 00000000000)
00000000000 00180045873 (00000000000, 00000000000, 00000000000, 00000000000)
End of stack trace (more stack frames may be present)
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