proginn-frontend/pages/frontend/requirements/components/Form_recommend.vue

<template>
<div class="recommend-container" v-if="isShow">
    <div class="recommend-main">
        <div class="close" @click="close"></div>
        <div class="recommend-title">为您精选以下开发者</div>
        <div class="recommend-second-title">选择后，需求审核通过就会帮您对接哦~</div>
        <div class="recommend-list">
            <div class="recommend-item first">
                <div class="recommend-icon"></div>
                <div class="recommend-item-title">性价比最高</div>
                <div class="recommend-item-worker" v-for="user in RateUser" :key="user.uid">
                    <div class="recommend-worker-info-area">
                        <div class="worder-avatar">
                            <img :src="user.user_logo" />
                        </div>
                        <div class="worder-info">
                            <p class="recommend-worder-name text-line-1">{{user.nickname}}</p>
                            <p class="recommend-worder-detail">日薪：{{user.work_price}} ｜ <a href="">查看简历</a></p>
                        </div>
                    </div>
                    <div class="recommend-choice-btn-area">
                        <span class="recommend-choice-btn" :class="{'cur':firstUser.uid == user.uid}" @click="setFirstChoice(user)">设为主选</span>
                        <span class="recommend-choice-btn" :class="{'cur':secondUser.uid == user.uid}" @click="setSecondChoice(user)">设为次选</span>
                    </div>
                </div>

            </div>
            <div class="recommend-item second">
                <div class="recommend-icon"></div>
                <div class="recommend-item-title">好评最多</div>
                <div class="recommend-item-worker" v-for="user in ScoreUser" :key="user.uid">
                    <div class="recommend-worker-info-area">
                        <div class="worder-avatar">
                            <img :src="user.user_logo" />
                        </div>
                        <div class="worder-info">
                            <p class="recommend-worder-name text-line-1">{{user.nickname}}</p>
                            <p class="recommend-worder-detail">日薪：{{user.work_price}} ｜ <a href="">查看简历</a></p>
                        </div>
                    </div>
                    <div class="recommend-choice-btn-area">
                        <span class="recommend-choice-btn" :class="{'cur':firstUser.uid == user.uid}" @click="setFirstChoice(user)">设为主选</span>
                        <span class="recommend-choice-btn" :class="{'cur':secondUser.uid == user.uid}" @click="setSecondChoice(user)">设为次选</span>
                    </div>
                </div>
            </div>
            <div class="recommend-item third">
                <div class="recommend-icon"></div>
                <div class="recommend-item-title">技术最牛</div>
                <div class="recommend-item-worker" v-for="user in PriceUser" :key="user.uid">
                    <div class="recommend-worker-info-area">
                        <div class="worder-avatar">
                            <img :src="user.user_logo" />
                        </div>
                        <div class="worder-info">
                            <p class="recommend-worder-name text-line-1">{{user.nickname}}</p>
                            <p class="recommend-worder-detail">日薪：{{user.work_price}} ｜ <a href="">查看简历</a></p>
                        </div>
                    </div>
                    <div class="recommend-choice-btn-area">
                        <span class="recommend-choice-btn" :class="{'cur':firstUser.uid == user.uid}" @click="setFirstChoice(user)">设为主选</span>
                        <span class="recommend-choice-btn" :class="{'cur':secondUser.uid == user.uid}" @click="setSecondChoice(user)">设为次选</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="recommend-tips">我的选择：</div>
        <div class="recommend-my-choice">
            <div class="recommend-worker">
                <div class="recommend-worder-choiced">
                    <div class="recommend-worder-choiced-avatar" :style="{
                       'background-image': 'url('+firstUser.user_logo+')'
                    }"></div>
                    <p class="recommend-worder-choiced-state text-line-1">{{firstUser.nickname? firstUser.nickname:'未选择'}}</p>
                    <p class="recommend-worder-sort">主选</p>
                </div>
                <div class="recommend-worder-choiced">
                    <div class="recommend-worder-choiced-avatar" :style="{
                       'background-image': 'url('+secondUser.user_logo+')'
                    }"></div>
                    <p class="recommend-worder-choiced-state text-line-1">{{secondUser.nickname? secondUser.nickname:'未选择'}}</p>
                    <p class="recommend-worder-sort second-choice ">次选</p>
                </div>
            </div>
            <div class="recommend-submit">
                <div class="recommend-submit-btn" @click="submit">确认选择</div>
                <div class="recommend-submit-btn pass">
                    <span>跳过选择</span>
                    <span class="recommend-submit-btn-tips">客户经理为您选择</span>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    props: ['projectid'],
    data() {
        return {
            firstUser: {},
            secondUser: {},
            recommend: {},
            isShow: true,
        }
    },
    mounted() {
        this.fetchData()
    },
    computed: {
        RateUser() {
            return this.recommend ? this.recommend['rate_user'] : []
        },
        ScoreUser() {
            return this.recommend ? this.recommend['score_user'] : []
        },
        PriceUser() {
            return this.recommend ? this.recommend['price_user'] : []
        }
    },
    methods: {
        setFirstChoice(user) {
            if (this.secondUser.uid == user.uid) {
                this.secondUser = {}
            }
            this.firstUser = {
                ...user
            }
        },
        setSecondChoice(user) {
            if (this.firstUser.uid == user.uid) {
                this.firstUser = {}
            }
            this.secondUser = {
                ...user
            }
        },
        fetchData() {
            this.$axios
                .$post(
                    "/wapi/work/recommend", {
                        type: 3,
                        projectId: this.projectid
                    }
                )
                .then((res) => {
                    if (res.status == 1) {
                        this.recommend = {
                            ...res.data
                        }
                    } else {
                        this.$message.error(res.info)
                    }
                })
        },
        close() {
            this.isShow = false
        },
        submit() {
            if(!this.firstUser.uid && !this.secondUser.uid){
                this.$message.error("请选择开发者")
                return
            }
            let uids = []
            if (this.firstUser.uid) {
                uids.push(this.firstUser.uid)
            }
            if (this.secondUser.uid) {
                uids.push(this.secondUser.uid)
            }
            this.$axios
                .$post(
                    "/wapi/work/updataJobRecommend", {
                        yy_developer_uid: uids.join(","),
                        projectId: this.projectid
                    }
                )
                .then((res) => {
                    if (res.status == 1) {

                    } else {
                        this.$message.error(res.info)
                    }
                })
        }

    }
}
</script>

