@titaui/pc 1.7.13 → 1.7.17

package/src/components/okrcase-library/index.tsx

@@ -0,0 +1,375 @@
+import React, { useEffect, useState, useRef } from 'react';
+import ScrollBar from 'react-perfect-scrollbar'
+import CaseLibraryHeader from './okrcases-components/caseLibray-header'
+import CaseLibraryNav from './okrcases-components/caseLibrary-nav'
+import CaseLibraryMain from './okrcases-components/caseLibrary-main'
+import { SubmitDialog, PayDialog } from './okrcases-components/submitOkr-dialog'
+import { postForCases, getLabels, postSearchCases, gettotalNumber, getIsHadBuyOKRcases } from './server/network'
+
+import './index.scss';
+import './new-ui.scss';
+
+interface Props {
+  onApplyTpl: Function;
+  onClose?: Function;
+}
+
+export type NavList = NavItem[]
+
+export interface NavItem {
+  id: number,
+  name: string,
+  orderNumber: number,
+  subTotal: string,
+  subLabel?: NavList
+}
+
+export type CardList = CardItem[]
+
+export interface CardItem {
+  description: null
+  id: number;
+  name: string;
+  orderNumber: number;
+  parentId: number;
+  parentName: string;
+  parentType: number;
+  subelements: CardList;
+  type: number;
+  usedNum: number;
+  isLike: boolean;
+  like: number;
+}
+
+// @ts-ignore
+const prefix = BSGlobal.tenantInfo.isNewIndex ? 'titaui-okr-cases-library' : 'okr-cases-library';
+
+const OKRCases = (props: Props) => {
+  const { onApplyTpl, onClose } = props
+
+  const [isUnlock, setIsUnlock] = useState(false)//是否解锁
+  const [navList, setNavList] = useState<NavList>([])//nav列表
+  const [cardList, setCardList] = useState<CardList>([])//案例列表
+  const [okrCasesNum, setOrkCasesNum] = useState(0)//案例总数
+  const [isfix, setIsfix] = useState(false)//首nav是否吸顶
+  const [isTouchBottom, setIsTouchBottom] = useState(false)//是否触底
+  const [isShowSubmitOkrWindow, setIsShowSubmitOkrWindow] = useState(false)//提交想要的okr窗口是否显示
+  const [isShowPayWindow, setIsShowPayWindow] = useState(false)//交钱弹窗是否显示
+  const [secondNavList, setSecondNavList] = useState<NavList>([])//二级菜单
+  const [activeNavId, setActiveNavId] = useState(0)//激活菜单id 0是全部
+  const [secondActiveNavId, setSecondActiveNavId] = useState(0)//二级菜单激活id
+  // const [pageNumber, setPageNumber] = useState(1)//请求第几页
+  const [isLoading, setIsLoading] = useState(false)//是否正在加载
+  // const [fixAsideRight, setFixAsideRight] = useState(24)
+  const [isNextPageEmpty, setIsNextPageEmpty] = useState(false)//下一页是否为空
+  const [searchValue, setSearchValue] = useState('')//搜索框内容
+  // const [fixAsideRightScroll, setFixAsideRightScroll] = useState(0)//距离右侧滚动距离
+  const [fixAsideTopScroll, setFixAsideTopScroll] = useState(0)//距离上侧滚动距离
+  // const [isAsideFix, setIsAsideFix] = useState(false)//侧变栏是否fix
+  const [fixNavTopScroll, setFixNavTopScroll] = useState(0)
+
+
+  //与数据无关的不要用state，改用ref
+  // const isTouchBottomRef = useRef(false)//是否触底
+  const pageNumberRef = useRef(1)//请求第几页
+  const totalHeightRef = useRef<any>()//总高度
+  const allViewAreaRef = useRef<any>()//视口高度
+  const asideHeightRef = useRef<any>()//侧边栏高度
+
+  //处理提交想要okr类型的弹窗出现处理
+  const handleShowSubmitOkrWindow = (f) => {
+    setIsShowSubmitOkrWindow(f)
+  }
+
+  //付钱弹窗出现处理
+  const handleShowPayWindow = (f) => {
+    setIsShowPayWindow(f)
+  }
+
+  // 初始化数据
+  // 一级菜单选全部，请求id为0
+  useEffect(() => {
+    //在一开始判断用户是否购买
+    //@ts-ignore
+    getIsHadBuyOKRcases().then(res => {
+      // @ts-ignore          
+      setIsUnlock(res.obj)
+    })
+    //获取1级菜单
+    getLabels().then((res) => {
+      setNavList([{
+        id: 0,
+        name: "全部",
+        orderNumber: 0,
+        subTotal: '',
+        subLabel: []
+      },
+      ...res]
+      )
+    })
+    //获取第一页的案例
+    postForCases({
+      pageNumber: 1,
+      labelId: 0,
+      subLabelId: 0,
+      key: ""
+    }).then(res => {
+      setCardList(res)
+    })
+    //案例总数
+    gettotalNumber().then(res => {
+      setOrkCasesNum(res)
+    })
+
+  }, [])
+
+  // // 屏幕resize事件
+  // const resizeChange = () => {
+  //     if (window.innerWidth < 1366) {
+  //         if (onClose) {
+  //             setFixAsideRight(window.innerWidth - 1366 + 0)
+  //         } else {
+  //             setFixAsideRight(window.innerWidth - 1366 + 12)
+  //         }
+  //     } else {
+  //         if (onClose) {
+  //             if (fixAsideRight !== 0) {
+  //                 setFixAsideRight(0)
+  //             }
+  //         } else {
+  //             if (fixAsideRight !== 12) {
+  //                 setFixAsideRight(12)
+  //             }
+  //         }
+  //     }
+  // }
+  // useEffect(() => {
+  //     window.addEventListener("resize", resizeChange)
+  //     return () => {
+  //         window.removeEventListener("resize", resizeChange);
+  //     }
+  // }, [fixAsideRight])
+
+  //一级菜单选择
+  const handleNavItemClick1 = (num) => {
+    setActiveNavId(num)
+    let work = navList[num]
+    // @ts-ignore
+    window.titaTracker && window.titaTracker('action').record({
+        actionName: work.name,
+        actionGroup: '案例库-各行业',
+        productName: '案例库'
+      })
+    setSearchValue('')
+    //点击选择类型时重新请求数据
+    postForCases({
+      pageNumber: 1,
+      labelId: num,
+      subLabelId: 0,
+      key: ""
+    }).then(res => {
+      setCardList(res)
+    })
+    scrollToAnchor('NavAnchor')
+  }
+
+  //锚点跳转
+  const scrollToAnchor = (anchorName) => {
+    let anchorElement = document.getElementById(anchorName);
+    if (anchorElement) { anchorElement.scrollIntoView(); }
+  }
+
+  //一级菜单改变
+  useEffect(() => {
+    pageNumberRef.current = 1
+    setIsTouchBottom(false)
+    setIsNextPageEmpty(false)
+    //每当一级菜单改变，获取二级菜单
+    navList.map(item => {
+      if (item.id === activeNavId) {
+        const navSecondList = item.subLabel
+        if (activeNavId === 0) {
+          setSecondNavList(navSecondList as NavList)
+        } else {
+          setSecondNavList([{
+            id: 0,
+            //@ts-ignore
+            name: `全部 ${item.subTotal == 0 ? '' : item.subTotal}`,
+            orderNumber: 0,
+            subTotal: ''
+          }, ...navSecondList as NavList])
+        }
+
+      }
+    });
+    setSecondActiveNavId(0)
+  }, [activeNavId])
+
+
+  //二级菜单选择
+  const handleSecondNavItemClick = (num) => {
+    if (isUnlock) {
+      setIsTouchBottom(false)
+      pageNumberRef.current = 1
+      setIsNextPageEmpty(false)
+      setSearchValue('')
+      setSecondActiveNavId(num)
+      postForCases(
+        {
+          pageNumber: 1,
+          labelId: activeNavId,
+          subLabelId: num,
+          key: ""
+        }).then(res => {
+          setCardList(res)
+        })
+    } else {
+      setIsShowPayWindow(true)
+    }
+  }
+
+  //搜索
+  const handleSearch = (value) => {
+    setActiveNavId(0)
+    pageNumberRef.current = 1
+    setIsNextPageEmpty(false)
+    setSearchValue(value)
+
+    postSearchCases(value).then(res => {
+      setCardList(res.Data)
+    })
+  }
+
+  //划到底时加载新的 --懒加载
+  useEffect(() => {
+    if (isTouchBottom) {
+      pageNumberRef.current += 1
+
+      if (!isUnlock && pageNumberRef.current > 2 || isNextPageEmpty) {
+        return
+      }
+      setIsLoading(true)
+
+      if (searchValue) {
+        postSearchCases(searchValue, pageNumberRef.current).then(res => {
+          if (res.Data.length) {
+            setCardList([...cardList, ...res.Data])
+          } else {
+            setIsNextPageEmpty(true)
+          }
+          setIsLoading(false)
+          setIsTouchBottom(false)
+        })
+      } else {
+        postForCases({
+          labelId: activeNavId,
+          subLabelId: secondActiveNavId,
+          key: '',
+          pageNumber: pageNumberRef.current,
+        }).then(res => {
+          if (res.length) {
+            setCardList([...cardList, ...res])
+          } else {
+            setIsNextPageEmpty(true)
+          }
+          setIsLoading(false)
+          setIsTouchBottom(false)
+        })
+
+      }
+    }
+  }, [isTouchBottom, searchValue])
+
+  // 下划事件，定位和懒加载
+  const handleScroll = (e) => {
+
+    let scrollHeight = e.target.scrollTop
+
+    if (scrollHeight > 239 && e.target.tagName !== 'TEXTAREA') {
+      //顶部吸顶
+      !isfix && setIsfix(true)
+      const NavTopScroll = scrollHeight
+      setFixNavTopScroll(NavTopScroll)
+
+      //文章吸底
+      const AsideTopScroll =
+        activeNavId === 0
+          ? scrollHeight - 240 + allViewAreaRef.current.clientHeight - asideHeightRef.current.clientHeight - 89
+          : scrollHeight - 240 + allViewAreaRef.current.clientHeight - asideHeightRef.current.clientHeight - 131
+      setFixAsideTopScroll(AsideTopScroll)
+
+    } else {
+      isfix && setIsfix(false)
+    }
+
+    // //当选择全部时，距离顶部少了42
+    // const offTopDiff = activeNavId === 0 ? 0 : 42
+    // //判断吸底
+    // if (allViewAreaRef.current.clientHeight - asideHeightRef.current.clientHeight + scrollHeight > 324 + offTopDiff) {
+    //     !isAsideFix && setIsAsideFix(true)
+    //     const AsideTopScroll = scrollHeight - 240 + allViewAreaRef.current.clientHeight - asideHeightRef.current.clientHeight - 79 - offTopDiff
+    //     setFixAsideTopScroll(AsideTopScroll)
+    // } else {
+    //     isAsideFix && setIsAsideFix(false)
+    // }
+
+    //懒加载
+    if (totalHeightRef.current.clientHeight <= allViewAreaRef.current.clientHeight + scrollHeight + 200) {
+      setIsTouchBottom(true)
+    }
+  }
+
+  return (
+    <div className='okrCases-container' ref={allViewAreaRef} id="123"
+      style={{ height: 'calc(100vh - 40px)' }} onScroll={e => handleScroll(e)}>
+      <ScrollBar  >
+        <div className={prefix} ref={totalHeightRef} style={{ minWidth: onClose ? '1366px' : '1163px' }}>
+          <CaseLibraryHeader
+            onClose={onClose}
+            handleSearch={handleSearch}
+          />
+          <CaseLibraryNav
+            onClose={onClose}
+            navList={navList}
+            isfix={isfix}
+            handleNavItemClick={handleNavItemClick1}
+            activeNavId={activeNavId}
+            handleSearch={handleSearch}
+            secondActiveNavId={secondActiveNavId}
+            secondNavList={secondNavList}
+            handleSecondNavItemClick={handleSecondNavItemClick}
+            cardList={cardList}
+            fixNavTopScroll={fixNavTopScroll}
+          />
+          <CaseLibraryMain
+            cardList={cardList}
+            isUnlock={isUnlock}
+            onApplyTpl={onApplyTpl}
+            okrCasesNum={okrCasesNum}
+            handleShowSubmitOkrWindow={handleShowSubmitOkrWindow}
+            handleShowPayWindow={handleShowPayWindow}
+            isfix={isfix}
+            isLoading={isLoading}
+            activeNavId={activeNavId}
+            onClose={onClose}
+            fixAsideTopScroll={fixAsideTopScroll}
+            asideHeightRef={asideHeightRef}
+          // isAsideFix={isAsideFix}
+          />
+          <SubmitDialog
+            isShowSubmitOkrWindow={isShowSubmitOkrWindow}
+            handleShowSubmitOkrWindow={handleShowSubmitOkrWindow}
+            allViewAreaRef={allViewAreaRef}
+          />
+          <PayDialog
+            isShowPayWindow={isShowPayWindow}
+            handleShowPayWindow={handleShowPayWindow}
+            allViewAreaRef={allViewAreaRef}
+          />
+        </div>
+      </ScrollBar >
+    </div>
+  )
+}
+
+export default OKRCases

