--授信页面完成

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",

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",
+  })
+}

src/app.config.ts

@@ -97,6 +97,18 @@ export default {
       pages: [
         "index"
       ]
+    },
+    {
+      root: "pages/creditLine",
+      pages: [
+        "index"
+      ]
+    },
+    {
+      root: "pages/creditUsed",
+      pages: [
+        "index"
+      ]
     }
   ]
 }

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
 // 生成密钥

src/pages/creditLine/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '授信额度'
+}

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;
+  }
+}

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 (
+    <View className="credit-line">
+      <View className="credit-line-tips">
+        <Text className="iconfont icon-zhuyi"></Text> 暂不支持线上申请授权，请联系平台客服。
+      </View>
+      <View className="credit-line-card">
+        <View className="credit-line-card-top">
+          <View><Progress /></View>
+          <View className="credit-line-card-top-info">
+            <View className="credit-line-card-top-info-title">已用额度</View>
+            <View className="credit-line-card-top-info-price"><Text>¥</Text>999,999<Text>.20</Text></View>
+            <View className="credit-line-card-top-info-date">有效期: 2022-03-09至2022-05-13</View>
+          </View>
+        </View>
+        <View className="credit-line-card-bottom">
+          <View className="credit-line-card-bottom-item">
+            <View className="credit-line-card-bottom-item-title">
+              <Text className="iconfont icon-yucunkuan"></Text>
+              <View>总额度</View>
+            </View>
+            <View className="credit-line-card-bottom-item-price"><Text>¥</Text>999,999<Text>.20</Text></View>
+          </View>
+          <View className="credit-line-card-bottom-item">
+            <View className="credit-line-card-bottom-item-title">
+              <Text className="iconfont icon-tick-pressed"></Text>
+              <View>可用额度</View>
+            </View>
+            <View className="credit-line-card-bottom-item-price"><Text>¥</Text>999,999<Text>.20</Text></View>
+          </View>
+        </View>
+      </View>
+    </View>
+  )
+}
+
+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 <Canvas type="2d" id="myCanvas"/>
+}

src/pages/creditUsed/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: '已用额度'
+}

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;
+  }
+}

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 (
+    <View className="credit-used">
+      <InfiniteScroll refresherEnabled={true} refresherTriggered={refreshData.refreshStatus} moreStatus={refreshData.moreStatus} selfOnRefresherRefresh={handleRefresh} selfonScrollToLower={handleMoreLoad}>
+        {
+          data.map((item,index)=>{
+            return (
+              <View key={index} className="credit-used-list">
+                <View className="credit-used-list-top">
+                  <View className="credit-used-list-type">下单</View>
+                  <View className={`credit-used-list-price ${index%2==0?'green':'red'}`}>-999,999.00</View>
+                </View>
+                <View className="credit-used-list-bottom">
+                  <View className="credit-used-list-date">2022-04-24 16:10:11</View>
+                  <View className="credit-used-list-orderno">订单号：LY2278204399678</View>
+                </View>
+              </View>
+            )
+          })
+        }
+        {/* {data.length>0&&<View className="credit-used-list"></View>} */}
+        <View className="credit-used-list"></View>
+      </InfiniteScroll>
+    </View>
+  )
+}

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";
 }

yarn.lock

@@ -9765,6 +9765,11 @@ taro-css-to-react-native@3.3.10:
     css-mediaquery "^0.1.2"
     postcss-value-parser "^3.3.0"
 
+tarojs@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmmirror.com/tarojs/-/tarojs-2.1.1.tgz#d56b50608b01de4efd6f245ecbf8cc3cd632173f"
+  integrity sha512-5wJ2fuiA6Fk/9zr76ZPrsJAe6UXI66gHbtwOWaxjrJZetRurfxDZUUw6wkSZB/ZxAhVhWlv9PMuNc7DlB+rtsA==
+
 terser-webpack-plugin@^1.4.3:
   version "1.4.5"
   resolved "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz"