water_affairs/pages/index/mine-modules/userCenter.vue

<template>
    <view class="user-center">
        <u-popup :show="show" :customStyle="popupStyle" bgColor="#F7F7F7" :overlay="false" zIndex="9998" mode="left"
            @close="onClose">
            <view :style="{ 'height': spaceUsage }" />
            <view class="head-p">
                账号信息
                <text class="cuIcon-close" @click="onClose" />
            </view>
            <upload maxCount="1" @uploadCallback="uploadCallback">
                <navigator class="portrait-p-box" url="#">
                    <view class="label">
                        头像
                    </view>
                    <view class="content">
                        <image class="profile-photo" v-if="userMsg.attinfos.length" :src="userMsg.attinfos[0].url"
                            mode="aspectFill" />
                        <view v-else class="profile-photo">
                            <view class="substitution">
                                <text class="iconfont icon-wode-xuanzhong" />
                            </view>
                        </view>
                        <text class="iconfont icon-a-wodetiaozhuan" />
                    </view>
                </navigator>
            </upload>

            <view class="rests-p-box">
                <view class="row">
                    <view class="label">
                        工号
                    </view>
                    <view class="content">
                        {{ userMsg.accountno }}
                    </view>
                </view>
                <navigator url="#" class="row" @click="openModal('name', '姓名', userMsg.name, '请填写姓名')">
                    <view class="label">
                        姓名
                    </view>
                    <view class="content">
                        {{ userMsg.name || '--' }}
                        <text class="iconfont icon-a-wodetiaozhuan" />
                    </view>
                </navigator>
                <navigator url="#" class="row" @click="openModal('phonenumber', '手机号', userMsg.phonenumber, '请填写手机号码')">
                    <view class="label">
                        手机号
                    </view>
                    <view class="content">
                        {{ userMsg.phonenumber || '--' }}
                        <text class="iconfont icon-a-wodetiaozhuan" />
                    </view>
                </navigator>
                <block v-if="userMsg.hr.userid">
                    <navigator url="#" class="row" @click="openModal('email', '邮箱', userMsg.hr.email, '请填写邮箱')">
                        <view class="label">
                            邮箱
                        </view>
                        <view class="content">
                            {{ userMsg.hr.email || '--' }}
                            <text class="iconfont icon-a-wodetiaozhuan" />
                        </view>
                    </navigator>
                    <view class="row">
                        <view class="label">
                            部门
                        </view>
                        <view class="content">
                            {{ userMsg.hr.depname || '--' }}
                        </view>
                    </view>
                    <view class="row">
                        <view class="label">
                            职位
                        </view>
                        <view class="content">
                            {{ userMsg.hr.position || '--' }}
                        </view>
                    </view>
                </block>
            </view>
        </u-popup>
        <u-overlay :show="show" zIndex="9997" @click="onClose" />
        <u-modal :show="changeUser.showModal" @confirm="changeUserMsg" @cancel="onCancel" showCancelButton ref="uModal"
            :asyncClose="true">
            <view class="modal-content">
                <view class="title">
                    修改{{ changeUser.title }}
                </view>
                <view style="margin-top: 20px;" />
                <u-input :focus="inputFocus" :placeholder="changeUser.placeholder" border="surround"
                    v-model="changeUser.changeValue" :type="changeUser.name == 'phonenumber' ? 'number' : 'text'" />
                <block v-if="changeUser.name == 'phonenumber'">
                    <view style="margin-top: 10px;" />
                    <u-input :focus="passwordFocus" placeholder="短信验证码" border="surround" v-model="password" type="number">
                        <template slot="suffix">
                            <u-button @tap="getCode" type="success" size="mini">{{ tips }} </u-button>
                        </template>
                    </u-input>
                </block>
            </view>
        </u-modal>
    </view>
</template>

<script>
import {
    queryStr,
    CheckEmail,
    CheckPhoneNumber
} from "../../../utils/basicInspection";
import upload from "../../../components/my-upload.vue";
import { hexMD5 } from "../../login/modules/md5";
let count = 30,
    countDown = null;
