互动

package.json

@@ -33,6 +33,7 @@
     "vant": "^2.12.3",
     "vconsole-webpack-plugin": "^1.4.2",
     "vue": "^2.6.10",
+    "vue-bus": "^1.2.1",
     "vue-loading-template": "^1.3.2",
     "vue-meta": "^2.3.1",
     "vue-router": "^3.0.3",

src/App.vue

@@ -17,6 +17,7 @@ export default {
     computed: {
         ...mapState(['showNavigationBar'])
     },
+    mounted() {},
     methods: {
         back() {
             this.$router.go(-1);

src/main.js

@@ -13,6 +13,7 @@ import 'vant/lib/index.less';
 import NavBar from './components/NavBar';
 import vueg from 'vueg';
 import preview from './components/preview';
+import VueBus from 'vue-bus';
 // const iNoBounce = require('./inobounce');
 // console.log(iNoBounce);
 // iNoBounce.enable();
@@ -32,6 +33,7 @@ Vue.use(Loadmore);
 Vue.component('nav-bar', NavBar);
 Vue.use(vueg, router, {});
 Vue.use(preview);
+Vue.use(VueBus);
 
 const { StatusBar } = Plugins;
 StatusBar.setOverlaysWebView({
@@ -40,6 +42,32 @@ StatusBar.setOverlaysWebView({
 if (process.env.NODE_ENV === 'development') {
     Plugins.KeepAwake.keepAwake();
 }
+
+Vue.mixin({
+    methods: {
+        checkLogin(openLogin = true) {
+            if (!(this.$store.state.userInfo && this.$store.state.userInfo.id)) {
+                if (openLogin) {
+                    this.$dialog
+                        .confirm({
+                            title: '未登录',
+                            message: '是否立即登录'
+                        })
+                        .then(() => {
+                            this.$router.push({
+                                name: 'login'
+                            });
+                        })
+                        .catch(() => {
+                            // on cancel
+                        });
+                }
+                return false;
+            }
+            return true;
+        }
+    }
+});
 const vm = new Vue({
     router,
     store,

src/router.js

@@ -222,6 +222,24 @@ const router = new Router({
             meta: {
                 statusBar: 'dark'
             }
+        },
+        {
+            path: '/profile',
+            name: 'profile',
+            component: () => import(/* webpackChunkName: "profile" */ '@/views/profile.vue'),
+            meta: {}
+        },
+        {
+            path: '/leaveMessage',
+            name: 'leaveMessage',
+            component: () => import(/* webpackChunkName: "leaveMessage" */ '@/views/leaveMessage.vue'),
+            meta: {}
+        },
+        {
+            path: '/myInteract',
+            name: 'myInteract',
+            component: () => import(/* webpackChunkName: "myInteract" */ '@/views/myInteract.vue'),
+            meta: {}
         }
     ]
 });

src/styles/theme.less

@@ -0,0 +1 @@
+@dialog-confirm-button-text-color: #bf1616;

src/views/collections.vue

@@ -20,11 +20,24 @@
                 <div class="filter-row"></div>
             </div>
         </nav-bar>
+        <div style="height:49px;"></div>
         <div class="list">
             <van-swipe-cell>
-                <img src="https://jxjmrh.oss-cn-hangzhou.aliyuncs.com/image/2021-01-13-10-45-33OJgpJjKU.png" />
+                <div class="list-item">
+                    <img
+                        class="cover"
+                        src="https://jxjmrh.oss-cn-hangzhou.aliyuncs.com/image/2021-01-05-18-52-55JaQkFqst.png"
+                    />
+                    <div class="info">
+                        <div class="name">TAS系列回馈式交流精密电子回馈式交流精密电子</div>
+                        <div class="desc">新能源汽车一体化集成动力系统相关高速油冷电机及其控制器产品</div>
+                    </div>
+                </div>
                 <template #right>
-                    <van-button square text="删除" type="danger" class="delete-button" />
+                    <div class="btn-cancel">
+                        <img src="../assets/icon_collect.png" />
+                        取消收藏
+                    </div>
                 </template>
             </van-swipe-cell>
         </div>
@@ -49,4 +62,66 @@ export default {
 /deep/ .van-tab--active .van-tab__text {
     transform: scale(1.28);
 }
+.list-item {
+    .flex();
+    background: white;
+    border-radius: 4px;
+    overflow: hidden;
+    align-items: flex-start;
+    padding: 5px 16px;
+    &:active {
+        background: shade(#ffffff, 5%);
+    }
+    &:last-child {
+        margin-bottom: calc(var(--safe-bottom) + 16px);
+    }
+    .cover {
+        width: 110px;
+        height: 110px;
+        object-fit: cover;
+        min-width: 110px;
+    }
+    .info {
+        flex-basis: 0;
+        flex-grow: 1;
+        .flex-col();
+        padding-left: 10px;
+        padding-top: 10px;
+        .name {
+            font-size: 16px;
+            color: black;
+            line-height: 26px;
+            .ellipsisLn(2);
+        }
+        .desc {
+            font-size: 12px;
+            color: @text3;
+            line-height: 22px;
+            .ellipsisLn(2);
+            margin-top: 4px;
+            .money {
+                color: @prim;
+                margin-left: 8px;
+            }
+        }
+    }
+}
+
+.btn-cancel {
+    width: 70px;
+    height: 100%;
+    .flex-col();
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 13px;
+    background: @prim;
+    &:active {
+        background: shade(@prim, 20%);
+    }
+    img {
+        width: 24px;
+        height: 24px;
+    }
+}
 </style>

src/views/index/interact.vue

@@ -84,6 +84,16 @@ export default {
                 this.navTheme = 'light';
                 this.navTransparent = true;
             }
+
+            const el = e.target;
+            if (
+                el.scrollHeight - el.parentElement.getBoundingClientRect().height - el.scrollTop < 20 &&
+                el.scrollTop > el.lastScrollTop
+            ) {
+                console.log('reachBottom');
+                this.$bus.emit('reachBottom');
+            }
+            el.lastScrollTop = el.scrollTop;
         },
         changeTab(i) {
             this.tab = i;

src/views/index/my.vue

@@ -17,11 +17,11 @@
                 <div class="text">我的收藏</div>
                 <img src="../../assets/icon_into.png" class="into" />
             </router-link>
-            <div class="item">
+            <router-link to="/myInteract" class="item">
                 <img src="../../assets/my_menu_icon_2.png" class="icon" />
                 <div class="text">我的互动</div>
                 <img src="../../assets/icon_into.png" class="into" />
-            </div>
+            </router-link>
             <div class="item">
                 <img src="../../assets/my_menu_icon_3.png" class="icon" />
                 <div class="text">资料编辑</div>

src/views/interact/createInteract.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="create-interact">
         <nav-bar :title="title" @click-left="$router.go(-1)">
-            <div slot="right" class="nav-bar-right">提交</div>
+            <div slot="right" class="nav-bar-right" @click="submit">提交</div>
         </nav-bar>
         <div class="title">
             <input placeholder="输入标题内容，30字以内" maxlength="30" v-model="form.title" />
@@ -14,7 +14,7 @@
         </div>
         <div class="switch-wrapper" v-if="type === 'official'">
             <div class="label">是否公开</div>
-            <van-switch v-model="pub" active-color="#BF1616" />
+            <van-switch v-model="form.publicPost" active-color="#BF1616" />
         </div>
     </div>
 </template>
@@ -23,7 +23,7 @@ export default {
     data() {
         return {
             type: '',
-            form: { title: '', content: '' },
+            form: { title: '', content: '', publicPost: true },
             fileList: [],
             pub: false
         };
@@ -43,6 +43,18 @@ export default {
                 default:
                     return '';
             }
+        },
+        postType() {
+            switch (this.type) {
+                case 'official':
+                    return 'OFFICIAL';
+                case 'forum':
+                    return 'TOPIC';
+                case 'qa':
+                    return 'QA';
+                default:
+                    return '';
+            }
         }
     },
     methods: {
@@ -64,6 +76,33 @@ export default {
                     file.status = 'failed';
                     file.message = '上传失败';
                 });
+        },
+        submit() {
+            if (!this.form.title) {
+                this.$toast('请输入标题');
+                return;
+            }
+            if (!this.form.content) {
+                this.$toast('请输入内容');
+                return;
+            }
+            if (this.type !== 'official') {
+                this.form.publicPost = true;
+            }
+            this.$toast.loading('提交中');
+            this.$http
+                .post(
+                    '/post/create',
+                    { ...this.form, type: this.postType, pics: this.fileList.map(i => i.url).filter(i => !!i) },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.$toast.success('提交成功');
+                    this.$router.go(-1);
+                })
+                .catch(e => {
+                    this.$toast(e.error || '提交失败，请稍后再试');
+                });
         }
     }
 };

src/views/interact/forum.vue

@@ -2,31 +2,38 @@
     <div>
         <div
             class="item"
-            v-for="(n, index) in 20"
-            :key="index"
-            @click="$router.push({ name: 'forumDetail', query: { type: 'forum' } })"
+            v-for="item in list"
+            :key="item.id"
+            @click="$router.push({ name: 'forumDetail', query: { type: 'forum', id: item.id } })"
         >
             <div class="title">
                 <div class="tag hot"></div>
                 <div class="txt">
-                    #普及急救知识，避免错过黄金抢救时间##普及急救知识，避免错过黄金抢救时间##普及急救知识，避免错过黄金抢救时间#
+                    {{ item.title }}
                 </div>
             </div>
             <div class="content">
-                有些急症只有几分钟的黄金抢救时间，若等120专业急救人员来到现场处置，就可能错过生机。我所居住城市的急救中心每年也会为市民无偿进行几期…
+                {{ item.content }}
             </div>
             <div class="opt">
                 <div class="opt-item">
                     <img class="icon" src="../../assets/interact_icon_hot.png" />
-                    2348
+                    {{ item.viewNum }}
                 </div>
                 <div class="opt-item">
                     <img class="icon" src="../../assets/interact_icon_comment.png" />
-                    2348
+                    {{ item.commentNum }}
                 </div>
-                <div class="opt-item">
-                    <img class="icon" src="../../assets/interact_icon_like.png" />
-                    2348
+                <div class="opt-item" @click.stop="like(item)">
+                    <img
+                        class="icon"
+                        :src="
+                            item.liked
+                                ? require('../../assets/interact_icon_like_pre.png')
+                                : require('../../assets/interact_icon_like.png')
+                        "
+                    />
+                    {{ item.likeNum }}
                 </div>
             </div>
         </div>
@@ -38,13 +45,67 @@
 <script>
 export default {
     data() {
-        return {};
+        return {
+            showCall: false,
+            page: 0,
+            last: false,
+            loading: false,
+            list: []
+        };
+    },
+    created() {
+        this.getData();
+        this.$bus.on('reachBottom', this.loadmore);
+    },
+    beforeDestroy() {
+        this.$bus.off('reachBottom', this.loadmore);
     },
     methods: {
         create() {
             this.$parent.showNoticeDialog().then(() => {
                 this.$router.push({ name: 'createInteract', query: { type: 'forum' } });
             });
+        },
+        getData() {
+            this.loading = true;
+            this.$http
+                .get('/post/allDTO', {
+                    page: this.page,
+                    query: {
+                        type: 'TOPIC'
+                    },
+                    sort: 'createdAt,desc'
+                })
+                .then(res => {
+                    if (res.first) {
+                        this.list = [];
+                    }
+                    this.list = this.list.concat(res.content);
+                    this.last = res.last;
+                    this.loading = false;
+                })
+                .catch(e => {
+                    this.loading = false;
+                });
+        },
+        loadmore() {
+            if (this.loading || this.last) {
+                return;
+            }
+            this.page++;
+            this.getData();
+        },
+        like(item) {
+            if (this.checkLogin()) {
+                if (item.liked) {
+                    this.$set(item, 'liked', false);
+                    this.$set(item, 'likeNum', Math.max(item.likeNum - 1));
+                } else {
+                    this.$set(item, 'liked', true);
+                    this.$set(item, 'likeNum', item.likeNum + 1);
+                }
+                this.$http.get('/post/like', { postId: item.id, dislike: false });
+            }
         }
     }
 };

src/views/interact/forumDetail.vue

@@ -1,41 +1,27 @@
 <template>
     <div class="form-detail-root">
         <nav-bar title="问答详情" right-icon="share" @click-left="$router.go(-1)"></nav-bar>
-        <div class="forum-title">人类未来如何逆转全球变暖？</div>
+        <div class="forum-title">{{ post.title }}</div>
         <div class="forum-content">
-            近些年来，在曾经寒冷的北极圈最低气温零下71摄氏度，已经成为了历史，现在最低50到60摄氏度，在西伯利亚局部地区的夏天气温甚至达到了惊人的38摄氏度，这相当于低纬度的温带气候。
+            {{ post.content }}
         </div>
         <div class="info">
-            <van-image
-                class="avatar"
-                src="https://img01.yzcdn.cn/vant/cat.jpeg"
-                width="24"
-                height="24"
-                fit="cover"
-                round
-            />
-            <div class="name">张先生</div>
-            <div class="time">2021-01-16创建</div>
+            <van-image class="avatar" :src="post.avatar" width="24" height="24" fit="cover" round />
+            <div class="name">{{ post.nickname }}</div>
+            <div class="time">{{ toDate(post.createdAt) }}&nbsp;创建</div>
         </div>
         <div class="reply-title">
             <img src="../../assets/interact_icon_comment_title.png" />
-            热议回复（256）
+            {{ type === 'forum' ? '热议回复' : '问题答复' }}（{{ comments.length }}）
         </div>
-        <div class="comment" v-for="n in 10" :key="n">
+        <div class="comment" v-for="item in comments" :key="item.id">
             <div class="comment-title">
-                <van-image
-                    class="avatar"
-                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
-                    width="24"
-                    height="24"
-                    fit="cover"
-                    round
-                />
-                <div class="name">晋思宁</div>
+                <van-image class="avatar" :src="item.avatar" width="24" height="24" fit="cover" round />
+                <div class="name">{{ item.nickname }}</div>
             </div>
             <div class="content">
                 <div class="txt">
-                    地球气候变化已经成为了人类健康发展、以及未来生存最大的障碍，除了大气污染、空气中颗粒物超标以外，最严重的问题当属二氧化碳、甲烷等一些温室气体对全球气温的影响。
+                    {{ item.content }}
                 </div>
                 <div class="pics" preview-group>
                     <van-image
@@ -45,25 +31,37 @@
                         height="60"
                         fit="cover"
                         radius="4"
-                        v-for="(item, i) in images"
+                        v-for="(item, i) in item.pics || []"
                         :key="i"
                     />
                 </div>
             </div>
             <div class="opt">
-                <div class="time">2020-12-25</div>
-                <div class="btn" style="margi-right:24px">
-                    <img src="../../assets/interact_icon_like.png" />
-                    56
+                <div class="time">{{ item.createdAt }}</div>
+                <div class="btn" style="margi-right:24px" @click="like(item, false)">
+                    <img
+                        :src="
+                            item.liked
+                                ? require('../../assets/interact_icon_like_pre.png')
+                                : require('../../assets/interact_icon_like.png')
+                        "
+                    />
+                    {{ item.likeNum }}
                 </div>
-                <div class="btn">
-                    <img src="../../assets/interact_icon_dislike.png" />
-                    56
+                <div class="btn" @click="like(item, true)">
+                    <img
+                        :src="
+                            item.disliked
+                                ? require('../../assets/interact_icon_dislike_pre.png')
+                                : require('../../assets/interact_icon_dislike.png')
+                        "
+                    />
+                    {{ item.dislikeNum }}
                 </div>
             </div>
         </div>
         <div class="btn-wrapper">
-            <div class="btn-lg btn-comment" @click="showCommentDialog = true">
+            <div class="btn-lg btn-comment" @click="createComment">
                 <img src="../../assets/icon_edit.png" />{{ type === 'forum' ? '发表看法' : '回答' }}
             </div>
         </div>
@@ -72,9 +70,9 @@
             <div class="title">
                 {{ type === 'forum' ? '发表看法' : '回答' }}
                 <div class="btn btn-cancel" @click="showCommentDialog = false">取消</div>
-                <div class="btn btn-submit">提交</div>
+                <div class="btn btn-submit" @click="submit">提交</div>
             </div>
-            <textarea placeholder="输入您的回答"></textarea>
+            <textarea placeholder="输入您的回答" v-model="content" maxlength="255"></textarea>
             <div class="upload">
                 <van-uploader v-model="fileList" accept="image/*" multiple :after-read="afterRead" max-count="6" />
             </div>
@@ -97,16 +95,39 @@ export default {
                 'http://www.ikanins.com/wp-content/uploads/2021/02/www.ikanins.com-20210221-93p-12.jpg'
             ],
             showCommentDialog: false,
-            fileList: []
+            fileList: [],
+            content: '',
+            post: {
+                pics: []
+            },
+            comments: []
         };
     },
     created() {
         this.type = this.$route.query.type;
+        this.getData();
     },
     activated() {
         this.type = this.$route.query.type;
+        this.getData();
     },
     methods: {
+        getData() {
+            this.$http.get(`/post/getDTO/${this.$route.query.id}`).then(res => {
+                this.post = res;
+            });
+            this.$http
+                .get('/comment/allDTO', { size: 1000, query: { postId: this.$route.query.id }, sort: 'createdAt,desc' })
+                .then(res => {
+                    this.comments = res.content;
+                });
+        },
+        toDate(time) {
+            if (time) {
+                return time.split(' ')[0];
+            }
+            return '';
+        },
         afterRead(file) {
             console.log(file);
             file.status = 'uploading';
@@ -125,6 +146,69 @@ export default {
                     file.status = 'failed';
                     file.message = '上传失败';
                 });
+        },
+        createComment() {
+            if (this.checkLogin()) {
+                this.showCommentDialog = true;
+            }
+        },
+        submit() {
+            if (!this.content) {
+                this.$toast('请输入内容');
+                return;
+            }
+            this.$toast.loading('提交中');
+            this.$http
+                .post(
+                    '/comment/create',
+                    {
+                        postId: this.$route.query.id,
+                        content: this.content,
+                        pics: this.fileList.map(i => i.url).filter(i => !!i)
+                    },
+                    { body: 'json' }
+                )
+                .then(res => {
+                    this.$toast.success('提交成功');
+                    this.showCommentDialog = false;
+                    this.getData();
+                })
+                .catch(e => {
+                    this.$toast(e.error || '提交失败，请稍后再试');
+                });
+        },
+        like(item, dislike) {
+            console.log(item);
+            if (this.checkLogin()) {
+                if (dislike) {
+                    if (item.disliked) {
+                        this.$set(item, 'dislikeNum', Math.max(item.dislikeNum - 1, 0));
+                        this.$set(item, 'disliked', false);
+                    } else if (item.liked) {
+                        this.$set(item, 'likeNum', Math.max(item.likeNum - 1, 0));
+                        this.$set(item, 'liked', false);
+                        this.$set(item, 'dislikeNum', item.dislikeNum + 1);
+                        this.$set(item, 'disliked', true);
+                    } else {
+                        this.$set(item, 'dislikeNum', item.dislikeNum + 1);
+                        this.$set(item, 'disliked', true);
+                    }
+                } else {
+                    if (item.disliked) {
+                        this.$set(item, 'dislikeNum', Math.max(item.dislikeNum - 1, 0));
+                        this.$set(item, 'disliked', false);
+                        this.$set(item, 'likeNum', item.likeNum + 1);
+                        this.$set(item, 'liked', true);
+                    } else if (item.liked) {
+                        this.$set(item, 'likeNum', Math.max(item.likeNum - 1, 0));
+                        this.$set(item, 'liked', false);
+                    } else {
+                        this.$set(item, 'likeNum', item.likeNum + 1);
+                        this.$set(item, 'liked', true);
+                    }
+                }
+                this.$http.get('/comment/like', { commentId: item.id, dislike }).then(res => {});
+            }
         }
     }
 };

src/views/interact/official.vue

@@ -1,6 +1,11 @@
 <template>
     <div>
-        <div class="item" v-for="(n, index) in 20" :key="index" @click="$router.push({ name: 'officialDetail' })">
+        <div
+            class="item"
+            v-for="item in list"
+            :key="item.id"
+            @click="$router.push({ name: 'officialDetail', query: { id: item.id } })"
+        >
             <div class="title">
                 <van-image
                     class="avatar"
@@ -10,15 +15,13 @@
                     fit="cover"
                     round
                 />
-                <div class="txt">
-                    人类未来如何逆转全球变暖？人类未来如何逆转全球变暖？人类未来如何逆转全球变暖？人类未来如何逆转全球变暖？人类未来如何逆转全球变暖？人类未来如何逆转全球变暖？
-                </div>
+                <div class="txt">{{ item.title }}</div>
             </div>
             <div class="answer">
                 <img class="icon" src="../../assets/interact_icon_answer.png" />
                 <div class="content">
                     <div class="txt">
-                        地球气候变化已经成为了人类健康发展、以及未来生存最大的障碍，除了大气污染、空气中颗粒物超标以外，最严重的…
+                        {{ item.reply }}
                     </div>
                     <div class="btn-more">查看详情</div>
                 </div>
@@ -57,14 +60,54 @@
 export default {
     data() {
         return {
-            showCall: false
+            showCall: false,
+            page: 0,
+            last: false,
+            loading: false,
+            list: []
         };
     },
+    created() {
+        this.getData();
+        this.$bus.on('reachBottom', this.loadmore);
+    },
+    beforeDestroy() {
+        this.$bus.off('reachBottom', this.loadmore);
+    },
     methods: {
         create() {
             this.$parent.showNoticeDialog().then(() => {
                 this.$router.push({ name: 'createInteract', query: { type: 'official' } });
             });
+        },
+        getData() {
+            this.loading = true;
+            this.$http
+                .get('/post/allDTO', {
+                    page: this.page,
+                    query: {
+                        type: 'OFFICIAL'
+                    },
+                    sort: 'createdAt,desc'
+                })
+                .then(res => {
+                    if (res.first) {
+                        this.list = [];
+                    }
+                    this.list = this.list.concat(res.content);
+                    this.last = res.last;
+                    this.loading = false;
+                })
+                .catch(e => {
+                    this.loading = false;
+                });
+        },
+        loadmore() {
+            if (this.loading || this.last) {
+                return;
+            }
+            this.page++;
+            this.getData();
         }
     }
 };

src/views/interact/officialDetail.vue

@@ -1,29 +1,31 @@
 <template>
     <div>
         <nav-bar title="问答详情" right-icon="share" @click-left="$router.go(-1)"></nav-bar>
-        <div class="title">人类未来如何逆转全球变暖？</div>
+        <div class="title">{{ post.title }}</div>
         <div class="content">
-            近些年来，在曾经寒冷的北极圈最低气温零下71摄氏度，已经成为了历史，现在最低50到60摄氏度，在西伯利亚局部地区的夏天气温甚至达到了惊人的38摄氏度，这相当于低纬度的温带气候。
+            {{ post.content }}
         </div>
-        <div class="info">
+        <div class="pics" preview-group>
             <van-image
-                class="avatar"
-                src="https://img01.yzcdn.cn/vant/cat.jpeg"
-                width="24"
-                height="24"
+                class="pic"
+                :src="item"
+                width="60"
+                height="60"
                 fit="cover"
-                round
+                radius="4"
+                v-for="(item, i) in post.pics"
+                :key="i"
             />
-            <div class="name">张先生</div>
-            <div class="time">2021-01-16创建</div>
+        </div>
+        <div class="info">
+            <van-image class="avatar" :src="post.avatar" width="24" height="24" fit="cover" round />
+            <div class="name">{{ post.nickname }}</div>
+            <div class="time">{{ toDate(post.createdAt) }}&nbsp;创建</div>
         </div>
         <div class="reply-title"><img src="../../assets/icon_reply.png" />官方答复</div>
         <div class="answer">
             <img class="icon" src="../../assets/interact_icon_answer.png" />
-            <div class="answer-content">
-                地球气候变化已经成为了人类健康发展、以及未来生存最大的障碍，除了大气污染、空气中颗粒物超标以外，最严重的问题当属二氧化碳、甲烷等一些温室气体对全球气温的影响。
-                现在地球大气中二氧化碳的含量超过了410ppm，这相当于0.04%，可是在工业时代之前二氧化碳的含量只有280ppm，可以看出由于人类的活动，对地球大气成分的影响速度有多快。这就是为什么在全球范围内，人类现在在控制碳排放，提倡节能减排，加大新能源的开发和应用，淘汰落后污染严重的产能，极力地减缓气候变化所带来的影响，但这已经不能扭转地球气候变化的局势了；这就是为什么在全球范围内，人类现在在控制碳排放，提倡节能减排，加大新能源的开发和应用，淘汰落后污染严重的产能，极力地减缓气候变化所带来的影响，但这已经不能扭转地球气候变化的局势了；这就是为什么在全球范围内，人类现在在控制碳排放，提倡节能减排，加大新能源的开发和应用，淘汰落后污染严重的产能，极力地减缓气候变化所带来的影响，但这已经不能扭转地球气候变化的局势了；这就是为什么在全球范围内，人类现在在控制碳排放，提倡节能减排，加大新能源的开发和应用，淘汰落后污染严重的产能，极力地减缓气候变化所带来的影响，但这已经不能扭转地球气候变化的局势了；
-            </div>
+            <div class="answer-content">{{ (comments[0] || {}).content }}</div>
         </div>
     </div>
 </template>
@@ -31,7 +33,35 @@
 export default {
     name: 'officialDetail',
     data() {
-        return {};
+        return {
+            images: [
+                'http://www.ikanins.com/wp-content/uploads/2021/02/www.ikanins.com-20210221-93p-77.jpg',
+                'http://www.ikanins.com/wp-content/uploads/2021/02/www.ikanins.com-20210221-93p-2.jpg',
+                'http://www.ikanins.com/wp-content/uploads/2021/02/www.ikanins.com-20210221-93p-5.jpg',
+                'http://www.ikanins.com/wp-content/uploads/2021/02/www.ikanins.com-20210221-93p-9.jpg',
+                'http://www.ikanins.com/wp-content/uploads/2021/02/www.ikanins.com-20210221-93p-12.jpg'
+            ],
+            post: {
+                pics: []
+            },
+            comments: []
+        };
+    },
+    created() {
+        this.$http.get(`/post/getDTO/${this.$route.query.id}`).then(res => {
+            this.post = res;
+        });
+        this.$http.get('/comment/allDTO', { query: { postId: this.$route.query.id } }).then(res => {
+            this.comments = res.content;
+        });
+    },
+    methods: {
+        toDate(time) {
+            if (time) {
+                return time.split(' ')[0];
+            }
+            return '';
+        }
     }
 };
 </script>
@@ -47,6 +77,14 @@ export default {
     font-size: 14px;
     color: black;
 }
+.pics {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 16px 0 16px;
+    .pic {
+        margin: 12px 10px 0 0;
+    }
+}
 .info {
     .flex();
     padding: 10px 16px 20px 16px;

src/views/interact/qa.vue

@@ -2,23 +2,16 @@
     <div>
         <div
             class="item"
-            v-for="(item, index) in 20"
-            :key="index"
-            @click="$router.push({ name: 'forumDetail', query: { type: 'qa' } })"
+            v-for="item in list"
+            :key="item.id"
+            @click="$router.push({ name: 'forumDetail', query: { type: 'qa', id: item.id } })"
         >
-            <div class="title">人类未来如何逆转全球变暖？人类未来如何逆转全球变暖？人类未来如何逆转全球变暖？</div>
+            <div class="title">{{ item.title }}</div>
             <div class="info">
-                <van-image
-                    class="avatar"
-                    src="https://img01.yzcdn.cn/vant/cat.jpeg"
-                    width="20"
-                    height="20"
-                    fit="cover"
-                    round
-                />
-                <div class="name">Stella Simpson</div>
-                <div class="time">5分钟前</div>
-                <div class="num">5 回答</div>
+                <van-image class="avatar" :src="item.avatar" width="20" height="20" fit="cover" round />
+                <div class="name">{{ item.nickname }}</div>
+                <div class="time">{{ item.createdAt }}</div>
+                <div class="num">{{ item.commentNum }} 回答</div>
             </div>
         </div>
         <div class="btn-fixed btn-edit" @click="create">
@@ -29,13 +22,55 @@
 <script>
 export default {
     data() {
-        return {};
+        return {
+            showCall: false,
+            page: 0,
+            last: false,
+            loading: false,
+            list: []
+        };
+    },
+    created() {
+        this.getData();
+        this.$bus.on('reachBottom', this.loadmore);
+    },
+    beforeDestroy() {
+        this.$bus.off('reachBottom', this.loadmore);
     },
     methods: {
         create() {
             this.$parent.showNoticeDialog().then(() => {
                 this.$router.push({ name: 'createInteract', query: { type: 'qa' } });
             });
+        },
+        getData() {
+            this.loading = true;
+            this.$http
+                .get('/post/allDTO', {
+                    page: this.page,
+                    query: {
+                        type: 'QA'
+                    },
+                    sort: 'createdAt,desc'
+                })
+                .then(res => {
+                    if (res.first) {
+                        this.list = [];
+                    }
+                    this.list = this.list.concat(res.content);
+                    this.last = res.last;
+                    this.loading = false;
+                })
+                .catch(e => {
+                    this.loading = false;
+                });
+        },
+        loadmore() {
+            if (this.loading || this.last) {
+                return;
+            }
+            this.page++;
+            this.getData();
         }
     }
 };

src/views/leaveMessage.vue

@@ -0,0 +1,126 @@
+<template>
+    <div style="display:flex;flex-direction:column;">
+        <nav-bar title="对接留言" @click-left="$router.go(-1)"> </nav-bar>
+        <div class="info">
+            <div class="row">
+                <img src="../assets/icon_org_gray.png" class="icon" />
+                <div class="txt">阿里巴巴股份有限公司</div>
+            </div>
+            <div class="row" style="margin-top:10px">
+                <img src="../assets/icon_user_gray.png" class="icon" />
+                <div class="txt">夏秋雨 15686868686</div>
+            </div>
+            <div class="btn" @click="$router.push({ name: 'profile' })">编辑<img src="../assets/icon_into.png" /></div>
+        </div>
+        <div class="title">对接描述</div>
+        <div class="content">
+            <textarea v-model="content" placeholder="详细描述您的问题…" maxlength="255"></textarea>
+        </div>
+        <div class="btn-wrapper">
+            <div class="btn-lg" @click="submit">提交</div>
+        </div>
+        <van-dialog v-model="showDialog" show-cancel-button class="dialog-submit">
+            <img src="../assets/img_submit.png" />
+            <div class="msg">已提交留言信息，请等待企业回复</div>
+        </van-dialog>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            content: '',
+            showDialog: true
+        };
+    },
+    methods: {
+        submit() {
+            if (!this.content) {
+                this.$toast('请输入内容');
+                return;
+            }
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+.info {
+    background: @bg;
+    border-radius: 4px;
+    margin: 16px 16px 0 16px;
+    padding: 16px 75px 16px 13px;
+    .flex-col();
+    position: relative;
+    .row {
+        .flex();
+        font-size: 14px;
+        .icon {
+            width: 24px;
+            height: 24px;
+            margin-right: 10px;
+        }
+    }
+    .btn {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 13px;
+        margin: auto;
+        .flex();
+        font-size: 14px;
+        color: @text4;
+        img {
+            width: 24px;
+            height: 24px;
+        }
+    }
+}
+.title {
+    padding: 20px 16px 10px 16px;
+    position: relative;
+    font-size: 14px;
+    color: black;
+    font-weight: bold;
+    &::after {
+        .setBottomLine();
+        left: 16px;
+        right: 16px;
+    }
+}
+.content {
+    padding: 16px;
+    font-size: 16px;
+    flex-grow: 1;
+    line-height: 26px;
+    textarea {
+        border: none;
+        width: 100%;
+        height: 100%;
+        resize: none;
+        padding: 0;
+        margin: 0;
+        &::-webkit-input-placeholder {
+            color: @text4;
+        }
+    }
+}
+.btn-wrapper {
+    .flex();
+    justify-content: center;
+    padding: 10px 0 calc(6px + var(--safe-bottom)) 0;
+    background: white;
+}
+.dialog-submit {
+    img {
+        width: 100%;
+        height: auto;
+    }
+    .msg {
+        font-size: 16px;
+        font-weight: bold;
+        color: black;
+        padding: 30px 14px;
+        text-align: center;
+    }
+}
+</style>

src/views/myInteract.vue

@@ -0,0 +1,42 @@
+<template>
+    <div>
+        <nav-bar @click-left="$router.go(-1)">
+            <div class="tabs" slot="title">
+                <div class="tab-item" :class="{ active: tab === 0 }" @click="tab = 0">官答</div>
+                <div class="tab-item" :class="{ active: tab === 1 }" @click="tab = 1">热议</div>
+                <div class="tab-item" :class="{ active: tab === 2 }" @click="tab = 2">互动</div>
+            </div>
+        </nav-bar>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            tab: 0
+        };
+    },
+    methods: {}
+};
+</script>
+<style lang="less" scoped>
+.tabs {
+    .flex();
+    padding: 0 68px;
+    width: 100%;
+    .tab-item {
+        flex-basis: 0;
+        flex-grow: 1;
+        .flex();
+        justify-content: center;
+        color: @text3;
+        font-size: 16px;
+        transition: all 0.2s;
+        &.active {
+            font-size: 20px;
+            color: @prim;
+            font-weight: bold;
+        }
+    }
+}
+</style>

