--我的页面完成部分
This commit is contained in:
parent
de38a42b2e
commit
eceb170ece
@ -2,7 +2,7 @@
|
||||
"miniprogramRoot": "./dist",
|
||||
"projectname": "EShop",
|
||||
"description": "电子商城",
|
||||
"appid": "touristappid",
|
||||
"appid": "wx68d92d7cbf0b6963",
|
||||
"setting": {
|
||||
"urlCheck": true,
|
||||
"es6": false,
|
||||
|
@ -158,6 +158,12 @@ export default {
|
||||
pages: [
|
||||
"index",
|
||||
]
|
||||
},
|
||||
{
|
||||
root: "pages/certification",
|
||||
pages: [
|
||||
"index",
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
@ -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{
|
||||
|
@ -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;
|
||||
|
@ -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">
|
||||
|
95
src/components/FromListCertification/index.scss
Normal file
95
src/components/FromListCertification/index.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
60
src/components/FromListCertification/index.tsx
Normal file
60
src/components/FromListCertification/index.tsx
Normal file
@ -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
src/components/Message/index.scss
Normal file
16
src/components/Message/index.scss
Normal 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
src/components/Message/index.tsx
Normal file
19
src/components/Message/index.tsx
Normal 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;
|
4
src/pages/certification/index.config.ts
Normal file
4
src/pages/certification/index.config.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export default {
|
||||
navigationBarTitleText: '认证信息',
|
||||
enableShareAppMessage: true,
|
||||
}
|
104
src/pages/certification/index.scss
Normal file
104
src/pages/certification/index.scss
Normal file
@ -0,0 +1,104 @@
|
||||
.certification{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #F0F0F0;
|
||||
padding-bottom: 300px;
|
||||
.certification-content{
|
||||
background-color: white;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
.certification-content:nth-of-type(3){
|
||||
margin-top: 18px;
|
||||
}
|
||||
.certification-title{
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
margin-left: 30px;
|
||||
padding-top: 40px;
|
||||
color: #000000;
|
||||
// border-top: 18px solid #F0F0F0;
|
||||
}
|
||||
.certification-upload{
|
||||
width: 642px;
|
||||
height: 316px;
|
||||
border: 10px solid #cde5ff;
|
||||
border-radius: 30px;
|
||||
margin: 0 auto;
|
||||
display: flex;align-items: center;justify-content: center;
|
||||
font-size: 34px;
|
||||
font-weight: 700;
|
||||
color: #68b4ff;
|
||||
background-color: #ECF5FF;
|
||||
position: relative;
|
||||
margin-top: 60px;
|
||||
}
|
||||
.certification-upload text{
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.certification-upload-no{
|
||||
display: flex;flex-direction: column;align-items: center;
|
||||
}
|
||||
.certification-upload-no-icon{
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
background: #68b4ff;
|
||||
box-shadow: 0px 0px 12px 0px #68b4ff;
|
||||
display: flex;align-items: center;justify-content: center;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
}
|
||||
.certification-upload-no-tips{
|
||||
margin-top: 30px;
|
||||
border-radius: 30px;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #000000;
|
||||
}
|
||||
.certification-button{
|
||||
position: absolute;bottom: -10px;left: -10px;right: -10px;
|
||||
background-color: #858A8F;
|
||||
display: flex;
|
||||
height: 86px;
|
||||
border-radius: 0 0 30px 30px;
|
||||
}
|
||||
.certification-button view{
|
||||
flex: 1;
|
||||
display: flex;align-items: center;justify-content: center;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
.certification-button view:first-child{
|
||||
border-right: 1px solid #CCCCCC;
|
||||
}
|
||||
.certification-footer{
|
||||
width: 750px;
|
||||
height: 174px;
|
||||
background: #ffffff;
|
||||
box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16);
|
||||
position: fixed;bottom: 0;left: 0;right: 0;
|
||||
width: 100%;
|
||||
display: flex;align-items: center;justify-content: center;
|
||||
}
|
||||
.certification-footer-button{
|
||||
width: 696px;
|
||||
height: 82px;
|
||||
background: #ffffff;
|
||||
border: 2px solid #cde5ff;
|
||||
display: flex;
|
||||
border-radius: 40px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
.certification-footer-button view{
|
||||
flex: 1;
|
||||
display: flex;align-items: center;justify-content: center;
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #007aff;
|
||||
}
|
||||
.certification-footer-button view:last-child{
|
||||
color: white;
|
||||
background-color: #007AFF;
|
||||
}
|
||||
}
|
135
src/pages/certification/index.tsx
Normal file
135
src/pages/certification/index.tsx
Normal file
@ -0,0 +1,135 @@
|
||||
|
||||
import FromListCertification from "@/components/FromListCertification"
|
||||
import { Button, Input, Text, Textarea, View } from "@tarojs/components"
|
||||
import Taro, { setNavigationBarTitle, useRouter } from "@tarojs/taro"
|
||||
import {weightAddApi, weightDetailApi,weightEditApi} from "@/api/weightList"
|
||||
import { useEffect, useState } from "react"
|
||||
import { alert, retrieval } from "@/common/common"
|
||||
import "./index.scss"
|
||||
import Message from "@/components/Message"
|
||||
|
||||
export default ()=>{
|
||||
const {type,id} = useRouter().params;
|
||||
useEffect(()=>{
|
||||
if(type=="add"){
|
||||
setNavigationBarTitle({title:"添加码单信息"})
|
||||
}else{
|
||||
initalFormData();
|
||||
setNavigationBarTitle({title:"修改码单信息"})
|
||||
}
|
||||
},[]);
|
||||
// 获取编辑码单信息
|
||||
const {fetchData: getFromData} = weightDetailApi()
|
||||
const initalFormData = async ()=>{
|
||||
const detail = await getFromData({id});
|
||||
setFormData({
|
||||
title: detail.data.title,
|
||||
purchaser_name: detail.data.purchaser_name,
|
||||
phone: detail.data.phone,
|
||||
is_default: detail.data.is_default,
|
||||
id: detail.data.id,
|
||||
})
|
||||
}
|
||||
// 保存
|
||||
const [formData, setFormData] = useState({
|
||||
title: "",
|
||||
purchaser_name: "",
|
||||
phone: "",
|
||||
is_default: false,
|
||||
id: 0
|
||||
})
|
||||
const rules = {
|
||||
title: [{
|
||||
message: "请输入抬头"
|
||||
}],
|
||||
purchaser_name: [{
|
||||
message: "请输入客户名称"
|
||||
}],
|
||||
phone: [{
|
||||
message: "请输入正确的电话号码", regex: /^1[3|5|6|9|2|8|7]\d{9}$/
|
||||
}]
|
||||
}
|
||||
const {fetchData} = weightAddApi()
|
||||
const {fetchData: editFetch} = weightEditApi()
|
||||
const handleSave = ()=>{
|
||||
retrieval(formData, rules).then(async ()=>{
|
||||
const result = type=="add"?await fetchData({
|
||||
title: formData.title,
|
||||
purchaser_name: formData.purchaser_name,
|
||||
phone: formData.phone,
|
||||
is_default: formData.is_default,
|
||||
}):await editFetch({
|
||||
title: formData.title,
|
||||
purchaser_name: formData.purchaser_name,
|
||||
phone: formData.phone,
|
||||
is_default: formData.is_default,
|
||||
id: formData.id
|
||||
});
|
||||
if(result.success){
|
||||
Taro.eventCenter.trigger("weightList:refresh");
|
||||
Taro.navigateBack();
|
||||
alert.success("保存成功");
|
||||
}else{
|
||||
alert.error(result.msg);
|
||||
}
|
||||
}).catch((message)=>{
|
||||
alert.none(message)
|
||||
})
|
||||
}
|
||||
// 监听表单完善
|
||||
const [hozon, setHozon] = useState(false);
|
||||
useEffect(()=>{
|
||||
if(retrieval){
|
||||
retrieval(formData).then(()=>setHozon(true)).catch(()=>setHozon(false))
|
||||
}
|
||||
},[formData])
|
||||
|
||||
return (
|
||||
<View className="certification">
|
||||
<Message text="认证不通过,原因:xxx,请重新认证"/>
|
||||
<View className="certification-content">
|
||||
<View className="certification-title">企业认证</View>
|
||||
<FromListCertification type="select" onInput={(ev:any)=>setFormData({...formData,title:ev.detail.value})}
|
||||
value={formData["title"]} label="认证类型" placeholder="企业认证"/>
|
||||
<FromListCertification onInput={(ev:any)=>setFormData({...formData,title:ev.detail.value})} value={formData["title"]} label="企业名称" placeholder="请输入营业执照上的企业名称" required/>
|
||||
<FromListCertification style={{border: "0"}} onInput={(ev:any)=>setFormData({...formData,title:ev.detail.value})} value={formData["title"]} label="企业营业" placeholder="注册号、统一社会信用代码、组织机构代码" required/>
|
||||
<View className="certification-upload">
|
||||
{/* <Text>营业执照正面</Text>
|
||||
<View className="certification-button">
|
||||
<View>查看证件</View>
|
||||
<View>重新上传</View>
|
||||
</View> */}
|
||||
<View className="certification-upload-no">
|
||||
<View className="certification-upload-no-icon">+</View>
|
||||
<View className="certification-upload-no-tips">上传营业执照下面</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className="certification-content">
|
||||
<View className="certification-title">法人认证</View>
|
||||
<FromListCertification onInput={(ev:any)=>setFormData({...formData,title:ev.detail.value})} value={formData["title"]} label="法人代表" placeholder="填写法人名称" required/>
|
||||
<FromListCertification style={{border: "0"}} onInput={(ev:any)=>setFormData({...formData,title:ev.detail.value})} value={formData["title"]} label="法人身份" placeholder="填写法人代表身份证号" required/>
|
||||
<View className="certification-upload">
|
||||
<Text>身份证正面</Text>
|
||||
<View className="certification-button">
|
||||
<View>查看证件</View>
|
||||
<View>重新上传</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className="certification-upload">
|
||||
<Text>身份证反面</Text>
|
||||
<View className="certification-button">
|
||||
<View>查看证件</View>
|
||||
<View>重新上传</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className="certification-footer">
|
||||
<View className="certification-footer-button">
|
||||
<View>取消</View>
|
||||
<View>提交</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
@ -162,7 +162,7 @@ const Progress = (props)=>{
|
||||
},[props.progress])
|
||||
const getCanvas = ()=>{
|
||||
// const percentage = props.progress??0;
|
||||
const percentage = props.progress;
|
||||
const percentage = props.progress||0;
|
||||
const query = Taro.createSelectorQuery();
|
||||
query.select("#myCanvas").fields({ node: true, size: true }).exec((res) => {
|
||||
const canvas = res[0]?.node;
|
||||
@ -235,7 +235,7 @@ const Progress = (props)=>{
|
||||
gad2.addColorStop(0, props.style?.cir?.background?.end[0]);
|
||||
gad2.addColorStop(1, props.style?.cir?.background?.start[1]);
|
||||
ctx.strokeStyle = gad2;
|
||||
ctx.arc(0,0,104,Math.PI*0.5,2*Math.PI/100*(percentage-25), false);
|
||||
ctx.arc(0,0,104,Math.PI*0.4,2*Math.PI/100*(percentage-25), false);
|
||||
ctx.stroke();
|
||||
}
|
||||
}else{
|
||||
|
@ -1,6 +1,8 @@
|
||||
.main{
|
||||
background-color: #F8F8F8;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.header{
|
||||
background: #68b4ff;
|
||||
background-size: cover;
|
||||
@ -24,7 +26,7 @@
|
||||
}
|
||||
.card-info{
|
||||
display: flex;justify-content: space-between;
|
||||
position: absolute;top: -16%;left: 0;right: 0;
|
||||
position: absolute;top: -15%;left: 0;right: 0;
|
||||
width: 702px;
|
||||
padding: 0 30px;
|
||||
box-sizing: border-box;
|
||||
@ -55,21 +57,21 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.arcd-info-left-certification{
|
||||
width: 94px;
|
||||
height: 28px;
|
||||
background: #C7F0DF;
|
||||
border-radius: 4px;
|
||||
display: flex;align-items: center;justify-content: center;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #07C160;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.arcd-info-left-phone{
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #3c3c3c;
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
color: #707070;
|
||||
}
|
||||
.arcd-info-left-phone button{
|
||||
padding: 0 10px;
|
||||
height: 42px;
|
||||
background: #ffffff;
|
||||
border: 2px solid #cde5ff;
|
||||
border-radius: 20px;
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
color: #007aff;
|
||||
display: flex;align-items: center;justify-content: center;
|
||||
}
|
||||
.card-info-right{
|
||||
font-size: 26px;
|
||||
@ -105,6 +107,9 @@
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
color: #ababab;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
width: 150px;
|
||||
}
|
||||
.card-main-title-content{
|
||||
display: grid;
|
||||
@ -172,6 +177,9 @@
|
||||
.main-card{
|
||||
margin: 131px auto 0;
|
||||
}
|
||||
.card-feature{
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.card-main-list-content-item{
|
||||
display: flex;align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -213,6 +221,8 @@
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
color: #007aff;
|
||||
width: 150px;
|
||||
text-align: right;
|
||||
}
|
||||
.auth-tips text{
|
||||
font-size: 17px;
|
||||
|
@ -4,31 +4,46 @@ import styles from './index.module.scss'
|
||||
import classnames from "classnames";
|
||||
import { useSelector } from "@/reducers/hooks";
|
||||
import { GetAdminUserInfoApi } from "@/api/user";
|
||||
import { goLink } from "@/common/common";
|
||||
import { alert, goLink } from "@/common/common";
|
||||
|
||||
|
||||
export default () => {
|
||||
// 用户信息
|
||||
const { fetchData, state } = GetAdminUserInfoApi();
|
||||
const {adminUserInfo, userInfo} = useSelector(state => state.userInfo);
|
||||
const [mUserInfo, setMUserInfo] = useState({
|
||||
phone: ""
|
||||
});
|
||||
const getData = ()=>{
|
||||
fetchData();
|
||||
}
|
||||
useEffect(()=>{
|
||||
setMUserInfo({
|
||||
...mUserInfo,
|
||||
// phone: userInfo?.phone?.replace(userInfo?.phone?.substring(3,7), "****") as string
|
||||
})
|
||||
getData();
|
||||
},[]);
|
||||
|
||||
return (
|
||||
<View className={styles.main}>
|
||||
<Header />
|
||||
<Header data={adminUserInfo} userInfo={userInfo} />
|
||||
<Assets />
|
||||
<Main />
|
||||
<Modal/>
|
||||
<Modal data={adminUserInfo}/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
const Modal = ()=>{
|
||||
const handleContent = ()=>{
|
||||
console.log(111);
|
||||
|
||||
}
|
||||
const Modal = memo((props:any)=>{
|
||||
const {data} = props;
|
||||
const handleouter = ()=>{
|
||||
console.log(222);
|
||||
|
||||
}
|
||||
return(
|
||||
<View style={{display: "none"}} onClick={handleouter} className={styles['modal']}>
|
||||
<>
|
||||
{!data?.is_authorize_phone&&
|
||||
<View onClick={handleouter} catchMove className={styles['modal']}>
|
||||
<View className={styles['modal-content']} onClick={e=>e.stopPropagation()}>
|
||||
<View className={styles['modal-title']}>首次登录提醒</View>
|
||||
<View className={styles['modal-letter']}>
|
||||
@ -42,29 +57,24 @@ const Modal = ()=>{
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
// 头部 | 订单
|
||||
const Header = memo(() => {
|
||||
const Header = memo((props:any) => {
|
||||
const {data, userInfo} = props;
|
||||
let menu = [{ text: "待配布", icon: "icon-daipeibu" }, { text: "待付款", icon: "icon-daifukuan" },
|
||||
{ text: "待发货", icon: "icon-daifahuo" }, { text: "已发货", icon: "icon-yifahuo" },
|
||||
{ text: "退款/售后", icon: "icon-a-tuikuanshouhou" }];
|
||||
// 用户信息
|
||||
const { fetchData, state } = GetAdminUserInfoApi();
|
||||
const {userInfo} = useSelector(state => state.userInfo);
|
||||
const [mUserInfo, setMUserInfo] = useState({
|
||||
phone: ""
|
||||
});
|
||||
const getData = ()=>{
|
||||
fetchData();
|
||||
const getPhoneNumber = (ev)=>{
|
||||
console.log(ev);
|
||||
if(ev.detail?.code){
|
||||
}else{
|
||||
alert.none("取消了授权");
|
||||
}
|
||||
}
|
||||
useEffect(()=>{
|
||||
setMUserInfo({
|
||||
...mUserInfo,
|
||||
phone: userInfo?.phone?.replace(userInfo?.phone?.substring(3,7), "****") as string
|
||||
})
|
||||
getData();
|
||||
},[])
|
||||
|
||||
return (
|
||||
<View className={styles.header}>
|
||||
@ -72,17 +82,16 @@ const Header = memo(() => {
|
||||
<View className={styles['card-info']}>
|
||||
<View className={styles['arcd-info-left']}>
|
||||
<View className={styles['arcd-info-left-portrait']}>
|
||||
<Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-2-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652840455&t=6d2fd53931578ef6e213a929a77d059c" />
|
||||
<Image src={data?.avatar_url} />
|
||||
</View>
|
||||
<View className={styles['arcd-info-left-desc']}>
|
||||
<View className={styles['arcd-info-left-nickname']}>
|
||||
{/* {state.data.user_name} */}
|
||||
麦兜
|
||||
<View className={styles['arcd-info-left-certification']}>
|
||||
已认证
|
||||
</View>
|
||||
{data?.user_name}
|
||||
</View>
|
||||
<View className={styles['arcd-info-left-phone']}>
|
||||
{userInfo?.phone||<Button openType="getPhoneNumber" onGetPhoneNumber={getPhoneNumber}>绑定手机号码</Button>}
|
||||
</View>
|
||||
<View className={styles['arcd-info-left-phone']}>佛山市带生纺织品有限公司</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles['card-info-right']}>
|
||||
@ -102,7 +111,7 @@ const Header = memo(() => {
|
||||
<Text>1</Text>
|
||||
认证不通过
|
||||
</View>
|
||||
<View className={styles['auth-tips']}>重新认证 <Text className="iconfont icon-a-moreback"/></View>
|
||||
<Navigator hoverClass="none" url="/pages/certification/index" className={styles['auth-tips']}>重新认证 <Text className="iconfont icon-a-moreback"/></Navigator>
|
||||
</View>
|
||||
<View className={styles['auth-company']}>
|
||||
佛山市带生纺织品有限公司
|
||||
@ -169,15 +178,16 @@ const Assets = () => {
|
||||
|
||||
// 功能
|
||||
const Main = memo(() => {
|
||||
let menu = [{ text: "我的收藏", icon: "icon-shoucang" }, { text: "颜色对比", icon: "icon-yanseduibi" },
|
||||
let menu = [{ text: "地址管理", icon: "icon-shoucang",url: "/pages/addressManager/index" },{ text: "码单管理", icon: "icon-shoucang",url: "/pages/weightList/index" },
|
||||
{ text: "我的收藏", icon: "icon-shoucang" }, { text: "颜色对比", icon: "icon-yanseduibi" },
|
||||
{ text: "分享推广", icon: "icon-fenxiang" }, { text: "团队邀请", icon: "icon-yaoqingtuandui" }]
|
||||
return (
|
||||
<View className={`${styles.crad} ${styles['card-main']}`}>
|
||||
<View className={`${styles.crad} ${styles['card-main']} ${styles['card-feature']}`}>
|
||||
<View className={styles['card-main-list-content']}>
|
||||
{
|
||||
menu.map((item, index) => {
|
||||
return (
|
||||
<View key={index} className={styles['card-main-list-content-item']}>
|
||||
<Navigator hoverClass="none" url={item.url} key={index} className={styles['card-main-list-content-item']}>
|
||||
<View className={styles['card-main-list-content-item-left']}>
|
||||
<Text className={`iconfont ${item.icon}`}></Text>
|
||||
<View>{item.text}</View>
|
||||
@ -185,7 +195,7 @@ const Main = memo(() => {
|
||||
<View className={styles['card-main-list-content-item-right']}>
|
||||
<Text className="iconfont icon-a-moreback"></Text>
|
||||
</View>
|
||||
</View>
|
||||
</Navigator>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
@ -7,7 +7,6 @@
|
||||
color: #ababab;
|
||||
display: flex;flex-direction: column;
|
||||
align-items: center;justify-content: center;
|
||||
margin-bottom: 24px;
|
||||
background-color: white;
|
||||
height: 300px;
|
||||
}
|
||||
@ -22,8 +21,18 @@
|
||||
|
||||
.user-edit-content{
|
||||
background-color: white;
|
||||
margin-top: 24px;
|
||||
padding: 0 30px;
|
||||
}
|
||||
.user-edit-content-title{
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
padding: 40px;
|
||||
}
|
||||
.user-edit-content-title text{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.user-edit-list{
|
||||
height: 90px;
|
||||
display: flex;align-items: center;
|
||||
@ -60,7 +69,9 @@
|
||||
background: #ffffff;
|
||||
border: 2px solid #cde5ff;
|
||||
border-radius: 40px;
|
||||
margin: 359px auto 0;
|
||||
// margin: 359px auto 0;
|
||||
position: fixed;left: 50%;bottom: 50px;
|
||||
transform: translateX(-50%);
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
|
@ -74,12 +74,18 @@ export default ()=>{
|
||||
<View>点击编辑头像</View>
|
||||
</View>
|
||||
<View className="user-edit-content">
|
||||
<View className="user-edit-content-title"><Text/> 个人资料</View>
|
||||
<UserEditList onClick={()=>triggerList('real_name')} data={state.data.user_name} label="昵称" placeholder="请输入" icon=""/>
|
||||
<UserEditList onClick={()=>onNavigate("/pages/company/index")} label="公司/组织" placeholder="请输入" icon=""/>
|
||||
<UserEditList onClick={()=>onNavigate("/pages/addressManager/index")} label="地址管理" placeholder="添加 / 修改收货地址" icon=""/>
|
||||
<UserEditList onClick={()=>onNavigate("/pages/weightList/index")} label="码单管理" placeholder="修改码单抬头 / 客户 / 电话等显示信息" icon=""/>
|
||||
<UserEditList label="完善资料" placeholder="完善资料加入会员,申请更多优惠" icon=""/>
|
||||
<UserEditList label="账号解绑" placeholder="解除账号与所属公司/组织的绑定关系" icon=""/>
|
||||
<UserEditList onClick={()=>onNavigate("/pages/company/index")} label="手机号" placeholder="去绑定" icon=""/>
|
||||
</View>
|
||||
<View className="user-edit-content">
|
||||
<View className="user-edit-content-title"><Text/> 组织资料</View>
|
||||
<UserEditList onClick={()=>triggerList('real_name')} data={state.data.user_name} label="名称" placeholder="待绑定" icon=""/>
|
||||
<UserEditList onClick={()=>onNavigate("/pages/company/index")} label="类型" placeholder="完善公司/组织信息" icon=""/>
|
||||
<UserEditList onClick={()=>onNavigate("/pages/certification/index")} label="我的认证" placeholder="待绑定" icon="">
|
||||
已认证
|
||||
</UserEditList>
|
||||
<UserEditList onClick={()=>onNavigate("/pages/weightList/index")} label="创建人" placeholder="完善公司/组织信息" icon=""/>
|
||||
</View>
|
||||
<Button hoverClass="none" className="user-edit-logout">退出当前账号</Button>
|
||||
|
||||
@ -98,6 +104,7 @@ const UserEditList = memo((props:any)=>{
|
||||
<View className="user-edit-list-right">
|
||||
<View>
|
||||
{
|
||||
props.children?props.children:
|
||||
props.data?props.data:
|
||||
<View className="user-edit-list-right-placeholder">{props.placeholder}</View>
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user