export default {
    props: {
        userMsg: {
            type: Object
        },
        getMsg: {
            type: Function
        }
    },
    components: { upload },
    data() {
        return {
            show: false,
            inputFocus: false,
            passwordFocus: false,
            spaceUsage: 0,
            popupStyle: {
                width: "88.000vw",
                background: "#F7F7F7",
                padding: "2.667vw",
                boxSizing: "border-box"
            },
            changeUser: {
                name: "",
                showModal: false,
                title: "",
                changeValue: "",
                placeholder: "",
            },
            password: "",
            tips: "获取验证码"
        }
    },
    methods: {
        /* 关闭用户中心 */
        onClose() {
            this.show = false;
        },
        /* 开始修改 */
        openModal(name, title, value, placeholder) {
            this.changeUser = {
                name,
                showModal: true,
                title,
                changeValue: "",
                placeholder: value || placeholder,
            }
            console.log(this.changeUser)
            setTimeout(() => {
                this.inputFocus = true
            }, 100)
        },
        /* 取消修改 */
        onCancel() {
            this.changeUser.showModal = false
            this.inputFocus = false
        },
        /* 修改用户信息 */
        changeUserMsg() {
            let changeUser = this.changeUser,
                content = {
                    name: this.userMsg.name,
                    email: this.userMsg.hr.email || "",
                    phonenumber: this.userMsg.phonenumber
                };
            if (["name", 'phonenumber'].some(v => v == changeUser.name) && changeUser.changeValue == '') {
                uni.showToast({
                    title: changeUser.title + '不可为空', icon: "none"
                })
                return this.$refs.uModal.loading = false;
            }
            if (changeUser.name == 'name') {
                content.name = queryStr(changeUser.changeValue, '已移除非法字符');
            } else if (changeUser.name == 'email') {
                if (!CheckEmail(changeUser.changeValue.trim())) return this.$refs.uModal.loading = false;
                content.email = changeUser.changeValue.trim();
            } else if (changeUser.name == 'phonenumber') {
                if (!CheckPhoneNumber(changeUser.changeValue.trim())) {
                    uni.showToast({
                        title: "请检查手机号",
                        icon: "none"
                    })
                    return this.$refs.uModal.loading = false;
                }
                if (this.password == "") {
                    uni.showToast({
                        title: "还未输入验证码",
                        icon: "none"
                    })
                    return this.$refs.uModal.loading = false;
                }
                content.phonenumber = changeUser.changeValue.trim();
                content.password = hexMD5(this.password);
            }
            this.$Http.basic({
                id: 20230608105602,
                content
            }).then(res => {
                console.log("修改用户信息", res)
                if (this.cutoff(res.msg, changeUser.title + '修改成功')) return this.$refs.uModal.loading = false;
                this.password = ""
                clearInterval(countDown);
                this.tips = '获取验证码';
                count = 30;
                this.userMsg.name = content.name;
                this.userMsg.hr.email && (this.userMsg.hr.email = content.email);
                this.onCancel();
                this.$emit("getMsg")
            })
        },
        /* 更新用户头像 */
        uploadCallback(attachmentids) {
            let attinfos = [];
            // uni.get
            //删除原本头像
            if (this.userMsg.attinfos.length) this.$Http.basic({
                "classname": "system.attachment.Attachment",
                "method": "deleteFileLink",
                "content": {
                    "linksids": this.userMsg.attinfos.map(v => v.linksid)
                }
            }).then(res => {
                console.log("删除原本头像", res)
                if (this.cutoff(res.msg)) return;
                this.userMsg.attinfos = attinfos;
            })
            //绑定新头像
            if (attachmentids) this.$Http.basic({
                "classname": "system.attachment.Attachment",
                "method": "createFileLink",
                "content": {
                    "ownertable": "sys_users",
                    "ownerid": uni.getStorageSync('userMsg').userid,
                    "usetype": "headportrait",
                    "attachmentids": attachmentids
                }
            }).then(res => {
                console.log("绑定头像", res)
                if (this.cutoff(res.msg)) return;
                this.$emit("getMsg");
                uni.showToast({
                    title: "头像修改成功",
                    icon: "none"
                })
            })
        },
        async getCode() {
            let phonenumber = this.changeUser.changeValue,
                title = "";
            if (phonenumber == "") {
                title = '手机号码不可为空'
            } else if (!CheckPhoneNumber(phonenumber.trim())) {
                title = '请检查手机号码'
            } else {
                if (this.tips == '获取验证码' || this.tips == '重新获取') {
                    let res = await this.$Http.basic({
                        id: 20230608105502,
                        "content": {
                            phonenumber
                        }
                    });
                    console.log("获取短信验证码", res)
                    uni.showToast({
                        title: res.msg,
                        icon: "none"
                    })
                    if (res.data == '失败') return;
                    count -= 1;
                    this.tips = count + 's后可重新获取';
                    countDown = setInterval(() => {
                        if (count == 0) {
                            clearInterval(countDown);
                            this.tips = '重新获取';
                            count = 30;
                        } else {
                            count -= 1;
                            this.tips = count + 's后可重新获取';
                        }
                    }, 1000)
                } else {
                    title = `${count}秒后可重新获取`
                }
            };
            if (title) uni.showToast({
                title,
                icon: "none"
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.user-center {
    .head-p {
        width: 100%;
        display: flex;
        justify-content: space-between;
        height: 21px;
        font-size: 15px;
        color: #333333;
        line-height: 21px;

        .cuIcon-close {
            padding-left: 10px;
        }
    }

    .portrait-p-box,
    .rests-p-box {
        width: 310px;
        background: #FFFFFF;
        box-sizing: border-box;
        padding-right: 10px;
        border-radius: 4px;
        overflow: hidden;
    }

    .portrait-p-box {
        height: 60px;
        margin-top: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .label {
            font-size: 14px;
            font-family: PingFang SC-Regular, PingFang SC;
            color: #666666;
            margin-left: 15px;
        }

        .content {
            display: flex;
            align-items: center;

            .icon-a-wodetiaozhuan {
                font-size: 18px;
                color: #999;
            }

            .profile-photo {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                overflow: hidden;

                .substitution {
                    width: 32px;
                    line-height: 32px;
                    text-align: center;
                    background: #EFF4FA;

                    .iconfont {
                        font-size: 16px;
                        color: #7C98BB;
                    }
                }
            }
        }
    }

    .rests-p-box {
        margin-top: 10px;

        .row {
            display: flex;
            width: 310px;
            box-sizing: border-box;
            padding: 13px 10px 12px 15px;

            .label {
                min-width: 28px;
                flex: 1;
                font-size: 14px;
                line-height: 20px;
            }

            .content {
                line-height: 20px;
                font-size: 14px;
                color: #333333;

                .icon-a-wodetiaozhuan {
                    font-size: 14px;
                }
            }
        }
    }

    .modal-content {
        width: 100%;

        .title {
            width: 100%;
            text-align: center;
            font-size: 18px;
            color: #333;
        }

        .input {
            width: 100%;
            margin-top: 22px;
            border: 1px solid #888;
            height: 30px;
            line-height: 30px;
            padding-left: 6px;
            font-size: 14px;
            border-radius: 4px;
        }
    }

    /deep/ .uni-input-placeholder,
    /deep/.uni-input-wrapper {
        font-size: 12px;
    }

    /deep/ .u-button__text {
        font-size: 10px !important;
    }
}
</style>