package/src/components/okrcase-library/new-ui.scss

@@ -0,0 +1,59 @@
+.titaui-okr-cases-library {
+  display: flex;
+  flex-direction: column;
+  .okr-cases-library__header {
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+  }
+  .okr-cases-library__header-light {
+    background: transparent;
+  }
+  .okr-cases-library__navFirst {
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+    box-sizing: border-box;
+    width: auto;
+  }
+  .okr-cases-library__navFirst__item {
+    word-break: keep-all;
+  }
+  .okr-cases-library__navFirst-fixed {
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 1163px;
+  }
+  .okr-cases-library__navSecond {
+    padding: 0 22px;
+    box-sizing: border-box;
+    width: auto;
+  }
+  .okr-cases-library__mainContainer {
+    padding-left: 0;
+  }
+  .okr-cases-library__cardList__card {
+    border-radius: 12px;
+  }
+  .okr-cases-library__aside__submitWant {
+    border-radius: 12px;
+  }
+  .okr-cases-library__aside__advertise {
+    border-radius: 12px;
+    background-color: transparent;
+  }
+  .okr-cases-library__aside__essay {
+    border-radius: 12px;
+  }
+  .okr-cases-library__navSecond__item {
+    color: #3f4755;
+  }
+  .okr-cases-library__aside {
+    margin-right: 0;
+    width: 298px;
+  }
+  .okr-cases-library__aside__memberInfo {
+    width: 100%;
+    box-sizing: border-box;
+  }
+}

