--我的页面完成设置图标
--表单组件input类型完成后面图标
This commit is contained in:
parent
c6c3b8e21c
commit
08acb37769
@ -24,8 +24,23 @@
|
|||||||
display: flex;justify-content: space-between;
|
display: flex;justify-content: space-between;
|
||||||
align-items: center;
|
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{
|
.form-list-right input,.form-list-right textarea{
|
||||||
flex: 0 0 auto;
|
// flex: 0 0 auto;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
|
@ -25,7 +25,11 @@ const FromList = memo((props:ListParams)=>{
|
|||||||
props.children??
|
props.children??
|
||||||
<View onClick={props?.onClick} className="form-list-right-meet">
|
<View onClick={props?.onClick} className="form-list-right-meet">
|
||||||
{
|
{
|
||||||
type=="input"?<Input value={value} placeholder-class="phcolor" onInput={props?.onInput} placeholder={props.placeholder} />:
|
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} />:
|
type=="textarea"?<Textarea value={value} placeholder-class="phcolor" onInput={props?.onInput} placeholder={props.placeholder} />:
|
||||||
<>
|
<>
|
||||||
{
|
{
|
||||||
|
@ -43,7 +43,7 @@ export default ()=>{
|
|||||||
<View className="add-address">
|
<View className="add-address">
|
||||||
<FromList value={formData["aa"]} label="联系人" placeholder="请输入收货人姓名"/>
|
<FromList value={formData["aa"]} label="联系人" placeholder="请输入收货人姓名"/>
|
||||||
<FromList value={formData["bb"]} label="联系方式" placeholder="请输入收货人姓名"/>
|
<FromList value={formData["bb"]} label="联系方式" placeholder="请输入收货人姓名"/>
|
||||||
<FromList value={formData["cc"]} onClick={handleSelectSite} label="收地址" type="select" placeholder="请选择/省/市/区"/>
|
<FromList value={formData["cc"]} onClick={handleSelectSite} label="收货地址" type="select" placeholder="请选择/省/市/区"/>
|
||||||
<FromList value={formData["dd"]} label="详细地址" type="textarea" placeholder="请输入详细地址(街道、门牌号等)"/>
|
<FromList value={formData["dd"]} label="详细地址" type="textarea" placeholder="请输入详细地址(街道、门牌号等)"/>
|
||||||
<View className="add-address-default">
|
<View className="add-address-default">
|
||||||
<Text>设为默认地址</Text>
|
<Text>设为默认地址</Text>
|
||||||
|
@ -50,7 +50,7 @@ export default ()=>{
|
|||||||
</FromList>
|
</FromList>
|
||||||
<FromList value={formData["bb"]} label="联系人" placeholder="请输入收货人姓名"/>
|
<FromList value={formData["bb"]} label="联系人" placeholder="请输入收货人姓名"/>
|
||||||
<FromList value={formData["bb"]} label="联系方式" placeholder="请输入收货人姓名"/>
|
<FromList value={formData["bb"]} label="联系方式" placeholder="请输入收货人姓名"/>
|
||||||
<FromList value={formData["cc"]} onClick={handleSelectSite} label="收地址" type="select" placeholder="请选择/省/市/区"/>
|
<FromList value={formData["cc"]} onClick={handleSelectSite} label="收货地址" type="select" placeholder="请选择/省/市/区"/>
|
||||||
<FromList value={formData["dd"]} label="详细地址" type="textarea" placeholder="请输入详细地址(街道、门牌号等)"/>
|
<FromList value={formData["dd"]} label="详细地址" type="textarea" placeholder="请输入详细地址(街道、门牌号等)"/>
|
||||||
|
|
||||||
|
|
||||||
|
@ -60,6 +60,22 @@
|
|||||||
}
|
}
|
||||||
.card-info-right{
|
.card-info-right{
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
|
display: flex;align-items: flex-end;
|
||||||
|
}
|
||||||
|
.setup-icon{
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
.icon-wrapper{
|
||||||
|
font-size: 60px;
|
||||||
|
}
|
||||||
|
.icon-point{
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #ff0000;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-main-title{
|
.card-main-title{
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import { View,Image,Text } from "@tarojs/components"
|
import { View,Image,Text, Navigator } from "@tarojs/components"
|
||||||
import { memo } from "react"
|
import { memo } from "react"
|
||||||
import styles from './index.module.scss'
|
import styles from './index.module.scss'
|
||||||
|
import classnames from "classnames";
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
|
|
||||||
@ -29,7 +30,14 @@ const Header = memo(()=>{
|
|||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
<View className={styles['card-info-right']}>
|
<View className={styles['card-info-right']}>
|
||||||
1
|
<Navigator hoverClass="none" url="/pages/userEdit/index" className={styles['setup-icon']}>
|
||||||
|
<View className={classnames(
|
||||||
|
styles['icon-wrapper'],
|
||||||
|
'iconfont',
|
||||||
|
'icon-shezhi',
|
||||||
|
)}></View>
|
||||||
|
<View className={styles['icon-point']}></View>
|
||||||
|
</Navigator>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
<View className={styles['card-main']}>
|
<View className={styles['card-main']}>
|
||||||
|
@ -80,8 +80,10 @@ const UserEditList = memo((props:any)=>{
|
|||||||
|
|
||||||
// popup内容
|
// popup内容
|
||||||
const PopupContent = memo((props:any)=>{
|
const PopupContent = memo((props:any)=>{
|
||||||
|
const [value, setValue] = useState("");
|
||||||
// popup输入长度
|
// popup输入长度
|
||||||
const handleTextareaInput = (ev:any)=>{
|
const handleTextareaInput = (ev:any)=>{
|
||||||
|
setValue(ev.detail.value.slice(0,20));
|
||||||
}
|
}
|
||||||
// 重置
|
// 重置
|
||||||
const handleTextareaReset = ()=>{
|
const handleTextareaReset = ()=>{
|
||||||
@ -91,8 +93,8 @@ const PopupContent = memo((props:any)=>{
|
|||||||
<Popup onClose={()=>props.setPopupShow(false)} title="修改昵称" show={props.show}>
|
<Popup onClose={()=>props.setPopupShow(false)} title="修改昵称" show={props.show}>
|
||||||
<View className="user-edit-popup-content">
|
<View className="user-edit-popup-content">
|
||||||
<View className="user-edit-popup-input">
|
<View className="user-edit-popup-input">
|
||||||
<Textarea value={props.value} onInput={handleTextareaInput} maxlength={20}/>
|
<Textarea value={value} onInput={handleTextareaInput} maxlength={20}/>
|
||||||
<Text>{props.value.length}/20</Text>
|
<Text>{value.length}/20</Text>
|
||||||
</View>
|
</View>
|
||||||
<Text className="user-edit-popup-tips">请设置2-20个字符,由中文、英文、数字、-和_组成</Text>
|
<Text className="user-edit-popup-tips">请设置2-20个字符,由中文、英文、数字、-和_组成</Text>
|
||||||
<View className="user-edit-popup-operation">
|
<View className="user-edit-popup-operation">
|
||||||
|
@ -27,7 +27,7 @@ const WeightList = memo((props:Params)=>{
|
|||||||
setRefreshState(false);
|
setRefreshState(false);
|
||||||
},500)
|
},500)
|
||||||
}
|
}
|
||||||
const data = Array.from({length:15});
|
const data = Array.from({length:0});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className="weight-list-scroll-view">
|
<View className="weight-list-scroll-view">
|
||||||
@ -54,7 +54,10 @@ const WeightList = memo((props:Params)=>{
|
|||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}):
|
}):
|
||||||
<View className="weight-list-no-data">暂未添加地址</View>
|
<View className="weight-list-no-data">
|
||||||
|
<View>您末添加任何码单信息</View>
|
||||||
|
正在使用平台默认码单信息
|
||||||
|
</View>
|
||||||
}
|
}
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
<Navigator url="/pages/weightListAdd/index?type=add" hoverClass="none" className="add-weight-list">添加新码单信息</Navigator>
|
<Navigator url="/pages/weightListAdd/index?type=add" hoverClass="none" className="add-weight-list">添加新码单信息</Navigator>
|
||||||
|
@ -7,6 +7,26 @@
|
|||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
|
padding-right: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.add-address-default-active{
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
background: #007aff;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 45px;
|
||||||
|
color: white;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.add-address-default-noactive{
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border: 2px solid #707070;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.add-address-save{
|
.add-address-save{
|
||||||
|
@ -20,11 +20,13 @@ export default ()=>{
|
|||||||
aa: "",
|
aa: "",
|
||||||
bb:"",
|
bb:"",
|
||||||
cc:"",
|
cc:"",
|
||||||
dd:""
|
dd:"",
|
||||||
|
ee: 0
|
||||||
})
|
})
|
||||||
const handleSave = ()=>{
|
const handleSave = ()=>{
|
||||||
Taro.navigateBack();
|
Taro.navigateBack();
|
||||||
}
|
}
|
||||||
|
const handleSelectDefault = ()=>setFormData({...formData ,ee: formData.ee?0:1});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View className="add-address">
|
<View className="add-address">
|
||||||
@ -33,7 +35,12 @@ export default ()=>{
|
|||||||
<FromList value={formData["bb"]} label="联系方式" placeholder="请输入码单显示联系号码"/>
|
<FromList value={formData["bb"]} label="联系方式" placeholder="请输入码单显示联系号码"/>
|
||||||
<View className="add-address-default">
|
<View className="add-address-default">
|
||||||
<Text>设为默认地址</Text>
|
<Text>设为默认地址</Text>
|
||||||
<View>1</View>
|
<View onClick={handleSelectDefault}>
|
||||||
|
{
|
||||||
|
formData.ee?<View className="add-address-default-active">✓</View>
|
||||||
|
:<View className="add-address-default-noactive"></View>
|
||||||
|
}
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
||||||
<Button hoverClass="none" className="add-address-save" onClick={handleSave}>保存</Button>
|
<Button hoverClass="none" className="add-address-save" onClick={handleSave}>保存</Button>
|
||||||
|
@ -12,6 +12,42 @@
|
|||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon-yifahuo:before {
|
||||||
|
content: "\e65b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-daipeibu:before {
|
||||||
|
content: "\e662";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-yaoqingtuandui:before {
|
||||||
|
content: "\e65a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-a-tuikuanshouhou:before {
|
||||||
|
content: "\e65c";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-daifukuan:before {
|
||||||
|
content: "\e65d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shezhi:before {
|
||||||
|
content: "\e65e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-yanseduibi:before {
|
||||||
|
content: "\e65f";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-daifahuo:before {
|
||||||
|
content: "\e660";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-baoguo:before {
|
||||||
|
content: "\e661";
|
||||||
|
}
|
||||||
|
|
||||||
.icon-tick-pressed:before {
|
.icon-tick-pressed:before {
|
||||||
content: "\e652";
|
content: "\e652";
|
||||||
}
|
}
|
||||||
@ -40,10 +76,6 @@
|
|||||||
content: "\e64a";
|
content: "\e64a";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-baoguo:before {
|
|
||||||
content: "\e64b";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-qingkong:before {
|
.icon-qingkong:before {
|
||||||
content: "\e64c";
|
content: "\e64c";
|
||||||
}
|
}
|
||||||
@ -55,43 +87,3 @@
|
|||||||
.icon-jian:before {
|
.icon-jian:before {
|
||||||
content: "\e64e";
|
content: "\e64e";
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-shoucang-pressed:before {
|
|
||||||
content: "\e64f";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-shoucang:before {
|
|
||||||
content: "\e650";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-phone:before {
|
|
||||||
content: "\e651";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-tick:before {
|
|
||||||
content: "\e653";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-a-moreback:before {
|
|
||||||
content: "\e654";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-fenlei:before {
|
|
||||||
content: "\e657";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-bianji:before {
|
|
||||||
content: "\e658";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-wode:before {
|
|
||||||
content: "\e659";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-sort-up-full:before {
|
|
||||||
content: "\ea4c";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-sort-down-full:before {
|
|
||||||
content: "\ea4d";
|
|
||||||
}
|
|
Binary file not shown.
Loading…
x
Reference in New Issue
Block a user