From e1f7e085d689bccfa40a5ff2b3307ddaa7e43865 Mon Sep 17 00:00:00 2001 From: li tong bao <2903733959@qq.com> Date: Tue, 31 May 2022 16:14:16 +0800 Subject: [PATCH] =?UTF-8?q?--=E6=8E=88=E4=BF=A1=E9=A1=B5=E9=9D=A2=E5=AE=8C?= =?UTF-8?q?=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 3 +- src/api/creditLine.ts | 23 +++++ src/app.config.ts | 12 +++ src/common/constant.js | 5 +- src/pages/creditLine/index.config.ts | 3 + src/pages/creditLine/index.scss | 92 +++++++++++++++++ src/pages/creditLine/index.tsx | 147 +++++++++++++++++++++++++++ src/pages/creditUsed/index.config.ts | 3 + src/pages/creditUsed/index.scss | 41 ++++++++ src/pages/creditUsed/index.tsx | 76 ++++++++++++++ src/styles/iconfont.scss | 40 ++++++++ src/styles/iconfont.ttf | Bin 9236 -> 12196 bytes yarn.lock | 5 + 13 files changed, 447 insertions(+), 3 deletions(-) create mode 100644 src/api/creditLine.ts create mode 100644 src/pages/creditLine/index.config.ts create mode 100644 src/pages/creditLine/index.scss create mode 100644 src/pages/creditLine/index.tsx create mode 100644 src/pages/creditUsed/index.config.ts create mode 100644 src/pages/creditUsed/index.scss create mode 100644 src/pages/creditUsed/index.tsx diff --git a/package.json b/package.json index 215c2f7..e401964 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,8 @@ "react-redux": "^8.0.1", "redux": "^4.2.0", "redux-logger": "^3.0.6", - "redux-thunk": "^2.4.1" + "redux-thunk": "^2.4.1", + "tarojs": "^2.1.1" }, "devDependencies": { "@babel/core": "^7.8.0", diff --git a/src/api/creditLine.ts b/src/api/creditLine.ts new file mode 100644 index 0000000..7c69511 --- /dev/null +++ b/src/api/creditLine.ts @@ -0,0 +1,23 @@ +import { useRequest } from "@/use/useHttp" + +/** + * 额度获取 + * @returns + */ + export const creditInfoApi = () => { + return useRequest({ + url: `/v1/mall/credit`, + method: "get", + }) +} + +/** + * 额度已用获取 + * @returns + */ + export const creditListApi = () => { + return useRequest({ + url: `/v1/mall/credit/list`, + method: "get", + }) +} diff --git a/src/app.config.ts b/src/app.config.ts index c9abe95..898aa9d 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -97,6 +97,18 @@ export default { pages: [ "index" ] + }, + { + root: "pages/creditLine", + pages: [ + "index" + ] + }, + { + root: "pages/creditUsed", + pages: [ + "index" + ] } ] } diff --git a/src/common/constant.js b/src/common/constant.js index b856a54..f82b8c9 100644 --- a/src/common/constant.js +++ b/src/common/constant.js @@ -5,11 +5,12 @@ // export const BASE_URL = `http://192.168.0.89:40001/lymarket` // export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞 // export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境 -export const BASE_URL = `http://192.168.1.30:40001/lymarket` // 发 +// export const BASE_URL = `http://192.168.1.30:40001/lymarket` // 发 // export const BASE_URL = `https://dev.zzfzyc.com/lymarket` // 开发环境 // export const BASE_URL = `https://www.zzfzyc.com/lymarket` // 正式环境 // export const BASE_URL = `http://192.168.1.4:40001/lymarket` // 王霞 -// export const BASE_URL = `http://192.168.1.224:50002/lymarket` // 添 +export const BASE_URL = `http://192.168.1.224:50001/lymarket` // 添 +// export const BASE_URL = `http://192.168.1.15:50001/lymarket` // 添 // CDN // 生成密钥 diff --git a/src/pages/creditLine/index.config.ts b/src/pages/creditLine/index.config.ts new file mode 100644 index 0000000..432582a --- /dev/null +++ b/src/pages/creditLine/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: '授信额度' +} diff --git a/src/pages/creditLine/index.scss b/src/pages/creditLine/index.scss new file mode 100644 index 0000000..fbbcf00 --- /dev/null +++ b/src/pages/creditLine/index.scss @@ -0,0 +1,92 @@ +.credit-line{ + height: 100vh; + background-color: #f3f3f3; + canvas{ + width: 238px; + height: 238px; + } + + .credit-line-tips{ + width: 100%; + height: 66px; + background: #ecf5ff; + border: 2px solid #cde5ff; + padding: 0 30px; + display: flex;align-items: center; + font-size: 24px; + font-weight: 400; + color: #007aff; + } + .credit-line-tips text{ + margin-right: 10px; + font-size: 30px; + } + .credit-line-card{ + width: 702px; + background: #ffffff; + border-radius: 20px; + margin: 20px auto 0; + padding: 0 30px; + box-sizing: border-box; + } + .credit-line-card-top{ + display: flex;align-items: flex-end; + padding: 30px 20px; + border-bottom: 1px solid #f6f6f6; + } + .credit-line-card-top-info{ + text-align: center; + flex: 1; + } + .credit-line-card-top-info-title{ + font-size: 24px; + font-weight: 700; + color: #000000; + margin-bottom: 16px; + } + .credit-line-card-top-info-price{ + font-size: 44px; + font-weight: 700; + color: #007aff; + margin-bottom: 48px; + } + .credit-line-card-top-info-price text{ + font-size: 20px; + } + .credit-line-card-top-info-date{ + font-size: 22px; + font-weight: 400; + color: #ababab; + } + .credit-line-card-bottom{ + padding: 30px 0; + display: grid; + grid-template-columns: repeat(2, 1fr); + text-align: center; + } + .credit-line-card-bottom-item-title{ + font-size: 24px; + font-weight: 700; + color: #000000; + display: flex; + align-items: center;justify-content: center; + margin-bottom: 15px; + line-height: 38px; + } + .credit-line-card-bottom-item-title text{ + font-size: 40px; + margin-right: 10px; + color: #007AFF; + } + .credit-line-card-bottom-item:nth-of-type(2) .credit-line-card-bottom-item-title text{ + font-size: 28px; + } + .credit-line-card-bottom-item-price{ + font-size: 40px; + font-weight: 400; + color: #ababab; + } + .credit-line-card-bottom-item-price text{ + font-size: 20px; + } +} \ No newline at end of file diff --git a/src/pages/creditLine/index.tsx b/src/pages/creditLine/index.tsx new file mode 100644 index 0000000..e41e74b --- /dev/null +++ b/src/pages/creditLine/index.tsx @@ -0,0 +1,147 @@ + +import AddressList from "@/components/AddressList" +import { Button, Canvas, ScrollView, Text, View } from "@tarojs/components" +import Taro, { useReady } from "@tarojs/taro" +import { useEffect } from "react" +import {creditInfoApi} from "@/api/creditLine" +import "./index.scss" +import { useSelector } from "@/reducers/hooks"; + +export default ()=>{ + + const {userInfo} = useSelector(state => state.userInfo); + useEffect(()=>{ + console.log(userInfo,"=="); + + // getData() + }, []) + const {fetchData, state} = creditInfoApi(); + // 获取数据 + const getData = async ()=>{ + const result = await fetchData(); + console.log(state); + + } + + + return ( + + + 暂不支持线上申请授权，请联系平台客服。 + + + + + + 已用额度 + ¥999,999.20 + 有效期: 2022-03-09至2022-05-13 + + + + + + + 总额度 + + ¥999,999.20 + + + + + 可用额度 + + ¥999,999.20 + + + + + ) +} + +const Progress = ()=>{ + const getCanvas = ()=>{ + const percentage = 100; + const query = Taro.createSelectorQuery(); + query.select("#myCanvas").fields({ node: true, size: true }).exec((res) => { + const canvas = res[0]?.node; + if(canvas){ + const ctx = canvas.getContext('2d'); + const { windowHeight, windowWidth } = Taro.getSystemInfoSync(); + const dpr = 750 / windowWidth; + canvas.width = res[0].width * dpr; + canvas.height = res[0].height * dpr; + const r = canvas.width / 2; + ctx.translate(r,r); + + // 白色大圆 + ctx.beginPath(); + ctx.fillStyle = "white"; + ctx.shadowBlur = 20; + ctx.shadowColor = "#cde5ff"; + ctx.arc(0,0,100,0,2*Math.PI, false); + ctx.fill(); + + // 刻度 + const my_minute = Math.PI*2/60; + const my_second = Math.PI*2/60; + ctx.strokeStyle="#F59F5D"; + ctx.lineWidth=2; + ctx.beginPath(); + for(let i=0;i<15;i++){ + ctx.save(); + ctx.rotate(i*4*my_minute); + ctx.moveTo(r-45,0); + ctx.lineTo(r-40,0); + ctx.stroke(); + ctx.restore(); + } + + // 白色小圆 + ctx.beginPath(); + ctx.fillStyle = "white"; + ctx.shadowBlur = 20; + ctx.shadowColor = "rgba(204,204,204,0.50)"; + ctx.arc(0,0,74,0,2*Math.PI, false); + ctx.fill(); + + // 文字 + ctx.beginPath(); + ctx.restore(); + + ctx.fillStyle = "#007aff"; + ctx.font="42px Cambria, Cambria-Bold"; + ctx.textAlign="center"; + ctx.textBaseline="middle"; + ctx.fillText(percentage+"%", 0,0); + + // 蓝色的圆 + ctx.beginPath(); + ctx.lineWidth = 25; + ctx.lineCap = "round"; + const gad = ctx.createLinearGradient(100,0,0,100); + gad.addColorStop(0, "#047CFF"); + gad.addColorStop(1, "#51A4FF"); + ctx.strokeStyle = gad; + ctx.arc(0,0,104,-Math.PI*0.5,2*Math.PI/100*((percentage<50?percentage:50)-25), false); + ctx.stroke(); + + if(percentage>50){ + ctx.beginPath(); + const gad2 = ctx.createLinearGradient(0,-100,0,0); + gad2.addColorStop(0, "#87C0FF"); + gad2.addColorStop(1, "#57A8FF"); + ctx.strokeStyle = gad2; + ctx.arc(0,0,104,Math.PI*0.5,2*Math.PI/100*(percentage-25), false); + ctx.stroke(); + } + }else{ + getCanvas(); + } + }); + } + useReady(()=>{ + getCanvas(); + }) + return +} \ No newline at end of file diff --git a/src/pages/creditUsed/index.config.ts b/src/pages/creditUsed/index.config.ts new file mode 100644 index 0000000..b58982d --- /dev/null +++ b/src/pages/creditUsed/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: '已用额度' +} diff --git a/src/pages/creditUsed/index.scss b/src/pages/creditUsed/index.scss new file mode 100644 index 0000000..e208050 --- /dev/null +++ b/src/pages/creditUsed/index.scss @@ -0,0 +1,41 @@ +.credit-used{ + height: 100vh; + background-color: #f3f3f3; + .credit-used-list{ + background-color: white; + padding: 30px 25px; + border-bottom: 1px solid #f6f6f6; + } + .credit-used-list-top{ + display: flex;justify-content: space-between; + margin-bottom: 20px; + } + .credit-used-list-type{ + font-size: 26px; + font-weight: 400; + color: #000000; + } + .credit-used-list-price{ + font-size: 28px; + font-weight: 400; + } + .credit-used-list-bottom{ + display: flex;justify-content: space-between; + } + .credit-used-list-date{ + font-size: 24px; + font-weight: 400; + color: #ababab; + } + .credit-used-list-orderno{ + font-size: 20px; + font-weight: 400; + color: #ababab; + } + .green{ + color: #07C160; + } + .red{ + color: #FF0000; + } +} \ No newline at end of file diff --git a/src/pages/creditUsed/index.tsx b/src/pages/creditUsed/index.tsx new file mode 100644 index 0000000..3798a05 --- /dev/null +++ b/src/pages/creditUsed/index.tsx @@ -0,0 +1,76 @@ + +import AddressList from "@/components/AddressList" +import InfiniteScroll from "@/components/infiniteScroll" +import { Button, Canvas, ScrollView, Text, View } from "@tarojs/components" +import Taro, { useReady } from "@tarojs/taro" +import { useEffect, useState } from "react" +import {creditListApi} from "@/api/creditLine" +import "./index.scss" + +export default ()=>{ + useEffect(()=>{ + getData(); + }, []) + const {fetchData, state} = creditListApi(); + const data = Array.from({length: 10}); + const getData = async ()=>{ + fetchData(); + } + // 刷新 + const [refreshData, setRefreshData] = useState({ + refreshStatus: false, + moreStatus: false + }) + const handleRefresh = async ()=>{ + setRefreshData({ + ...refreshData, + refreshStatus: true + }) + + + setTimeout(()=>{ + setRefreshData({ + ...refreshData, + moreStatus: false + }) + }, 3000) + } + const handleMoreLoad = async ()=>{ + setRefreshData({ + ...refreshData, + moreStatus: true + }) + + setTimeout(()=>{ + setRefreshData({ + ...refreshData, + refreshStatus: false + }) + },3000) + } + + return ( + + + { + data.map((item,index)=>{ + return ( + + + 下单 + -999,999.00 + + + 2022-04-24 16:10:11 + 订单号：LY2278204399678 + + + ) + }) + } + {/* {data.length>0&&} */} + + + + ) +} diff --git a/src/styles/iconfont.scss b/src/styles/iconfont.scss index 92fec06..415e262 100644 --- a/src/styles/iconfont.scss +++ b/src/styles/iconfont.scss @@ -11,6 +11,46 @@ -moz-osx-font-smoothing: grayscale; } +.icon-yucunkuan:before { + content: "\e66c"; +} + +.icon-xianxiahuikuan:before { + content: "\e669"; +} + +.icon-xtianzhangqi:before { + content: "\e66a"; +} + +.icon-saomazhifu:before { + content: "\e66b"; +} + +.icon-fahuo:before { + content: "\e66d"; +} + +.icon-zhuyi:before { + content: "\e668"; +} + +.icon-zhushi:before { + content: "\e667"; +} + +.icon-zidingyimadan:before { + content: "\e665"; +} + +.icon-a-yuanmadanmadanguanli:before { + content: "\e666"; +} + +.icon-daohang:before { + content: "\e664"; +} + .icon-shanchu:before { content: "\e663"; } diff --git a/src/styles/iconfont.ttf b/src/styles/iconfont.ttf index 8b3787626e1beca58ad6b055deb8833b2ad26aac..fbb95ea110f813e75d5619225ab621bd7b42905c 100644 GIT binary patch delta 3759 zcmb_eYfK#16+U-nnc3$I>=WWvr7PHG1y>ggB=@cjIo2)EG%0Cc4bom zKRT@wB~|@UDyqf?$Ff?hYU{*miIhrh%m1lui<)VCO3bM zbi(g(zY^Cqv$>gx@*nN`IY50gKC^J{?0MIPe8qon12kMig6(^6NA|>lATMIu$M4Ex z@~+RoVL<}GUw&Pz-MFucpZ3i zmcY9mnODIA-@+4CCc)Tm%sd=eTLUom8T}9Y>CC(c?o03-&MRRX1R(@fupPos4K+{; zK2RV6eh9!0h=PioPLQD-D!>gM@PaD{4t$&yY#@Sws`B_)0%Z_`x>epq^na~Crj9+fic8@7J~6r2DBB7qYP*@7?>>-Xg?Uo7|;`7j4+^2z⩔-T`Bj0sREV z3DD^P=rS-)GNALoc%A{>2*wx#Iuwjk4Cq=gat!EXFitao3-99$=yx#k3^d@z1Ovtb zj7bKt={PAcV1U4wV!%*=QDmU`WqgeR!w1G01`H$^(+o7Tj2Q+DEGult#FtvXdj&;(mP8a)%XH`@%_by<%Vafa%^;UdII{1Bd?u5B;mV8Stu0N5k67%o zY##{HF(`XwHW{!>lD&SHD0{7gLsqXW?&3bm2H%4xa*}4ZRJ*r7!!SxX#30|Nm=|maj!9%%{&$RB z1k#WJh$@YomgSOR&S%=hixSyRya9i*HS;Xd)R?F=kuO9`h&>gr=U?`1TXBY+%R%oY zm%Txhe4;Wa`ebX)7OZL=Uysp6z3+v#iV^;mlNRvjZVQX$=or!EIDu{*$dSPxs)h`6X<(fAqTn2HXIU? z5}rpl=_&3sjvU~j4NiHCH`rIuxVhJbnc(nBco`4 z8+u>>eSkGjlo(MJkziG6t(dF<5+)Ks+a9}y+8;}$Bc7*edZg@WVkCe*NLNsg_$s`9 z^hM_JO5i6PV(B-c*GdOjBwhZjk8}yV;3|zCb9p>2It*%B?~@BsF-*6HCAWJhoxWI_ ztggpo#iZAlnKMX1B;BG|x<_l7?DqRh?+CJFrPADPDl(~+-bVqZ6qlzZJ^AF~ej-eO zI(!XibT;PU1Ud~9eC?0?FZdMZO$;>X#8fh?RHIe86!(_v{6?n|(O|Dcu*lO|#-pUQ zPLc{Bi6e6px%Q5Zw$l?2Cvt5#$xX}+T$*lgpT7L+)ido{>gdRnJLK?J`kX;e%vKSs zuqBW?|8f2_|qC$-l@Zl~^dx%^IduvDIKpLpw+qi$3i z8`9bX)Vdihut78I0et60BVK;`qXKESgyg8VQ6oWbWqqX8>2&+60c^$t=+t33=^CIFSg`;a4=(ZkYKtzEWLZ zU%gUIiI{~ew17)na{A-F@p$hMI>f7*s;ZivX$t9~CbG8 ztnY2XOS>4xu%Az3|8K_LkDugG_OTID)2f-OB70dY^fSbVZ)^I)H#YsT?=T*-I?II# zZE-ZI!(0~ooXY7HqFYp3PCRpn99v#pK1L3;jV9Cm-JMZ2RoB~`LBW~k-nx_;-QCr% z?hebX2lnk$+Lb`eZL4jp4>s5Yp{C{J@WR;0%JJhXBV!B0CzITtO!l6U-h-K>AS5#f zdq;ZuyLLy_Qn7yDfsDL;w;E|z?g#4|t+h6{T3OQoZ@yFZX%&etttwfa)Dne6$PN-E zDv6Og5+^&swlFt7H+yC-H!IB-bF+x4xguRU=P%%TaVj@k_VXtoGY6| zjuz=^yxj7VYHC+_NeC{lj_U5Nbgy2Uv F{13Vj%*y}( delta 812 zcmXw$%WG3n5XQfIZ=N?z8@1NHG^H&f7)4ZE#b-rp(fY3O8LzQz7D-cRg$Th^@DHd) zL_s2A*CJ#i62YBWiGP6j*bGu!D5$uojo<0uf!}$|nVB>5orU!M;rVUlw==Jw19ld0 zIwo^BCmJ8Rs(}9u(4EbWd)NEC#~y&sWS21nKRHjhuam)SezsV$n|}f88_%U&A>$QV zZ_F{CU|-%VPFp+B;C(00eN$e3JoYU4g4<1eb8@;c6P;appZpH=&(rD7-TJ^#92R}a z-Y<_1rQ4Ff5b@Cfe0-YN{(o&Yn`NKn+~zq1+gLeFT%47;m453_<$&#NuCCaChj3PQ z39c?3tMDO5?~q2zh-517?4F?{ZLMfS46CpjYtW9h=)gKe(1|XzAc}7EpqJ4${0Jb( z_%Jh??CY_CnFF=`j%}6c%V8DG%)uKutS~=hSm8^MBMRSyj3|5^a#Ud*kYfrff{ZGx z4RTyzm5>t(>xGn0aw04pa!O$nkkbm=ft*p;804&C%9b&O%|gy8Y#WkNC;;TVLMb2@ z6p8}5sFcm0$R&kJK`txQ401)GdXTh29U)g0Dhlxw^ILLFp~{eqVt#Xx3K^(87O9ZI zD9y1Os9JOOpncCtI19d*FXd19U;38=x!}fNDYz7x2>lKx!eim7aNRxVK5!fEa-