package/src/components/okrcase-library/okrcases-components/caseLibrary-cardList/index.tsx

@@ -0,0 +1,53 @@
+import React, { Fragment, useEffect } from "react";
+import OkrCaseCard from './okrcase-card'
+import { CardList } from '../../index'
+import lottie from 'lottie-web'
+import animateJson from '../../image/data.json'
+
+interface Props {
+  cardList: CardList;
+  isUnlock: boolean;
+  handleShowPayWindow: Function;
+  handleShowSubmitOkrWindow: Function;
+  onApplyTpl: Function;
+  isLoading: boolean;
+}
+
+const OkrCaseCardLsit = (props: Props) => {
+
+  const { cardList, isUnlock, handleShowPayWindow, handleShowSubmitOkrWindow, onApplyTpl, isLoading } = props
+  useEffect(() => {
+    lottie.loadAnimation({
+      //@ts-ignore
+      container: document.getElementById('lottie-loading'),
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      animationData: animateJson
+    })
+  }, [isLoading])
+
+  return (
+    <div className="okr-cases-library__cardList">
+      {cardList.length
+        ? <Fragment>
+          {cardList.map((item, index) => (
+            <OkrCaseCard key={item.id} cardInfo={item} index={index + 1} onApplyTpl={() => onApplyTpl(item)} />
+          ))}
+          {new Array(20).fill('1').map(() => (<div style={{ height: '0', width: '46%', flexGrow: 1 }} />))}
+          {isLoading && <div id="lottie-loading" className="okr-cases-library__cardList-loading" />}
+          {!isUnlock && <div className="okr-cases-library__cardList__formember"
+            onClick={() => handleShowPayWindow(true)}>
+            <img src={require('../../image/会员.svg')} /> 开通会员查看更多案例库
+          </div>}
+        </Fragment>
+        : <div className="okr-cases-library__cardList-empty">
+          <img src={require("../../image/牛牛.png")} />
+          <p>暂无你想要的 OKR 案例，<a onClick={() => handleShowSubmitOkrWindow(true)}>提交你想要的 OKR 类型</a></p>
+        </div>
+      }
+    </div >
+  )
+}
+
+export default OkrCaseCardLsit

