YXGJ/team/userCenter/personal.vue

<template>
    <view>
        <block v-if="detail.userid">
            <view style="height: 10px;" />
            <user :list="[detail]" />
        </block>

        <view class="head">
            <view class="label">
                基本信息
            </view>
            <view class="content">
                仅显示已填信息<text style="padding: 0 2.5px;" /> <u-switch activeColor="#C40C24" v-model="unShowAll" />
            </view>
        </view>
        <block v-for="item in showList" :key="item.key">
            <view class="item" hover-class="navigator-hover" v-if="!unShowAll || detail[item.key] || item.value">
                <view class="content">
                    <view class="label">
                        {{ item.label }}:
                    </view>
                    <view class="value">
                        {{ detail[item.key] || item.value || '--' }}
                    </view>
                </view>
            </view>
        </block>
        <view style="height: 70px;" />
        <view class="footer">
            <navigator class="insert" v-if="detail.iswechatbind == 0"
                :url="'/team/userCenter/wechatbind?id=' + detail.userid + '&name=' + detail.name">
                绑定微信
            </navigator>
            <navigator class="invite" style="flex: 1;" url="/team/team/InviteUser">
                编辑
            </navigator>
        </view>
    </view>
</template>

<script>
import user from "./modules/userList"
export default {
    components: { user },
    data() {
        return {
            sys_enterprise_hrid: 0,
            detail: {
                userid: 0
            },
            unShowAll: false,
            showList: []
        }
    },
    onLoad(options) {
        console.log("options", options)
        this.sys_enterprise_hrid = options.id;
        uni.setNavigationBarTitle({
            title: '人员信息'
        });
        this.getDetail()
    },
    methods: {
        getDetail() {
            this.$Http.basic({
                "id": "20240411085402",
                "content": {
                    "sys_enterprise_hrid": this.sys_enterprise_hrid
                }
            }).then(res => {
                console.log("门店人员信息", res)
                if (this.cutoff(res.msg)) return;
                this.detail = res.data;
                this.showList = [{
                    label: "姓名",
                    key: "name"
                }, {
                    label: "手机号",
                    key: "phonenumber"
                }, {
                    label: "性别",
                    key: "sex"
                }, {
                    label: "生日",
                    key: "birthday"
                }, {
                    label: "邮箱",
                    key: "email"
                }, {
                    label: "店内职位",
                    key: "position"
                }, {
                    label: "角色",
                    key: "rolenames"
                }, {
                    label: "人员类型",
                    value: res.isleader ? '主账号' : '子账号'
                }, {
                    label: "所属门店",
                    key: "storenames"
                }]
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100vw;
    height: 45px;
    background: #F7F7F7;
    padding: 0 10px;
    box-sizing: border-box;

    .label {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 15px;
        color: #333333;
        line-height: 22px;
    }

    .content {
        display: flex;
        align-items: center;
        font-family: PingFang SC, PingFang SC;
        font-size: 14px;
        color: #999999;
    }
}

.item {
    width: 100vw;
    background: #fff;
    padding-left: 10px;
    box-sizing: border-box;

    .content {
        display: flex;
        width: 100%;
        padding: 15px 0;
        padding-right: 10px;
        box-sizing: border-box;
        border-bottom: 0.5px solid #F2F2F2;

        .label {
            width: 100px;
            margin-right: 10px;
            line-height: 20px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 14px;
            color: #666666;
        }

        .value {
            line-height: 20px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 14px;
            color: #333333;
        }
    }

    .content:last-child {
        border-bottom: 0;
    }
}

.footer {
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    width: 100vw;
    height: 65px;
    background: #FFFFFF;
    box-shadow: 0px -2px 6px 1px rgba(0, 0, 0, 0.16);
    padding: 5px 10px;
    box-sizing: border-box;

    .insert {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 168px;
        height: 45px;
        background: #FFFFFF;
        border-radius: 5px;
        border: 1px solid #999999;
        font-family: PingFang SC, PingFang SC;
        font-size: 16px;
        color: #666666;
        box-sizing: border-box;
        margin-right: 10px;
    }

    .invite {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 177px;
        height: 45px;
        background: #C30D23;
        border-radius: 5px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #FFFFFF;
    }
}
</style>