✨ feat(领取色卡完成):
This commit is contained in:
parent
951acae9ba
commit
4043c77382
@ -1,5 +1,5 @@
|
||||
{
|
||||
"symbol_url": "//at.alicdn.com/t/c/font_3786318_dbfm4mvm98c.js",
|
||||
"symbol_url": "//at.alicdn.com/t/c/font_3786318_gquep5m0ohd.js",
|
||||
"save_dir": "./src/components/iconfont",
|
||||
"use_typescript": false,
|
||||
"use_rpx": true,
|
||||
|
||||
@ -32,3 +32,36 @@ export const GetColorCardOrderApi = () => {
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取色卡订单状态列表
|
||||
* @returns
|
||||
*/
|
||||
export const GetColorCardOrderStatusApi = () => {
|
||||
return request({
|
||||
url: '/v1/mall/colorCardOrder/enum/auditStatus',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 取消订单
|
||||
* @returns
|
||||
*/
|
||||
export const ColorCardOrderCancelApi = () => {
|
||||
return request({
|
||||
url: '/v1/mall/colorCardOrder/cancel',
|
||||
method: 'post',
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取色卡订单详情
|
||||
* @returns
|
||||
*/
|
||||
export const GetColorCardOrderDetailApi = () => {
|
||||
return request({
|
||||
url: '/v1/mall/colorCardOrder',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
@ -207,7 +207,7 @@ export default {
|
||||
],
|
||||
},
|
||||
{
|
||||
root: 'pages/colorCard',
|
||||
root: 'pages/colorCardClipping',
|
||||
pages: [
|
||||
'index',
|
||||
],
|
||||
|
||||
@ -54,6 +54,7 @@ export const SUBSCRIPTION_MESSAGE_SCENE = {
|
||||
SubmitOrder: { value: 1, label: '确认下单' },
|
||||
ToPay: { value: 2, label: '去付款' },
|
||||
ApplyGoods: { value: 3, label: '申请退款' },
|
||||
ColorCard: { value: 4, label: '申请色卡' },
|
||||
}
|
||||
|
||||
// 应收单退款状态枚举
|
||||
|
||||
@ -1,90 +1,132 @@
|
||||
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-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<PropsType> = ({
|
||||
name,
|
||||
size = 36,
|
||||
color,
|
||||
customStyle = {},
|
||||
customClassName = ""
|
||||
}) => {
|
||||
const [colors, setColors] = useState<PropsType['color']>()
|
||||
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 <view> } 来渲染，但是测试发现在ios下会有问题，报错 Maximum call stack啥的。下面这个写法没问题
|
||||
return (
|
||||
<Block>
|
||||
{/* icon-colorCard 本地svg */ }
|
||||
{/* { name === 'icon-colorCard' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px' viewBox='0 0 72 72'><defs><linearGradient id='a' x1='56.049%' x2='45.965%' y1='85.384%' y2='36.243%'><stop offset='0%' stop-color='${(isStr ? colors : colors?.[0]) || '%233667EF'}' stop-opacity='.572'/><stop offset='100%' stop-color='${(isStr ? colors : colors?.[1]) || '%233591FD'}' stop-opacity='.551'/></linearGradient><linearGradient id='b' x1='100%' x2='16.645%' y1='85.384%' y2='36.243%'><stop offset='0%' stop-color='${(isStr ? colors : colors?.[2]) || '%233667EF'}' stop-opacity='.572'/><stop offset='100%' stop-color='${(isStr ? colors : colors?.[3]) || '%233591FD'}' stop-opacity='.551'/></linearGradient><linearGradient id='c' x1='18.906%' x2='80.404%' y1='44.444%' y2='55.556%'><stop offset='0%' stop-color='${(isStr ? colors : colors?.[4]) || '%233591FD'}'/><stop offset='100%' stop-color='${(isStr ? colors : colors?.[5]) || '%233667EF'}'/></linearGradient></defs><g fill='none' fill-rule='nonzero'><path fill='url(%23a)' d='M24.75 11.25A2.25 2.25 0 0 1 27 13.5v47.25A2.25 2.25 0 0 1 24.75 63h-13.5A2.25 2.25 0 0 1 9 60.75V13.5a2.25 2.25 0 0 1 2.25-2.25h13.5ZM18 50.625a3.375 3.375 0 1 0 0 6.75 3.375 3.375 0 0 0 0-6.75Z'/><path fill='url(%23b)' d='m45.593 16.216 9.546 9.546a2.25 2.25 0 0 1 0 3.182l-31.82 31.82a2.25 2.25 0 0 1-3.182 0L16.273 56.9a3.375 3.375 0 1 0-1.174-1.174l-4.508-4.508a2.25 2.25 0 0 1 0-3.182l31.82-31.82a2.25 2.25 0 0 1 3.182 0Z'/><path fill='url(%23c)' d='M60.75 45A2.25 2.25 0 0 1 63 47.25v13.5A2.25 2.25 0 0 1 60.75 63h-49.5A2.25 2.25 0 0 1 9 60.75v-13.5A2.25 2.25 0 0 1 11.25 45h49.5ZM18 50.625a3.375 3.375 0 1 0 0 6.75 3.375 3.375 0 0 0 0-6.75Z' opacity='.95'/></g></svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) } */}
|
||||
{/* icon-alipay */}
|
||||
{/* {name === "icon-alipay" && (
|
||||
<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='M192 692.736c0-69.632 51.2-106.496 88.064-111.104 111.104-18.432 264.192 74.24 264.192 74.24-69.632 88.064-166.912 134.144-241.152 134.144-65.024-4.608-111.104-41.472-111.104-97.28z' fill='${(isStr
|
||||
? colors
|
||||
: colors[0]) ||
|
||||
"rgb(91,139,212)"}' /%3E%3Cpath d='M979.456 729.6c-13.824-4.608-329.216-101.888-319.488-111.104 46.592-55.808 78.848-185.344 78.848-185.344v-27.648h-185.344V335.872h226.816v-41.472h-226.816V192.512H460.8v97.28H257.024v41.472H460.8v69.632H298.496v27.648h333.824c0 13.824-23.04 106.496-46.08 148.48-4.608-9.216-153.088-60.416-236.544-65.024-88.064 4.608-157.696 32.256-189.952 97.28-46.592 120.32 27.648 241.152 194.56 241.152 27.648 0 162.304-13.824 264.192-153.088 27.648 13.824 185.344 92.672 282.624 143.872-92.672 111.104-231.936 180.736-389.12 180.736-280.576 1.024-508.928-226.304-509.44-506.88v-3.072C1.024 231.424 227.84 3.072 508.928 2.56h3.072c280.576-1.024 508.928 226.304 509.44 506.88v3.072c4.608 82.944-13.824 152.576-41.984 217.088z' fill='${(isStr
|
||||
? colors
|
||||
: colors[1]) ||
|
||||
"rgb(91,139,212)"}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`,
|
||||
...customStyle
|
||||
}}
|
||||
className={classnames(icon, customClassName)}
|
||||
/>
|
||||
)} */}
|
||||
{/* icon-dingwei */}
|
||||
|
||||
const SystemWidth = Taro.getSystemInfoSync().windowWidth
|
||||
const quot = '"'
|
||||
{ name === 'icon-dingwei' && (<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='M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(74,127,255)'}'/%3E%3Cpath d='M512 222c127.04 0 230 102.976 230 230 0 51.2-25.28 110.896-75.328 180.928l-3.536 4.896-3.648 4.976-6.512 8.704-6.816 8.912-7.04 8.96-7.28 9.056-7.52 9.152-7.728 9.216-4.016 4.736-10.176 11.744-2.128 2.432-8.512 9.584-8.736 9.696-9.008 9.792-9.232 9.92-9.488 10.016-9.28 9.648-19.232 21.12a20 20 0 0 1-28.4 1.168l-1.168-1.184-18.88-20.72-9.728-10.144-9.488-10.016-9.248-9.92-8.992-9.808-8.72-9.648-4.32-4.864-8.4-9.536-10.08-11.712-9.808-11.68-7.52-9.168-7.296-9.056-6.992-8.928-3.44-4.448-3.392-4.464-6.48-8.656c-54.768-74.24-82.432-137.12-82.432-190.704 0-127.04 102.976-230 230-230z m0 140a90 90 0 1 0 0 180 90 90 0 0 0 0-180z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(255,255,255)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-xuanzhongyanse */}
|
||||
|
||||
function hex2rgb(hex) {
|
||||
const rgb: number[] = [];
|
||||
{ name === 'icon-xuanzhongyanse' && (<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='M512 0c282.784 0 512 229.216 512 512s-229.216 512-512 512S0 794.784 0 512 229.216 0 512 0z m0 85.344C276.352 85.344 85.344 276.384 85.344 512c0 235.648 191.04 426.656 426.656 426.656 235.648 0 426.656-191.04 426.656-426.656 0-235.648-191.04-426.656-426.656-426.656z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(255,255,255)'}'/%3E%3Cpath d='M512 512m-426.656 0a426.656 426.656 0 1 0 853.312 0 426.656 426.656 0 1 0-853.312 0Z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(51,127,255)'}'/%3E%3Cpath d='M764.8 372.576c16.64 16.64 16.64 43.68 0 60.352l-286.624 286.592c-16.64 16.672-43.68 16.672-60.352 0L275.84 577.504a42.656 42.656 0 1 1 60.352-60.32L448 628.992l256.448-256.416a42.656 42.656 0 0 1 57.28-2.784l3.04 2.784z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(255,255,255)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-sekajianyanglingqu */}
|
||||
|
||||
hex = hex.substr(1);
|
||||
{ name === 'icon-sekajianyanglingqu' && (<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='M352 112c17.664 0 32 14.336 32 32v736a32 32 0 0 1-32 32H144a32 32 0 0 1-32-32V144c0-17.664 14.336-32 32-32H352z m-104.009143 616.009143a56.009143 56.009143 0 1 0 0 112 56.009143 56.009143 0 0 0 0-112.018286z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(229,232,240)'}'/%3E%3Cpath d='M717.586286 170.642286l135.771428 135.771428a32 32 0 0 1 0 45.257143l-520.429714 520.411429a32 32 0 0 1-45.257143 0l-32.566857-32.530286a56.009143 56.009143 0 1 0-62.665143-62.646857l-40.539428-40.576a32 32 0 0 1 0-45.257143l520.429714-520.411429a32 32 0 0 1 45.257143 0z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(212,217,231)'}'/%3E%3Cpath d='M880 656c17.664 0 32 14.336 32 32v192a32 32 0 0 1-32 32H144a32 32 0 0 1-32-32v-192c0-17.664 14.336-32 32-32h736z m-632.009143 72.009143a56.009143 56.009143 0 1 0 0 112 56.009143 56.009143 0 0 0 0-112.018286z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(169,179,207)'}' opacity='.95'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-lingseka */}
|
||||
|
||||
if (hex.length === 3) {
|
||||
hex = hex.replace(/(.)/g, "$1$1");
|
||||
}
|
||||
{ name === 'icon-lingseka' && (<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 112a32 32 0 0 1 32 32v276.330667l50.666667-50.645334 15.274666-15.274666 67.584-67.584 18.517334-18.517334 102.357333-102.357333a32 32 0 0 1 45.226667 0l158.421333 158.4a32 32 0 0 1 0 45.248l-36.906667 36.906667-24.021333 24.021333-184.192 184.192-9.28 9.28H864a32 32 0 0 1 32 32v224a32 32 0 0 1-32 32H400c-2.773333 0-5.44-0.341333-8-1.002667-2.56 0.64-5.226667 1.002667-8 1.002667H160a32 32 0 0 1-32-32V144a32 32 0 0 1 32-32H384z m-16 48h-192v704h192v-704z m480 512H571.669333l-43.072 43.050667-16.64 16.64-16.170666 16.170666-73.450667 73.450667-6.314667 6.314667L416 864h432v-192zM693.013333 211.2L416 488.234667v271.530666l412.8-412.757333L692.992 211.2z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(68,68,68)'}'/%3E%3Cpath d='M272 680a40 40 0 1 0 0 80 40 40 0 0 0 0-80z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(68,68,68)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-lingjianyang */}
|
||||
|
||||
hex.replace(/../g, function(color: string) {
|
||||
rgb.push(parseInt(color, 0x10));
|
||||
return color;
|
||||
});
|
||||
{ name === 'icon-lingjianyang' && (<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='M770.56 106.176a152 152 0 0 1 18.709333 214.144l-183.253333 213.717333a16 16 0 0 1-24.362667-0.106666L266.88 160.490667l-0.810667 1.109333a104.042667 104.042667 0 0 0 2.24 124.949333l2.346667 2.901334 370.922667 442.090666a152 152 0 1 1-21.461334 49.066667l-108.544-129.365333-107.904 128.64a152 152 0 1 1-21.653333-48.874667l98.218667-117.12-246.336-293.568a152 152 0 0 1 18.730666-214.144 24 24 0 0 1 33.813334 2.944l225.130666 268.309333L736.725333 109.12a24 24 0 0 1 33.813334-2.944zM256 712a104 104 0 1 0 0 208 104 104 0 0 0 0-208z m512 0a104 104 0 1 0 0 208 104 104 0 0 0 0-208z m-11.733333-551.509333l-213.333334 254.272 52.202667 62.229333 157.376-187.52 2.346667-2.922667a104.042667 104.042667 0 0 0 2.24-124.949333l-0.810667-1.109333z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(68,68,68)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-gerenzhongxin-dianji */}
|
||||
|
||||
return "rgb(" + rgb.join(",") + ")";
|
||||
}
|
||||
{ name === 'icon-gerenzhongxin-dianji' && (<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='M512 128a144 144 0 0 1 144 144v80a144 144 0 0 1-288 0v-80A144 144 0 0 1 512 128z m112 416C774.217143 544 896 665.782857 896 816V896H128v-80C128 665.782857 249.782857 544 400 544h224z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-shouye-dianji */}
|
||||
|
||||
export type IconNames = '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';
|
||||
{ name === 'icon-shouye-dianji' && (<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='M570.258286 230.308571l2.541714 2.432L808.740571 468.662857h5.650286v5.668572l73.508572 73.508571c9.325714 9.325714 9.380571 24.411429 0.109714 33.682286a23.789714 23.789714 0 0 1-31.963429 1.462857l-1.700571-1.554286-39.954286-39.972571V864.365714c0 17.481143-14.262857 31.652571-31.817143 31.652572H576V688a64 64 0 0 0-128 0V896H241.444571c-17.590857 0-31.835429-14.171429-31.835428-31.652571V539.648l-39.862857 39.862857a23.808 23.808 0 0 1-33.645715-0.091428 23.826286 23.826286 0 0 1-1.645714-31.981715l1.536-1.682285 73.618286-73.636572v-3.437714h3.456l236.288-236.288c33.170286-33.152 86.582857-33.828571 120.905143-2.084572z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-gouwuche-weidianji */}
|
||||
|
||||
type PropsType = {
|
||||
name: IconNames;
|
||||
size?: number;
|
||||
color?: string | string[];
|
||||
customStyle?: React.CSSProperties;
|
||||
customClassName?: string;
|
||||
};
|
||||
{ name === 'icon-gouwuche-weidianji' && (<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='M352 816a64 64 0 1 1 0 128 64 64 0 0 1 0-128z m408.009143 0a64 64 0 1 1 0 128 64 64 0 0 1 0-128zM167.771429 151.990857a55.990857 55.990857 0 0 1 55.296 47.177143l16.987428 106.422857h633.892572c2.139429 0 4.297143 0.128 6.418285 0.365714l3.181715 0.475429a55.990857 55.990857 0 0 1 45.568 64.768L866.742857 729.6a56.009143 56.009143 0 0 1-55.168 46.409143H314.276571a56.009143 56.009143 0 0 1-55.296-47.177143L175.670857 206.738286a7.990857 7.990857 0 0 0-7.899428-6.729143h-87.771429a24.009143 24.009143 0 0 1 0-48.018286h87.771429z m138.605714 569.270857a8.009143 8.009143 0 0 0 7.899428 6.729143h497.28a7.990857 7.990857 0 0 0 7.881143-6.619428l62.390857-358.4a8.009143 8.009143 0 0 0-6.509714-9.252572l-0.676571-0.091428-626.944-0.036572 58.678857 367.670857z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(68,68,68)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-gerenzhongxin-weidianji */}
|
||||
|
||||
const IconFont:FC<PropsType> = ({
|
||||
name,
|
||||
size = 36,
|
||||
color,
|
||||
customStyle = {},
|
||||
customClassName = ""
|
||||
}) => {
|
||||
const [colors, setColors] = useState<PropsType['color']>()
|
||||
const [isStr, setIsStr] = useState(true)
|
||||
const [svgSize, setSvgSize] = useState(() => (size / 750) * SystemWidth)
|
||||
{ name === 'icon-gerenzhongxin-weidianji' && (<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='M624 544C774.217143 544 896 665.782857 896 816V896H128v-80C128 665.782857 249.782857 544 400 544h224z m0 48h-224c-122.038857 0-221.293714 97.590857-223.945143 218.989714l-0.054857 5.010286v32h672v-32c0-122.038857-97.590857-221.293714-218.989714-223.945143l-5.010286-0.054857zM512 128a144 144 0 0 1 144 144v80a144 144 0 0 1-139.757714 143.945143l-4.242286 0.054857a144 144 0 0 1-144-144v-80a144 144 0 0 1 139.757714-143.945143L512 128z m0 48a96 96 0 0 0-95.926857 92.397714l-0.073143 3.602286v80a96 96 0 0 0 191.926857 3.602286l0.073143-3.602286v-80c0-53.028571-42.971429-96-96-96z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(68,68,68)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-gouwuche-dianji */}
|
||||
|
||||
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])
|
||||
{ name === 'icon-gouwuche-dianji' && (<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='M240 496L215.588571 311.990857l685.531429 25.234286-21.12 158.774857L832 736H288z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(69,129,255)'}'/%3E%3Cpath d='M288 816m64 0l0 0q64 0 64 64l0 0q0 64-64 64l0 0q-64 0-64-64l0 0q0-64 64-64Z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(69,129,255)'}'/%3E%3Cpath d='M696.009143 816m64 0l0 0q64 0 64 64l0 0q0 64-64 64l0 0q-64 0-64-64l0 0q0-64 64-64Z' fill='${(isStr ? colors : colors?.[2]) || 'rgb(69,129,255)'}'/%3E%3Cpath d='M167.771429 152.009143a55.990857 55.990857 0 0 1 55.296 47.177143l16.987428 106.422857h633.892572c2.139429 0 4.297143 0.109714 6.418285 0.365714l3.181715 0.457143a55.990857 55.990857 0 0 1 45.568 64.768L866.742857 729.6a56.009143 56.009143 0 0 1-55.168 46.409143H314.276571a56.009143 56.009143 0 0 1-55.296-47.177143L175.670857 206.738286a7.990857 7.990857 0 0 0-7.899428-6.729143h-87.771429a24.009143 24.009143 0 0 1 0-48.018286h87.771429z m138.605714 569.234286a8.009143 8.009143 0 0 0 7.899428 6.765714h497.28a7.990857 7.990857 0 0 0 7.881143-6.637714l62.390857-358.4a8.009143 8.009143 0 0 0-6.509714-9.252572l-0.676571-0.091428-626.944-0.036572 58.678857 367.670857z' fill='${(isStr ? colors : colors?.[3]) || 'rgb(69,129,255)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-shouye-weidianji */}
|
||||
|
||||
useEffect(() => {
|
||||
setSvgSize((size / 750) * SystemWidth)
|
||||
}, [size])
|
||||
{ name === 'icon-shouye-weidianji' && (<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='M543.817143 690.249143c0-16.676571-12.982857-30.354286-29.44-31.561143l-2.377143-0.091429c-16.786286 0-30.537143 12.909714-31.744 29.293715l-0.091429 2.377143V896H241.444571c-17.590857 0-31.835429-14.171429-31.835428-31.652571V539.648l-39.862857 39.862857a23.808 23.808 0 0 1-33.645715-0.091428 23.826286 23.826286 0 0 1-1.645714-31.981715l1.536-1.682285 73.618286-73.636572v-3.437714h3.456l236.288-236.288c33.170286-33.152 86.582857-33.828571 120.905143-2.084572l2.541714 2.432L808.740571 468.662857h5.650286v5.668572l73.508572 73.508571c9.325714 9.325714 9.380571 24.411429 0.109714 33.682286a23.789714 23.789714 0 0 1-31.963429 1.462857l-1.700571-1.554286-39.954286-39.972571V864.365714c0 17.481143-14.262857 31.652571-31.817143 31.652572H543.817143V690.249143z m-58.806857-425.874286l-1.901715 1.792L257.353143 491.885714v356.608h175.067428v-158.262857c0-43.702857 35.638857-79.140571 79.579429-79.140571 43.940571 0 79.579429 35.437714 79.579429 79.140571v158.244572l175.067428 0.018285V493.714286L539.227429 266.313143a39.698286 39.698286 0 0 0-54.217143-1.938286z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(68,68,68)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-paixu1 */}
|
||||
|
||||
// 也可以使用 if (name === 'xxx') { return <view> } 来渲染，但是测试发现在ios下会有问题，报错 Maximum call stack啥的。下面这个写法没问题
|
||||
return (
|
||||
<Block>
|
||||
{/* icon-colorCard 本地svg */ }
|
||||
{/* { name === 'icon-colorCard' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px' viewBox='0 0 72 72'><defs><linearGradient id='a' x1='56.049%' x2='45.965%' y1='85.384%' y2='36.243%'><stop offset='0%' stop-color='${(isStr ? colors : colors?.[0]) || '%233667EF'}' stop-opacity='.572'/><stop offset='100%' stop-color='${(isStr ? colors : colors?.[1]) || '%233591FD'}' stop-opacity='.551'/></linearGradient><linearGradient id='b' x1='100%' x2='16.645%' y1='85.384%' y2='36.243%'><stop offset='0%' stop-color='${(isStr ? colors : colors?.[2]) || '%233667EF'}' stop-opacity='.572'/><stop offset='100%' stop-color='${(isStr ? colors : colors?.[3]) || '%233591FD'}' stop-opacity='.551'/></linearGradient><linearGradient id='c' x1='18.906%' x2='80.404%' y1='44.444%' y2='55.556%'><stop offset='0%' stop-color='${(isStr ? colors : colors?.[4]) || '%233591FD'}'/><stop offset='100%' stop-color='${(isStr ? colors : colors?.[5]) || '%233667EF'}'/></linearGradient></defs><g fill='none' fill-rule='nonzero'><path fill='url(%23a)' d='M24.75 11.25A2.25 2.25 0 0 1 27 13.5v47.25A2.25 2.25 0 0 1 24.75 63h-13.5A2.25 2.25 0 0 1 9 60.75V13.5a2.25 2.25 0 0 1 2.25-2.25h13.5ZM18 50.625a3.375 3.375 0 1 0 0 6.75 3.375 3.375 0 0 0 0-6.75Z'/><path fill='url(%23b)' d='m45.593 16.216 9.546 9.546a2.25 2.25 0 0 1 0 3.182l-31.82 31.82a2.25 2.25 0 0 1-3.182 0L16.273 56.9a3.375 3.375 0 1 0-1.174-1.174l-4.508-4.508a2.25 2.25 0 0 1 0-3.182l31.82-31.82a2.25 2.25 0 0 1 3.182 0Z'/><path fill='url(%23c)' d='M60.75 45A2.25 2.25 0 0 1 63 47.25v13.5A2.25 2.25 0 0 1 60.75 63h-49.5A2.25 2.25 0 0 1 9 60.75v-13.5A2.25 2.25 0 0 1 11.25 45h49.5ZM18 50.625a3.375 3.375 0 1 0 0 6.75 3.375 3.375 0 0 0 0-6.75Z' opacity='.95'/></g></svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) } */}
|
||||
{/* icon-alipay */}
|
||||
{/* {name === "icon-alipay" && (
|
||||
<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='M192 692.736c0-69.632 51.2-106.496 88.064-111.104 111.104-18.432 264.192 74.24 264.192 74.24-69.632 88.064-166.912 134.144-241.152 134.144-65.024-4.608-111.104-41.472-111.104-97.28z' fill='${(isStr
|
||||
? colors
|
||||
: colors[0]) ||
|
||||
"rgb(91,139,212)"}' /%3E%3Cpath d='M979.456 729.6c-13.824-4.608-329.216-101.888-319.488-111.104 46.592-55.808 78.848-185.344 78.848-185.344v-27.648h-185.344V335.872h226.816v-41.472h-226.816V192.512H460.8v97.28H257.024v41.472H460.8v69.632H298.496v27.648h333.824c0 13.824-23.04 106.496-46.08 148.48-4.608-9.216-153.088-60.416-236.544-65.024-88.064 4.608-157.696 32.256-189.952 97.28-46.592 120.32 27.648 241.152 194.56 241.152 27.648 0 162.304-13.824 264.192-153.088 27.648 13.824 185.344 92.672 282.624 143.872-92.672 111.104-231.936 180.736-389.12 180.736-280.576 1.024-508.928-226.304-509.44-506.88v-3.072C1.024 231.424 227.84 3.072 508.928 2.56h3.072c280.576-1.024 508.928 226.304 509.44 506.88v3.072c4.608 82.944-13.824 152.576-41.984 217.088z' fill='${(isStr
|
||||
? colors
|
||||
: colors[1]) ||
|
||||
"rgb(91,139,212)"}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`,
|
||||
...customStyle
|
||||
}}
|
||||
className={classnames(icon, customClassName)}
|
||||
/>
|
||||
)} */}
|
||||
{/* icon-tips */}
|
||||
{ name === 'icon-paixu1' && (<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 112.007529c17.679059 0 31.984941 14.305882 31.984941 31.984942V880.037647c0 28.672-34.816 42.857412-54.874353 22.377412l-192-196.276706a32.015059 32.015059 0 0 1 45.778824-44.754824l137.125647 140.16753V143.992471c0-16.865882 13.040941-30.689882 29.605647-31.924706l2.379294-0.060236zM640 911.992471a31.984941 31.984941 0 0 1-32.015059-31.984942V143.962353c0-28.672 34.846118-42.857412 54.904471-22.377412l192 196.276706a31.984941 31.984941 0 1 1-45.778824 44.754824l-137.125647-140.16753v657.528471c0 16.865882-13.040941 30.689882-29.605647 31.924706l-2.379294 0.060235z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(130,130,130)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-zhankai */}
|
||||
|
||||
{ name === 'icon-zhankai' && (<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='M512 736l320-416h-640z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' opacity='.5'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-shouqi */}
|
||||
|
||||
{ name === 'icon-shouqi' && (<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='M512 288l320 416h-640z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' opacity='.5'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-tips */}
|
||||
|
||||
{ name === 'icon-tips' && (<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='M512 96c229.76 0 416 186.24 416 416s-186.24 416-416 416S96 741.76 96 512 282.24 96 512 96z m0 576a32 32 0 1 0 0 64 32 32 0 0 0 0-64z m0-384a32 32 0 0 0-32 32v256a32 32 0 0 0 64 0v-256a32 32 0 0 0-32-32z' 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-dianhua */}
|
||||
@ -234,9 +276,9 @@ const IconFont:FC<PropsType> = ({
|
||||
{/* icon-daifukuan2 */}
|
||||
|
||||
{ name === 'icon-daifukuan2' && (<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='M848 368a32 32 0 0 1 32 32v448a32 32 0 0 1-32 32H176a32 32 0 0 1-32-32V400a32 32 0 0 1 32-32h672zM512 688H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h272a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(64,123,244)'}'/%3E%3Cpath d='M765.664 216.496L812 368H160.688l565.024-172.736a32 32 0 0 1 39.952 21.248z' fill='${(isStr ? colors : colors?.[1]) || 'rgb(142,186,251)'}'/%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
|
||||
</Block>
|
||||
)
|
||||
}
|
||||
|
||||
export default IconFont
|
||||
|
||||
</Block>
|
||||
)
|
||||
}
|
||||
|
||||
export default IconFont
|
||||
|
||||
@ -1,73 +0,0 @@
|
||||
.main {
|
||||
min-height: 100vh;
|
||||
background-color: #f7f7f7ff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.btn_list {
|
||||
height: 116px;
|
||||
background: #ffffff;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
.btn_item {
|
||||
width: 224px;
|
||||
height: 68px;
|
||||
text-align: center;
|
||||
line-height: 68px;
|
||||
font-size: 28px;
|
||||
border-radius: 68px;
|
||||
background-color: #e9e9e9ff;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.select_ed {
|
||||
background-color: #337fff1a;
|
||||
border: 1px solid #337fffff;
|
||||
color: #337fffff;
|
||||
}
|
||||
}
|
||||
.con {
|
||||
height: calc(100vh - 376px);
|
||||
display: flex;
|
||||
.kong_image {
|
||||
width: 410px;
|
||||
height: 268px;
|
||||
text-align: center;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 37px;
|
||||
}
|
||||
text {
|
||||
font-size: 28px;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
.con_list {
|
||||
width: 100%;
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
.get_card_btn {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 16px 24px 66px 24px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px -5px 20px -8px rgba(0, 0, 0, 0.06);
|
||||
text {
|
||||
display: inline-block;
|
||||
width: 702px;
|
||||
height: 80px;
|
||||
background: #4581ff;
|
||||
border-radius: 40px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,67 @@
|
||||
.btn_list {
|
||||
height: 116px;
|
||||
background: #ffffff;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
.btn_item {
|
||||
width: 224px;
|
||||
height: 68px;
|
||||
text-align: center;
|
||||
line-height: 68px;
|
||||
font-size: 28px;
|
||||
border-radius: 68px;
|
||||
background-color: #e9e9e9ff;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.select_ed {
|
||||
background-color: #337fff1a;
|
||||
border: 1px solid #337fffff;
|
||||
color: #337fffff;
|
||||
}
|
||||
}
|
||||
.con {
|
||||
height: calc(100vh - 376px);
|
||||
display: flex;
|
||||
.kong_image {
|
||||
width: 410px;
|
||||
height: 268px;
|
||||
text-align: center;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 37px;
|
||||
}
|
||||
text {
|
||||
font-size: 28px;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
.con_list {
|
||||
width: 100%;
|
||||
padding: 0 24px;
|
||||
}
|
||||
}
|
||||
.get_card_btn {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 16px 24px 66px 24px;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px -5px 20px -8px rgba(0, 0, 0, 0.06);
|
||||
text {
|
||||
display: inline-block;
|
||||
width: 702px;
|
||||
height: 80px;
|
||||
background: #4581ff;
|
||||
border-radius: 40px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
}
|
||||
}
|
||||
128
src/pages/colorCardClipping/components/colorCardList/index.tsx
Normal file
128
src/pages/colorCardClipping/components/colorCardList/index.tsx
Normal file
@ -0,0 +1,128 @@
|
||||
import { Image, Text, View } from '@tarojs/components'
|
||||
import Taro, { useDidShow } from '@tarojs/taro'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import classNames from 'classnames'
|
||||
import type { ParamItem } from '../productItem'
|
||||
import ProductItem from '../productItem'
|
||||
import styles from './index.module.scss'
|
||||
import InfiniteScroll from '@/components/infiniteScroll'
|
||||
import { alert, goLink } from '@/common/common'
|
||||
import { ColorCardOrderCancelApi, GetColorCardOrderApi, GetColorCardOrderStatusApi } from '@/api/colorCard'
|
||||
import { dataLoadingStatus, getFilterData } from '@/common/util'
|
||||
import kong from '@/styles/image/kong.png'
|
||||
|
||||
export default () => {
|
||||
const [searchData, setSearchData] = useState<{ status?: number; page: number; size: number }>({
|
||||
status: 0,
|
||||
page: 1,
|
||||
size: 10,
|
||||
})
|
||||
|
||||
const [orderData, setOrderData] = useState<{ list: ParamItem[]; total: number }>({
|
||||
list: [],
|
||||
total: 0,
|
||||
})
|
||||
|
||||
const { fetchData: fetchDataOrder, state: OrderState } = GetColorCardOrderApi()
|
||||
const getColorCardOrder = async() => {
|
||||
const res = await fetchDataOrder(getFilterData(searchData))
|
||||
setRefresherTriggeredStatus(false)
|
||||
setOrderData(() => res.data)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getColorCardOrder()
|
||||
}, [searchData])
|
||||
|
||||
useDidShow(() => {
|
||||
getColorCardOrderStatus()
|
||||
})
|
||||
|
||||
// 获取状态列表
|
||||
const [statusList, setStatusList] = useState<{ id: 0|1|2; name: string }[]>([])
|
||||
const { fetchData: fetchDataStatus } = GetColorCardOrderStatusApi()
|
||||
const getColorCardOrderStatus = async() => {
|
||||
const res = await fetchDataStatus()
|
||||
setStatusList([{ id: 0, name: '全部记录' }, ...res.data.list])
|
||||
}
|
||||
|
||||
// 上拉加载数据
|
||||
const pageNum = useRef({ size: searchData.size, page: searchData.page })
|
||||
const getScrolltolower = useCallback(() => {
|
||||
if (orderData.list.length < orderData.total) {
|
||||
pageNum.current.page++
|
||||
const size = pageNum.current.size * pageNum.current.page
|
||||
setSearchData(e => ({ ...e, size }))
|
||||
}
|
||||
}, [orderData])
|
||||
|
||||
// 数据加载状态
|
||||
const statusMore = useMemo(() => {
|
||||
return dataLoadingStatus({ list: orderData?.list, total: orderData?.total, status: OrderState.loading })
|
||||
}, [orderData, OrderState])
|
||||
|
||||
// 列表下拉刷新
|
||||
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
|
||||
const getRefresherRefresh = async() => {
|
||||
pageNum.current.page = 1
|
||||
setRefresherTriggeredStatus(true)
|
||||
setSearchData(val => ({ ...val, size: 10 }))
|
||||
}
|
||||
|
||||
const changeStatus = (index: number) => {
|
||||
pageNum.current.page = 1
|
||||
setSearchData(e => ({ ...e, status: index, page: 1, size: 10 }))
|
||||
}
|
||||
|
||||
// 取消订单
|
||||
const { fetchData: fetchDataCancel } = ColorCardOrderCancelApi()
|
||||
const onCancel = async(id: number) => {
|
||||
Taro.showModal({
|
||||
title: '确定取消订单？',
|
||||
async success(res) {
|
||||
if (res.confirm) {
|
||||
const res = await fetchDataCancel({ id })
|
||||
if (res.success) {
|
||||
alert.success('取消成功')
|
||||
getColorCardOrder()
|
||||
}
|
||||
}
|
||||
else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
return <>
|
||||
<View className={styles.btn_list}>
|
||||
{statusList.map(item => <View key={item.id} onClick={() => changeStatus(item.id)} className={classNames(styles.btn_item, searchData.status === item.id && styles.select_ed)}>{item.name}</View>)}
|
||||
</View>
|
||||
<View className={styles.con}>
|
||||
{false && <View className={styles.kong_image}>
|
||||
<Image src={kong}></Image>
|
||||
<Text>还没有领取过色卡</Text>
|
||||
</View>}
|
||||
<View className={styles.con_list}>
|
||||
<InfiniteScroll
|
||||
statusMore={statusMore}
|
||||
refresherEnabled
|
||||
selfonScrollToLower={getScrolltolower}
|
||||
refresherTriggered={refresherTriggeredStatus}
|
||||
selfOnRefresherRefresh={getRefresherRefresh}
|
||||
>
|
||||
{orderData.list?.map((item) => {
|
||||
return (
|
||||
<View key={item.id} className={styles.order_item_con}>
|
||||
<ProductItem value={item} onCancel={onCancel} />
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
</InfiniteScroll>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.get_card_btn} onClick={() => goLink('/pages/getColorCard/index')}>
|
||||
<Text>领取色卡</Text>
|
||||
</View>
|
||||
</>
|
||||
}
|
||||
@ -5,6 +5,7 @@
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
padding-bottom: 20px;
|
||||
.item_header {
|
||||
height: 82px;
|
||||
display: flex;
|
||||
@ -62,7 +63,7 @@
|
||||
margin-top: 16px;
|
||||
}
|
||||
.btns {
|
||||
padding: 16px 0;
|
||||
padding-top: 32px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
text {
|
||||
@ -2,6 +2,7 @@ import { Text, View } from '@tarojs/components'
|
||||
import { useMemo } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import LabAndImg from '@/components/LabAndImg'
|
||||
import { goLink } from '@/common/common'
|
||||
|
||||
interface color_card_info {
|
||||
count: number
|
||||
@ -27,13 +28,18 @@ export interface ParamItem {
|
||||
|
||||
interface Param {
|
||||
value: ParamItem
|
||||
onCancel?: (val: number) => void
|
||||
}
|
||||
export default (props: Param) => {
|
||||
const { value } = props
|
||||
const { value, onCancel } = props
|
||||
const card_one = useMemo(() => {
|
||||
return value.color_card_info ? value.color_card_info[0] : null
|
||||
}, [value])
|
||||
return <View className={styles.list_item}>
|
||||
const onCancelEven = (e, id: number) => {
|
||||
e.stopPropagation()
|
||||
onCancel?.(id)
|
||||
}
|
||||
return <View className={styles.list_item} onClick={() => goLink('/pages/colorCardOrderDetail/index', { id: value.order_id })} >
|
||||
<View className={styles.item_header}>
|
||||
<Text>单号：{value.order_no}</Text>
|
||||
<Text>{value.order_status_name}</Text>
|
||||
@ -57,6 +63,6 @@ export default (props: Param) => {
|
||||
<Text>{value.color_card_count} 种色卡，共 {value.color_card_number} 本</Text>
|
||||
</View>
|
||||
<View className={styles.express}>快递到付</View>
|
||||
<View className={styles.btns}><Text>取消订单</Text></View>
|
||||
{value.order_status === 1 && <View className={styles.btns} onClick={e => onCancelEven?.(e, value.order_id)}><Text>取消订单</Text></View>}
|
||||
</View>
|
||||
}
|
||||
@ -1,17 +1,16 @@
|
||||
import { Image, Text, View } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import Taro, { useDidShow } from '@tarojs/taro'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import classNames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
import type { ParamItem } from './components/productItem'
|
||||
import ProductItem from './components/productItem'
|
||||
import SelectList from '@/components/selectList'
|
||||
import kong from '@/styles/image/kong.png'
|
||||
import LabAndImg from '@/components/LabAndImg'
|
||||
import InfiniteScroll from '@/components/infiniteScroll'
|
||||
import { goLink } from '@/common/common'
|
||||
import { GetColorCardOrderApi } from '@/api/colorCard'
|
||||
import { dataLoadingStatus } from '@/common/util'
|
||||
import { alert, goLink } from '@/common/common'
|
||||
import { ColorCardOrderCancelApi, GetColorCardOrderApi, GetColorCardOrderStatusApi } from '@/api/colorCard'
|
||||
import { dataLoadingStatus, getFilterData } from '@/common/util'
|
||||
|
||||
export default () => {
|
||||
const [selectIndex, setSelectIndex] = useState(1)
|
||||
@ -20,18 +19,8 @@ export default () => {
|
||||
{ value: 2, label: '剪样记录' },
|
||||
]
|
||||
|
||||
const [statusIndex, setStatusIndex] = useState(1)
|
||||
const selectStatus = [
|
||||
{ value: 1, label: '全部记录' },
|
||||
{ value: 2, label: '申请中' },
|
||||
{ value: 3, label: '已完成' },
|
||||
]
|
||||
|
||||
const changeStatus = (index: number) => {
|
||||
setStatusIndex(index)
|
||||
}
|
||||
|
||||
const [searchData, setSearchData] = useState<{ color_card_ids?: number[]; name?: string; page: number; size: number }>({
|
||||
const [searchData, setSearchData] = useState<{ status?: number; page: number; size: number }>({
|
||||
status: 0,
|
||||
page: 1,
|
||||
size: 10,
|
||||
})
|
||||
@ -40,35 +29,82 @@ export default () => {
|
||||
list: [],
|
||||
total: 0,
|
||||
})
|
||||
|
||||
const { fetchData: fetchDataOrder, state: OrderState } = GetColorCardOrderApi()
|
||||
const getColorCardOrder = async() => {
|
||||
const res = await fetchDataOrder()
|
||||
const res = await fetchDataOrder(getFilterData(searchData))
|
||||
setRefresherTriggeredStatus(false)
|
||||
setOrderData(() => res.data)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getColorCardOrder()
|
||||
}, [])
|
||||
}, [searchData])
|
||||
|
||||
useDidShow(() => {
|
||||
getColorCardOrderStatus()
|
||||
})
|
||||
|
||||
// 获取状态列表
|
||||
const [statusList, setStatusList] = useState<{ id: 0|1|2; name: string }[]>([])
|
||||
const { fetchData: fetchDataStatus } = GetColorCardOrderStatusApi()
|
||||
const getColorCardOrderStatus = async() => {
|
||||
const res = await fetchDataStatus()
|
||||
setStatusList([{ id: 0, name: '全部记录' }, ...res.data.list])
|
||||
}
|
||||
|
||||
// 上拉加载数据
|
||||
const pageNum = useRef({ size: searchData.size, page: searchData.page })
|
||||
const getScrolltolower = useCallback(() => {
|
||||
if (colorCardData.list.length < colorCardData.total) {
|
||||
if (orderData.list.length < orderData.total) {
|
||||
pageNum.current.page++
|
||||
const size = pageNum.current.size * pageNum.current.page
|
||||
setSearchData(e => ({ ...e, size }))
|
||||
}
|
||||
}, [colorCardData])
|
||||
}, [orderData])
|
||||
|
||||
// 数据加载状态
|
||||
const statusMore = useMemo(() => {
|
||||
return dataLoadingStatus({ list: orderData?.list, total: orderData?.total, status: OrderState.loading })
|
||||
}, [orderData, OrderState])
|
||||
|
||||
// 列表下拉刷新
|
||||
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
|
||||
const getRefresherRefresh = async() => {
|
||||
pageNum.current.page = 1
|
||||
setRefresherTriggeredStatus(true)
|
||||
setSearchData(val => ({ ...val, size: 10 }))
|
||||
}
|
||||
|
||||
const changeStatus = (index: number) => {
|
||||
pageNum.current.page = 1
|
||||
setSearchData(e => ({ ...e, status: index, page: 1, size: 10 }))
|
||||
}
|
||||
|
||||
// 取消订单
|
||||
const { fetchData: fetchDataCancel } = ColorCardOrderCancelApi()
|
||||
const onCancel = async(id: number) => {
|
||||
Taro.showModal({
|
||||
title: '确定取消订单？',
|
||||
async success(res) {
|
||||
if (res.confirm) {
|
||||
const res = await fetchDataCancel({ id })
|
||||
if (res.success) {
|
||||
alert.success('取消成功')
|
||||
getColorCardOrder()
|
||||
}
|
||||
}
|
||||
else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
return <View className={styles.main}>
|
||||
<SelectList list={selectList} defaultIndex={selectIndex} onSelect={index => setSelectIndex(index)} />
|
||||
<View className={styles.btn_list}>
|
||||
{selectStatus.map(item => <View key={item.value} onClick={() => changeStatus(item.value)} className={classNames(styles.btn_item, statusIndex === item.value && styles.select_ed)}>{item.label}</View>)}
|
||||
{statusList.map(item => <View key={item.id} onClick={() => changeStatus(item.id)} className={classNames(styles.btn_item, searchData.status === item.id && styles.select_ed)}>{item.name}</View>)}
|
||||
</View>
|
||||
<View className={styles.con}>
|
||||
{false && <View className={styles.kong_image}>
|
||||
@ -86,7 +122,7 @@ export default () => {
|
||||
{orderData.list?.map((item) => {
|
||||
return (
|
||||
<View key={item.id} className={styles.order_item_con}>
|
||||
<ProductItem value={item} />
|
||||
<ProductItem value={item} onCancel={onCancel} />
|
||||
</View>
|
||||
)
|
||||
})}
|
||||
6
src/pages/colorCardClipping/index.module.scss
Normal file
6
src/pages/colorCardClipping/index.module.scss
Normal file
@ -0,0 +1,6 @@
|
||||
.main {
|
||||
min-height: 100vh;
|
||||
background-color: #f7f7f7ff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
27
src/pages/colorCardClipping/index.tsx
Normal file
27
src/pages/colorCardClipping/index.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
import { Image, Text, View } from '@tarojs/components'
|
||||
import Taro, { useDidShow } from '@tarojs/taro'
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import classNames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
import type { ParamItem } from './components/productItem'
|
||||
import ProductItem from './components/productItem'
|
||||
import ColorCardList from './components/colorCardList'
|
||||
import SelectList from '@/components/selectList'
|
||||
import kong from '@/styles/image/kong.png'
|
||||
import InfiniteScroll from '@/components/infiniteScroll'
|
||||
import { alert, goLink } from '@/common/common'
|
||||
import { ColorCardOrderCancelApi, GetColorCardOrderApi, GetColorCardOrderStatusApi } from '@/api/colorCard'
|
||||
import { dataLoadingStatus, getFilterData } from '@/common/util'
|
||||
|
||||
export default () => {
|
||||
const [selectIndex, setSelectIndex] = useState(1)
|
||||
const selectList = [
|
||||
{ value: 1, label: '色卡记录' },
|
||||
{ value: 2, label: '剪样记录' },
|
||||
]
|
||||
|
||||
return <View className={styles.main}>
|
||||
<SelectList list={selectList} defaultIndex={selectIndex} onSelect={index => setSelectIndex(index)} />
|
||||
<ColorCardList />
|
||||
</View>
|
||||
}
|
||||
@ -1,25 +1,48 @@
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import { useState } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import IconFont from '@/components/iconfont/iconfont'
|
||||
import AddressList from '@/components/AddressList'
|
||||
import Popup from '@/components/popup'
|
||||
import SelectAddress from '@/components/selectAddress'
|
||||
|
||||
interface Param {
|
||||
onSelect: (val: number) => void
|
||||
export interface AddressItem {
|
||||
id: number
|
||||
address_title?: string
|
||||
address_name?: string
|
||||
address_phone?: string
|
||||
}
|
||||
interface Param {
|
||||
onSelect: (val: AddressItem) => void
|
||||
defaultValue?: AddressItem
|
||||
}
|
||||
|
||||
export default (props: Param) => {
|
||||
const { defaultValue } = props
|
||||
const [data, setData] = useState({
|
||||
id: 0,
|
||||
address_title: '',
|
||||
address_name: '',
|
||||
address_phone: '',
|
||||
address_mode: '物流',
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
setData(e => ({
|
||||
...e,
|
||||
id: e.id,
|
||||
address_title: defaultValue?.address_title || '',
|
||||
address_name: defaultValue?.address_name || '',
|
||||
address_phone: defaultValue?.address_phone || '',
|
||||
}))
|
||||
}, [defaultValue])
|
||||
|
||||
const [showList, setShowList] = useState(false)
|
||||
const getAddress = (e) => {
|
||||
props.onSelect(e.id)
|
||||
props.onSelect({
|
||||
id: e.id,
|
||||
address_title: e.province_name + e.district_name + e.city_name + e.address_detail,
|
||||
address_name: e.name,
|
||||
address_phone: e.phone,
|
||||
})
|
||||
setData(val => ({
|
||||
...val,
|
||||
address_title: e.province_name + e.district_name + e.city_name + e.address_detail,
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import { useState } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import Remark from '@/components/remark'
|
||||
|
||||
interface Param {
|
||||
onSave?: (val: string) => void
|
||||
defaultValue: string
|
||||
}
|
||||
export default (props: Param) => {
|
||||
const [showRemark, setShowRemark] = useState(false)
|
||||
@ -14,6 +15,9 @@ export default (props: Param) => {
|
||||
props.onSave?.(e)
|
||||
setShowRemark(false)
|
||||
}
|
||||
useEffect(() => {
|
||||
setData(props.defaultValue)
|
||||
}, [props.defaultValue])
|
||||
return <>
|
||||
<View className={styles.remarks} onClick={() => setShowRemark(true)}>
|
||||
<View className={styles.remarks_header}>
|
||||
|
||||
@ -2,6 +2,7 @@ import { Text, View } from '@tarojs/components'
|
||||
import Taro, { getCurrentPages, useDidShow } from '@tarojs/taro'
|
||||
import { useCallback, useMemo, useRef, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import type { AddressItem } from './components/address'
|
||||
import Address from './components/address'
|
||||
import type { ParamItem } from './components/productCard'
|
||||
import ProductCard from './components/productCard'
|
||||
@ -21,19 +22,28 @@ export default () => {
|
||||
color_card_infos: [],
|
||||
remark: '',
|
||||
})
|
||||
const getAddress = (id: number) => {
|
||||
submitData.current.address_id = id
|
||||
|
||||
const [addressInfo, setAddressInfo] = useState<AddressItem>()
|
||||
const getAddress = (e) => {
|
||||
submitData.current.address_id = e.id
|
||||
setAddressInfo(() => e)
|
||||
}
|
||||
const [list, setList] = useState<ParamItem[]>([])
|
||||
useDidShow(() => {
|
||||
const res = Taro.getStorageSync('colorCard') ? JSON.parse(Taro.getStorageSync('colorCard')) : []
|
||||
setList(() => res)
|
||||
computeCount(res)
|
||||
const list = Taro.getStorageSync('colorCard') ? JSON.parse(Taro.getStorageSync('colorCard')) : []
|
||||
const info = Taro.getStorageSync('colorCardOther') ? JSON.parse(Taro.getStorageSync('colorCardOther')) : {}
|
||||
setList(() => list)
|
||||
computeCount(list)
|
||||
setAddressInfo(info.address)
|
||||
setRemarkData(info.remark)
|
||||
submitData.current.address_id = info?.address?.id || 0
|
||||
Taro.removeStorageSync('colorCard')
|
||||
Taro.removeStorageSync('colorCardOther')
|
||||
})
|
||||
|
||||
const onAddCard = () => {
|
||||
Taro.setStorageSync('colorCard', JSON.stringify(list))
|
||||
Taro.setStorageSync('colorCardOther', JSON.stringify({ address: addressInfo || {}, remark: submitData.current.remark }))
|
||||
Taro.navigateTo({
|
||||
url: '/pages/getColorCard/index',
|
||||
})
|
||||
@ -79,15 +89,18 @@ export default () => {
|
||||
const res = await submitFetchData(getFilterData(submitData.current))
|
||||
if (res.success) {
|
||||
alert.success('提交成功')
|
||||
goLink('/pages/colorCardOrderDetail/index', { id: res.data.id })
|
||||
}
|
||||
}
|
||||
|
||||
const [remarkData, setRemarkData] = useState('')
|
||||
const onRemark = (e) => {
|
||||
submitData.current.remark = e
|
||||
setRemarkData(e)
|
||||
}
|
||||
|
||||
return <View className={styles.main}>
|
||||
<Address onSelect={getAddress} />
|
||||
<Address onSelect={getAddress} defaultValue={addressInfo} />
|
||||
<View className={styles.add_card_btn} onClick={onAddCard}>添加色卡</View>
|
||||
<View className={styles.card_con}>
|
||||
<View className={styles.card_header}>色卡信息</View>
|
||||
@ -96,7 +109,7 @@ export default () => {
|
||||
<View className={styles.express_btn}>快递到付</View>
|
||||
</View>
|
||||
</View>
|
||||
<Remark onSave={onRemark} />
|
||||
<Remark onSave={onRemark} defaultValue={remarkData} />
|
||||
<View className={styles.order_btn}>
|
||||
<View className={styles.btn_con} onClick={onSubmitData}>
|
||||
<Text>{numText}</Text>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
.message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
margin-left: 24px;
|
||||
.info_address {
|
||||
font-size: 28px;
|
||||
|
||||
@ -33,7 +33,7 @@ export default (props: Param) => {
|
||||
}, [props.defaultValue])
|
||||
return <>
|
||||
<View className={styles.address_con} >
|
||||
<IconFont name="icon-dizhiguanli" size={50} />
|
||||
<IconFont name="icon-dingwei" size={50} />
|
||||
<View className={styles.message}>
|
||||
<View className={styles.info_address}>
|
||||
<View className={styles.address_name}>{data.address_title || '请选择收货地址'}</View>
|
||||
|
||||
@ -1,21 +1,32 @@
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import Taro, { setClipboardData } from '@tarojs/taro'
|
||||
import { memo } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import { formatDateTime } from '@/common/fotmat'
|
||||
|
||||
export default () => {
|
||||
export interface OrderInfoParam {
|
||||
order_no?: string
|
||||
create_time?: string
|
||||
}
|
||||
|
||||
export default memo((props: OrderInfoParam) => {
|
||||
const handleCopy = () => {
|
||||
setClipboardData({ data: props.order_no || '' })
|
||||
}
|
||||
return <View className={styles.order_info}>
|
||||
<View className={styles.order_info_title}>订单信息</View>
|
||||
<View className={styles.order_info_list}>
|
||||
<View className={styles.order_info_item}>
|
||||
<Text className={styles.left}>订单编号：</Text>
|
||||
<View className={styles.right}>
|
||||
<Text>XS-LY-2208240001</Text>
|
||||
<View className={styles.copy_btn}>复制</View>
|
||||
<Text>{props.order_no}</Text>
|
||||
<View className={styles.copy_btn} onClick={handleCopy}>复制</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.order_info_item}>
|
||||
<Text className={styles.left}>创建时间：</Text>
|
||||
<View className={styles.right}>2022-08-24 14:54:21</View>
|
||||
<View className={styles.right}>{formatDateTime(props.create_time)}</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
}
|
||||
})
|
||||
|
||||
@ -0,0 +1,166 @@
|
||||
.order_flow_state {
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20rpx;
|
||||
.order_status_list {
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease-in-out;
|
||||
.images {
|
||||
display: flex;
|
||||
padding: 10px 0 0 20px;
|
||||
image {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order_status_list_show {
|
||||
max-height: 1000px !important;
|
||||
}
|
||||
.order_status_item {
|
||||
position: relative;
|
||||
&:nth-last-child(n + 2) {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.order_status_tail_end,
|
||||
.order_status_tail {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 2px solid $color_main;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
z-index: 10;
|
||||
}
|
||||
.order_status_tail_end {
|
||||
background-color: $color_main;
|
||||
}
|
||||
.order_status_line {
|
||||
border-left: 2px solid $color_main;
|
||||
height: 100%;
|
||||
top: 10px;
|
||||
left: 9px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
.order_status_content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30px;
|
||||
.order_status_title {
|
||||
color: $color_font_two;
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
}
|
||||
.order_status_time {
|
||||
color: $color_font_two;
|
||||
font-size: $font_size_medium;
|
||||
padding-left: 50px;
|
||||
}
|
||||
.order_status_tag {
|
||||
font-size: $font_size_min;
|
||||
background: #f0f0f0;
|
||||
border-radius: 6px;
|
||||
padding: 5px 10px;
|
||||
color: $color_font_two;
|
||||
}
|
||||
.order_status_select {
|
||||
color: $color_main;
|
||||
}
|
||||
.order_status_tag_select {
|
||||
color: $color_main;
|
||||
}
|
||||
}
|
||||
.order_status_des {
|
||||
color: $color_font_two;
|
||||
font-size: $font_size_medium;
|
||||
padding-left: 30px;
|
||||
display: inline-block;
|
||||
}
|
||||
.order_status_des_select {
|
||||
color: $color_font_one;
|
||||
}
|
||||
.pay_time {
|
||||
height: 56px;
|
||||
background: #f6f6f6;
|
||||
border-radius: 20px;
|
||||
color: #3c3c3c;
|
||||
font-size: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
margin-top: 20px;
|
||||
text {
|
||||
font-size: 28px;
|
||||
color: $color_main;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.more {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: $font_size_min;
|
||||
color: $color_font_one;
|
||||
padding-top: 20px;
|
||||
.miconfonts {
|
||||
display: inline-block;
|
||||
font-size: 25px;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.open_miconfonts {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
.image_tag {
|
||||
width: 140px;
|
||||
height: 144px;
|
||||
.image {
|
||||
width: 140px;
|
||||
height: 144px;
|
||||
}
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -10px;
|
||||
}
|
||||
.refresh {
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
color: #707070;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.mconfont {
|
||||
font-size: 30px;
|
||||
}
|
||||
.refresh_text {
|
||||
font-size: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pay_title_tag {
|
||||
margin-top: 10px;
|
||||
font-size: 24px;
|
||||
color: #ee7500;
|
||||
background: rgba(255, 230, 206, 0.36);
|
||||
border-radius: 10px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
.miconfont {
|
||||
font-size: 30px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,55 @@
|
||||
import { Image, Text, View } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { memo } from 'react'
|
||||
import classnames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
import { formatDateTime, formatImgUrl } from '@/common/fotmat'
|
||||
|
||||
export interface orderStateItem {
|
||||
audit_remark: string
|
||||
audit_time: string
|
||||
delivery_appendix_url: string[]
|
||||
order_status: number
|
||||
order_status_name: string
|
||||
}
|
||||
|
||||
export interface orderStateParam {
|
||||
onRefresh?: () => void
|
||||
list?: orderStateItem[]
|
||||
}
|
||||
const OrderState = (props: orderStateParam) => {
|
||||
const { list = [] } = props
|
||||
|
||||
const onShowImage = (url: string, list: string[]) => {
|
||||
Taro.previewImage({
|
||||
current: formatImgUrl(url, '!w800'),
|
||||
urls: formatImages(list),
|
||||
})
|
||||
}
|
||||
const formatImages = (list: string[]) => {
|
||||
return list?.map(item => formatImgUrl(item, '!w800'))
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<View className={styles.order_flow_state}>
|
||||
<View className={classnames(styles.order_status_list)}>
|
||||
{list?.map((item, index) => <View className={styles.order_status_item} key={index}>
|
||||
{(list?.length > 1) && <View className={classnames(styles.order_status_tail, (index == 0) && styles.order_status_tail_end)}></View>}
|
||||
{(list?.length != (index + 1)) && <View className={styles.order_status_line}></View>}
|
||||
<View className={styles.order_status_content}>
|
||||
<View className={classnames(styles.order_status_title, (index == 0) && styles.order_status_select)}>{item.order_status_name}</View>
|
||||
<View className={classnames(styles.order_status_time, (index == 0) && styles.order_status_select)}>{formatDateTime(item.audit_time)}</View>
|
||||
</View>
|
||||
<Text className={classnames(styles.order_status_des, (index == 0) && styles.order_status_des_select)}>{item.audit_remark}</Text>
|
||||
{item.delivery_appendix_url?.length > 0 && <View className={styles.images}>
|
||||
{item.delivery_appendix_url?.map((citem, index) => {
|
||||
return <View key={index} onClick={() => onShowImage(citem, item.delivery_appendix_url)}><Image src={formatImgUrl(citem, '!w400')} ></Image></View>
|
||||
})}
|
||||
</View>}
|
||||
</View>)}
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default memo(OrderState)
|
||||
@ -29,6 +29,15 @@
|
||||
flex: 1;
|
||||
font-size: 28px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
text {
|
||||
&:nth-child(1) {
|
||||
flex: 1;
|
||||
@include common_ellipsis();
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
@ -1,49 +1,45 @@
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import { useCallback } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import Counter from '@/components/counter'
|
||||
import LabAndImg from '@/components/LabAndImg'
|
||||
|
||||
export default () => {
|
||||
export interface orderParam {
|
||||
affiliation_product: any
|
||||
count: number
|
||||
lab: { l: number; a: number; b: number }
|
||||
name: string
|
||||
rgb: { r: number; g: number; b: number }
|
||||
texture_url: string
|
||||
}
|
||||
|
||||
interface Param {
|
||||
value: orderParam[]
|
||||
}
|
||||
|
||||
export default (props: Param) => {
|
||||
const { value } = props
|
||||
const labAndImgObj = useCallback(
|
||||
(item) => {
|
||||
return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
|
||||
},
|
||||
[value],
|
||||
)
|
||||
return <View className={styles.card_con}>
|
||||
<View className={styles.card_header}>色卡信息</View>
|
||||
<View className={styles.card_list}>
|
||||
<View className={styles.card_item}>
|
||||
<View className={styles.img}><LabAndImg value={{}} /></View>
|
||||
<View className={styles.name_count}>
|
||||
<Text>秋季平纹卫衣(食毛)系列</Text>
|
||||
<View className={styles.btns}>
|
||||
<View className={styles.count_btn}>
|
||||
<Counter
|
||||
minNum={1}
|
||||
maxNum={2}
|
||||
defaultNum={1}
|
||||
unit="米"
|
||||
returnZero
|
||||
/>
|
||||
<>
|
||||
{value?.map((item, index) => {
|
||||
return <View key={index} className={styles.card_item}>
|
||||
<View className={styles.img}><LabAndImg value={labAndImgObj(item)} /></View>
|
||||
<View className={styles.name_count}>
|
||||
<Text>{item.name}</Text>
|
||||
<Text>x{item.count}本</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.card_item}>
|
||||
<View className={styles.img}><LabAndImg value={{}} /></View>
|
||||
<View className={styles.name_count}>
|
||||
<Text>秋季平纹卫衣(食毛)系列</Text>
|
||||
<View className={styles.btns}>
|
||||
<View className={styles.count_btn}>
|
||||
<Counter
|
||||
minNum={1}
|
||||
maxNum={2}
|
||||
defaultNum={1}
|
||||
unit="米"
|
||||
returnZero
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.express_btn}>快递到付</View>
|
||||
})}
|
||||
<View className={styles.express_btn}>快递到付</View>
|
||||
</>
|
||||
</View>
|
||||
</View>
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
.remarks {
|
||||
height: 165px;
|
||||
background: #ffffff;
|
||||
border-radius: 16px;
|
||||
margin-top: 24px;
|
||||
@ -18,8 +17,10 @@
|
||||
}
|
||||
}
|
||||
.remarks_message {
|
||||
height: 82px;
|
||||
line-height: 82px;
|
||||
padding: 20px 0;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.valuable {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import { Input, Text, View } from '@tarojs/components'
|
||||
import { useState } from 'react'
|
||||
import classNames from 'classnames'
|
||||
import styles from './index.module.scss'
|
||||
import Remark from '@/components/remark'
|
||||
|
||||
interface Param {
|
||||
value: string
|
||||
placeholder: string
|
||||
}
|
||||
export default (props: Param) => {
|
||||
return <>
|
||||
@ -14,7 +16,7 @@ export default (props: Param) => {
|
||||
<Text></Text>
|
||||
</View>
|
||||
<View className={styles.remarks_message}>
|
||||
<Text>{props.value || '尚未备注信息'}</Text>
|
||||
<Text className={classNames(props.value ? styles.valuable : '')}>{props.value || props.placeholder}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
min-height: 100vh;
|
||||
background-color: #f7f7f7ff;
|
||||
padding: 24px;
|
||||
padding-bottom: 180px;
|
||||
.add_card_btn {
|
||||
height: 82px;
|
||||
background: #ffffff;
|
||||
|
||||
@ -1,29 +1,96 @@
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import { useState } from 'react'
|
||||
import Taro, { useDidShow, useRouter } from '@tarojs/taro'
|
||||
import { useMemo, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
import Address from './components/address'
|
||||
import type { orderParam } from './components/productCard'
|
||||
import ProductCard from './components/productCard'
|
||||
import Remark from './components/remark'
|
||||
import OrderInfo from './components/orderInfo'
|
||||
import { goLink } from '@/common/common'
|
||||
import type { orderStateItem } from './components/orderState'
|
||||
import OrderState from './components/orderState'
|
||||
import { alert, goLink } from '@/common/common'
|
||||
import SearchInput from '@/components/searchInput'
|
||||
import { ColorCardOrderCancelApi, GetColorCardOrderDetailApi } from '@/api/colorCard'
|
||||
|
||||
interface Param {
|
||||
address: string
|
||||
color_card_info: orderParam[]
|
||||
create_time: string
|
||||
create_user_name: string
|
||||
creator_id: number
|
||||
id: number
|
||||
order_no: string
|
||||
order_progress: orderStateItem[]
|
||||
order_status: number
|
||||
order_status_name: string
|
||||
purchaser_id: number
|
||||
purchaser_name: string
|
||||
purchaser_phone: string
|
||||
remark: string
|
||||
sale_user_id: number
|
||||
sale_user_name: string
|
||||
shipment_mode: number
|
||||
shipment_mode_name: string
|
||||
target_user_name: string
|
||||
target_user_phone: string
|
||||
update_time: string
|
||||
update_user_name: string
|
||||
updater_id: number
|
||||
}
|
||||
|
||||
export default () => {
|
||||
const [data, setData] = useState({
|
||||
address_title: '广东省佛山市禅城区南庄镇吉利大道872巷备份',
|
||||
address_name: '谭先生',
|
||||
address_phone: '13334726540',
|
||||
address_mode: '物流',
|
||||
const router = useRouter()
|
||||
|
||||
const [orderData, setOrderData] = useState<Param>()
|
||||
const { fetchData: fetchDataDtail } = GetColorCardOrderDetailApi()
|
||||
const getColorCardOrderDetail = async() => {
|
||||
const res = await fetchDataDtail({ id: router.params.id })
|
||||
setOrderData(() => res.data)
|
||||
}
|
||||
|
||||
useDidShow(() => {
|
||||
getColorCardOrderDetail()
|
||||
})
|
||||
|
||||
const addressData = useMemo(() => {
|
||||
return {
|
||||
address_title: orderData?.address || '',
|
||||
address_name: orderData?.purchaser_name || '',
|
||||
address_phone: orderData?.purchaser_phone || '',
|
||||
address_mode: orderData?.shipment_mode_name || '',
|
||||
}
|
||||
}, [orderData])
|
||||
|
||||
// 取消订单
|
||||
const { fetchData: fetchDataCancel } = ColorCardOrderCancelApi()
|
||||
const onCancel = async() => {
|
||||
Taro.showModal({
|
||||
title: '确定取消订单？',
|
||||
async success(res) {
|
||||
if (res.confirm) {
|
||||
const res = await fetchDataCancel({ id: orderData?.id })
|
||||
if (res.success) {
|
||||
alert.success('取消成功')
|
||||
getColorCardOrderDetail()
|
||||
}
|
||||
}
|
||||
else if (res.cancel) {
|
||||
console.log('用户点击取消')
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
return <View className={styles.main}>
|
||||
<Address defaultValue={data} />
|
||||
<ProductCard />
|
||||
<OrderInfo />
|
||||
<Remark value="被设计费开始减肥开始减肥" />
|
||||
<View className={styles.order_btn}>
|
||||
<OrderState list={orderData?.order_progress} />
|
||||
<Address defaultValue={addressData} />
|
||||
<ProductCard value={orderData?.color_card_info || []} />
|
||||
<OrderInfo {...orderData} />
|
||||
<Remark value={orderData?.remark || ''} placeholder="尚未备注信息" />
|
||||
{orderData?.order_status === 1 && <View className={styles.order_btn}>
|
||||
<View className={styles.btn_con}>
|
||||
<View className={styles.btn}>取消订单</View>
|
||||
<View className={styles.btn} onClick={onCancel}>取消订单</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>}
|
||||
</View>
|
||||
}
|
||||
|
||||
@ -60,7 +60,7 @@ export default () => {
|
||||
const menuList = [
|
||||
{ label: '地址管理', icon: 'icon-dizhiguanli', callback: () => goLink('/pages/addressManager/index') },
|
||||
{ label: '码单管理', icon: 'icon-mdgl', icon_status: 'local', callback: () => goLink('/pages/codeList/index') },
|
||||
{ label: '色卡剪样', icon: 'icon-yanseduibi', callback: () => goLink('/pages/colorCard/index') },
|
||||
{ label: '色卡剪样', icon: 'icon-yanseduibi', callback: () => goLink('/pages/colorCardClipping/index') },
|
||||
{ label: '颜色对比', icon: 'icon-yanseduibi', callback: () => goLink('/pages/sampleComparison/index') },
|
||||
{ label: '我的客服', icon: 'icon-wodekefu', text: '7x24小时服务', callback: () => (set_customer_service_show(true)) },
|
||||
]
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user