<style lang="scss" scoped>
.recommend-container {
    position: fixed;
    background: rgba(0, 0, 0, 0.7);
    z-index: 50;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.recommend-main {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 194px;
    width: 880px;
    height: 636px;
    background: #FFFFFF;
    border-radius: 8px;

    .close {
        width: 16px;
        height: 16px;
        position: absolute;
        right: 19px;
        top: 19px;
        background: url("~@/assets/img/recommend/close.png") no-repeat 50% 50%;
        background-size: cover;
        cursor: pointer;
    }
}

.recommend-title {
    margin-top: 40px;
    text-align: center;
    font-size: 22px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #0B121A;
    line-height: 30px
}

.recommend-second-title {
    margin-top: 4px;
    text-align: center;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #445973;
    line-height: 20px;
}

.recommend-list {
    margin-top: 36px;
    margin-left: 50px;
    margin-right: 50px;
    display: flex;
    justify-content: space-between;
}

.recommend-item {
    width: 240px;
    height: 314px;
    position: relative;
}

.recommend-icon {
    position: absolute;
    left: 46px;
    top: 0;
    width: 39px;
    height: 46px;
    // border: 1px solid #f00;
}

.recommend-item-title {
    margin-top: 16px;
    margin-left: 93px;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    line-height: 22px
}

.recommend-item-worker {
    margin-top: 16px;
    margin-left: 16px;
    margin-right: 16px;
    // width: 208px;
    height: 114px;
    background: #FFFFFF;
    border-radius: 4px;
    overflow: hidden;
}

.recommend-worker-info-area {
    display: flex;
    margin-top: 12px;
}

.worder-avatar {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    font-size: 0;
    margin-left: 12px;
    overflow: hidden;

    img {
        width: 40px;
        height: 40px;
        border-radius: 40px;
    }
}

.worder-info {
    flex: 1;
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    // align-items: center;
    justify-content: space-between;
}

.recommend-worder-name {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #0B121A;
    line-height: 20px
}

.recommend-worder-detail {
    margin-top: 2px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #828C99;
    line-height: 17px;

    a {
        color: #4D81BF;
    }
}

.recommend-choice-btn-area {
    margin-top: 20px;
    text-align: center;
}

.recommend-choice-btn {
    display: inline-block;
    width: 72px;
    height: 28px;

    border-radius: 14px;

    line-height: 28px;
    font-size: 13px;
    font-weight: 400;

    margin-left: 6px;
    margin-right: 6px;
    cursor: pointer;
    background: #FFFFFF;
    border: 1px solid #4B5D73;
    color: #4B5D73;

    &.cur {
        background: #4B5D73;
        color: #FFFFFF;
    }
}

.first {
    background: url("~@/assets/img/recommend/bg1.png") no-repeat 50% 50%;
    background-size: cover;

    .recommend-icon {
        background: url("~@/assets/img/recommend/icon1.png") no-repeat 50% 50%;
        background-size: cover;
    }

    .recommend-item-title {
        color: #458EE6;
    }
}

.second {
    background: url("~@/assets/img/recommend/bg2.png") no-repeat 50% 50%;
    background-size: cover;

    .recommend-icon {
        background: url("~@/assets/img/recommend/icon2.png") no-repeat 50% 50%;
        background-size: cover;
    }

    .recommend-item-title {
        color: #E66445;
    }
}

.third {
    background: url("~@/assets/img/recommend/bg3.png") no-repeat 50% 50%;
    background-size: cover;

    .recommend-icon {
        background: url("~@/assets/img/recommend/icon3.png") no-repeat 50% 50%;
        background-size: cover;
    }

    .recommend-item-title {
        color: #AB7A42;
    }
}

.recommend-tips {
    margin: 30px 0 0 50px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #637192;
    line-height: 20px;
}

.recommend-my-choice {
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.recommend-worker {
    display: flex;

}

.recommend-worder-choiced {
    display: flex;
    margin-right: 29px;
    width: 80px;
    flex-direction: column;
    // justify-content: center;

    align-items: center;
    text-align: center;
}

.recommend-worder-choiced-avatar {
    width: 36px;
    height: 36px;
    background-color: #EBECED;
    border-radius: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.recommend-worder-choiced-state {
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #828C99;
    line-height: 18px;
    margin-top: 4px;
}

.recommend-worder-sort {
    margin-top: 6px;
    width: 32px;
    height: 18px;
    background: #FFFFFF;
    border-radius: 2px;
    border: 1px solid #308EFF;

    line-height: 18px;
    text-align: center;

    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #308EFF;

    &.second-choice {
        border-color: #445973;
        color: #445973;
    }
}

.recommend-submit {
    display: flex
}

.recommend-submit-btn {
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 54px;
    background: #96C6FF;
    border-radius: 2px;
    color: #FFFFFF;
    cursor: pointer;

    &:hover {
        background: #308EFF
    }
}

.recommend-submit-btn-tips {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    line-height: 17px;
}

.pass {
    background: #99AABF;

    &:hover {
        background: #4B5D73
    }
}
</style>