PC-mj/pages/publish/index.vue

<template>
    <div class="flexacenter save-box save-left">
        <img class="save-icon" src="@/assets/img/arrow-gray.png" />
        保存并退出
    </div>
    <div class="flexacenter save-box save-right">
        放弃保存
        <img class="save-icon" src="@/assets/img/cross-icon.png" />
    </div>
    <div class="content">
        <div class="header flexacenter">发布面经</div>
        <div class="box flex1 flexflex">
            <div class="box-left">
                <div class="area-box">
                    <div class="item">
                        <div class="title flexacenter">
                            申请信息
                            <div class="asterisk">*</div>
                        </div>
                        <div class="info-box">
                            <div class="info-item flexacenter">
                                <div class="info-name">院校</div>
                                <div class="flex1">
                                    <el-autocomplete v-model="state1" :fetch-suggestions="querySearch" clearable class="inline-input w-50" placeholder="输入关键词，选择院校" @select="handleSelect">
                                        <template #suffix>
                                            <img class="" src="@/assets/img/arrow-black.svg" />
                                        </template>
                                    </el-autocomplete>
                                </div>
                            </div>
                            <div class="info-item flexacenter">
                                <div class="info-name">专业</div>
                                <div class="flex1">
                                    <el-autocomplete v-model="state1" :fetch-suggestions="querySearch" clearable class="inline-input w-50" placeholder="输入关键词，选择专业" @select="handleSelect">
                                        <template #suffix>
                                            <img class="" src="@/assets/img/arrow-black.svg" />
                                        </template>
                                    </el-autocomplete>
                                </div>
                            </div>
                            <div class="info-item flexacenter">
                                <div class="info-name">项目</div>
                                <el-input class="flex1 input" placeholder="请输入"></el-input>
                            </div>
                        </div>
                    </div>

                    <div class="item">
                        <div class="title flexacenter">
                            面试时间
                            <div class="asterisk">*</div>
                        </div>

                        <div class="time-box item-input-box flexacenter">
                            <el-config-provider :locale="zhCn">
                                <el-date-picker v-model="value1" type="date" placeholder="请选择" size="large" class="flex1 flexacenter" :clear-icon="{}" />
                            </el-config-provider>
                            <img class="calendar-icon" src="@/assets/img/calendar-icon.svg" />
                        </div>
                    </div>

                    <div class="item">
                        <div class="title flexacenter">
                            面经帖标题
                            <div class="asterisk">*</div>
                        </div>

                        <div class="title-box item-input-box flexacenter"><el-input v-model="title" placeholder="给你的面经帖起一个吸引的标题吧"></el-input></div>
                    </div>
                </div>
                <div class="visible-box flexacenter">
                    <img class="visible-icon" src="@/assets/img/frame-no.svg" />
                    回复/点赞可见
                </div>
            </div>
            <div class="box-right">
                <div class="area-box">
                    <div class="item">
                        <div class="title flexacenter">
                            面试构成及过程
                            <div class="asterisk">*</div>
                        </div>

                        <div class="course-box">
                            <el-input v-model="course" type="textarea" placeholder="例如：项目介绍、面试时长、面试官、问题QA、需要注意的地方"></el-input>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="hint-box flexcenter">注：请确保以上内容已正确填写，发布后将不能修改</div>
    </div>

    <div class="floor-box">
        <div class="box flexacenter">
            <div class="anonymous-box flexacenter">
                <img class="anonymous-icon" src="@/assets/img/frame-pitch.svg" />
                <!-- <img class="anonymous-icon" src="@/assets/img/frame-no.svg" /> -->
                匿名发表
                <div class="text">（发布后可修改）</div>
            </div>
            <div class="issue-btn flexcenter">发布</div>
        </div>
    </div>
</template>

<script setup>
import zhCn from "element-plus/dist/locale/zh-cn.mjs"

const state1 = ref("")

const restaurants = ref([])

onMounted(() => {
    restaurants.value = loadAll()
    getInit()
})

const getInit = () => {
    publishInitHttp().then(res => {
        console.log("res", res)
    })
}

const querySearch = (queryString, cb) => {
    // https://offer.gter.net/miniprogram/InterviewExperience/schoolSearch
    publishSchoolSearchHttp({ keyword: queryString }).then(res => {
        // console.log("res", res)
        if (res.code != 200) return
        let data = res.data
        console.log(data, "data")
        data.forEach(element => {
            console.log(element, "element")
            element['value'] 
        })
        cb(data)
    })

    return

    const results = queryString ? restaurants.value.filter(createFilter(queryString)) : restaurants.value
    // call callback function to return suggestions
    cb(results)
}

const createFilter = queryString => {
    return restaurant => {
        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    }
}
const loadAll = () => {
    return [
        { value: "vue", link: "https://github.com/vuejs/vue" },
        { value: "element", link: "https://github.com/ElemeFE/element" },
        { value: "cooking", link: "https://github.com/ElemeFE/cooking" },
        { value: "mint-ui", link: "https://github.com/ElemeFE/mint-ui" },
        { value: "vuex", link: "https://github.com/vuejs/vuex" },
        { value: "vue-router", link: "https://github.com/vuejs/vue-router" },
        { value: "babel", link: "https://github.com/babel/babel" },
    ]
}

