✨ feat:客户管理70%
This commit is contained in:
Haiyi
@@ -1,45 +1,55 @@
|
||||
.address-scroll-view{
|
||||
.address-scroll-view {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
scroll-view{
|
||||
|
||||
scroll-view {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.address-scroll-view-content{
|
||||
|
||||
.address-scroll-view-content {
|
||||
padding-bottom: 300px;
|
||||
}
|
||||
.address-list{
|
||||
|
||||
.address-list {
|
||||
width: 704px;
|
||||
height: 156px;
|
||||
padding-bottom: 24px;
|
||||
// height: 156px;
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
box-shadow: 2px 4px 12px 0px rgba(0,0,0,0.16);
|
||||
box-shadow: 2px 4px 12px 0px rgba(0, 0, 0, 0.16);
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
margin: 18px auto 0;
|
||||
border: 1px solid #ffffff;
|
||||
border: 1px solid rgba(0,0,0,0.16);
|
||||
border: 1px solid rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
.address-active{
|
||||
|
||||
.address-active {
|
||||
border: 1px solid #68b4ff;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0,122,255,0.27);
|
||||
box-shadow: 0px 0px 10px 0px rgba(0, 122, 255, 0.27);
|
||||
}
|
||||
.address-list:first-child{
|
||||
|
||||
.address-list:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.address-list-last{
|
||||
|
||||
.address-list-last {
|
||||
margin-bottom: 300px;
|
||||
}
|
||||
.address-user{
|
||||
|
||||
.address-user {
|
||||
font-size: 28px;
|
||||
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
color: #000000;
|
||||
display: flex;align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.address-list-default{
|
||||
|
||||
.address-list-default {
|
||||
width: 58px;
|
||||
height: 28px;
|
||||
background: #cde5ff;
|
||||
@@ -51,36 +61,45 @@
|
||||
margin-left: 30px;
|
||||
|
||||
}
|
||||
.address-list-phone{
|
||||
font-size: 24px;
|
||||
|
||||
.address-list-phone {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #ababab;
|
||||
margin-left: 30px;
|
||||
color: #000000;
|
||||
margin-left: 16px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.address-edit{
|
||||
|
||||
.address-edit {
|
||||
padding: 10px;
|
||||
}
|
||||
.address-edit .icon-bianji{
|
||||
|
||||
.address-edit .icon-bianji {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.address-list-info{
|
||||
font-size: 24px;
|
||||
.address-list-info {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #3c3c3c;
|
||||
color: #000000;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
width: 557px;
|
||||
}
|
||||
.address-list-info view{
|
||||
max-width: 60%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;white-space: nowrap;
|
||||
|
||||
.address-list-info view {
|
||||
max-width: 557px;
|
||||
// text-overflow: ellipsis;
|
||||
// overflow: hidden;
|
||||
// white-space: nowrap;
|
||||
}
|
||||
.address-list-bottom{
|
||||
display: flex;justify-content: space-between;
|
||||
|
||||
.address-list-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 18px;
|
||||
}
|
||||
.add-address{
|
||||
|
||||
.add-address {
|
||||
width: 668px;
|
||||
height: 82px;
|
||||
background: #007aff;
|
||||
@@ -88,11 +107,16 @@
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
display: flex;align-items: center;justify-content: center;
|
||||
position: absolute;bottom: 100px;left: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
bottom: 100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.address-no-data{
|
||||
|
||||
.address-no-data {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
@@ -101,4 +125,19 @@
|
||||
padding-top: 40%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.line {
|
||||
margin-top: 16px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #000000;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.bottom-font {
|
||||
margin-top: 16px;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
import { Button, Navigator, ScrollView, Text, View } from "@tarojs/components"
|
||||
import { memo, useEffect, useState } from "react"
|
||||
import { memo, useEffect, useState, forwardRef, useImperativeHandle } from "react"
|
||||
import "./index.scss"
|
||||
import { mppurchaseraddresslist } from "@/api/addressList"
|
||||
import { alert } from "@/common/common"
|
||||
@@ -18,7 +18,10 @@ interface Params {
|
||||
}
|
||||
|
||||
// 地址列表
|
||||
const AddressList = memo((props: Params) => {
|
||||
const AddressList = memo(forwardRef((props: Params, AddressListRef) => {
|
||||
|
||||
|
||||
|
||||
const { addButtonEnabled = true, focusBorderEnabled = false } = props;
|
||||
const { fetchData, state } = mppurchaseraddresslist()
|
||||
// 获取数据
|
||||
@@ -36,14 +39,14 @@ const AddressList = memo((props: Params) => {
|
||||
})
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
useDidShow(() => {
|
||||
getData();
|
||||
// 监听刷新
|
||||
Taro.eventCenter.on("addressList:refresh", getData);
|
||||
return () => {
|
||||
Taro.eventCenter.off("addressList:refresh", getData);
|
||||
}
|
||||
}, [])
|
||||
})
|
||||
// 处理刷新
|
||||
const [refreshState, setRefreshState] = useState(false);
|
||||
const handleRefresh = async () => {
|
||||
@@ -100,6 +103,10 @@ const AddressList = memo((props: Params) => {
|
||||
}
|
||||
}
|
||||
|
||||
useImperativeHandle(AddressListRef, () => ({
|
||||
getData
|
||||
}))
|
||||
|
||||
return (
|
||||
<View className="address-scroll-view">
|
||||
<ScrollView scrollY refresherEnabled={props.refresherEnabled} enhanced refresherTriggered={refreshState} onRefresherRefresh={handleRefresh}>
|
||||
@@ -113,25 +120,28 @@ const AddressList = memo((props: Params) => {
|
||||
<View onClick={() => handleSelect(item, index)} className={`address-list ${focusId == item.id && 'address-active'}`}>
|
||||
<View className="address-user">
|
||||
{item.name}
|
||||
<Text className="address-list-phone">{item.phone}</Text>
|
||||
{
|
||||
item.is_default ? <Text className="address-list-default">默认</Text> :
|
||||
<Text className="address-list-phone">{item.phone.replace(item.phone.substring(3, 7), "****")}</Text>
|
||||
item.is_default && <Text className="address-list-default">默认</Text>
|
||||
|
||||
}
|
||||
</View>
|
||||
<View className="address-list-bottom">
|
||||
<View className="address-list-info">
|
||||
<View>{item.province_name + item.city_name + item.district_name}
|
||||
<View>{item.province_name + item.city_name + item.district_name + item.address_detail}
|
||||
{/* {item.address_detail} */}
|
||||
</View>
|
||||
{
|
||||
{/* {
|
||||
item.is_default && <Text className="address-list-phone">{item.phone.replace(item.phone.substring(3, 7), "****")}</Text>
|
||||
}
|
||||
} */}
|
||||
</View>
|
||||
<Navigator onClick={e => e.stopPropagation()} url={`/pages/addAddress/index?type=edit&id=${item.id}&&purchaser_id=${Number(props.purchaser_id)}`} hoverClass="none" className="address-edit">
|
||||
{/* <Text className="iconfont icon-bianji"></Text> */}
|
||||
<IconFont name={'icon-bianji'} size={40} ></IconFont>
|
||||
</Navigator>
|
||||
</View>
|
||||
<View className='line'></View>
|
||||
<View className='bottom-font'>加工厂：佛山纺织工厂</View>
|
||||
</View>
|
||||
);
|
||||
}) :
|
||||
@@ -142,6 +152,6 @@ const AddressList = memo((props: Params) => {
|
||||
{addButtonEnabled && <Navigator url={`/pages/addAddress/index?type=add&purchaser_id=${Number(props.purchaser_id)}`} hoverClass="none" className="add-address">添加收货地址</Navigator>}
|
||||
</View>
|
||||
)
|
||||
})
|
||||
}))
|
||||
|
||||
export default AddressList;
|
||||
@@ -24,7 +24,7 @@ function hex2rgb(hex) {
|
||||
return "rgb(" + rgb.join(",") + ")";
|
||||
}
|
||||
|
||||
export type IconNames = 'icon-zhankai1' | 'icon-shouqi1' | 'icon-shouhou1' | 'icon-cangku1' | 'icon-saoma' | 'icon-dizhi1' | 'icon-huodaofukuan' | 'icon-yufukuan1' | 'icon-yue' | 'icon-zidingyi' | 'icon-jinetiaozheng' | 'icon-tuikuan1' | 'icon-zhankai' | 'icon-shouqi' | 'icon-lujing' | 'icon-jizhumima' | 'icon-a-jizhumima' | 'icon-weixindenglu' | 'icon-kehuxinxi' | 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | 'icon-wodekefu' | 'icon-dizhi' | 'icon-shouhouzhongxin' | 'icon-wodeshoucang' | 'icon-shoukuanliebiao' | 'icon-madanguanli' | 'icon-qusechazhao' | 'icon-pandiansaoma' | 'icon-yaoqingma' | 'icon-duizhang' | 'icon-tihuoliebiao' | 'icon-yangpinduibi' | 'icon-yansequyang' | 'icon-fahuoliebiao' | 'icon-yuncangkucun' | 'icon-xiaoshou' | 'icon-qianzhicangkucun' | 'icon-lingquseka' | 'icon-gouwu1' | 'icon-dingdan1' | 'icon-gerenzhongxin1' | 'icon-shouye1' | 'icon-gerenzhongxin' | 'icon-dingdan' | 'icon-shouye' | 'icon-gouwu';
|
||||
export type IconNames = 'icon-dianhua' | 'icon-peibu' | 'icon-zhankai1' | 'icon-shouqi1' | 'icon-shouhou1' | 'icon-cangku1' | 'icon-saoma' | 'icon-dizhi1' | 'icon-huodaofukuan' | 'icon-yufukuan1' | 'icon-yue' | 'icon-zidingyi' | 'icon-jinetiaozheng' | 'icon-tuikuan1' | 'icon-zhankai' | 'icon-shouqi' | 'icon-lujing' | 'icon-jizhumima' | 'icon-a-jizhumima' | 'icon-weixindenglu' | 'icon-kehuxinxi' | 'icon-yewuyuanqizi' | 'icon-chakanquanbukehu' | 'icon-biyan' | 'icon-bianji' | 'icon-daikuan' | 'icon-cangku' | 'icon-guanlidingdan' | 'icon-mima' | 'icon-guanbi' | 'icon-jianshao' | 'icon-dingwei' | 'icon-saomiao' | 'icon-peihuo' | 'icon-shaixuan' | 'icon-paiming' | 'icon-shanchusousuoxinxi' | 'icon-shijian' | 'icon-sousuo' | 'icon-shouhou' | 'icon-sousuofanhui' | 'icon-sousuoshanchu' | 'icon-tuikuan' | 'icon-tishi' | 'icon-xianxiahuizong' | 'icon-xinzeng' | 'icon-yonghuming' | 'icon-yanjing' | 'icon-yufukuan' | 'icon-wodekefu' | 'icon-dizhi' | 'icon-shouhouzhongxin' | 'icon-wodeshoucang' | 'icon-shoukuanliebiao' | 'icon-madanguanli' | 'icon-qusechazhao' | 'icon-pandiansaoma' | 'icon-yaoqingma' | 'icon-duizhang' | 'icon-tihuoliebiao' | 'icon-yangpinduibi' | 'icon-yansequyang' | 'icon-fahuoliebiao' | 'icon-yuncangkucun' | 'icon-xiaoshou' | 'icon-qianzhicangkucun' | 'icon-lingquseka' | 'icon-gouwu1' | 'icon-dingdan1' | 'icon-gerenzhongxin1' | 'icon-shouye1' | 'icon-gerenzhongxin' | 'icon-dingdan' | 'icon-shouye' | 'icon-gouwu';
|
||||
|
||||
type PropsType = {
|
||||
name: IconNames;
|
||||
@@ -82,7 +82,13 @@ const IconFont:FC<PropsType> = ({
|
||||
className={classnames(icon, customClassName)}
|
||||
/>
|
||||
)} */}
|
||||
{/* icon-zhankai1 */}
|
||||
{/* icon-dianhua */}
|
||||
|
||||
{ name === 'icon-dianhua' && (<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='M938.461867 771.925333a59.255467 59.255467 0 0 1 0 83.694934l-41.847467 41.847466c-30.9248 30.9248-71.611733 49.7664-120.9344 55.978667a293.410133 293.410133 0 0 1-36.864 2.286933c-35.84 0-74.581333-6.075733-115.541333-18.090666-111.274667-32.699733-228.2496-106.461867-329.352534-207.5648-101.102933-101.137067-174.865067-218.112-207.530666-329.352534-16.2816-55.3984-21.640533-106.7008-15.872-152.405333 6.2464-49.288533 25.088-89.975467 55.978666-120.900267l41.8816-41.847466a59.255467 59.255467 0 0 1 83.694934 0l184.149333 184.149333a59.255467 59.255467 0 0 1 0 83.694933l-41.847467 41.847467c-23.688533 23.6544-0.1024 100.352 66.9696 167.389867 67.072 67.072 143.701333 90.658133 167.389867 66.9696l41.8816-41.847467a59.255467 59.255467 0 0 1 83.694933 0l184.149334 184.149333z' 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-peibu */}
|
||||
|
||||
{ name === 'icon-peibu' && (<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='M336 96c77.504 0 142.144 55.12 156.864 128.288L492.8 224H832a80 80 0 0 1 80 80v544a80 80 0 0 1-80 80H384a80.16 80.16 0 0 1-19.84-2.48l1.072-0.192c-8.048 1.488-16.32 2.384-24.752 2.608L336 928h-64c-88.368 0-160-71.632-160-160V256c0-88.368 71.632-160 160-160h64z m160 191.984V768c0 35.952-11.84 69.12-31.872 95.84L464 864h368a16 16 0 0 0 15.888-14.128L848 848V304a16 16 0 0 0-14.128-15.888L832 288l-336-0.016zM336 672h-64a96 96 0 0 0-3.6 191.936L272 864h64a96 96 0 0 0 3.6-191.936L336 672z m0-512h-64a96 96 0 0 0-95.936 92.4L176 256v384a159.296 159.296 0 0 1 96-32h64c36.032 0 69.28 11.904 96 32V256a96 96 0 0 0-92.4-95.936L336 160z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-zhankai1 */}
|
||||
|
||||
{ name === 'icon-zhankai1' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1489 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M744.727273 954.181818L1442.909091 46.545455H46.545455z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
|
||||
{/* icon-shouqi1 */}
|
||||
|
||||
Reference in New Issue
Block a user