manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet_h5/src/views/my/children/center.vue

<template>
    <div class="center">
        <!-- 头部 -->
        <header>
            <div class="beijin"></div>
            <div class="flex aic users pixed" style="width:50%;">
                <img :src="require('../../../assets/img/personal/userHead.png')" class="imege" />
                <span class="f16 fff ml-20" v-if="userInfo.userNameNeedTranslate == '1'"><ww-open-data type='userName' :openid='userInfo.name'></ww-open-data></span>
                <span class="f16 fff ml-20" v-else>{{userInfo.name}} </span>
            </div>
        </header>

        <!-- 主体 -->
        <main class="mt-10">
            <div class="bg-fff">
                <van-cell title="账号" v-if="userInfo.userNameNeedTranslate != '1'" :title-style="'flex: 0.5;'" :value="userInfo.phone"></van-cell>
                <van-cell title="工号" :title-style="'flex: 0.5;'" :value="userInfo.jobNumber"></van-cell>
                <van-cell title="公司" :title-style="'flex: 0.5;'" :value="userInfo.companyName"></van-cell>
                <!-- <van-cell title="修改密码" isLink to="/my/set"></van-cell> -->
            </div>
            <van-cell :title="'绑定'+(isCorpWX?'企业':'')+'微信'" v-if="isCorpWX || isWX" @click="bindWeiXin" style="margin-top:10px;" :title-style="'flex: 2.5;'" label="绑定微信后可接收工时填报提醒">
                <template>
                    <span v-if="(isCorpWX && userInfo.corpwxUserid == null) || (isWX && userInfo.wxOpenid == null)" style="color:#ff0000;">未绑定</span>
                    <span v-if="(isCorpWX && userInfo.corpwxUserid != null) || (isWX && userInfo.wxOpenid != null)" style="color:#7CCD7C;">已绑定</span>
                </template>
            </van-cell>
            <van-button class="logout" @click="logout" block round type="danger" v-if="!isCorpWX">退出登录</van-button>
        </main>

        <Footer page="my" />
    </div>
</template>

<script>
    import Footer from "@/components/Footer";
    import { mapGetters } from "vuex";
    export default {
        components: {
            Footer
        },

        computed: {
            ...mapGetters(["userId", "isLogin"])
        },

        data() {
            return {
                userInfo: JSON.parse(localStorage.userInfo),
                isCorpWX:false,
                isWX:false,
            }
        },

        methods: {
            logout() {
                this.$store.commit("updateLogin", false);
                localStorage.removeItem("userInfo");
                this.$router.push("/login");
            },
            bindWeiXin(){
                //企业微信
                if (this.isCorpWX && this.userInfo.corpwxUserid != null) {
                    return;
                }
                //微信
                else if (this.isWX && this.userInfo.wxOpenid != null) {
                    return;
                }
                var appId = "wx749c84daac654e1e";//工时管家公众号
                if (this.isCorpWX) {
                    appId = "ww4e237fd6abb635af"; //企业微信第三方的SUIT ID
                } 

                var url = "http://worktime.ttkuaiban.com/api/wxcorp/bindCorpWeiXin?userId="+this.userInfo.id;//授权回调页面
                var weixinUrl="https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appId+"&redirect_uri="+encodeURI(url)+"&response_type=code&scope=snsapi_base&state=0#wechat_redirect";
                window.location.href = weixinUrl;
            },
        },
        create() {
            
        },
        mounted() {
            var ua = navigator.userAgent.toLowerCase();
            if (ua.indexOf("wxwork") > 0) {
                this.isCorpWX = true;
            } else if (ua.indexOf("micromessenger") > 0) {
                this.isWX = true;
            }
        }
    };
</script>

<style lang="less" scoped>
    /* 本页公共样式 */
    .gray {
        color: #797d82;
    }

    .bott0 {
        bottom: 0;
    }

    .orange {
        color: #ff5f16
    }

    .yellow {
        color: #ffb232
    }

    .bd-gray {
        border-bottom: 1px solid #f5f5f5;
    }

    // 头部图片
    .beijin {
        background: url(../../../assets/img/personal/head_back.jpg) repeat-y center center;
        height: 200px;
        background-size: cover;
        margin-top: -44px;
    }

    // 用户名和头像
    .users {
        top: 55px;
        left: 22px;
        position: absolute;

        // 头像
        .imege {
            height: 65px;
            border-radius: 50%;
        }

        .fff {
            font-size: 22px;
        }
    }

    // 导航
    .nav {
        height: 75px;

        .iconfont {
            font-weight: bold;
        }

        .cit {
            height: 26px;
        }
    }

    .logout {
        width: 80%;
        margin: 50px auto 0;
    }

    // 主体
    main {
        .list {
            height: 50px;

            .image {
                height: 20px;
            }
        }

        .foun {
            font-size: 12px;
        }

    }

    /* 底部 */
    .footer {
        height: 50px;
    }
</style>