✨ 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;
|
||||
Reference in New Issue
Block a user