xiaojincai
/
yrxinterview


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/axios.min.js"></script>
    <script src="js/vue.js"></script>
</head>
<style>
    .search_left {
        width: calc(25% - 20px);
    }

    .search_left .list li {
        width: 100%;
        line-height: 30px;
    }

    .part {
        border-radius: 5px;
    }

    .search input {
        width: 200px;
        height: 32px;
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 0 10px;
        margin-bottom: 15px;
        outline: none;
        text-align: center;
    }
    .search{
        position: relative;
        width: 200px;
        margin: 0 auto;
    }
    .search img{
        position: absolute;
        right: 5px;
        top: 5px;
        cursor: pointer;
    }
    .detail_right {
        width: 75%;
    }

    .tag {
        margin-top: 10px;
        /* padding-left: 20px; */
    }

    .tag span {
        background-color: #A9ABAD20;
        color: #666;
        display: inline-block;
        width: 60px;
        line-height: 25px;
        margin-right: 10px;
        font-size: 14px;
        border-radius: 10px;
        text-align: center;
    }

    .tag a {
        color: #333;
        float: right;
    }

    .discuss {
        text-align: center;
        background-color: #f5f5f5;
        padding: 40px 20px;
        border: 1px solid #ccc;
    }

    .answer {
        padding: 20px;
        line-height: 26px;
        text-align: left;
    }

    .detail_right button {
        width: 150px;
        height: 40px;
        border: none;
        background-color: #000;
        color: #fff;
        font-weight: 600;
        border-radius: 3px;
        outline: none;
    }

    .user {
        margin-bottom: 10px;
        color: #999;
        font-size: 13px;
    }

    .ans {
        line-height: 25px;
        margin-bottom: 10px;
        color: #333;
    }

    .login_div {
        height: 300px;
        background-image: linear-gradient(90deg, #0B0B0A, #E1CAA0);
        text-align: center;
        padding-top: 140px;
        border-radius: 10px;
    }
    #list li{
        line-height: 30px;
        padding: 10px 0;
        font-size: 14px;
        border-bottom: 1px solid #BBBBBB20;
    }
    #list li a{
        color: #0065D7;
        display: flex;
    }
    .part{
        padding: 25px;
    }
</style>

