zyedu/application/wap/view/first/my/user_info.html

<!-- +---------------------------------------------------------------------- -->
<!-- | CRMEB [ CRMEB赋能开发者，助力企业发展 ] -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Copyright (c) 2016～2022 https://www.crmeb.com All rights reserved. -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权 -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Author: CRMEB Team <admin@crmeb.com> -->
<!-- +---------------------------------------------------------------------- -->
{extend name="public/container"}
{block name="title"}{$userInfo.nickname} - 个人资料{/block}
{block name="head_top"}
<script src="{__WAP_PATH}zsff/js/md5.js"></script>
<style>
    body{
        background-color: #f5f5f5;
    }

    .user-info .avatar {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        padding: .3rem;
        background-color: #fff;
    }

    .user-info .avatar .name {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        font-weight: 500;
        font-size: .3rem;
        color: #333;
    }

    .user-info .avatar .image {
        width: .9rem;
        height: .9rem;
        border-radius: 50%;
        overflow: hidden;
    }

    .user-info .avatar .img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .user-info .avatar .iconfont {
        margin-left: .3rem;
        font-size: .24rem;
        color: #999;
    }

    .user-info .avatar .input {
        display: none;
    }

    .user-info .list {
        margin-top: .3rem;
        background-color: #fff;
    }

    .user-info .list .item {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        height: .98rem;
        padding-right: .3rem;
        padding-left: .3rem;
    }

    .user-info .list .item~.item{
        border-top: 1px solid #f5f5f5;
    }

    .user-info .list .item .name {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        font-weight: 500;
        font-size: .3rem;
        color: #333;
    }

    .user-info .list .item .value {
        font-size: .3rem;
        color: #666;
    }

    .user-info .list .item .iconfont{
        margin-left: .3rem;
        font-size: .24rem;
        color: #999;
    }

    .user-info .list .item .input {
        font-family: inherit;
        text-align: right;
    }

    .user-info .btn-group {
        padding: .8rem .3rem 0;
    }

    .user-info .btn-group .btn {
        width: 100%;
        height: .9rem;
        border-radius: .45rem;
        margin-bottom: .3rem;
        background-color: #191C6E;
        font-size: .32rem;
        color: #FFFFFF;
    }

    .user-info .btn-group .btn:last-child {
        margin-bottom: 0;
    }

    .user-info .btn-group .out-btn {
        border: 1px solid #191C6E;
        background-color: #FFFFFF;
        color: #191C6E;
    }

    .user-info .group .link {
        display: block;
        width: 100%;
        height: .86rem;
        border: 1px solid #ccc;
        border-radius: .43rem;
        margin-top: .3rem;
        font-weight: 500;
        font-size: .3rem;
        line-height: .82rem;
        text-align: center;
        color: #999;
    }

    .user-info .list .item.password {
        justify-content: space-between;
    }

    .popup {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 60;
        border-radius: .2rem .2rem 0 0;
        background: #FFFFFF;
        transform: translateY(100%);
        transition: 0.3s;
    }

    .popup.on {
        transform: translateY(0);
    }

    .popup > a {
        position: absolute;
        top: .3rem;
        right: .3rem;
        z-index: 2;
    }

    .popup a .iconfont {
        font-size: .27rem;
        color: #8A8A8A;
    }

    .popup > div:nth-child(2) {
        padding: .4rem 0 .34rem;
        font-weight: bold;
        font-size: .36rem;
        line-height: .5rem;
        text-align: center;
        color: #282828;
    }

    .popup > div:nth-child(3) {
        padding: 0 .3rem .3rem;
    }

    .popup .item {
        position: relative;
        display: flex;
        align-items: center;
        height: 1.19rem;
        padding: 0 .15rem;
    }

    .popup .item::after {
        content: "";
        position: absolute;
        right: .15rem;
        bottom: 0;
        left: .15rem;
        z-index: 2;
        height: 1px;
        border-bottom: 1px solid #CCCCCC;
    }

    .popup .item .iconfont {
        font-size: .4rem;
    }

    .popup .item input {
        flex: 1;
        min-width: 0;
        margin-left: .25rem;
    }

    .popup .item:nth-child(2) {
        padding-right: 0;
    }

    .popup .item:nth-child(2) label {
        flex: 1;
        display: flex;
        align-items: center;
        min-width: 0;
    }

    .popup .item button {
        width: 2rem;
        font-size: .26rem;
        color: #191C6E;
    }

    .popup > div > button {
        width: 100%;
        height: .86rem;
        border-radius: .43rem;
        margin-top: .5rem;
        background: #191C6E;
        font-size: .3rem;
        color: #FFFFFF;
    }