src/views/profile.vue

@@ -0,0 +1,139 @@
+<template>
+    <div>
+        <nav-bar
+            :title="navTitle"
+            :transparent="navTransparent"
+            :theme="navTheme"
+            :placeholder="false"
+            @click-left="$router.go(-1)"
+        ></nav-bar>
+        <img src="../assets/bg_profile.png" class="bg-head" />
+        <div class="page-title" style="margin-top:20px;">基本信息</div>
+        <div class="cell">
+            <div class="label">公司名称</div>
+            <input v-model="orgName" class="value" placeholder="请输入公司名称" />
+        </div>
+        <div class="cell">
+            <div class="label">职业</div>
+            <input v-model="occupation" class="value" placeholder="请输入您的职业" />
+        </div>
+        <div class="cell">
+            <div class="label">电话</div>
+            <input v-model="phone" class="value" placeholder="请输入您的电话" />
+        </div>
+        <div class="cell">
+            <div class="label">邮箱</div>
+            <input v-model="email" class="value" placeholder="请输入您的邮箱地址" />
+        </div>
+        <div class="page-title" style="margin-top:30px;">实名认证</div>
+        <div class="cell">
+            <div class="label">姓名</div>
+            <input v-model="realName" class="value" placeholder="请输入您的真实名字" />
+        </div>
+        <div class="cell">
+            <div class="label">证件类型</div>
+            <input class="value" disabled placeholder="身份证" />
+            <img src="../assets/icon_into.png" class="into" />
+        </div>
+        <div class="cell">
+            <div class="label">证件编号</div>
+            <input v-model="idNo" class="value" placeholder="请输入您的证件号" />
+        </div>
+        <div style="height:calc(66px + var(--safe-bottom))"></div>
+        <div class="btn-wrapper">
+            <div class="btn-lg btn-save">确认</div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            navTransparent: true,
+            navTitle: '',
+            navTheme: 'light',
+            orgName: '',
+            occupation: '',
+            phone: '',
+            email: '',
+            realName: '',
+            idNo: ''
+        };
+    }
+};
+</script>
+<style lang="less" scoped>
+.bg-head {
+    width: 100%;
+    height: auto;
+}
+.page-title {
+    font-size: 18px;
+    line-height: 28px;
+    font-weight: bold;
+    color: black;
+    position: relative;
+    padding-left: 16px;
+    &::before {
+        content: '';
+        position: absolute;
+        left: 10px;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        width: 2px;
+        height: 16px;
+        background: @prim;
+        border-radius: 1px;
+    }
+}
+.cell {
+    height: 68px;
+    .flex();
+    padding: 0 16px;
+    position: relative;
+    &::after {
+        .setBottomLine();
+        left: 16px;
+        right: 16px;
+    }
+    .label {
+        font-size: 14px;
+        font-weight: bold;
+        color: black;
+    }
+    .value {
+        font-size: 15px;
+        color: black;
+        flex-grow: 1;
+        margin-left: 10px;
+        margin-right: 24px;
+        text-align: right;
+        &::-webkit-input-placeholder {
+            color: @text4;
+        }
+    }
+    .into {
+        position: absolute;
+        right: 10px;
+        top: 0;
+        bottom: 0;
+        width: 24px;
+        height: 24px;
+        margin: auto;
+    }
+}
+.btn-wrapper {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    .flex();
+    justify-content: center;
+    padding: 10px 0 calc(6px + var(--safe-bottom)) 0;
+    background: white;
+    box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.04);
+    .btn-save {
+    }
+}
+</style>

