feat:添加店铺装修页

src/components/CropperModal.tsx

 /*
  * @Author: sunbingqing
  * @Date: 2019-07-26 14:04:00
- * @Last Modified by: zhujian
- * @Last Modified time: 2020-05-07 23:44:30
+ * @Last Modified by: mikey.zhaopeng
+ * @Last Modified time: 2020-11-28 11:40:44
  */
 
 import React, { useState, useEffect } from 'react';
 import { Modal, Row, Col, Button } from 'antd';
 import _ from 'underscore';
-import $ from 'jquery';
+import $  from 'jquery';
 import '@/libs/cropper/cropper.min.css';
 import 'cropper';
 import Upload from '../core/upload';
@@ -18,8 +18,8 @@ import './CropperModal.less';
 interface CropperModalProps {
   title?: string;
   imgUrl?: any;
-  close?: () => void;
-  save?: (value: any) => void;
+  close: () => void;
+  save: (value: any) => void;
   type?: string;
   visible?:boolean
 }
@@ -37,19 +37,19 @@ const CropperModal = (props: CropperModalProps) => {
     $(() => {
       const $image = $('#image');
       const $previews = $('.preview-wrap .preview');
-      $image.cropper({
+      ($image as any).cropper({
         aspectRatio: 1,
         viewMode: 1,
         ready: () => {
-          const $clone = $image.clone().removeClass('cropper-hidden');
+          const $clone = $image.clone().removeClass('cropper-hidden') as any;
           $previews.html($clone);
 
         },
         crop: _.throttle(function (e: any) {
-          const imageData = $(this).cropper('getImageData');
+          const imageData = ($image as any).cropper('getImageData');
           $previews.each(function () {
             const $preview = $(this);
-            const previewWidth = $preview.width();
+            const previewWidth:any= $preview.width();
             const imageScaledRatio = e.width / previewWidth;
             $preview.find('img').css({
               width: imageData.naturalWidth / imageScaledRatio,
@@ -65,8 +65,8 @@ const CropperModal = (props: CropperModalProps) => {
 
   function _handleSave(): any {
     const $image = $('#image');
-    $image.cropper('getCroppedCanvas').toBlob((blob: any) => {
-      Upload.uploadBlobToOSS(blob, 'avatar' + (new Date()).valueOf()).then((imgAddress) => {
+    ($image as any).cropper('getCroppedCanvas').toBlob((blob: any) => {
+      Upload.uploadBlobToOSS(blob, 'avatar' + (new Date()).valueOf()).then((imgAddress:string) => {
         save(imgAddress);
         close();
       });
@@ -79,7 +79,7 @@ const CropperModal = (props: CropperModalProps) => {
     const newUrl = URL.createObjectURL(avatar);
     const $image = $('#image');
     setImgUrl(newUrl);
-    $image.cropper('destroy').attr('src', newUrl);
+    ($image as any).cropper('destroy').attr('src', newUrl);
     initCropper();
   }
 

src/data-source/store/request-apis.ts

+/*
+ * @Author: wufan
+ * @Date: 2020-11-25 18:25:02
+ * @LastEditors: wufan
+ * @LastEditTime: 2020-11-30 17:17:17
+ * @Description: Description
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
 import Service from "@/common/js/service";
 
 export function getEmployeeList(params: object) {
   return Service.Apollo("public/businessMicroWebsite/getMicroWebsiteCouponList", params);
+}
+
+export function getUserList(params: object) {
+  return Service.Apollo("public/businessMicroWebsite/getMicroWebsiteCouponList", params);
+}
+
+export function getStoreDecorationList(params: object) {
+  return Service.Apollo("public/businessMicroWebsite/getMicroWebsiteCouponList", params);
 }
\ No newline at end of file

src/domains/store-domain/storeService.ts

-import { getEmployeeList  } from '@/data-source/store/request-apis';
+/*
+ * @Author: wufan
+ * @Date: 2020-11-25 18:25:02
+ * @LastEditors: wufan
+ * @LastEditTime: 2020-11-30 17:17:01
+ * @Description: Description
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+import { getEmployeeList, getUserList, getStoreDecorationList  } from '@/data-source/store/request-apis';
 
 export default class StoreService {
     // 获取员工列表 
@@ -6,4 +14,20 @@ export default class StoreService {
     return getEmployeeList(params);
   }
 
+  // 删除员工
+  static deleteEmployee(params: any) {
+    return getUserList(params);
+  }
+
+    // 获取用户列表 
+  static getUserList(params: any) {
+    return getUserList(params);
+  }
+
+    // 获取用户列表 
+  static getStoreDecorationList(params: any) {
+    return getStoreDecorationList(params);
+  }
+
+
 }
\ No newline at end of file

src/index.d.ts

 declare module 'jquery'
+declare module 'cropper'
+declare var this: any
\ No newline at end of file

src/index.tsx

 /*
  * @Author: 吴文洁
  * @Date: 2020-04-27 20:35:34
- * @LastEditors: 吴文洁
- * @LastEditTime: 2020-11-09 09:43:33
+ * @LastEditors: wufan
+ * @LastEditTime: 2020-11-30 11:02:00
  * @Description:
  */
 

src/modules/store-manege/EmployeeAddOrEditModal.less

@@ -25,8 +25,10 @@
         background: #E8E8E8; 
         margin:0 auto;  
         margin-bottom: 8px;
-        border-radius: 50%;     
+        border-radius: 50%;  
+        img {
+          width: 60px;
+        }   
       }
-
   }
 }

src/modules/store-manege/EmployeesManagePage.less

@@ -4,9 +4,11 @@
   .operation {
     .edit {
       color: @text-primary;
+      cursor: pointer;
     }
     .delete {
       color: @text-primary;
+      cursor: pointer;
     }
     .divider-line {
       margin: 0 4px;

src/modules/store-manege/EmployeesManagePage.tsx

@@ -2,16 +2,16 @@
  * @Author: wufan
  * @Date: 2020-07-09 14:03:09
  * @Last Modified by: mikey.zhaopeng
- * @Last Modified time: 2020-11-27 16:19:03
+ * @Last Modified time: 2020-11-28 13:53:12
  * 店铺管理-员工管理
  */
 import React, { useEffect, useState } from "react";
 import { withRouter } from "react-router-dom";
 import _ from "underscore";
 import PageControl from "@/components/PageControl";
-import SearchBar from "@/components/SearchBar";
 import { CheckBox } from "@/components";
 import { Button, Table, Tooltip, Modal, message, Row, Col, Input } from "antd";
+import { QuestionCircleOutlined } from '@ant-design/icons';
 import { storeRoleEnum } from "@/domains/store-domain/constants";
 import StoreService from "@/domains/store-domain/storeService";
 import EmployeeAddOrEditModal from './EmployeeAddOrEditModal';
@@ -21,18 +21,24 @@ const { confirm } = Modal;
 const { Search } = Input;
 
 declare var window: any;
+interface RecordTypes {
+ storeUserId: string,
+ role: string
+}
 
 function EmployeesManagePage() {
   const [employeeList, setEmployeeList] = useState([
     {
       name: "赵云",
       phone: "18767118672",
-      identity: "0",
+      role: "0",
+      storeUserId: "0"
     },
     {
         name: "吕布",
         phone: "18767118672",
-        identity: "0",
+        role: "0",
+        storeUserId: "2"
       }
   ]);
   const [query, setQuery] = useState({
@@ -51,7 +57,7 @@ function EmployeesManagePage() {
   const [choosedItem, setChooseItem] = useState({});
 
   useEffect(() => {
-    getEmployeeList();
+    // getEmployeeList();
   }, [query]);
 
   function getEmployeeList() {
@@ -87,17 +93,17 @@ function EmployeesManagePage() {
       },
       {
         title: "身份",
-        dataIndex: "identity",
-        key: "identity",
-        render: (val: string = "1") => {
+        dataIndex: "role",
+        key: "role",
+        render: (val: string, record: RecordTypes) => {
           return <div>{/* {storeRoleEnum[val]} */}</div>;
         },
       },
       {
         title: "操作",
         dataIndex: "operation",
-        render: (val: string, record: { identity: string }) => {
-          return record.identity === "" || record.identity === "1" ? (
+        render: (val: string, record: RecordTypes) => {
+          return record.role === "" || record.role === "1" ? (
             <div className="no-operate">-</div>
           ) : (
             <div className="operation">
@@ -110,7 +116,7 @@ function EmployeesManagePage() {
               <span className="divider-line">{" | "}</span>
               <span
                 className="delete"
-                onClick={() => handleDeleteEmployee(record)}
+                onClick={() => handleDeleteEmployeeConfirm(record)}
               >
                 删除
               </span>
@@ -122,18 +128,35 @@ function EmployeesManagePage() {
   }
 
   function handleEditEmployee(record: object) {
-    setIsModalOpen(true);
     setChooseItem(record);
+    setIsModalOpen(true);
   }
 
-  function handleDeleteEmployee(record: object) {
-
+  function handleDeleteEmployeeConfirm(record: RecordTypes) {
+    return  confirm({
+      title: '你确定要删除此讲师吗？',
+      content: '删除后，讲师将不能登录系统，此操作不能被撤销',
+      icon: <QuestionCircleOutlined />,
+      okText: '删除',
+      okType: 'danger',
+      cancelText: '取消',
+      onOk: () => {
+        handleDeleteEmployee(record.storeUserId);
+      }
+    })
   }
 
+
   function handleToAddEmployee() {
     setIsModalOpen(true);
   }
 
+  function handleDeleteEmployee(storeUserId: string) {
+    StoreService.deleteEmployee(storeUserId).then((res: any) =>{
+      message.success("讲师已删除");
+    });
+  }
+
   function handleQuery(name: string, value: any) {
     const _query = _.clone(query);
     // _query[name] = value;
@@ -156,7 +179,7 @@ function EmployeesManagePage() {
             >
               <div style={{ flex: 1 }}>
                 搜索员工：
-                {/* <Search
+                <Search
                   style={{
                     width: 300,
                     marginRight: 40,
@@ -169,8 +192,8 @@ function EmployeesManagePage() {
                     setQuery(_query);
                   }}
                   onSearch={() => getEmployeeList()}
-                /> */}
-                <Search placeholder="input search text"  style={{ width: 200 }} />
+                />
+                {/* <Search placeholder="input search text"  style={{ width: 200 }} /> */}
               </div>
 
               <div style={{ flex: 1 }}>

src/modules/store-manege/StoreDecorationPage.tsx

+/*
+ * @Author: wufan
+ * @Date: 2020-11-30 10:47:38
+ * @LastEditors: wufan
+ * @LastEditTime: 2020-11-30 17:35:24
+ * @Description: 员工管理页面
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+
+import React, { useEffect, useState } from "react";
+import { withRouter } from "react-router-dom";
+import _ from "underscore";
+import PageControl from "@/components/PageControl";
+import {
+  Table,
+  Modal,
+  message,
+  Row,
+  Col,
+  Input,
+  DatePicker,
+  Button,
+} from "antd";
+import { QuestionCircleOutlined } from "@ant-design/icons";
+import StoreService from "@/domains/store-domain/storeService";
+
+import "./StoreDecorationPage.less";
+import moment from "moment";
+const { confirm } = Modal;
+const { Search } = Input;
+const { RangePicker } = DatePicker;
+
+declare var window: any;
+
+interface RecordTypes {
+  storeUserId: string;
+  role: string;
+}
+
+function StoreDecorationPage() {
+  const [storeDecorationlist, setStoreDecorationlist] = useState([
+    {
+      name: "赵云",
+      phone: "18767118672",
+      role: "0",
+      storeUserId: "",
+    },
+    {
+      name: "吕布",
+      phone: "18767118672",
+      role: "0",
+      storeUserId: "",
+    },
+  ]);
+  const [query, setQuery] = useState({
+    current: 0,
+    size: 10,
+    name: "",
+    phone: "",
+    identity: "ALL",
+    instId: "1837447" || window.currentUserInstInfo.instId,
+    registerStartDate: null,
+    registerEndDate: null,
+  });
+  const [total, setTotal] = useState(0);
+  const [model, setModel] = useState(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isManager, setIsManager] = useState(true);
+  const [isNormal, setIsNormal] = useState(true);
+  const [choosedItem, setChooseItem] = useState({});
+
+  useEffect(() => {
+    // getStoreDecorationList();
+  }, [query]);
+
+  function getStoreDecorationList() {
+    let _query = _.clone(query);
+    _query.current = query.current + 1;
+    StoreService.getStoreDecorationList(_query).then((res: any) => {
+      console.log(res.result.records);
+      setStoreDecorationlist(res.result.records);
+      setTotal(res.result.total);
+    });
+  }
+
+  function handleReplaceDecoration(record: RecordTypes) {}
+
+  function handleDeleteDecoration(record: RecordTypes) {}
+
+  function handleDeleteDecorationConfirm(record: RecordTypes) {
+    return confirm({
+      title: "你确定要删除这个banner吗？",
+      icon: <QuestionCircleOutlined />,
+      okText: "删除",
+      okType: "danger",
+      cancelText: "取消",
+      onOk: () => {
+        handleDeleteDecoration(record);
+      },
+    });
+  }
+
+  function parseColumn() {
+    return [
+      {
+        title: "用户姓名",
+        dataIndex: "name",
+        render: (val: string) => {
+          return (
+            <div className="coupon-info">
+              <span className="title">{val}</span>
+            </div>
+          );
+        },
+      },
+      {
+        title: "手机号",
+        dataIndex: "phone",
+        key: "phone",
+        render: (val: string) => {
+          return <div>{val}</div>;
+        },
+      },
+      {
+        title: "注册时间",
+        dataIndex: "registerDate",
+        key: "registerDate",
+        render: (val: string) => {
+          return <div>{moment(val).format("YYYY-MM-DD HH:mm:ss")}</div>;
+        },
+      },
+      {
+        title: "操作",
+        dataIndex: "operation",
+        render: (val: string, record: RecordTypes) => {
+          return record.role === "" || record.role === "1" ? (
+            <div className="no-operate">-</div>
+          ) : (
+            <div className="operation">
+              <span
+                className="edit"
+                onClick={() => handleReplaceDecoration(record)}
+              >
+                替换
+              </span>
+              <span className="divider-line">{" | "}</span>
+              <span
+                className="delete"
+                onClick={() => handleDeleteDecoration(record)}
+              >
+                删除
+              </span>
+            </div>
+          );
+        },
+      },
+    ];
+  }
+
+  function handleQuery(name: string, value: any) {
+    const _query = _.clone(query);
+    // _query[name] = value;
+    setQuery(_query);
+  }
+
+  function handleToAddStoreDecoration() {}
+
+  return (
+    <div className="page user-manage-page">
+      <div className="page-content">
+        <div className="content-header">店铺装修</div>
+        <div className="box">
+          <div className="box-header">
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                padding: "15px 0 10px",
+              }}
+            >
+              <div style={{ flex: 1 }}>banner设置</div>
+            </div>
+            <Button
+              onClick={() => {
+                handleToAddStoreDecoration();
+              }}
+              type="primary"
+              className="add-show-btn"
+            >
+              添加Banner
+            </Button>
+          </div>
+          <div className="box-body">
+            <Table
+              size={"middle"}
+              pagination={false}
+              dataSource={storeDecorationlist}
+              columns={parseColumn()}
+              rowKey={(item: any) => item.id}
+              bordered
+            />
+          </div>
+          <div className="box-footer">
+            <PageControl
+              current={query.current}
+              pageSize={query.size}
+              total={total}
+              toPage={(page) => {
+                const queryStates = _.clone(query);
+                queryStates.current = page;
+                setQuery(queryStates);
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default withRouter(StoreDecorationPage);

src/modules/store-manege/UserManagePage.tsx

+/*
+ * @Author: wufan
+ * @Date: 2020-11-30 10:47:38
+ * @LastEditors: wufan
+ * @LastEditTime: 2020-11-30 14:37:03
+ * @Description: 员工管理页面
+ * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
+ */
+
+import React, { useEffect, useState } from "react";
+import { withRouter } from "react-router-dom";
+import _ from "underscore";
+import PageControl from "@/components/PageControl";
+import {
+  Table,
+  Modal,
+  message,
+  Row,
+  Col,
+  Input,
+  DatePicker,
+} from "antd";
+import StoreService from "@/domains/store-domain/storeService";
+
+import "./UserManagePage.less";
+import moment from "moment";
+const { confirm } = Modal;
+const { Search } = Input;
+const { RangePicker } = DatePicker;
+const dateFormat = "YYYY-MM-DD";
+
+declare var window: any;
+
+function UserManagePage() {
+  const [userList, setUserList] = useState([
+    {
+      name: "赵云",
+      phone: "18767118672",
+      role: "0",
+    },
+    {
+      name: "吕布",
+      phone: "18767118672",
+      role: "0",
+    },
+  ]);
+  const [query, setQuery] = useState({
+    current: 0,
+    size: 10,
+    name: "",
+    phone: "",
+    identity: "ALL",
+    instId: "1837447" || window.currentUserInstInfo.instId,
+    registerStartDate: null,
+    registerEndDate: null,
+  });
+  const [total, setTotal] = useState(0);
+  const [model, setModel] = useState(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isManager, setIsManager] = useState(true);
+  const [isNormal, setIsNormal] = useState(true);
+  const [choosedItem, setChooseItem] = useState({});
+
+  useEffect(() => {
+    // getUserList();
+  }, [query]);
+
+  function getUserList() {
+    let _query = _.clone(query);
+    _query.current = query.current + 1;
+    StoreService.getUserList(_query).then((res: any) => {
+      console.log(res.result.records);
+      setUserList(res.result.records);
+      setTotal(res.result.total);
+    });
+  }
+
+  function parseColumn() {
+    return [
+      {
+        title: "用户姓名",
+        dataIndex: "name",
+        render: (val: string) => {
+          return (
+            <div className="coupon-info">
+              <span className="title">{val}</span>
+            </div>
+          );
+        },
+      },
+      {
+        title: "手机号",
+        dataIndex: "phone",
+        key: "phone",
+        render: (val: string) => {
+          return <div>{val}</div>;
+        },
+      },
+      {
+        title: "注册时间",
+        dataIndex: "registerDate",
+        key: "registerDate",
+        render: (val: string) => {
+        return <div>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</div>;
+        },
+      },
+    ];
+  }
+
+  function handleQuery(name: string, value: any) {
+    const _query = _.clone(query);
+    // _query[name] = value;
+    setQuery(_query);
+  }
+
+  return (
+    <div className=" page user-manage-page">
+      <div className="page-content">
+        <div className="content-header">员工管理</div>
+        <div className="box">
+          <div className="box-header">
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                padding: "15px 0 10px",
+              }}
+            >
+              <div style={{ flex: 1 }}>
+                搜索用户：
+                <Search
+                  style={{
+                    width: 300,
+                    marginRight: 40,
+                  }}
+                  placeholder="搜索用户姓名/手机号"
+                  onChange={(event) => {
+                    const val = event.target.value;
+                    const _query = { ...query };
+                    _query.name = val;
+                    setQuery(_query);
+                  }}
+                  onSearch={() => getUserList()}
+                />
+              </div>
+
+              <div style={{ flex: 1 }}>
+                注册时间：
+                <RangePicker
+                  showTime
+                  style={{ flex: 1, width: "auto" }}
+                  value={
+                    query.registerStartDate
+                      ? [
+                          moment(query.registerStartDate),
+                          moment(query.registerEndDate),
+                        ]
+                      : null
+                  }
+                  format={"YYYY-MM-DD"}
+                  disabledDate={(current) => {
+                    return (
+                      current &&
+                      current.valueOf() > moment().endOf("day").valueOf()
+                    );
+                  }}
+                  onChange={(dates: any) => {
+                    const _query = _.clone(query);
+                    _query.registerStartDate = dates ? dates[0].valueOf(): null;
+                    _query.registerEndDate = dates ? dates[1].valueOf() : null;
+                    setQuery({
+                      ..._query,
+                      current: 1,
+                    });
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+          <div className="box-body">
+            <Table
+              size={"middle"}
+              pagination={false}
+              dataSource={userList}
+              columns={parseColumn()}
+              rowKey={(item: any) => item.id}
+              bordered
+            />
+          </div>
+          <div className="box-footer">
+            <PageControl
+              current={query.current}
+              pageSize={query.size}
+              total={total}
+              toPage={(page) => {
+                const queryStates = _.clone(query);
+                queryStates.current = page;
+                setQuery(queryStates);
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default withRouter(UserManagePage);

src/routes/config/mainRoutes.tsx

 /*
  * @Author: 吴文洁
  * @Date: 2020-04-29 10:26:32
- * @LastEditors: 吴文洁
- * @LastEditTime: 2020-08-27 10:07:47
+ * @LastEditors: wufan
+ * @LastEditTime: 2020-11-30 15:59:10
  * @Description: 内容线路由配置
  */
 import TestPage from '@/modules/test';
 import EmployeesManagePage from '@/modules/store-manege/EmployeesManagePage';
 import personalInfoPage from '@/modules/personalInfo';
+import UserManagePage from '@/modules/store-manege/UserManagePage';
+import StoreDecorationPage from '@/modules/store-manege/StoreDecorationPage';
 
 const mainRoutes = [
   {
@@ -18,13 +20,23 @@ const mainRoutes = [
   {
     path: '/employees-manage',
 		component: EmployeesManagePage,
-		name: '首页'
+		name: '员工管理'
   },
   {
     path: '/personal-info',
 		component: personalInfoPage,
 		name: '个人信息'
   },
+  {
+    path: '/user-manage',
+		component: UserManagePage,
+		name: '用户管理'
+  },
+  {
+    path: '/store-decoration',
+		component: StoreDecorationPage,
+		name: '店铺装修'
+  },
 ]
 
 export default mainRoutes;
\ No newline at end of file