<body>
    <section id="app">
        <header>
            <div class="left_nav">
                <img @click="show=!show" class="phone" width="30" src="img/menu.png" alt="">
                <img class="logo" src="img/logo.png" alt="logo">
            </div>
            <div class="nav">
                <a class="act" href="/index.html">主页</a>
                <a href="">爬虫比赛</a>
                <a href="">关于猿人学</a>
            </div>
            <div class="login">
                <div class="pc">
                    <!-- <img width="30px" src="img/logo.jpg" alt="logo"> -->
                    <div v-if="userInfo" class="menu">
                        {{userInfo.name}}
                        <ul>
                            <li><a href="/record.html">我的刷题记录</a></li>
                            <li @click="logout"><a>退出登录</a></li>
                        </ul>
                    </div>
                    <a v-else href="/login.html">请先登录</a>
                </div>
                <div class="phone">
                    <span v-if="userInfo">{{userInfo.name}}</span>
                    <a v-else href="/login.html">请先登录</a>
                </div>
            </div>
      
        </header>
        <transition name="slide">
            <div class="slide" v-if="show">
                <a class="act" href="/index.html">猿人学面试</a>
                <a href="">爬虫比赛</a>
                <a href="">关于猿人学</a>
                <a v-if="userInfo" href="/record.html">我的刷题记录</a>
                <a v-if="userInfo" @click="logout">退出登录</a>
            </div>
        </transition>
        <div class="content">
            <p class="navtation"><a href="/index.html">回到首页</a> - <a :href="'/list.html?cat='+param.category">
                    <span v-if="detail.category=='crawler'">爬虫</span>
                    <span v-else-if="detail.category=='js'">JS</span>
                    <span v-else>安卓</span>面试题</a> - {{detail.name}}</p>
            <div class="left search_left pc">
                <div class="part">
                    <p class="search">
                        <img @click="search" width="20" src="img/search.png" alt="">
                        <input  type="text" v-model="searchKeyword" @input="search" placeholder="题目搜索">
                    </p>
                    <ol class="list" id="list">
                        <li v-for="(item,i) in list" :key="item.interviewId" v-show="i<10">
                            <a
                                :href="'/detail.html?cat='+param.category+'&id='+item.interviewId">
                                <span>{{i+1}}、</span>{{item.name}}</a>
                        </li>
                    </ol>
                </div>
                <div class="part">
                    <h2 class="sec_title"><span>贡献面试题</span></h2>
                    <form class="form">
                        <input v-model="name" type="text" placeholder="面试题目">
                        <textarea v-model="content"></textarea>
                        <button type="button" @click="post">提交</button>
                    </form>
                </div>
            </div>
            <div class="right detail_right">
                <div class="part">
                    <b style="font-size: 28px;color: #000;">{{detail.name}}</b>
                    <p class="tag">
                        <span>{{detail.category}}</span>
                        <a href="">分享给朋友</a>
                    </p>
                </div>
                <div class="part">
                    <h2 class="sec_title"><span>答题讨论</span></h2>
                    <div class="discuss answer" v-if="userInfo">
                        {{detail.content}}
                    </div>
                    <div class="discuss" v-else>
                        <button @click="login">请登录</button>
                    </div>
                </div>
                <div class="part">
                    <h2 class="sec_title"><span>网友热议</span></h2>
                    <template v-for="(item,index) in comment">
                        <template v-if="index == 0">
                            <p class="user">
                                {{item.cname}} {{item.ctime}}
                            </p>
                            <p class="ans">
                                {{item.content}}
                            </p>
                        </template>
                        <template v-else-if="index > 0 && userInfo">
                            <p class="user">
                                {{item.cname}} {{item.ctime}}
                            </p>
                            <p class="ans">
                                {{item.content}}
                            </p>
                        </template>
                    </template>
                    <div class="login_div" v-if="!userInfo">
                        <button @click="login">登录后查看全部</button>
                    </div>
                    <div class="comment" v-if="userInfo">
                        <textarea v-model="form.content" placeholder="留下你的想法..."></textarea>
                        <button style="width: 100px;" @click="sendComment">提交评论</button>
                    </div>
                </div>
            </div>
            <div class="left search_left phone">
                <div class="part">
                    <p class="search">
                        <img @click="search" width="20" src="img/search.png" alt="">
                        <input  type="text" v-model="searchKeyword" @input="search" placeholder="题目搜索">
                    </p>
                    <ol class="list" id="list">
                        <li v-for="(item,i) in list" :key="item.interviewId" v-show="i<10">
                            <a
                                :href="'/detail.html?cat='+param.category+'&id='+item.interviewId">
                                <span>{{i+1}}、</span>{{item.name}}</a>
                        </li>
                    </ol>
                </div>
                <div class="part">
                    <h2 class="sec_title"><span>贡献面试题</span></h2>
                    <form class="form">
                        <input v-model="name" type="text" placeholder="面试题目">
                        <textarea v-model="content"></textarea>
                        <button type="button" @click="post">提交</button>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <script src="js/public.js"></script>
    <script>
        const { createApp } = Vue;
        createApp({
            data() {
                return {
                    name: '',
                    content: '',
                    userInfo: {},
                    id: '',
                    detail: {},
                    comment: [],
                    form: {
                        content: '',
                        interviewName: '',
                        interviewId: ''
                    },
                    searchKeyword: '', // 添加 searchKeyword 变量
                    list: [], // 添加 list 变量用于存储题目列表
                    show: 0, // 添加 show 变量,
                    param: {
                        page: 1,
                        page_size: 10
                    }
                }
            },
            created() {
                this.id = new URLSearchParams(window.location.search).get('id') || '';
                this.param.category = new URLSearchParams(window.location.search).get('cat') || 'js';
                // 获取本地存储的用户ID并赋值给cid
                const userInfo = JSON.parse(localStorage.getItem('userInfo'));
                this.userInfo = userInfo;
                this.getData();
                this.getComment();
            },
            methods: {
                login() {
                    window.location.href = '/login.html';
                },
                getData() {
                    // 列表
                    axios.get(url + '/api/yrx/que/info?interviewId=' + this.id).then(res => {
                        if (res.data.code === 0) {
                            this.detail = res.data.data;
                            this.form.interviewId = this.detail.interviewId;
                            this.form.interviewName = this.detail.name;
                        }
                    });
                    // 获取题目列表
                    axios.get(url + '/api/yrx/que/list', { params: this.param }).then(res => {
                        if (res.data.code === 0) {
                            this.list = res.data.data.list;
                        }
                    });
                },
                getComment() {
                    axios.get(url + '/api/yrx/que/comments/list?interviewId=' + this.id).then(res => {
                        if (res.data.code === 0) {
                            this.comment = res.data.data.list;
                        }
                    });
                },
                sendComment() {
                    if (!this.form.content) {
                        alert('评论内容不能为空');
                        return;
                    }
                    const token = localStorage.getItem('token'); // 获取token
                    axios.post(url + '/api/yrx/que/comments', this.form, {
                        headers: {
                            'Authorization': `${token}` // 添加token到header
                        }
                    })
                        .then(res => {
                            if (res.data.code === 0) {
                                alert('评论成功');
                                this.form.content = '';
                                this.getComment();
                            }
                        })
                        .catch(err => {
                            alert('评论失败，请重试');
                            console.error(err);
                        });
                },
                post() { // 添加post方法
                    const token = localStorage.getItem('token'); // 获取token
                    if (!token) {
                        window.location.href = "/login.html";
                        return;
                    }
                    if (!this.name || !this.content) {
                        alert('面试题目和内容不能为空');
                        return;
                    }
                    axios.post(url + '/api/yrx/que/user/post', { name: this.name, content: this.content }, {
                        headers: {
                            'Authorization': `${token}` // 添加token到header
                        }
                    })
                        .then(res => {
                            if (res.data.code === 0) {
                                alert('提交成功');
                                this.name = '';
                                this.content = '';
                            }
                        })
                        .catch(err => {
                            alert('提交失败，请重试');
                            console.error(err);
                        });
                },
                search() { // 添加 search 方法
                    axios.get(url + '/api/yrx/que/list', {
                        params: {
                            name: this.searchKeyword,
                            category: this.detail.category,
                            page: 1,
                            page_size: 1000
                        }
                    })
                        .then(res => {
                            if (res.data.code === 0) {
                                this.list = res.data.data.list;
                            }
                        })
                },
                logout() { // 添加 logout 方法
                    localStorage.removeItem('userInfo');
                    localStorage.removeItem('token');
                    this.userInfo = null;
                }
            }
        }).mount('#app');
    </script>
</body>

</html>