src/views/snd/sndDetail.vue

@@ -48,7 +48,7 @@
                     <img src="../../assets/icon_collect.png" class="icon" />
                     <div class="txt">收藏</div>
                 </div>
-                <div class="btn-msg">
+                <div class="btn-msg" @click="contact">
                     <img src="../../assets/icon_msg.png" class="icon" />
                     联系对接
                 </div>
@@ -145,6 +145,18 @@ export default {
             }
             return properties;
         }
+    },
+    methods: {
+        contact() {
+            if (this.checkLogin()) {
+                this.$router.push({
+                    name: 'leaveMessage',
+                    query: {
+                        id: this.$route.query.id
+                    }
+                });
+            }
+        }
     }
 };
 </script>

yarn.lock

@@ -8547,6 +8547,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-bus@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/vue-bus/-/vue-bus-1.2.1.tgz#50577b0b73fc1af9cda8a475fef2f7f0fdad7045"
+  integrity sha512-uCSJEWFWoDZz+GV/Pj/wXAC7WVBLD18V62l+2ezd4UCsZWZB27Hz3K0M9WUcbNum/yKBoN+OkOCIrU6A9xqWhw==
+
 vue-class-component@^6.0.0, vue-class-component@^6.1.0:
   version "6.3.2"
   resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-6.3.2.tgz#e6037e84d1df2af3bde4f455e50ca1b9eec02be6"