Merge branch 'dev' of ssh://git.online.zzfzyc.com:10022/mp/EShop into dev
This commit is contained in:
@@ -0,0 +1,88 @@
|
||||
.address-scroll-view{
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
scroll-view{
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.address-list{
|
||||
width: 704px;
|
||||
height: 156px;
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
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;
|
||||
}
|
||||
.address-list:hover{
|
||||
border: 1px solid #68b4ff;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0,122,255,0.27);
|
||||
}
|
||||
.address-list:last-child{
|
||||
margin-bottom: 300px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.address-list-default{
|
||||
width: 58px;
|
||||
height: 28px;
|
||||
background: #cde5ff;
|
||||
border-radius: 6px;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
color: #007aff;
|
||||
margin-left: 30px;
|
||||
|
||||
}
|
||||
.address-list-phone{
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #ababab;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.address-edit .icon-bianji{
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.address-list-info{
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #3c3c3c;
|
||||
}
|
||||
.address-list-bottom{
|
||||
display: flex;justify-content: space-between;
|
||||
margin-top: 18px;
|
||||
}
|
||||
.add-address{
|
||||
width: 668px;
|
||||
height: 82px;
|
||||
background: #007aff;
|
||||
border-radius: 40px;
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
display: flex;align-items: center;justify-content: center;
|
||||
position: absolute;bottom: 8%;left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.address-no-data{
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
color: #707070;
|
||||
height: 100%;
|
||||
padding-top: 40%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
|
||||
import { Button, Navigator, ScrollView, Text, View } from "@tarojs/components"
|
||||
import { memo, useState } from "react"
|
||||
import "./index.scss"
|
||||
|
||||
interface Params{
|
||||
refresherEnabled?: boolean,//是否开启刷新
|
||||
onSelect?: (item:any,index:number)=>void,//列表选择
|
||||
|
||||
}
|
||||
|
||||
// 地址列表
|
||||
const AddressList = memo((props:Params)=>{
|
||||
// 处理刷新
|
||||
const [refreshState, setRefreshState] = useState(false);
|
||||
const handleRefresh = ()=>{
|
||||
setRefreshState(true);
|
||||
setTimeout(()=>{
|
||||
setRefreshState(false);
|
||||
},500)
|
||||
}
|
||||
const data = Array.from({length:15});
|
||||
|
||||
return (
|
||||
<View className="address-scroll-view">
|
||||
<ScrollView scrollY refresherEnabled={props.refresherEnabled} enhanced refresherTriggered={refreshState} onRefresherRefresh={handleRefresh}>
|
||||
{
|
||||
data.length>0?
|
||||
data.map((item,index)=>{
|
||||
return(
|
||||
<View onClick={()=>props.onSelect&&props.onSelect(item,index)} className="address-list">
|
||||
<View className="address-user">
|
||||
XL纺织
|
||||
<Text className="address-list-default">默认</Text>
|
||||
{/* <Text className="address-list-phone">1656488999</Text> */}
|
||||
</View>
|
||||
<View className="address-list-bottom">
|
||||
<View className="address-list-info">
|
||||
**省**市**区**街道****仓库
|
||||
<Text className="address-list-phone">181****9790</Text>
|
||||
</View>
|
||||
<Navigator url="/pages/addressAdd/index?type=edit" hoverClass="none" className="address-edit">
|
||||
<Text className="iconfont icon-bianji"></Text>
|
||||
</Navigator>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}):
|
||||
<View className="address-no-data">暂未添加地址</View>
|
||||
}
|
||||
</ScrollView>
|
||||
<Navigator url="/pages/addressAdd/index?type=add" hoverClass="none" className="add-address">添加收货地址</Navigator>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
|
||||
export default AddressList;
|
||||
@@ -0,0 +1,81 @@
|
||||
.form-list{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 30px 30px 0;
|
||||
|
||||
.form-list-label{
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.form-list-right{
|
||||
width: 506px;
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.form-list-right-meet{
|
||||
background: #f6f6f6;
|
||||
width: 506px;
|
||||
min-height: 80px;
|
||||
border-radius: 20px;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 20px;
|
||||
display: flex;justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.form-list-input{
|
||||
width: 100%;
|
||||
display: flex;align-items: center;
|
||||
}
|
||||
.form-list-input text{
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
height: 30px;
|
||||
background: rgba(0,0,0,0.3);
|
||||
border-radius: 50%;
|
||||
font-size: 18px;
|
||||
display: flex;align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
}
|
||||
.form-list-right input,.form-list-right textarea{
|
||||
// flex: 0 0 auto;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
color: #000000;
|
||||
}
|
||||
.form-list-right textarea{
|
||||
height: 186px;
|
||||
border-radius: 10px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.form-list-right .phcolor{
|
||||
color: #ababab;
|
||||
}
|
||||
.form-list-right-placeholder{
|
||||
color: #ababab;
|
||||
}
|
||||
.form-list-right-enter .icon-a-moreback{
|
||||
font-size: 28px;
|
||||
}
|
||||
.add-address-default{
|
||||
display: flex;align-items: center;justify-content: space-between;
|
||||
margin: 70px 30px 0;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.add-address-save{
|
||||
width: 668px;
|
||||
height: 82px;
|
||||
background: #007aff;
|
||||
border-radius: 40px;
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
display: flex;align-items: center;justify-content: center;
|
||||
margin: 620px auto 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
|
||||
import { Input, Text, Textarea, View } from "@tarojs/components"
|
||||
import { memo } from "react"
|
||||
import "./index.scss"
|
||||
|
||||
interface ListParams{
|
||||
label: string, //左边label
|
||||
onInput?: ()=>any, // 输入框输入
|
||||
onClick?:()=>any, //点击列表
|
||||
placeholder?:string, // 提示文本
|
||||
children?: any, // 插槽
|
||||
type?: string // 类型：1.input,2.textarea,3.select
|
||||
value?: any
|
||||
}
|
||||
|
||||
// 表单列表
|
||||
const FromList = memo((props:ListParams)=>{
|
||||
const {type="input",value=""} = props;
|
||||
|
||||
return (
|
||||
<View className="form-list">
|
||||
<View className="form-list-label">{props.label}</View>
|
||||
<View onClick={props?.onClick} className="form-list-right">
|
||||
{
|
||||
props.children??
|
||||
<View onClick={props?.onClick} className="form-list-right-meet">
|
||||
{
|
||||
type=="input"?
|
||||
<View className="form-list-input">
|
||||
<Input value={value} placeholder-class="phcolor" onInput={props?.onInput} placeholder={props.placeholder} />
|
||||
{value&&<Text className="iconfont icon-qingkong"/>}
|
||||
</View>:
|
||||
type=="textarea"?<Textarea value={value} placeholder-class="phcolor" onInput={props?.onInput} placeholder={props.placeholder} />:
|
||||
<>
|
||||
{
|
||||
props.value?<View>{value}</View>:
|
||||
<View className="form-list-right-placeholder">
|
||||
{props.placeholder}
|
||||
</View>
|
||||
}
|
||||
<View className="form-list-right-enter"><Text className="iconfont icon-a-moreback"></Text></View>
|
||||
</>
|
||||
}
|
||||
</View>
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
export default FromList;
|
||||
@@ -15,7 +15,7 @@
|
||||
margin-top: 10px;
|
||||
font-size: $font_size_medium;
|
||||
border-bottom: 1px solid $color_font_two;
|
||||
color: $common_title_font_color;
|
||||
color: $color_font_two;
|
||||
position: relative;
|
||||
.address_item{
|
||||
padding: 0 20px;
|
||||
@@ -37,7 +37,7 @@
|
||||
height: 600px;
|
||||
.address_scroll_list{
|
||||
padding: 0 20px;
|
||||
font-size: $common_main_font_size2;
|
||||
font-size: $font_size;
|
||||
.address_list_item{
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
@@ -54,6 +54,6 @@
|
||||
|
||||
}
|
||||
.addresst_select{
|
||||
color:$color_font_two;
|
||||
color:$color_font_one;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user