|
|
@@ -0,0 +1,438 @@
|
|
|
+<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>
|
