From 5a1d6dddb075c0adbd3b635e1af5c65c7c4e0e25 Mon Sep 17 00:00:00 2001
From: czm <2192718639@qq.com>
Date: Wed, 8 Mar 2023 19:03:10 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(UI):=20=E5=B7=B2=E5=AE=8C?=
=?UTF-8?q?=E6=88=90UI100%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
iconfont.json | 2 +-
src/app.config.ts | 6 +
src/components/codeSelect/index.module.scss | 1 +
src/components/codeSelect/index.tsx | 8 +-
src/components/iconfont/iconfont.tsx | 189 +++++++++---------
.../returnCashModal/index.module.scss | 102 ++++++++++
src/components/returnCashModal/index.tsx | 46 +++++
src/components/tagMsg/index.module.scss | 88 ++++++++
src/components/tagMsg/index.tsx | 59 ++++++
src/pages/activityIncome/index.config.ts | 7 +
src/pages/activityIncome/index.module.scss | 144 +++++++++++++
src/pages/activityIncome/index.tsx | 99 +++++++++
src/pages/order/comfirm.tsx | 3 +-
.../components/kindList/index.module.scss | 36 ++++
src/pages/order/components/kindList/index.tsx | 102 +++++-----
src/pages/user/index.module.scss | 47 +++++
src/pages/user/index.tsx | 12 ++
17 files changed, 810 insertions(+), 141 deletions(-)
create mode 100644 src/components/returnCashModal/index.module.scss
create mode 100644 src/components/returnCashModal/index.tsx
create mode 100644 src/components/tagMsg/index.module.scss
create mode 100644 src/components/tagMsg/index.tsx
create mode 100644 src/pages/activityIncome/index.config.ts
create mode 100644 src/pages/activityIncome/index.module.scss
create mode 100644 src/pages/activityIncome/index.tsx
diff --git a/iconfont.json b/iconfont.json
index d0e744f..ac9a6ae 100644
--- 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,
diff --git a/src/app.config.ts b/src/app.config.ts
index 22920f0..fefcef8 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -266,5 +266,11 @@ export default {
'index',
],
},
+ {
+ root: 'pages/activityIncome',
+ pages: [
+ 'index',
+ ],
+ },
],
}
diff --git a/src/components/codeSelect/index.module.scss b/src/components/codeSelect/index.module.scss
index 305fc2e..1be6589 100644
--- 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;
}
diff --git a/src/components/codeSelect/index.tsx b/src/components/codeSelect/index.tsx
index 6243e0c..ef69f6f 100644
--- a/src/components/codeSelect/index.tsx
+++ b/src/components/codeSelect/index.tsx
@@ -72,14 +72,14 @@ export default ({ y, orderObj = {} }: param) => {
原始码单预览
- {!!orderObj?.custom_print_id &&
+ {/* {!!orderObj?.custom_print_id &&
自定义码单预览
- }
-
+ } */}
+ {/*
{orderObj?.custom_print_id ? '编辑自定义码单' : '新建自定义码单'}
-
+ */}
}
setShowCode(!showCode)}>码单
diff --git a/src/components/iconfont/iconfont.tsx b/src/components/iconfont/iconfont.tsx
index 2e2ae56..368eee2 100644
--- a/src/components/iconfont/iconfont.tsx
+++ b/src/components/iconfont/iconfont.tsx
@@ -1,90 +1,99 @@
-import React, { useState, useEffect, FC } from "react";
-import { Block, View } from "@tarojs/components";
-import "./iconfont.scss";
-import Taro from "@tarojs/taro";
-import classnames from "classnames";
+import React, { useState, useEffect, FC } from "react";
+import { Block, View } from "@tarojs/components";
+import "./iconfont.scss";
+import Taro from "@tarojs/taro";
+import classnames from "classnames";
+
+const SystemWidth = Taro.getSystemInfoSync().windowWidth
+const quot = '"'
+
+function hex2rgb(hex) {
+ const rgb: number[] = [];
+
+ hex = hex.substr(1);
+
+ if (hex.length === 3) {
+ hex = hex.replace(/(.)/g, "$1$1");
+ }
+
+ hex.replace(/../g, function(color: string) {
+ rgb.push(parseInt(color, 0x10));
+ return color;
+ });
+
+ return "rgb(" + rgb.join(",") + ")";
+}
+
+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;
+ size?: number;
+ color?: string | string[];
+ customStyle?: React.CSSProperties;
+ customClassName?: string;
+};
+
+const IconFont:FC = ({
+ name,
+ size = 36,
+ color,
+ customStyle = {},
+ customClassName = ""
+}) => {
+ const [colors, setColors] = useState()
+ const [isStr, setIsStr] = useState(true)
+ const [svgSize, setSvgSize] = useState(() => (size / 750) * SystemWidth)
+
+ useEffect(() => {
+ setIsStr(typeof color === 'string')
+ if (typeof color === 'string') {
+ setColors(color.indexOf('#') === 0 ? hex2rgb(color) : color)
+ } else {
+ setColors(
+ color?.map(function (item) {
+ return item.indexOf('#') === 0 ? hex2rgb(item) : item
+ })
+ )
+ }
+ return () => {}
+ }, [color])
+
+ useEffect(() => {
+ setSvgSize((size / 750) * SystemWidth)
+ }, [size])
+
+ // 也可以使用 if (name === 'xxx') { return } 来渲染，但是测试发现在ios下会有问题，报错 Maximum call stack啥的。下面这个写法没问题
+ return (
+
+ {/* icon-colorCard 本地svg */ }
+ {/* { name === 'icon-colorCard' && () } */}
+ {/* icon-alipay */}
+ {/* {name === "icon-alipay" && (
+
+ )} */}
+ {/* icon-lijitixian */}
-const SystemWidth = Taro.getSystemInfoSync().windowWidth
-const quot = '"'
+ { name === 'icon-lijitixian' && () }
+{/* icon-hongbao */}
-function hex2rgb(hex) {
- const rgb: number[] = [];
+ { name === 'icon-hongbao' && () }
+{/* icon-xuanzhongshijian */}
- hex = hex.substr(1);
-
- if (hex.length === 3) {
- hex = hex.replace(/(.)/g, "$1$1");
- }
-
- hex.replace(/../g, function(color: string) {
- rgb.push(parseInt(color, 0x10));
- return color;
- });
-
- 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';
-
-type PropsType = {
- name: IconNames;
- size?: number;
- color?: string | string[];
- customStyle?: React.CSSProperties;
- customClassName?: string;
-};
-
-const IconFont:FC = ({
- name,
- size = 36,
- color,
- customStyle = {},
- customClassName = ""
-}) => {
- const [colors, setColors] = useState()
- const [isStr, setIsStr] = useState(true)
- const [svgSize, setSvgSize] = useState(() => (size / 750) * SystemWidth)
-
- useEffect(() => {
- setIsStr(typeof color === 'string')
- if (typeof color === 'string') {
- setColors(color.indexOf('#') === 0 ? hex2rgb(color) : color)
- } else {
- setColors(
- color?.map(function (item) {
- return item.indexOf('#') === 0 ? hex2rgb(item) : item
- })
- )
- }
- return () => {}
- }, [color])
-
- useEffect(() => {
- setSvgSize((size / 750) * SystemWidth)
- }, [size])
-
- // 也可以使用 if (name === 'xxx') { return } 来渲染，但是测试发现在ios下会有问题，报错 Maximum call stack啥的。下面这个写法没问题
- return (
-
- {/* icon-colorCard 本地svg */ }
- {/* { name === 'icon-colorCard' && () } */}
- {/* icon-alipay */}
- {/* {name === "icon-alipay" && (
-
- )} */}
- {/* icon-zhankai1 */}
+ { name === 'icon-xuanzhongshijian' && () }
+{/* icon-zhankai1 */}
{ name === 'icon-zhankai1' && () }
{/* icon-shouqi1 */}
@@ -303,9 +312,9 @@ const IconFont:FC = ({
{/* icon-daifukuan2 */}
{ name === 'icon-daifukuan2' && () }
-
-
- )
-}
-
-export default IconFont
+
+
+ )
+}
+
+export default IconFont
diff --git a/src/components/returnCashModal/index.module.scss b/src/components/returnCashModal/index.module.scss
new file mode 100644
index 0000000..07b0a14
--- /dev/null
+++ 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;
+}
diff --git a/src/components/returnCashModal/index.tsx b/src/components/returnCashModal/index.tsx
new file mode 100644
index 0000000..2ecf27c
--- /dev/null
+++ 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
+}
+export default OrganizationNameModal
diff --git a/src/components/tagMsg/index.module.scss b/src/components/tagMsg/index.module.scss
new file mode 100644
index 0000000..3bd308c
--- /dev/null
+++ 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;
+ }
+
+}
\ No newline at end of file
diff --git a/src/components/tagMsg/index.tsx b/src/components/tagMsg/index.tsx
new file mode 100644
index 0000000..c2306d8
--- /dev/null
+++ 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 (
+ <>
+
+ openShow()}>
+
+ {show && {messageTitle}}
+
+
+
+ {show && }
+
+
+ )
+}
+export default memo(EstimeatedAmount)
diff --git a/src/pages/activityIncome/index.config.ts b/src/pages/activityIncome/index.config.ts
new file mode 100644
index 0000000..0a1b9c3
--- /dev/null
+++ b/src/pages/activityIncome/index.config.ts
@@ -0,0 +1,7 @@
+export default {
+ navigationBarTitleText: '活动收益',
+ navigationBarTextStyle: 'white',
+ enableShareAppMessage: true,
+ navigationBarBackgroundColor: '#4A7FFF',
+ backgroundColorTop: '#4A7FFF',
+}
diff --git a/src/pages/activityIncome/index.module.scss b/src/pages/activityIncome/index.module.scss
new file mode 100644
index 0000000..9566e69
--- /dev/null
+++ 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;
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/pages/activityIncome/index.tsx b/src/pages/activityIncome/index.tsx
new file mode 100644
index 0000000..4b4c573
--- /dev/null
+++ 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 (
+
+
+
+
+ 账户余额(元）
+ 20,330.00
+ 累计收益20,330.00元
+
+
+
+ 立即提现
+
+
+
+
+
+ 今日收益(元）
+ 5,000.00
+
+
+ 近14日收益(元）
+ 5,000.00
+
+
+
+
+
+ 待结算收益(元)
+ 180.00
+
+
+
+
+ 主动收益
+
+
+
+ 10条
+ 大货条数
+
+
+ 120元
+ 大货收益
+
+
+
+
+
+
+ 被动收益
+
+
+
+ 10条
+ 大货条数
+
+
+ 120元
+ 大货收益
+
+
+ 120元
+ 大货收益
+
+
+ 120元
+ 大货收益
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/order/comfirm.tsx b/src/pages/order/comfirm.tsx
index f525c5f..e5bbe61 100644
--- 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)
diff --git a/src/pages/order/components/kindList/index.module.scss b/src/pages/order/components/kindList/index.module.scss
index b452580..66c2e6d 100644
--- 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;
+ }
+ }
+}
diff --git a/src/pages/order/components/kindList/index.tsx b/src/pages/order/components/kindList/index.tsx
index f0e716c..e67fdfa 100644
--- 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 (
<>
{numText}
-
- {order?.list?.map((item) => {
- return (
-
-
- {order.sale_mode_name}
- {formatHashTag(item.code, item.name)}
- {!item.is_screw_recommend
- ? 共{item?.product_colors.length}种
- : 配套螺纹}
-
-
- {item?.product_colors?.map((colorItem) => {
- return (
-
-
-
-
-
-
-
- {`${colorItem.code} ${colorItem.name}`}
- {colorItem?.return_roll > 0 && {`已退${colorItem?.return_roll}条`}}
- {colorItem?.apply_return_roll > 0 && {`待退${colorItem?.apply_return_roll}条`}}
-
-
- {/* {
+
+ setReturnCashShow(true)}>
+ 大货订单，此单预估返现 48 元
+
+
+ {order?.list?.map((item) => {
+ return (
+
+
+ {order.sale_mode_name}
+ {formatHashTag(item.code, item.name)}
+ {!item.is_screw_recommend
+ ? 共{item?.product_colors.length}种
+ : 配套螺纹}
+
+
+ {item?.product_colors?.map((colorItem) => {
+ return (
+
+
+
+
+
+
+
+ {`${colorItem.code} ${colorItem.name}`}
+ {colorItem?.return_roll > 0 && {`已退${colorItem?.return_roll}条`}}
+ {colorItem?.apply_return_roll > 0 && {`待退${colorItem?.apply_return_roll}条`}}
+
+
+ {/* {
order?.sale_mode === 0 && colorItem?.standard_sale_price > colorItem.sale_price && ¥{standardPrice(colorItem.standard_sale_price)}
} */}
- <>
+ <>
¥{standardPrice(colorItem.sale_price)}
- {aboutWeight(colorItem.estimate_weight)}
-
+ {aboutWeight(colorItem.estimate_weight)}
+
+
-
-
-
+
+
×{formatCount(colorItem)}
- {order.unit}
-
-
- ¥
- {colorPrice(colorItem)}
+ {order.unit}
+
+
+ ¥
+ {colorPrice(colorItem)}
+
-
- )
- })}
+ )
+ })}
+
-
- )
- })}
- {showPriceConDom}
+ )
+ })}
+ {showPriceConDom}
+
+ setReturnCashShow(false)}>
)
}
diff --git a/src/pages/user/index.module.scss b/src/pages/user/index.module.scss
index 41250f3..8a4db06 100644
--- 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;
+ }
+ }
}
diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx
index 4a8b1d0..366f63d 100644
--- a/src/pages/user/index.tsx
+++ b/src/pages/user/index.tsx
@@ -161,6 +161,18 @@ export default () => {
+
+
+ 下单返现活动
+
+
+
+ 活动返现收益(元）
+ ¥ 20330.00 今日收益 5000
+
+ goLink('/pages/activityIncome/index')}>查看收益
+
+
我的服务