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">{{userInfo.name}} </span>
            </div>
        </header>

        <!-- 主体 -->
        <main class="mt-10">
            <div class="bg-fff">
                <van-cell title="账号" :title-style="'flex: 0.5;'" :value="userInfo.phone"></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="绑定微信" @click="bindWeiXin" style="margin-top:10px;" :title-style="'flex: 2.5;'" label="绑定微信后可接收工时填报提醒">
                <template>
                    <span v-if="userInfo.wxOpenid == null" style="color:#ff0000;">未绑定</span>
                    <span v-if="userInfo.wxOpenid != null" style="color:#7CCD7C;">已绑定</span>
                </template>
            </van-cell>
            <van-button class="logout" @click="logout" block round type="danger" >退出登录</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),
            }
        },

        methods: {
            logout() {
                this.$store.commit("updateLogin", false);
                localStorage.removeItem("userInfo");
                this.$router.push("/login");
            },
            bindWeiXin(){
                if (this.userInfo.wxOpenid != null) {
                    return;
                }
                var url = "http://mobworktime.ttkuaiban.com/";//授权回调页面
                var appId = "wx749c84daac654e1e";//工时管家公众号
                var weixinUrl="https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appId+"&redirect_uri="+encodeURI(url)+"&response_type=code&scope=snsapi_base&state=1#wechat_redirect";
                console.log(weixinUrl);
                window.location.href = weixinUrl;
            },
        },
        create() {
            
        },
        mounted() {
            // if (localStorage.openId == null || localStorage.openId == undefined || localStorage.openId == 'undefined') {
            //     localStorage.openId = 'oBCQbt2yf7d-OxFuAF4tTJYbiI1I';//测试账号
            //     // localStorage.openId = 'osp3lt91BuJ_JkwoqawsCI5b8IZM';//测试账号
            // }
            
            
        }
    };
</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>