package/src/components/okrcase-library/okrcases-components/caseLibrary-cardList/okrcase-card.tsx

@@ -0,0 +1,108 @@
+import React, { useState, useCallback, useRef, useEffect } from "react";
+import { postApply, postLike } from '../../server/network.js'
+import { CardItem } from '../../index'
+import firework from '../../../firework'
+
+interface Props {
+  onApplyTpl: Function;
+  cardInfo: CardItem;
+  index: number;
+}
+
+const OkrCaseCard = (props: Props) => {
+  const { onApplyTpl, cardInfo, index } = props
+  const { parentName, name, subelements, usedNum, id, isLike, like } = cardInfo
+
+  const [likeNum, setLikeNum] = useState(like)
+  const [hasLike, setHasLike] = useState(isLike)
+  const [usedNumber, setUsedNumber] = useState(usedNum)
+
+  const [isApplyBtnShow, setIsApplyBtnShow] = useState(false)
+  // const [isBlue, setIsBlue] = useState(index % 4 > 1 ? true : false)
+  const isBlue = index % 4 > 1 ? true : false
+  const likeRef = useRef<any>()
+
+  useEffect(() => {
+    setLikeNum(like)
+    setHasLike(isLike)
+    setUsedNumber(usedNum)
+  }, [])
+
+
+  const setFirework = useCallback(() => {
+    const { x, y } = (likeRef.current as any).getBoundingClientRect();
+    firework({
+      x: x,
+      y: y,
+      images: [require('../../image/thumb-up.svg'), require('../../image/666.svg'), require('../../image/bixin.svg'), require('../../image/fighting.svg'), require('../../image/nice.svg'), require('../../image/welldone.svg')]
+    });
+  }, []);
+
+  const handleLikeClick = (isLike, id) => {
+
+    setHasLike(!hasLike)
+    if (isLike) {
+      postLike(0, id)
+      setLikeNum(likeNum - 1)
+    } else {
+      setLikeNum(likeNum + 1)
+      postLike(1, id)
+      setFirework()
+    }
+  }
+
+  const handleApplyBtnClick = (id) => {
+    setUsedNumber(usedNumber + 1)
+    postApply(id)
+    onApplyTpl(cardInfo)
+    // @ts-ignore
+    window.titaTracker &&
+      window.titaTracker('action').record({
+        action: '套用',
+        actionGroup: '案例库',
+        productName: '案例库'
+      })
+
+  }
+
+  return (
+    <div className="okr-cases-library__cardList__card"
+      onMouseEnter={() => setIsApplyBtnShow(true)}
+      onMouseLeave={() => setIsApplyBtnShow(false)}
+    >
+      <div className={`okr-cases-library__cardList__card__title
+            ${isBlue ? "okr-cases-library__cardList__card__title-blue" : "okr-cases-library__cardList__card__title-red"}`}
+      >
+        <div className="okr-cases-library__cardList__card__title__label">「{parentName}」</div>
+        <div className="okr-cases-library__cardList__card__title__name">O {name}</div>
+        {<div className={`okr-cases-library__cardList__card__title__btn 
+                ${isApplyBtnShow && "okr-cases-library__cardList__card__title__btn-show"}
+                ${isBlue ? 'okr-cases-library__cardList__card__title__btn-blue' : 'okr-cases-library__cardList__card__title__btn-red'}`
+        }
+          onClick={() => handleApplyBtnClick(id)}>套用</div>}
+      </div>
+      <div className="okr-cases-library__cardList__card__content">
+        {subelements.map((item, krindex) => (
+          <div className="okr-cases-library__cardList__card__content__kr" key={krindex} >
+            <div style={{ color: isBlue ? '#2879FF' : '#F05E5E', float: 'left', marginRight: '5px' }}>KR{krindex + 1} </div>
+            <div style={{ float: 'left', width: 'calc(100% - 36px)' }}> {item.name}</div>
+          </div>
+        ))}
+      </div>
+      <div className="okr-cases-library__cardList__card__footer" >
+        <div>{usedNumber}次套用</div>
+        <div>
+          {hasLike
+            ? <img src={require('../../image/thumb-up.svg')} onClick={() => handleLikeClick(hasLike, id)}
+              style={{ cursor: 'pointer' }} />
+            : <span className="tu-icon-dianzan" onClick={() => handleLikeClick(hasLike, id)} ref={likeRef} />
+          }
+          {likeNum}
+        </div>
+      </div>
+
+    </div >
+  )
+}
+
+export default OkrCaseCard