const handleSelect = item => {
    console.log(item)
}

const value1 = ref("")
const title = ref("")
const course = ref("")
</script>

<style scoped lang="less">
.content {
    width: 1200px;
    // height: 882px;
    // min-height: 718px;
    min-height: calc(100vh - 120px);
    background: #fff;
    margin: 30px auto 90px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;

    .header {
        font-weight: 650;
        font-size: 20px;
        color: #000000;
        border-bottom: 1px solid #ebebeb;
        height: 88px;
        padding-left: 30px;
    }

    .box {
        .title {
            color: #666666;
            font-size: 14px;
            margin-bottom: 10px;
        }

        .box-left {
            border-right: 16px solid #f6f6f6;
            .area-box {
                padding: 30px;
                padding-right: 50px;
                border-bottom: 1px solid #ebebeb;

                .item {
                    &:not(:last-of-type) {
                        margin-bottom: 30px;
                    }
                }

                .info-box {
                    width: 452px;
                    height: 158px;
                    background-color: rgba(255, 255, 255, 0);
                    border: 1px solid rgba(215, 215, 215, 1);
                    border-radius: 5px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    .info-item {
                        height: 50px;

                        &:not(:last-of-type) {
                            border-bottom: 1px solid #d7d7d7;
                        }

                        .info-name {
                            font-size: 14px;
                            color: #666666;
                            padding: 0 14px;
                        }

                        .input {
                            height: 100%;
                            // background: #000000;
                            // padding: 1px 11px;
                            border: none;
                            outline: none;
                            box-shadow: none;

                            /deep/ .el-input__wrapper {
                                box-shadow: none;
                            }
                        }

                        /deep/ .el-autocomplete {
                            width: 100%;

                            .el-input__wrapper {
                                box-shadow: none;
                            }
                        }
                    }
                }

                .item-input-box {
                    width: 452px;
                    height: 46px;
                    border: 1px solid rgba(215, 215, 215, 1);
                    border-radius: 5px;
                    cursor: pointer;
                    /deep/ .el-input {
                        height: 100%;
                        .el-input__wrapper {
                            height: 100%;
                            box-shadow: none;
                        }
                    }
                }

                .time-box {
                    .calendar-icon {
                        width: 15px;
                        height: 16px;
                        margin: 0 12px;
                    }

                    /deep/ .el-input {
                        .el-input__prefix {
                            display: none;
                        }
                    }
                }
            }

            .visible-box {
                margin: 30px;
                font-size: 14px;
                color: #555555;
                cursor: pointer;
                .visible-icon {
                    width: 18px;
                    height: 18px;
                    margin-right: 5px;
                }
            }
        }

        .box-right {
            .area-box {
                padding: 30px;
                padding-left: 50px;

                .course-box {
                    width: 572px;
                    min-height: 480px;
                    background-color: rgba(255, 255, 255, 0);
                    border: 1px solid rgba(215, 215, 215, 1);
                    border-radius: 5px;

                    /deep/ .el-textarea__inner {
                        min-height: 480px !important;
                        box-shadow: none;
                        padding: 13px;
                    }
                }
            }
        }
    }

    .hint-box {
        height: 58px;
        background-color: rgba(246, 246, 246, 1);
        color: #555555;
        font-size: 13px;
    }
}
.asterisk {
    color: #fa9183;
    margin-left: 5px;
}

.floor-box {
    width: 100vw;
    min-width: 1200px;
    height: 90px;
    background-color: rgba(255, 255, 255, 1);
    -moz-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
    -webkit-box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
    box-shadow: 0px -1px 2px rgba(0, 0, 0, 0.192156862745098);
    position: fixed;
    bottom: 0;
    .box {
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        justify-content: space-between;
        padding: 0 30px;
        .anonymous-box {
            cursor: pointer;
            color: #333333;
            font-size: 14px;

            .text {
                color: rgb(170, 170, 170);
                font-size: 13px;
            }
            .anonymous-icon {
                width: 18px;
                height: 18px;
            }
        }
        .issue-btn {
            width: 200px;
            height: 46px;
            background-color: rgba(253, 223, 109, 1);
            border-radius: 190px;
            font-size: 16px;
            color: #000000;
            cursor: pointer;
        }
    }
}

.save-box {
    font-size: 14px;
    color: #666666;
    position: fixed;
    top: 30px;
    cursor: pointer;
    &.save-left {
        left: 50px;
    }
    &.save-right {
        right: 50px;
        .save-icon {
            width: 16px;
            height: 16px;
            margin-left: 10px;
        }
    }
    .save-icon {
        width: 22px;
        height: 22px;
        margin-right: 10px;
        transform: rotate(180deg);
    }
}
</style>