</style>
{/block}
{block name="content"}
<div v-cloak id="app">
    <div class="user-info">
        <label class="avatar">
            <div class="name">头像</div>
            <div class="image">
                <img class="img" :src="userInfo.avatar">
            </div>
            <div class="iconfont iconxiangyou"></div>
            <input ref="avatar" class="input" type="file" accept="image/png,image/jpeg">
        </label>
        <div class="list">
            <label class="item">
                <span class="name">ID</span>
                <input v-model="userInfo.uid" class="value input" type="text" disabled>
            </label>
            <label class="item">
                <span class="name">昵称</span>
                <input v-model="userInfo.nickname" class="value input" type="text">
            </label>
            <label class="item">
                <span class="name">姓名</span>
                <input v-model="userInfo.realname" class="value input" type="text">
            </label>
            <a v-if="userInfo.phone" class="item" href="{:Url('save_phone')}">
                <span class="name">手机号</span>
                <span class="value">{{ userInfo.phone }}</span>
                <span class="iconfont iconxiangyou"></span>
            </a>
            <div v-if="userInfo.phone" class="item password" @click="popupShow = true">
                <div>密码</div>
                <div>******</div>
            </div>
            <label class="item">
                <span class="name">备注</span>
                <input v-model="userInfo.comment" class="value input" type="text">
            </label>
        </div>
        <div class="btn-group">
            <button class="btn" type="button" @click="save_user_info">保存修改</button>
            <button v-if="!isWechat && phone" class="btn out-btn" type="button" @click="logout">退出登录</button>
        </div>
    </div>
    <div :class="{ mask: popupShow }" @click="popupShow = false"></div>
    <div :class="{ on: popupShow }" class="popup">
        <a href="javascript:" @click="popupShow = false">
            <i class="iconfont iconguanbi"></i>
        </a>
        <div>修改密码</div>
        <div>
            <label class="item">
                <i class="iconfont iconshouji"></i>
                <input :value="userInfo.phone" type="text" readonly>
            </label>
            <div class="item">
                <label>
                    <i class="iconfont iconyanzhengma"></i>
                    <input v-model.trim="code" type="text" placeholder="请填写验证码">
                </label>
                <button :disabled="count >= 0" type="button" @click="getCode">{{ count < 0 ? '获取验证码' : '重新获取(' + count + 's)' }}</button>
            </div>
            <label class="item">
                <i class="iconfont iconmima"></i>
                <input v-model.trim="pwd" type="password" placeholder="请填写8-16位字母加数字组合密码">
            </label>
            <button type="button" @click="submitPassword">确认</button>
        </div>
    </div>
    <quick-menu></quick-menu>
</div>
{/block}
{block name='foot'}
<script>
    var userInfo = {:json_encode($userInfo)}, isWechat = {$isWechat? 'true': 'false'}, phone = '{$phone}';
    require(['vue', 'helper', 'store', 'layer', '{__WAP_PATH}zsff/js/quick.js'], function (Vue, $h, app) {
        new Vue({
            el: '#app',
            data: {
                userInfo: userInfo,
                popupShow: false,
                count: -1,
                COUNT_TIME: 60,
                code: '',
                pwd: '',
                isWechat: isWechat,
                phone: phone
            },
            watch: {
                'userInfo.nickname': function (n) {
                    document.title = n + ' - 个人资料';
                }
            },
            mounted: function () {
                var that = this;
                $(this.$refs.avatar).change(function (e) {
                    var formdata = new FormData();
                    if (e.target.files[0]) {
                        formdata.append('file', e.target.files[0]);
                        app.basePost($h.U({ c: 'auth_api', a: 'upload' }), formdata, function (res) {
                            that.userInfo.avatar = res.data.data.url;
                        })
                    }
                })
            },
            methods: {
                upload: function () {
                    var that = this;
                    if (!isWechat) {
                        return;
                    }
                    mapleWx($jssdk(), function () {
                        app.wechatUploadImg(this, 1, function (res) {
                            that.userInfo.avatar = res[0];
                        });
                    });
                },
                save_user_info: function () {
                    var that = this;
                    app.basePost($h.U({ c: 'my', a: 'save_user_info' }), {
                        avatar: that.userInfo.avatar,
                        nickname: that.userInfo.nickname,
                        realname: that.userInfo.realname,
                        comment: that.userInfo.comment,
                    }, function (res) {
                        $h.pushMsgOnce(res.data.msg)
                    })
                },
                getCode: function () {
                    var vm = this;
                    vm.count = vm.COUNT_TIME;
                    vm.timer = setInterval(function () {
                        vm.count--;
                        if (vm.count < 0) {
                            clearInterval(vm.timer);
                            vm.timer = null;
                        }
                    }, 1000);
                    app.baseGet($h.U({
                        c: 'auth_api',
                        a: 'code',
                        p: {
                            phone: vm.userInfo.phone
                        }
                    }), function (res) {
                        $h.pushMsg(res.data.msg);
                    }, function (err) {
                        $h.pushMsg(err.data.msg, function () {
                            clearInterval(vm.timer);
                            vm.timer = null;
                            vm.count = -1;
                        });
                    });
                },
                // 点击密码弹窗确认按钮
                submitPassword: function () {
                    var vm = this;
                    if (!vm.code) {
                        $h.pushMsg('请填写验证码');
                        return;
                    }
                    if (!vm.pwd) {
                        $h.pushMsg('请填写新密码');
                        return;
                    }
                    if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/.test(vm.pwd)) {
                        $h.pushMsg('请填写8-16位字母加数字组合密码');
                        return;
                    }
                    app.basePost($h.U({
                        c: 'login',
                        a: 'register'
                    }), {
                        account: vm.userInfo.phone,
                        pwd: hex_md5(vm.pwd),
                        code: vm.code,
                        type: 2
                    }, function () {
                        vm.popupShow = false;
                        vm.code = '';
                        vm.pwd = '';
                        layer.alert('密码修改成功！<br>请确定去个人中心重新登陆。', {
                            title: false,
                            closeBtn: false
                        }, function (index) {
                            app.baseGet($h.U({
                                c: 'my',
                                a: 'logout'
                            }), function () {
                                window.location.replace($h.U({
                                    c: 'my',
                                    a: 'index'
                                }));
                            });
                            layer.close(index);
                        });
                    }, function () {
                        vm.count = -1;
                    });
                },
                // 退出登录
                logout: function () {
                    layer.confirm('确定退出登录？', {
                        title: false,
                        closeBtn: false
                    }, function () {
                        app.baseGet($h.U({
                            c: 'my',
                            a: 'logout'
                        }), function (res) {
                            layer.msg(res.data.msg, {
                                anim: 0
                            },function () {
                                window.history.back();
                            });
                        });
                    });
                }
            }
        });
    })
</script>
{/block}