✨ feat(UI): 已完成UI100%

2023-03-08 19:03:10 +08:00 · 2023-03-08 19:03:10 +08:00 · 5a1d6dddb0
commit 5a1d6dddb0
parent bec081fa4c
17 changed files with 810 additions and 141 deletions
--- a/iconfont.json
+++ b/iconfont.json
@ -1,5 +1,5 @@
 {
-    "symbol_url": "//at.alicdn.com/t/c/font_3786318_sqfeq7399ga.js",
+    "symbol_url": "//at.alicdn.com/t/c/font_3786318_zkugv9z8j0e.js",
    "save_dir": "./src/components/iconfont",
    "use_typescript": false,
    "use_rpx": true,
--- a/src/app.config.ts
+++ b/src/app.config.ts
@ -266,5 +266,11 @@ export default {
        'index',
      ],
    },
+    {
+      root: 'pages/activityIncome',
+      pages: [
+        'index',
+      ],
+    },
  ],
 }
--- a/src/components/codeSelect/index.module.scss
+++ b/src/components/codeSelect/index.module.scss
@ -45,4 +45,5 @@
  opacity: 0.08;
  width: 100vw;
  height: 100vh;
+  z-index: 1000;
 }
--- a/src/components/codeSelect/index.tsx
+++ b/src/components/codeSelect/index.tsx
@ -72,14 +72,14 @@ export default ({ y, orderObj = {} }: param) => {
          <IconFont name="icon-yuanshimadanyulan" size={46} />
          <Text>原始码单预览</Text>
        </View>
-        {!!orderObj?.custom_print_id && <View className={styles['code_list__card--item']} onClick={openNewPrive}>
+        {/* {!!orderObj?.custom_print_id && <View className={styles['code_list__card--item']} onClick={openNewPrive}>
          <IconFont name="icon-zidingyimadanyulan" size={46} />
          <Text>自定义码单预览</Text>
-        </View>}
-        <View className={styles['code_list__card--item']} onClick={onNavigateTo}>
+        </View>} */}
+        {/* <View className={styles['code_list__card--item']} onClick={onNavigateTo}>
          <IconFont name="icon-bianjizidingyimadan" size={46} />
          <Text>{orderObj?.custom_print_id ? '编辑自定义码单' : '新建自定义码单'}</Text>
-        </View>
+        </View> */}
      </View>}
      <View className={styles['code_list--text']} onClick={() => setShowCode(!showCode)}>码单</View>
    </MovableView>
--- a/src/components/iconfont/iconfont.tsx
+++ b/src/components/iconfont/iconfont.tsx
@ -24,7 +24,7 @@ function hex2rgb(hex) {
  return "rgb(" + rgb.join(",") + ")";
 }

-export type IconNames = 'icon-zhankai1' | 'icon-shouqi1' | 'icon-shoucang1' | 'icon-weixinyijiandenglu' | 'icon-nanzhuang' | 'icon-zhuanyefenlei' | 'icon-tongzhuang' | 'icon-chaoliumianliao' | 'icon-nvzhuang' | 'icon-dingwei' | 'icon-xuanzhongyanse' | 'icon-sekajianyanglingqu' | 'icon-lingseka' | 'icon-lingjianyang' | 'icon-gerenzhongxin-dianji' | 'icon-shouye-dianji' | 'icon-gouwuche-weidianji' | 'icon-gerenzhongxin-weidianji' | 'icon-gouwuche-dianji' | 'icon-shouye-weidianji' | 'icon-paixu1' | 'icon-zhankai' | 'icon-shouqi' | 'icon-tips' | 'icon-dianhua' | 'icon-paixu' | 'icon-shaixuan' | 'icon-bodakehujingli' | 'icon-guanfangweixinkefu' | 'icon-tuijianbiaoqian' | 'icon-rukou' | 'icon-renzhengchenggong' | 'icon-wodekefu' | 'icon-yanseduibi' | 'icon-dizhiguanli' | 'icon-weixin' | 'icon-riqi' | 'icon-shuru' | 'icon-a-0tianzhangqi' | 'icon-huodaofukuan' | 'icon-huozhuziti' | 'icon-saomazhifu' | 'icon-xianxiahuikuan' | 'icon-yufukuan' | 'icon-xinzengshoucangjia' | 'icon-qingchusousuo' | 'icon-xuanzechenggong' | 'icon-gongnengtubiao-saomiao' | 'icon-bianjizidingyimadan' | 'icon-zidingyimadanyulan' | 'icon-yuanshimadanyulan' | 'icon-xiala' | 'icon-shangla' | 'icon-qingchuxinxi' | 'icon-sousuo' | 'icon-guanli' | 'icon-bianji' | 'icon-shoucangjia' | 'icon-shezhi' | 'icon-tishi' | 'icon-erweima' | 'icon-dianjishoucang' | 'icon-gouwuche' | 'icon-shoucangchenggong' | 'icon-fenxiangshangpin' | 'icon-kefu' | 'icon-xinzenganniu' | 'icon-jianshaoanniu' | 'icon-daifahuo2' | 'icon-daishouhuo2' | 'icon-tuikuan-shouhou' | 'icon-daipeibu2' | 'icon-daifukuan2';
+export type IconNames = 'icon-lijitixian' | 'icon-hongbao' | 'icon-xuanzhongshijian' | 'icon-zhankai1' | 'icon-shouqi1' | 'icon-shoucang1' | 'icon-weixinyijiandenglu' | 'icon-nanzhuang' | 'icon-zhuanyefenlei' | 'icon-tongzhuang' | 'icon-chaoliumianliao' | 'icon-nvzhuang' | 'icon-dingwei' | 'icon-xuanzhongyanse' | 'icon-sekajianyanglingqu' | 'icon-lingseka' | 'icon-lingjianyang' | 'icon-gerenzhongxin-dianji' | 'icon-shouye-dianji' | 'icon-gouwuche-weidianji' | 'icon-gerenzhongxin-weidianji' | 'icon-gouwuche-dianji' | 'icon-shouye-weidianji' | 'icon-paixu1' | 'icon-zhankai' | 'icon-shouqi' | 'icon-tips' | 'icon-dianhua' | 'icon-paixu' | 'icon-shaixuan' | 'icon-bodakehujingli' | 'icon-guanfangweixinkefu' | 'icon-tuijianbiaoqian' | 'icon-rukou' | 'icon-renzhengchenggong' | 'icon-wodekefu' | 'icon-yanseduibi' | 'icon-dizhiguanli' | 'icon-weixin' | 'icon-riqi' | 'icon-shuru' | 'icon-a-0tianzhangqi' | 'icon-huodaofukuan' | 'icon-huozhuziti' | 'icon-saomazhifu' | 'icon-xianxiahuikuan' | 'icon-yufukuan' | 'icon-xinzengshoucangjia' | 'icon-qingchusousuo' | 'icon-xuanzechenggong' | 'icon-gongnengtubiao-saomiao' | 'icon-bianjizidingyimadan' | 'icon-zidingyimadanyulan' | 'icon-yuanshimadanyulan' | 'icon-xiala' | 'icon-shangla' | 'icon-qingchuxinxi' | 'icon-sousuo' | 'icon-guanli' | 'icon-bianji' | 'icon-shoucangjia' | 'icon-shezhi' | 'icon-tishi' | 'icon-erweima' | 'icon-dianjishoucang' | 'icon-gouwuche' | 'icon-shoucangchenggong' | 'icon-fenxiangshangpin' | 'icon-kefu' | 'icon-xinzenganniu' | 'icon-jianshaoanniu' | 'icon-daifahuo2' | 'icon-daishouhuo2' | 'icon-tuikuan-shouhou' | 'icon-daipeibu2' | 'icon-daifukuan2';

 type PropsType = {
  name: IconNames;
@ -84,7 +84,16 @@ const IconFont:FC<PropsType> = ({
          className={classnames(icon, customClassName)}
        />
      )} */}
-      {/* icon-zhankai1 */}
+      {/* icon-lijitixian */}
+
+      { name === 'icon-lijitixian' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1396 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M1349.818182 512v418.909091a46.405818 46.405818 0 0 1-46.545455 46.545454H93.090909a46.405818 46.405818 0 0 1-46.545454-46.545454v-418.909091h1303.272727z m-866.350546 139.636364H152.669091l-77.544727 232.727272H405.876364l77.544727-232.727272zM1303.272727 46.545455a46.405818 46.405818 0 0 1 46.545455 46.545454v186.181818H46.545455V93.090909a46.405818 46.405818 0 0 1 46.545454-46.545454z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(255,255,255)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
+{/* icon-hongbao */}
+
+      { name === 'icon-hongbao' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M787.692308 0a157.538462 157.538462 0 0 1 157.538461 157.538462v708.923076a157.538462 157.538462 0 0 1-157.538461 157.538462H236.307692a157.538462 157.538462 0 0 1-157.538461-157.538462V157.538462a157.538462 157.538462 0 0 1 157.538461-157.538462h551.384616z m-72.78277 381.636923l-25.993846 2.914462a177.230769 177.230769 0 0 1-353.831384-0.039385A1738.515692 1738.515692 0 0 1 157.538462 356.667077V866.461538a78.769231 78.769231 0 0 0 78.76923 78.769231h551.384616a78.769231 78.769231 0 0 0 78.76923-78.769231V356.667077c-50.491077 10.594462-101.021538 18.904615-151.552 25.009231zM512 275.692308a98.461538 98.461538 0 1 0 0 196.923077 98.461538 98.461538 0 0 0 0-196.923077z m275.692308-196.923077H236.307692a78.769231 78.769231 0 0 0-78.76923 78.769231v118.508307l29.538461 6.301539c53.681231 10.791385 107.362462 18.904615 161.004308 24.418461a177.230769 177.230769 0 0 1 327.837538-0.118154 1638.912 1638.912 0 0 0 161.004308-24.339692L866.461538 276.086154V157.538462a79.399385 79.399385 0 0 0-1.575384-15.635693l0.669538 3.741539a78.217846 78.217846 0 0 0-5.238154-18.668308l0.669539 1.693538a78.414769 78.414769 0 0 0-5.986462-12.091076l0.984616 1.693538a78.769231 78.769231 0 0 0-2.914462-4.686769l1.929846 2.993231a78.887385 78.887385 0 0 0-3.268923-4.923077l1.339077 1.929846a79.044923 79.044923 0 0 0-3.308307-4.568616l1.96923 2.63877a79.123692 79.123692 0 0 0-3.465846-4.450462l1.496616 1.811692a79.163077 79.163077 0 0 0-3.702154-4.332307l2.205538 2.520615a79.241846 79.241846 0 0 0-3.662769-4.135385l1.457231 1.575385a79.241846 79.241846 0 0 0-4.292923-4.371692l2.835692 2.796307a79.241846 79.241846 0 0 0-3.938462-3.780923l1.10277 0.984616a79.241846 79.241846 0 0 0-3.899077-3.426462l2.835692 2.441846a79.163077 79.163077 0 0 0-4.726154-3.977846l1.890462 1.536a79.084308 79.084308 0 0 0-4.489846-3.465846l2.599384 1.929846a79.005538 79.005538 0 0 0-4.450461-3.229538l1.851077 1.299692a78.887385 78.887385 0 0 0-4.529231-2.993231l2.678154 1.693539a78.769231 78.769231 0 0 0-4.923077-3.032616l2.244923 1.339077a78.611692 78.611692 0 0 0-5.907693-3.308307l3.66277 1.96923a78.532923 78.532923 0 0 0-4.608-2.441846l0.94523 0.472616a78.375385 78.375385 0 0 0-5.789538-2.599385l4.844308 2.126769a78.336 78.336 0 0 0-5.395693-2.363077l0.551385 0.236308a78.178462 78.178462 0 0 0-3.702154-1.417846l3.150769 1.181538c-1.969231-0.787692-3.938462-1.457231-5.947077-2.087384l2.756924 0.905846a78.139077 78.139077 0 0 0-4.844308-1.496616l2.087384 0.59077a78.178462 78.178462 0 0 0-5.513846-1.457231l3.426462 0.866461a78.257231 78.257231 0 0 0-6.144-1.417846l2.717538 0.551385a78.414769 78.414769 0 0 0-5.671384-1.063385l2.953846 0.512a78.769231 78.769231 0 0 0-8.861539-1.181538L787.692308 78.769231z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(51,127,255)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
+{/* icon-xuanzhongshijian */}
+
+      { name === 'icon-xuanzhongshijian' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M384 192v48h256V192h160v48h112c17.664 0 32 14.336 32 32V864c0 17.664-14.336 32-32 32H112c-17.664 0-32-14.336-32-32V272c0-17.664 14.336-32 32-32H224V192H384z m496 304H144V832h736V496z m0-192H144v128h736v-128z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(51,127,255)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
+{/* icon-zhankai1 */}

      { name === 'icon-zhankai1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1489 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M744.727273 954.181818L1442.909091 46.545455H46.545455z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(51,51,51)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
 {/* icon-shouqi1 */}
--- a/src/components/returnCashModal/index.module.scss
+++ b/src/components/returnCashModal/index.module.scss
@ -0,0 +1,102 @@
+.organizationNameModal {
+  width: 75vw;
+  background-color: #fff;
+  border-radius: 20px;
+  padding-top: 20px;
+  overflow: hidden;
+  .inputBar {
+    border: 1px solid transparent;
+    background-color: #f5f5f5;
+    border-radius: 20px;
+    padding: 20px 42px;
+    margin: 32px 40px;
+    margin-bottom: 0;
+    font-size: 26px;
+    color: #333;
+    &_focus {
+      border: 1px solid #337fff;
+    }
+    &_error {
+      border: 1px solid #f64861;
+      color: #f64861;
+    }
+  }
+
+  &_title {
+    padding: 10px;
+    text-align: center;
+    margin-bottom: 15px;
+    font-weight: 700;
+    color: rgba(0, 0, 0, 0.8);
+  }
+  &_content {
+    margin-bottom: 20px;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    font-size: 32px;
+
+    .text {
+      text-align: center;
+      margin-bottom: 10px;
+    }
+    .activity_rules {
+      font-size: 24px;
+      color: rgba(0, 0, 0, 0.6);
+      padding: 0 20px;
+      margin-top: 15px;
+    }
+  }
+  &_bottomBar {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: space-between;
+    border-top: 1px solid #eee;
+    margin-top: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 112px;
+    .button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      box-sizing: border-box;
+      width: 50%;
+      height: 100%;
+      font-size: 32px;
+      font-weight: 550;
+      padding: 30px 0;
+      border: 0;
+      background-color: #fff;
+    }
+    &_left {
+      border-right: 1px solid #eee;
+      color: #333;
+    }
+    &_right {
+      color: #337fff;
+    }
+    text {
+      font-size: 36px;
+      color: #337fff;
+      font-weight: 500;
+      text-align: center;
+    }
+  }
+  .tips {
+    display: flex;
+    background-color: #fef9f4;
+    font-size: 24px;
+    color: #ff9b33;
+    line-height: 1.5;
+    padding: 20px;
+  }
+}
+.error_tips {
+  color: #f64861;
+  padding: 10px 42px;
+  font-size: 20px;
+}
--- a/src/components/returnCashModal/index.tsx
+++ b/src/components/returnCashModal/index.tsx
@ -0,0 +1,46 @@
+import type { CommonEventFunction, InputProps } from '@tarojs/components'
+import { Input, Text, View } from '@tarojs/components'
+import React, { useMemo, useState } from 'react'
+import classNames from 'classnames'
+import Dialog from '../Dialog'
+import IconFont from '../iconfont/iconfont'
+import NormalButton from '../normalButton'
+import styles from './index.module.scss'
+
+interface PropsType {
+  showModal: boolean
+  onClose?: () => void
+  onShowModalChange?: (val: boolean) => void
+  onCancel?: () => void
+  onConfirm?: (val: string) => void
+  zIndex?: number
+}
+const OrganizationNameModal = (props: PropsType) => {
+  const {
+    showModal = false,
+    onClose,
+    onShowModalChange,
+    onCancel,
+    onConfirm,
+    zIndex = 9999,
+  } = props
+
+  const handleClose = () => {
+    onClose?.()
+  }
+
+  return <Dialog show={showModal} customStyles={{ zIndex }} onClose={handleClose} onChange={onShowModalChange}>
+    <View className={styles.organizationNameModal}>
+      <View className={styles.organizationNameModal_title}>下单活动返现</View>
+      <View className={styles.organizationNameModal_content}>
+        <View className={styles.text}>下大货订单，每条布返现12元</View>
+        <View className={styles.text}>邀请好友下单，每条布返现6元</View>
+        <View className={styles.activity_rules}>活动规则：每笔订单产生的返佣，在已收货14天后会自动到账账户余额中，期间中途产生的退货条数会自动扣除，每天22:00自动更新收益。</View>
+      </View>
+      <View className={styles.organizationNameModal_bottomBar} onClick={handleClose}>
+        <Text>我知道了</Text>
+      </View>
+    </View>
+  </Dialog>
+}
+export default OrganizationNameModal
--- a/src/components/tagMsg/index.module.scss
+++ b/src/components/tagMsg/index.module.scss
@ -0,0 +1,88 @@
+.order_price{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    .close{
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        z-index: 999;
+        top: 0;
+        left: 0;
+        
+    }
+    &:nth-last-child(n+2) {
+        margin-bottom: 30px;
+    }
+    .order_price_text{  
+        font-size: $font_size_medium;
+        // margin-right: 10px;
+        display: flex;
+        .iconfont_msg{
+            position: relative;
+            
+        }
+        .miconfont{
+            font-size: 26px;
+            font-weight: normal;
+            margin-left: 5px;
+        }
+        .message{
+            position: absolute;
+            top: 0;
+            background: rgba(168, 179, 189, 0.9);
+            z-index: 9;
+            min-height: 0;
+            padding: 20px;
+            box-sizing: border-box;
+            border-radius: 10px;
+            box-sizing: border-box;
+            word-break: break-all;
+            color: #fff;
+            // transition: top 0.2s ease-in-out;
+            transition: opacity 0.5s ease-in-out;
+            opacity: 0;
+            &::after{
+                z-index: 99;
+                position: absolute;
+                width: 0;
+                height: 0;
+                content: " ";
+                left: 10px;
+                bottom: -28px;
+                border: 15px solid transparent;
+                border-top-color: rgba(168, 179, 189, 0.8);
+            }
+        }
+    }
+    .emphasis{
+        font-weight: 700;
+    }
+    .order_price_num{
+        color: $color_main;
+        font-weight: 700;
+        text{
+            &:nth-child(1) {
+                font-size: $font_size_min;
+            }
+            &:nth-child(2) {
+                font-size: 26px;
+            }
+            &:nth-child(3) {
+                font-size: $font_size_medium;
+            }
+        }
+    }
+    .emphasis_num{
+        text{
+            &:nth-child(2) {
+                font-size: $font_size_big;
+            }
+        }
+    }
+    .refund_destination{
+        font-size: 28px;
+    }
+    
+}
--- a/src/components/tagMsg/index.tsx
+++ b/src/components/tagMsg/index.tsx
@ -0,0 +1,59 @@
+import { Text, View } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react'
+import classnames from 'classnames'
+import AmountShow from '../amountShow'
+import styles from './index.module.scss'
+import { formatKbPrice } from '@/common/common'
+
+interface Param {
+  style?: Object
+  titleStatus?: true|false // true 标题加大加深
+  messageTitle?: string
+  messageWidth?: number
+  messageShow?: true|false
+}
+const EstimeatedAmount = ({ titleStatus = true, messageTitle = '', messageWidth = 430, messageShow = false }: Param) => {
+  const [show, setShow] = useState(messageShow)
+  const onClose = () => {
+    setShow(false)
+  }
+  const openShow = () => [
+    setShow(true),
+  ]
+
+  const [style, setStyle] = useState<{ top: string }>()
+
+  // 设置弹出层高度
+  const getDomDes = (id) => {
+    setTimeout(() => {
+      const query = Taro.createSelectorQuery()
+      query.select(id).boundingClientRect((rect) => {
+        const height = rect.height * 2 + 15
+        setStyle(e => ({ ...e, top: `-${height}rpx`, opacity: 1 }))
+      }).exec()
+    }, 0)
+  }
+  useEffect(() => {
+    if (show) {
+      getDomDes('#message')
+    }
+    else {
+      setStyle(() => ({ top: '0' }))
+    }
+  }, [show])
+  return (
+    <>
+      <View className={styles.order_price}>
+        <View className={classnames(styles.order_price_text, titleStatus && styles.emphasis)} onClick={() => openShow()}>
+          <View className={styles.iconfont_msg}>
+            {show && <View style={{ ...style, width: `${messageWidth}rpx` }} id="message" className={classnames(styles.message)}>{messageTitle}</View>}
+            <Text className={classnames(styles.miconfont, 'iconfont icon-zhushi')}></Text>
+          </View>
+        </View>
+        {show && <View className={styles.close} catchMove onClick={onClose}></View>}
+      </View>
+    </>
+  )
+}
+export default memo(EstimeatedAmount)
--- a/src/pages/activityIncome/index.config.ts
+++ b/src/pages/activityIncome/index.config.ts
@ -0,0 +1,7 @@
+export default {
+  navigationBarTitleText: '活动收益',
+  navigationBarTextStyle: 'white',
+  enableShareAppMessage: true,
+  navigationBarBackgroundColor: '#4A7FFF',
+  backgroundColorTop: '#4A7FFF',
+}
--- a/src/pages/activityIncome/index.module.scss
+++ b/src/pages/activityIncome/index.module.scss
@ -0,0 +1,144 @@
+.main {
+  background-color: #f7f7f7ff;
+  min-height: 100vh;
+  .header {
+    background-color: #4a7fffff;
+    color: #fff;
+    .header_balance_total {
+      display: flex;
+      justify-content: space-between;
+      height: 242px;
+      align-items: center;
+      .balance {
+        margin-left: 48px;
+        font-size: 24px;
+        .balance_num {
+          font-size: 70px;
+          font-weight: bold;
+        }
+        .accumulative_count {
+          text {
+            font-size: 28px;
+            font-weight: 500;
+            display: inline-block;
+            padding: 0 8px;
+          }
+        }
+      }
+      .withdraw {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(264deg, #4e82ff 0%, #719aff 100%);
+        box-shadow: -3px 0px 10px -2px rgba(51, 106, 240, 1);
+        border-radius: 100px 0px 0px 100px;
+        width: 200px;
+        height: 60px;
+        font-size: 24px;
+        padding-left: 10px;
+        box-sizing: border-box;
+        text {
+          margin-left: 10px;
+        }
+      }
+    }
+    .price_list {
+      display: flex;
+      .price_list_item {
+        flex: 1;
+        height: 100px;
+        font-size: 22px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        border-top: 1px #fff solid;
+        padding-left: 48px;
+        box-sizing: border-box;
+        &:nth-child(1) {
+          border-right: 1px #fff solid;
+        }
+        text {
+          display: block;
+          &:nth-child(2) {
+            font-size: 28px;
+            margin-top: 6px;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+  }
+  .con {
+    background: #ffffff;
+    border-radius: 16px;
+    margin: 24px;
+    .toBeSettled {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      font-weight: 500;
+      padding-top: 40px;
+      .text {
+        font-size: 28px;
+        font-weight: 500;
+      }
+      .miconfont {
+        font-size: 30px;
+      }
+      .price {
+        font-size: 66px;
+        margin-top: 16px;
+        font-weight: bold;
+      }
+    }
+    .card {
+      padding: 0 24px 32px 24px;
+      box-sizing: border-box;
+      .title {
+        display: flex;
+        align-items: center;
+        text {
+          &:nth-child(1) {
+            width: 6px;
+            height: 24px;
+            background: #4a7fff;
+          }
+          &:nth-child(2) {
+            font-size: 28px;
+            font-weight: 700;
+            margin-left: 7px;
+          }
+        }
+      }
+      .card_list {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        justify-content: space-between;
+        grid-gap: 24px;
+        margin-top: 24px;
+        .card_item {
+          background: #f6f7fb;
+          border-radius: 8px;
+          width: 100%;
+          height: 112px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          text {
+            &:nth-child(1) {
+              font-size: 32px;
+              color: rgba(0, 0, 0, 0.8);
+            }
+            &:nth-child(2) {
+              font-size: 28px;
+              color: rgba(0, 0, 0, 0.4);
+              margin-top: 8px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/pages/activityIncome/index.tsx
+++ b/src/pages/activityIncome/index.tsx
@ -0,0 +1,99 @@
+
+import { Icon, Text, View } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import classNames from 'classnames'
+import { useState } from 'react'
+import styles from './index.module.scss'
+import IconFont from '@/components/iconfont/iconfont'
+import { alert } from '@/common/common'
+
+export default () => {
+  const openMsg = () => {
+    Taro.showModal({
+      title: '提示',
+      showCancel: false,
+      content: '每笔订单产生的返佣，在已收货14天后会自动到账账户余额中，期间中途产生的退货条数会自动扣除，每天9:00自动更新收益。',
+      success(res) {
+      },
+    })
+  }
+
+  const openWithdraw = () => {
+    alert.none('若需提现，请联系线上客服进行处理')
+  }
+  return (
+    <View className={styles.main}>
+      <View className={styles.header}>
+        <View className={styles.header_balance_total}>
+          <View className={styles.balance}>
+            <View>账户余额(元）</View>
+            <View className={styles.balance_num}>20,330.00</View>
+            <View className={styles.accumulative_count}>累计收益<Text>20,330.00</Text>元</View>
+          </View>
+          <View className={styles.withdraw} onClick={openWithdraw}>
+            <IconFont name="icon-lijitixian" size={37} />
+            <Text>立即提现</Text>
+            <IconFont name="icon-rukou" color="#fff" size={35} />
+          </View>
+        </View>
+        <View className={styles.price_list}>
+          <View className={styles.price_list_item}>
+            <Text>今日收益(元）</Text>
+            <Text>5,000.00</Text>
+          </View>
+          <View className={styles.price_list_item}>
+            <Text>近14日收益(元）</Text>
+            <Text>5,000.00</Text>
+          </View>
+        </View>
+      </View>
+      <View className={styles.con}>
+        <View className={styles.toBeSettled}>
+          <View className={styles.text} onClick={openMsg}>待结算收益(元)<Text className={classNames(styles.miconfont, 'iconfont icon-zhushi')}></Text></View>
+          <View className={styles.price}>180.00</View>
+        </View>
+        <View className={styles.card}>
+          <View className={styles.title}>
+            <Text></Text>
+            <Text>主动收益</Text>
+          </View>
+          <View className={styles.card_list}>
+            <View className={styles.card_item}>
+              <Text>10条</Text>
+              <Text>大货条数</Text>
+            </View>
+            <View className={styles.card_item}>
+              <Text>120元</Text>
+              <Text>大货收益</Text>
+            </View>
+          </View>
+        </View>
+        <View className={styles.card}>
+          <View className={styles.title}>
+            <Text></Text>
+            <Text>被动收益</Text>
+          </View>
+          <View className={styles.card_list}>
+            <View className={styles.card_item}>
+              <Text>10条</Text>
+              <Text>大货条数</Text>
+            </View>
+            <View className={styles.card_item}>
+              <Text>120元</Text>
+              <Text>大货收益</Text>
+            </View>
+            <View className={styles.card_item}>
+              <Text>120元</Text>
+              <Text>大货收益</Text>
+            </View>
+            <View className={styles.card_item}>
+              <Text>120元</Text>
+              <Text>大货收益</Text>
+            </View>
+          </View>
+        </View>
+      </View>
+
+    </View>
+  )
+}
--- a/src/pages/order/comfirm.tsx
+++ b/src/pages/order/comfirm.tsx
@ -1,4 +1,4 @@
-import { View } from '@tarojs/components'
+import { Text, View } from '@tarojs/components'
 import Taro, { useDidShow, usePullDownRefresh } from '@tarojs/taro'
 import classnames from 'classnames'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
@ -17,6 +17,7 @@ import { SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum'
 import { UseSubscriptionMessage } from '@/use/useCommon'
 import { throttle } from '@/common/util'
 import MoveBtn from '@/components/moveBtn'
+import IconFont from '@/components/iconfont/iconfont'

 const Comfirm = () => {
  const [showDesc, setShowDesc] = useState(false)
--- a/src/pages/order/components/kindList/index.module.scss
+++ b/src/pages/order/components/kindList/index.module.scss
@ -3,10 +3,16 @@
  color: $color_font_two;
  font-size: $font_size_medium;
 }
+.order_con {
+  position: relative;
+  margin-top: 70px;
+}
 .orders_list_con {
  background-color: #fff;
  border-radius: 20px;
  padding: 20px;
+  z-index: 999;
+  position: relative;
  .order_list {
    &:nth-child(n + 2) {
      margin-top: 30px;
@ -142,3 +148,33 @@
    }
  }
 }
+.return_money {
+  font-size: 24px;
+  font-weight: 500;
+  display: flex;
+  justify-content: center;
+  width: 702px;
+  height: 92px;
+  background: #e7f1ff;
+  border-radius: 16px 16px 0px 0px;
+  color: #337fff;
+  padding-top: 10px;
+  position: absolute;
+  bottom: 0px;
+  z-index: 99;
+  width: 100%;
+  left: 0;
+  top: -60px;
+  .rukou {
+    position: absolute;
+    right: 20px;
+  }
+  .money_line {
+    height: 40px;
+    display: flex;
+    align-items: center;
+    text {
+      margin-left: 8px;
+    }
+  }
+}
--- a/src/pages/order/components/kindList/index.tsx
+++ b/src/pages/order/components/kindList/index.tsx
@ -5,6 +5,10 @@ import { ORDER_STATUS } from '@/common/enum'
 import { formatHashTag, formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
 import EstimatedAmount from '@/components/estimatedAmount'
 import LabAndImg from '@/components/LabAndImg'
+import IconFont from '@/components/iconfont/iconfont'
+import ReturnCashModal from '@/components/returnCashModal'
+import Popup from '@/components/popup'
+import Dialog from '@/components/Dialog'

 interface OrderParam {
  estimate_amount: number // 预估金额
@ -185,64 +189,72 @@ const KindList = ({ order, comfirm = false }: Param) => {
    [order],
  )

+  const [returnCashShow, setReturnCashShow] = useState(false)
+
  return (
    <>
      <View className={styles.orders_list_title}>{numText}</View>
-      <View className={styles.orders_list_con}>
-        {order?.list?.map((item) => {
-          return (
-            <View key={item.product_code} className={styles.order_list}>
-              <View className={styles.order_list_title}>
-                <View className={styles.tag}>{order.sale_mode_name}</View>
-                <View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
-                {!item.is_screw_recommend
-                  ? <View className={styles.num}>共{item?.product_colors.length}种</View>
-                  : <View className={styles.label}>配套螺纹</View>}
-              </View>
-              <View className={styles.order_list_scroll}>
-                {item?.product_colors?.map((colorItem) => {
-                  return (
-                    <View key={colorItem.id} className={styles.order_list_item}>
-                      <View className={styles.order_list_item_img}>
-                        <LabAndImg value={{ lab: colorItem.lab, rgb: colorItem.rgb, texture_url: colorItem.texture_url }} showStatus={false} />
-                      </View>
-                      <View className={styles.order_list_item_con}>
-                        <View className={styles.order_list_item_des}>
-                          <View className={styles.order_list_item_title}>
-                            {`${colorItem.code} ${colorItem.name}`}
-                            {colorItem?.return_roll > 0 && <Text>{`已退${colorItem?.return_roll}条`}</Text>}
-                            {colorItem?.apply_return_roll > 0 && <Text>{`待退${colorItem?.apply_return_roll}条`}</Text>}
-                          </View>
-                          <View className={styles.order_list_item_price}>
-                            {/* {
+      <View className={styles.order_con}>
+        <View className={styles.return_money} onClick={() => setReturnCashShow(true)}>
+          <View className={styles.money_line}><IconFont name="icon-hongbao" size={30} /><Text>大货订单，此单预估返现 48 元</Text> <View className={styles.rukou}><IconFont name="icon-rukou" size={30} /></View></View>
+        </View>
+        <View className={styles.orders_list_con}>
+          {order?.list?.map((item) => {
+            return (
+              <View key={item.product_code} className={styles.order_list}>
+                <View className={styles.order_list_title}>
+                  <View className={styles.tag}>{order.sale_mode_name}</View>
+                  <View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
+                  {!item.is_screw_recommend
+                    ? <View className={styles.num}>共{item?.product_colors.length}种</View>
+                    : <View className={styles.label}>配套螺纹</View>}
+                </View>
+                <View className={styles.order_list_scroll}>
+                  {item?.product_colors?.map((colorItem) => {
+                    return (
+                      <View key={colorItem.id} className={styles.order_list_item}>
+                        <View className={styles.order_list_item_img}>
+                          <LabAndImg value={{ lab: colorItem.lab, rgb: colorItem.rgb, texture_url: colorItem.texture_url }} showStatus={false} />
+                        </View>
+                        <View className={styles.order_list_item_con}>
+                          <View className={styles.order_list_item_des}>
+                            <View className={styles.order_list_item_title}>
+                              {`${colorItem.code} ${colorItem.name}`}
+                              {colorItem?.return_roll > 0 && <Text>{`已退${colorItem?.return_roll}条`}</Text>}
+                              {colorItem?.apply_return_roll > 0 && <Text>{`待退${colorItem?.apply_return_roll}条`}</Text>}
+                            </View>
+                            <View className={styles.order_list_item_price}>
+                              {/* {
                              order?.sale_mode === 0 && colorItem?.standard_sale_price > colorItem.sale_price && <View className={styles.lastPrice}>¥{standardPrice(colorItem.standard_sale_price)}</View>
                            } */}
-                            <>
+                              <>
                            ¥{standardPrice(colorItem.sale_price)}
-                              {aboutWeight(colorItem.estimate_weight)}
-                            </>
+                                {aboutWeight(colorItem.estimate_weight)}
+                              </>
+                            </View>
                          </View>
-                        </View>
-                        <View className={styles.order_list_item_count}>
-                          <View className={styles.count_num}>
+                          <View className={styles.order_list_item_count}>
+                            <View className={styles.count_num}>
                            ×{formatCount(colorItem)}
-                            <text>{order.unit}</text>
-                          </View>
-                          <View className={styles.count_price}>
-                            <text>¥</text>
-                            {colorPrice(colorItem)}
+                              <text>{order.unit}</text>
+                            </View>
+                            <View className={styles.count_price}>
+                              <text>¥</text>
+                              {colorPrice(colorItem)}
+                            </View>
                          </View>
                        </View>
                      </View>
-                    </View>
-                  )
-                })}
+                    )
+                  })}
+                </View>
              </View>
-            </View>
-          )
-        })}
-        <View className={styles.order_estimated_amount}>{showPriceConDom}</View>
+            )
+          })}
+          <View className={styles.order_estimated_amount}>{showPriceConDom}</View>
+        </View>
      </View>
+      <ReturnCashModal showModal={returnCashShow} onClose={() => setReturnCashShow(false)}></ReturnCashModal>
    </>
  )
 }
--- a/src/pages/user/index.module.scss
+++ b/src/pages/user/index.module.scss
@ -298,4 +298,51 @@
    align-items: center;
    color: #ccc;
  }
+  .earnings_list {
+    padding-bottom: 24px;
+  }
+  .earnings_con {
+    margin: 0 24px;
+    padding: 0 24px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 136px;
+    box-shadow: 0px 0px 9px 0px rgba(202, 214, 255, 0.49);
+    box-sizing: border-box;
+    .earnings_price {
+      .earnings_title {
+        font-size: 24px;
+        color: rgba(0, 0, 0, 0.6);
+      }
+      .earnings_total {
+        font-size: 24px;
+        color: #4581ffff;
+        display: flex;
+        margin-top: 8px;
+        align-items: center;
+        .all_earnings {
+          font-size: 39px;
+          font-weight: bold;
+        }
+        .today_earnings {
+          width: 159px;
+          height: 38px;
+          font-size: 22px;
+          background: linear-gradient(270deg, #6798ff 0%, #4581ff 100%);
+          border-radius: 8px;
+          color: #fff;
+          text-align: center;
+          line-height: 38px;
+          margin-left: 8px;
+        }
+      }
+    }
+    .more {
+      color: #4581ff;
+      font-size: 28px;
+      display: flex;
+      align-items: center;
+    }
+  }
 }
--- a/src/pages/user/index.tsx
+++ b/src/pages/user/index.tsx
@ -161,6 +161,18 @@ export default () => {

        </View>
      </View>
+      <View className={classnames(styles.nav_list, styles.earnings_list)}>
+        <View className={styles.nav_list__title}>
+          <Text className={styles.title_text}>下单返现活动</Text>
+        </View>
+        <View className={styles.earnings_con}>
+          <View className={styles.earnings_price}>
+            <Text className={styles.earnings_title}>活动返现收益(元）</Text>
+            <View className={styles.earnings_total}><Text>¥</Text> <Text className={styles.all_earnings}>20330.00</Text> <View className={styles.today_earnings}>今日收益 5000</View></View>
+          </View>
+          <View className={styles.more} onClick={() => goLink('/pages/activityIncome/index')}><Text>查看收益</Text><IconFont name="icon-rukou" size={30} /></View>
+        </View>
+      </View>
      <View className={styles.nav_list}>
        <View className={styles.nav_list__title}>
          <Text className={styles.title_text}>我的服务</Text>