childrenLibraryBMS/lib_vue/src/views/invite.vue

<template>
    <div class="main">
        <div class="title">云模管理平台</div>
        <p class="hello">{{detail.invitee}}您好！</p>
        <p class="invite">
            {{detail.operator}} 邀您参与
            <span class="impoortant">{{detail.companyName}}</span>的
            <span class="impoortant">{{detail.projectName}}</span>项目
        </p>
        <div class="info">
            <p class="info1">您的账户信息</p>
            <p class="info2">
                手机号
                <span>{{detail.account}}</span>
            </p>
            <p class="info3">
                初始密码
                <span>000000</span>
            </p>
        </div>
        <button @click="join">立即加入</button>
    </div>
</template>

<script>
    import util from "../common/js/util";
    export default {
        data() {
            return {
                inviteeId: "",
                projectId: "",
                operatorId: "",
                detail: ""
            };
        },
        methods: {
            join() {
                this.$router.push("/login");
            }
        },
        created() {},
        mounted() {
            //获取传入的值
            this.inviteeId = this.$route.params.inviteeId;
            this.projectId = this.$route.params.projectId;
            this.operatorId = this.$route.params.operatorId;

            this.http.post(this.port.project.inviteUser, {
                inviteeId: this.inviteeId,
                projectId: this.projectId,
                operatorId: this.operatorId
            } , res => {
                if (res.code == "ok") {
                    this.detail = res.data;
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    });
                }
            }, error => {
                this.$message({
                    message: error,
                    type: 'error'
                });
            })
        }
    };
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
    }

    .main {
        margin: 80px auto;
        width: 360px;
        color: #555;
    }

    .title {
        text-align: center;
        font-size: 20px;
        color: #999;
        line-height: 50px;
        border-bottom: #ddd 1px solid;
        margin-bottom: 5px;
        padding: 0 10px;
    }

    .impoortant {
        color: #1e72ff;
    }

    .hello {
        line-height: 40px;
        padding: 0 10px;
    }

    .invite {
        line-height: 22px;
        padding: 0 10px;
    }

    .info {
        background-color: #eee;
        margin: 20px 0;
        padding: 10px;
        border-radius: 3px;
    }

    .info1 {
        padding-left: 10px;
        border-left: #1e72ff 1px solid;
        line-height: 18px;
    }


    .info2 {
        line-height: 20px;
        padding: 10px 0;
    }

    .info3 {
        line-height: 20px;
    }

    .info2 span {
        position: relative;
        left: 40px;
        color: #999;
    }

    .info3 span {
        position: relative;
        left: 25px;
        color: #999;
    }

    button {
        background-color: #1e72ff;
        border: 0;
        color: white;
        border-radius: 5px;
        width: 100%;
        height: 40px;
        cursor: pointer;
    }
</style>