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

src/common/js/user.ts

@@ -2,7 +2,7 @@
  * @Author: 吴文洁
  * @Author: 吴文洁
  * @Date: 2020-08-31 09:34:25
  * @Date: 2020-08-31 09:34:25
  * @LastEditors: wufan
  * @LastEditors: wufan
- * @LastEditTime: 2021-01-09 10:56:11
+ * @LastEditTime: 2021-01-09 15:50:08
  * @Description: 
  * @Description: 
  * @Copyright: 杭州杰竞科技有限公司 版权所有
  * @Copyright: 杭州杰竞科技有限公司 版权所有
  */
  */
@@ -48,7 +48,7 @@ class User {
   }
   }
 
 
   setStoreType(value:any){
   setStoreType(value:any){
-    return Storage.set(`${PREFIX}_storetYPE`,value) 
+    return Storage.set(`${PREFIX}_storeType`,value) 
   }
   }
 
 
   setStoreUserId(value:any){
   setStoreUserId(value:any){

src/modules/personalInfo/index.less

 .personal-info-page{
 .personal-info-page{
     .page-content{
     .page-content{
         .box{
         .box{
-            padding:60px !important;
+            padding: 60px 60px 60px 40px !important;
         }
         }
-      
         .label{
         .label{
-            width:56px;
+            width:84px;
             text-align:right;
             text-align:right;
             font-size: 14px;
             font-size: 14px;
             color: #666666;
             color: #666666;

src/modules/personalInfo/index.tsx

 /*
 /*
  * @Author: zhangleyuan
  * @Author: zhangleyuan
  * @Date: 2020-11-27 15:06:31
  * @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: 描述一下
  * @Description: 描述一下
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
  */
 
 
-
-import React, { useEffect, useState,useContext } from "react";
+import React, { useEffect, useState, useContext } from "react";
 import { withRouter } from "react-router-dom";
 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 BaseService from "@/domains/basic-domain/baseService";
 import StoreService from "@/domains/store-domain/storeService";
 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() {
 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 [imgUrl, setImgUrl] = useState(avatar);
-  const [nickName,setNickName] = useState('');
+  const [nickName, setNickName] = useState("");
   const [cropperModalVisible, setCropperModalVisible] = useState(false);
   const [cropperModalVisible, setCropperModalVisible] = useState(false);
-  const [IdentificationModalVisible, setIdentificationModalVisible] = useState(false);
+  const [IdentificationModalVisible, setIdentificationModalVisible] = useState(
+    false
+  );
   const [changePhoneModalVisible, setChangePhoneModalVisible] = 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 ctx: any = useContext(XMContext);
   const userId = User.getUserId();
   const userId = User.getUserId();
+  
   window.ctx = ctx;
   window.ctx = ctx;
   useEffect(() => {
   useEffect(() => {
     storeUserId && getUserInfo();
     storeUserId && getUserInfo();
-  },[storeUserId])
-  function getUserInfo(){
-    const param ={
-      storeUserId:User.getStoreUserId()
-    }
+  }, [storeUserId]);
+  
+  function getUserInfo() {
+    const param = {
+      storeUserId: User.getStoreUserId(),
+    };
     BaseService.getStoreUser(param).then((res) => {
     BaseService.getStoreUser(param).then((res) => {
-      const {nickName,phone,roleCodes} = res.result;
+      const { nickName, phone, roleCodes, weChatAccount } = res.result;
       setNickName(nickName);
       setNickName(nickName);
       setPhone(phone);
       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 {
   function _handleUpdateAvatar(e: any): any {
-    console.log('update');
+    console.log("update");
     const avatar = e.target.files[0];
     const avatar = e.target.files[0];
     const newUrl = URL.createObjectURL(avatar);
     const newUrl = URL.createObjectURL(avatar);
-    const $image = $('#image');
+    const $image = $("#image");
     setImgUrl(newUrl);
     setImgUrl(newUrl);
     setCropperModalVisible(true);
     setCropperModalVisible(true);
   }
   }
 
 
   function _onUpload(): any {
   function _onUpload(): any {
-    $('#CrpperAvatarPic').trigger('click');
+    $("#CrpperAvatarPic").trigger("click");
   }
   }
 
 
-  function changeAvatar(img:string):any{
+  function changeAvatar(img: string): any {
     setAvatar(img);
     setAvatar(img);
     setImgUrl(img);
     setImgUrl(img);
   }
   }
 
 
-  function closeCropperModal():any {
+  function closeCropperModal(): any {
     setCropperModalVisible(false);
     setCropperModalVisible(false);
   }
   }
-  function identificationConfirm():any {
+
+  function identificationConfirm(): any {
     setIdentificationModalVisible(false);
     setIdentificationModalVisible(false);
     setChangePhoneModalVisible(true);
     setChangePhoneModalVisible(true);
   }
   }
-  function saveUserInfo(){ 
+
+  function saveUserInfo() {
     const params = {
     const params = {
       nickName,
       nickName,
       phone: String(phone),
       phone: String(phone),
-      roleCodes:roleCodes,
+      roleCodes: roleCodes,
       avatar,
       avatar,
-      storeUserId:User.getStoreUserId()
+      storeUserId: User.getStoreUserId(),
     };
     };
     StoreService.editEmployee(params).then((res) => {
     StoreService.editEmployee(params).then((res) => {
       getStoreGroupAndStoreList();
       getStoreGroupAndStoreList();
       message.success("保存成功");
       message.success("保存成功");
     });
     });
   }
   }
+
   function getStoreGroupAndStoreList() {
   function getStoreGroupAndStoreList() {
     BaseService.getUserStore({ userId }).then((res) => {
     BaseService.getUserStore({ userId }).then((res) => {
-      const {storeVOS = [] } = res.result;
+      const { storeVOS = [] } = res.result;
       ctx.dispatch(setStoreList(storeVOS));
       ctx.dispatch(setStoreList(storeVOS));
     });
     });
   }
   }
-  function changePhoneConfirm(phone:any){
+
+  function changePhoneConfirm(phone: any) {
     setPhone(phone);
     setPhone(phone);
   }
   }
+
+console.log('User.getStoreType()',User.getStoreType());
   return (
   return (
     <div className="page personal-info-page">
     <div className="page personal-info-page">
       <div className="page-content">
       <div className="page-content">
-        <div className="content-header"> 
-            个人设置
-        </div>
+        <div className="content-header">个人设置</div>
         <div className="box">
         <div className="box">
-        <Form>
-          <div className="avatat-item">
-            <span className="label">头像：</span>
-            <input
-              type="file"
-              accept="image/*"
-              value={''}
-              id="CrpperAvatarPic"
-              style={{ display: 'none' }}
-              onChange={_handleUpdateAvatar} />
+          <Form>
+            <div className="avatat-item">
+              <span className="label">头像：</span>
+              <input
+                type="file"
+                accept="image/*"
+                value={""}
+                id="CrpperAvatarPic"
+                style={{ display: "none" }}
+                onChange={_handleUpdateAvatar}
+              />
               <img className="avatar" src={avatar}></img>
               <img className="avatar" src={avatar}></img>
               <span className="avatar-cover" onClick={_onUpload}>
               <span className="avatar-cover" onClick={_onUpload}>
-                  <span className="icon iconfont pen">
-                    &#xe82c;
-                  </span>
+                <span className="icon iconfont pen">&#xe82c;</span>
               </span>
               </span>
-            { cropperModalVisible &&
-              <CropperModal 
-                imgUrl={imgUrl}
-                save={changeAvatar}
-                close={closeCropperModal}
+              {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}
+                maxLength={15}
+                onChange={(e) => {
+                  setNickName(e.target.value);
+                }}
               />
               />
-            }
-          </div>
-          <div className="name-item">
-            <span className="label">昵称：</span>
-            <Input
-              placeholder="请输入姓名，最多15个字" 
-              style={{ width:300,height:32}} value={nickName}  
-              maxLength={15}
-              onChange={(e) => { 
-                setNickName(e.target.value);
-              }}
-            />
-          </div>
-          <div className="phone-item">
-            <span className="label">手机号：</span>
-            <span>{phone}</span>
-            <Button className="changePhoneBtn" onClick={()=>{setIdentificationModalVisible(true)}}>更换手机号</Button>
-          </div>
-          <div>
-            <Button type="primary" onClick={()=>{saveUserInfo()}}>保存</Button>
-          </div>
-        </Form>
+            </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>
+              </div>
+            )}
+            <div>
+              <Button
+                type="primary"
+                onClick={() => {
+                  saveUserInfo();
+                }}
+              >
+                保存
+              </Button>
+            </div>
+          </Form>
         </div>
         </div>
-        {
-          IdentificationModalVisible  && <IdentificationModal  phone={phone} onClose={()=>{setIdentificationModalVisible(false)}} onConfirm={()=>{identificationConfirm()}}/>
-        }
-        
-        {
-          changePhoneModalVisible  && <ChangePhoneModal   onClose={()=>{setChangePhoneModalVisible(false)}}  onConfirm={changePhoneConfirm}/>
-        }
+        {IdentificationModalVisible && (
+          <IdentificationModal
+            phone={phone}
+            onClose={() => {
+              setIdentificationModalVisible(false);
+            }}
+            onConfirm={() => {
+              identificationConfirm();
+            }}
+          />
+        )}
+
+        {changePhoneModalVisible && (
+          <ChangePhoneModal
+            onClose={() => {
+              setChangePhoneModalVisible(false);
+            }}
+            onConfirm={changePhoneConfirm}
+          />
+        )}
       </div>
       </div>
-      
     </div>
     </div>
   );
   );
 }
 }