|
|
@@ -0,0 +1,496 @@
|
|
|
+<template>
|
|
|
+ <div class="community-u" ref="container" @scroll="containerScroll">
|
|
|
+ <div alt="back" class="background"></div>
|
|
|
+ <div class="userinfo">
|
|
|
+ <img :src="info.icon_url" alt class="header-avatar">
|
|
|
+ <div class="header-nickname">{{info.nickname}}</div>
|
|
|
+ <div class="header-title">{{info.title}}</div>
|
|
|
+ <div class="count-infos">
|
|
|
+ <div class="info">
|
|
|
+ {{idInfo.topics_count}}
|
|
|
+ <span>文章</span>
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ {{idInfo.fans_count}}
|
|
|
+ <span>粉丝</span>
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ {{idInfo.followers_count}}
|
|
|
+ <span>关注</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <button class="focu-btn followed" v-if="idInfo.has_follow" @click="doFollow">已关注</button>
|
|
|
+ <button class="focu-btn" v-else @click="doFollow">关注TA</button>
|
|
|
+ </div>
|
|
|
+ <div class="content-box">
|
|
|
+ <div class="content-left">
|
|
|
+ <div class="arts-title">
|
|
|
+ 一共
|
|
|
+ <span style="color: var(--mainColor);">{{idInfo.topics_count}}</span> 篇文章
|
|
|
+ </div>
|
|
|
+ <div class="art" v-for="(art, index) of arts" :key="index" @click="clickArt(art, index)">
|
|
|
+ <img v-if="art.cover_url" :src="art.cover_url" alt class="art-img">
|
|
|
+ <section class="art-info">
|
|
|
+ <h3 class="art-title">{{art.title}}</h3>
|
|
|
+ <p class="art-summary">{{art.intro}}</p>
|
|
|
+ <div class="art-subinfo">
|
|
|
+ <div class="author">
|
|
|
+ <img :src="info.icon_url" alt="author-img" class="author-avatar">
|
|
|
+ <span style="font-size: 10px;">{{info.nickname}}</span>
|
|
|
+ <span class="create-time">{{art.updated_at}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="art-counts-info">
|
|
|
+ <div class="good">
|
|
|
+ <img src="~@/assets/img/community/good_icon.png">
|
|
|
+ <span class="good-count">{{art.like_count}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="comment">
|
|
|
+ <img src="~@/assets/img/community/comment_icon.png">
|
|
|
+ <span class="comment-count">{{art.reply_count}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+ <el-pagination
|
|
|
+ v-if="$store.state.isPC"
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="+idInfo.topics_count"
|
|
|
+ :page-size="10"
|
|
|
+ :current-page="currentPage"
|
|
|
+ @current-change="changePagination"
|
|
|
+ ></el-pagination>
|
|
|
+ </div>
|
|
|
+ <div class="content-right">
|
|
|
+ 关注微信
|
|
|
+ <img src="~@/assets/img/wechat.jpg" alt="wechat" class="qr-code">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="loading" v-if="isLoading">
|
|
|
+ <i class="el-icon-loading"></i>
|
|
|
+ 正在加载
|
|
|
+ </div>
|
|
|
+ <div class="loading" v-if="noMore">已加载全部内容</div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import http from '@/plugins/http'
|
|
|
+import WxMixin from '@/mixins/wx'
|
|
|
+
|
|
|
+let container
|
|
|
+let page = 1
|
|
|
+
|
|
|
+export default {
|
|
|
+ layout: 'opacity_header',
|
|
|
+ async asyncData({ params }) {
|
|
|
+ let id = params.id
|
|
|
+ // console.log(id)
|
|
|
+ let res = await http.get(`https://www.proginn.com/api/user/getUserInfo?id=${id}&page=1&size=10`, {}, { neverLogout: true })
|
|
|
+ return {
|
|
|
+ title: `${res.data.info.nickname}的技术圈主页-程序员客栈`
|
|
|
+ }
|
|
|
+ },
|
|
|
+ head() {
|
|
|
+ return {
|
|
|
+ title: this.title,
|
|
|
+ script: [
|
|
|
+ { src: 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js' },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mixins: [WxMixin],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list: [],
|
|
|
+ currentPage: 1,
|
|
|
+ isLoading: false,
|
|
|
+ noMore: false,
|
|
|
+ idInfo: {},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ info() {
|
|
|
+ return this.idInfo.info || {}
|
|
|
+ },
|
|
|
+ arts() {
|
|
|
+ return this.idInfo.topics || []
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ container = this.$refs.container
|
|
|
+ this.getDetail()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getDetail() {
|
|
|
+ let res = await http.get(`https://www.proginn.com/api/user/getUserInfo?id=${this.$route.params.id}&page=1&size=10`)
|
|
|
+ console.log(res.data)
|
|
|
+ if(res) {
|
|
|
+ this.idInfo = res.data
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clickLancer({ id }) {
|
|
|
+ this.$router.push(`https://www.proginn.com/cert/type/${id}`)
|
|
|
+ },
|
|
|
+ btnDisabled(item) {
|
|
|
+ return item.btn_name !== "申请认证" || !item.can_click
|
|
|
+ },
|
|
|
+ async getList() {
|
|
|
+ let id = this.$route.params.id
|
|
|
+ this.isLoading = true
|
|
|
+ // console.log(id)
|
|
|
+ let res = await this.$get(`https://www.proginn.com/api/user/getUserInfo?id=${id}&page=${this.currentPage}&size=10`, {}, { neverLogout: true })
|
|
|
+ this.isLoading = false
|
|
|
+ if(res) {
|
|
|
+ if(this.currentPage === 1 || this.$store.state.isPC) {
|
|
|
+ this.idInfo = res.data
|
|
|
+ } else {
|
|
|
+ if(!res.data.topics.length) {
|
|
|
+ this.noMore = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.idInfo.topics = [...this.idInfo.topics, ...res.data.topics]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ canApply(item) {
|
|
|
+ return item.end_date && item.is_cert_validate && item.cert_no
|
|
|
+ },
|
|
|
+ configWx() {
|
|
|
+ try {
|
|
|
+ let conf = this.$store.state.wxConfig
|
|
|
+ wx.ready(function() { //需在用户可能点击分享按钮前就先调用
|
|
|
+ wx.config({
|
|
|
+ debug: true,
|
|
|
+ appId: conf.appId,
|
|
|
+ timestamp: conf.timestamp,
|
|
|
+ nonceStr: conf.nonceStr,
|
|
|
+ signature: conf.signature,
|
|
|
+ jsApiList: [
|
|
|
+ // 所有要调用的 API 都要加到这个列表中
|
|
|
+ 'onMenuShareTimeline', // 分享到朋友圈接口
|
|
|
+ 'onMenuShareAppMessage', // 分享到朋友接口
|
|
|
+ 'onMenuShareQQ', // 分享到QQ接口
|
|
|
+ 'onMenuShareWeibo' // 分享到微博接口
|
|
|
+ ],
|
|
|
+ success: function() {
|
|
|
+ alert('wx.config ok');
|
|
|
+ },
|
|
|
+ error: function(d) {
|
|
|
+ alert('wx.config err:' + JSON.stringify(d));
|
|
|
+ }
|
|
|
+ })
|
|
|
+ wx.updateAppMessageShareData({
|
|
|
+ title: '开发者资质认证', // 分享标题
|
|
|
+ desc: '通过平台审核、认证，将获得更多接单机会', // 分享描述
|
|
|
+ link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
|
|
|
+ imgUrl: 'https://stacdn.proginn.com/favicon.ico', // 分享图标
|
|
|
+ success: function() {
|
|
|
+ // 设置成功
|
|
|
+ alert('微信图标设置成功')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ } catch(error) {
|
|
|
+ alert(error)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 修改页码
|
|
|
+ */
|
|
|
+ changePagination(page) {
|
|
|
+ this.currentPage = page
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 点击关注按钮
|
|
|
+ */
|
|
|
+ async doFollow() {
|
|
|
+ // 移动端处理
|
|
|
+ if(!this.$store.state.isPC && !this.$store.getters.isLogin) {
|
|
|
+ location.href = 'proginn://login'
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let res = await this.$post(`https://www.proginn.com/api/user/follow`, {
|
|
|
+ follow_id: this.$route.params.id
|
|
|
+ })
|
|
|
+ if(res) {
|
|
|
+ this.idInfo.has_follow = res.data.follow_status ? 1 : 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 点击文章
|
|
|
+ */
|
|
|
+ clickArt(art, index) {
|
|
|
+ location.href = `https://www.proginn.com/topics/${art.id}.html`
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 监听滚动
|
|
|
+ */
|
|
|
+ containerScroll() {
|
|
|
+ if(this.isLoading || this.noMore) return
|
|
|
+ // PC不监听
|
|
|
+ if(this.$store.state.isPC) return
|
|
|
+ if(container.scrollHeight - container.scrollTop - container.clientHeight < 50) {
|
|
|
+ this.currentPage++
|
|
|
+ this.getList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang='less' scoped>
|
|
|
+@max768: ~"(max-width: 768px)";
|
|
|
+.community-u {
|
|
|
+ min-width: 0;
|
|
|
+ min-height: 0;
|
|
|
+ max-width: 1000px;
|
|
|
+}
|
|
|
+.background {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 428px;
|
|
|
+ z-index: -1;
|
|
|
+ background: url(~@/assets/img/community/u_background.png) 0 0 ~"/" 100% 100% no-repeat;
|
|
|
+}
|
|
|
+.community-u {
|
|
|
+ .userinfo {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ height: 350px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ color: white;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.header-avatar {
|
|
|
+ @size: 88px;
|
|
|
+ width: @size;
|
|
|
+ height: @size;
|
|
|
+ border-radius: @size / 2;
|
|
|
+}
|
|
|
+.header-nickname {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin: 10px 0 2px;
|
|
|
+}
|
|
|
+.header-title {
|
|
|
+ font-size: 10px;
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+.count-infos {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 23px 0 30px;
|
|
|
+}
|
|
|
+.info {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 25px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 0 16px;
|
|
|
+ border-right: 1px solid white;
|
|
|
+ &:last-child {
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 10px;
|
|
|
+ margin: 0 30px 0 6px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.create-time {
|
|
|
+ font-size: 10px;
|
|
|
+ color: #999;
|
|
|
+ border-left: 1px solid #999;
|
|
|
+ margin-left: 2px;
|
|
|
+ padding-left: 2px;
|
|
|
+}
|
|
|
+.focu-btn {
|
|
|
+ width: 150px;
|
|
|
+ height: 40px;
|
|
|
+ background: var(--mainColor);
|
|
|
+ color: white;
|
|
|
+ border-radius: 20px;
|
|
|
+}
|
|
|
+.followed {
|
|
|
+ background: grey;
|
|
|
+}
|
|
|
+.content-box {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.content-left {
|
|
|
+ width: 740px;
|
|
|
+ padding: 20px 20px 40px;
|
|
|
+ background: white;
|
|
|
+}
|
|
|
+.art {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 20px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-bottom: 1px solid #f2f2f2;
|
|
|
+}
|
|
|
+.art-img {
|
|
|
+ width: 154px;
|
|
|
+ height: 114px;
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+.art-info {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+.overflow {
|
|
|
+ max-width: 520px;
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+.art-title {
|
|
|
+ .overflow;
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+.art-summary {
|
|
|
+ .overflow;
|
|
|
+ font-size: 10px;
|
|
|
+ color: #666;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.art-subinfo {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 50px;
|
|
|
+ .author-avatar {
|
|
|
+ margin-right: 4px;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ .author {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .author-avatar {
|
|
|
+ @size: 20px;
|
|
|
+ width: @size;
|
|
|
+ height: @size;
|
|
|
+ }
|
|
|
+}
|
|
|
+.art-counts-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .good-count,
|
|
|
+ .comment-count {
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ .good,
|
|
|
+ .comment {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ @size: 16px;
|
|
|
+ width: @size;
|
|
|
+ height: @size;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .comment {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.content-right {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 250px;
|
|
|
+ height: 274px;
|
|
|
+ background: white;
|
|
|
+ margin-left: 10px;
|
|
|
+ padding-top: 20px;
|
|
|
+ .qr-code {
|
|
|
+ @size: 176px;
|
|
|
+ width: @size;
|
|
|
+ height: @size;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.arts-title {
|
|
|
+ padding-bottom: 10px;
|
|
|
+ border-bottom: 1px solid #f2f2f2;
|
|
|
+}
|
|
|
+@media @max768 {
|
|
|
+ .community-u {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 0;
|
|
|
+ height: 100vh;
|
|
|
+ overflow-y: scroll;
|
|
|
+ }
|
|
|
+ .background {
|
|
|
+ background: url(~@/assets/img/community/u_background_small.png) 0 0 ~"/" 100%
|
|
|
+ 100% no-repeat;
|
|
|
+ }
|
|
|
+ .followed {
|
|
|
+ border: 1px solid white;
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+ .content-left {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px 0 0;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .arts-title {
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ }
|
|
|
+ .art {
|
|
|
+ flex-direction: row-reverse;
|
|
|
+ border-bottom: 1px solid rgba(244, 244, 244, 1);
|
|
|
+ padding-bottom: 10px;
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ .art-img {
|
|
|
+ width: 120px;
|
|
|
+ height: 90px;
|
|
|
+ margin-left: 20px;
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .art-info {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ .art-title {
|
|
|
+ white-space: normal;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ .art-summary {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .art-subinfo {
|
|
|
+ margin-top: 26px;
|
|
|
+ }
|
|
|
+ .content-right {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .el-pagination {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-pagination {
|
|
|
+ margin-top: 40px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.loading {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin: 20px 0;
|
|
|
+}
|
|
|
+</style>
|
xiaozhen