✨ feat(UI): 已完成UI100%
This commit is contained in:
xuan
parent
bec081fa4c
commit
5a1d6dddb0
@ -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,
|
||||
|
||||
@ -266,5 +266,11 @@ export default {
|
||||
'index',
|
||||
],
|
||||
},
|
||||
{
|
||||
root: 'pages/activityIncome',
|
||||
pages: [
|
||||
'index',
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
@ -45,4 +45,5 @@
|
||||
opacity: 0.08;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,6 +84,15 @@ const IconFont:FC<PropsType> = ({
|
||||
className={classnames(icon, customClassName)}
|
||||
/>
|
||||
)} */}
|
||||
{/* 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)} />) }
|
||||
|
||||
102
src/components/returnCashModal/index.module.scss
Normal file
102
src/components/returnCashModal/index.module.scss
Normal file
@ -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;
|
||||
}
|
||||
46
src/components/returnCashModal/index.tsx
Normal file
46
src/components/returnCashModal/index.tsx
Normal file
@ -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
|
||||
88
src/components/tagMsg/index.module.scss
Normal file
88
src/components/tagMsg/index.module.scss
Normal file
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
59
src/components/tagMsg/index.tsx
Normal file
59
src/components/tagMsg/index.tsx
Normal file
@ -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)
|
||||
7
src/pages/activityIncome/index.config.ts
Normal file
7
src/pages/activityIncome/index.config.ts
Normal file
@ -0,0 +1,7 @@
|
||||
export default {
|
||||
navigationBarTitleText: '活动收益',
|
||||
navigationBarTextStyle: 'white',
|
||||
enableShareAppMessage: true,
|
||||
navigationBarBackgroundColor: '#4A7FFF',
|
||||
backgroundColorTop: '#4A7FFF',
|
||||
}
|
||||
144
src/pages/activityIncome/index.module.scss
Normal file
144
src/pages/activityIncome/index.module.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
99
src/pages/activityIncome/index.tsx
Normal file
99
src/pages/activityIncome/index.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
@ -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)
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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,9 +189,15 @@ const KindList = ({ order, comfirm = false }: Param) => {
|
||||
[order],
|
||||
)
|
||||
|
||||
const [returnCashShow, setReturnCashShow] = useState(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className={styles.orders_list_title}>{numText}</View>
|
||||
<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 (
|
||||
@ -243,6 +253,8 @@ const KindList = ({ order, comfirm = false }: Param) => {
|
||||
})}
|
||||
<View className={styles.order_estimated_amount}>{showPriceConDom}</View>
|
||||
</View>
|
||||
</View>
|
||||
<ReturnCashModal showModal={returnCashShow} onClose={() => setReturnCashShow(false)}></ReturnCashModal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user