Skip to content

X
xiaomai-cloud-class-web
Commit ef85c884 by wufan
Options

feat:个人设置页添加企业微信号

parent f85878c0
Showing with 111 additions and 67 deletions
src/common/js/user.ts
......@@ -2,7 +2,7 @@
* @Author: 吴文洁
* @Date: 2020-08-31 09:34:25
* @LastEditors: wufan
* @LastEditTime: 2021-01-09 10:56:11
* @LastEditTime: 2021-01-09 15:50:08
* @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
......@@ -48,7 +48,7 @@ class User {
}
setStoreType(value:any){
return Storage.set(`${PREFIX}_storetYPE`,value)
return Storage.set(`${PREFIX}_storeType`,value)
}
setStoreUserId(value:any){
......
src/modules/personalInfo/index.less
.personal-info-page{
.page-content{
.box{
padding:60px !important;
padding: 60px 60px 60px 40px !important;
}
.label{
width:56px;
width:84px;
text-align:right;
font-size: 14px;
color: #666666;
......
src/modules/personalInfo/index.tsx
/*
* @Author: zhangleyuan
* @Date: 2020-11-27 15:06:31
* @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-28 14:27:02
* @LastEditors: wufan
* @LastEditTime: 2021-01-09 15:47:58
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { useEffect, useState,useContext } from "react";
import React, { useEffect, useState, useContext } from "react";
import { withRouter } from "react-router-dom";
import {Form,Button,Input,message} from "antd";
import _ from 'underscore';
import $ from 'jquery';
import {CropperModal} from '@/components/';
import IdentificationModal from './IdentificationModal';
import ChangePhoneModal from './ChangePhoneModal';
import { Form, Button, Input, message } from "antd";
import _ from "underscore";
import $ from "jquery";
import { CropperModal } from "@/components/";
import IdentificationModal from "./IdentificationModal";
import ChangePhoneModal from "./ChangePhoneModal";
import BaseService from "@/domains/basic-domain/baseService";
import StoreService from "@/domains/store-domain/storeService";
import User from '@/common/js/user';
import './index.less';
import { XMContext } from '@/store/context';
import { setStoreList } from '@/store/actions/index';
import User from "@/common/js/user";
import "./index.less";
import { XMContext } from "@/store/context";
import { setStoreList } from "@/store/actions/index";
function PersonalInfoPage() {
const [avatar,setAvatar] = useState('https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png');
const [avatar, setAvatar] = useState(
"https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png"
);
const [imgUrl, setImgUrl] = useState(avatar);
const [nickName,setNickName] = useState('');
const [nickName, setNickName] = useState("");
const [cropperModalVisible, setCropperModalVisible] = useState(false);
const [IdentificationModalVisible, setIdentificationModalVisible] = useState(false);
const [IdentificationModalVisible, setIdentificationModalVisible] = useState(
false
);
const [changePhoneModalVisible, setChangePhoneModalVisible] = useState(false);
const [roleCodes,setRoleCodes] = useState([])
const [phone,setPhone] = useState("");
const storeUserId = User.getStoreUserId()
const [roleCodes, setRoleCodes] = useState([]);
const [phone, setPhone] = useState("");
const [weChatAccount, setWeChatAccount] = useState("");
const storeUserId = User.getStoreUserId();
const ctx: any = useContext(XMContext);
const userId = User.getUserId();
window.ctx = ctx;
useEffect(() => {
storeUserId && getUserInfo();
},[storeUserId])
function getUserInfo(){
const param ={
storeUserId:User.getStoreUserId()
}
}, [storeUserId]);
function getUserInfo() {
const param = {
storeUserId: User.getStoreUserId(),
};
BaseService.getStoreUser(param).then((res) => {
const {nickName,phone,roleCodes} = res.result;
const { nickName, phone, roleCodes, weChatAccount } = res.result;
setNickName(nickName);
setPhone(phone);
setRoleCodes(roleCodes)
if(res.result.avatar){
setAvatar(res.result.avatar)
setRoleCodes(roleCodes);
setWeChatAccount(weChatAccount);
if (res.result.avatar) {
setAvatar(res.result.avatar);
}
});
}
function _handleUpdateAvatar(e: any): any {
console.log('update');
console.log("update");
const avatar = e.target.files[0];
const newUrl = URL.createObjectURL(avatar);
const $image = $('#image');
const $image = $("#image");
setImgUrl(newUrl);
setCropperModalVisible(true);
}
function _onUpload(): any {
$('#CrpperAvatarPic').trigger('click');
$("#CrpperAvatarPic").trigger("click");
}
function changeAvatar(img:string):any{
function changeAvatar(img: string): any {
setAvatar(img);
setImgUrl(img);
}
function closeCropperModal():any {
function closeCropperModal(): any {
setCropperModalVisible(false);
}
function identificationConfirm():any {
function identificationConfirm(): any {
setIdentificationModalVisible(false);
setChangePhoneModalVisible(true);
}
function saveUserInfo(){
function saveUserInfo() {
const params = {
nickName,
phone: String(phone),
roleCodes:roleCodes,
roleCodes: roleCodes,
avatar,
storeUserId:User.getStoreUserId()
storeUserId: User.getStoreUserId(),
};
StoreService.editEmployee(params).then((res) => {
getStoreGroupAndStoreList();
message.success("保存成功");
});
}
function getStoreGroupAndStoreList() {
BaseService.getUserStore({ userId }).then((res) => {
const {storeVOS = [] } = res.result;
const { storeVOS = [] } = res.result;
ctx.dispatch(setStoreList(storeVOS));
});
}
function changePhoneConfirm(phone:any){
function changePhoneConfirm(phone: any) {
setPhone(phone);
}
console.log('User.getStoreType()',User.getStoreType());
return (
<div className="page personal-info-page">
<div className="page-content">
<div className="content-header">
个人设置
</div>
<div className="content-header">个人设置</div>
<div className="box">
<Form>
<div className="avatat-item">
......@@ -113,54 +125,87 @@ function PersonalInfoPage() {
<input
type="file"
accept="image/*"
value={''}
value={""}
id="CrpperAvatarPic"
style={{ display: 'none' }}
onChange={_handleUpdateAvatar} />
style={{ display: "none" }}
onChange={_handleUpdateAvatar}
/>
<img className="avatar" src={avatar}></img>
<span className="avatar-cover" onClick={_onUpload}>
<span className="icon iconfont pen">
&#xe82c;
</span>
<span className="icon iconfont pen">&#xe82c;</span>
</span>
{ cropperModalVisible &&
{cropperModalVisible && (
<CropperModal
imgUrl={imgUrl}
save={changeAvatar}
close={closeCropperModal}
/>
}
)}
</div>
<div className="name-item">
<span className="label">昵称：</span>
<Input
placeholder="请输入姓名，最多15个字"
style={{ width:300,height:32}} value={nickName}
style={{ width: 300, height: 32 }}
value={nickName}
maxLength={15}
onChange={(e) => {
setNickName(e.target.value);
}}
/>
</div>
{User.getStoreType() === "WE_CHAT_STORE" ? (
<div className="phone-item">
<span className="label">企业微信号：</span>
<span>{weChatAccount}</span>
</div>
) : (
<div className="phone-item">
<span className="label">手机号：</span>
<span>{phone}</span>
<Button className="changePhoneBtn" onClick={()=>{setIdentificationModalVisible(true)}}>更换手机号</Button>
<Button
className="changePhoneBtn"
onClick={() => {
setIdentificationModalVisible(true);
}}
>
更换手机号
</Button>
</div>
)}
<div>
<Button type="primary" onClick={()=>{saveUserInfo()}}>保存</Button>
<Button
type="primary"
onClick={() => {
saveUserInfo();
}}
>
保存
</Button>
</div>
</Form>
</div>
{
IdentificationModalVisible && <IdentificationModal phone={phone} onClose={()=>{setIdentificationModalVisible(false)}} onConfirm={()=>{identificationConfirm()}}/>
}
{IdentificationModalVisible && (
<IdentificationModal
phone={phone}
onClose={() => {
setIdentificationModalVisible(false);
}}
onConfirm={() => {
identificationConfirm();
}}
/>
)}
{
changePhoneModalVisible && <ChangePhoneModal onClose={()=>{setChangePhoneModalVisible(false)}} onConfirm={changePhoneConfirm}/>
}
{changePhoneModalVisible && (
<ChangePhoneModal
onClose={() => {
setChangePhoneModalVisible(false);
}}
onConfirm={changePhoneConfirm}
/>
)}
</div>
</div>
);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment