1
This commit is contained in:
@@ -6,7 +6,7 @@ import { Button, Input, Text, Textarea, View } from "@tarojs/components"
|
||||
import Taro, { setNavigationBarTitle, useRouter } from "@tarojs/taro"
|
||||
import { useEffect, useState } from "react"
|
||||
import "./index.scss"
|
||||
import {addressAddApi, addressDetailApi} from "@/api/addressManager"
|
||||
import {addressAddApi, addressDetailApi,addressEditApi} from "@/api/addressManager"
|
||||
|
||||
export default ()=>{
|
||||
const [showSiteModal, setShowSiteModal] = useState(false);
|
||||
@@ -15,7 +15,7 @@ export default ()=>{
|
||||
if(type=="add"){
|
||||
setNavigationBarTitle({title:"新增收货地址"})
|
||||
}else{
|
||||
// initalFormData();
|
||||
initalFormData();
|
||||
setNavigationBarTitle({title:"编辑收货地址"})
|
||||
}
|
||||
},[])
|
||||
@@ -23,19 +23,24 @@ export default ()=>{
|
||||
const {fetchData: getFromData} = addressDetailApi()
|
||||
const initalFormData = async ()=>{
|
||||
const detail = await getFromData({id});
|
||||
const siteArray = []
|
||||
// setFormData({
|
||||
// name: detail.data.name,
|
||||
// phone: detail.data.phone,
|
||||
// site: detail.data.,
|
||||
// siteArray: [],
|
||||
// district_id: detail.data.district_id,
|
||||
// address_detail: detail.data.address_detail,
|
||||
// is_default: false
|
||||
// })
|
||||
const { province_id,province_name,city_id,city_name,district_id,district_name } = detail.data;
|
||||
const siteArray = [{id: province_id, name: province_name}];
|
||||
city_id&&siteArray.push({id: city_id, name: city_name});
|
||||
district_id&&siteArray.push({id: district_id, name: district_name});
|
||||
setFormData({
|
||||
name: detail.data.name,
|
||||
phone: detail.data.phone,
|
||||
site: siteArray.map(item=>item.name).join(" "),
|
||||
siteArray: siteArray as any,
|
||||
district_id: detail.data.district_id,
|
||||
address_detail: detail.data.address_detail,
|
||||
is_default: detail.data.is_default,
|
||||
id: detail.data.id,
|
||||
})
|
||||
}
|
||||
|
||||
const {fetchData, state} = addressAddApi()
|
||||
const {fetchData} = addressAddApi()
|
||||
const {fetchData: editFetch} = addressEditApi()
|
||||
// 保存
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
@@ -44,7 +49,8 @@ export default ()=>{
|
||||
siteArray: [],
|
||||
district_id:"",
|
||||
address_detail: "",
|
||||
is_default: false
|
||||
is_default: false,
|
||||
id: 0
|
||||
})
|
||||
const rules = {
|
||||
name: [{
|
||||
@@ -62,20 +68,27 @@ export default ()=>{
|
||||
}
|
||||
const handleSave = ()=>{
|
||||
retrieval(formData, rules).then(async ()=>{
|
||||
const result = await fetchData({
|
||||
const result = type=="add"?await fetchData({
|
||||
name: formData.name,
|
||||
phone:formData.phone,
|
||||
site:formData.site,
|
||||
district_id:formData.district_id,
|
||||
address_detail: formData.address_detail,
|
||||
is_default: formData.is_default
|
||||
}):await editFetch({
|
||||
name: formData.name,
|
||||
phone:formData.phone,
|
||||
district_id:formData.district_id,
|
||||
address_detail: formData.address_detail,
|
||||
is_default: formData.is_default,
|
||||
id: formData.id
|
||||
});
|
||||
if(result.success){
|
||||
alert.success("保存成功")
|
||||
Taro.eventCenter.trigger("addressList:refresh");
|
||||
Taro.navigateBack();
|
||||
alert.success("保存成功");
|
||||
}else{
|
||||
alert.error(result.msg);
|
||||
}
|
||||
// Taro.navigateBack();
|
||||
}).catch((message)=>{
|
||||
alert.none(message)
|
||||
})
|
||||
@@ -89,8 +102,6 @@ export default ()=>{
|
||||
},[formData])
|
||||
// 设置选择地址
|
||||
const handleSetSite = (ev:any)=>{
|
||||
console.log(ev);
|
||||
|
||||
if(ev.length>=3){
|
||||
setFormData({
|
||||
...formData,
|
||||
@@ -122,7 +133,7 @@ export default ()=>{
|
||||
<Button style={{"background": hozon?'#007aff':''}} hoverClass="none" className={`add-address-save`} onClick={handleSave}>
|
||||
保存
|
||||
</Button>
|
||||
<Address addressOnSelect={handleSetSite} defaultValue={[ {name: "广东省", id: 193, level: 2}, {name: "佛山市", id: 202, level:3}, {name: "高明区", id: 204, level:4}]} addressOnClose={()=>setShowSiteModal(false)} show={showSiteModal}/>
|
||||
<Address addressOnSelect={handleSetSite} defaultValue={formData.siteArray} addressOnClose={()=>setShowSiteModal(false)} show={showSiteModal}/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -3,12 +3,12 @@ import classnames from "classnames";
|
||||
import Search from '@/components/search'
|
||||
import Product from '@/components/product'
|
||||
import InfiniteScroll from '@/components/infiniteScroll'
|
||||
import Popup from "@/components/popup";
|
||||
import styles from './index.module.scss'
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import Filter from "./components/filter";
|
||||
import Tabs from "@/components/tabs";
|
||||
import SortBtn from "@/components/sortBtn";
|
||||
import SelectData from "../searchList/components/selectData";
|
||||
import {GetSubjectList} from '@/api/subjectMaterial'
|
||||
|
||||
export default () => {
|
||||
const [showPopup, setShowPopup] = useState(false)
|
||||
@@ -23,6 +23,19 @@ export default () => {
|
||||
{title: '系列', value:9},
|
||||
{title: '系列', value:10},
|
||||
])
|
||||
|
||||
useEffect(() => {
|
||||
getSubjectList()
|
||||
}, [])
|
||||
|
||||
//获取专题
|
||||
const [list, setList] = useState<any>([])
|
||||
const {fetchData} = GetSubjectList()
|
||||
const getSubjectList = async () => {
|
||||
let res = await fetchData()
|
||||
console.log('res::', res)
|
||||
}
|
||||
|
||||
return (
|
||||
<View className={styles.main}>
|
||||
<View className={styles.search}>
|
||||
@@ -40,7 +53,7 @@ export default () => {
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.filter_btns}>
|
||||
<Tabs list={selectList} style={{}}/>
|
||||
<SelectData list={selectList}/>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.list}>
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
|
||||
.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_status_selected{
|
||||
color: $color_main;
|
||||
border: 1px solid $color_main;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { Text, View } from "@tarojs/components"
|
||||
import styles from './index.module.scss'
|
||||
import classnames from "classnames";
|
||||
import { memo, useRef, useState } from "react";
|
||||
|
||||
type Param = {
|
||||
onSelect?:(val:number) => void
|
||||
}
|
||||
export default memo(({onSelect}: Param) => {
|
||||
//收货方法 1:自提,2:物流
|
||||
const shipmentMode = useRef([
|
||||
{value:1, label:'上门自提', selected:false},
|
||||
{value:2, label:'物流', selected:false}
|
||||
])
|
||||
const [selectValue, setSelectValue] = useState()
|
||||
const selectShipmentMode = (value) => {
|
||||
setSelectValue(() => value)
|
||||
onSelect?.(value)
|
||||
}
|
||||
return (
|
||||
<View className={styles.order_title}>
|
||||
<Text>收货方式</Text>
|
||||
{shipmentMode.current.map(item => {
|
||||
return <View className={classnames(styles.order_status, (selectValue == item.value)&&styles.order_status_selected)} onClick={() => selectShipmentMode(item.value)}>{item.label}</View>
|
||||
})}
|
||||
</View>
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,5 @@
|
||||
export default {
|
||||
navigationBarTitleText: '电子商城',
|
||||
enablePullDownRefresh: true,
|
||||
backgroundTextStyle: 'dark'
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
.order_edit_main{
|
||||
min-height: 100%;
|
||||
background-color:$color_bg_one;
|
||||
padding-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
.title_msg{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
margin: 0 20px;
|
||||
border-radius: 20px;
|
||||
.miconfont{
|
||||
font-size: 50px;
|
||||
color: $color_main;
|
||||
}
|
||||
.title_msg_con{
|
||||
font-size: 23px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 30px;
|
||||
text{
|
||||
&:nth-child(1) {
|
||||
color: $color_main;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
color: $color_font_three;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shipmentMode_con{
|
||||
margin: 0 20px;
|
||||
}
|
||||
.old_address{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 30px 20px 60px 20px;
|
||||
box-sizing: border-box;
|
||||
.old_address_text{
|
||||
font-weight: 700;
|
||||
&:nth-of-type(1) {
|
||||
padding-bottom: 30px;
|
||||
font-size: $font_size_big;
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
padding-bottom: 30px;
|
||||
font-size: $font_size;
|
||||
}
|
||||
}
|
||||
.userInfo{
|
||||
display: flex;
|
||||
font-size: $font_size;
|
||||
color: $color_font_three;
|
||||
align-items: center;
|
||||
.userInfo_text{
|
||||
font-size: $font_size;
|
||||
&:nth-child(2) {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.select_address_con{
|
||||
flex:1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
border-radius: 30px 30px 0px 0px;
|
||||
.title{
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.address_list{
|
||||
flex:1;
|
||||
height: 0;
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import { Text, View } from "@tarojs/components"
|
||||
import styles from './index.module.scss'
|
||||
import classnames from "classnames";
|
||||
import { useCallback, useRef, useState } from "react";
|
||||
import ShipmentMode from "./components/shipmentMode";
|
||||
import AddressList from "@/components/AddressList";
|
||||
export default () => {
|
||||
//提交的数据
|
||||
const [submitData, setSubmitData] = useState({
|
||||
address_id:0,
|
||||
id:0,
|
||||
shipment_mode: 0
|
||||
})
|
||||
|
||||
//获取收货方法
|
||||
const getShipmentMode = useCallback((num) => {
|
||||
setSubmitData((val) => ({...val, shipment_mode:num}))
|
||||
}, [])
|
||||
return (
|
||||
<View className={styles.order_edit_main}>
|
||||
<View className={classnames(styles.title_msg)}>
|
||||
<Text className={classnames(styles.miconfont, 'iconfont icon-tick-pressed')}></Text>
|
||||
<View className={styles.title_msg_con}>
|
||||
<Text>修改收货地址可能会影响发货时效</Text>
|
||||
<Text>若商品已发货,则不能修改</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.shipmentMode_con}>
|
||||
<ShipmentMode onSelect={getShipmentMode}/>
|
||||
</View>
|
||||
<View className={styles.old_address}>
|
||||
<Text className={styles.old_address_text}>原地址:</Text>
|
||||
<Text className={styles.old_address_text}>广东省 佛山市 禅城区 张槎街道 清风路1988号麦兜的大 大仓库</Text>
|
||||
<View className={styles.userInfo}>
|
||||
<Text className={styles.userInfo_text}>陈先生</Text>
|
||||
<Text className={styles.userInfo_text}>1818877790</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.select_address_con}>
|
||||
<View className={styles.title}>重新选择收货地址</View>
|
||||
<View className={styles.address_list}>
|
||||
<AddressList focusBorderEnabled={true} addButtonEnabled={false}/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
@@ -1,5 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '电子商城',
|
||||
enablePullDownRefresh: true,
|
||||
backgroundTextStyle: 'dark'
|
||||
navigationBarTitleText: '修改地址',
|
||||
}
|
||||
|
||||
@@ -9,11 +9,8 @@ import { goLink } from '@/common/common'
|
||||
import styles from './index.module.scss'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import Taro, { Events, useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
|
||||
import useManualPullDownRefresh from '@/use/useManualPullDownRefresh'
|
||||
|
||||
import {GetProductKindListApi, GetProductListApi} from '@/api/material'
|
||||
import useLogin from '@/use/useLogin'
|
||||
import LoadingCard from '@/components/loadingCard'
|
||||
|
||||
export default () => {
|
||||
|
||||
|
||||
@@ -41,10 +41,11 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
padding: 0 20px;
|
||||
height: 116px;
|
||||
padding: 20px;
|
||||
min-height: 116px;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
box-sizing: border-box;
|
||||
.order_desc_con{
|
||||
width: 150px;
|
||||
font-size: $font_size;
|
||||
|
||||
@@ -15,6 +15,7 @@ import styles from './comfirm.module.scss'
|
||||
import { getParam } from "@/common/system";
|
||||
import useLogin from "@/use/useLogin";
|
||||
import { alert, goLink } from "@/common/common";
|
||||
import ShipmentMode from "../editOrder/components/shipmentMode";
|
||||
|
||||
export default () => {
|
||||
const {checkLogin} = useLogin()
|
||||
@@ -121,14 +122,9 @@ import { alert, goLink } from "@/common/common";
|
||||
setSubmitOrderData((val) => ({...val, address_id:e.id}))
|
||||
}
|
||||
|
||||
//收货方法 1:自提,2:物流
|
||||
const shipmentMode = useRef([
|
||||
{value:1, label:'上门自提', selected:false},
|
||||
{value:2, label:'物流', selected:false}
|
||||
])
|
||||
const selectShipmentMode = (value) => {
|
||||
const selectShipmentMode = useCallback((value) => {
|
||||
setSubmitOrderData((val) => ({...val, shipment_mode:value}))
|
||||
}
|
||||
}, [])
|
||||
|
||||
//获取备注
|
||||
const getRemark = useCallback((e) => {
|
||||
@@ -171,12 +167,7 @@ import { alert, goLink } from "@/common/common";
|
||||
}
|
||||
return (
|
||||
<View className={styles.order_main}>
|
||||
<View className={styles.order_title}>
|
||||
<Text>收货方式</Text>
|
||||
{shipmentMode.current.map(item => {
|
||||
return <View className={classnames(styles.order_status, (submitOrderData?.shipment_mode == item.value)&&styles.order_status_selected)} onClick={() => selectShipmentMode(item.value)}>{item.label}</View>
|
||||
})}
|
||||
</View>
|
||||
<ShipmentMode onSelect={selectShipmentMode}/>
|
||||
<AddressInfo onSelect={(e) => getAddress(e)} defaultValue={defaultAddress}/>
|
||||
<KindList value={formatPreViewOrderMemo}/>
|
||||
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
box-sizing: border-box;
|
||||
margin-top: 20px;
|
||||
.order_address_icon{
|
||||
font-size: 60px;
|
||||
font-size: 76px;
|
||||
color: $color_main;
|
||||
}
|
||||
.order_address_text_con{
|
||||
@@ -16,21 +16,37 @@
|
||||
padding: 0 30px;
|
||||
box-sizing: border-box;
|
||||
.order_address_text_title{
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
font-size: $font_size_medium;
|
||||
margin-top: 10px;
|
||||
@include common_ellipsis;
|
||||
}
|
||||
.order_address_text_name{
|
||||
margin-top: 20px;
|
||||
color: $color_font_three;
|
||||
font-size: $font_size_medium;
|
||||
|
||||
align-items: center;
|
||||
text{
|
||||
&:nth-child(1) {
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
font-size: $color_font_one;
|
||||
margin-right: 40px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
color: $color_font_one;
|
||||
font-size: $font_size_medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.updateBtn{
|
||||
font-size: $font_size_medium;
|
||||
color: $color_font_three;
|
||||
width: 96px;
|
||||
height: 52px;
|
||||
border: 2px solid #dddddd;
|
||||
border-radius: 28px;
|
||||
text-align: center;
|
||||
line-height: 52px;
|
||||
}
|
||||
.order_address_text_no{
|
||||
flex: 1;
|
||||
font-size: $font_size;
|
||||
|
||||
@@ -15,11 +15,12 @@ export type AddressInfoParam = {
|
||||
phone: string
|
||||
}
|
||||
type Param = {
|
||||
onSelect?: (val:any) => void,
|
||||
defaultValue?: AddressInfoParam|null
|
||||
onSelect?: (val:any) => void, //选择
|
||||
defaultValue?: AddressInfoParam|null //默认值
|
||||
disabled?: false|true //true禁用后只用于展示
|
||||
}
|
||||
|
||||
export default memo(({onSelect, defaultValue = null}: Param) => {
|
||||
export default memo(({onSelect, defaultValue = null, disabled = false}: Param) => {
|
||||
const [showAddressList, setShowAddressList] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
@@ -36,31 +37,40 @@ export default memo(({onSelect, defaultValue = null}: Param) => {
|
||||
|
||||
//地址格式
|
||||
const formatAddress = useMemo(() => {
|
||||
if(userInfo) {
|
||||
console.log('userInfo::',userInfo)
|
||||
if(userInfo)
|
||||
return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail
|
||||
}
|
||||
}, [userInfo])
|
||||
|
||||
const changeShow = () => {
|
||||
if(!disabled)
|
||||
setShowAddressList(() => true)
|
||||
}
|
||||
return (
|
||||
<View>
|
||||
<View className={styles.order_address} onClick={() => setShowAddressList(true)}>
|
||||
<View className={styles.order_address} onClick={() => changeShow()}>
|
||||
<View className={classnames(styles.order_address_icon, 'iconfont icon-daohang')}></View>
|
||||
{!userInfo&&<View className={styles.order_address_text_no}>请选择收货地址及信息</View>||
|
||||
<View className={styles.order_address_text_con}>
|
||||
<View className={styles.order_address_text_title}>{formatAddress}</View>
|
||||
<View className={styles.order_address_text_name}>
|
||||
<Text>{userInfo?.name}</Text>
|
||||
<Text>{userInfo?.phone}</Text>
|
||||
{!userInfo&&
|
||||
<>
|
||||
<View className={styles.order_address_text_no}>请选择收货地址及信息</View>
|
||||
<View className={classnames(styles.order_address_more_icon, 'iconfont icon-a-moreback')}></View>
|
||||
</>
|
||||
||<>
|
||||
<View className={styles.order_address_text_con}>
|
||||
<View className={styles.order_address_text_name}>
|
||||
<Text>{userInfo?.name}</Text>
|
||||
<Text>{userInfo?.phone}</Text>
|
||||
</View>
|
||||
<View className={styles.order_address_text_title}>{formatAddress}</View>
|
||||
</View>
|
||||
</View>}
|
||||
<View className={classnames(styles.order_address_more_icon, 'iconfont icon-a-moreback')}></View>
|
||||
<View className={styles.updateBtn}>修改</View>
|
||||
</>}
|
||||
</View>
|
||||
<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
|
||||
{!disabled&&<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
|
||||
<View className={styles.order_address_list}>
|
||||
<View className={styles.order_address_title}>请选择收货地址</View>
|
||||
<AddressList onSelect={(item) => getAddress(item)}/>
|
||||
</View>
|
||||
</Popup>
|
||||
</Popup>}
|
||||
</View>
|
||||
)
|
||||
})
|
||||
@@ -1,23 +1,69 @@
|
||||
.order_price{
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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;
|
||||
// margin-right: 10px;
|
||||
display: flex;
|
||||
.iconfont_msg{
|
||||
position: relative;
|
||||
}
|
||||
.miconfont{
|
||||
font-size: 30px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.message{
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
background: #A8B3BD;
|
||||
z-index: 9;
|
||||
min-height: 50px;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
&::before{
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
bottom: -7px;
|
||||
left: 10px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
content: " ";
|
||||
transform: rotate(45deg);
|
||||
background: #A8B3BD;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
.emphasis{
|
||||
font-weight: 700;
|
||||
}
|
||||
.order_price_num{
|
||||
color: $color_main;
|
||||
font-weight: 700;
|
||||
text{
|
||||
&:nth-child(1) {
|
||||
font-size: $font_size_min;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
font-size: $font_size_big;
|
||||
font-size: 26px;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
font-size: $font_size_medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
.emphasis_num{
|
||||
text{
|
||||
&:nth-child(2) {
|
||||
font-size: $font_size_big;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,12 +1,13 @@
|
||||
import { Text, View } from "@tarojs/components"
|
||||
import { useCallback, useEffect, useMemo } from "react"
|
||||
import { memo, useCallback, useEffect, useMemo } from "react"
|
||||
import {formatKbPrice} from '@/common/common'
|
||||
import classnames from "classnames";
|
||||
import styles from './index.module.scss'
|
||||
type Param = {
|
||||
style?: Object,
|
||||
number?: number
|
||||
}
|
||||
export default ({style, number = 0}:Param) => {
|
||||
export default memo(({style, number = 0}:Param) => {
|
||||
const priceDom = useCallback(() => {
|
||||
let res = number.toFixed(2).split('.')
|
||||
let int_num = parseInt(res[0]) + ''
|
||||
@@ -20,11 +21,43 @@ export default ({style, number = 0}:Param) => {
|
||||
)
|
||||
}, [number])
|
||||
return (
|
||||
<View className={styles.order_price}>
|
||||
<Text className={styles.order_price_text}>预估金额</Text>
|
||||
<View className={styles.order_price_num} style={style}>
|
||||
{priceDom()}
|
||||
<>
|
||||
<View className={styles.order_price}>
|
||||
<View className={styles.order_price_text}>
|
||||
<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>
|
||||
</View>
|
||||
<View className={styles.order_price_num} style={style}>
|
||||
{priceDom()}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.order_price}>
|
||||
<View className={styles.order_price_text}>
|
||||
<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>
|
||||
</View>
|
||||
<View className={styles.order_price_num} style={style}>
|
||||
{priceDom()}
|
||||
</View>
|
||||
</View>
|
||||
<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>
|
||||
</View>
|
||||
<View className={classnames(styles.order_price_num, styles.emphasis_num)} style={style}>
|
||||
{priceDom()}
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
)
|
||||
}
|
||||
})
|
||||
@@ -65,7 +65,6 @@ export default memo(({value}:{value:OrderParam|null}) => {
|
||||
}
|
||||
<View className={styles.order_estimated_amount}>
|
||||
<EstimatedAmount number={formatPriceDiv(value?.estimate_amount)}/>
|
||||
{/* <View className={styles.order_price_des}>(按照25kg/条, 预估金额)</View> */}
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
|
||||
@@ -30,10 +30,10 @@
|
||||
background-color: $color_main;
|
||||
}
|
||||
.order_status_line{
|
||||
border-left: 4px solid $color_main;
|
||||
border-left: 2px solid $color_main;
|
||||
height: 100%;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
left: 13px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { Text, View } from "@tarojs/components"
|
||||
import { Image, Text, View } from "@tarojs/components"
|
||||
import { memo, useState } from "react"
|
||||
import styles from './index.module.scss'
|
||||
import classnames from "classnames";
|
||||
|
||||
type Param = {
|
||||
title: string,
|
||||
time: string,
|
||||
@@ -37,6 +36,9 @@ export default memo(({list = []}:{list?:Param[]}) => {
|
||||
<Text>{showMore&&'收起物流详情'||'点击查看更多物流详情'}</Text>
|
||||
<Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
|
||||
</View>}
|
||||
<View className={styles.tag}>
|
||||
<Image src='./styles/image/hkfk.png' />
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,33 @@
|
||||
|
||||
.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_status_selected{
|
||||
color: $color_main;
|
||||
border: 1px solid $color_main;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { Text, View } from "@tarojs/components"
|
||||
import styles from './index.module.scss'
|
||||
import classnames from "classnames";
|
||||
import { memo, useRef, useState } from "react";
|
||||
|
||||
type Param = {
|
||||
onSelect?:(val:number) => void
|
||||
}
|
||||
export default memo(({onSelect}: Param) => {
|
||||
//收货方法 1:自提,2:物流
|
||||
const shipmentMode = useRef([
|
||||
{value:1, label:'上门自提', selected:false},
|
||||
{value:2, label:'物流', selected:false}
|
||||
])
|
||||
const [selectValue, setSelectValue] = useState()
|
||||
const selectShipmentMode = (value) => {
|
||||
setSelectValue(() => value)
|
||||
onSelect?.(value)
|
||||
}
|
||||
return (
|
||||
<View className={styles.order_title}>
|
||||
<Text>收货方式</Text>
|
||||
{shipmentMode.current.map(item => {
|
||||
return <View className={classnames(styles.order_status, (selectValue == item.value)&&styles.order_status_selected)} onClick={() => selectShipmentMode(item.value)}>{item.label}</View>
|
||||
})}
|
||||
</View>
|
||||
)
|
||||
})
|
||||
@@ -0,0 +1,39 @@
|
||||
|
||||
.weight_memo{
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 0 20px;
|
||||
.weight_memo_item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 130px;
|
||||
&:nth-child(1) {
|
||||
border-bottom: 1px solid #f3f3f3;
|
||||
}
|
||||
.title, .desc{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.title {
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
}
|
||||
.desc{
|
||||
color: $color_font_two;
|
||||
font-size: $font_size_medium;
|
||||
}
|
||||
.miconfont_check, .miconfont_custom{
|
||||
font-size: 37px;
|
||||
color: $color_main;
|
||||
font-weight: normal;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.miconfont_custom{
|
||||
color:#FFC300;
|
||||
}
|
||||
.miconfont_more{
|
||||
font-size: 30px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import Popup from "@/components/popup"
|
||||
import { Text, Textarea, View } from "@tarojs/components"
|
||||
import { memo, useCallback, useState } from "react"
|
||||
import styles from './index.module.scss'
|
||||
import classnames from "classnames";
|
||||
|
||||
type Param = {
|
||||
onCheck?: () => void
|
||||
onCustom?: () => void
|
||||
}
|
||||
export default memo(({onCheck, onCustom}:Param) => {
|
||||
return (
|
||||
<View className={styles.weight_memo}>
|
||||
<View className={styles.weight_memo_item} onClick={() => onCheck?.()}>
|
||||
<View className={styles.title}>
|
||||
<Text className={classnames("iconfont icon-a-yuanmadanmadanguanli", styles.miconfont_check)}></Text>
|
||||
<Text>陆盈纺织</Text>
|
||||
</View>
|
||||
<View className={styles.desc}>
|
||||
<Text>查看原码单</Text>
|
||||
<Text className={classnames("iconfont icon-a-moreback", styles.miconfont_more)}></Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className={styles.weight_memo_item} onClick={() => onCustom?.()}>
|
||||
<View className={styles.title}>
|
||||
<Text className={classnames("iconfont icon-a-yuanmadanmadanguanli", styles.miconfont_custom)}></Text>
|
||||
<Text>我的码单</Text>
|
||||
</View>
|
||||
<View className={styles.desc}>
|
||||
<Text>自定义</Text>
|
||||
<Text className={classnames("iconfont icon-a-moreback", styles.miconfont_more)}></Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
@@ -37,19 +37,24 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
padding: 0 20px;
|
||||
height: 116px;
|
||||
padding: 20px;
|
||||
min-height: 116px;
|
||||
border-radius: 20px;
|
||||
margin-top: 20px;
|
||||
box-sizing: border-box;
|
||||
.order_desc_con{
|
||||
flex:1;
|
||||
width: 150px;
|
||||
font-size: $font_size;
|
||||
font-weight: 700;
|
||||
}
|
||||
.order_desc_text{
|
||||
.order_desc_text, .order_desc_text_hint{
|
||||
font-size: $font_size_medium;
|
||||
color: $color_font_two;
|
||||
margin-right: 10px;
|
||||
flex:1;
|
||||
}
|
||||
.order_desc_text_hint{
|
||||
text-align: right;
|
||||
}
|
||||
.miconfont{
|
||||
font-size: 20px;
|
||||
@@ -61,7 +66,7 @@
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
height: 175px;
|
||||
align-items: center;
|
||||
@@ -74,13 +79,12 @@
|
||||
.order_btn {
|
||||
width: 250px;
|
||||
height: 90px;
|
||||
opacity: 0.6;
|
||||
background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%);
|
||||
border: 2px solid #dddddd;
|
||||
border-radius: 46px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
color: $color_font_three;
|
||||
}
|
||||
.order_number_desc{
|
||||
font-size: $font_size_medium;
|
||||
@@ -115,4 +119,8 @@
|
||||
}
|
||||
|
||||
}
|
||||
.weight_memo_con{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { GetSaleOrderDetailApi } from "@/api/order";
|
||||
import { goLink } from "@/common/common";
|
||||
import { formatDateTime, formatPriceDiv } from "@/common/fotmat";
|
||||
import Popup from "@/components/popup";
|
||||
import SearchInput from "@/components/searchInput";
|
||||
@@ -7,10 +8,10 @@ import Taro, { useRouter } from "@tarojs/taro";
|
||||
import classnames from "classnames";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import AddressInfo from "./components/addressInfo";
|
||||
import EstimatedAmount from "./components/estimatedAmount";
|
||||
import KindList from "./components/kindList";
|
||||
import OrderState from "./components/orderState";
|
||||
import Remark from "./components/remark";
|
||||
import WeightMemo from "./components/weightMemo";
|
||||
import styles from './index.module.scss'
|
||||
|
||||
export default () => {
|
||||
@@ -58,7 +59,7 @@ import styles from './index.module.scss'
|
||||
if (orderDetail.sale_mode == 1 || orderDetail.sale_mode == 2) num_count = Number(num_count / 100);
|
||||
setFormatDetailOrder({
|
||||
estimate_amount: orderDetail.estimate_amount, //预估金额
|
||||
estimate_weight: orderDetail.estimate_weight,
|
||||
estimate_weight: orderDetail.estimate_weight,
|
||||
sale_mode: orderDetail.sale_mode,
|
||||
sale_mode_name: orderDetail.sale_mode_name,
|
||||
colo_count: orderDetail.color_list.length, //颜色数量
|
||||
@@ -76,7 +77,7 @@ import styles from './index.module.scss'
|
||||
//复制功能
|
||||
const clipboardData = () => {
|
||||
Taro.setClipboardData({
|
||||
data: '123123121321',
|
||||
data: orderDetail?.order_no||'',
|
||||
success: function (res) {
|
||||
Taro.showToast({
|
||||
icon: 'none',
|
||||
@@ -110,12 +111,20 @@ import styles from './index.module.scss'
|
||||
setShowDesc(() => false)
|
||||
}, [])
|
||||
|
||||
//修改地址
|
||||
const changeAddress = useCallback(() => {
|
||||
goLink('/pages/editOrder/index', {id: router.params.id})
|
||||
}, [router.params])
|
||||
return (
|
||||
<View className={styles.order_main}>
|
||||
<View className={styles.weight_memo_con}>
|
||||
<WeightMemo/>
|
||||
</View>
|
||||
<OrderState />
|
||||
<AddressInfo defaultValue={defaultAddress}/>
|
||||
<View onClick={() => changeAddress()}>
|
||||
<AddressInfo defaultValue={defaultAddress} disabled={true} />
|
||||
</View>
|
||||
<KindList value={formatPreViewOrderMemo}/>
|
||||
|
||||
<View className={styles.order_info} >
|
||||
<View className={styles.order_info_title}>订单信息</View>
|
||||
<SearchInput showBorder={false} title='单号'>
|
||||
@@ -127,6 +136,9 @@ import styles from './index.module.scss'
|
||||
<SearchInput showBorder={false} title='下单时间'>
|
||||
<Text>{formatDateTime(orderDetail?.create_time)}</Text>
|
||||
</SearchInput>
|
||||
<SearchInput showBorder={false} title='付款时间'>
|
||||
<Text>{formatDateTime(orderDetail?.create_time)}</Text>
|
||||
</SearchInput>
|
||||
</View>
|
||||
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
|
||||
<View className={styles.order_desc_con}>订单备注</View>
|
||||
@@ -137,7 +149,6 @@ import styles from './index.module.scss'
|
||||
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
|
||||
</View>
|
||||
<View className={styles.submit_order}>
|
||||
|
||||
<View className={styles.order_btn}>取消订单</View>
|
||||
</View>
|
||||
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
|
||||
|
||||
Reference in New Issue
Block a user