package/src/components/okrcase-library/okrcases-components/caseLibrary-main.tsx

@@ -0,0 +1,74 @@
+import React, { Fragment } from "react";
+import OkrCaseCardLsit from './caseLibrary-cardList'
+import OkrEssay from '../../grid-layout/essay-component'
+import { CardList } from '../index'
+import { isLocal } from "../../../utils/helpers";
+
+interface Props {
+  onApplyTpl: Function;
+  cardList: CardList;
+  isUnlock: boolean;
+  okrCasesNum: number;
+  handleShowSubmitOkrWindow: Function;
+  handleShowPayWindow: Function;
+  isfix: boolean;
+  isLoading: boolean;
+  activeNavId: number;
+  onClose?: Function;
+  asideHeightRef: any;
+  fixAsideTopScroll: number;
+  // isAsideFix: boolean;
+}
+
+
+const CaseLibraryMain = (props: Props) => {
+  const { onApplyTpl, cardList, isUnlock, okrCasesNum, handleShowSubmitOkrWindow,
+    handleShowPayWindow, isfix, isLoading, activeNavId, onClose,
+    asideHeightRef, fixAsideTopScroll } = props
+
+  //@ts-ignore
+  const { DeadLine } = BSGlobal.tenantAuthentication
+  //@ts-ignore
+  const { Name } = BSGlobal.loginUserInfo
+
+  return (
+    <Fragment>
+      <div className='okr-cases-library__mainContainer'>
+        <OkrCaseCardLsit cardList={cardList} isUnlock={isUnlock} handleShowPayWindow={handleShowPayWindow}
+          handleShowSubmitOkrWindow={handleShowSubmitOkrWindow} onApplyTpl={onApplyTpl} isLoading={isLoading} />
+        <div className={"okr-cases-library__aside"}
+          style={{
+            right: `0px`,
+            top: `${fixAsideTopScroll}px`,
+            //@ts-ignore
+            position: isfix && cardList.length ? 'absolute' : ''
+          }}
+          ref={asideHeightRef}>
+          {!isLocal() && <div className="okr-cases-library__aside__submitWant">
+            <div
+              className="okr-cases-library__aside__submitWant__btn"
+              onClick={() => handleShowSubmitOkrWindow(true)}
+            >
+              <img src={require('../image/笔.svg')} />提交我想要的OKR类型
+            </div>
+            <div className="okr-cases-library__aside__submitWant__libraryNum">全国最大 OKR 案例库
+              <span style={{ color: '#F05E5E' }}> {okrCasesNum}</span> 个
+            </div>
+          </div>}
+          {isUnlock
+            ? <div className="okr-cases-library__aside__memberInfo">
+              <div className="okr-cases-library__aside__memberInfo__name">
+                {Name}的<b> VIP </b>会员</div>
+              <p className="okr-cases-library__aside__memberInfo__deadLine">有效日期至：{DeadLine}</p>
+            </div>
+            : <div className="okr-cases-library__aside__advertise"
+              onClick={() => handleShowPayWindow(true)} />
+          }
+          <OkrEssay essayTypeId={activeNavId} _className="okr-cases-library__aside__essay" />
+        </div>
+      </div>
+    </Fragment >
+  )
+}
+
+export default CaseLibraryMain