--我的页面完成部分

This commit is contained in:
li tong bao
2022-06-09 19:31:40 +08:00
parent de38a42b2e
commit eceb170ece
17 changed files with 556 additions and 69 deletions
+2 -1
View File
@@ -19,6 +19,7 @@
box-sizing: border-box;
margin: 18px auto 0;
border: 1px solid #ffffff;
border: 1px solid rgba(0,0,0,0.16);
}
.address-active{
border: 1px solid #68b4ff;
@@ -88,7 +89,7 @@
font-weight: 400;
color: #ffffff;
display: flex;align-items: center;justify-content: center;
position: absolute;bottom: 8%;left: 50%;
position: absolute;bottom: 4%;left: 50%;
transform: translateX(-50%);
}
.address-no-data{
+5
View File
@@ -9,6 +9,11 @@
color: #000000;
margin-top: 20px;
}
.form-list-label-required::before{
content: "*";
color: #FF0000;
font-size: 28px;
}
.form-list-right{
width: 506px;
font-size: 26px;
+9 -5
View File
@@ -10,20 +10,24 @@ interface ListParams{
placeholder?:string, // 提示文本
children?: any, // 插槽
type?: string // 类型:1.input,2.textarea,3.select
value?: any
value?: any,
style?: object, //整行样式
labelStyle?: object, // label样式
contentStyle?: object,
required?: boolean
}
// 表单列表
const FromList = memo((props:ListParams)=>{
const {type="input",value=""} = props;
const {type="input",value="",style={},labelStyle={},contentStyle={},required=false} = props;
return (
<View className="form-list">
<View className="form-list-label">{props.label}</View>
<View style={style} className="form-list">
<View style={labelStyle} className={`form-list-label ${required&&"form-list-label-required"}`}>{props.label}</View>
<View onClick={props?.onClick} className="form-list-right">
{
props.children??
<View onClick={props?.onClick} className="form-list-right-meet">
<View style={contentStyle} onClick={props?.onClick} className="form-list-right-meet">
{
type=="input"?
<View className="form-list-input">
@@ -0,0 +1,95 @@
.From-list-certification{
display: flex;
justify-content: space-between;
margin: 0 30px;
border-bottom: 1px solid #F0F0F0;
padding: 15px 0;
.From-list-certification-label{
font-size: 28px;
font-weight: 400;
color: #000000;
margin-top: 20px;
width: 150px;
border-right: 1px solid #F0F0F0;
}
.From-list-certification-label-required::before{
content: "*";
color: #FF0000;
font-size: 28px;
}
.From-list-certification-right{
width: 506px;
font-size: 26px;
font-weight: 400;
}
.From-list-certification-right-meet{
width: 506px;
min-height: 45px;
border-radius: 20px;
box-sizing: border-box;
padding: 10px 20px;
display: flex;justify-content: space-between;
align-items: center;
}
.From-list-certification-input{
width: 100%;
display: flex;align-items: center;
}
.From-list-certification-input view{
height: 100%;
padding: 0 10px;
box-sizing: border-box;
}
.From-list-certification-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;
color: white;
}
.From-list-certification-right input,.From-list-certification-right textarea{
// flex: 0 0 auto;
min-height: 100%;
width: 100%;
color: #000000;
}
.From-list-certification-right textarea{
height: 186px;
border-radius: 10px;
padding: 10px 0;
}
.From-list-certification-right .phcolor{
color: #ababab;
}
.From-list-certification-right-placeholder{
color: #ababab;
}
.From-list-certification-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,60 @@
import { Input, Text, Textarea, View } from "@tarojs/components"
import { memo } from "react"
import "./index.scss"
interface ListParams{
label: string, //左边label
onInput?: (ev:Object)=>void, // 输入框输入
onClick?:()=>any, //点击列表
placeholder?:string, // 提示文本
children?: any, // 插槽
type?: string // 类型:1.input,2.textarea,3.select
value?: any,
style?: object, //整行样式
labelStyle?: object, // label样式
contentStyle?: object,
required?: boolean
}
// 表单列表
const FromList = memo((props:ListParams)=>{
const {type="input",value="",style={},labelStyle={},contentStyle={},required=false} = props;
return (
<View style={style} className="From-list-certification">
<View style={labelStyle} className={`From-list-certification-label ${required&&"From-list-certification-label-required"}`}>{props.label}</View>
<View onClick={props?.onClick} className="From-list-certification-right">
{
props.children??
<View style={contentStyle} onClick={props?.onClick} className="From-list-certification-right-meet">
{
type=="input"?
<View className="From-list-certification-input">
<Input value={value} placeholder-class="phcolor" onInput={props?.onInput} placeholder={props.placeholder} />
{value&&
<View><Text onClick={()=>props.onInput&&props.onInput({detail: {value: ""}})} className="iconfont icon-qingkong"/></View>
}
</View>:
type=="textarea"?<Textarea value={value} placeholder-class="phcolor" onInput={props?.onInput} placeholder={props.placeholder} />:
<>
{
props.value?<View>{value}</View>:
<View className="From-list-certification-right-placeholder">
{props.placeholder}
</View>
}
<View className="From-list-certification-right-enter"><Text className="iconfont icon-a-moreback"></Text></View>
</>
}
</View>
}
</View>
</View>
)
})
const A = ()=>{
}
export default FromList;
+16
View File
@@ -0,0 +1,16 @@
.message-custom-tips{
width: 100%;
height: 66px;
background: #FFE6CE;
border: 2px solid #ffe6ce;
padding: 0 30px;
display: flex;align-items: center;
font-size: 24px;
font-weight: 400;
box-sizing: border-box;
color: #EE7500;
text{
margin-right: 10px;
font-size: 30px;
}
}
+19
View File
@@ -0,0 +1,19 @@
import { Button, Navigator, ScrollView, Text, View } from "@tarojs/components"
import { memo } from "react"
import "./index.scss"
interface Params{
text: String,//提示信息
}
// 消息提示
const Message = memo((props:Params)=>{
return (
<View className="message-custom-tips">
<Text className="iconfont icon-zhuyi"></Text> {props.text}
</View>
)
})
export default Message;