Merge branch 'dev' of ssh://git.online.zzfzyc.com:10022/mp/EShop into 样式对比

This commit is contained in:
Haiyi
2022-06-27 19:07:26 +08:00
143 changed files with 6230 additions and 1886 deletions
+3 -3
View File
@@ -55,9 +55,9 @@ export default ()=>{
const rules = {
name: [{
message: "请输入正确收货人姓名",
validator: (value:any, rule:any)=>{ // 自定义验证,返回true表示匹配到了(错误)
return value.length>5;
}
// validator: (value:any, rule:any)=>{ // 自定义验证,返回true表示匹配到了(错误)
// return value.length>5;
// }
}],
phone: [{
message: "请输入正确的电话号码", regex: /^1[3|5|6|9|2|8|7]\d{9}$/
@@ -0,0 +1,64 @@
.apply_after_sales_list{
padding: 0 20px;
.apply_after_sales_item{
margin-bottom: 50px;
.apply_after_sales_title{
display: flex;
align-items: center;
.tag{
font-size: $font_size_min;
background-color: #CDE5FF;
padding: 5px 10px;
border-radius: 6px;
color: $color_main;
}
.title{
font-weight: 700;
font-size: $font_size;
margin-left: 20px;
flex:1;
}
}
.color_list {
.color_item{
display: flex;
align-items: center;
margin: 30px 0;
}
.image{
width: 70px;
height: 70px;
image{
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.name_and_number{
padding-left: 30px;
flex:1;
text{
&:nth-child(1) {
font-weight: 700;
font-size: $font_size;
}
&:nth-child(2) {
color: $color_font_two;
font-size: $font_size;
margin-left: 20px;
}
}
}
.btn_count{
width: 216px;
height: 64px;
background-color: #ECF5FF;
border-radius: 40px 0px 16px 0px;
padding: 0 20px;
display: flex;
align-items: center;
}
}
}
}
@@ -0,0 +1,71 @@
import { formatHashTag, formatImgUrl } from "@/common/fotmat";
import Counter from "@/components/counter";
import MCheckbox from "@/components/checkbox";
import { Image, Text, View } from "@tarojs/components";
import { FC, memo, useCallback } from "react";
import styles from './index.module.scss'
type OrderParam = {
list?: any[],
sale_mode?: number,
sale_mode_name?: string,
unit?: string,
total_colors?: number,
total_fabrics?: number,
total_number?: number,
status?: number, //订单状态
}
type Param = {
order: OrderParam,
onNumChange?: (val:any) => void
onSelectChange?: (val: {color_id:number, length: number, status: true|false}) => void
}
const kindeList:FC<Param> = memo(({order, onNumChange, onSelectChange}) => {
//对应数量
const formatCount = useCallback((item) => {
return (order?.sale_mode == 0? item.roll : Number(item.length / 100)) + order?.unit
}, [order])
//计步器失返回值
const getCounterChange = useCallback((colorItem) => {
return (number) => {
onNumChange?.({number, color_id: colorItem.id})
}
}, [])
//checkbox选中回调
const selectCallBack = (colorItem) => {
console.log('colorItem::',colorItem)
onSelectChange?.({color_id:colorItem.id, length:colorItem.length, status: true})
}
//checkbox关闭回调
const colseCallBack = (colorItem) => {
onSelectChange?.({color_id:colorItem.id, length:colorItem.length, status: false})
}
return (
<View className={styles.apply_after_sales_list}>
{order?.list?.map(item => <View className={styles.apply_after_sales_item}>
<View className={styles.apply_after_sales_title}>
<View className={styles.tag}>{order.sale_mode_name}</View>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
</View>
<View className={styles.color_list}>
{item.product_colors.map(colorItem => <View className={styles.color_item}>
<View className={styles.image}><Image src={formatImgUrl('')}/></View>
<View className={styles.name_and_number}><Text>{colorItem.code + ' ' + colorItem.name}</Text><Text>x {formatCount(colorItem)}</Text></View>
{(order.sale_mode == 0)&&<View className={styles.btn_count}>
<Counter maxNum={colorItem.roll} onChange={getCounterChange(colorItem)}/>
</View>||
<MCheckbox status={item.select} onSelect={() => selectCallBack(colorItem)} onClose={() => colseCallBack(colorItem)}/>}
</View>)}
</View>
</View>)}
</View>
)
})
export default kindeList
@@ -0,0 +1,36 @@
.other_desc{
padding: 0 20px;
box-sizing: border-box;
.title{
font-size: $font_size;
font-weight: 700;
}
.textarea{
position: relative;
height: 165.4px;
.descDataNum{
position: absolute;
right: 10px;
bottom: 10px;
font-size: 22px;
color: #ABABAB;
}
}
.textarea_con, .textarea_con_pretend{
background-color: #f3f3f3;
border: 2px solid #e6e6e6;
border-radius: 10px;
width: 100%;
font-size: 25px;
height: 165.4px;
padding: 20px 20px 30px 20px;
box-sizing: border-box;
margin-top: 20px;
}
.textarea_con_pretend{
color: $color_font_two;
}
.textarea_con_pretend_ed{
color: #000;
}
}
@@ -0,0 +1,41 @@
import {Textarea, View } from "@tarojs/components";
import { memo, useMemo, useState } from "react";
import styles from './index.module.scss'
import classnames from "classnames";
//其他说明
type Param = {
onChange: (val: string) => void
}
export default memo(({onChange}:Param) => {
const [descData, setDescData] = useState({
number: 0,
value: '',
count: 200,
show: false
})
const getDesc = (e) => {
let value = e.detail.value
let res = value
if(value.length > descData.count) {
res = value.slice(0, descData.count)
}
setDescData({...descData, number:res.length, value: res})
onChange?.(res)
}
const toggleShowRealTextarea = (show) => {
setDescData({...descData, show:show})
}
return (
<View className={styles.other_desc}>
<View className={styles.title}>其他说明</View>
<View className={styles.textarea}>
{descData.show&&<Textarea autoFocus value={descData.value} onBlur={() => toggleShowRealTextarea(false)} className={styles.textarea_con} cursorSpacing={100} maxlength={descData.count} onInput={(e) => getDesc(e)}></Textarea>||
<View className={classnames(styles.textarea_con_pretend, descData.value&&styles.textarea_con_pretend_ed)} onClick={() => toggleShowRealTextarea(true)}>{descData.value||'一般情况下选填,当退货说明=“其它问题”时,必填'}</View>
}
<View className={styles.descDataNum}>{descData.number +'/'+ descData.count}</View>
</View>
</View>
)
})
@@ -0,0 +1,27 @@
.reason_return_con{
height: 50vh;
.reason_title{
padding: 10px 20px 0 20px;
height: 60px;
border-bottom: 1PX solid #F3F3F3;
box-sizing: border-box;
Text{
font-size: 26px;
border-bottom: 3px solid #000;
padding: 10px;
font-weight: 400;
}
}
.reason_scroll{
height: calc(100% - 70px);
.reason_list{
font-size: 26px;
padding: 30px 20px 0 20px;
color: #707070;
.reason_item{
margin-bottom: 36px;
}
}
}
}
@@ -0,0 +1,27 @@
import Popup from "@/components/popup";
import { ScrollView, Text, View } from "@tarojs/components";
import { memo, useMemo } from "react";
import styles from './index.module.scss'
//原因选择
type ReasonInfoParam = {
show?: boolean,
onClose?: () => void,
title?: string,
list?: {id:number, name:string}[]
}
export default memo(({show = false, onClose, title = '', list= []}: ReasonInfoParam) => {
return (
<Popup showIconButton={false} show={show} title={title} onClose={onClose} >
<View className={styles.reason_return_con}>
<View className={styles.reason_title}><Text>{title}</Text></View>
<ScrollView scrollY className={styles.reason_scroll}>
<View className={styles.reason_list}>
{list.map(item => <View key={item.id} className={styles.reason_item}>{item.name}</View> )}
</View>
</ScrollView>
</View>
</Popup>
)
})
@@ -0,0 +1,4 @@
export default {
navigationBarTitleText: '申请售后',
enableShareAppMessage: true,
}
+107
View File
@@ -0,0 +1,107 @@
.apply_after_sales_main{
.apply_after_sales_head{
font-size: 30px;
text-align: center;
padding: 20px 0;
font-weight: 700;
}
.kind_number{
width: 100%;
padding: 20px;
box-sizing: border-box;
border-bottom: 1PX solid #f3f3f3;
text{
background-color: #F6F6F6;
border-radius: 10px;
font-size: $font_size_medium;
padding: 5px 0;
text-align: center;
width: 100%;
display: block;
color: $color_font_three;
}
}
.apply_after_sales_con{
.scroll{
height: calc(100% - 170px);
}
.scroll_con{
padding: 20px 0 150px 0;
}
.returnSaleInput{
margin: 0 20px;
padding-top: 30px;
border-top: 1px solid #F6F6F6;
.returnSaleInput_item{
display: flex;
align-items: center;
padding-bottom: 30px;
flex-wrap: wrap;
.title{
font-size: $font_size;
font-weight: 700;
width: 119px;
}
.select{
flex:1;
height: 60px;
border: 2px solid #e6e6e6;
border-radius: 10px;
margin-left: 20px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
font-size: 26px;
color: $color_font_two;
.miconfont{
font-size: 30px;
}
}
.upload_image{
flex:1;
}
}
}
}
.btns_con{
width: 100%;
position: fixed;
bottom:0;
padding: 0 20px;
box-sizing: border-box;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.btns_two{
display: flex;
height: 82px;
// border: 1PX solid #007aff;
font-size: $font_size_big;
border-radius: 40px;
margin-bottom: 20px;
.rest_btn{
flex:1;
border: 1PX solid #007aff;
border-radius: 40px 0 0 40px;
text-align: center;
line-height: 82px;
color: $color_main;
background-color: #fff;
}
.verify_btn{
flex:1;
border-radius: 0 40px 40px 0;
background: #007aff;
text-align: center;
line-height: 82px;
color: #fff;
}
}
}
}
+211
View File
@@ -0,0 +1,211 @@
import { Image, ScrollView, Text, View } from "@tarojs/components";
import { FC, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import classnames from "classnames";
import styles from './index.module.scss'
import ReasonPopup from "./components/reasonPopup";
import OtherReason from "./components/otherReason";
import { useDidShow, useRouter } from "@tarojs/taro";
import { GetSaleOrderDetailApi } from "@/api/order";
import KindList from "./components/kindList"
import { ReturnApplyOrderApi, ReturnGoodsStatusApi } from "@/api/salesAfterOrder";
import { alert, goLink } from "@/common/common";
import UploadImage from "@/components/uploadImage"
import TextareaEnhance from "@/components/textareaEnhance";
type ReasonParam = 1|2|3 //1 退货原因 2 货物状况 3 退货说明
export default () => {
useDidShow(() => {
getSaleOrderPreView()
})
const router = useRouter()
const orderId = useRef<number>(Number(router.params.id))
//需要提交的数据
const [submitData, setSubmitData] = useState<any>({
fabric_piece_accessory_url: [],
goods_status: 0,
reason_describe: '',
return_explain: 0,
return_reason: 1,
roll: 0,
roll_list: [],
sale_order_id: orderId.current
})
//获取订单数据
const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi()
const getSaleOrderPreView = async () => {
if(orderId.current) {
let res = await getOrderFetchData({id: orderId.current})
setOrderDetail(res.data)
}
}
//监听获取到的数据
useEffect(() => {
if(orderDetail) {
formatData()
}
}, [orderDetail])
//格式化数据格式
const [formatDetailOrder, setFormatDetailOrder] = useState<any>() //格式化后的数据
const formatData = () => {
setFormatDetailOrder({
sale_mode: orderDetail.sale_mode,
sale_mode_name: orderDetail.sale_mode_name,
total_colors: orderDetail.total_colors, //总颜色数量
total_number: orderDetail.total_number, //总数量
total_fabrics: orderDetail.total_fabrics, //面料数量
unit: orderDetail.sale_mode == 0?'条':'m', //单位
list: orderDetail.product_list,
status: orderDetail.status, //订单状态
})
}
//数据总量
const dataCount = useMemo(() => {
if(formatDetailOrder) {
return `${formatDetailOrder.total_fabrics}种面料,${formatDetailOrder.total_colors}种颜色,共${formatDetailOrder.total_number}条`
}
}, [formatDetailOrder])
//退货选择弹窗
const [showReason, setShowReason] = useState<{show:true|false, title: string}>({show:false, title: ''})
const closeReason = useCallback(() => setShowReason({...showReason, show:false}), [])
const onShowReason = (status) => {
setShowReason({...showReason, show:true})
}
//面料数据
let roll_list = useRef({})
//大货时获取计步器数据
const getNumChange = useCallback((val) => {
if(parseInt(val.number) > 0) {
roll_list.current[val.color_id] = {product_color_id: val.color_id, product_roll: val.number}
} else {
delete roll_list.current[val.color_id]
}
let count = 0
Object.values(roll_list.current).map((item: any) => {
count += item.product_roll
})
setSubmitData((e) => ({...e, roll_list:Object.values(roll_list.current), roll: count}))
}, [])
//散剪和剪板
const getSelectChange = useCallback((val) => {
console.log('val::', val)
if(val.status) {
roll_list.current[val.color_id] = {product_color_id: val.color_id, product_roll: val.length}
} else {
delete roll_list.current[val.color_id]
}
let count = 0
Object.values(roll_list.current).map((item: any) => {
count += item.product_roll
})
setSubmitData((e) => ({...e, roll_list:Object.values(roll_list.current), roll: count}))
}, [])
//获取图片列表
const getImageList = useCallback((list) => {
setSubmitData((e) => ({...e, fabric_piece_accessory_url:list}))
}, [])
//其他说明
const getOtherReason = useCallback((val) => {
setSubmitData((e) => ({...e, reason_describe: val}))
}, [])
//提交数据
const {fetchData: fetchDataReturnApply} = ReturnApplyOrderApi()
const onSubmitData = async () => {
if(submitData.roll_list.length <= 0) return alert.error('请选择退货颜色')
let res = await fetchDataReturnApply(submitData)
if(res.success) {
alert.success('申请成功')
goLink('/pages/salesAfterList/index',{}, 'reLaunch')
} else {
alert.error('申请失败')
}
console.log('提交::',submitData)
}
//底部按钮
const onSubmit = (val) => {
if(val == 2) {
onSubmitData()
}
}
const [returnGoodsInfo, setReturnGoodsInfo] = useState<{title:string, list: any[]}>({title:'', list:[]})
//售后货物状况
const {fetchData: fetchDataGoodsStatus} = ReturnGoodsStatusApi()
const getReturnGoodsStatus = async () => {
let res = await fetchDataGoodsStatus()
setReturnGoodsInfo((e) => ({...e, title: '售后货物状况', list:res.data?.list||[]}))
}
useEffect(() => {
getReturnGoodsStatus()
}, [])
return (
<View className={styles.apply_after_sales_main}>
<View className={styles.apply_after_sales_con}>
<View className={styles.kind_number}><Text>{dataCount}</Text></View>
<ScrollView scrollY className={styles.scroll}>
<View className={styles.scroll_con}>
<KindList order={formatDetailOrder} onNumChange={getNumChange} onSelectChange={getSelectChange}/>
<View className={styles.returnSaleInput}>
<View className={styles.returnSaleInput_item}>
<View className={styles.title}>退货原因</View>
<View className={styles.select} onClick={() => onShowReason(1)}>
<Text>请选择</Text>
<Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
</View>
</View>
<View className={styles.returnSaleInput_item}>
<View className={styles.title}>货物状况</View>
<View className={styles.select} onClick={() => onShowReason(2)}>
<Text>请选择</Text>
<Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
</View>
</View>
<View className={styles.returnSaleInput_item}>
<View className={styles.title}>退货说明</View>
<View className={styles.select} onClick={() => onShowReason(3)}>
<Text>请选择</Text>
<Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
</View>
</View>
<View className={styles.returnSaleInput_item}>
<View className={styles.title}>拍照上传</View>
<View className={styles.upload_image}>
<UploadImage onChange={getImageList}/>
</View>
</View>
<TextareaEnhance onChange={getOtherReason} title='其他说明'/>
</View>
</View>
</ScrollView>
<View className="common_safe_area_y"></View>
</View>
<View className={styles.btns_con}>
<View className={styles.btns_two}>
<View className={styles.rest_btn} onClick={() => onSubmit(1)}>取消</View>
<View className={styles.verify_btn } onClick={() => onSubmit(2)}>确认</View>
</View >
</View >
<ReasonPopup show={showReason.show} onClose={closeReason} title={returnGoodsInfo.title} list={returnGoodsInfo.list}/>
</View>
)
}
@@ -0,0 +1,22 @@
.select-enterprise-type{
.select-enterprise-type-btn{
color: #ABABAB;
font-size: 28px;
padding: 20px;
display: flex;justify-content: space-between;
border-bottom: 1rpx solid #eaeaea;
}
.select-enterprise-type-content{
padding: 0 20px;
padding-bottom: 120px;
}
.select-enterprise-type-content view{
padding: 20px 0;
font-size: 28px;
display: flex;justify-content: space-between;
}
.select-enterprise-type-content view text:last-child{
color: #007AFF;
font-size: 35px;
}
}
@@ -0,0 +1,56 @@
import { Text, View } from "@tarojs/components"
import Popup from "@/components/popup";
import "./SelectEnterpriseType.scss"
import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
import {certificationTypeListApi} from "@/api/certification"
interface Params{
confirm?: (selected:any)=>void, // 确定
}
export default forwardRef((props: Params, ref)=>{
const [modalShow, setModalShow] = useState(false)
// 获取认证信息
const {fetchData, state} = certificationTypeListApi();
useEffect(()=>{
fetchData();
}, [])
const [selected, setSelected] = useState({});
// 确定
const handleSelect = (item)=>{
setSelected(item);
}
// 设置弹窗是否显示
const setShow = (ev)=>{
setModalShow(ev);
}
useImperativeHandle(ref,()=>({
setShow
}))
// 确定
const handleConfirm = ()=>{
props.confirm&&props.confirm(selected);
setModalShow(false);
}
return (
<View className="select-enterprise-type">
<Popup showTitle={false} show={modalShow} onClose={() => setModalShow(false)}>
<View className="select-enterprise-type-btn">
<View onClick={() => setModalShow(false)}>取消</View>
<View onClick={handleConfirm}>确定</View>
</View>
<View className="select-enterprise-type-content">
{
state.data?.list?.map((item,index)=>{
return <View onClick={()=>handleSelect(item)} key={index}>
<Text>{item.name}</Text>
{item.id==(selected as any).id?<Text className="iconfont icon-tick"/>:<Text/>}
</View>
})
}
</View>
</Popup>
</View>
)
})
+13 -2
View File
@@ -16,6 +16,7 @@
margin-left: 30px;
padding-top: 40px;
color: #000000;
padding-bottom: 20px;
// border-top: 18px solid #F0F0F0;
}
.certification-upload{
@@ -38,6 +39,10 @@
.certification-upload-no{
display: flex;flex-direction: column;align-items: center;
}
.certification-upload image{
position: absolute;width: 100%;height: 100%;
object-fit: cover;border-radius: 30px;
}
.certification-upload-no-icon{
width: 104px;
height: 104px;
@@ -56,10 +61,11 @@
}
.certification-button{
position: absolute;bottom: -10px;left: -10px;right: -10px;
background-color: #858A8F;
background-color: rgba(0,0,0,0.65);
display: flex;
height: 86px;
border-radius: 0 0 30px 30px;
z-index: 1;
}
.certification-button view{
flex: 1;
@@ -79,6 +85,7 @@
position: fixed;bottom: 0;left: 0;right: 0;
width: 100%;
display: flex;align-items: center;justify-content: center;
z-index: 2;
}
.certification-footer-button{
width: 696px;
@@ -90,12 +97,16 @@
box-sizing: border-box;
overflow: hidden;
}
.certification-footer-button view{
.certification-footer-button view,.certification-footer-button navigator{
flex: 1;
display: flex;align-items: center;justify-content: center;
font-size: 32px;
font-weight: 400;
color: #007aff;
border: 0;border-radius: none;
}
.certification-footer-button navigator::after{
border: 0;border-radius: none;
}
.certification-footer-button view:last-child{
color: white;
+154 -91
View File
@@ -1,133 +1,196 @@
import FromListCertification from "@/components/FromListCertification"
import { Button, Input, Text, Textarea, View } from "@tarojs/components"
import { Button, Image, Input, NavigationBar, Navigator, 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 { certificationSaveApi, certificationDetailApi } from "@/api/certification"
import { useEffect, useRef, useState } from "react"
import { alert, retrieval } from "@/common/common"
import "./index.scss"
import useUploadCDNImg from "@/use/useUploadImage";
import Message from "@/components/Message"
import { IMG_CND_Prefix } from "@/common/constant";
import SelectEnterpriseType from "./components/SelectEnterpriseType"
import { useSelector } from "@/reducers/hooks";
import useLogin from "@/use/useLogin";
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});
export default () => {
const { getAdminUserInfo } = useLogin();
const { adminUserInfo } = useSelector(state => state.userInfo);
useEffect(() => {
initalFormData();
}, []);
// 获取认证信息
const { fetchData: getFromData } = certificationDetailApi()
const initalFormData = async () => {
const detail = await getFromData();
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,
})
...detail.data ?? {},
legal_person_identity_url: detail?.data?.legal_person_identity_url ?? [],
// business_license_url: "https://test.cdn.zzfzyc.com/mall/827082e888860dd9da10f0fbb0ac3cf023081456.png"
} as any)
}
// 保存
const [formData, setFormData] = useState({
title: "",
purchaser_name: "",
phone: "",
is_default: false,
id: 0
})
authentication_type: 0,
authentication_type_name: "",
business_license_url: "",
legal_person: "",
legal_person_identity: "",
businessLicense: '',
legal_person_identity_url: [],
name: ""
});
const rules = {
title: [{
message: "请输入抬头"
authentication_type: [{
message: "请选择认证类型"
}],
purchaser_name: [{
message: "请输入客户名称"
name: [{
message: "请输入企业名称"
}],
business_license_url: [{
message: "请上传营业执照"
}],
legal_person: [{
message: "请输入法人名称"
}],
legal_person_identity: [{
message: "请输入正确法人身份证",
regex: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
}],
legal_person_identity_url: [{
message: "请上传法人身份证",
validator: (value: any, rule: any) => {
if (!value[0] || !value[1]) {
return true;
}
return false;
}
}],
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");
const { fetchData } = certificationSaveApi()
const handleSave = () => {
retrieval(formData, rules).then(async () => {
const result = await fetchData({ ...formData, authentication_type: 2 })
if (result.success) {
// Taro.eventCenter.trigger("weightList:refresh");
getAdminUserInfo();
Taro.navigateBack();
alert.success("保存成功");
}else{
} else {
alert.error(result.msg);
}
}).catch((message)=>{
}).catch((message) => {
alert.none(message)
})
}
// 监听表单完善
const [hozon, setHozon] = useState(false);
useEffect(()=>{
if(retrieval){
retrieval(formData).then(()=>setHozon(true)).catch(()=>setHozon(false))
useEffect(() => {
if (retrieval) {
retrieval(formData).then(() => setHozon(true)).catch(() => setHozon(false))
}
},[formData])
}, [formData])
// 选择类型弹窗显示
const selectTypeRef = useRef(null)
const handleSelectTypeModalShow = () => {
(selectTypeRef.current as any).setShow(true)
}
// 选择类型确定
const handleSelectTypeConfirm = (item) => {
setFormData({
...formData,
authentication_type: item.id,
authentication_type_name: item.name
});
}
// 上传图片
const { getWxPhoto } = useUploadCDNImg();
const handleUploadImage = async (text: any) => {
let result = await getWxPhoto('mall');
if (text == "business_license_url") {
formData.business_license_url = IMG_CND_Prefix + (result as any).url;
} else {
formData.legal_person_identity_url[text] = IMG_CND_Prefix + (result as any).url as never;
}
setFormData({ ...formData });
}
// 查看图片
const handleViewImage = (event, url) => {
event.stopPropagation();
Taro.previewImage({
current: url,
urls: [url]
})
}
return (
<View className="certification">
<Message text="认证不通过,原因:xxx,请重新认证"/>
{(adminUserInfo as any)?.authentication_status == 3 && <Message text={`认证不通过,原因:${(formData as any).authentication_feedback},请重新认证`} />}
<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>
{/* <FromListCertification type="select" onClick={handleSelectTypeModalShow} value={(formData as any)?.authentication_type_name} label="认证类型" placeholder="企业认证"/> */}
<SelectEnterpriseType ref={selectTypeRef} confirm={handleSelectTypeConfirm} />
<FromListCertification onInput={(ev: any) => setFormData({ ...formData, name: ev.detail.value })} value={formData["name"]} label="企业名称" placeholder="请输入营业执照上的企业名称" required />
{/* <FromListCertification type="select" style={{border: "0"}}label="企业营业执照" placeholder="注册号、统一社会信用代码、组织机构代码" required showIcon={false}/> */}
<FromListCertification onInput={(ev: any) => setFormData({ ...formData, businessLicense: ev.detail.value })} value={formData["businessLicense"]} style={{ border: "0" }} label="企业营业执照" placeholder="注册号、统一社会信用代码、组织机构代码" required />
<View onClick={() => handleUploadImage("business_license_url")} className="certification-upload">
{(formData as any)?.business_license_url ?
<>
<Text>营业执照正面</Text>
<View className="certification-button">
<View onClick={(e) => handleViewImage(e, (formData as any)?.business_license_url)}>查看证件</View>
<View>重新上传</View>
</View>
<Image mode="aspectFit" src={(formData as any)?.business_license_url} />
</> :
<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>
<FromListCertification onInput={(ev: any) => setFormData({ ...formData, legal_person: ev.detail.value })} value={formData["legal_person"]} label="法人代表" placeholder="填写法人名称" required />
<FromListCertification style={{ border: "0" }} onInput={(ev: any) => setFormData({ ...formData, legal_person_identity: ev.detail.value })} value={formData["legal_person_identity"]} label="法人身份" placeholder="填写法人代表身份证号" required />
<View onClick={() => handleUploadImage(0)} className="certification-upload">
{(formData as any)?.legal_person_identity_url[0] ?
<>
<Text>营业执照正面</Text>
<View className="certification-button">
<View onClick={(e) => handleViewImage(e, (formData as any)?.legal_person_identity_url[0])}>查看证件</View>
<View>重新上传</View>
</View>
<Image mode="aspectFit" src={(formData as any)?.legal_person_identity_url[0]} />
</> :
<View className="certification-upload-no">
<View className="certification-upload-no-icon">+</View>
<View className="certification-upload-no-tips">上传身份证正面</View>
</View>
}
</View>
<View className="certification-upload">
<Text>身份证反面</Text>
<View className="certification-button">
<View>查看证件</View>
<View>重新上传</View>
</View>
<View onClick={() => handleUploadImage(1)} className="certification-upload">
{(formData as any)?.legal_person_identity_url[1] ?
<>
<Text>营业执照正面</Text>
<View className="certification-button">
<View onClick={(e) => handleViewImage(e, (formData as any)?.legal_person_identity_url[1])}>查看证件</View>
<View>重新上传</View>
</View>
<Image mode="aspectFit" src={(formData as any)?.legal_person_identity_url[1]} />
</> :
<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-footer">
<View className="certification-footer-button">
<View>取消</View>
<View>提交</View>
<Navigator openType="navigateBack">取消</Navigator>
<View onClick={handleSave}>{[3, 4].includes((adminUserInfo as any)?.authentication_status) ? "重新认证" : "提交"}</View>
</View>
</View>
</View>
+4
View File
@@ -0,0 +1,4 @@
export default {
navigationBarTitleText: '我的收藏',
enableShareAppMessage: true,
}
+12
View File
@@ -0,0 +1,12 @@
import Search from "@/components/search"
import { View } from "@tarojs/components"
import styles from './index.module.scss'
export default () => {
return (
<View className={styles.main}>
<View className={styles.search}>
<Search style={{width: '100%'}} debounceTime={300} changeOnSearch={(e) => console.log(e)} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} />
</View>
</View>
)
}
-16
View File
@@ -5,22 +5,6 @@
width: 238px;
height: 238px;
}
.credit-line-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;
color: #EE7500;
}
.credit-line-tips text{
margin-right: 10px;
font-size: 30px;
}
.credit-line-card{
width: 702px;
background: #ffffff;
+4 -4
View File
@@ -7,6 +7,7 @@ import {creditInfoApi} from "@/api/creditLine"
import "./index.scss"
import { useSelector } from "@/reducers/hooks";
import { formatDateTime, formatPriceDiv } from "@/common/fotmat"
import Message from "@/components/Message"
export default ()=>{
@@ -41,7 +42,8 @@ export default ()=>{
const credit_quota_used_line = convertPrice(formatPriceDiv(result.data.credit_quota_used_line));
const credit_quota_line = convertPrice(formatPriceDiv(result.data.credit_quota_line));
const credit_quota_available_line = convertPrice(formatPriceDiv(result.data.credit_quota_available_line));
const progress = ((credit_quota_available_line[0]??0) / (credit_quota_line[0]??0) * 100).toFixed(0);
const progress = credit_quota_available_line[0]==0&&credit_quota_line[0]==0?100:((credit_quota_available_line[0]??0) / (credit_quota_line[0]??0) * 100).toFixed(0);
switch(Number(result.data.quota_status)){
case 0://暂未开通
@@ -120,9 +122,7 @@ export default ()=>{
return (
<View className="credit-line">
<View className="credit-line-tips">
<Text className="iconfont icon-zhuyi"></Text> 暂不支持线上申请授权,请联系平台客服。
</View>
<Message text="暂不支持线上申请授权,请联系平台客服。"/>
<View className="credit-line-card">
<View className="credit-line-card-top">
<View><Progress progress={data.progress} style={style} /></View>
+4 -2
View File
@@ -4,7 +4,7 @@ import Taro, { useReady } from "@tarojs/taro"
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
import {creditListApi} from "@/api/creditLine"
import "./index.scss"
import { formatDateTime } from "@/common/fotmat"
import { formatDateTime, formatPriceDiv, toDecimal2 } from "@/common/fotmat"
import { dataLoadingStatus, getFilterData } from "@/common/util";
export default ()=>{
@@ -30,7 +30,9 @@ export default ()=>{
<View key={index} className="credit-used-list">
<View className="credit-used-list-top">
<View className="credit-used-list-type">下单</View>
<View className={`credit-used-list-price ${item.amount>0?'green':item.amount<0?'red':''}`}>{item.amount.toLocaleString()}</View>
<View className={`credit-used-list-price ${item.amount>0?'green':item.amount<0?'red':''}`}>
{item.trans_type==2?"-":"+"}{toDecimal2(formatPriceDiv(item.amount)).toLocaleString()}
</View>
</View>
<View className="credit-used-list-bottom">
<View className="credit-used-list-date">{formatDateTime(item.order_pay_time)}</View>
-16
View File
@@ -3,22 +3,6 @@
background-color: #f3f3f3;
display: flex;
flex-direction: column;
.deposit-beforehand-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;
color: #EE7500;
margin: 0;
}
.deposit-beforehand-tips text{
margin-right: 10px;
font-size: 30px;
}
.deposit-beforehand-card{
width: 702px;
+2 -3
View File
@@ -6,6 +6,7 @@ import { depositInfoApi } from "@/api/deposit"
import { useEffect } from "react";
import { formatPriceDiv, toDecimal2 } from "@/common/fotmat";
import { setClipboardData } from "@tarojs/taro";
import Message from "@/components/Message";
export default ()=>{
const {fetchData, state} = depositInfoApi();
@@ -23,9 +24,7 @@ export default ()=>{
return (
<View className="deposit-beforehand">
<View className="deposit-beforehand-tips">
<Text className="iconfont icon-zhuyi"></Text> 汇款成功后,1-5分钟自动到账。
</View>
<Message text="汇款成功后,1-5分钟自动到账。"/>
<View className="deposit-beforehand-card">
<View className="deposit-beforehand-balance">
<View className="deposit-beforehand-balance-title">余额 (元)</View>
+4 -2
View File
@@ -18,11 +18,12 @@
.credit-used-list-price{
font-size: 28px;
font-weight: 400;
margin-bottom: 20px;
}
.credit-used-list-right{
display: flex;align-items: center;
text-align: right;
}
.credit-used-list-right-price view{
display: flex;align-items: center;
}
.credit-used-list-right text{
font-size: 30px;
@@ -36,6 +37,7 @@
.credit-used-list-orderno{
font-size: 20px;
font-weight: 400;
margin-top: 20px;
color: #ababab;
}
.green{
+4 -4
View File
@@ -36,11 +36,11 @@ export default ()=>{
</View>
<View className="credit-used-list-right">
<View>
<View className={`credit-used-list-price ${(item as any).amount_received_this_time>0?'red':'green'}`}>
{(item as any).amount_received_this_time>0&&"+"}{formatPriceDiv((item as any).amount_received_this_time)}
<View className="credit-used-list-right-price">
<View className={`credit-used-list-price ${[1,2,3].includes((item as any).type as never)?'red':'green'}`}>
{[1,2,3].includes((item as any).type as never)?"+":"-"}{formatPriceDiv((item as any).amount_received_this_time)}
</View>
<View className="credit-used-list-orderno">处理中</View>
{/* <View className="credit-used-list-orderno">处理中</View> */}
</View>
<Text className="iconfont icon-a-moreback"></Text>
</View>
@@ -4,19 +4,25 @@
align-items: center;
justify-content: space-between;
width: 100%;
.reduce, .plus{
font-size: $font_size_big;
.plus{
color: $color_main;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content:center;
text-align: center;
line-height: 43px;
font-size: 50px;
background-color: $color_main;
color: #fff;
border-radius: 8px;
}
.reduce {
font-size: 50px;
width: 46px;
height: 46px;
text-align: center;
line-height: 43px;
color:#007AFF;
}
.input{
display: flex;
align-items: flex-end;
@@ -25,10 +31,13 @@
box-sizing: border-box;
width: 106px;
border-radius: 10px;
input{
font-size: $font_size_medium;
text-align: right;
padding-right: 10px;
}
}
input{
font-size: $font_size_medium;
}
.unit{
font-size: $font_size_min;
color: $color_font_two;
@@ -72,6 +72,9 @@
padding-bottom:151px;
}
.color_con{
.virtual_list{
padding-bottom: 300px;
}
.item {
display: flex;
justify-content: space-between;
@@ -81,12 +84,7 @@
width: 156.5px;
height: 156.5px;
border-radius: 20px;
background-color: red;
image{
width: 100%;
height: 100%;
border-radius: 20px;
}
}
.item_con{
flex:1;
@@ -15,6 +15,8 @@ import Taro, { useRouter } from "@tarojs/taro";
import UseLogin from "@/use/useLogin"
import { formatHashTag, formatPriceDiv } from "@/common/fotmat";
import { debounce, getFilterData } from "@/common/util";
import LabAndImg from "@/components/LabAndImg";
import VirtualList from '@tarojs/components/virtual-list'
@@ -48,21 +50,14 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
//获取面料颜色列表
const {fetchData:colorFetchData, state: colorState} = GetColorList()
const [list, setList] = useState<any[]>([])
const [loading, setLoading] = useState(false)
const condition = useRef({physical_warehouse:adminUserInfo?.physical_warehouse, sale_mode:selectIndex, product_id:0, code_or_name:null})
const getColorList = async () => {
setLoading(() => true)
console.log('数据:::',getFilterData(condition.current))
let {data} = await colorFetchData(getFilterData(condition.current))
let lists = initList(data.list)
setList(() => [...lists])
setLoading(() => false)
}
const [showPopup, setShowPopup] = useState(false)
useEffect(() => {
console.log('colorState::',colorState)
}, [colorState])
//显示获取
useEffect(() => {
@@ -123,11 +118,14 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
//计数组件
const getInputValue = (num, item) => {
item.count = parseFloat(num)
if(num == 0) item.show = false
setList([...list])
console.log(num)
item.count = parseFloat(num)
if(num == 0) item.show = false
setList([...list])
console.log(num)
}
const onAdd = (item) => {
item.show = true
item.count = selectList[selectIndex].defaultNum
@@ -153,7 +151,6 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
})
return false
}
if(selectCount.sumCount == 0) {
Taro.showToast({
icon:'none',
@@ -161,6 +158,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
})
return false
}
const state = await addFetchData({
"sale_mode": selectIndex,
color_list: selectCount.color_list
@@ -198,10 +196,44 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
return <View className={styles.priceText}><Text>¥</Text>{price}<Text> /{selectList[selectIndex].eunit}</Text></View>
}, [selectIndex])
//虚拟滚动
const Rows = memo(({id, index, style, data}:any) => {
let item = data[index]
return (
<>
{item&&<View className={styles.item} key={item.id}>
<View className={styles.item_color}>
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
</View>
<View className={styles.item_con}>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.num}>
{formatPrice(item)}
</View>
</View>
<View className={styles.btn_con}>
{!item.show&&<View className={styles.btn} onClick={() => onAdd(item)}>添加</View>
||<View className={styles.btn_count}>
<Counter
onBlue={(e) => getInputValue(e, item)}
defaultNum={item.count}
step={selectList[selectIndex].step}
digits={selectList[selectIndex].digits}
onClickBtn={(e) => getInputValue(e, item)}
unit={selectList[selectIndex].unit}
minNum={selectList[selectIndex].minNum}
maxNum={selectList[selectIndex].maxNum}
/>
</View>}
</View>
</View>||<View className={styles.item}></View>
}
</>
)
})
return (
<View className={styles.shop_cart_main}>
<Popup showTitle={false} show={showPopup} onClose={() => closePopup()} >
<View className={styles.popup_con}>
<View className={styles.header}>{title}</View>
@@ -227,39 +259,53 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
<View className={styles.product_color_con}>
{(list.length <= 0 && colorState.loading)&&<LoadingCard/>}
{(list.length > 0&& !colorState.loading)&&
<InfiniteScroll moreStatus={false}>
<View className={styles.color_con}>
{list.map(item => {
return <View className={styles.item} key={item.id}>
<View className={styles.item_color}>
<Image src={item.texture_url}/>
</View>
<View className={styles.item_con}>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.num}>
{formatPrice(item)}
</View>
</View>
<View className={styles.btn_con}>
{!item.show&&<View className={styles.btn} onClick={() => onAdd(item)}>添加</View>
||<View className={styles.btn_count}>
<Counter
onBlue={(e) => getInputValue(e, item)}
defaultNum={item.count}
step={selectList[selectIndex].step}
digits={selectList[selectIndex].digits}
onClickBtn={(e) => getInputValue(e, item)}
unit={selectList[selectIndex].unit}
minNum={selectList[selectIndex].minNum}
maxNum={selectList[selectIndex].maxNum}
/>
</View>}
</View>
</View>
})}
</View>
</InfiniteScroll>}
// <InfiniteScroll moreStatus={false}>
// <View className={styles.color_con}>
// {list.map(item => {
// return <View className={styles.item} key={item.id}>
// <View className={styles.item_color}>
// <LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
// </View>
// <View className={styles.item_con}>
// <View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
// <View className={styles.num}>
// {formatPrice(item)}
// </View>
// </View>
// <View className={styles.btn_con}>
// {!item.show&&<View className={styles.btn} onClick={() => onAdd(item)}>添加</View>
// ||<View className={styles.btn_count}>
// <Counter
// onBlue={(e) => getInputValue(e, item)}
// defaultNum={item.count}
// step={selectList[selectIndex].step}
// digits={selectList[selectIndex].digits}
// onClickBtn={(e) => getInputValue(e, item)}
// unit={selectList[selectIndex].unit}
// minNum={selectList[selectIndex].minNum}
// maxNum={selectList[selectIndex].maxNum}
// />
// </View>}
// </View>
// </View>
// })}
// </View>
// </InfiniteScroll>}
<View className={styles.color_con}>
<VirtualList
className={styles.virtual_list}
height={400} /* 列表的高度 */
width='100%' /* 列表的宽度 */
itemData={list} /* 渲染列表的数据 */
itemCount={list.length + 1} /* 渲染列表的长度 */
itemSize={100} /* 列表单项的高度 */
overscanCount={1}
>
{Rows}
</VirtualList>
<View className="common_safe_area_y"></View>
</View>}
{(list.length <= 0 && !colorState.loading)&&<View className={styles.noData}>暂无此商品</View>}
</View>
<View className={styles.buy_btn}>
@@ -273,4 +319,5 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
</Popup>
</View>
)
})
})
+26 -19
View File
@@ -14,6 +14,8 @@ import useLogin from '@/use/useLogin';
import { AnalysisShortCodeApi, BindShortCodeApi, GetShortCodeApi } from '@/api/share';
import { SHARE_SCENE } from '@/common/enum';
import useUserInfo from '@/use/useUserInfo';
import LabAndImg from '@/components/LabAndImg';
import { alert } from '@/common/common';
type item = {title:string, img:string, url:string, id:number}
@@ -78,9 +80,10 @@ export default (props:Params) => {
const [showCart, setShowCart] = useState(false)
const [showOrderCount, setShowOrderCount] = useState(false)
const html = `
<img style="width:100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic24.nipic.com%2F20121021%2F10910884_100200815001_2.jpg&refer=http%3A%2F%2Fpic24.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257920&t=9353dda34f18ae2fe6803f3da35954bb">
`
// const html = `
// <img style="width:100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic24.nipic.com%2F20121021%2F10910884_100200815001_2.jpg&refer=http%3A%2F%2Fpic24.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257920&t=9353dda34f18ae2fe6803f3da35954bb">
// `
const html = ``
//弹窗提示
const [colorInfo, setColorInfo] = useState<colorItem>()
@@ -113,17 +116,21 @@ export default (props:Params) => {
setSortCode({... userObj.sort_code, shareShortDetail: {title: productName as string, code: resDetail.md5_key, img:''}})
}
//开始下单
const placeOrder = async (e:any) => {
try {
await getPhoneNumber(e.detail.code)
} catch(msg) {
Taro.showToast({
icon:"none",
title: msg
})
return false
}
//授权手机号和下单
const placeOrder = async (status = 'to_phone',e:any = {}) => {
if(!productInfo.id) return false
if(status == 'to_phone') {
if(!e.detail.code) return alert.error('请授权手机号')
try {
await getPhoneNumber(e.detail.code)
} catch(msg) {
Taro.showToast({
icon:"none",
title: msg
})
return false
}
}
setShowOrderCount(true)
}
@@ -162,12 +169,12 @@ export default (props:Params) => {
</View>
</View>
<View className={styles.product_color}>
<View className={styles.title}>色号 (10)</View>
<View className={styles.title}>色号 ({productInfo?.product_color_list?.length})</View>
<View className={styles.list}>
{productInfo?.product_color_list?.map(item => {
return <View className={styles.item} onClick={() => getColorItem(item)}>
<View className={styles.item_color}>
<Image src={formatImgUrl(item.texture_url)}></Image>
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
</View>
<View className={styles.item_name}>{item.code}</View>
</View>
@@ -183,11 +190,11 @@ export default (props:Params) => {
<View className={styles.text}>购物车</View>
</View>
{
!userInfo.adminUserInfo?.is_authorize_phone&&<View className={styles.buy_btn} >
<Button className={styles.phoneBtn} open-type="getPhoneNumber" onGetPhoneNumber={(e) => placeOrder(e)}></Button>
(!userInfo.adminUserInfo?.is_authorize_phone)&&<View className={styles.buy_btn} >
<Button className={styles.phoneBtn} open-type="getPhoneNumber" onGetPhoneNumber={(e) => placeOrder('to_phone',e)}></Button>
开始下单
</View>
|| <View className={styles.buy_btn} onClick={(e) => placeOrder(e)}>开始下单</View>
|| <View className={styles.buy_btn} onClick={() => placeOrder('to_order')}>开始下单</View>
}
</View>
<CustomWrapper>
+94 -33
View File
@@ -1,4 +1,4 @@
import {View} from '@tarojs/components'
import { View } from '@tarojs/components'
import Banner from '@/components/banner'
import Search from '@/components/search'
import SideBar from '@/components/sideBar'
@@ -6,16 +6,17 @@ import Product from '@/components/product'
import MoveBtn from '@/components/moveBtn'
import ShopCart from '@/components/shopCart'
import { goLink } from '@/common/common'
import styles from './index.module.scss'
import styles from './index.module.scss'
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import Taro, { Events, useDidShow, usePullDownRefresh} from '@tarojs/taro'
import {GetProductKindListApi, GetProductListApi} from '@/api/material'
import { useSelector } from "@/reducers/hooks";
import Taro, { Events, useDidShow, usePullDownRefresh } from '@tarojs/taro'
import { GetProductKindListApi, GetProductListApi } from '@/api/material'
import useLogin from '@/use/useLogin'
import { dataLoadingStatus } from '@/common/util'
export default () => {
const {checkLogin} = useLogin()
const { checkLogin } = useLogin()
useDidShow(async () => {
await checkLogin()
})
@@ -25,32 +26,33 @@ export default () => {
}, [])
//获取面料种类
const [kindData, setKindData] = useState<any>({list:[], defaultId:0})
const {fetchData} = GetProductKindListApi()
const [kindData, setKindData] = useState<any>({ list: [], defaultId: 0 })
const { fetchData } = GetProductKindListApi()
const categoryList = async () => {
const res = await fetchData()
if(res.data?.list) {
setKindData({...kindData, list:res.data.list, defaultId: res.data.list[0].id})
setFiltrate({...filtrate, product_kind_id:res.data.list[0].id})
if (res.data?.list) {
setKindData({ ...kindData, list: res.data.list, defaultId: res.data.list[0].id })
setFiltrate({ ...filtrate, product_kind_id: res.data.list[0].id })
}
}
//获取面料列表
const [productData, setProductData] = useState({list:[], total:0})
const [productData, setProductData] = useState({ list: [], total: 0 })
const [hasMore, setHasMore] = useState(true)
const [filtrate, setFiltrate] = useState({product_kind_id:0, size: 5,page: 1})
const pageNum = useRef({size:filtrate.size, page:filtrate.page})
const {fetchData: productFetchData, state: productState} = GetProductListApi()
const [filtrate, setFiltrate] = useState({ product_kind_id: 0, size: 5, page: 1 })
const pageNum = useRef({ size: filtrate.size, page: filtrate.page })
const { fetchData: productFetchData, state: productState } = GetProductListApi()
//获取数据方法
const getProductList = async () => {
const {data,total} = await productFetchData(filtrate)
setProductData({...productData,list:data.list,total})
const { data, total } = await productFetchData(filtrate)
setProductData({ ...productData, list: data.list, total })
setRefresherTriggeredStatus(() => false)
}
//监听查询条件
useEffect(() => {
if(filtrate.product_kind_id)
if (filtrate.product_kind_id)
getProductList()
}, [filtrate])
@@ -58,30 +60,30 @@ export default () => {
//点击面料类型
const getProductKindId = useCallback((e) => {
pageNum.current.page = 1
setProductData({list:[], total:0})
setFiltrate((list) => ({...list, size:5, product_kind_id:e.id}))
setProductData({ list: [], total: 0 })
setFiltrate((list) => ({ ...list, size: 5, product_kind_id: e.id }))
// setHasMore(true)
}, [])
//上拉加载数据
const getScrolltolower = useCallback(() => {
if(productData.list.length >= productData.total) {
if (productData.list.length >= productData.total) {
setHasMore(false)
} else {
pageNum.current.page++
const newSize = pageNum.current.size * pageNum.current.page
setFiltrate((e) => ({...e, size:newSize}))
setFiltrate((e) => ({ ...e, size: newSize }))
}
}, [productData])
const [showShopCart, setShowShopCart] = useState(false)
//列表下拉刷新
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
const getRefresherRefresh = async () => {
pageNum.current.page = 1
setFiltrate({...filtrate, size:5})
setFiltrate({ ...filtrate, size: 5 })
setHasMore(true)
setRefresherTriggeredStatus(true)
}
@@ -95,26 +97,85 @@ export default () => {
//数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({list:productData.list, total: productData.total, status: productState.loading})
return dataLoadingStatus({ list: productData.list, total: productData.total, status: productState.loading })
}, [productData, productState.loading])
useEffect(() => {
getShow()
}, [])
// const [time, setShow] = useState(false)
//拿状态存储的东西判断
const { adminUserInfo } = useSelector(state => state.userInfo);
const getShow = () => {
if (adminUserInfo?.authentication_status === 0 || adminUserInfo?.authentication_status === 1 || adminUserInfo?.authentication_status === 2 || adminUserInfo?.authentication_status === 3) {
//倒计时弹出去认证
const countTime: any = 60
//获取倒计时的变量
var time = parseInt(countTime);
const countDown = setInterval(() => {
if (time == 0) {
Taro.showModal({
title: '提示',
content: '你还未认证,认证后解锁更多功能',
cancelText: '稍后认证',
confirmText: '去认证',
success: function (res) {
if (res.confirm) {
Taro.navigateTo({ url: '/pages/certification/index' })
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
//清除定时器
clearInterval(countDown);
} else {
time--;
}
}, 1000)
}
}
//检查认证是否认证
const checkShow = () => {
if (adminUserInfo.authentication_status === 0 || adminUserInfo.authentication_status === 1 || adminUserInfo.authentication_status === 2 || adminUserInfo.authentication_status === 3) {
Taro.showModal({
title: '提示',
content: '你还未认证,认证后解锁更多功能',
cancelText: '稍后认证',
confirmText: '去认证',
success: function (res) {
if (res.confirm) {
Taro.navigateTo({ url: '/pages/certification/index' })
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
} else {
setShowShopCart(!showShopCart)
}
}
return (
<MoveBtn onClick={() => setShowShopCart(!showShopCart)}>
<MoveBtn onClick={() => checkShow()}>
<View className={styles.main}>
<Banner/>
<Banner />
<View className={styles.search}>
<View className={styles.search_collect}>我的收藏</View>
<View className={styles.search_input} onClick={() => goLink('/pages/searchList/search')}>
<Search disabled={true} style={{width: '263rpx'}} />
<Search disabled={true} style={{ width: '263rpx' }} />
</View>
</View>
<View className={styles.products}>
<SideBar list={kindData.list} height="100%" defaultValue={kindData.defaultId} hasMore={hasMore} statusMore={statusMore} selfOnScrolltolower={getScrolltolower} sideBarOnClick={getProductKindId} heightItem={150} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={() => getRefresherRefresh()}>
<Product productList={productData.list}/>
</SideBar>
<SideBar list={kindData.list} height="100%" defaultValue={kindData.defaultId} hasMore={hasMore} statusMore={statusMore} selfOnScrolltolower={getScrolltolower} sideBarOnClick={getProductKindId} heightItem={150} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={() => getRefresherRefresh()}>
<Product productList={productData.list} />
</SideBar>
</View>
<View className='common_safe_area_y'></View>
<ShopCart show={showShopCart} onClose={() => setShowShopCart(false)}/>
<ShopCart show={showShopCart} onClose={() => setShowShopCart(false)} />
</View>
</MoveBtn>
)
+3
View File
@@ -80,6 +80,9 @@
box-sizing: border-box;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.submit_order_number{
padding: 20px 0;
}
.order_btn {
width: 250px;
height: 90px;
+39 -34
View File
@@ -1,15 +1,12 @@
import { SaleOrderPreViewApi, SaleOrderApi } from "@/api/order";
import { formatPriceDiv } from "@/common/fotmat";
import Popup from "@/components/popup";
import SearchInput from "@/components/searchInput";
import { Text, Textarea, View } from "@tarojs/components"
import Taro, { useDidShow, useRouter } from "@tarojs/taro";
import { View } from "@tarojs/components"
import Taro, { useDidShow, usePullDownRefresh} from "@tarojs/taro";
import classnames from "classnames";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import AddressInfo,{AddressInfoParam} from "./components/addressInfo";
import EstimatedAmount from "./components/estimatedAmount";
import AddressInfo from "./components/addressInfo";
import KindList from "./components/kindList";
import OrderState from "./components/orderState";
import Remark from "./components/remark";
import styles from './comfirm.module.scss'
import { getParam } from "@/common/system";
@@ -17,9 +14,9 @@ import useLogin from "@/use/useLogin";
import { alert, goLink } from "@/common/common";
import ShipmentMode from "../editOrder/components/shipmentMode";
import SubmitOrderBtn from "./components/submitOrderBtn";
import AddressInfoDetail from "./components/addressInfoDetail";
export default () => {
const {checkLogin} = useLogin()
const [showDesc, setShowDesc] = useState(false)
//下单信息
@@ -57,8 +54,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
if(preViewOrder) {
formatData()
getDataList()
//当有默认地址时设置默认地址id
preViewOrder.default_address&&setSubmitOrderData((val) => ({...val, address_id:preViewOrder.default_address.id}))
setSubmitOrderData((val) => ({...val, address_id:preViewOrder.default_address.id, shipment_mode:preViewOrder.shipment_mode||2}))
}
}, [preViewOrder])
@@ -73,7 +69,9 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
total_number: preViewOrder.total_number, //总数量
total_fabrics: preViewOrder.total_fabrics, //面料数量
unit: preViewOrder.sale_mode == 0?'条':'m', //单位
list: preViewOrder.product_list
list: preViewOrder.product_list,
total_should_collect_money: preViewOrder.total_should_collect_money, //应收金额
total_sale_price: preViewOrder.total_sale_price //合计金额
})
}
const formatPreViewOrderMemo = useMemo(() => {
@@ -83,18 +81,16 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
//格式化初始地址
const defaultAddress = useMemo(() => {
const address = preViewOrder?.default_address
if(address) {
return {
province_name: address.province_name,
city_name: address.city_name,
district_name: address.district_name,
address_detail: address.address_detail,
id: address.id,
name: address.name,
phone: address.phone
}
return {
province_name: address?.province_name,
city_name: address?.city_name,
district_name: address?.district_name,
address_detail: address?.address_detail,
id: address?.id,
name: address?.name,
phone: address?.phone,
shipment_mode: address?.shipment_mode
}
return null
}, [preViewOrder])
//获取提交格式数据列表
@@ -125,24 +121,29 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
//提交按钮是否可用
const btnStatus = useMemo(() => {
if( submitOrderData?.list?.length == 0 || !submitOrderData?.shipment_mode || (submitOrderData?.shipment_mode == 2 && !submitOrderData?.address_id)) {
return false
} else {
return true
}
return submitOrderData?.shipment_mode == 1 || (submitOrderData?.shipment_mode == 2 && submitOrderData?.address_id)
}, [submitOrderData])
//数量格式
const numText = useMemo(() => {
if(formatPreViewOrder) {
let total_number = formatPreViewOrder?.sale_mode == 0?formatPreViewOrder?.total_number:(formatPreViewOrder?.total_number/100)
return `${formatPreViewOrder?.total_fabrics}种面料,${formatPreViewOrder?.total_colors}种颜色,共${total_number}${formatPreViewOrder?.unit}`
}
}, [formatPreViewOrder])
//提交订单
const {fetchData: saleOrderFetchData} = SaleOrderApi()
const submitOrderEven = () => {
if(!submitOrderData?.address_id) {
alert.error('请选择地址')
return false
}
if(!submitOrderData?.shipment_mode) {
alert.error('请选择收货方式')
return false
}
if(!submitOrderData?.address_id&&submitOrderData?.shipment_mode == 2) {
alert.error('请选择地址')
return false
}
Taro.showModal({
title: '确定提交?',
success: async function (res) {
@@ -159,10 +160,14 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
}
})
}
//页面下拉刷新
usePullDownRefresh(() => {
getSaleOrderPreView()
})
return (
<View className={styles.order_main}>
<ShipmentMode onSelect={selectShipmentMode}/>
<AddressInfo onSelect={(e) => getAddress(e)} defaultValue={defaultAddress}/>
<AddressInfoDetail orderInfo={defaultAddress} onSelect={getAddress} onChangeShipmentMode={selectShipmentMode} status={1}/>
<KindList order={formatPreViewOrderMemo} comfirm={true}/>
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
<View className={styles.order_desc_con}>订单备注</View>
@@ -174,8 +179,8 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
</View>
<View className={styles.submit_order}>
<View className={styles.submit_order_number}>
<SubmitOrderBtn style={{color:'#007AFF'}} number={formatPriceDiv(formatPreViewOrder?.estimate_amount)}/>
<View className={styles.order_number_desc}>{`${formatPreViewOrder?.total_fabrics}种面料,${formatPreViewOrder?.total_colors}种颜色,共${formatPreViewOrder?.total_number + formatPreViewOrder?.unit}`}</View>
<SubmitOrderBtn style={{color:'#007AFF'}} number={formatPriceDiv(preViewOrder?.sale_mode == 1?formatPreViewOrder?.total_should_collect_money:formatPreViewOrder?.estimate_amount)} priceTitle={preViewOrder?.sale_mode == 1?'合计金额':'预估金额'}/>
<View className={styles.order_number_desc}>{numText}</View>
</View>
<View className={classnames(styles.order_btn, btnStatus&&styles.ok_order_btn)} onClick={() => submitOrderEven()}>提交订单</View>
</View>
@@ -0,0 +1,163 @@
import { EditSaleOrderAddressApi, EditSaleOrderShipmentModeApi } from "@/api/order";
import { alert } from "@/common/common";
import { ORDER_STATUS } from "@/common/enum";
import { debounce } from "@/common/util";
import AddressList from "@/components/AddressList";
import Popup from "@/components/popup";
import { Text, View } from "@tarojs/components"
import classnames from "classnames";
import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useState } from "react";
import styles from './index.module.scss'
export type AddressInfoParam = {
province_name: string,
city_name: string,
district_name: string,
address_detail: string,
id?: number,
name: string,
phone: string,
}
type Param = {
onSelect?: (val:any) => void, //选择地址
defaultValue?: AddressInfoParam|null, //默认值
disabled?: false|true, //true禁用后只用于展示
onChangeShipmentMode?: (val: number) => void, //返回收货方式
status?: 1|2, //1确认订单时使用, 2订单流程
orderInfo?: {
orderId: number //订单id
shipment_mode: 1|2, //1自提 2物流
status: number //订单状态
}
}
export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = null, orderInfo, status = 2}: Param, ref) => {
const [showAddressList, setShowAddressList] = useState(false)
useEffect(() => {
setUserInfo(() => defaultValue)
}, [defaultValue])
const [userInfo, setUserInfo] = useState<any>()
//地址格式
const formatAddress = useMemo(() => {
if(userInfo)
return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail
}, [userInfo])
const changeShow = () => {
if(receivingStatus == 2 && !logisticsShow)
setShowAddressList(() => true)
}
useEffect(() => {
if(orderInfo)
setReceivingStatus(() => orderInfo.shipment_mode||2)
}, [orderInfo])
//把内部方法提供给外部
useImperativeHandle(ref, () => ({
changeShow
}))
//收货方法,1:自提,2物流
const [receivingStatus, setReceivingStatus] = useState(2)
const {fetchData: shipmentModeFetchData} = EditSaleOrderShipmentModeApi()
const onReceivingStatus = (value, e) => {
e.stopPropagation()
changeReceivingStatus(value)
}
const changeReceivingStatus = debounce(async (value) => {
if(!orderInfo) return false
if(status == 1) {
onChangeShipmentMode?.(value)
setReceivingStatus(value)
return false
}
alert.loading('正在修改')
const res = await shipmentModeFetchData({id: orderInfo.orderId, shipment_mode:value})
if(res.success) {
alert.success('收货方式修改成功')
onChangeShipmentMode?.(value)
setReceivingStatus(value)
} else {
alert.none(res.msg)
}
}, 10)
//修改地址
const [addressId, setAddressId] = useState(0)
const {fetchData: addressFetchData} = EditSaleOrderAddressApi()
const getAddress = async (value) => {
if(!orderInfo) return false
if(status == 1) {
setShowAddressList(() => false)
setAddressId(value.id)
setUserInfo(() => value)
return false
}
alert.loading('正在修改')
const res = await addressFetchData({id: orderInfo.orderId, address_id: value.id})
if(res.success) {
alert.success('地址修改成功')
onSelect?.(value)
setShowAddressList(() => false)
setAddressId(value.id)
setUserInfo(() => value)
} else {
alert.none(res.msg)
}
}
//订单状态
const {
SaleOrderStatusWaitingReceipt,
SaleOrderStatusAlreadyReceipt,
SaleOrderStatusComplete,
SaleOrderStatusRefund,
SaleOrderStatusCancel
} = ORDER_STATUS
//根据订单状态判断是否显示物流
const logisticsShowList = [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value]
const logisticsShow = useMemo(() => {
return logisticsShowList.includes(orderInfo?.status as number)
}, [orderInfo])
return (
<View>
<View className={styles.order_address} onClick={() => changeShow()}>
<View className={classnames(styles.order_address_icon, 'iconfont', receivingStatus == 2?'icon-daohang':'icon-fahuo')}></View>
<View className={styles.order_address_text_con}>
<View className={styles.order_address_text_title}>
<Text className={styles.address_text}>{formatAddress}</Text>
{(receivingStatus == 2 && !logisticsShow)&&<Text className={classnames(styles.moreIconfont,'iconfont icon-a-moreback')}></Text>}
</View>
<View className={styles.order_address_text_name}>
<Text>{userInfo?.name}</Text>
<Text>{userInfo?.phone}</Text>
</View>
</View>
{!logisticsShow&&<View className={styles.updateBtn}>
<View className={styles.updateBtn_list}>
<View className={classnames(styles.updateBtn_item, receivingStatus==1&&styles.updateBtn_item_select)} onClick={(e) => onReceivingStatus(1,e)}>自提</View>
<View className={classnames(styles.updateBtn_item, receivingStatus==2&&styles.updateBtn_item_select)} onClick={(e) => onReceivingStatus(2,e)}>物流</View>
</View>
<View style={{transform: receivingStatus==1?'translateX(0)':'translateX(100%)'}} className={classnames(styles.updateBtn_select)}></View>
</View>||
<View className={styles.logisticsBtn}>
查看物流
</View>}
</View>
<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
<View className={styles.order_address_list}>
<View className={styles.order_address_title}>请选择收货地址</View>
<View className={styles.addressList_con}>
<AddressList onSelect={getAddress} id={addressId}/>
</View>
</View>
</Popup>
</View>
)
}))
@@ -1,5 +1,4 @@
.order_address{
height: 178px;
background: #ffffff;
border-radius: 20px;
display: flex;
@@ -26,16 +25,23 @@
.order_address_text_title{
font-size: $font_size_medium;
margin-top: 10px;
@include common_ellipsis;
display: flex;
align-items: center;
justify-content: space-between;
.moreIconfont{
font-size: 20px;
padding-top: 10px;
}
.address_text{
word-break:break-all;
}
.address_text_no{
font-weight: 700;
padding-left: 20px;
}
}
.order_address_text_name{
margin-top: 30px;
align-items: center;
text{
&:nth-child(1) {
@@ -88,6 +94,21 @@
}
}
.logisticsBtn{
width: 152px;
height: 72px;
background: #ffffff;
border: 2px solid #dddddd;
border-radius: 38px;
position: absolute;
bottom: 10px;
right: 10px;
z-index: 999;
font-size: 28px;
color: #707070;
text-align: center;
line-height: 72px;
}
.order_address_text_no{
flex: 1;
font-size: $font_size;
@@ -101,12 +122,17 @@
}
.order_address_list {
height: 900px;
height:80vh;
.order_address_title{
font-size: $font_size;
font-weight: 700;
width: 100%;
text-align: center;
padding: 20px 0 30px 0;
height: 100px;
}
.addressList_con{
padding-bottom: 20px;
height: calc(100% - 160px);
}
}
@@ -1,11 +1,12 @@
import { EditSaleOrderAddressApi, EditSaleOrderShipmentModeApi } from "@/api/order";
import { alert } from "@/common/common";
import { ORDER_STATUS } from "@/common/enum";
import { debounce } from "@/common/util";
import AddressList from "@/components/AddressList";
import Popup from "@/components/popup";
import { Text, View } from "@tarojs/components"
import classnames from "classnames";
import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useState } from "react";
import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useState } from "react";
import styles from './index.module.scss'
export type AddressInfoParam = {
@@ -18,37 +19,48 @@ export type AddressInfoParam = {
phone: string,
}
type Param = {
onSelect?: (val:any) => void, //选择
defaultValue?: AddressInfoParam|null, //默认值
onSelect?: (val:any) => void, //选择地址
disabled?: false|true, //true禁用后只用于展示
shipment_mode?: 1|2, //1自提 2物流
onChangeShipmentMode?: (val: number) => void, //返回收货方式
orderId?: number //订单id
onLogistics?: () => void, //查看物流
status?: 1|2, //1确认订单时使用, 2订单流程
orderInfo?: {
id?: number //订单id
shipment_mode?: 1|2, //1自提 2物流
status?: number //订单状态
province_name: string,
city_name: string,
district_name: string,
address_detail: string
}
}
export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = null, orderId = 0, shipment_mode = 1}: Param, ref) => {
const [showAddressList, setShowAddressList] = useState(false)
export default memo(forwardRef(({onSelect, onChangeShipmentMode, orderInfo, status = 2, disabled = false, onLogistics}: Param, ref) => {
const [addressInfo, setAddressInfo] = useState<any>()
useEffect(() => {
setUserInfo(() => defaultValue)
}, [defaultValue])
if(orderInfo) {
setReceivingStatus(() => orderInfo.shipment_mode||2)
setAddressInfo(() => orderInfo)
}
}, [orderInfo])
const [userInfo, setUserInfo] = useState<any>()
//地址格式
const formatAddress = useMemo(() => {
if(userInfo)
return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail
}, [userInfo])
if(addressInfo?.province_name) {
return addressInfo.province_name + addressInfo.city_name + addressInfo.district_name + addressInfo.address_detail
} else {
return ''
}
}, [addressInfo])
//打开地址列表
const [showAddressList, setShowAddressList] = useState(false)
const changeShow = () => {
if(receivingStatus == 2)
if(receivingStatus == 2 && !logisticsShow)
setShowAddressList(() => true)
}
useEffect(() => {
setReceivingStatus(() => shipment_mode)
}, [shipment_mode])
//把内部方法提供给外部
useImperativeHandle(ref, () => ({
@@ -56,15 +68,21 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue =
}))
//收货方法,1:自提,2物流
const [receivingStatus, setReceivingStatus] = useState(1)
const [receivingStatus, setReceivingStatus] = useState(2)
const {fetchData: shipmentModeFetchData} = EditSaleOrderShipmentModeApi()
const onReceivingStatus = (value, e) => {
e.stopPropagation()
changeReceivingStatus(value)
}
const changeReceivingStatus = debounce(async (value) => {
if(!orderInfo) return false
if(status == 1) {
onChangeShipmentMode?.(value)
setReceivingStatus(value)
return false
}
alert.loading('正在修改')
const res = await shipmentModeFetchData({id: orderId, shipment_mode:value})
const res = await shipmentModeFetchData({id: orderInfo.id, shipment_mode:value})
if(res.success) {
alert.success('收货方式修改成功')
onChangeShipmentMode?.(value)
@@ -75,48 +93,79 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue =
}, 10)
//修改地址
const [addressId, setAddressId] = useState(0)
const {fetchData: addressFetchData} = EditSaleOrderAddressApi()
const getAddress = async (value) => {
if(!orderInfo) return false
if(status == 1) {
setShowAddressList(() => false)
setAddressId(value.id)
setAddressInfo(() => value)
onSelect?.(value)
return false
}
alert.loading('正在修改')
const res = await addressFetchData({id: orderId, address_id: value.id})
const res = await addressFetchData({id: orderInfo.id, address_id: value.id})
if(res.success) {
alert.success('地址修改成功')
onSelect?.(value)
setShowAddressList(() => false)
setUserInfo(() => value)
setAddressId(value.id)
setAddressInfo(() => value)
} else {
alert.none(res.msg)
}
}
//订单状态
const {
SaleOrderStatusWaitingReceipt,
SaleOrderStatusAlreadyReceipt,
SaleOrderStatusComplete,
SaleOrderStatusRefund,
SaleOrderStatusCancel,
} = ORDER_STATUS
//根据订单状态判断是否显示物流
const logisticsShowList = [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value]
const logisticsShow = useMemo(() => {
console.log('aa:',orderInfo?.status)
return logisticsShowList.includes(orderInfo?.status as number)
}, [orderInfo])
return (
<View>
<View className={styles.order_address} onClick={() => changeShow()}>
<View className={classnames(styles.order_address_icon, 'iconfont', receivingStatus == 2?'icon-daohang':'icon-fahuo')}></View>
<View className={styles.order_address_text_con}>
<View className={styles.order_address_text_title}>
<Text>{formatAddress}</Text>
{(receivingStatus == 2)&&<Text className={classnames(styles.moreIconfont,'iconfont icon-a-moreback')}></Text>}
<Text className={classnames(styles.address_text, styles.address_text_no)}>{formatAddress||'请选择收货地址及信息'}</Text>
{(receivingStatus == 2 && !logisticsShow)&&<Text className={classnames(styles.moreIconfont,'iconfont icon-a-moreback')}></Text>}
</View>
<View className={styles.order_address_text_name}>
<Text>{userInfo?.name}</Text>
<Text>{userInfo?.phone}</Text>
<Text>{addressInfo?.name}</Text>
<Text>{addressInfo?.phone}</Text>
</View>
</View>
<View className={styles.updateBtn}>
{!logisticsShow&&<View className={styles.updateBtn}>
<View className={styles.updateBtn_list}>
<View className={classnames(styles.updateBtn_item, receivingStatus==1&&styles.updateBtn_item_select)} onClick={(e) => onReceivingStatus(1,e)}>自提</View>
<View className={classnames(styles.updateBtn_item, receivingStatus==2&&styles.updateBtn_item_select)} onClick={(e) => onReceivingStatus(2,e)}>物流</View>
</View>
<View style={{transform: receivingStatus==1?'translateX(0)':'translateX(100%)'}} className={classnames(styles.updateBtn_select)}></View>
</View>
</View>||
<View className={styles.logisticsBtn} onClick={onLogistics}>
查看物流
</View>}
</View>
<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
<View className={styles.order_address_list}>
<View className={styles.order_address_title}>请选择收货地址</View>
<AddressList onSelect={getAddress}/>
<View className={styles.addressList_con}>
<AddressList onSelect={getAddress} id={addressId}/>
</View>
</View>
<View className="common_safe_area_y"></View>
</Popup>
</View>
)
@@ -1,176 +0,0 @@
.apply_after_sales_main{
.apply_after_sales_head{
font-size: 30px;
text-align: center;
padding: 20px 0;
font-weight: 700;
}
.kind_number{
width: 100%;
padding: 20px;
box-sizing: border-box;
text{
background-color: #F6F6F6;
border-radius: 10px;
font-size: $font_size_medium;
padding: 5px 0;
text-align: center;
width: 100%;
display: block;
color: $color_font_three;
}
}
.apply_after_sales_con{
height: 80vh;
.scroll{
height: calc(100% - 80px);
}
.returnSaleInput{
margin: 0 20px;
padding-top: 30px;
border-top: 1px solid #F6F6F6;
.returnSaleInput_item{
display: flex;
align-items: center;
padding-bottom: 20px;
.title{
font-size: $font_size;
font-weight: 700;
}
.select{
flex:1;
height: 60px;
border: 2px solid #e6e6e6;
border-radius: 10px;
margin-left: 20px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
font-size: 26px;
color: $color_font_two;
.miconfont{
font-size: 30px;
}
}
.uploadImg{
width: 202px;
height: 150px;
background: #f0f0f0;
border: 2px dashed #cccccc;
margin-left: 20px;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
.miconfont{
font-size: 50px;
}
.uploadText{
font-size: 26px;
color: $color_font_three;
}
}
}
}
.other_desc{
padding: 0 20px;
box-sizing: border-box;
.title{
font-size: $font_size;
font-weight: 700;
}
.uploadImg{
position: relative;
.descDataNum{
position: absolute;
right: 10px;
bottom: 10px;
font-size: 22px;
color: #ABABAB;
}
}
Textarea{
background-color: #f3f3f3;
border: 2px solid #e6e6e6;
border-radius: 10px;
width: 100%;
font-size: 25px;
height: 165.4px;
padding: 20px 20px 30px 20px;
box-sizing: border-box;
margin-top: 20px;
}
}
}
.apply_after_sales_list{
padding: 0 20px;
.apply_after_sales_item{
margin-bottom: 30px;
.apply_after_sales_title{
display: flex;
align-items: center;
.tag{
font-size: $font_size_min;
background-color: #CDE5FF;
padding: 5px 10px;
border-radius: 6px;
color: $color_main;
}
.title{
font-weight: 700;
font-size: $font_size;
margin-left: 20px;
flex:1;
}
}
.color_list {
.color_item{
display: flex;
align-items: center;
margin: 20px 0;
}
.image{
width: 70px;
height: 70px;
image{
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.name_and_number{
padding-left: 30px;
flex:1;
text{
&:nth-child(1) {
font-weight: 700;
font-size: $font_size;
}
&:nth-child(2) {
color: $color_font_two;
font-size: $font_size;
margin-left: 20px;
}
}
}
.btn_count{
width: 235px;
height: 64px;
background-color: #ECF5FF;
border-radius: 40px 0px 16px 0px;
padding: 0 20px;
display: flex;
align-items: center;
}
}
}
}
}
@@ -1,108 +0,0 @@
import { Image, ScrollView, Text, Textarea, View } from "@tarojs/components";
import { memo, useState } from "react";
import classnames from "classnames";
import styles from './index.module.scss'
import Popup from "@/components/popup";
import { formatImgUrl } from "@/common/fotmat";
import Counter from "@/components/counter";
export default memo(() => {
const [showDesc, setShowDesc] = useState(true)
return (
<View className={styles.apply_after_sales_main}>
<Popup showIconButton={true} show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
<View className={styles.apply_after_sales_con}>
<View className={styles.apply_after_sales_head}>申请退货</View>
<View className={styles.kind_number}><Text>2种面料,3种颜色,共6条</Text></View>
<ScrollView scrollY className={styles.scroll}>
<View className={styles.apply_after_sales_list}>
<View className={styles.apply_after_sales_item}>
<View className={styles.apply_after_sales_title}>
<View className={styles.tag}>大货</View>
<View className={styles.title}>0770# 21S单面平纹(食毛)</View>
</View>
<View className={styles.color_list}>
<View className={styles.color_item}>
<View className={styles.image}><Image src={formatImgUrl('')}/></View>
<View className={styles.name_and_number}><Text>1# 薄荷绿</Text><Text>x1</Text></View>
<View className={styles.btn_count}>
<Counter/>
</View>
</View>
<View className={styles.color_item}>
<View className={styles.image}><Image src={formatImgUrl('')}/></View>
<View className={styles.name_and_number}><Text>1# 薄荷绿</Text><Text>x1</Text></View>
<View className={styles.btn_count}>
<Counter/>
</View>
</View>
</View>
</View>
<View className={styles.apply_after_sales_item}>
<View className={styles.apply_after_sales_title}>
<View className={styles.tag}>大货</View>
<View className={styles.title}>0770# 21S单面平纹(食毛)</View>
</View>
<View className={styles.color_list}>
<View className={styles.color_item}>
<View className={styles.image}><Image src={formatImgUrl('')}/></View>
<View className={styles.name_and_number}><Text>1# 薄荷绿</Text><Text>x1</Text></View>
<View className={styles.btn_count}>
<Counter/>
</View>
</View>
<View className={styles.color_item}>
<View className={styles.image}><Image src={formatImgUrl('')}/></View>
<View className={styles.name_and_number}><Text>1# 薄荷绿</Text><Text>x1</Text></View>
<View className={styles.btn_count}>
<Counter/>
</View>
</View>
</View>
</View>
</View>
<View className={styles.returnSaleInput}>
<View className={styles.returnSaleInput_item}>
<View className={styles.title}>退货原因</View>
<View className={styles.select}>
<Text>请选择</Text>
<Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
</View>
</View>
<View className={styles.returnSaleInput_item}>
<View className={styles.title}>货物状况</View>
<View className={styles.select}>
<Text>请选择</Text>
<Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
</View>
</View>
<View className={styles.returnSaleInput_item}>
<View className={styles.title}>退货说明</View>
<View className={styles.select}>
<Text>请选择</Text>
<Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
</View>
</View>
<View className={styles.returnSaleInput_item}>
<View className={styles.title}>拍照上传</View>
<View className={styles.uploadImg}>
<Text className={classnames(styles.miconfont, 'iconfont icon-saomazhifu')}></Text>
<Text className={styles.uploadText}>上传照片</Text>
</View>
</View>
</View>
<View className={styles.other_desc}>
<View className={styles.title}>其他说明</View>
<View className={styles.uploadImg}>
<Textarea placeholder="一般情况下选填,当退货说明=“其它问题”时,必填" cursorSpacing={100}></Textarea>
<View className={styles.descDataNum}>0/100</View>
</View>
</View>
<View className="common_safe_area_y"></View>
</ScrollView>
</View>
</Popup>
</View>
)
})
@@ -0,0 +1,66 @@
.apply_after_sales_con{
padding: 20px;
.returnSaleInput_item{
display: flex;
align-items: center;
padding-bottom: 50px;
flex-wrap: wrap;
.title{
font-size: $font_size;
font-weight: 700;
width: 119px;
}
.select{
flex:1;
height: 60px;
border: 2px solid #e6e6e6;
border-radius: 10px;
margin-left: 20px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
font-size: 26px;
color: $color_font_two;
.miconfont{
font-size: 30px;
}
}
.upload_image{
flex:1;
}
}
.btns_con{
width: 100%;
bottom:0;
box-sizing: border-box;
margin-top: 50px;
.btns_two{
display: flex;
height: 82px;
// border: 1PX solid #007aff;
font-size: $font_size_big;
border-radius: 40px;
margin-bottom: 20px;
.rest_btn{
flex:1;
border: 1PX solid #007aff;
border-radius: 40px 0 0 40px;
text-align: center;
line-height: 82px;
color: $color_main;
background-color: #fff;
}
.verify_btn{
flex:1;
border-radius: 0 40px 40px 0;
background: #007aff;
text-align: center;
line-height: 82px;
color: #fff;
}
}
}
}
@@ -0,0 +1,57 @@
import Popup from "@/components/popup";
import TextareaEnhance from "@/components/textareaEnhance";
import { ScrollView, Text, View } from "@tarojs/components";
import { memo, useCallback, useState } from "react";
import ReasonPopup from "../reasonPopup";
import styles from './index.module.scss'
import classnames from "classnames";
type Param = {
show?: true|false,
onClose?: () => void
}
export default memo(({show, onClose}:Param) => {
const getOtherReason = useCallback(() => {
}, [])
const onSubmit = (val) => {
}
//显示说明
const [showReason, setShowReason] = useState(false)
const closeReason = useCallback(() => {
setShowReason(false)
}, [])
const onShowReason = () => {
setShowReason(true)
}
return (
<>
<Popup show={show} title="申请退款" onClose={onClose} >
<View className={styles.apply_after_sales_con}>
<View className={styles.returnSaleInput_item}>
<View className={styles.title}>退款说明</View>
<View className={styles.select} onClick={() => onShowReason()}>
<Text>请选择</Text>
<Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
</View>
</View>
<TextareaEnhance onChange={getOtherReason} title='备注' placeholder="请输入退款备注"/>
<View className={styles.btns_con}>
<View className={styles.btns_two}>
<View className={styles.rest_btn} onClick={() => onSubmit(1)}>取消</View>
<View className={styles.verify_btn } onClick={() => onSubmit(2)}>确认</View>
</View >
</View>
</View>
</Popup>
<ReasonPopup show={showReason} onClose={closeReason} />
</>
)
})
@@ -0,0 +1,190 @@
import { ORDER_STATUS } from "@/common/enum"
import { formatHashTag, formatPriceDiv } from "@/common/fotmat"
import LabAndImg from "@/components/LabAndImg"
import { View } from "@tarojs/components"
import { memo, useCallback, useMemo } from "react"
import EstimatedAmount from "../estimatedAmount"
import styles from './index.module.scss'
type OrderParam = {
estimate_amount: number, //预估金额
list: any[],
sale_mode: number,
sale_mode_name: string,
unit: string,
total_colors: number,
total_fabrics: number,
total_number: number,
status: number, //订单状态
total_sale_price: number, //销售金额
total_should_collect_money: number, //应收金额
total_weight_error_discount: number, //空差优惠
the_previous_status: number, //取消订单时的订单状态
actual_amount: number //实付金额
}
type Param = {
order: OrderParam,
comfirm?: boolean //是否是确认订单页面使用
}
export default memo(({order, comfirm = false}:Param) => {
//对应数量
const formatCount = useCallback((item) => {
return order?.sale_mode == 0? item.roll : Number(item.length / 100)
}, [order])
//对应单价
const standardPrice = useCallback(price => {
return formatPriceDiv(price).toLocaleString() + '/' + (order?.sale_mode == 1?'m':'kg')
}, [order])
//数量格式
const numText = useMemo(() => {
if(order) {
let total_number = order?.sale_mode == 0?order?.total_number:(order?.total_number/100)
return `${order?.total_fabrics}种面料,${order?.total_colors}种颜色,共${total_number}${order?.unit}`
}
}, [order])
const {
SaleOrderStatusBooking, // 待接单
SaleOrderStatusArranging, // 配布中
SaleOrderStatusArranged, // 已配布
SaleOrderStatusWaitingPayment, // 待付款
SaleOrderStatusWaitingDelivery, // 待发货
SaleOrderStatusWaitingReceipt, // 待收货
SaleOrderStatusAlreadyReceipt, // 已收货
SaleOrderStatusComplete, // 已完成
SaleOrderStatusRefund, // 已退款
SaleOrderStatusCancel, // 已取消
SaleorderstatusWaitingPrePayment // 预付款
} = ORDER_STATUS
//金额列表枚举
const priceList = [
{
id:1,
value:[SaleorderstatusWaitingPrePayment.value, SaleOrderStatusBooking.value, SaleOrderStatusArranging.value, ],
label:'预估金额',
field: 'estimate_amount'
},
{
id:2,
value:[SaleorderstatusWaitingPrePayment.value, SaleOrderStatusArranged.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
label:'合计金额',
field: 'total_sale_price'
},
{
id:3,
value:[SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
label:'空差优惠',
field: 'total_weight_error_discount'
},
{
id:4,
value:[ SaleOrderStatusWaitingPayment.value],
label:'应付金额',
field: 'total_should_collect_money'
},
{
id:5,
value:[SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
label:'实付金额',
field: 'actual_amount'
}
]
//是否显示价格
const showPrice = useCallback((priceInfo, status) => {
return priceInfo.value.includes(status)
}, [order])
//金额展示大货
const priceConDom = useMemo(() => {
if(!order) return
if(comfirm == true) {
//确认订单时
return <EstimatedAmount number={formatPriceDiv(order.estimate_amount)} title="预估金额" />
}
if(order?.status == SaleOrderStatusCancel.value) {
//订单状态为取消订单时
return (
<>
{
priceList.map(item => {
return <>{showPrice(item, order?.the_previous_status)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
})
}
</>
)
} else {
//其他订单状态
return (
<>
{
priceList.map(item => {
return <>{showPrice(item, order?.status)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
})
}
</>
)
}
}, [order])
//金额展示剪板
const cutPriceConDom = useMemo(() => {
if(!order) return
return <EstimatedAmount number={formatPriceDiv(order.total_should_collect_money)} title="合计金额" />
}, [order])
const showPriceAll = useMemo(() => {
if(order?.sale_mode == 1) {
return cutPriceConDom //剪板
} else {
return priceConDom //大货
}
}, [order])
return (
<>
<View className={styles.orders_list_title}>{numText}</View>
<View className={styles.orders_list_con}>
{
order?.list?.map(item => {
return <View key={item.product_code} className={styles.order_list}>
<View className={styles.order_list_title}>
<View className={styles.tag}>{order.sale_mode_name}</View>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.num}>共{item?.product_colors.length}种</View>
</View>
<View className={styles.order_list_scroll}>
{item?.product_colors?.map(colorItem => {
return <View key={colorItem.id} className={styles.order_list_item}>
<View className={styles.order_list_item_img}>
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
</View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>{colorItem.code + ' ' + colorItem.name}</View>
<View className={styles.order_list_item_price}>¥{standardPrice(colorItem.sale_price)}</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×{formatCount(colorItem)}<text>{order.unit}</text></View>
<View className={styles.count_price}><text>¥</text>{formatPriceDiv(colorItem.estimate_amount).toLocaleString()}</View>
</View>
</View>
</View>
})}
</View>
</View>
})
}
<View className={styles.order_estimated_amount}>
{showPriceAll}
</View>
</View>
</>
)
})
@@ -40,14 +40,13 @@
.order_list_item {
display: flex;
&:nth-child(2) {
&:nth-child(n + 2) {
margin-top: 30px;
}
.order_list_item_img{
width: 126px;
height: 126px;
border-radius: 20px;
background-color: red;
}
.order_list_item_con{
display: flex;
@@ -67,9 +66,14 @@
font-size: $font_size;
margin-bottom: 15px;
}
.order_list_item_price{
.order_list_item_price, .order_list_item_price_dg{
font-size: 26px;
color: $color_font_three;
display: flex;
align-items: center;
Text{
padding-left: 13px;
}
}
}
.order_list_item_count{
+68 -42
View File
@@ -1,6 +1,7 @@
import { ORDER_STATUS } from "@/common/enum"
import { formatHashTag, formatPriceDiv } from "@/common/fotmat"
import { View } from "@tarojs/components"
import { formatHashTag, formatPriceDiv, formatWeightDiv } from "@/common/fotmat"
import LabAndImg from "@/components/LabAndImg"
import { Text, View } from "@tarojs/components"
import { memo, useCallback, useMemo } from "react"
import EstimatedAmount from "../estimatedAmount"
import styles from './index.module.scss'
@@ -15,7 +16,7 @@ type OrderParam = {
total_fabrics: number,
total_number: number,
status: number, //订单状态
total_sale_price: number, //销售金额
total_sale_price: number, //合计金额
total_should_collect_money: number, //应收金额
total_weight_error_discount: number, //空差优惠
the_previous_status: number, //取消订单时的订单状态
@@ -23,7 +24,7 @@ type OrderParam = {
}
type Param = {
order: OrderParam,
order: OrderParam,
comfirm?: boolean //是否是确认订单页面使用
}
@@ -39,8 +40,10 @@ export default memo(({order, comfirm = false}:Param) => {
//数量格式
const numText = useMemo(() => {
if(order)
return `${order?.total_fabrics}种面料,${order?.total_colors}种颜色,共${order?.total_number}${order?.unit}`
if(order) {
let total_number = order?.sale_mode == 0?order?.total_number:(order?.total_number/100)
return `${order?.total_fabrics}种面料,${order?.total_colors}种颜色,共${total_number}${order?.unit}`
}
}, [order])
const {
@@ -54,19 +57,21 @@ export default memo(({order, comfirm = false}:Param) => {
SaleOrderStatusComplete, // 已完成
SaleOrderStatusRefund, // 已退款
SaleOrderStatusCancel, // 已取消
SaleorderstatusWaitingPrePayment, // 预付款
SaleOrderStatusTaking //提货
} = ORDER_STATUS
//金额列表枚举
const priceList = [
{
id:1,
value:[SaleOrderStatusBooking.value, SaleOrderStatusArranging.value],
value:[SaleorderstatusWaitingPrePayment.value, SaleOrderStatusBooking.value, SaleOrderStatusArranging.value],
label:'预估金额',
field: 'estimate_amount'
},
{
id:2,
value:[SaleOrderStatusArranged.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
value:[SaleOrderStatusTaking.value, SaleOrderStatusArranged.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
label:'合计金额',
field: 'total_sale_price'
},
@@ -84,45 +89,60 @@ export default memo(({order, comfirm = false}:Param) => {
},
{
id:5,
value:[SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
value:[SaleOrderStatusTaking.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
label:'实付金额',
field: 'actual_amount'
}
]
//是否显示价格
const showPrice = useCallback((priceInfo, status) => {
return priceInfo.value.includes(status)
}, [order])
//订单流程是否显示价格
const showPrice = (item) => {
if (item.id == 2) {
//合计金额 (剪板特殊请情况)
return (item.value.includes(order.status)|| order.sale_mode == 1)
} else if (item.id == 3) {
//空差优惠只有大货才有
return (item.value.includes(order.status) && order.sale_mode == 1 )
} else {
return (item.value.includes(order.status) && order.sale_mode != 1 )
}
}
//订单流程金额展示
const priceConDom = useMemo(() => {
if(!order) return
//确认订单
if(comfirm == true) {
return <EstimatedAmount number={formatPriceDiv(order.estimate_amount)} title="预估金额" />
}
//订单为取消订单状态
if(order?.status == SaleOrderStatusCancel.value) {
return (
<>
{
priceList.map(item => {
return <>{showPrice(item, order?.the_previous_status)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
})
}
</>
)
} else {
return (
<>
{
priceList.map(item => {
return <>{showPrice(item, order?.status)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
})
}
</>
)
}
return (
<>
{
priceList.map(item => {
return <>{showPrice(item)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
})
}
</>
)
}, [order])
//确认订单金额展示
const comfirmPriceConDom = useMemo(() => {
if(!order) return
let item = order.sale_mode == 1?priceList[1]:priceList[0]
return<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />
}, [order])
//金额展示
const showPriceConDom = useMemo(() => {
return comfirm?comfirmPriceConDom:priceConDom
}, [order])
//散剪大约重量
const aboutWeight = useCallback((weight) => {
if(order.sale_mode == 2 ) {
let showWeight = [SaleorderstatusWaitingPrePayment.value, SaleOrderStatusBooking.value, SaleOrderStatusArranging.value].includes(order.status)
return showWeight?<View className={styles.order_list_item_price_dg}>; <Text>≈{formatWeightDiv(weight)}kg</Text></View>:<></>
}
return <></>
}, [order])
return (
@@ -140,11 +160,17 @@ export default memo(({order, comfirm = false}:Param) => {
<View className={styles.order_list_scroll}>
{item?.product_colors?.map(colorItem => {
return <View key={colorItem.id} className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_img}>
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
</View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>{colorItem.code + ' ' + colorItem.name}</View>
<View className={styles.order_list_item_price}>¥{standardPrice(colorItem.sale_price)}</View>
<View className={styles.order_list_item_price}>
¥{standardPrice(colorItem.sale_price)}
{aboutWeight(colorItem.estimate_weight)}
</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×{formatCount(colorItem)}<text>{order.unit}</text></View>
@@ -158,7 +184,7 @@ export default memo(({order, comfirm = false}:Param) => {
})
}
<View className={styles.order_estimated_amount}>
{priceConDom}
{showPriceConDom}
</View>
</View>
</>
@@ -15,7 +15,6 @@
}
.order_status_item{
position: relative;
padding-left: 50px;
&:nth-last-child(n+2) {
padding-bottom: 30px;
}
@@ -44,6 +43,7 @@
.order_status_content{
display: flex;
align-items: center;
padding: 0 30px;
.order_status_title{
color: $color_font_two;
font-size: $font_size;
@@ -75,6 +75,24 @@
.order_status_des_select{
color: $color_font_one;
}
.pay_time{
height: 56px;
background: #f6f6f6;
border-radius: 20px;
color: #3C3C3C;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin-top: 20px;
text{
font-size: 28px;
color: $color_main;
padding: 0 10px;
}
}
}
.more{
width: 100%;
@@ -102,4 +120,20 @@
top: -10px;
right: -10px;
}
.refresh{
position: absolute;
top: 23px;
right: 20px;
display: flex;
color: #707070;
display: flex;
align-items: center;
.mconfont{
font-size: 30px;
}
.refresh_text{
font-size: 23px;
}
}
}
+95 -26
View File
@@ -1,42 +1,59 @@
import { Image, Text, View } from "@tarojs/components"
import { memo, useMemo, useState } from "react"
import { memo, useEffect, useMemo, useRef, useState } from "react"
import styles from './index.module.scss'
import classnames from "classnames";
import { formatDateTime, formatImgUrl } from "@/common/fotmat";
import { PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum";
import { ORDER_STATUS, PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum";
import * as dayjs from 'dayjs'
type Param = {
list: {
status: string,
time: string,
tag: string,
desc: string
}[],
payment_method: 0|PAYMENT_METHOD_PARAM,
type List = {
status: string,
time: string,
tag: string,
desc: string,
expire_time: string
}
//支付方式枚举
const {
PaymentMethodAccountPeriod,
PaymentMethodCashOnDelivery,
} = PAYMENT_METHOD
type Param = {
onRefresh?: () => void,
orderInfo?: {
logistics_details:List[], //订单状态列表
payment_method: 0|PAYMENT_METHOD_PARAM, //支付方式
status: number, //订单状态
}
}
export default memo(({list = [], payment_method = 0}:Param) => {
export default memo(({orderInfo = {logistics_details: [],payment_method: 0, status: 0}, onRefresh}:Param) => {
const [showMore, setShowMore] = useState(false)
const changeMore = () => {
setShowMore(() => !showMore)
}
const dataList = useMemo(() => {
return list.reverse()
}, [list])
return orderInfo.logistics_details?orderInfo?.logistics_details.reverse():[]
}, [orderInfo.logistics_details])
//订单状态枚举
const {SaleorderstatusWaitingPrePayment} = ORDER_STATUS
//支付方式枚举
const {
PaymentMethodAccountPeriod,
PaymentMethodCashOnDelivery,
} = PAYMENT_METHOD
//获取预付款最后时间
const endTime = useMemo(() => {
if(orderInfo.status == SaleorderstatusWaitingPrePayment.value && orderInfo.logistics_details.length > 0) {
return orderInfo.logistics_details[0].expire_time
}
return ''
}, [orderInfo])
return (
<>
{(dataList.length > 0)&&<View className={styles.order_flow_state}>
{(dataList?.length > 0)&&<View className={styles.order_flow_state}>
<View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}>
{dataList.map((item, index) => <View className={styles.order_status_item}>
{(dataList.length > 1)&&<View className={classnames(styles.order_status_tail, (index == 0)&&styles.order_status_tail_end)}></View>}
@@ -44,9 +61,9 @@ export default memo(({list = [], payment_method = 0}:Param) => {
<View className={styles.order_status_content}>
<View className={classnames(styles.order_status_title, (index == 0)&&styles.order_status_select)}>{item.status}</View>
<View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{formatDateTime(item.time)}</View>
{/* <View className={classnames(styles.order_status_tag, (index == 0)&&styles.order_status_tag_select)}>{item.tag}</View> */}
</View>
<Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text>
{(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&&<CountDown onFinish={onRefresh} endTime={endTime}/>}
</View>)}
</View>
{(dataList.length > 2) && <View className={styles.more} onClick={() => changeMore()}>
@@ -54,10 +71,62 @@ export default memo(({list = [], payment_method = 0}:Param) => {
<Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
</View>}
<View className={styles.image_tag}>
{(payment_method == PaymentMethodCashOnDelivery.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>}
{(payment_method == PaymentMethodAccountPeriod.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_7day.png')} className={styles.image}/>}
{(orderInfo.payment_method == PaymentMethodCashOnDelivery.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>}
{(orderInfo.payment_method == PaymentMethodAccountPeriod.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_7day.png')} className={styles.image}/>}
</View>
{(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&&<View className={styles.refresh} onClick={onRefresh}>
<Text className={classnames(styles.mconfont, 'iconfont icon-xianxiahuikuan')}></Text>
<Text className={classnames(styles.refresh_text)}>刷新</Text>
</View>}
</View>}
</>
)
})
})
//倒计时
const CountDown = ({endTime = '', onFinish}:{endTime:string, onFinish?:() => void}) => {
const [showTime, setShowTime] = useState('')
const timeObj:any = useRef()
useEffect(() => {
if(endTime) {
clearInterval(timeObj.current)
timeObj.current = setInterval(() => {
count_down()
}, 1000)
}
return () => {
clearInterval(timeObj.current)
}
}, [endTime])
const count_down = () => {
var startData = dayjs();
var endDate = dayjs(endTime);
if(startData >= endDate) {
clearInterval(timeObj.current)
onFinish?.()
setShowTime(() => '00:00:00')
return false
}
var _dd = endDate.diff(startData,'day');
var _hh = endDate.diff(startData,'hour');
var _mm = endDate.diff(startData,'minute');
var _ss = endDate.diff(startData,'second');
// 转换
var hh = _hh - (_dd*24);
var mm = _mm - (_hh*60);
var ss = _ss - (_mm*60);
// 格式化
var DD = ('00'+_dd).slice(-2);
var HH = ('00'+hh).slice(-2);
var MM = ('00'+mm).slice(-2);
var SS = ('00'+ss).slice(-2);
setShowTime(() => ` ${HH}:${MM}:${SS}`)
}
return (
<>
<View className={styles.pay_time}>
剩<Text>{showTime||'--:--:--'}</Text>支付关闭,订单自动取消
</View>
</>
)
}
@@ -35,9 +35,9 @@ $top:190px;
border-radius: 10px;
padding-bottom: 100px;
position: relative;
background: radial-gradient(circle 20px at left $top, transparent 20px, #fff 20px + 3px) left 0px/60% no-repeat ,
radial-gradient(circle 20px at right $top, transparent 20px, #fff 20px + 3px) right 0px/60% no-repeat;
filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, .16));
// background: radial-gradient(circle 20px at left $top, transparent 20px, #fff 20px + 3px) left 0px/60% no-repeat ,
// radial-gradient(circle 20px at right $top, transparent 20px, #fff 20px + 3px) right 0px/60% no-repeat;
// filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, .16));
position: relative;
&::before{
content: '';
+54 -17
View File
@@ -8,26 +8,34 @@ import MCheckbox from "@/components/checkbox";
import Popup from "@/components/popup";
import OfflinePay from "../offlinePay";
import ScanPay from "../scanPay";
import { GetOrderPayApi, SubmitOrderPayApi } from "@/api/orderPay";
import { GetOrderPayApi, SubmitOrderPayApi, GetPrepayOrderPayApi, SubmitPrepayOrderPayApi } from "@/api/orderPay";
import { formatPriceDiv } from "@/common/fotmat";
import {alert} from "@/common/common"
import { PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum";
import { ORDER_STATUS, PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum";
type Param = {
show?: true|false,
onClose?: () => void,
onSubmitSuccess?: () => void, //支付成功
orderInfo?: OrderInfo
orderInfo?: OrderInfo,
}
type OrderInfo = {
orderId: number, //应付单id
payment_method: 0|PAYMENT_METHOD_PARAM //支付方式
should_collect_order_id?: number, //应付单id
pre_collect_order_id?: number, //预付单id
status?: number, //订单状态
payment_method?: 0|PAYMENT_METHOD_PARAM //支付方式
sale_mode?: number //订单类型 0:大货 1剪板 2散剪
}
type PayStatus = 1|2|3|4|5|null //1:预存款, 2:账期,3:线下汇款, 4:扫码支付, 5:货到付款
export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param) => {
//支付方式枚举
const {PaymentMethodPreDeposit, PaymentMethodAccountPeriod, PaymentMethodCashOnDelivery} = PAYMENT_METHOD
//订单状态枚举
const {SaleorderstatusWaitingPrePayment} = ORDER_STATUS
//提交参数
const [submitData, setSubmitData] = useState<{id:number, payment_method: PayStatus}>({
id:0,
@@ -38,7 +46,7 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param)
const [offlinePayShow, setofflinePayShow] = useState(false)
const onShowOfflinePay = () => {
setofflinePayShow(true)
onClose?.()
// onClose?.()
}
//扫码支付
@@ -51,13 +59,22 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param)
//获取支付方式数据
const [payInfo, setPayInfo] = useState<any>()
const {fetchData: orderFetchData} = GetOrderPayApi()
const {fetchData: prepayOrderFetchData} = GetPrepayOrderPayApi()
const getOrderPay = async () => {
let {data} = await orderFetchData({id: orderInfo?.orderId})
setPayInfo(() => data)
if(orderInfo&&orderInfo.should_collect_order_id) {
//有应收单id时用应收单获取数据
let {data} = await orderFetchData({id: orderInfo?.should_collect_order_id})
setPayInfo(() => data)
} else {
//用预付单id获取支付信息
let {data} = await prepayOrderFetchData({id: orderInfo?.pre_collect_order_id})
setPayInfo(() => data)
}
}
useEffect(() => {
if(show&&orderInfo?.orderId) {
setSubmitData((val) => ({...val, id:orderInfo.orderId}))
if(show&&orderInfo&&(orderInfo?.should_collect_order_id||orderInfo?.pre_collect_order_id)) {
let id = orderInfo.should_collect_order_id||orderInfo.pre_collect_order_id
setSubmitData((val) => ({...val, id:id as number}))
getOrderPay()
}
}, [show, orderInfo])
@@ -73,14 +90,20 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param)
}
//提交支付
const {fetchData: submitFetchData} = SubmitOrderPayApi()
const {fetchData: submitFetchData} = SubmitOrderPayApi() //应收单提交
const {fetchData: submitPrepayOrderFetchData} = SubmitPrepayOrderPayApi() //预付单提交
const submitPay = async () => {
if(submitData.payment_method === null) {
alert.error('请选择支付方式')
return false
}
alert.loading('正在支付')
let res = await submitFetchData(submitData)
let res:any = null
if(orderInfo?.should_collect_order_id) {
res = await submitFetchData(submitData)
} else {
res = await submitPrepayOrderFetchData(submitData)
}
if(res.success) {
alert.success('支付成功')
onSubmitSuccess?.()
@@ -97,6 +120,20 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param)
)
}, [payInfo])
//是否显示七天账期
const show_account_payment = useMemo(() => {
console.log('orderInfo?.status::',orderInfo)
//剪板合散剪不显示
if(orderInfo?.sale_mode != 0) return false
//支付方式是账期支付,不显示
if(orderInfo?.payment_method == PaymentMethodAccountPeriod.value) return false
//支付方式是货到付款,不显示
if(orderInfo?.payment_method == PaymentMethodCashOnDelivery.value) return false
//订单状态是预付款,不显示
if(orderInfo?.status == SaleorderstatusWaitingPrePayment.value) return false
return true
}, [orderInfo])
//账期
const account_peyment = useMemo(() => {
const price = payInfo?.should_collect_money - payInfo?.amount_paid
@@ -105,8 +142,9 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param)
)
}, [payInfo])
//支付方式枚举
const {PaymentMethodPreDeposit, PaymentMethodAccountPeriod} = PAYMENT_METHOD
//选择改变
const changeSelect = () => {
}
return (
<View className={styles.payment_main}>
@@ -133,7 +171,7 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param)
</View>
</View>
<View className={styles.payment_list_con}>
<View className={styles.payment_list_item}>
<View className={styles.payment_list_item} onClick={changeSelect}>
<View className={styles.payment_list_item_left}>
<View className={styles.payment_list_item_left_name}>
<View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
@@ -143,13 +181,12 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param)
</View>
<MCheckbox status={submitData.payment_method == PaymentMethodPreDeposit.value} onSelect={() => advanceSelectData(PaymentMethodPreDeposit.value)} onClose={() => advanceSelectData(null)}/>
</View>
{(orderInfo?.payment_method != PaymentMethodAccountPeriod.value)&&<View className={styles.payment_list_item}>
{show_account_payment&&<View className={styles.payment_list_item}>
<View className={styles.payment_list_item_left}>
<View className={styles.payment_list_item_left_name}>
<View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
<View className={styles.payment_list_item_left_text}>{payInfo?.account_period}天账期</View>
</View>
{/* <View className={styles.payment_list_item_left_price}>可用额度 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)}</View> */}
{account_peyment}
</View>
<MCheckbox status={submitData.payment_method == PaymentMethodAccountPeriod.value} onSelect={() => periodSelectData(PaymentMethodAccountPeriod.value)} onClose={() => periodSelectData(null)}/>
@@ -0,0 +1,27 @@
.reason_return_con{
height: 50vh;
.reason_title{
padding: 10px 20px 0 20px;
height: 60px;
border-bottom: 1PX solid #F3F3F3;
box-sizing: border-box;
Text{
font-size: 26px;
border-bottom: 3px solid #000;
padding: 10px;
font-weight: 400;
}
}
.reason_scroll{
height: calc(100% - 70px);
.reason_list{
font-size: 26px;
padding: 30px 20px 0 20px;
color: #707070;
.reason_item{
margin-bottom: 36px;
}
}
}
}
@@ -0,0 +1,37 @@
import Popup from "@/components/popup";
import { ScrollView, Text, View } from "@tarojs/components";
import { memo, useMemo } from "react";
import styles from './index.module.scss'
//原因选择
type ReasonInfoParam = {
show?: boolean,
onClose?: () => void,
}
export default memo(({show = false, onClose}: ReasonInfoParam) => {
return (
<Popup showIconButton={false} show={show} title="退款说明" onClose={onClose} >
<View className={styles.reason_return_con}>
<View className={styles.reason_title}><Text>退款说明</Text></View>
<ScrollView scrollY className={styles.reason_scroll}>
<View className={styles.reason_list}>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
<View className={styles.reason_item}>完好无损带原标签</View>
</View>
</ScrollView>
</View>
</Popup>
)
})
+10 -5
View File
@@ -1,20 +1,25 @@
import Popup from "@/components/popup"
import { Textarea, View } from "@tarojs/components"
import { useCallback, useState } from "react"
import { useCallback, useEffect, useState } from "react"
import styles from './index.module.scss'
type Param = {
onBlur?: (val:any) => void
onSave?: (val: string) => void
defaultValue?: string
}
export default ({onBlur, onSave}:Param) => {
export default ({onBlur, onSave, defaultValue = ''}:Param) => {
const [descData, setDescData] = useState({
number: 0,
value: '',
count: 200
})
const getDesc = useCallback((e) => {
let value = e.detail.value
useEffect(() => {
getDesc(defaultValue)
}, [defaultValue])
const getDesc = useCallback((value) => {
let res = value
if(value.length > descData.count) {
res = value.slice(0, descData.count)
@@ -29,7 +34,7 @@ export default ({onBlur, onSave}:Param) => {
<View className={styles.order_popup}>
<View className={styles.order_popup_title}>编辑备注</View>
<View className={styles.order_popup_input}>
<Textarea placeholder="请添加备注" maxlength={descData.count} cursorSpacing={100} onInput={(e) => getDesc(e)} onBlur={(e) => onBlur?.(e)}></Textarea>
<Textarea placeholder="请添加备注" maxlength={descData.count} cursorSpacing={100} onInput={(e) => getDesc(e.detail.value)} onBlur={(e) => onBlur?.(e)}></Textarea>
<View className={styles.descDataNum}>{descData.number}/{descData.count}</View>
</View>
<View className={styles.order_save_address} onClick={() => setSave()}>保存</View>
@@ -1,11 +1,9 @@
.order_price{
display: flex;
align-items: center;
justify-content: space-between;
// justify-content: space-between;
width: 100%;
&:nth-last-child(n+2) {
margin-bottom: 30px;
}
.order_price_text{
font-size: $font_size_medium;
// margin-right: 10px;
@@ -41,7 +39,7 @@
}
}
.emphasis{
font-weight: 700;
// font-weight: 700;
}
.order_price_num{
color: $color_main;
@@ -51,7 +49,7 @@
font-size: $font_size_min;
}
&:nth-child(2) {
font-size: 26px;
font-size: 44px;
}
&:nth-child(3) {
font-size: $font_size_medium;
@@ -61,7 +59,7 @@
.emphasis_num{
text{
&:nth-child(2) {
font-size: $font_size_big;
font-size: 44px;
}
}
}
@@ -4,10 +4,12 @@ import {formatKbPrice} from '@/common/common'
import classnames from "classnames";
import styles from './index.module.scss'
type Param = {
style?: Object,
number?: number
style?: Object,
number?: number, //数量
priceTitle: string //描述
}
export default memo(({style, number = 0}:Param) => {
export default memo(({style, number = 0, priceTitle = ''}:Param) => {
const priceDom = useCallback(() => {
let res = number.toFixed(2).split('.')
let int_num = parseInt(res[0]) + ''
@@ -24,11 +26,7 @@ export default memo(({style, number = 0}:Param) => {
<>
<View className={styles.order_price}>
<View className={classnames(styles.order_price_text, styles.emphasis)}>
<Text>应付金额</Text>
<View className={styles.iconfont_msg}>
<Text className={classnames(styles.miconfont, 'iconfont icon-a-tuikuanshouhou')}></Text>
{/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */}
</View>
<Text>{priceTitle}:</Text>
</View>
<View className={classnames(styles.order_price_num, styles.emphasis_num)} style={style}>
{priceDom()}
+6
View File
@@ -0,0 +1,6 @@
export default {
navigationBarTitleText: '订单详情',
enablePullDownRefresh: true,
backgroundTextStyle: 'dark',
enableShareAppMessage: true,
}
+133
View File
@@ -0,0 +1,133 @@
.order_main{
min-height: 100%;
background-color:$color_bg_one;
padding: 20px;
padding-bottom: 190px;
box-sizing: border-box;
.order_title{
display: flex;
align-items: center;
padding: 20px 30px;
box-sizing: border-box;
background-color: #fff;
height: 116px;
border-radius: 20px;
margin-top: 20px;
text{
flex:1;
font-size: $font_size;
font-weight: 700;
}
.order_status{
background-color: #F0F0F0;
width: 148px;
height: 55px;
color: $color_font_three;
text-align: center;
line-height: 55px;
font-size: $font_size_medium;
border-radius: 30px;
&:nth-last-child(1) {
margin-left: 20px;
}
}
}
.order_desc{
display: flex;
align-items: center;
background-color: #fff;
padding: 20px;
min-height: 116px;
border-radius: 20px;
margin-top: 20px;
box-sizing: border-box;
.order_desc_con{
width: 150px;
font-size: $font_size;
font-weight: 700;
}
.order_desc_text, .order_desc_text_hint{
font-size: $font_size_medium;
color: $color_font_two;
margin-right: 10px;
flex:1;
word-break:break-all;
}
.order_desc_text_hint{
text-align: right;
}
.miconfont{
font-size: 20px;
color: $color_font_two;
}
}
.submit_order{
display: flex;
position: fixed;
bottom: 0;
left: 0;
justify-content: flex-end;
width: 100%;
align-items: center;
background-color: #fff;
box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16);
padding: 20px 20px;
box-sizing: border-box;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.order_btn {
width: 152px;
height: 72px;
border: 2px solid #dddddd;
border-radius: 46px;
display: flex;
justify-content: center;
align-items: center;
color: $color_font_three;
&:nth-child(n+2) {
margin-left: 34px;
}
}
.order_btn_select{
color: $color_main;
border: 2px solid $color_main;
}
.order_number_desc{
font-size: $font_size_medium;
color: $color_font_two;
}
}
.order_info{
background-color: #fff;
margin-top: 20px;
border-radius: 20px;
padding: 20px;
.order_info_title{
font-size: $font_size;
font-weight: 700;
margin-bottom: 20px;
}
.order_num{
display: flex;
justify-content: space-between;
align-items: center;
.order_num_btn{
font-size: $font_size_medium;
padding: 5px 10px;
border: 2px solid #007cf7;
border-radius: 10px;
color: $color_main;
}
}
text{
font-size: $font_size;
}
}
.weight_memo_con{
margin-bottom: 20px;
}
}
+228
View File
@@ -0,0 +1,228 @@
import {
GetSaleOrderDetailApi,
EditSaleOrderRemarkApi,
CancelOrderApi
} from "@/api/order";
import { GetOrderPayApi } from "@/api/orderPay";
import { alert, goLink } from "@/common/common";
import { ORDER_STATUS } from "@/common/enum";
import { formatDateTime, formatPriceDiv } from "@/common/fotmat";
import OrderBtns from "@/components/orderBtns";
import Popup from "@/components/popup";
import SearchInput from "@/components/searchInput";
import { Text, Textarea, View } from "@tarojs/components"
import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
import classnames from "classnames";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import AddressInfoDetail from "../components/addressInfoDetail";
import KindList from "../components/kindList";
import OrderState from "../components/orderState";
import Payment from "../components/payment";
import Remark from "../components/remark";
import styles from '../index.module.scss'
export default () => {
const [showDesc, setShowDesc] = useState(false)
const router = useRouter()
const orderId = useRef<number>(Number(router.params.id))
useDidShow(() => {
getSaleOrderPreView()
})
//获取订单详情
const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi()
const getSaleOrderPreView = async () => {
if(orderId.current) {
let res = await getOrderFetchData({id: orderId.current})
setOrderDetail(res.data)
setOrderRemark(res.data.remark)
}
Taro.stopPullDownRefresh()
}
//监听获取到的数据
useEffect(() => {
if(orderDetail)
formatData()
}, [orderDetail])
//格式化数据格式
const [formatDetailOrder, setFormatDetailOrder] = useState<any>() //格式化后的数据
const formatData = () => {
setFormatDetailOrder({
estimate_amount: orderDetail.estimate_amount, //预估金额
sale_mode: orderDetail.sale_mode,
sale_mode_name: orderDetail.sale_mode_name,
total_colors: orderDetail.total_colors, //总颜色数量
total_number: orderDetail.total_number, //总数量
total_fabrics: orderDetail.total_fabrics, //面料数量
unit: orderDetail.sale_mode == 0?'条':'m', //单位
list: orderDetail.product_list,
status: orderDetail.status, //订单状态
total_sale_price: orderDetail.total_sale_price, //销售金额
total_should_collect_money: orderDetail.total_should_collect_money, //应收金额
total_weight_error_discount: orderDetail.total_weight_error_discount, //空差优惠
actual_amount: orderDetail.actual_amount, //实付金额
the_previous_status: orderDetail.the_previous_status, //取消订单时的订单状态
})
}
const formatPreViewOrderMemo = useMemo(() => {
return formatDetailOrder
}, [formatDetailOrder])
//复制功能
const clipboardData = () => {
Taro.setClipboardData({
data: orderDetail?.order_no||'',
success: function (res) {
Taro.showToast({
icon: 'none',
title: '复制成功'
})
}
})
}
//格式化初始地址
const defaultAddress = useMemo(() => {
return {
province_name: orderDetail?.province_name,
city_name: orderDetail?.city_name,
district_name: orderDetail?.district_name,
address_detail: orderDetail?.address_detail,
// id: address.id,
name: orderDetail?.target_user_name,
phone: orderDetail?.target_user_phone
}
}, [orderDetail])
//订单备注
const {fetchData: remarkFetchData} = EditSaleOrderRemarkApi()
const [orderRemark, setOrderRemark] = useState('')
const getRemark = useCallback(async (e) => {
setOrderRemark(() => e)
let res = await remarkFetchData({remark:e, id: orderId.current})
if(res.success) {
getSaleOrderPreView()
alert.success('提交成功')
} else {
alert.error(res.msg)
}
setShowDesc(() => false)
}, [])
//支付所需数据
const payOrderInfo = useMemo(() => {
if(orderDetail)
return {orderId: orderDetail.should_collect_order_id, payment_method:orderDetail.payment_method }
}, [orderDetail])
//去付款
const [payMentShow, setPayMentShow] = useState(false)
const toPay = () => {
setPayMentShow(true)
}
//打开地址修改
const addressRef = useRef<any>(null)
//修改收货方式
const getShipmentMode = useCallback(() => {
getSaleOrderPreView()
}, [orderDetail])
//修改地址
const getAddress = useCallback(() => {
getSaleOrderPreView()
}, [orderDetail])
//获取底部按钮点击, 获取按钮状态
const orderStateClick = useCallback((val) => {
if(val == 1 || val == 6) {
//取消订单
getSaleOrderPreView()
}else if(val == 2) {
//待付款
toPay()
}
}, [orderDetail])
//页面下拉刷新
usePullDownRefresh(() => {
getSaleOrderPreView()
})
//支付成功
const onPaySuccess = useCallback(() => {
getSaleOrderPreView()
closePayShow()
}, [orderDetail])
//关闭支付弹窗
const closePayShow = useCallback(() => {
setPayMentShow(() => false)
}, [orderDetail])
//按钮所需数据
const orderInfo = useMemo(() => {
return {
status: orderDetail?.status, //订单状态
orderId: orderDetail?.id,
settle_mode: orderDetail?.settle_mode,
actual_amount: orderDetail?.actual_amount, //实付金额
wait_pay_amount: orderDetail?.wait_pay_amount, //待付金额
}
}, [orderDetail])
//订单状态枚举
const {SaleOrderStatusCancel} = ORDER_STATUS
return (
<View className={styles.order_main}>
{/* <View className={styles.weight_memo_con}>
<WeightMemo/>
</View> */}
<OrderState list={orderDetail?.logistics_details} payment_method={orderDetail?.payment_method}/>
<View >
<AddressInfoDetail orderId={orderDetail?.id} onSelect={getAddress} onChangeShipmentMode={getShipmentMode} ref={addressRef} defaultValue={defaultAddress} shipment_mode={orderDetail?.shipment_mode}/>
</View>
<KindList order={formatPreViewOrderMemo} />
<View className={styles.order_info} >
<View className={styles.order_info_title}>订单信息</View>
<SearchInput showBorder={false} title='单号' height={50}>
<View className={styles.order_num}>
<Text>{orderDetail?.order_no}</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
</View>
</SearchInput>
<SearchInput showBorder={false} title='下单时间' height={50}>
<Text>{formatDateTime(orderDetail?.create_time)}</Text>
</SearchInput>
<SearchInput showBorder={false} title='付款时间' height={50}>
<Text>{formatDateTime(orderDetail?.create_time)}</Text>
</SearchInput>
</View>
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
<View className={styles.order_desc_con}>订单备注</View>
{
orderRemark&&<View className={styles.order_desc_text}>{orderDetail?.remark}</View>||
<View className={styles.order_desc_text_hint}>填写备注</View>
}
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
</View>
{(orderDetail?.status != SaleOrderStatusCancel.value)&&<View className={styles.submit_order}>
<OrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
</View> }
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
<Remark onSave={(e) => getRemark(e)}/>
</Popup>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={payOrderInfo} />
<View className="common_safe_area_y"></View>
</View>
)
}
+1 -7
View File
@@ -62,21 +62,15 @@
color: $color_font_two;
}
}
.submit_order{
display: flex;
.submit_order_con{
position: fixed;
bottom: 0;
left: 0;
justify-content: flex-end;
width: 100%;
height: 175px;
align-items: center;
background-color: #fff;
box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16);
padding: 20px 20px;
box-sizing: border-box;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.order_btn {
width: 152px;
height: 72px;
+90 -28
View File
@@ -4,19 +4,20 @@ import {
CancelOrderApi
} from "@/api/order";
import { GetOrderPayApi } from "@/api/orderPay";
import { AddShoppingCartApi } from "@/api/shopCart";
import { alert, goLink } from "@/common/common";
import { ORDER_STATUS } from "@/common/enum";
import { formatDateTime, formatPriceDiv } from "@/common/fotmat";
import { formatDateTime, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
import OrderBtns from "@/components/orderBtns";
import Popup from "@/components/popup";
import SearchInput from "@/components/searchInput";
import ShopCart from "@/components/shopCart";
import { Text, Textarea, View } from "@tarojs/components"
import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
import classnames from "classnames";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import order from "../orderList/components/order";
import AddressInfoDetail from "./components/addressInfoDetail";
import ApplyAfterSales from "./components/applyAfterSales";
import ApplyRefund from "./components/applyRefund";
import KindList from "./components/kindList";
import OrderState from "./components/orderState";
import Payment from "./components/payment";
@@ -40,7 +41,8 @@ import styles from './index.module.scss'
setOrderDetail(res.data)
setOrderRemark(res.data.remark)
}
Taro.stopPullDownRefresh()
Taro.stopPullDownRefresh()
Taro.hideToast()
}
//监听获取到的数据
@@ -87,16 +89,19 @@ import styles from './index.module.scss'
})
}
//格式化初始地址
//初始地址数据
const defaultAddress = useMemo(() => {
return {
province_name: orderDetail?.province_name,
city_name: orderDetail?.city_name,
district_name: orderDetail?.district_name,
address_detail: orderDetail?.address_detail,
// id: address.id,
name: orderDetail?.target_user_name,
phone: orderDetail?.target_user_phone
phone: orderDetail?.target_user_phone,
shipment_mode: orderDetail?.shipment_mode,
id: orderDetail?.id,
sale_mode: orderDetail?.sale_mode,
status: orderDetail?.status
}
}, [orderDetail])
@@ -116,18 +121,17 @@ import styles from './index.module.scss'
setShowDesc(() => false)
}, [])
//支付所需数据
const payOrderInfo = useMemo(() => {
if(orderDetail)
return {orderId: orderDetail.should_collect_order_id, payment_method:orderDetail.payment_method }
}, [orderDetail])
//去付款
const [payMentShow, setPayMentShow] = useState(false)
const toPay = () => {
setPayMentShow(true)
}
//地址组件所需数据
const addressInfoDetailData = useMemo(() => {
return {orderId:orderDetail?.id, shipment_mode:orderDetail?.shipment_mode, status: orderDetail?.status}
}, [orderDetail])
//打开地址修改
const addressRef = useRef<any>(null)
@@ -143,15 +147,20 @@ import styles from './index.module.scss'
//获取底部按钮点击, 获取按钮状态
const orderStateClick = useCallback((val) => {
console.log('val::', val)
if(val == 1) {
console.log('123456789',val)
if(val == 1 || val == 6) {
//取消订单
getSaleOrderPreView()
}
if(val == 2) {
}else if(val == 2) {
//待付款
toPay()
} else if(val == 3) {
setRefundShow(true)
} else if(val == 7) {
//再购
addShopCart()
}
}, [orderDetail])
//页面下拉刷新
@@ -178,22 +187,73 @@ import styles from './index.module.scss'
settle_mode: orderDetail?.settle_mode,
actual_amount: orderDetail?.actual_amount, //实付金额
wait_pay_amount: orderDetail?.wait_pay_amount, //待付金额
sale_mode: orderDetail?.sale_mode, //订单类型
}
}, [orderDetail])
//订单状态枚举
const {SaleOrderStatusCancel} = ORDER_STATUS
//刷新页面
const refresh = useCallback(() => {
alert.loading('刷新中')
getSaleOrderPreView()
}, [orderDetail])
//退款申请
const [refundShow, setRefundShow] = useState(false)
const applyRefundClose = useCallback(() => {
setRefundShow(false)
}, [])
//查看物流
const getLogistics = useCallback(() => {
const list = orderDetail?.delivery_appendix_url.map(item => {
return formatImgUrl(item)
})
Taro.previewImage({
current: list[0], // 当前显示
urls: list // 需要预览的图片http链接列表
})
}, [orderDetail])
//添加购物车
const [showCart, setShowCart] = useState(false)
const {fetchData:addFetchData} = AddShoppingCartApi()
const addShopCart = async () => {
let color_list:{product_color_id: number, roll?: number, length?: number}[] = []
orderDetail?.product_list.map(pitem => {
pitem?.product_colors.map(citem => {
if(orderDetail?.sale_mode == 0) {
return color_list.push({product_color_id: citem.id, roll: citem.roll})
} else {
return color_list.push({product_color_id: citem.id, length: citem.length})
}
})
})
const state = await addFetchData({
sale_mode: orderDetail?.sale_mode,
color_list
})
if(state.success) {
Taro.showToast({
title:'已加入购物车'
})
setShowCart(true)
} else {
Taro.showToast({
icon:'none',
title: state.msg
})
}
}
return (
<View className={styles.order_main}>
{/* <View className={styles.weight_memo_con}>
<WeightMemo/>
</View> */}
<OrderState list={orderDetail?.logistics_details} payment_method={orderDetail?.payment_method}/>
<View >
<AddressInfoDetail orderId={orderDetail?.id} onSelect={getAddress} onChangeShipmentMode={getShipmentMode} ref={addressRef} defaultValue={defaultAddress} shipment_mode={orderDetail?.shipment_mode}/>
<OrderState orderInfo={orderDetail} onRefresh={refresh}/>
<View>
<AddressInfoDetail orderInfo={defaultAddress} onLogistics={getLogistics} onSelect={getAddress} onChangeShipmentMode={getShipmentMode} ref={addressRef} />
</View>
<KindList order={formatPreViewOrderMemo}/>
<View className={styles.order_info} >
@@ -219,14 +279,16 @@ import styles from './index.module.scss'
}
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
</View>
{(orderDetail?.status != SaleOrderStatusCancel.value)&&<View className={styles.submit_order}>
{(orderDetail?.status != SaleOrderStatusCancel.value)&&<View className={styles.submit_order_con}>
<OrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
<View className="common_safe_area_y"></View>
</View> }
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
<Remark onSave={(e) => getRemark(e)}/>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
<Remark onSave={(e) => getRemark(e)} defaultValue={orderDetail?.remark}/>
</Popup>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={payOrderInfo} />
{/* <ApplyAfterSales/> */}
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={orderDetail} />
<ApplyRefund show={refundShow} onClose={applyRefundClose}/>
<ShopCart show={showCart} onClose={() => setShowCart(false)}/>
<View className="common_safe_area_y"></View>
</View>
)
@@ -42,6 +42,9 @@
border-radius: 0px 20px 0px 20px;
}
}
.product_con{
margin-bottom: 20px;
}
.product_title{
display: flex;
align-items: center;
@@ -1,5 +1,6 @@
import { goLink } from "@/common/common";
import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
import LabAndImg from "@/components/LabAndImg";
import OrderBtns from "@/components/orderBtns";
import Payment from "@/pages/order/components/payment";
import { useSelector } from "@/reducers/hooks";
@@ -21,6 +22,9 @@ type Param = {
total_number: number,
status: 0,
id: number,
lab: any,
rgb: any,
texture_url: string,
payment_method: number, //支付方式
actual_amount: number, //实付金额
wait_pay_amount: number //待付金额
@@ -51,6 +55,7 @@ export default memo(({value, onClickBtn}: Param) => {
orderId: value?.id,
actual_amount: value?.actual_amount, //实付金额
wait_pay_amount: value?.wait_pay_amount, //待付金额
sale_mode: value?.sale_mode, //订单类型
}
}, [value])
@@ -75,7 +80,7 @@ export default memo(({value, onClickBtn}: Param) => {
</View>
<View className={styles.product_list}>
<View className={styles.image}>
<Image src={formatImgUrl(value?.product_list[0].product_colors[0].texture_url)}/>
<LabAndImg value={{lab:value.lab,rgb:value.rgb,texture_url:value.texture_url}}/>
<View className={styles.color_num}>{value?.product_list[0].product_colors[0].code}</View>
</View>
<View className={styles.color_list}>
@@ -99,7 +104,6 @@ export default memo(({value, onClickBtn}: Param) => {
<View className={styles.color_count_num}>{`${value?.total_fabrics}种面料,${value?.total_colors}种颜色,共${value?.total_number}条`}</View>
</View>
<OrderBtns orderInfo={orderInfo} onClick={orderBtnsClick}/>
</View>
)
})
+49 -3
View File
@@ -12,6 +12,8 @@ import { dataLoadingStatus, getFilterData } from "@/common/util"
import OrderStatusList from "./components/orderStatusList"
import Payment from "../order/components/payment"
import { ORDER_STATUS } from "@/common/enum"
import { AddShoppingCartApi } from "@/api/shopCart"
import ShopCart from "@/components/shopCart"
export default () => {
const {checkLogin} = useLogin()
@@ -96,10 +98,21 @@ export default () => {
//监听点击的按钮
const clickOrderBtn = useCallback(({status, orderInfo}) => {
if(status == 2) {
if(status == 1 || status == 6) {
getOrderList()
} else if(status == 2) {
//去支付
setPayOrderInfo({orderId:orderInfo.should_collect_order_id, payment_method:orderInfo.payment_method})
console.log('orderInfo::',orderInfo)
setPayOrderInfo({
should_collect_order_id: orderInfo.should_collect_order_id,//应付单id
pre_collect_order_id: orderInfo.pre_collect_order_id, //预付单id
status: orderInfo.status, //订单状态
payment_method: orderInfo.payment_method //支付方式
})
toPay()
} else if (status == 7) {
//购买
addShopCart(orderInfo)
}
}, [orderData])
@@ -120,6 +133,38 @@ export default () => {
closePayShow()
}, [])
//添加购物车
const [showCart, setShowCart] = useState(false)
const {fetchData:addFetchData} = AddShoppingCartApi()
const addShopCart = async (item) => {
let color_list:{product_color_id: number, roll?: number, length?: number}[] = []
item?.product_list.map(pitem => {
pitem?.product_colors.map(citem => {
if(item?.sale_mode == 0) {
return color_list.push({product_color_id: citem.id, roll: citem.roll})
} else {
return color_list.push({product_color_id: citem.id, length: citem.length})
}
})
})
const state = await addFetchData({
sale_mode: item?.sale_mode,
color_list
})
if(state.success) {
Taro.showToast({
title:'已加入购物车'
})
setShowCart(true)
} else {
Taro.showToast({
icon:'none',
title: state.msg
})
}
}
return (
<View className={styles.order_list_main}>
@@ -128,12 +173,13 @@ export default () => {
<OrderStatusList list={statusList} onSelect={changeStatus} defaultId={1}/>
</View>
<View className={styles.order_list}>
<InfiniteScroll statusMore={statusMore} selfonScrollToLower={getScrolltolower} refresherEnabled={true} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={getRefresherRefresh}>
<InfiniteScroll statusMore={statusMore} selfonScrollToLower={getScrolltolower} refresherEnabled={false} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={getRefresherRefresh}>
{orderData?.list.map(item => {
return <View key={item.id} className={styles.order_item_con}> <Order value={item} onClickBtn={clickOrderBtn}/></View>
})}
</InfiniteScroll>
</View>
<ShopCart show={showCart} onClose={() => setShowCart(false)}/>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={payOrderInfo}/>
</View>
)
@@ -1,12 +1,31 @@
.address_main{
margin-top: 20px;
}
.address_title_tag{
font-size: 24px;
color: #EE7500;
background: rgba(255,230,206,0.36);
border-radius: 20px 20px 0px 0px;
height: 56px;
display: flex;
align-items: center;
position: relative;
z-index: 999;
.miconfont {
font-size: 30px;
padding: 0 20px;
}
}
.order_address{
height: 178px;
background: #ffffff;
border-radius: 20px;
border-radius: 0 0 20px 20px;
display: flex;
align-items: center;
padding: 30px;
box-sizing: border-box;
margin-top: 20px;
position: relative;
.order_address_icon{
font-size: 50px;
@@ -26,87 +45,46 @@
.order_address_text_title{
font-size: $font_size_medium;
margin-top: 10px;
@include common_ellipsis;
display: flex;
align-items: center;
justify-content: space-between;
.moreIconfont{
font-size: 20px;
}
.address_text{
word-break:break-all;
font-size: 28px;
font-weight: 700;
}
}
.order_address_text_name{
color: #707070;
align-items: center;
display: flex;
margin-top: 20px;
text{
&:nth-child(1) {
color: #000;
font-weight: 700;
font-size: $color_font_one;
font-size: $font_size_medium;
margin-right: 40px;
}
&:nth-child(2) {
color: $color_font_one;
flex:1;
font-size: $font_size_medium;
}
}
}
}
.updateBtn{
width:200px;
font-size: $font_size_min;
background-color: #F0F0F0;
height: 64px;
border-radius: 24px;
width:152px;
font-size: 28px;
height: 60px;
color: $color_font_two;
position: absolute;
bottom: 10px;
right: 10px;
z-index: 999;
.updateBtn_list{
position: absolute;
display: flex;
z-index: 5;
width: 100%;
.updateBtn_item_select{
color: #fff;
}
}
.updateBtn_item{
flex:1;
text-align: center;
line-height: 64px;
}
.updateBtn_select{
color: #fff;
background-color: $color_main;
border-radius: 24px;
position: absolute;
width: 100px;
height: 61px;
z-index: 1;
transition: all 0.3s ease-in-out;
}
border: 2px solid #dddddd;
border-radius: 36px;
text-align: center;
line-height: 60px;
}
.order_address_text_no{
flex: 1;
font-size: $font_size;
font-weight: 700;
margin-left: 30px;
}
.order_address_more_icon{
color: $color_font_three;
font-size: $font_size;
}
}
.order_address_list {
height: 900px;
.order_address_title{
font-size: $font_size;
font-weight: 700;
width: 100%;
text-align: center;
padding: 20px 0 30px 0;
}
}
@@ -1,122 +1,69 @@
import { EditSaleOrderAddressApi, EditSaleOrderShipmentModeApi } from "@/api/order";
import { alert } from "@/common/common";
import { debounce } from "@/common/util";
import AddressList from "@/components/AddressList";
import Popup from "@/components/popup";
import { AFTER_ORDER_STATUS } from "@/common/enum";
import { Text, View } from "@tarojs/components"
import classnames from "classnames";
import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useState } from "react";
import {memo, useMemo} from "react";
import styles from './index.module.scss'
export type AddressInfoParam = {
province_name: string,
city_name: string,
district_name: string,
address_detail: string,
id?: number,
name: string,
phone: string,
}
type Param = {
onSelect?: (val:any) => void, //选择
defaultValue?: AddressInfoParam|null, //默认值
disabled?: false|true, //true禁用后只用于展示
shipment_mode?: 1|2, //1自提 2物流
onChangeShipmentMode?: (val: number) => void, //返回收货方式
orderId?: number //订单id
type Param = {
return_address?:string,
return_phone?: string,
onLogistics?: (val: number) => void,
stage?: number
}
export default memo(({return_address = '', return_phone = '', onLogistics, stage}:Param) => {
const {
ReturnStageApplying,
ReturnStageWaitCheck,
ReturnStageChecked,
ReturnStageReturned,
ReturnStageCancel,
ReturnStageQualityCheckPendingRefund,
ReturnStageServiceOrderPendingRefund,
ReturnStageRejected
} = AFTER_ORDER_STATUS
export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = null, orderId = 0, shipment_mode = 1}: Param, ref) => {
const [showAddressList, setShowAddressList] = useState(false)
//是否显示地址
const showAddress = useMemo(() => {
return stage != ReturnStageApplying.value
}, [stage])
useEffect(() => {
setUserInfo(() => defaultValue)
}, [defaultValue])
//上传物流
const upLogistics = useMemo(() => {
return stage == ReturnStageWaitCheck.value
}, [stage])
const [userInfo, setUserInfo] = useState<any>()
//查看物流
const showLogistics = useMemo(() => {
return (stage == ReturnStageChecked.value || stage == ReturnStageQualityCheckPendingRefund.value)
}, [stage])
//地址格式
const formatAddress = useMemo(() => {
if(userInfo)
return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail
}, [userInfo])
const changeShow = () => {
if(receivingStatus == 2)
setShowAddressList(() => true)
}
useEffect(() => {
setReceivingStatus(() => shipment_mode)
}, [shipment_mode])
//把内部方法提供给外部
useImperativeHandle(ref, () => ({
changeShow
}))
//收货方法,1:自提,2物流
const [receivingStatus, setReceivingStatus] = useState(1)
const {fetchData: shipmentModeFetchData} = EditSaleOrderShipmentModeApi()
const onReceivingStatus = (value, e) => {
e.stopPropagation()
changeReceivingStatus(value)
}
const changeReceivingStatus = debounce(async (value) => {
alert.loading('正在修改')
const res = await shipmentModeFetchData({id: orderId, shipment_mode:value})
if(res.success) {
alert.success('收货方式修改成功')
onChangeShipmentMode?.(value)
setReceivingStatus(value)
} else {
alert.none(res.msg)
}
}, 10)
//修改地址
const {fetchData: addressFetchData} = EditSaleOrderAddressApi()
const getAddress = async (value) => {
alert.loading('正在修改')
const res = await addressFetchData({id: orderId, address_id: value.id})
if(res.success) {
alert.success('地址修改成功')
onSelect?.(value)
setShowAddressList(() => false)
setUserInfo(() => value)
} else {
alert.none(res.msg)
}
}
return (
<View>
<View className={styles.order_address} onClick={() => changeShow()}>
<View className={classnames(styles.order_address_icon, 'iconfont', receivingStatus == 2?'icon-daohang':'icon-fahuo')}></View>
<View className={styles.order_address_text_con}>
<View className={styles.order_address_text_title}>
<Text>{formatAddress}</Text>
{(receivingStatus == 2)&&<Text className={classnames(styles.moreIconfont,'iconfont icon-a-moreback')}></Text>}
</View>
<View className={styles.order_address_text_name}>
<Text>{userInfo?.name}</Text>
<Text>{userInfo?.phone}</Text>
<>
{showAddress&&<View className={styles.address_main}>
<View className={styles.address_title_tag}>
<Text className={classnames(styles.miconfont, 'iconfont icon-zhuyi')}></Text>
请按以下退货地址寄回货物并提供退货物流信息
</View>
<View className={styles.order_address} >
<View className={classnames(styles.order_address_icon, 'iconfont','icon-fahuo')}></View>
<View className={styles.order_address_text_con}>
<View className={styles.order_address_text_title}>
<Text className={classnames(styles.address_text, styles.address_text_no)}>{return_address}</Text>
</View>
<View className={styles.order_address_text_name}>
<Text>管理员</Text>
<Text>{return_phone}</Text>
{upLogistics&&<View className={styles.updateBtn} onClick={() => onLogistics?.(1)}>
上传物流
</View>}
{showLogistics&&<View className={styles.updateBtn} onClick={() => onLogistics?.(2)}>
查看物流
</View>}
</View>
</View>
</View>
<View className={styles.updateBtn}>
<View className={styles.updateBtn_list}>
<View className={classnames(styles.updateBtn_item, receivingStatus==1&&styles.updateBtn_item_select)} onClick={(e) => onReceivingStatus(1,e)}>自提</View>
<View className={classnames(styles.updateBtn_item, receivingStatus==2&&styles.updateBtn_item_select)} onClick={(e) => onReceivingStatus(2,e)}>物流</View>
</View>
<View style={{transform: receivingStatus==1?'translateX(0)':'translateX(100%)'}} className={classnames(styles.updateBtn_select)}></View>
</View>
</View>
<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
<View className={styles.order_address_list}>
<View className={styles.order_address_title}>请选择收货地址</View>
<AddressList onSelect={getAddress}/>
</View>
</Popup>
</View>
</View>}
</>
)
}))
})
@@ -0,0 +1,146 @@
.apply_record_scroll{
height: 70vh;
}
.apply_record_main{
margin-top: 20px;
padding: 0 30px;
.kind_number{
width: 100%;
padding: 20px;
box-sizing: border-box;
text{
background-color: #F6F6F6;
border-radius: 10px;
font-size: $font_size_medium;
padding: 5px 0;
text-align: center;
width: 100%;
display: block;
color: $color_font_three;
}
}
.orders_list_con{
background-color: #fff;
border-radius: 20px;
padding: 20px;
.orders_return_title{
font-size: 28px;
font-weight: 700;
padding-bottom: 20px;
}
.order_list{
&:nth-child(n+2) {
margin-top: 45px;
}
.order_list_title{
display: flex;
align-items: center;
.tag{
font-size: $font_size_min;
background-color: #CDE5FF;
padding: 5px 10px;
border-radius: 6px;
color: $color_main;
}
.title{
font-weight: 700;
font-size: $font_size;
margin-left: 20px;
flex:1;
}
.num{
color: $color_font_two;
font-size: $font_size_min;
}
}
}
.order_list_scroll{
margin-top: 30px;
.order_list_item {
display: flex;
&:nth-child(2) {
margin-top: 30px;
}
.order_list_item_img{
width: 126px;
height: 126px;
border-radius: 20px;
}
.order_list_item_con{
display: flex;
width: 100%;
flex:1;
border-bottom: 1px solid #f0f0f0;
height: 150px;
padding-top: 20px;
box-sizing: border-box;
}
.order_list_item_des{
flex:1;
box-sizing: border-box;
padding-left: 30px;
.order_list_item_title{
font-weight: 700;
font-size: $font_size;
margin-bottom: 15px;
}
.order_list_item_price{
font-size: 26px;
color: $color_font_three;
}
}
.order_list_item_count{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
.count_num{
color: $color_main;
font-size: $font_size;
margin-bottom: 15px;
font-weight: 400;
text{
font-size: $font_size_min;
}
}
.count_price {
font-size: $font_size;
font-weight: 700;
text{
font-size: $font_size_min;
}
}
}
}
}
.order_total{
padding-top: 30px;
display: flex;
justify-content: space-between;
text{
&:nth-child(1) {
font-size: 28px;
font-weight: 700;
}
&:nth-child(2) {
font-size: 32px;
font-weight: 700;
color: #007AFF;
}
}
}
.order_estimated_amount{
display: flex;
align-items: flex-end;
flex-direction: column;
padding: 30px 0;
.order_price_des{
font-size: $font_size_medium;
color: $color_font_two;
}
}
}
}
@@ -0,0 +1,124 @@
import { SaleOrderOrderDetailApi } from "@/api/salesAfterOrder";
import { formatHashTag, formatPriceDiv } from "@/common/fotmat";
import LabAndImg from "@/components/LabAndImg";
import Popup from "@/components/popup";
import { ScrollView, Text, View } from "@tarojs/components";
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import styles from './index.module.scss'
type Param = {
show?: true|false,
onClose?: () => void,
onSubmit?: () => void,
id?: number
}
export default memo(({show, onClose, onSubmit, id}:Param) => {
useEffect(() => {
if(show && id) getSaleOrderPreView()
}, [show, id])
//获取订单详情
const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
const {fetchData: saleOrderOrderDetailData} = SaleOrderOrderDetailApi()
const getSaleOrderPreView = async () => {
if(id) {
let res = await saleOrderOrderDetailData({id: id})
setOrderDetail(res.data)
}
Taro.stopPullDownRefresh()
}
//格式化数据格式
const [formatDetailOrder, setFormatDetailOrder] = useState<any>() //格式化后的数据
const formatData = () => {
setFormatDetailOrder({
estimate_amount: orderDetail.estimate_amount, //预估金额
sale_mode: orderDetail.sale_mode,
sale_mode_name: orderDetail.sale_mode_name,
total_colors: orderDetail.total_colors, //总颜色数量
total_number: orderDetail.total_number, //总数量
total_fabrics: orderDetail.total_fabrics, //面料数量
unit: orderDetail.sale_mode == 0?'条':'m', //单位
list: orderDetail.product_list,
stage: orderDetail.stage, //订单状态
type: orderDetail.type, //退货or退款
total_sale_price: orderDetail.total_sale_price, //销售金额
total_should_collect_money: orderDetail.total_should_collect_money, //应收金额
total_weight_error_discount: orderDetail.total_weight_error_discount, //空差优惠
actual_amount: orderDetail.actual_amount, //实付金额
the_previous_status: orderDetail.the_previous_status, //取消订单时的订单状态
})
}
//监听获取到的数据
useEffect(() => {
if(orderDetail)
formatData()
}, [orderDetail])
//对应数量
const formatCount = useCallback((item) => {
return formatDetailOrder?.sale_mode == 0? item.roll : Number(item.length / 100)
}, [formatDetailOrder])
//对应单价
const standardPrice = useCallback(price => {
return formatPriceDiv(price).toLocaleString() + '/' + (formatDetailOrder?.sale_mode == 1?'m':'kg')
}, [formatDetailOrder])
//数量格式
const numText = useMemo(() => {
if(formatDetailOrder)
return `${formatDetailOrder?.total_fabrics}种面料,${formatDetailOrder?.total_colors}种颜色,共${formatDetailOrder?.total_number}${formatDetailOrder?.unit}`
}, [formatDetailOrder])
//整理颜色
const labAndRgbAndUrl = useCallback((item) => {
return {lab:{...item?.lab}, rgb:{...item?.rgb}, texturl_url: item?.texturl_url}
}, [])
return (
<>
<Popup show={show} title="申请记录" onClose={onClose}>
{formatDetailOrder&&<View className={styles.apply_record_main}>
<View className={styles.kind_number}><Text>{numText}</Text></View>
<ScrollView scrollY className={styles.apply_record_scroll}>
<View className={styles.orders_list_con}>
{
formatDetailOrder?.list?.map(item => {
return <View key={item.product_code} className={styles.order_list}>
<View className={styles.order_list_title}>
<View className={styles.tag}>{formatDetailOrder.sale_mode_name}</View>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.num}>共{item?.product_colors.length}种</View>
</View>
<View className={styles.order_list_scroll}>
{item?.product_colors?.map(colorItem => {
return <View key={colorItem.id} className={styles.order_list_item}>
<View className={styles.order_list_item_img}>
<LabAndImg value={labAndRgbAndUrl(colorItem)}/>
</View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>{colorItem.code + ' ' + colorItem.name}</View>
<View className={styles.order_list_item_price}>¥{standardPrice(colorItem.sale_price)}</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×{formatCount(colorItem)}<text>{formatDetailOrder.unit}</text></View>
<View className={styles.count_price}><text>¥</text>{formatPriceDiv(colorItem.estimate_amount).toLocaleString()}</View>
</View>
</View>
</View>
})}
</View>
</View>
})
}
<View className={styles.order_total}>
<Text>申请条数</Text>
<Text>×{orderDetail?.total_number}</Text>
</View>
</View>
</ScrollView>
</View>}
</Popup>
</>
)
})
@@ -1,14 +1,17 @@
.orders_list_title{
padding: 20px 20px 10px 20px;
color: $color_font_two;
font-size: $font_size_medium;
.kindsList_main{
margin-top: 20px;
}
.orders_list_con{
background-color: #fff;
border-radius: 20px;
padding: 20px;
.orders_return_title{
font-size: 28px;
font-weight: 700;
padding-bottom: 20px;
}
.order_list{
&:nth-child(n+2) {
margin-top: 30px;
@@ -47,7 +50,6 @@
width: 126px;
height: 126px;
border-radius: 20px;
background-color: red;
}
.order_list_item_con{
display: flex;
@@ -96,6 +98,21 @@
}
}
}
.order_total{
padding-top: 20px;
display: flex;
justify-content: space-between;
text{
&:nth-child(1) {
font-size: 28px;
font-weight: 700;
}
&:nth-child(2) {
font-size: 24px;
font-weight: 700;
}
}
}
.order_estimated_amount{
display: flex;
align-items: flex-end;
@@ -1,6 +1,7 @@
import { ORDER_STATUS } from "@/common/enum"
import { formatHashTag, formatPriceDiv } from "@/common/fotmat"
import { View } from "@tarojs/components"
import LabAndImg from "@/components/LabAndImg"
import { Text, View } from "@tarojs/components"
import { memo, useCallback, useMemo } from "react"
import EstimatedAmount from "../estimatedAmount"
import styles from './index.module.scss'
@@ -14,7 +15,8 @@ type OrderParam = {
total_colors: number,
total_fabrics: number,
total_number: number,
status: number, //订单状态
stage: number, //订单状态
type: 1|2, //1退货, 2退款
total_sale_price: number, //销售金额
total_should_collect_money: number, //应收金额
total_weight_error_discount: number, //空差优惠
@@ -43,48 +45,60 @@ export default memo(({order, comfirm = false}:Param) => {
return `${order?.total_fabrics}种面料,${order?.total_colors}种颜色,共${order?.total_number}${order?.unit}`
}, [order])
const {
SaleOrderStatusBooking, // 待接单
SaleOrderStatusArranging, // 配布中
SaleOrderStatusArranged, // 已配布
SaleOrderStatusWaitingPayment, // 待付款
SaleOrderStatusWaitingDelivery, // 待发货
SaleOrderStatusWaitingReceipt, // 待收货
SaleOrderStatusAlreadyReceipt, // 已收货
SaleOrderStatusComplete, // 已完成
SaleOrderStatusRefund, // 已退款
SaleOrderStatusCancel, // 已取消
} = ORDER_STATUS
// const {
// SaleOrderStatusBooking, // 待接单
// SaleOrderStatusArranging, // 配布中
// SaleOrderStatusArranged, // 已配布
// SaleOrderStatusWaitingPayment, // 待付款
// SaleOrderStatusWaitingDelivery, // 待发货
// SaleOrderStatusWaitingReceipt, // 待收货
// SaleOrderStatusAlreadyReceipt, // 已收货
// SaleOrderStatusComplete, // 已完成
// SaleOrderStatusRefund, // 已退款
// SaleOrderStatusCancel, // 已取消
// } = ORDER_STATUS
//金额列表枚举
const priceList = [
{
id:1,
value:[SaleOrderStatusBooking.value, SaleOrderStatusArranging.value],
label:'预估金额',
value:[],
label:'退货条数',
field: 'estimate_amount'
},
{
id:2,
value:[SaleOrderStatusArranged.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
label:'合计金额',
value:[],
label:'扣款金额',
field: 'total_sale_price'
},
{
id:3,
value:[SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
label:'空差优惠',
value:[],
label:'其他扣款',
field: 'total_weight_error_discount'
},
{
id:4,
value:[ SaleOrderStatusWaitingPayment.value],
label:'应付金额',
value:[],
label:'应退金额',
field: 'total_should_collect_money'
},
{
id:5,
value:[SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
value:[],
label:'退款金额',
field: 'total_should_collect_money'
},
{
id:6,
value:[],
label:'退款去向',
field: 'actual_amount'
},
{
id:7,
value:[],
label:'实付金额',
field: 'actual_amount'
}
@@ -97,38 +111,26 @@ export default memo(({order, comfirm = false}:Param) => {
const priceConDom = useMemo(() => {
if(!order) return
//确认订单
if(comfirm == true) {
return <EstimatedAmount number={formatPriceDiv(order.estimate_amount)} title="预估金额" />
}
//订单为取消订单状态
if(order?.status == SaleOrderStatusCancel.value) {
return (
<>
{
priceList.map(item => {
return <>{showPrice(item, order?.the_previous_status)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
})
}
</>
)
} else {
return (
<>
{
priceList.map(item => {
return <>{showPrice(item, order?.status)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
})
}
</>
)
}
return (
<>
{
priceList.map(item => {
return <>{showPrice(item, order?.stage)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
})
}
</>
)
}, [order])
//整理颜色
const labAndRgbAndUrl = useCallback((item) => {
return {lab:{...item?.lab}, rgb:{...item?.rgb}, texturl_url: item?.texturl_url}
}, [])
return (
<>
<View className={styles.orders_list_title}>{numText}</View>
<View className={styles.kindsList_main}>
<View className={styles.orders_list_con}>
<View className={styles.orders_return_title}>{order?.type == 1?'退货信息':'退款信息'}</View>
{
order?.list?.map(item => {
return <View key={item.product_code} className={styles.order_list}>
@@ -140,7 +142,9 @@ export default memo(({order, comfirm = false}:Param) => {
<View className={styles.order_list_scroll}>
{item?.product_colors?.map(colorItem => {
return <View key={colorItem.id} className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_img}>
<LabAndImg value={labAndRgbAndUrl(colorItem)}/>
</View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>{colorItem.code + ' ' + colorItem.name}</View>
@@ -157,10 +161,11 @@ export default memo(({order, comfirm = false}:Param) => {
</View>
})
}
<View className={styles.order_total}><Text>合计</Text><Text>{numText}</Text></View>
<View className={styles.order_estimated_amount}>
{priceConDom}
</View>
</View>
</>
</View>
)
})
@@ -1,18 +0,0 @@
.order_flow_state{
display: flex;
align-items: center;
padding: 0 30px;
height: 116px;
background-color: #fff;
border-radius: 20px;
.order_flow_state_text{
color: $color_main;
font-size:$font_size;
font-weight: 700;
}
.order_flow_state_desc{
color: $color_font_three;
font-size: $font_size_medium;
margin-left: 50px;
}
}
@@ -1,14 +0,0 @@
import { View } from "@tarojs/components"
import styles from './index.module.scss'
export default ({
state = '',
desc = ''
}) => {
return (
<View className={styles.order_flow_state}>
<View className={styles.order_flow_state_text}>{state}</View>
<View className={styles.order_flow_state_desc}>{desc}</View>
</View>
)
}
@@ -15,7 +15,6 @@
}
.order_status_item{
position: relative;
padding-left: 50px;
&:nth-last-child(n+2) {
padding-bottom: 30px;
}
@@ -44,6 +43,7 @@
.order_status_content{
display: flex;
align-items: center;
padding: 0 30px;
.order_status_title{
color: $color_font_two;
font-size: $font_size;
@@ -75,6 +75,24 @@
.order_status_des_select{
color: $color_font_one;
}
.pay_time{
height: 56px;
background: #f6f6f6;
border-radius: 20px;
color: #3C3C3C;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin-top: 20px;
text{
font-size: 28px;
color: $color_main;
padding: 0 10px;
}
}
}
.more{
width: 100%;
@@ -102,4 +120,20 @@
top: -10px;
right: -10px;
}
.refresh{
position: absolute;
top: 23px;
right: 20px;
display: flex;
color: #707070;
display: flex;
align-items: center;
.mconfont{
font-size: 30px;
}
.refresh_text{
font-size: 23px;
}
}
}
@@ -1,42 +1,59 @@
import { Image, Text, View } from "@tarojs/components"
import { memo, useMemo, useState } from "react"
import { memo, useEffect, useMemo, useRef, useState } from "react"
import styles from './index.module.scss'
import classnames from "classnames";
import { formatDateTime, formatImgUrl } from "@/common/fotmat";
import { PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum";
import { ORDER_STATUS, PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum";
import * as dayjs from 'dayjs'
type Param = {
list: {
status: string,
time: string,
tag: string,
desc: string
}[],
payment_method: 0|PAYMENT_METHOD_PARAM,
type List = {
status: string,
time: string,
tag: string,
desc: string,
expire_time: string
}
//支付方式枚举
const {
PaymentMethodAccountPeriod,
PaymentMethodCashOnDelivery,
} = PAYMENT_METHOD
type Param = {
onRefresh?: () => void,
orderInfo?: {
logistics_details:List[], //订单状态列表
payment_method: 0|PAYMENT_METHOD_PARAM, //支付方式
status: number, //订单状态
}
}
export default memo(({list = [], payment_method = 0}:Param) => {
export default memo(({orderInfo = {logistics_details: [],payment_method: 0, status: 0}, onRefresh}:Param) => {
const [showMore, setShowMore] = useState(false)
const changeMore = () => {
setShowMore(() => !showMore)
}
const dataList = useMemo(() => {
return list.reverse()
}, [list])
return orderInfo.logistics_details?orderInfo?.logistics_details.reverse():[]
}, [orderInfo.logistics_details])
//订单状态枚举
const {SaleorderstatusWaitingPrePayment} = ORDER_STATUS
//支付方式枚举
const {
PaymentMethodAccountPeriod,
PaymentMethodCashOnDelivery,
} = PAYMENT_METHOD
//获取预付款最后时间
const endTime = useMemo(() => {
if(orderInfo.status == SaleorderstatusWaitingPrePayment.value && orderInfo.logistics_details.length > 0) {
return orderInfo.logistics_details[0].expire_time
}
return ''
}, [orderInfo])
return (
<>
{(dataList.length > 0)&&<View className={styles.order_flow_state}>
{(dataList?.length > 0)&&<View className={styles.order_flow_state}>
<View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}>
{dataList.map((item, index) => <View className={styles.order_status_item}>
{(dataList.length > 1)&&<View className={classnames(styles.order_status_tail, (index == 0)&&styles.order_status_tail_end)}></View>}
@@ -44,9 +61,9 @@ export default memo(({list = [], payment_method = 0}:Param) => {
<View className={styles.order_status_content}>
<View className={classnames(styles.order_status_title, (index == 0)&&styles.order_status_select)}>{item.status}</View>
<View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{formatDateTime(item.time)}</View>
{/* <View className={classnames(styles.order_status_tag, (index == 0)&&styles.order_status_tag_select)}>{item.tag}</View> */}
</View>
<Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text>
{(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&&<CountDown onFinish={onRefresh} endTime={endTime}/>}
</View>)}
</View>
{(dataList.length > 2) && <View className={styles.more} onClick={() => changeMore()}>
@@ -54,10 +71,62 @@ export default memo(({list = [], payment_method = 0}:Param) => {
<Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
</View>}
<View className={styles.image_tag}>
{(payment_method == PaymentMethodAccountPeriod.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>}
{(payment_method == PaymentMethodCashOnDelivery.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_7day.png')} className={styles.image}/>}
{(orderInfo.payment_method == PaymentMethodCashOnDelivery.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>}
{(orderInfo.payment_method == PaymentMethodAccountPeriod.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_7day.png')} className={styles.image}/>}
</View>
{(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&&<View className={styles.refresh} onClick={onRefresh}>
<Text className={classnames(styles.mconfont, 'iconfont icon-xianxiahuikuan')}></Text>
<Text className={classnames(styles.refresh_text)}>刷新</Text>
</View>}
</View>}
</>
)
})
})
//倒计时
const CountDown = ({endTime = '', onFinish}:{endTime:string, onFinish?:() => void}) => {
const [showTime, setShowTime] = useState('')
const timeObj:any = useRef()
useEffect(() => {
if(endTime) {
clearInterval(timeObj.current)
timeObj.current = setInterval(() => {
count_down()
}, 1000)
}
return () => {
clearInterval(timeObj.current)
}
}, [endTime])
const count_down = () => {
var startData = dayjs();
var endDate = dayjs(endTime);
if(startData >= endDate) {
clearInterval(timeObj.current)
onFinish?.()
setShowTime(() => '00:00:00')
return false
}
var _dd = endDate.diff(startData,'day');
var _hh = endDate.diff(startData,'hour');
var _mm = endDate.diff(startData,'minute');
var _ss = endDate.diff(startData,'second');
// 转换
var hh = _hh - (_dd*24);
var mm = _mm - (_hh*60);
var ss = _ss - (_mm*60);
// 格式化
var DD = ('00'+_dd).slice(-2);
var HH = ('00'+hh).slice(-2);
var MM = ('00'+mm).slice(-2);
var SS = ('00'+ss).slice(-2);
setShowTime(() => ` ${HH}:${MM}:${SS}`)
}
return (
<>
<View className={styles.pay_time}>
剩<Text>{showTime||'--:--:--'}</Text>支付关闭,订单自动取消
</View>
</>
)
}
@@ -0,0 +1,35 @@
.logistics_main{
padding: 20px 30px;
box-sizing: border-box;
.logistics_image{
display: flex;
.title_desc{
font-size: 28px;
font-weight: 700;
padding-top: 50px;
box-sizing: border-box;
}
.upload_image{
flex:1;
}
}
.logistics_desc{
margin-top: 50px;
}
.btns_two{
display: flex;
height: 82px;
font-size: $font_size_big;
border-radius: 40px;
margin-top: 50px;
.verify_btn{
flex:1;
border-radius: 40px;
background: #007aff;
text-align: center;
line-height: 82px;
color: #fff;
}
}
}
@@ -0,0 +1,70 @@
import Popup from "@/components/popup";
import { Text, View } from "@tarojs/components";
import { memo, useCallback, useEffect, useRef, useState } from "react";
import UploadImage from "@/components/uploadImage"
import styles from './index.module.scss'
import TextareaEnhance from "@/components/textareaEnhance";
import { ReturnApplyLogisticsApi } from "@/api/salesAfterOrder";
import { alert } from "@/common/common";
type Param = {
show?: true|false,
onClose?: () => void,
onSubmit?: () => void,
id?: number //订单id
}
export default memo(({show = false, onClose, onSubmit, id = 0}: Param) => {
//需要提交的数据
const submitData = useRef({
accessory_url: [],
remark: '',
id: 0
})
useEffect(() => {
if(id) submitData.current.id = id
}, [id])
//获取图片列表
const getImageList = useCallback((list) => {
submitData.current.accessory_url = list
}, [])
//备注
const getOtherReason = useCallback((val) => {
submitData.current.remark = val
}, [])
//确定
const {fetchData} = ReturnApplyLogisticsApi()
const onSubmitEven = async () => {
if(!id) return alert.error('参数有误')
if(submitData.current.accessory_url.length <= 0) return alert.error('请上传附件')
let res = await fetchData(submitData.current)
if(res.success) {
alert.success('上传成功')
} else {
alert.error('上传失败')
}
}
return (
<>
<Popup show={show} title="上传物流" onClose={onClose}>
<View className={styles.logistics_main}>
<View className={styles.logistics_image}>
<Text className={styles.title_desc}>上传附件:</Text>
<View className={styles.upload_image}>
<UploadImage onChange={getImageList}/>
</View>
</View>
<View className={styles.logistics_desc}>
<TextareaEnhance onChange={getOtherReason} title="备注:" placeholder="请输入备注信息"/>
</View>
<View className={styles.btns_two}>
<View className={styles.verify_btn } onClick={() => onSubmitEven()}>保存</View>
</View >
</View>
</Popup>
</>
)
})
+74 -48
View File
@@ -3,18 +3,23 @@ import {
EditSaleOrderRemarkApi,
} from "@/api/order";
import { GetOrderPayApi } from "@/api/orderPay";
import { SaleOrderOrderDetailApi } from "@/api/salesAfterOrder";
import { alert, goLink } from "@/common/common";
import { ORDER_STATUS } from "@/common/enum";
import { formatDateTime, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
import AfterOrderBtns from "@/components/afterOrderBtns";
import OrderBtns from "@/components/orderBtns";
import SearchInput from "@/components/searchInput";
import { Image, Text, Textarea, View } from "@tarojs/components"
import Taro, {useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
import classnames from "classnames";
import { useCallback, useEffect, useMemo, useRef, useState, memo } from "react";
import AddressInfoDetail from "./components/addressInfoDetail";
import ApplyRecord from "./components/applyRecord";
import ContentBox from "./components/contentBox";
import KindList from "./components/kindList";
import OrderState from "./components/orderState";
import ReturnLogistics from "./components/returnLogistics";
import styles from './index.module.scss'
export default () => {
@@ -27,10 +32,10 @@ import styles from './index.module.scss'
//获取订单详情
const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi()
const {fetchData: saleOrderOrderDetailData} = SaleOrderOrderDetailApi()
const getSaleOrderPreView = async () => {
if(orderId.current) {
let res = await getOrderFetchData({id: orderId.current})
let res = await saleOrderOrderDetailData({id: orderId.current})
setOrderDetail(res.data)
}
Taro.stopPullDownRefresh()
@@ -54,7 +59,8 @@ import styles from './index.module.scss'
total_fabrics: orderDetail.total_fabrics, //面料数量
unit: orderDetail.sale_mode == 0?'条':'m', //单位
list: orderDetail.product_list,
status: orderDetail.status, //订单状态
stage: orderDetail.stage, //订单状态
type: orderDetail.type, //退货or退款
total_sale_price: orderDetail.total_sale_price, //销售金额
total_should_collect_money: orderDetail.total_should_collect_money, //应收金额
total_weight_error_discount: orderDetail.total_weight_error_discount, //空差优惠
@@ -69,13 +75,7 @@ import styles from './index.module.scss'
//获取底部按钮点击, 获取按钮状态
const orderStateClick = useCallback((val) => {
if(val == 1) {
//取消订单
getSaleOrderPreView()
}
if(val == 2) {
}
}, [orderDetail])
//页面下拉刷新
@@ -87,34 +87,61 @@ import styles from './index.module.scss'
//按钮所需数据
const orderInfo = useMemo(() => {
return {
status: orderDetail?.status, //订单状态
stage: orderDetail?.stage, //售后订单状态
orderId: orderDetail?.id,
settle_mode: orderDetail?.settle_mode,
actual_amount: orderDetail?.actual_amount, //实付金额
wait_pay_amount: orderDetail?.wait_pay_amount, //待付金额
type: orderDetail?.type, //退货or退款
sale_mode: orderDetail?.sale_model, //订单类型
}
}, [orderDetail])
//订单状态枚举
const {SaleOrderStatusCancel} = ORDER_STATUS
//物流显示
const [logisticsShow, setLogisticsShow] = useState(false)
const onShowLogistics = useCallback((val) => {
if(val == 1) {
setLogisticsShow(true)
} else {
const list = orderDetail?.fabric_piece_accessory_url.map(item => {
return formatImgUrl(item)
})
Taro.previewImage({
current: list[0], // 当前显示
urls: list // 需要预览的图片http链接列表
})
}
}, [orderDetail])
const onCloseLogistics = useCallback(() => setLogisticsShow(false), [])
//物流成功上传
const logisticsSuccess = useCallback(() => {
getSaleOrderPreView()
}, [])
//显示生气记录
const [applyRecord, setApplyRecord] = useState(false)
return (
<View className={styles.order_main}>
<OrderState list={orderDetail?.logistics_details} payment_method={orderDetail?.payment_method}/>
<OrderState orderInfo={orderDetail}/>
<AddressInfoDetail return_address={orderDetail?.return_address} return_phone={orderDetail?.return_phone} stage={orderDetail?.stage} onLogistics={onShowLogistics}/>
<KindList order={formatPreViewOrderMemo}/>
<OrderDes/>
<OrderDes orderInfo={orderDetail}/>
{(orderDetail?.status != SaleOrderStatusCancel.value)&&<View className={styles.submit_order}>
<OrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
<AfterOrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
</View>}
<AfterSalePricture/>
<AfterSalePricture urls={orderDetail?.fabric_piece_accessory_url}/>
<ReturnLogistics show={logisticsShow} id={orderDetail?.return_apply_order_id} onClose={onCloseLogistics} onSubmit={logisticsSuccess}/>
<ApplyRecord show={applyRecord} id={orderDetail?.id} onClose={() => setApplyRecord(false)}/>
<View className="common_safe_area_y"></View>
</View>
)
}
const OrderDes = memo(({val = ''}:{val?:string}) => {
const OrderDes = memo(({orderInfo}:{orderInfo?:any}) => {
//复制功能
const clipboardData = () => {
const clipboardData = (val) => {
Taro.setClipboardData({
data: val,
success: function (res) {
@@ -130,58 +157,57 @@ import styles from './index.module.scss'
<View className={styles.order_info_title}>订单信息</View>
<SearchInput showBorder={false} title='售后单号' height={50}>
<View className={styles.order_num}>
<Text>RA-LY-2204240002</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
<Text>{orderInfo?.return_order_no}</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData(orderInfo?.return_order_no)}>复制</View>
</View>
</SearchInput>
<SearchInput showBorder={false} title='订单号' height={50}>
<View className={styles.order_num}>
<Text>XS-LY-2204210002</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
<Text>{orderInfo?.order_no}</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData(orderInfo?.order_no)}>复制</View>
</View>
</SearchInput>
<SearchInput showBorder={false} title='退款说明' height={50}>
<Text>其他问题</Text>
<SearchInput showBorder={false} title='退货原因' height={50}>
<Text>{orderInfo?.return_reason_name}</Text>
</SearchInput>
<SearchInput showBorder={false} title='退货说明' height={50}>
<Text>{orderInfo?.return_explain_name}</Text>
</SearchInput>
<SearchInput showBorder={false} title='其它说明' height={50}>
<Text>板布疵点太多</Text>
<Text>{orderInfo?.return_remark}</Text>
</SearchInput>
<SearchInput showBorder={false} title='货物状况' height={50}>
<Text>{orderInfo?.goods_status_name}</Text>
</SearchInput>
<SearchInput showBorder={false} title='申请时间' height={50}>
<Text>2022-04-24 08:32:39</Text>
<Text>{formatDateTime(orderInfo?.apply_time)}</Text>
</SearchInput>
</View>
)
})
const AfterSalePricture = memo(() => {
const AfterSalePricture = memo(({urls = []}:{urls: string[]}) => {
const showList = useMemo(() => {
let res = urls.map(item => {
return formatImgUrl(item)
})
return res
}, [urls])
//预览图片
const showImage = () => {
Taro.previewImage({
current: formatImgUrl(''), // 当前显示
urls: [formatImgUrl('')] // 需要预览的图片http链接列表
current: showList[0], // 当前显示
urls: showList // 需要预览的图片http链接列表
})
}
return (
<ContentBox title="售后图片">
<View className={styles.after_sale_picture_list}>
<View className={styles.after_sale_picture_item} onClick={showImage}>
<Image src={formatImgUrl('')} />
</View>
<View className={styles.after_sale_picture_item} onClick={showImage}>
<Image src={formatImgUrl('')}/>
</View>
<View className={styles.after_sale_picture_item}>
<Image src={formatImgUrl('')}/>
</View>
<View className={styles.after_sale_picture_item}>
<Image src={formatImgUrl('')}/>
</View>
<View className={styles.after_sale_picture_item}>
<Image src={formatImgUrl('')}/>
</View>
<View className={styles.after_sale_picture_item}>
<Image src={formatImgUrl('')}/>
</View>
{urls?.map(item=> <View className={styles.after_sale_picture_item} onClick={showImage}>
<Image src={formatImgUrl(item)} />
</View>)}
</View>
</ContentBox>
)
@@ -14,6 +14,8 @@
font-weight: 700;
margin-left: 15px;
font-size: $font_size;
width: 100px;
@include common_ellipsis();
}
image{
width: 70px;
@@ -26,7 +28,7 @@
font-size: $font_size_medium;
color: $color_font_one;
text-align: right;
padding-right: 30px;
padding-right: 10px;
display: flex;
justify-content: flex-end;
align-items: center;
@@ -69,23 +71,22 @@
.image{
width: 126px;
height: 126px;
background: #e5ad3a;
border-radius: 20px 20px 0px 0px;
border-radius: 20px ;
position: relative;
image{
width: 100%;
height: 100%;
border-radius: 20px 20px 0px 0px;
border-radius: 20px ;
}
.color_num {
background: rgba(0,0,0, 0.5);
border-radius: 50px 0px 0px 0px;
border-radius: 36px 0px 20px 0px;
font-size: $font_size_min;
color: #fff;
position: absolute;
right:0;
bottom:0;
padding: 5px 10px;
padding: 5px 10px 5px 15px;
box-sizing: border-box;
}
}
@@ -123,7 +124,7 @@
display: flex;
background-color: #F6F6F6;
padding: 20px;
margin-top: 20px;
margin: 20px 0;
align-items: center;
font-size: $font_size_medium;
border-radius: 10px;
@@ -1,6 +1,7 @@
import { goLink } from "@/common/common";
import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
import OrderBtns from "@/components/orderBtns";
import AfterOrderBtns from "@/components/afterOrderBtns";
import LabAndImg from "@/components/LabAndImg";
import { useSelector } from "@/reducers/hooks";
import { Image, Text, View } from "@tarojs/components"
import classnames from "classnames";
@@ -11,20 +12,21 @@ import styles from './index.module.scss'
type Param = {
value: {
order_no: string,
return_order_no: string,
sale_mode: number,
sale_mode_name: string,
status_name: string,
stage_name: string,
shipment_mode_name: string,
product_list: any[],
total_fabrics: number,
total_colors: number,
total_number: number,
status: 0,
stage: 0,
id: number,
payment_method: number, //支付方式
actual_amount: number, //实付金额
wait_pay_amount: number //待付金额
should_collect_order_id: number //应付单id
lab: {l:number, a:number, b:number},
rgb: {r:number, g:number, b:number},
texturl_url: string,
type: number //1 退货 2退款
},
onClickBtn?: (val:{status:number, orderInfo:Param['value']}) => void
}
@@ -47,13 +49,18 @@ export default memo(({value, onClickBtn}: Param) => {
//按钮所需数据
const orderInfo = useMemo(() => {
return {
status: value?.status, //订单状态
stage: value?.stage, //订单状态
orderId: value?.id,
actual_amount: value?.actual_amount, //实付金额
wait_pay_amount: value?.wait_pay_amount, //待付金额
sale_mode: value?.sale_mode, //订单类型
type: value?.type //退货or退款
}
}, [value])
//整理颜色
const labAndRgbAndUrl = useMemo(() => {
return {lab:{...value?.lab}, rgb:{...value?.rgb}, texturl_url: value?.texturl_url}
}, [value])
return (
<View className={styles.order_item}>
<View className={styles.header} onClick={() => goLink('/pages/salesAfter/index', {id: value?.id})}>
@@ -62,21 +69,21 @@ export default memo(({value, onClickBtn}: Param) => {
<Text className={styles.name}>{userInfo?.adminUserInfo?.user_name}</Text>
</View>
<View className={styles.order_num}>
<Text>订单号:{value?.order_no}</Text>
<Text>售后单号:{value?.return_order_no}</Text>
<Text className={classnames(styles.miconfont, 'iconfont, icon-a-moreback')}></Text>
</View>
<OrderStatusTag status={1}/>
<OrderStatusTag status={value?.type}/>
</View>
<View className={styles.product_con} onClick={() => goLink('/pages/salesAfter/index', {id: value?.id})}>
<View className={styles.product_title}>
<View className={styles.product_tag}>{value?.sale_mode_name}</View>
<View className={styles.product_name}>{formatHashTag(value?.product_list[0].code, value?.product_list[0].name)}</View>
<View className={styles.product_status}>{value?.status_name}</View>
<View className={styles.product_status}>{value?.stage_name}</View>
</View>
<View className={styles.product_list}>
<View className={styles.image}>
<Image src={formatImgUrl(value?.product_list[0].product_colors[0].texture_url)}/>
<View className={styles.color_num}>{value?.product_list[0].product_colors[0].code}</View>
<LabAndImg value={labAndRgbAndUrl}/>
<View className={styles.color_num}>{value?.product_list[0].product_colors[0].code}</View>
</View>
<View className={styles.color_list}>
{value?.product_list[0].product_colors.map((itemColor, index) => {
@@ -98,11 +105,11 @@ export default memo(({value, onClickBtn}: Param) => {
</View>
<View className={styles.color_count_num}>{`${value?.total_fabrics}种面料,${value?.total_colors}种颜色,共${value?.total_number}条`}</View>
<View className={styles.order_number}>
<Text>已申请退款</Text>
<Text>订单号:LY2278204399678</Text>
<Text>{value?.type == 1?'已申请退货':'已申请退款'}</Text>
<Text>订单号:{value?.order_no}</Text>
</View>
</View>
<OrderBtns orderInfo={orderInfo} onClick={orderBtnsClick}/>
<AfterOrderBtns orderInfo={orderInfo} onClick={orderBtnsClick}/>
</View>
)
})
@@ -5,14 +5,14 @@ import styles from './index.module.scss'
type Param = {
status?: 0|1|2 //0默认不处理, 1退款,2退货
status?: 0|1|2 //0默认不处理, 1退货,2退款
}
export default memo(({status = 0}:Param) => {
return (
<>
{(status !== 0)&&<View className={classnames(styles.tag, status == 1?styles.refund_tag :styles.saleReturn_tag)}>
{(status !== 0)&&<View className={classnames(styles.tag, status == 2?styles.refund_tag :styles.saleReturn_tag)}>
<View className={classnames(styles.miconfont, 'iconfont icon-yucunkuan')}></View>
<Text>{ status == 1?'退款':'退货'}</Text>
<Text>{ status == 1?'退货':'退款'}</Text>
</View>}
</>
)
@@ -0,0 +1,35 @@
.logistics_main{
padding: 20px 30px;
box-sizing: border-box;
.logistics_image{
display: flex;
.title_desc{
font-size: 28px;
font-weight: 700;
padding-top: 50px;
box-sizing: border-box;
}
.upload_image{
flex:1;
}
}
.logistics_desc{
margin-top: 50px;
}
.btns_two{
display: flex;
height: 82px;
font-size: $font_size_big;
border-radius: 40px;
margin-top: 50px;
.verify_btn{
flex:1;
border-radius: 40px;
background: #007aff;
text-align: center;
line-height: 82px;
color: #fff;
}
}
}
@@ -0,0 +1,70 @@
import Popup from "@/components/popup";
import { Text, View } from "@tarojs/components";
import { memo, useCallback, useEffect, useRef, useState } from "react";
import UploadImage from "@/components/uploadImage"
import styles from './index.module.scss'
import TextareaEnhance from "@/components/textareaEnhance";
import { ReturnApplyLogisticsApi } from "@/api/salesAfterOrder";
import { alert } from "@/common/common";
type Param = {
show?: true|false,
onClose?: () => void,
onSubmit?: () => void,
id?: number //订单id
}
export default memo(({show = false, onClose, onSubmit, id = 0}: Param) => {
//需要提交的数据
const submitData = useRef({
accessory_url: [],
remark: '',
id: 0
})
useEffect(() => {
if(id) submitData.current.id = id
}, [id])
//获取图片列表
const getImageList = useCallback((list) => {
submitData.current.accessory_url = list
}, [])
//备注
const getOtherReason = useCallback((val) => {
submitData.current.remark = val
}, [])
//确定
const {fetchData} = ReturnApplyLogisticsApi()
const onSubmitEven = async () => {
if(!id) return alert.error('参数有误')
if(submitData.current.accessory_url.length <= 0) return alert.error('请上传附件')
let res = await fetchData(submitData.current)
if(res.success) {
alert.success('上传成功')
} else {
alert.error('上传失败')
}
}
return (
<>
<Popup show={show} title="上传物流" onClose={onClose}>
<View className={styles.logistics_main}>
<View className={styles.logistics_image}>
<Text className={styles.title_desc}>上传附件:</Text>
<View className={styles.upload_image}>
<UploadImage onChange={getImageList}/>
</View>
</View>
<View className={styles.logistics_desc}>
<TextareaEnhance onChange={getOtherReason} title="备注:" placeholder="请输入备注信息"/>
</View>
<View className={styles.btns_two}>
<View className={styles.verify_btn } onClick={() => onSubmitEven()}>保存</View>
</View >
</View>
</Popup>
</>
)
})
+9 -21
View File
@@ -12,6 +12,8 @@ import { dataLoadingStatus, getFilterData } from "@/common/util"
import OrderStatusList from "./components/orderStatusList"
import Payment from "../order/components/payment"
import { AFTER_ORDER_STATUS } from "@/common/enum"
import { GetSaleOrderListApi } from "@/api/salesAfterOrder"
import ReturnLogistics from "./components/returnLogistics"
export default () => {
const {checkLogin} = useLogin()
@@ -40,7 +42,7 @@ export default () => {
}, [])
//获取订单列表
const {fetchData: listFetchData, state:orderState} = GetOrderListApi()
const {fetchData: listFetchData, state:orderState} = GetSaleOrderListApi()
const [orderData, setOrderData] = useState<{list:any[], total:number}>({list:[], total:0})
const getOrderList = async () => {
let res = await listFetchData(getFilterData(searchField))
@@ -96,28 +98,14 @@ export default () => {
//监听点击的按钮
const clickOrderBtn = useCallback(({status, orderInfo}) => {
if(status == 2) {
//去支付
setPayOrderInfo({orderId:orderInfo.should_collect_order_id, payment_method:orderInfo.payment_method})
toPay()
//退货物流
}
}, [orderData])
//去付款
const [payOrderInfo, setPayOrderInfo] = useState<any>()
const [payMentShow, setPayMentShow] = useState(false)
const toPay = () => {
setPayMentShow(true)
}
//关闭支付弹窗
const closePayShow = useCallback(() => {
setPayMentShow(() => false)
}, [])
//支付成功
const onPaySuccess = useCallback(() => {
getOrderList()
closePayShow()
}, [])
//物流显示
const [logisticsShow, setLogisticsShow] = useState(false)
const onCloseLogistics = useCallback(() => setLogisticsShow(false), [])
return (
@@ -132,8 +120,8 @@ export default () => {
return <View key={item.id} className={styles.order_item_con}> <Order value={item} onClickBtn={clickOrderBtn}/></View>
})}
</InfiniteScroll>
<ReturnLogistics show={logisticsShow} onClose={onCloseLogistics}/>
</View>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={payOrderInfo}/>
</View>
)
}
@@ -165,7 +165,6 @@
.product_img{
width: 100%;
height: 224px;
background: #e5ad3a;
border-radius: 20px 20px 0px 0px;
position: relative;
image{
+4 -4
View File
@@ -17,6 +17,7 @@ import LoadingCard from "@/components/loadingCard";
import useLogin from "@/use/useLogin";
import { goLink } from "@/common/common";
import SelectData, {ListProps} from "./components/selectData";
import LabAndImg from "@/components/LabAndImg";
export default () => {
const {checkLogin} = useLogin()
@@ -95,7 +96,6 @@ export default () => {
const [blueToothColor, setBlueToothColor] = useState('')
useEffect(() => {
if(colorState.deviceLab) {
console.log('颜色:',colorState.deviceLab)
const rgb = toRgb([colorState.deviceLab.L, colorState.deviceLab.a, colorState.deviceLab.b])
setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
setSearchField({...searchField, l:rgb[0], a:rgb[1], b:rgb[2], size:10})
@@ -103,11 +103,12 @@ export default () => {
}, [colorState.deviceLab])
const goLinkPage = (item) => {
goLink('/pages/details/index',{id:item.id})
goLink('/pages/details/index',{id:item.product_id})
}
//获取筛选条件
const getFiltr = (e) => {
setMaterialList(() => ({list:[], total:0}))
const {data} = e
setSearchField({
...searchField,
@@ -123,7 +124,6 @@ export default () => {
//筛选条件格式化
const [selectList , setSelectList] = useState<ListProps[]>()
const formatSelectList = (val = {data:{}, field:{}}) => {
console.log('data123::',val.data)
let data:ListProps[] = []
for(let key in val.data) {
if(key !== 'seriesId'&& val.data[key] != '') {
@@ -186,7 +186,7 @@ export default () => {
{materialList.list.map(item => {
return <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
<View className={styles.product_img}>
<Image mode="aspectFill" src={formatImgUrl(item.texture_url)}></Image>
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
<View className={styles.color_num}>{(item.product_color_code)}#</View>
</View>
<View className={styles.product_info}>
+9 -4
View File
@@ -1,11 +1,17 @@
.main{
position: relative;
.search{
display: flex;
justify-content: space-between;
padding: 20px;
padding-bottom: 50px;
}
.up_search{
color: $color_main;
font-size: $font_size;
position: absolute;
right: 20px;
}
.hot {
padding: 0 20px;
.hot_header {
@@ -18,10 +24,9 @@
color: $color_font_one;
font-weight: 700;
}
.hot_header_up{
color: $color_main;
}
}
.list{
display: flex;
font-size: $font_size_medium;
+6 -6
View File
@@ -69,18 +69,18 @@ export default () => {
<View className={styles.search}>
<Search style={{width: '100%'}} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} clickOnSearch={(e) => searchEvent(e)}/>
</View>
<View className={styles.hot}>
<View className={styles.up_search} onClick={() => goLink('/pages/searchList/hightSearchList')}>高级搜索</View>
{searchData?.hotField.length > 0 && <View className={styles.hot}>
<View className={styles.hot_header}>
<View className={styles.hot_header_title}>热门面料</View>
<View className={styles.hot_header_up} onClick={() => goLink('/pages/searchList/searchList')}>高级搜索</View>
</View>
<View className={styles.list}>
{searchData?.hotField?.map((item, index) => {
{searchData.hotField.map((item, index) => {
return <View key={index} className={styles.item} onClick={() => searchEvent(item.search_key, false)}>{item.search_key}</View>
})}
</View>
</View>
<View className={styles.history}>
</View>}
{searchData?.historyField.length > 0 && <View className={styles.history}>
<View className={styles.history_header}>
<View className={styles.history_header_title}>历史搜索</View>
<View className={classnames('iconfont icon-lajixiang', styles.miconfont)}></View>
@@ -88,7 +88,7 @@ export default () => {
<View className={styles.list}>
{searchData?.historyField?.map((item, index) => <View key={index} className={styles.item} onClick={() => searchEvent(item.search_key, false)}>{item.search_key}</View>)}
</View>
</View>
</View>}
</View>
)
}
@@ -148,7 +148,6 @@
.product_img{
width: 100%;
height: 224px;
background: #e5ad3a;
border-radius: 20px 20px 0px 0px;
position: relative;
image{
+5 -7
View File
@@ -8,13 +8,12 @@ import SelectData, {ListProps} from "./components/selectData";
import { goLink } from "@/common/common";
import styles from './searchList.module.scss'
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import useManualPullDownRefresh from "@/use/useManualPullDownRefresh";
import {GetProductListApi} from "@/api/material"
import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
import { formatHashTag, formatImgUrl } from "@/common/fotmat";
import { dataLoadingStatus, getFilterData } from "@/common/util";
import LoadingCard from "@/components/loadingCard";
import useLogin from "@/use/useLogin";
import LabAndImg from "@/components/LabAndImg";
export default () => {
const {checkLogin} = useLogin()
@@ -95,6 +94,7 @@ export default () => {
//获取筛选条件
const getFiltr = (e) => {
pageNum.current.page = 1
setMaterialList(() => ({list:[], total:0}))
const {data} = e
setSearchField({
...searchField,
@@ -110,14 +110,12 @@ export default () => {
//筛选条件格式化
const [selectList , setSelectList] = useState<ListProps[]>()
const formatSelectList = (val = {data:{}, field:{}}) => {
console.log('data123::',val.data)
let data:ListProps[] = []
for(let key in val.data) {
if(key !== 'seriesId'&& val.data[key] != '') {
data.push({title:val.field[key], value:val.data[key]})
}
}
console.log('data::',data)
setSelectList([...data])
}
@@ -156,15 +154,15 @@ export default () => {
<View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 ({materialList.total}条记录)</View>
<View className={styles.scroll}>
<InfiniteScroll
selfonScrollToLower={() => getScrolltolower()}
selfOnScroll={(e) => onscroll(e)}
selfonScrollToLower={getScrolltolower}
selfOnScroll={onscroll}
statusMore={statusMore}
>
<View className={styles.product_list}>
{materialList.list.map(item => {
return <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
<View className={styles.product_img}>
<Image mode="aspectFill" src={formatImgUrl(item.texture_url)}></Image>
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
<View className={styles.color_num}>{(item.product_color_count)}色</View>
</View>
<View className={styles.product_info}>
+330 -116
View File
@@ -1,68 +1,94 @@
.main{
.main {
background-color: #F8F8F8;
min-height: 100vh;
display: flex;
flex-direction: column;
.header{
position: relative;
.header {
background: #68b4ff;
background-size: cover;
height: 560px;
position: relative;
.card-main{
.card-main {
margin-top: 10px;
}
}
.header-card{
position: absolute;left: 50%;bottom: -18%;
.auth-suspension {
position: absolute;
z-index: 1;
inset: 0;
}
.header-card {
position: absolute;
left: 50%;
bottom: -18%;
transform: translateX(-50%);
}
.crad{
width: 702px;
background: rgba(255,255,255,0.95);
border-radius: 20px;
padding: 30px;
box-sizing: border-box;
box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.05);
.crad {
width: 702px;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 30px;
box-sizing: border-box;
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.05);
}
.card-info{
display: flex;justify-content: space-between;
position: absolute;top: -15%;left: 0;right: 0;
width: 702px;
padding: 0 30px;
box-sizing: border-box;
.card-info {
display: flex;
justify-content: space-between;
position: absolute;
top: -15%;
left: 0;
right: 0;
width: 702px;
padding: 0 30px;
box-sizing: border-box;
}
.arcd-info-left{
display: flex;align-items: flex-end;
.arcd-info-left {
display: flex;
align-items: flex-end;
}
.arcd-info-left-portrait{
width: 170px;
height: 170px;
background: rgba(0,0,0,0.00);
border: 4px solid #ffffff;
border-radius: 50%;
overflow: hidden;
.arcd-info-left-portrait {
width: 170px;
height: 170px;
background: rgba(0, 0, 0, 0.00);
border: 4px solid #ffffff;
border-radius: 50%;
overflow: hidden;
}
.arcd-info-left-portrait image{
width: 100%;
height: 100%;
object-fit: cover;
.arcd-info-left-portrait image {
width: 100%;
height: 100%;
object-fit: cover;
}
.arcd-info-left-desc{
margin-left: 24px;
.arcd-info-left-desc {
margin-left: 24px;
}
.arcd-info-left-nickname{
font-size: 44px;
font-weight: 700;
color: #000000;
display: flex;
align-items: center;
.arcd-info-left-nickname {
font-size: 44px;
font-weight: 700;
color: #000000;
display: flex;
align-items: center;
}
.arcd-info-left-phone{
.arcd-info-left-phone {
font-size: 24px;
font-weight: 400;
color: #707070;
}
.arcd-info-left-phone button{
.arcd-info-left-phone button {
padding: 0 10px;
height: 42px;
background: #ffffff;
@@ -71,39 +97,50 @@
font-size: 22px;
font-weight: 400;
color: #007aff;
display: flex;align-items: center;justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}
.card-info-right{
font-size: 26px;
display: flex;align-items: flex-end;
.card-info-right {
font-size: 26px;
display: flex;
align-items: flex-end;
}
.setup-icon{
.setup-icon {
position: relative;
padding-bottom: 10px;
}
.icon-wrapper{
.icon-wrapper {
font-size: 60px;
}
.icon-point{
.icon-point {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ff0000;
position: absolute;
right: 0;top: 0;
right: 0;
top: 0;
}
.card-main{
.card-main {
margin: 20px auto 0;
}
.card-main-title{
display: flex;justify-content: space-between;
align-items: center;
border-bottom: 2px solid #dddddd;
padding: 0 5px 15px;
box-sizing: border-box;
.card-main-title {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #dddddd;
padding: 0 5px 15px;
box-sizing: border-box;
}
.card-main-title text{
.card-main-title text {
font-size: 22px;
font-weight: 400;
color: #ababab;
@@ -111,23 +148,27 @@
text-align: right;
width: 150px;
}
.card-main-title-content{
display: grid;
grid-template-columns: repeat(5,1fr);
.card-main-title-content {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
.card-main-title-content-item{
font-size: 24px;
font-weight: 400;
color: #3c3c3c;
text-align: center;
margin-top: 30px;
position: relative;
.card-main-title-content-item {
font-size: 24px;
font-weight: 400;
color: #3c3c3c;
text-align: center;
margin-top: 30px;
position: relative;
}
.card-main-title-content-item Text{
.card-main-title-content-item Text {
font-size: 56px;
color: #3C3C3C;
}
.card-main-title-content-item-badge{
.card-main-title-content-item-badge {
padding: 0 10px;
height: 32px;
background: #007aff;
@@ -138,96 +179,140 @@
font-size: 18px;
font-weight: 700;
color: #ffffff;
display: flex;align-items: center;justify-content: center;
position: absolute;top: -10px;right: 0;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -10px;
right: 0;
}
.assets-title{
.assets-title {
font-size: 28px;
font-weight: 700;
color: #3c3c3c;
margin-bottom: 20px;
}
.assets-content{
.assets-content {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-columns: repeat(3, 1fr);
}
.assets-content>view,.assets-content>navigator{
.assets-content>view,
.assets-content>navigator {
text-align: center;
}
.assets-content-item-top{
.assets-content-item-top {
color: #007aff;
font-weight: 400;
}
.assets-content-item-top-before{
.assets-content-item-top-before {
font-size: 20px;
}
.assets-content-item-top-content{
.assets-content-item-top-content {
font-size: 36px;
}
.assets-content-item-top-after{
.assets-content-item-top-after {
font-size: 20px;
}
.assets-content-item-tips{
.assets-content-item-tips {
font-size: 24px;
font-weight: 400;
color: #707070;
}
.main-card{
.main-card {
margin: 131px auto 0;
}
.card-feature{
.card-feature {
margin-bottom: 50px;
}
.card-main-list-content-item{
display: flex;align-items: center;
.card-main-list-content-item {
display: flex;
align-items: center;
justify-content: space-between;
height: 90px;
}
.card-main-list-content-item-left{
.card-main-list-content-item-left {
font-size: 26px;
font-weight: 400;
text-align: left;
color: #707070;
display: flex;align-items: center;
display: flex;
align-items: center;
}
.card-main-list-content-item-left text{
.card-main-list-content-item-left text {
margin-right: 35px;
font-size: 56px;
color: #707070;
}
.card-main-list-content-item-right text{
.card-main-list-content-item-right text {
font-size: 30px;
}
.auth{
.auth {
margin-top: 115px;
}
.auth-top{
display: flex;align-items: center;justify-content: space-between;
.auth-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.auth-status{
.auth-status {
padding: 0 10px;
height: 30px;
background: #dddddd;
border-radius: 10px 4px 0px 0px;
display: flex;align-items: center;justify-content: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 400;
color: #707070;
}
.auth-tips{
.auth-status,
.auth-status-ongoing {
color: #EE7500;
background-color: #FFE6CE;
}
.auth-status,
.auth-status-adopt {
color: #007AFF;
background-color: #CDE5FF;
}
.auth-tips {
font-size: 18px;
font-weight: 400;
color: #007aff;
width: 150px;
text-align: right;
}
.auth-tips text{
.auth-tips,
.auth-tips-adopt {
color: #ABABAB;
}
.auth-tips text {
font-size: 17px;
}
.auth-company{
.auth-company {
height: 70px;
width: 100%;
background: #f6f6f6;
@@ -236,30 +321,46 @@
font-size: 26px;
font-weight: 700;
color: #707070;
display: flex;align-items: center;justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}
.modal{
background: rgba(0,0,0,0.6);
position: fixed;inset: 0;
display: flex;justify-content: center;align-items: center;
.auth-company,
.auth-company-adopt {
background: #ecf5ff;
border: 2px solid #cde5ff;
}
.modal-content{
.tips-modal {
background: rgba(0, 0, 0, 0.6);
position: fixed;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
}
.tips-modal-content {
width: 598px;
background: #ffffff;
border-radius: 10px;
animation: enlargeK 0.2s linear;
overflow: hidden;
}
@keyframes enlargeK {
0%{
0% {
transform: scale(0);
}
100%{
100% {
transform: scale(1);
}
}
.modal-title{
.tips-modal-title {
font-size: 32px;
font-weight: 700;
text-align: center;
@@ -267,53 +368,166 @@
margin-bottom: 58px;
padding-top: 48px;
}
.modal-letter{
.tips-modal-letter {
font-size: 26px;
font-weight: 400;
color: #707070;
padding: 0 30px;
line-height: 50px;
}
.modal-letter-text{
.tips-modal-letter-text {
text-indent: 60px;
}
.modal-letter-beginn{
.tips-modal-letter-beginn {
font-size: 28px;
font-weight: 400;
color: #000000;
margin-bottom: 25px;
}
.modal-letter-end{
.tips-modal-letter-end {
font-size: 26px;
font-weight: 400;
text-align: right;
margin-top: 61px;
}
.modal-button{
.tips-modal-button {
display: flex;
border-top: 1px solid #DDDDDD;
margin-top: 45px;
}
.modal-button button, .modal-button view{
display: flex;align-items: center;justify-content: center;
.tips-modal-button button,
.tips-modal-button view {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
height: 90px;
background-color: white;
}
.modal-button button{
.tips-modal-button button {
font-size: 26px;
font-weight: 400;
color: #707070;
border-radius: 0;
border-right: 1px solid #DDDDDD;
}
.modal-button button::after{
.tips-modal-button button::after {
border: 0;
border-radius: 0;
}
.modal-button view{
.tips-modal-button view {
font-size: 26px;
font-weight: 400;
color: #007aff;
}
.auth-box {
width: 614px;
height: 70px;
background: #f6f6f6;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 18px;
padding-right: 16px;
.auth-left-box {
display: flex;
align-items: center;
.auth-tag {
width: 86px;
height: 34px;
background: #dddddd;
border-radius: 10px;
font-size: 22px;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
text-align: center;
color: #707070;
text-align: center;
line-height: 34px;
margin-right: 28px;
}
.auth-tagone {
width: 86px;
height: 34px;
background: #ffe6ce;
border-radius: 10px;
font-size: 22px;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
text-align: center;
color: #707070;
text-align: center;
line-height: 34px;
margin-right: 28px;
}
.auth-tagtwo {
display: flex;
align-items: center;
overflow: hidden;
padding-left: 10px;
width: 100px;
height: 32px;
background: #cde5ff;
border-radius: 10px;
.iconFont-color {
display: flex;
align-items: center;
font-size: 30px;
margin-right: 3px;
color: #007aff;
}
.auth-font {
font-size: 20px;
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
font-weight: 400;
color: #007aff;
}
}
.tagthree {
display: flex;
align-items: center;
overflow: hidden;
padding-left: 10px;
width: 100px;
height: 32px;
background: rgba(255, 0, 0, 0.10);
border-radius: 10px;
color: #ff0000;
}
.auth-cont {
margin-left: 16px;
font-size: 26px;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
font-weight: 700;
color: #ababab;
}
.auth-contone {
margin-left: 16px;
font-size: 26px;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
font-weight: 700;
color: #3c3c3c;
}
}
}
}
+147 -74
View File
@@ -3,79 +3,89 @@ import { memo, useEffect, useState } from "react"
import styles from './index.module.scss'
import classnames from "classnames";
import { useSelector } from "@/reducers/hooks";
import { GetAdminUserInfoApi } from "@/api/user";
import { alert, goLink } from "@/common/common";
import useLogin from '@/use/useLogin'
import { BASE_URL } from '@/common/constant'
import Taro from "@tarojs/taro";
import { userassets } from "@/api/mine"
import { formatPriceDiv } from "@/common/fotmat"
export default () => {
// 用户信息
const { fetchData, state } = GetAdminUserInfoApi();
const {adminUserInfo, userInfo} = useSelector(state => state.userInfo);
const [mUserInfo, setMUserInfo] = useState({
phone: ""
});
const getData = ()=>{
fetchData();
const { getSelfUserInfo } = useLogin();
const { adminUserInfo } = useSelector(state => state.userInfo);
useEffect(() => {
getSelfUserInfo().then().catch(() => {
alert.none("授权失败,请授权后再使用");
});
}, []);
const handleAuth = async () => {
getSelfUserInfo().then().catch(() => {
alert.none("授权失败,请授权后再使用");
});
}
useEffect(()=>{
setMUserInfo({
...mUserInfo,
// phone: userInfo?.phone?.replace(userInfo?.phone?.substring(3,7), "****") as string
})
getData();
},[]);
const { fetchData, state } = userassets()
useEffect(() => {
fetchData();
}, [])
return (
<View className={styles.main}>
<Header data={adminUserInfo} userInfo={userInfo} />
<Assets />
<Header data={adminUserInfo} />
<Assets data={state} />
<Main />
<Modal data={adminUserInfo}/>
{/* {(adminUserInfo as any)?.authentication_status==1&&<Modal data={adminUserInfo}/>} */}
{/* 测试暂时添加 */}
<View style={{ fontSize: '26rpx', textAlign: 'center' }}>{BASE_URL}</View>
{!adminUserInfo.is_authorize_name && <View onClick={handleAuth} className={styles["auth-suspension"]}></View>}
</View>
)
}
const Modal = memo((props:any)=>{
const {data} = props;
const handleouter = ()=>{
console.log(222);
// 提示弹窗
const Modal = memo((props: any) => {
const { data } = props;
const [modalShow, setModalShow] = useState(true);
const handleouter = () => {
}
return(
return (
<>
{!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']}>
<View className={styles['modal-letter-beginn']}>To: 万丰园纺织科技</View>
<View className={styles['modal-letter-text']}>尊敬的老朋友,欢迎你使用小程序商城;由于您是我们长期合作的伙伴,你的组织已自动为你生成,关联后可查看历史订单哟。</View>
<View className={styles['modal-letter-end']}>信息错误请联系客服</View>
{modalShow &&
<View onClick={handleouter} catchMove className={styles['tips-modal']}>
<View className={styles['tips-modal-content']} onClick={e => e.stopPropagation()}>
<View className={styles['tips-modal-title']}>首次登录提醒</View>
<View className={styles['tips-modal-letter']}>
<View className={styles['tips-modal-letter-beginn']}>To: 万丰园纺织科技</View>
<View className={styles['tips-modal-letter-text']}>尊敬的老朋友,欢迎你使用小程序商城;由于您是我们长期合作的伙伴,你的组织已自动为你生成,关联后可查看历史订单哟。</View>
<View className={styles['tips-modal-letter-end']}>信息错误请联系客服</View>
</View>
<View className={styles['tips-modal-button']}>
<Button hoverClass="none" openType="contact">联系客服</Button>
<View onClick={() => setModalShow(false)}>我知道</View>
</View>
</View>
</View>
<View className={styles['modal-button']}>
<Button hoverClass="none" openType="concat">联系客服</Button>
<View>我知道</View>
</View>
</View>
</View>
}
}
</>
)
})
// 头部 | 订单
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 getPhoneNumber = (ev)=>{
console.log(ev);
if(ev.detail?.code){
}else{
alert.none("取消了授权");
const Header = memo((props: any) => {
const { data } = props;
let menu = [{ text: "待配布", icon: "icon-daipeibu", url: "/pages/orderList/index" }, { text: "待付款", icon: "icon-daifukuan", url: "/pages/orderList/index" },
{ text: "待发货", icon: "icon-daifahuo", url: "/pages/orderList/index" }, { text: "已发货", icon: "icon-yifahuo", url: "/pages/orderList/index" },
{ text: "退款/售后", icon: "icon-a-tuikuanshouhou", url: "/pages/orderList/index" }];
const { getPhoneNumber } = useLogin();
const mGetPhoneNumber = (ev) => {
if (ev.detail?.code) {
getPhoneNumber(ev.detail.code);
} else {
alert.none("绑定失败!");
}
}
const navTo = () => {
Taro.navigateTo({
url: '/pages/certification/index'
})
}
return (
<View className={styles.header}>
<View className={`${styles.crad} ${styles['header-card']}`}>
@@ -90,7 +100,7 @@ const Header = memo((props:any) => {
{data?.user_name}
</View>
<View className={styles['arcd-info-left-phone']}>
{userInfo?.phone||<Button openType="getPhoneNumber" onGetPhoneNumber={getPhoneNumber}>绑定手机号码</Button>}
{data?.phone ? data?.phone?.replace(data?.phone?.substring(3, 7), "****") : <Button openType="getPhoneNumber" onGetPhoneNumber={mGetPhoneNumber}>绑定手机号码</Button>}
</View>
</View>
</View>
@@ -106,16 +116,80 @@ const Header = memo((props:any) => {
</View>
</View>
<View className={styles['auth']}>
<View className={styles['auth-top']}>
<View className={styles['auth-status']}>
<Text>1</Text>
认证不通过
{(data?.authentication_status == 0 || data?.authentication_status == 1) &&
<View className={styles['auth-box']} onClick={() => navTo()}>
<View className={styles['auth-left-box']}>
<View className={styles['auth-tag']}>
未认证
</View>
<View className={styles['auth-cont']}>
暂未加入或注册组织
</View>
</View>
<Text className="iconfont icon-a-moreback"></Text>
</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']}>
佛山市带生纺织品有限公司
</View>
}
{(data?.authentication_status == 3) &&
<View className={styles['auth-box']} onClick={() => navTo()}>
<View className={styles['auth-left-box']}>
<View className={styles['auth-tagthree']}>
认证失败
</View>
<View className={styles['auth-cont']}>
暂未加入或注册组织
</View>
</View>
<Text className="iconfont icon-a-moreback"></Text>
</View>
}
{data?.authentication_status == 2 &&
<View className={styles['auth-box']} onClick={() => navTo()}>
<View className={styles['auth-left-box']}>
<View className={styles['auth-tagone']}>
认证中
</View>
<View className={styles['auth-contone']}>
{data?.company_name || '暂未加入或注册组织'}
</View>
</View>
<Text className="iconfont icon-a-moreback"></Text>
</View>
}
{data?.authentication_status == 4 &&
<View className={styles['auth-box']} onClick={() => navTo()}>
<View className={styles['auth-left-box']}>
<View className={styles['auth-tagtwo']}>
<View className={styles['iconFont-color']}>
<Text className="iconfont icon-xtianzhangqi"></Text>
</View>
<View className={styles['auth-font']}>已认证</View>
</View>
<View className={styles['auth-contone']}>
{data?.company_name}
</View>
</View>
<Text className="iconfont icon-a-moreback"></Text>
</View>
}
{/* <View className={`${styles['auth-top']} ${data?.authentication_status==4&&"auth-tips-adopt"}`}>
<View className={`${styles['auth-status']} ${data?.authentication_status==2&&styles['auth-status-ongoing']} ${data?.authentication_status==4&&styles['auth-status-adopt']}`}>
<Text>1</Text>
{data?.authentication_status==1&&"未认证"}
{data?.authentication_status==2&&"认证中"}
{data?.authentication_status==3&&"认证不通过"}
{data?.authentication_status==4&&"已认证"}
</View>
{data?.authentication_status==1&&<Navigator hoverClass="none" url="/pages/certification/index" className={styles['auth-tips']}>认证通过后,解锁更多权限 <Text className="iconfont icon-a-moreback"/></Navigator>}
{data?.authentication_status==2&&<Navigator hoverClass="none" url="/pages/certification/index" className={styles['auth-tips']}>1-3个工作日,审核完成 <Text className="iconfont icon-a-moreback"/></Navigator>}
{data?.authentication_status==3&&<Navigator hoverClass="none" url="/pages/certification/index" className={styles['auth-tips']}>重新认证 <Text className="iconfont icon-a-moreback"/></Navigator>}
{data?.authentication_status==4&&<View className={styles['auth-tips']}>认证通过,可以下单啦 <Text className="iconfont icon-a-moreback"/></View>}
</View> */}
{/* <View className={`${styles['auth-company']} ${data?.authentication_status==4&&"auth-tips-adopt"}`}>
{data?.authentication_status==1&&"暂未加入或注册组织"}
{data?.authentication_status==2&&data?.company_name}
{data?.authentication_status==3&&data?.company_name}
{data?.authentication_status==4&&data?.company_name}
</View> */}
</View>
<View className={styles['card-main']}>
<View className={styles['card-main-title']}>
@@ -126,24 +200,23 @@ const Header = memo((props:any) => {
{
menu.map((item, index) => {
return (
<View className={styles['card-main-title-content-item']}>
<Navigator hoverClass="none" url={item.url} className={styles['card-main-title-content-item']}>
<Text className={`iconfont ${item.icon}`}></Text>
<View>{item.text}</View>
<View className={styles['card-main-title-content-item-badge']}>{index==2?"99+":10}</View>
</View>
<View className={styles['card-main-title-content-item-badge']}>{index == 2 ? "99+" : 10}</View>
</Navigator>
)
})
}
</View>
</View>
</View>
</View>
)
})
// 我的资产
const Assets = () => {
const Assets = (props: any) => {
console.log(props, 'propsprops')
return (
<View className={`${styles.assets} ${styles.crad} ${styles['main-card']}`}>
<View className={`${styles['assets-title']}`}>我的资产</View>
@@ -151,14 +224,14 @@ const Assets = () => {
<Navigator hoverClass="none" url="/pages/depositBeforehand/index">
<View className={`${styles['assets-content-item-top']}`}>
<Text className={`${styles['assets-content-item-top-before']}`}>¥</Text>
<Text className={`${styles['assets-content-item-top-content']}`}>0</Text>
<Text className={`${styles['assets-content-item-top-after']}`}>.20</Text>
<Text className={`${styles['assets-content-item-top-content']}`}>{formatPriceDiv(props.data.data.wallet_money || 0)}</Text>
{/* <Text className={`${styles['assets-content-item-top-after']}`}>{props.wallet_money || 0}</Text> */}
</View>
<Text className={`${styles['assets-content-item-tips']}`}>预存款</Text>
</Navigator>
<View>
<View className={`${styles['assets-content-item-top']}`}>
<Text className={`${styles['assets-content-item-top-content']}`}>4</Text>
<Text className={`${styles['assets-content-item-top-content']}`}>{props.data.data.coupon_count || 0}</Text>
<Text className={`${styles['assets-content-item-top-after']}`}>张</Text>
</View>
<Text className={`${styles['assets-content-item-tips']}`}>优惠券</Text>
@@ -166,8 +239,8 @@ const Assets = () => {
<Navigator hoverClass="none" url="/pages/creditLine/index">
<View className={`${styles['assets-content-item-top']}`}>
<Text className={`${styles['assets-content-item-top-before']}`}>¥</Text>
<Text className={`${styles['assets-content-item-top-content']}`}>99999</Text>
<Text className={`${styles['assets-content-item-top-after']}`}>.-00</Text>
<Text className={`${styles['assets-content-item-top-content']}`}>{formatPriceDiv(props.data.data.credit_line || 0)}</Text>
{/* <Text className={`${styles['assets-content-item-top-after']}`}>.-00</Text> */}
</View>
<Text className={`${styles['assets-content-item-tips']}`}>授信额度</Text>
</Navigator>
@@ -0,0 +1,76 @@
.modify-ickname-content {
margin: 0 auto;
width: 658px;
padding-bottom: 50px;
.modify-ickname-input {
width: 658px;
height: 182px;
background: #f3f3f3;
border: 2px solid #e6e6e6;
border-radius: 10px;
padding: 15px;
box-sizing: border-box;
font-size: 22px;
font-weight: 400;
color: #ababab;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.modify-ickname-input textarea {
width: 100%;
height: 80%;
font-size: 26px;
font-weight: 400;
color: #3c3c3c;
}
.modify-ickname-tips {
font-size: 22px;
font-weight: 400;
color: #ababab;
margin-top: 30px;
}
.modify-ickname-operation {
width: 658px;
height: 82px;
background: #ffffff;
border: 2px solid #cde5ff;
border-radius: 40px;
display: flex;
overflow: hidden;
margin-top: 105px;
display: flex;
}
.modify-ickname-operation button {
height: 100%;
width: 50%;
font-size: 32px;
font-weight: 400;
color: #007aff;
background-color: white;
border: none;
outline: none;
padding: 0;
border-radius: 0;
}
.modify-ickname-operation button::after,
.user-edit-logout::after {
border-radius: 0;
border: none;
}
.modify-ickname-operation .modify-ickname-operation-save {
background: #007aff;
color: #ffffff;
}
.modify-ickname-operation button::after {
border-radius: 0;
}
}
@@ -0,0 +1,49 @@
import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useState } from "react"
import Popup from "@/components/popup";
import { Button, Image, Text, Textarea, View } from "@tarojs/components"
import "./ModifyModal.scss"
interface Params{
title?: string,
save: (value: any)=>void, // 确定保存
}
export default memo(forwardRef((props:any,ref)=>{
const {title="修改昵称"} = props;
const [value, setValue] = useState("");
useEffect(()=>{
setValue(props.value);
},[props.value])
// popup输入长度
const handleTextareaInput = (ev:any)=>{
setValue(ev.detail.value.slice(0,20));
}
// 重置
const handleTextareaReset = ()=>{
setValue("");
}
const [textareaBottom, setTextareaBottom] = useState(0);
const handleBlur = ()=>{
setTextareaBottom(0);
}
const handleFocus = (ev)=>{
setTextareaBottom(ev.detail.height);
}
const [modalShow,setModalShow] = useState(false);
useImperativeHandle(ref, ()=>({setModalShow}))
return (
<Popup onClose={()=>setModalShow(false)} title={title} show={modalShow}>
<View style={{marginBottom: `${textareaBottom}px`}} className="modify-ickname-content">
<View className="modify-ickname-input">
<Textarea showConfirmBar={false} auto-focus adjustPosition={false} value={value} onBlur={handleBlur} onFocus={handleFocus} onInput={handleTextareaInput} maxlength={20}/>
<Text>{value?.length}/20</Text>
</View>
<Text className="modify-ickname-tips">请设置2-20个字符,可由中文、英文、数字组成</Text>
<View className="modify-ickname-operation">
<Button onClick={handleTextareaReset} hoverClass="none" className="modify-ickname-operation-reset">重置</Button>
<Button onClick={()=>props.save(value)} hoverClass="none" className="modify-ickname-operation-save">保存</Button>
</View>
</View>
</Popup>
)
}))
+47 -66
View File
@@ -33,6 +33,49 @@
.user-edit-content-title text{
margin-right: 10px;
}
.user-edit-content-phone{
font-size: 26px;
font-weight: 400;
color: #000000;
display: flex;justify-content: space-between;
}
.user-edit-content-phone text{
font-size: 24px;
font-weight: 400;
color: #ababab;
}
.user-edit-content-bindphone{
padding: 0;width: auto;height: auto;
margin: 0;background: none;border: 0;
text-align: left;
font-size: 26px;
font-weight: 400;
color: #ababab;
}
.user-edit-content-bindphone::after{
border: 0;
}
.user-edit-content-company{
width: 118px;
height: 40px;
background: #dddddd;
border-radius: 6px;
display: flex;align-items: center;justify-content: center;
font-size: 24px;
font-weight: 400;
color: #707070;
}
.user-edit-content-company,.user-edit-content-company-adopt{
background: #CDF3DF;
color: #07C160;
}
.user-edit-content-company text{
margin-left: 5px;
}
.user-edit-content-company.user-edit-content-company-auth{
background-color: #CDF3DF;
color: #07C160;
}
.user-edit-list{
height: 90px;
display: flex;align-items: center;
@@ -50,12 +93,15 @@
color: #000000;
}
.user-edit-list-right{
display: flex;justify-content: space-between;
display: flex;justify-content: space-between;align-items: center;
flex: auto;
font-size: 26px;
font-weight: 400;
color: #000000;
}
.user-edit-list-right>view{
flex: 1;
}
.user-edit-list-right-placeholder{
color: #cccccc;
}
@@ -77,69 +123,4 @@
text-align: center;
color: #007aff;
}
.user-edit-popup-content{
margin: 0 auto;
width: 658px;
padding-bottom: 50px;
}
.user-edit-popup-input{
width: 658px;
height: 182px;
background: #f3f3f3;
border: 2px solid #e6e6e6;
border-radius: 10px;
padding: 15px;
box-sizing: border-box;
font-size: 22px;
font-weight: 400;
color: #ababab;
display: flex;flex-direction: column;
align-items: flex-end;
}
.user-edit-popup-input textarea{
width: 100%;
height: 80%;
font-size: 26px;
font-weight: 400;
color: #3c3c3c;
}
.user-edit-popup-tips{
font-size: 22px;
font-weight: 400;
color: #ababab;
margin-top: 30px;
}
.user-edit-popup-operation{
width: 658px;
height: 82px;
background: #ffffff;
border: 2px solid #cde5ff;
border-radius: 40px;
display: flex;
overflow: hidden;
margin-top: 105px;
display: flex;
}
.user-edit-popup-operation button{
height: 100%;
width: 50%;
font-size: 32px;
font-weight: 400;
color: #007aff;
background-color: white;
border: none;
outline: none;
padding: 0;
border-radius: 0;
}
.user-edit-popup-operation button::after,.user-edit-logout::after{
border-radius: 0;
border: none;
}
.user-edit-popup-operation .user-edit-popup-operation-save{
background: #007aff;
color: #ffffff;
}
.user-edit-popup-operation button::after{ border-radius: 0; }
}
+148 -88
View File
@@ -1,101 +1,189 @@
import { alert, goLink, isEmptyObject, retrieval } from "@/common/common";
import Popup from "@/components/popup";
import { Button, Image, Text, Textarea, View } from "@tarojs/components"
import { Button, Image, Picker, Text, Textarea, View } from "@tarojs/components"
import Taro, { chooseMedia } from "@tarojs/taro";
import { GetAdminUserInfoApi, realNameUpdateApi } from "@/api/user";
import { memo, useCallback, useEffect, useState } from "react"
import { realNameUpdateApi, companyTypeApi, portraitUpdateApi } from "@/api/user";
import { companyDetailApi, companyUpdateApi } from "@/api/company"
import { memo, useCallback, useEffect, useRef, useState } from "react"
import "./index.scss"
import ModifyModal from "./components/ModifyModal";
import useLogin from "@/use/useLogin";
import { useSelector } from "@/reducers/hooks";
import useUploadCDNImg from "@/use/useUploadImage";
import { IMG_CND_Prefix } from "@/common/constant";
export default ()=>{
// 用户信息
const { fetchData, state } = GetAdminUserInfoApi();
const getData = async ()=>{
const result = await fetchData();
export default () => {
const { getPhoneNumber, getAdminUserInfo } = useLogin();
const { adminUserInfo } = useSelector(state => state.userInfo);
// 用户信息
useEffect(() => {
setFormData({
...formData,
real_name: result.data.user_name
})
}
useEffect(()=>{
getData();
},[])
...adminUserInfo as any,
});
}, [adminUserInfo]);
useEffect(() => {
setFormData({
...adminUserInfo as any,
company_type_index: 0
});
getCompanyTypeData();
}, [])
// 表单数据
const [formData, setFormData] = useState({
real_name: "麦兜"
user_name: "麦兜"
});
// 显示popup
const [popupShow,setPopupShow] = useState(false);
const triggerList = useCallback((key:string)=>{
setPopupShow(true);
},[])
// popup保存
const { fetchData: realNameUpdateFetch } = realNameUpdateApi();
// 昵称修改保存
const { fetchData: realNameUpdateFetch } = realNameUpdateApi();
const rules = {
real_name: [{
message: "请输入昵称"
text: [{
message: "请输入"
}]
}
const handleTextareaSave = async (real_name)=>{
retrieval({real_name},rules).then(async ()=>{
const result = await realNameUpdateFetch({real_name});
if(result.success){
getData();
setPopupShow(false);
const { fetchData: saveFetch } = companyUpdateApi();
const { fetchData: getCompanyFetch } = companyDetailApi();
const handleTextareaSave = async (text, type) => {
retrieval({ text }, rules).then(async () => {
let result;
if (type == "Ickname") {
result = await realNameUpdateFetch({ real_name: text });
} else {
const params = await getCompanyFetch();
result = await saveFetch({
...params.data,
company_name: text
});
}
if (result.success) {
getAdminUserInfo();
(ModifyIcknameEl.current as any).setModalShow(false);
(ModifyCompanyNameEl.current as any).setModalShow(false)
alert.success("保存成功");
}else{
} else {
alert.none(result.msg);
}
}).catch(message=>{
}).catch(message => {
alert.none(message);
})
}
// Taro.eventCenter.on('message:detail', (message) => console.log(message))
// 面面跳转
const onNavigate = (url:string)=>{
const onNavigate = (url: string) => {
goLink(url);
}
// 肖像编辑
const handleSelectRortrait = ()=>{
chooseMedia({
count: 1,
mediaType: ["image"],
success(ev){
console.log(ev);
const { fetchData: portraitUpdateFetch } = portraitUpdateApi();
const { getWxPhoto } = useUploadCDNImg();
const handleSelectRortrait = () => {
Taro.showModal({
title: "提示",
content: "是否确定更改头像?",
showCancel: true,
async success(ev) {
if (ev.confirm) {
let result = await getWxPhoto('mall');
const portraitUpdateResult = await portraitUpdateFetch({
avatar_url: IMG_CND_Prefix + (result as any).url
});
if (portraitUpdateResult.success) {
getAdminUserInfo();
alert.success("保存成功");
} else {
alert.none(portraitUpdateResult.msg);
}
}
}
})
}
const mGetPhoneNumber = (ev) => {
if (ev.detail?.code) {
getPhoneNumber(ev.detail.code);
} else {
alert.none("绑定失败!");
}
}
const ModifyIcknameEl = useRef(null);
const ModifyCompanyNameEl = useRef(null);
// 获取企业类型
const { fetchData: companyTypeFetch, state: companyTypeData } = companyTypeApi();
const getCompanyTypeData = async () => {
const reuslt = await companyTypeFetch();
if (reuslt.success) {
reuslt.data?.list?.every((item, index) => {
if (item.id == (adminUserInfo as any).purchaser_type) {
setFormData({
...adminUserInfo as any,
company_type_index: index
});
return false;
}
return true;
})
}
}
// 修改企业类型
const handleCompanyType = async (ev) => {
const { value } = ev.detail;
const item = companyTypeData.data.list && companyTypeData.data.list[value];
if (item) {
const params = await getCompanyFetch();
const result = await saveFetch({
...params.data,
purchaser_type: item.id
});
if (result.success) {
getAdminUserInfo();
alert.success("保存成功")
} else {
alert.none(result.msg);
}
}
}
return (
<View className="user-edit">
<View onClick={handleSelectRortrait} className="user-edit-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={(formData as any)?.avatar_url} />
<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=""/>
<View className="user-edit-content-title"><Text /> 个人资料</View>
<UserEditList onClick={() => (ModifyIcknameEl.current as any).setModalShow(true)} data={(formData as any)?.user_name} label="昵称" placeholder="请输入" icon="" />
<UserEditList label="手机号" placeholder="去绑定" icon="">
{((formData as any)?.phone) ? <View className="user-edit-content-phone">
<View>{(formData as any)?.phone}</View>
<Text>已绑定</Text>
</View> :
<Button className="user-edit-content-bindphone" openType="getPhoneNumber" onGetPhoneNumber={mGetPhoneNumber}>去绑定</Button>
}
</UserEditList>
</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="">
已认证
<View className="user-edit-content-title"><Text /> 组织资料</View>
<UserEditList onClick={() => (ModifyCompanyNameEl.current as any).setModalShow(true)} data={(formData as any)?.company_name} label="名称" placeholder="待绑定" icon="" />
<UserEditList label="类型" placeholder="完善公司/组织信息" icon="">
<Picker mode="selector" range={(companyTypeData.data as any).list as any} rangeKey="name" value={(formData as any)?.company_type_index} onChange={handleCompanyType}>
{(companyTypeData.data as any).list && (companyTypeData.data as any).list[(formData as any)?.company_type_index].name}
</Picker>
</UserEditList>
<UserEditList onClick={()=>onNavigate("/pages/weightList/index")} label="创建人" placeholder="完善公司/组织信息" icon=""/>
<UserEditList onClick={() => onNavigate("/pages/certification/index")} label="我的认证" placeholder="待绑定" icon="">
<View className={`user-edit-content-company ${(formData as any)?.authentication_status == 4 && "user-edit-content-company-adopt"}`}>
<Text className="iconfont " /> {(formData as any)?.authentication_status == 4 ? "已认证" : "未认证"}
</View>
</UserEditList>
<UserEditList label="创建人" data={(formData as any)?.founder_user_name} placeholder="完善公司/组织信息" icon="" useIcon="true" />
</View>
<Button hoverClass="none" className="user-edit-logout">退出当前账号</Button>
{/* <Button hoverClass="none" className="user-edit-logout">退出当前账号</Button> */}
<PopupContent value={formData.real_name} show={popupShow} setPopupShow={setPopupShow} save={handleTextareaSave}/>
<ModifyModal title="修改昵称" ref={ModifyIcknameEl} value={(formData as any)?.user_name} save={(value) => handleTextareaSave(value, "Ickname")} />
<ModifyModal title="修改名称" ref={ModifyCompanyNameEl} value={(formData as any)?.company_name} save={(value) => handleTextareaSave(value, "companyName")} />
</View>
)
}
// 列表
const UserEditList = memo((props:any)=>{
const UserEditList = memo((props: any) => {
return (
<View onClick={props.onClick} className="user-edit-list">
<View className="user-edit-list-left">
@@ -104,44 +192,16 @@ 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>
props.children ? props.children :
props.data ? props.data :
<View className="user-edit-list-right-placeholder">{props.placeholder}</View>
}
</View>
<Text className="iconfont icon-a-moreback"></Text>
{
!props.useIcon &&
<Text className="iconfont icon-a-moreback"></Text>
}
</View>
</View>
)
})
// popup内容
const PopupContent = memo((props:any)=>{
const [value, setValue] = useState("");
useEffect(()=>{
setValue(props.value);
},[props.value])
// popup输入长度
const handleTextareaInput = (ev:any)=>{
setValue(ev.detail.value.slice(0,20));
}
// 重置
const handleTextareaReset = ()=>{
setValue("");
}
return (
<Popup onClose={()=>props.setPopupShow(false)} title="修改昵称" show={props.show}>
<View className="user-edit-popup-content">
<View className="user-edit-popup-input">
<Textarea value={value} onInput={handleTextareaInput} maxlength={20}/>
<Text>{value.length}/20</Text>
</View>
<Text className="user-edit-popup-tips">请设置2-20个字符,由中文、英文、数字、-和_组成</Text>
<View className="user-edit-popup-operation">
<Button onClick={handleTextareaReset} hoverClass="none" className="user-edit-popup-operation-reset">重置</Button>
<Button onClick={()=>props.save(value)} hoverClass="none" className="user-edit-popup-operation-save">保存</Button>
</View>
</View>
</Popup>
)
})