xiaojincai
/
yrxinterview


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
							<!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: 30%;
    }
    .search_left .list li{
        width: 100%;
    }
    .part{
        border-radius: 5px;
    }
    .search input{
        width: 100%;
        height: 30px;
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 0 10px;
        margin-bottom: 15px;
        outline: none;
        text-align: center;
    }
    .detail_right{
        width: 69%;
    }
    .tag{
        margin-top: 10px;
        /* padding-left: 20px; */
    }
    .tag span{
        background-color: #000;
        color: #fff;
        display: inline-block;
        padding: 2px 5px;
        margin-right: 10px;
        font-size: 12px;
        border-radius: 2px;
    }
    .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;
    }
</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.jpg" 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">
            <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">
            <div class="part">
                <p class="search">
                    <input type="text" v-model="searchKeyword" @input="search" placeholder="题目搜索">
                </p>
                <ul class="list">
                    <li v-for="item in list" :key="item.interviewId"><a :href="'/detail.html?id='+item.interviewId">{{item.name}}</a></li>
                </ul>
            </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>{{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>
</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 变量
            }
        },
        created() {
            this.id = new URLSearchParams(window.location.search).get('id') || '';
            // 获取本地存储的用户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').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方法
                if (!this.name || !this.content) {
                    alert('面试题目和内容不能为空');
                    return;
                }
                const token = localStorage.getItem('token'); // 获取token
                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>