xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch '订单列表对接' into dev

Browse Source
This commit is contained in:
czm 2022-05-31 10:28:28 +08:00
commit 7d3b50bbf8
45 changed files with 1753 additions and 375 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/api/onlinePay.ts Normal file
View File

@ -0,0 +1,13 @@
import { useRequest } from "@/use/useHttp"
/**
* 获取在线支付二维码
*/
export const GetPayCode = () => {
return useRequest({
url: `/`,
base_url: 'http://192.168.1.127:8081/caphtml',
method: "post",
})
}

34
src/api/order.ts
View File

@ -21,11 +21,11 @@ export const SaleOrderApi = () => {
} }
/** /**
* 获取销售单详情 * 获取商城订单详情
*/ */
export const GetSaleOrderDetailApi = () => { export const GetSaleOrderDetailApi = () => {
return useRequest({ return useRequest({
url: `/v1/mall/saleOrder`, url: `/v1/mall/saleOrder/detail`,
method: "get", method: "get",
}) })
} }
@ -59,4 +59,34 @@ export const SaleOrderApi = () => {
url: `/v1/mall/saleOrder/shipmentMode`, url: `/v1/mall/saleOrder/shipmentMode`,
method: "put", method: "put",
}) })
}
/**
* 获取订单状态枚举
*/
export const GetOrderStatusListApi = () => {
return useRequest({
url: `/v1/mall/enum/sale/order/status`,
method: "get",
})
}
/**
* 获取订单列表
*/
export const GetOrderListApi = () => {
return useRequest({
url: `/v1/mall/saleOrder/list`,
method: "get",
})
}
/**
* 作废销售单
*/
export const CancelOrderApi = () => {
return useRequest({
url: `/v1/mall/saleOrder/cancel`,
method: "put",
})
} }

21
src/api/orderPay.ts Normal file
View File

@ -0,0 +1,21 @@
import { useRequest } from "@/use/useHttp"
/**
* 获取订单支付方式信息
*/
export const GetOrderPayApi = () => {
return useRequest({
url: `/v1/mall/orderPayment/orderPaymentMethodInfo`,
method: "get",
})
}
/**
* 订单支付提交
*/
export const SubmitOrderPayApi = () => {
return useRequest({
url: `/v1/mall/orderPayment/orderPaymentSubmission`,
method: "put",
})
}

15
src/common/common.ts
View File

@ -7,20 +7,15 @@ import Qs from 'qs'
* @param params * @param params
* @param type false 跳转普通页面，true 跳转tabbar页面 * @param type false 跳转普通页面，true 跳转tabbar页面
*/ */
export const goLink = (path = '', params = {}, type:false|true = false) => { type ParamLink = 'navigateTo'|'switchTab'|'reLaunch'|'redirectTo'
export const goLink = (path = '', params = {}, way: ParamLink = 'navigateTo') => {
if(path) { if(path) {
let params_str = Qs.stringify(params) let params_str = Qs.stringify(params)
console.log('params_str::',params_str) console.log('params_str::',params_str)
path = params_str?path+'?'+params_str:path path = params_str?path+'?'+params_str:path
if(!type) { console.log('path::', way)
Taro.navigateTo({ Taro[way]({url: path})
url: path
})
} else {
Taro.switchTab({
url: path
})
}
} }
} }

1
src/common/constant.js
View File

@ -10,6 +10,7 @@
// export const BASE_URL = `https://www.zzfzyc.com/lymarket` // 正式环境 // export const BASE_URL = `https://www.zzfzyc.com/lymarket` // 正式环境
export const BASE_URL = `http://192.168.1.4:40001/lymarket` // 王霞 export const BASE_URL = `http://192.168.1.4:40001/lymarket` // 王霞
// export const BASE_URL = `http://192.168.1.224:50002/lymarket` // 添 // export const BASE_URL = `http://192.168.1.224:50002/lymarket` // 添
// export const BASE_URL = `http://192.168.1.15:50001/lymarket` // 杰
// CDN // CDN
// 生成密钥 // 生成密钥

2
src/components/checkbox/index.module.scss
View File

@ -26,6 +26,6 @@
text-align: center; text-align: center;
line-height: 40px; line-height: 40px;
.miconfont{ .miconfont{
font-size: 26px; font-size: 32px;
} }
} }

3
src/components/infiniteScroll/index.module.scss
View File

@ -11,6 +11,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
.noMore{
padding-top: 20px;
}
} }
.scrollViewCon { .scrollViewCon {
// height: 100%; // height: 100%;

2
src/components/infiniteScroll/index.tsx
View File

@ -93,7 +93,7 @@ export default memo(({
<View className={style.infinite_scroll}> <View className={style.infinite_scroll}>
{ {
(statusMore == 2)&&<View className={style.loading_more}>加载中<DotLoading/></View>|| (statusMore == 2)&&<View className={style.loading_more}>加载中<DotLoading/></View>||
<View>没有更多数据了</View> <View className={style.noMore}>没有更多数据了</View>
} }
</View> </View>
</View> </View>

22
src/components/orderBtns/index.module.scss Normal file
View File

@ -0,0 +1,22 @@
.btns_list{
display: flex;
justify-content: flex-end;
margin-top: 30px;
.btns_item{
width: 152px;
height: 72px;
border: 2px solid #dddddd;
border-radius: 38px;
text-align: center;
line-height: 72px;
font-size: $font_size;
color: $color_font_three;
&:nth-child(n+2) {
margin-left: 32px;
}
}
.end_btn{
border: 2px solid $color_main;
color: $color_main;
}
}

102
src/components/orderBtns/index.tsx Normal file
View File

@ -0,0 +1,102 @@
import { CancelOrderApi } from "@/api/order"
import { alert } from "@/common/common"
import { View } from "@tarojs/components"
import Taro from "@tarojs/taro"
import { useCallback, useRef, memo } from "react"
import styles from './index.module.scss'
type Param = {
orderInfo: {
status?: number, //订单状态
orderId: number, //订单id
payModel: number, //支付方式
realPayPrice: number, //实付金额
pendingPayPrice: number, //待付金额
},
onClick?: (val: number) => void //点击后触发的事件，返回订单状态
}
export default memo(({orderInfo, onClick}:Param) => {
//订单按钮按订单状态归类
const orderBtnsList = useRef([
{
id: 1,
value: [0, 1, 2, 3, 4], //取消订单按钮对应： 待接单，待配布，已配布, 待付款， 待发货
label: '取消订单'
},
{
id: 2,
value: [3, 4], //去付款按钮对应：待付款， 待发货
label: '去付款'
},
{
id: 3,
value: [4], //取消订单按钮对应： 待发货
label: '申请退款'
},
{
id: 4,
value: [5, 6, 7, 8], //取消订单按钮对应： 待收货, 已收货, 已完成, 已退款
label: '查看物流'
},
{
id: 5,
value: [5, 6, 8], //取消订单按钮对应： 待收货, 已收货, 已退款
label: '申请退货'
},
{
id: 6,
value: [5], //取消订单按钮对应： 待收货
label: '确认收货'
},
{
id: 7,
value: [5,6,7,8], //取消订单按钮对应： 待收货，已收货，已完成, 已退款
label: '再次购买'
}
])
//判断是否显示该按钮
const orderBtnsShow = useCallback((item, status) => {
if(item.id == 1) {
return( orderInfo.realPayPrice == 0 && status <= 4) //在代发货之前没有付过款
}
if(item.id == 2) {
return( orderInfo.pendingPayPrice != 0 && status <= 4) //在代发货之前没有付完款
}
return item.value.includes(status)
},[])
//点击按钮操作
const submitBtns = (val) => {
(val == 1)&&cancelOrder(); //取消订单按钮
(val == 2)&&onClick?.(val); //去付款按钮
}
//取消订单
const {fetchData: cancelFetchData} = CancelOrderApi()
const cancelOrder = () => {
Taro.showModal({
title: '要取消该订单吗？',
success: async function (res) {
if (res.confirm) {
let res = await cancelFetchData({id: orderInfo.orderId})
if(res.success) {
alert.success('取消成功')
onClick?.(1)
} else {
alert.none(res.msg)
}
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
return (
<View className={styles.btns_list}>
{orderBtnsList.current.map((item, index) =>
orderBtnsShow(item, status)&&<View className={styles.btns_item} onClick={() => submitBtns(item.id)}>{item.label}</View>
)}
</View>
)
})

10
src/components/searchInput/index.tsx
View File

@ -12,6 +12,8 @@ type Params = {
changeOnInput?: (string) => void, changeOnInput?: (string) => void,
clickOnInput?: () => void, clickOnInput?: () => void,
children?: ReactNode children?: ReactNode
height?: number,
titleStyle?: Object
} }
@ -24,7 +26,9 @@ export default memo((props: Params) => {
placeholder = '请输入', placeholder = '请输入',
showBorder = true, showBorder = true,
changeOnInput, changeOnInput,
clickOnInput clickOnInput,
height = 80,
titleStyle = {}
} = props } = props
let stylen = useMemo(() => { let stylen = useMemo(() => {
@ -34,8 +38,8 @@ export default memo((props: Params) => {
return {} return {}
}, [showBorder]) }, [showBorder])
return ( return (
<View className={styles.searchInput_main} style={stylen}> <View className={styles.searchInput_main} style={{height: height + 'rpx', ...stylen}}>
{showTitle&&<View className={styles.searchInput_title}>{title}</View>} {showTitle&&<View className={styles.searchInput_title} style={titleStyle}>{title}</View>}
<View className={styles.searchInput_con}> <View className={styles.searchInput_con}>
{!props.children&&<Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/> {!props.children&&<Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/>
||<View>{props.children}</View> ||<View>{props.children}</View>

4
src/pages/details/index.tsx
View File

@ -8,7 +8,7 @@ import ShopCart from '@/components/shopCart';
import Preview,{colorItem} from './components/preview'; import Preview,{colorItem} from './components/preview';
import styles from './index.module.scss' import styles from './index.module.scss'
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import {formatHashTag} from '@/common/fotmat' import {formatHashTag, formatImgUrl} from '@/common/fotmat'
import useManualPullDownRefresh from '@/use/useManualPullDownRefresh'; import useManualPullDownRefresh from '@/use/useManualPullDownRefresh';
import { goLink } from '@/common/common'; import { goLink } from '@/common/common';
import useUserInfo from '@/use/useUserInfo'; import useUserInfo from '@/use/useUserInfo';
@ -147,7 +147,7 @@ export default (props:params) => {
{productInfo?.product_color_list?.map(item => { {productInfo?.product_color_list?.map(item => {
return <View className={styles.item} onClick={() => getColorItem(item)}> return <View className={styles.item} onClick={() => getColorItem(item)}>
<View className={styles.item_color}> <View className={styles.item_color}>
<Image src={item.texture_url}></Image> <Image src={formatImgUrl(item.texture_url)}></Image>
</View> </View>
<View className={styles.item_name}>{item.code}</View> <View className={styles.item_name}>{item.code}</View>
</View> </View>

62
src/pages/order/comfirm.tsx
View File

@ -31,7 +31,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
const param = getParam() const param = getParam()
const idsAndSaleModel = useRef<orderPreParam>({shopping_cart_product_color_list:[], sale_mode:0}) const idsAndSaleModel = useRef<orderPreParam>({shopping_cart_product_color_list:[], sale_mode:0})
useDidShow(async () => { useDidShow(async () => {
await checkLogin() // await checkLogin()
idsAndSaleModel.current.sale_mode = Number(param?.sale_mode) idsAndSaleModel.current.sale_mode = Number(param?.sale_mode)
param?.ids?.split('-')?.map(item => { param?.ids?.split('-')?.map(item => {
return idsAndSaleModel.current.shopping_cart_product_color_list?.push({ return idsAndSaleModel.current.shopping_cart_product_color_list?.push({
@ -43,8 +43,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
}) })
//获取销售预览订单 //获取销售预览订单
type preViewOrderParam = {estimate_amount:number, estimate_weight:number, product_color_list:any[], sale_mode:number, sale_mode_name:string, default_address:AddressInfoParam} const [preViewOrder, setPreViewOrder] = useState<any>() //获取到的原始数据
const [preViewOrder, setPreViewOrder] = useState<preViewOrderParam>() //获取到的原始数据
const {fetchData} = SaleOrderPreViewApi() const {fetchData} = SaleOrderPreViewApi()
const getSaleOrderPreView = async () => { const getSaleOrderPreView = async () => {
if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) { if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) {
@ -57,6 +56,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
useEffect(() => { useEffect(() => {
if(preViewOrder) { if(preViewOrder) {
formatData() formatData()
getDataList()
//当有默认地址时设置默认地址id //当有默认地址时设置默认地址id
preViewOrder.default_address&&setSubmitOrderData((val) => ({...val, address_id:preViewOrder.default_address.id})) preViewOrder.default_address&&setSubmitOrderData((val) => ({...val, address_id:preViewOrder.default_address.id}))
} }
@ -65,39 +65,18 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
//格式化数据格式 //格式化数据格式
const [formatPreViewOrder, setFormatPreViewOrder] = useState<any>() //格式化后的数据 const [formatPreViewOrder, setFormatPreViewOrder] = useState<any>() //格式化后的数据
const formatData = () => { const formatData = () => {
if(preViewOrder?.product_color_list&&preViewOrder?.product_color_list.length > 0) { setFormatPreViewOrder({
let dataList = {} estimate_amount: preViewOrder.estimate_amount, //预估金额
let num_count = 0 //总数量 sale_mode: preViewOrder.sale_mode,
let orderList:{shopping_cart_product_color_id:number}[] = [] //提交订单时的格式 sale_mode_name: preViewOrder.sale_mode_name,
preViewOrder?.product_color_list.map(item => { total_colors: preViewOrder.total_colors, //总颜色数量
dataList[item.product_code] = dataList[item.product_code]||{} total_number: preViewOrder.total_number, //总数量
dataList[item.product_code].product_code = item.product_code total_fabrics: preViewOrder.total_fabrics, //面料数量
dataList[item.product_code].product_name = item.product_name unit: preViewOrder.sale_mode == 0?'条':'m', //单位
dataList[item.product_code].sale_mode_name = preViewOrder.sale_mode_name list: preViewOrder.product_list
dataList[item.product_code].color_list = dataList[item.product_code]?.color_list||[] })
dataList[item.product_code].color_list.push(item)
//大货
if (preViewOrder.sale_mode == 0) num_count += item.roll
//剪板或散件
if (preViewOrder.sale_mode == 1 || preViewOrder.sale_mode == 2) num_count += item.length
orderList.push({shopping_cart_product_color_id:item.id})
})
if (preViewOrder.sale_mode == 1 || preViewOrder.sale_mode == 2) num_count = Number(num_count / 100);
setFormatPreViewOrder({
estimate_amount: preViewOrder.estimate_amount, //预估金额
estimate_weight: preViewOrder.estimate_weight,
sale_mode: preViewOrder.sale_mode,
sale_mode_name: preViewOrder.sale_mode_name,
colo_count: preViewOrder.product_color_list.length, //颜色数量
num_count: num_count, //总数量
unit: preViewOrder.sale_mode == 0?'条':'m', //单位
list: Object.values(dataList)
})
setSubmitOrderData({...submitOrderData, list: orderList})
}
} }
const formatPreViewOrderMemo = useMemo(() => { const formatPreViewOrderMemo = useMemo(() => {
console.log('formatPreViewOrder::',formatPreViewOrder)
return formatPreViewOrder return formatPreViewOrder
}, [formatPreViewOrder]) }, [formatPreViewOrder])
@ -118,6 +97,17 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
return null return null
}, [preViewOrder]) }, [preViewOrder])
//获取提交格式数据列表
const getDataList = () => {
let list:{shopping_cart_product_color_id:number}[] = []
preViewOrder.product_list?.map(item => {
item.product_colors?.map(colorItem => {
list.push({shopping_cart_product_color_id:colorItem.id})
})
})
setSubmitOrderData((val) => ({...val, list}))
}
//获取地址 //获取地址
const getAddress = (e) => { const getAddress = (e) => {
setSubmitOrderData((val) => ({...val, address_id:e.id})) setSubmitOrderData((val) => ({...val, address_id:e.id}))
@ -159,7 +149,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
if (res.confirm) { if (res.confirm) {
const res = await saleOrderFetchData(submitOrderData) const res = await saleOrderFetchData(submitOrderData)
if(res.success) { if(res.success) {
goLink('/pages/order/index',{id: res.data.id}) goLink('/pages/order/index',{id: res.data.id}, 'redirectTo')
} else { } else {
alert.none(res.msg) alert.none(res.msg)
} }
@ -185,7 +175,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
<View className={styles.submit_order}> <View className={styles.submit_order}>
<View className={styles.submit_order_number}> <View className={styles.submit_order_number}>
<SubmitOrderBtn style={{color:'#007AFF'}} number={formatPriceDiv(formatPreViewOrder?.estimate_amount)}/> <SubmitOrderBtn style={{color:'#007AFF'}} number={formatPriceDiv(formatPreViewOrder?.estimate_amount)}/>
<View className={styles.order_number_desc}>{`${formatPreViewOrder?.list.length}种面料，${formatPreViewOrder?.colo_count}种颜色，共${formatPreViewOrder?.num_count + formatPreViewOrder?.unit}`}</View> <View className={styles.order_number_desc}>{`${formatPreViewOrder?.total_fabrics}种面料，${formatPreViewOrder?.total_colors}种颜色，共${formatPreViewOrder?.total_number + formatPreViewOrder?.unit}`}</View>
</View> </View>
<View className={classnames(styles.order_btn, btnStatus&&styles.ok_order_btn)} onClick={() => submitOrderEven()}>提交订单</View> <View className={classnames(styles.order_btn, btnStatus&&styles.ok_order_btn)} onClick={() => submitOrderEven()}>提交订单</View>
</View> </View>

112
src/pages/order/components/addressInfoDetail/index.module.scss Normal file
View File

@ -0,0 +1,112 @@
.order_address{
height: 178px;
background: #ffffff;
border-radius: 20px;
display: flex;
align-items: center;
padding: 30px;
box-sizing: border-box;
margin-top: 20px;
position: relative;
.order_address_icon{
font-size: 50px;
color: $color_main;
position: absolute;
top: 35px;
left: 20px;
}
.order_address_text_con{
flex:1;
padding-left: 50px;
box-sizing: border-box;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.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;
}
}
.order_address_text_name{
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{
width:200px;
font-size: $font_size_min;
background-color: #F0F0F0;
height: 64px;
border-radius: 24px;
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;
}
}
.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;
}
}

122
src/pages/order/components/addressInfoDetail/index.tsx Normal file
View File

@ -0,0 +1,122 @@
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 { Text, View } from "@tarojs/components"
import classnames from "classnames";
import { forwardRef, memo, useCallback, 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禁用后只用于展示
shipment_mode?: 1|2, //1自提 2物流
onChangeShipmentMode?: (val: number) => void, //返回收货方式
orderId?: number //订单id
}
export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = null, orderId = 0, shipment_mode = 1}: 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)
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>
</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>
)
}))

35
src/pages/order/components/amountShow/index.module.scss Normal file
View File

@ -0,0 +1,35 @@
.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;
}
&:nth-child(3) {
font-size: $font_size_medium;
}
}
}
.emphasis_num{
.price_text{
&:nth-child(2) {
font-size: $font_size_big;
}
}
}
.emphasis_num_big{
.price_text{
&:nth-child(1) {
font-size: $font_size_big;
}
&:nth-child(2) {
font-size: 60px;
}
&:nth-child(1) {
font-size: $font_size_big;
}
}
}

28
src/pages/order/components/amountShow/index.tsx Normal file
View File

@ -0,0 +1,28 @@
import { Text, View } from "@tarojs/components";
import { memo, useCallback } from "react";
import styles from './index.module.scss'
import classnames from "classnames";
type Param = {
number: number, //数字
status: 0|1|2 //0 小型，1中型，2大
}
export default memo(({number = 0, status = 1}:Param) => {
const priceDom = useCallback(() => {
let res = number.toFixed(2).split('.')
let int_num = parseInt(res[0]) + ''
let decimals_num = res[1]
return (
<>
<Text className={styles.price_text}>¥</Text>
<Text className={styles.price_text}>{Number(int_num).toLocaleString()}</Text>
<Text className={styles.price_text}>.{decimals_num}</Text>
</>
)
}, [number])
return (
<View className={classnames(styles.order_price_num, status==1&&styles.emphasis_num, status==2&&styles.emphasis_num_big)} >
{priceDom()}
</View>
)
})

24
src/pages/order/components/estimatedAmount/index.tsx
View File

@ -3,38 +3,26 @@ import { memo, useCallback, useEffect, useMemo } from "react"
import {formatKbPrice} from '@/common/common' import {formatKbPrice} from '@/common/common'
import classnames from "classnames"; import classnames from "classnames";
import styles from './index.module.scss' import styles from './index.module.scss'
import AmountShow from "../amountShow";
type Param = { type Param = {
style?: Object, style?: Object,
number?: number, number?: number,
title?: string, title?: string,
status?: true|false, //true 加大加深 titleStatus?: true|false, //true 标题加大加深
numberStatus?: 0|1|2, //数字尺寸
} }
export default memo(({style, number = 0, status = true, title = ''}:Param) => { export default memo(({style, number = 0, titleStatus = true, title = '', numberStatus = 1}:Param) => {
const priceDom = useCallback(() => {
let res = number.toFixed(2).split('.')
let int_num = parseInt(res[0]) + ''
let decimals_num = res[1]
return (
<>
<Text>¥</Text>
<Text>{Number(int_num).toLocaleString()}</Text>
<Text>.{decimals_num}</Text>
</>
)
}, [number])
return ( return (
<> <>
<View className={styles.order_price}> <View className={styles.order_price}>
<View className={classnames(styles.order_price_text, status&&styles.emphasis)}> <View className={classnames(styles.order_price_text, titleStatus&&styles.emphasis)}>
<Text>{title}</Text> <Text>{title}</Text>
<View className={styles.iconfont_msg}> <View className={styles.iconfont_msg}>
<Text className={classnames(styles.miconfont, 'iconfont icon-zhushi')}></Text> <Text className={classnames(styles.miconfont, 'iconfont icon-zhushi')}></Text>
{/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */} {/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */}
</View> </View>
</View> </View>
<View className={classnames(styles.order_price_num, status&&styles.emphasis_num)} style={style}> <AmountShow status={numberStatus} number={number}/>
{priceDom()}
</View>
</View> </View>
</> </>
) )

54
src/pages/order/components/kindList/index.tsx
View File

@ -5,52 +5,68 @@ import EstimatedAmount from "../estimatedAmount"
import styles from './index.module.scss' import styles from './index.module.scss'
type OrderParam = { type OrderParam = {
estimate_amount: number, estimate_amount: number, //预估金额
estimate_weight: number,
list: any[], list: any[],
sale_mode: number, sale_mode: number,
sale_mode_name: string sale_mode_name: string,
unit: string, unit: string,
colo_count: number, total_colors: number,
num_count: number total_fabrics: number,
total_number: number,
status: number, //订单状态
total_sale_price: number, //销售金额
total_should_collect_money: number, //应收金额
total_weight_error_discount: number, //空差优惠
} }
export default memo(({value}:{value?:OrderParam}) => {
export default memo(({value}:{value:OrderParam|null}) => {
//对应数量 //对应数量
const formatCount = useCallback((item) => { const formatCount = useCallback((item) => {
return value?.sale_mode == 0? item.roll : Number(item.length / 100) return value?.sale_mode == 0? item.roll : Number(item.length / 100)
}, [value]) }, [value])
//对应单价 //对应单价
const standardPrice = useCallback(item => { const standardPrice = useCallback(price => {
return formatPriceDiv(item.standard_price).toLocaleString() + '/' + (value?.sale_mode == 1?'m':'kg') return formatPriceDiv(price).toLocaleString() + '/' + (value?.sale_mode == 1?'m':'kg')
}, [value]) }, [value])
//数量格式 //数量格式
const numText = useMemo(() => { const numText = useMemo(() => {
if(value) if(value)
return `${value?.list.length}种面料，${value?.colo_count}种颜色，共${value?.num_count }${value?.unit}` return `${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}${value?.unit}`
}, [value]) }, [value])
const priceConDom = useMemo(() => {
return (
<>
{(value&&value.status < 3)&&<EstimatedAmount number={formatPriceDiv(value?.estimate_amount)} title="预估金额" />}
{(value&&value.status >= 3)&&<EstimatedAmount number={formatPriceDiv(value?.total_sale_price)} titleStatus={false} numberStatus={0} title="合计金额" />}
{(value&&value.status >= 3)&&<EstimatedAmount number={formatPriceDiv(value?.total_weight_error_discount)} titleStatus={false} numberStatus={0} title="空差优惠" />}
{(value&&value.status >= 3)&&<EstimatedAmount number={formatPriceDiv(value?.total_should_collect_money)} title="应付金额" />}
</>
)
}, [value])
return ( return (
<> <>
<View className={styles.orders_list_title}>{numText}</View> <View className={styles.orders_list_title}>{numText}</View>
<View className={styles.orders_list_con}> <View className={styles.orders_list_con}>
{ {
value?.list.map(item => { value?.list?.map(item => {
return <View key={item.product_code} className={styles.order_list}> return <View key={item.product_code} className={styles.order_list}>
<View className={styles.order_list_title}> <View className={styles.order_list_title}>
<View className={styles.tag}>{item.sale_mode_name}</View> <View className={styles.tag}>{value.sale_mode_name}</View>
<View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View> <View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.num}>共{item.color_list.length}种</View> <View className={styles.num}>共{item?.product_colors.length}种</View>
</View> </View>
<View className={styles.order_list_scroll}> <View className={styles.order_list_scroll}>
{item.color_list?.map(colorItem => { {item?.product_colors?.map(colorItem => {
return <View className={styles.order_list_item}> 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}></View>
<View className={styles.order_list_item_con}> <View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}> <View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>{colorItem.product_color_code + ' ' + colorItem.product_color_name}</View> <View className={styles.order_list_item_title}>{colorItem.code + ' ' + colorItem.name}</View>
<View className={styles.order_list_item_price}>¥{standardPrice(colorItem)}</View> <View className={styles.order_list_item_price}>¥{standardPrice(colorItem.sale_price)}</View>
</View> </View>
<View className={styles.order_list_item_count}> <View className={styles.order_list_item_count}>
<View className={styles.count_num}>×{formatCount(colorItem)}<text>{value.unit}</text></View> <View className={styles.count_num}>×{formatCount(colorItem)}<text>{value.unit}</text></View>
@ -64,7 +80,7 @@ export default memo(({value}:{value:OrderParam|null}) => {
}) })
} }
<View className={styles.order_estimated_amount}> <View className={styles.order_estimated_amount}>
<EstimatedAmount number={formatPriceDiv(value?.estimate_amount)} title="预估金额" /> {priceConDom}
</View> </View>
</View> </View>
</> </>

46
src/pages/order/components/offlinePay/index.module.scss Normal file
View File

@ -0,0 +1,46 @@
$top:170px;
.offlinePay_main{
.offlinePay_con{
padding: 20px;
background-color: #F6F6F6;
border-radius: 20px;
.miconfont_title{
transform: rotate(-180deg);
position: absolute;
left: 20px;
top: 27px;
font-size: 37px;
color: $color_font_three;
z-index: 99;
}
}
.title{
font-size: $font_size_big;
color: #000000;
text-align: center;
font-weight: 700;
position: relative;
}
.offlinePay_list{
border-radius: 10px;
padding: 60px 0;
.offlinePay_con_text{
font-size: $font_size;
font-weight: 700;
}
}
.btns{
background: #007aff;
border-radius: 40px;
width: 668px;
height: 82px;
text-align: center;
line-height: 80px;
width: 100%;
color: #fff;
font-size: 32px;
margin-top: 30px;
}
}

52
src/pages/order/components/offlinePay/index.tsx Normal file
View File

@ -0,0 +1,52 @@
import { Text, View } from "@tarojs/components";
import { memo } from "react";
import AmountShow from "../amountShow";
import classnames from "classnames";
import styles from './index.module.scss'
import MCheckbox from "@/components/checkbox";
import Popup from "@/components/popup";
import SearchInput from "@/components/searchInput";
import Taro from "@tarojs/taro";
type Param = {
show?: true|false,
onClose?: () => void
}
export default memo(({show = true, onClose}:Param) => {
//复制功能
const clipboardData = () => {
Taro.setClipboardData({
data: '开户名称:佛山市浩川盛世科技有限公司; 开户银行:招商银行汾江支行; 转账汇款账号:62062342120001221231212',
success: function (res) {
Taro.showToast({
icon: 'none',
title: '复制成功'
})
}
})
}
return (
<View className={styles.offlinePay_main}>
<Popup show={show} showTitle={false} onClose={onClose} >
<View className={styles.offlinePay_con}>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
<View className={styles.title}>线下汇款</View>
<View className={styles.offlinePay_list}>
<SearchInput showBorder={false} title='开户名称' titleStyle={{fontSize:'23rpx'}}>
<Text className={styles.offlinePay_con_text}>佛山市浩川盛世科技有限公司</Text>
</SearchInput>
<SearchInput showBorder={false} title='开户银行' titleStyle={{fontSize:'23rpx'}}>
<Text className={styles.offlinePay_con_text}>招商银行汾江支行</Text>
</SearchInput>
<SearchInput showBorder={false} title='转账汇款账号' titleStyle={{fontSize:'23rpx'}}>
<Text className={styles.offlinePay_con_text}>62062342120001221231212</Text>
</SearchInput>
</View>
<View className={styles.btns} onClick={clipboardData}>复制信息</View>
</View>
</Popup>
</View>
)
})

8
src/pages/order/components/orderState/index.module.scss
View File

@ -16,7 +16,9 @@
.order_status_item{ .order_status_item{
position: relative; position: relative;
padding-left: 50px; padding-left: 50px;
min-height: 120px; &:nth-last-child(n+2) {
padding-bottom: 30px;
}
.order_status_tail_end, .order_status_tail{ .order_status_tail_end, .order_status_tail{
width: 15px; width: 15px;
height: 15px; height: 15px;
@ -35,7 +37,7 @@
border-left: 2px solid $color_main; border-left: 2px solid $color_main;
height: 100%; height: 100%;
top: 10px; top: 10px;
left: 8px; left: 9px;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
} }
@ -44,7 +46,7 @@
align-items: center; align-items: center;
.order_status_title{ .order_status_title{
color: $color_font_two; color: $color_font_two;
font-size: $font_size_big; font-size: $font_size;
font-weight: 700; font-weight: 700;
} }
.order_status_time{ .order_status_time{

56
src/pages/order/components/orderState/index.tsx
View File

@ -1,10 +1,10 @@
import { Image, Text, View } from "@tarojs/components" import { Image, Text, View } from "@tarojs/components"
import { memo, useState } from "react" import { memo, useMemo, useState } from "react"
import styles from './index.module.scss' import styles from './index.module.scss'
import classnames from "classnames"; import classnames from "classnames";
import { formatImgUrl } from "@/common/fotmat"; import { formatDateTime, formatImgUrl } from "@/common/fotmat";
type Param = { type Param = {
title: string, status: string,
time: string, time: string,
tag: string, tag: string,
desc: string desc: string
@ -14,33 +14,33 @@ export default memo(({list = []}:{list?:Param[]}) => {
const changeMore = () => { const changeMore = () => {
setShowMore(() => !showMore) setShowMore(() => !showMore)
} }
list = [ const dataList = useMemo(() => {
{title:'待配布', time:'2022-04-24 09:08', tag:'已接单', desc:'仓库正在为你配布...'}, return list.reverse()
{title:'待配布', time:'2022-04-24 09:08', tag:'已接单', desc:'仓库正在为你配布...'}, }, [list])
{title:'待接单', time:'2022-04-24 09:08', tag:'已提交', desc:''},
]
return ( return (
<View className={styles.order_flow_state}> <>
<View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}> {(dataList.length > 0)&&<View className={styles.order_flow_state}>
{list.map((item, index) => <View className={styles.order_status_item}> <View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}>
{(list.length > 1)&&<View className={classnames(styles.order_status_tail, (index == 0)&&styles.order_status_tail_end)}></View>} {dataList.map((item, index) => <View className={styles.order_status_item}>
{(list.length != (index + 1))&&<View className={styles.order_status_line}></View>} {(dataList.length > 1)&&<View className={classnames(styles.order_status_tail, (index == 0)&&styles.order_status_tail_end)}></View>}
<View className={styles.order_status_content}> {(dataList.length != (index + 1))&&<View className={styles.order_status_line}></View>}
<View className={classnames(styles.order_status_title, (index == 0)&&styles.order_status_select)}>{item.title}</View> <View className={styles.order_status_content}>
<View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{item.time}</View> <View className={classnames(styles.order_status_title, (index == 0)&&styles.order_status_select)}>{item.status}</View>
<View className={classnames(styles.order_status_tag, (index == 0)&&styles.order_status_tag_select)}>{item.tag}</View> <View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{formatDateTime(item.time)}</View>
</View> {/* <View className={classnames(styles.order_status_tag, (index == 0)&&styles.order_status_tag_select)}>{item.tag}</View> */}
<Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text> </View>
</View>)} <Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text>
</View> </View>)}
{(list.length > 2) && <View className={styles.more} onClick={() => changeMore()}> </View>
<Text>{showMore&&'收起物流详情'||'点击查看更多物流详情'}</Text> {(dataList.length > 2) && <View className={styles.more} onClick={() => changeMore()}>
<Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text> <Text>{showMore&&'收起详情'||'点击查看详情'}</Text>
<Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
</View>}
<View className={styles.image_tag}>
{/* <Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/> */}
</View>
</View>} </View>}
<View className={styles.image_tag}> </>
<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>
</View>
</View>
) )
}) })

126
src/pages/order/components/payment/index.module.scss Normal file
View File

@ -0,0 +1,126 @@
$top:190px;
.payment_main{
.payment_con{
padding: 20px;
background-color: #F6F6F6;
border-radius: 20px;
.miconfont_title{
transform: rotate(-180deg);
position: absolute;
left: 20px;
top: 27px;
font-size: 37px;
color: $color_font_three;
z-index: 99;
}
}
.title{
font-size: $font_size_big;
color: #000000;
text-align: center;
font-weight: 700;
position: relative;
}
.amount{
text-align: center;
padding: 25px 0;
}
.payment_list{
background-color: #fff;
// box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.16);
min-height: 300px;
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));
position: relative;
&::before{
content: '';
position: absolute;
border-bottom: 3px dashed #ccc;
top: $top;
width: calc(100% - 100px);
left:0;
right: 0;
margin: auto;
}
.payment_list_top_border{
height: 32px;
width: 100%;
background: linear-gradient(215deg,#cde5ff 2%, #cde5ff 2%, #68b4ff 72%);
border-radius: 10px 10px 0px 0px;
}
.payment_list_title{
text-align: center;
padding: 30px 0 50px 0;
font-size: $font_size;
color: $color_font_three;
.payment_list_title_price_item{
display: flex;
justify-content: space-between;
padding: 0 90px;
&:nth-child(1) {
margin-bottom: 15px;
}
}
text{
&:nth-child(2) {
color: $color_main;
}
}
}
.payment_list_con{
padding: 20px 30px 0 30px;
.payment_list_item{
display: flex;
justify-content: space-between;
align-items: center;
height: 123px;
&:nth-last-child(n+2) {
border-bottom: 2px solid #F3F3F3;
}
}
.payment_list_item_left{
display: flex;
flex-direction: column;
font-size: $font_size;
.payment_list_item_left_name{
display: flex;
align-items: center;
}
.miconfont{
font-size: 30px;
color: #FFC300;
padding-right: 10px;
}
.payment_list_item_left_price{
font-size: $font_size_min;
color: $color_font_two;
padding-left: 35px;
padding-top: 5px;
}
}
.miconfont_more{
font-size: 20px;
}
}
}
.btns{
background: #007aff;
border-radius: 40px;
width: 668px;
height: 82px;
text-align: center;
line-height: 80px;
width: 100%;
color: #fff;
font-size: 32px;
margin-top: 30px;
}
}

168
src/pages/order/components/payment/index.tsx Normal file
View File

@ -0,0 +1,168 @@
import { Text, View } from "@tarojs/components";
import { memo, useEffect, useMemo, useState } from "react";
import AmountShow from "../amountShow";
import classnames from "classnames";
import styles from './index.module.scss'
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 { formatPriceDiv } from "@/common/fotmat";
import {alert} from "@/common/common"
type Param = {
show?: true|false,
onClose?: () => void,
orderId?: number, //应付单id
onSubmitSuccess?: () => void //支付成功
}
type PayInfo = {
amount: string
}
type PayStatus = 0|1|2|3|4|null //0:预存款， 1:账期，2：线下汇款， 3：扫码支付, 4:货到付款
export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param) => {
//提交参数
const [submitData, setSubmitData] = useState<{id:number, payment_method: PayStatus}>({
id:0,
payment_method: null
})
//线下付款
const [offlinePayShow, setofflinePayShow] = useState(false)
const onShowOfflinePay = () => {
setofflinePayShow(true)
onClose?.()
}
//扫码支付
const [scanPayShow, setScanPayShow] = useState(false)
const onShowScanPay = () => {
setScanPayShow(true)
onClose?.()
}
//获取支付方式数据
const [payInfo, setPayInfo] = useState<any>()
const {fetchData: orderFetchData} = GetOrderPayApi()
const getOrderPay = async () => {
let {data} = await orderFetchData({id: orderId})
setPayInfo(() => data)
}
useEffect(() => {
if(show&&orderId)
setSubmitData((val) => ({...val, id:orderId}))
getOrderPay()
}, [show, orderId])
//预存款选择
const advanceSelectData = (val) => {
setSubmitData((e) => ({...e, payment_method:val}))
}
//账期选择
const periodSelectData = (val) => {
setSubmitData((e) => ({...e, payment_method:val}))
}
//提交支付
const {fetchData: submitFetchData} = SubmitOrderPayApi()
const submitPay = async () => {
if(submitData.payment_method === null) {
alert.error('请选择支付方式')
return false
}
alert.loading('正在支付')
let res = await submitFetchData(submitData)
if(res.success) {
alert.success('支付成功')
onSubmitSuccess?.()
} else {
alert.none(res.msg)
}
}
const advance_payment = useMemo(() => {
const price = formatPriceDiv(payInfo?.should_collect_money - payInfo?.amount_paid)
return (
<View className={styles.payment_list_item_left_price}>{(payInfo?.advance_deposit_balance < price)&&'余额不足，' }剩余 ¥{payInfo?.advance_deposit_balance}</View>
)
}, [payInfo])
return (
<View className={styles.payment_main}>
<Popup show={show} showTitle={false} onClose={onClose} >
<View className={styles.payment_con}>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
<View className={styles.title}>订单支付</View>
<View className={styles.amount}>
<AmountShow status={2} number={formatPriceDiv(payInfo?.should_collect_money - payInfo?.amount_paid)}/>
</View>
<View className={styles.payment_list}>
<View className={styles.payment_list_top_border}></View>
<View className={styles.payment_list_title}>
{/* <Text>向商家发起支付</Text> */}
<View className={styles.payment_list_title_price}>
<View className={styles.payment_list_title_price_item}>
<Text>订单金额</Text>
<Text>¥{formatPriceDiv(payInfo?.should_collect_money)}</Text>
</View>
<View className={styles.payment_list_title_price_item}>
<Text>已付金额</Text>
<Text>¥{formatPriceDiv(payInfo?.amount_paid)}</Text>
</View>
</View>
</View>
<View className={styles.payment_list_con}>
<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}>预存款</View>
</View>
{advance_payment}
</View>
<MCheckbox status={submitData.payment_method == 0} onSelect={() => advanceSelectData(0)} onClose={() => advanceSelectData(null)}/>
</View>
<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}>可用额度 ¥{payInfo?.account_period_credit_available_line}</View>
</View>
<MCheckbox status={submitData.payment_method == 1} onSelect={() => periodSelectData(1)} onClose={() => periodSelectData(null)}/>
</View>
<View className={styles.payment_list_item} onClick={onShowOfflinePay}>
<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}>线下汇款</View>
</View>
</View>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_more)}></View>
</View>
<View className={styles.payment_list_item} onClick={onShowScanPay}>
<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}>扫码支付</View>
</View>
</View>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_more)}></View>
</View>
</View>
</View>
<View className={styles.btns} onClick={submitPay}>确认交易</View>
</View>
</Popup>
<OfflinePay show={offlinePayShow} onClose={() => setofflinePayShow(false)}/>
<ScanPay show={scanPayShow} onClose={() => setScanPayShow(false)}/>
</View>
)
})

2
src/pages/order/components/remark/index.tsx
View File

@ -27,7 +27,7 @@ export default ({onBlur, onSave}:Param) => {
} }
return ( return (
<View className={styles.order_popup}> <View className={styles.order_popup}>
<View className={styles.order_popup_title}>添加备注</View> <View className={styles.order_popup_title}>编辑备注</View>
<View className={styles.order_popup_input}> <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)} onBlur={(e) => onBlur?.(e)}></Textarea>
<View className={styles.descDataNum}>{descData.number}/{descData.count}</View> <View className={styles.descDataNum}>{descData.number}/{descData.count}</View>

54
src/pages/order/components/scanPay/index.module.scss Normal file
View File

@ -0,0 +1,54 @@
$top:170px;
.scanPay_main{
.scanPay_con{
padding: 20px;
background-color: #F6F6F6;
border-radius: 20px;
.miconfont_title{
transform: rotate(-180deg);
position: absolute;
left: 20px;
top: 27px;
font-size: 37px;
color: $color_font_three;
z-index: 99;
}
}
.title{
font-size: $font_size_big;
color: #000000;
text-align: center;
font-weight: 700;
position: relative;
}
.desc{
font-size: $font_size_min;
color: $color_main;
text-align: center;
padding: 10px 0;
.miconfont{
font-size: 25px;
}
}
.scanPay_list{
border-radius: 10px;
height: 900px;
image{
width: 100%;
}
}
.btns{
background: #007aff;
border-radius: 40px;
width: 668px;
height: 82px;
text-align: center;
line-height: 80px;
width: 100%;
color: #fff;
font-size: 32px;
margin-top: 30px;
}
}

161
src/pages/order/components/scanPay/index.tsx Normal file
View File

@ -0,0 +1,161 @@
import { Image, ScrollView, Text, View } from "@tarojs/components";
import { memo, useEffect, useRef, useState } from "react";
import classnames from "classnames";
import styles from './index.module.scss'
import Popup from "@/components/popup";
import Taro from "@tarojs/taro";
import { alert } from "@/common/common";
import { formatImgUrl } from "@/common/fotmat";
import useCheckAuthorize from "@/use/useCheckAuthorize";
import { GetPayCode } from "@/api/onlinePay";
import LoadingCard from "@/components/loadingCard";
type Param = {
show?: true|false,
onClose?: () => void
}
type Item = {
product_code: string,
product_name: string,
product_color_code: string,
product_color_name: string,
num: string,
weight: string,
sale_price: string,
total_price: string
}
type CodeParam = {
title: string,
company: string,
order_type: string,
sale_user: string,
order_created_time: string,
order_no: string,
department: string,
shipment_mode: string,
target_user_name: string,
target_address: string,
target_description: string,
pay_account: string,
bank_account_name: string,
bank_name: string,
pay_type: string,
client: string,
phone: string,
order_total_length: string,
order_total_price: string,
qrcode: string,
order_total_weight: string,
list: Item[]
}
export default memo(({show = true, onClose}:Param) => {
//获取支付二维码
const [payCodeImage, setPayCodeImage] = useState<string>('')
const fileData = useRef({
filePath: '',
base64: ''
})
const {fetchData, state} = GetPayCode()
const getCore = async () => {
let res = await fetchData({
title: "面料销售电子确认单",
company: "什么什么公司123",
order_type: "散剪",
sale_user: "小崔",
order_created_time:"2022/02/01 12:32:13",
order_no:"XS-211005888",
department:"嘻嘻嘻",
shipment_mode:"自提",
target_user_name:"大崔",
target_address:"阿斯顿发斯蒂芬",
target_description:"无",
pay_account:"1234567890123450001",
bank_account_name:"佛山市浩川长盛科技有限公司",
bank_name:"招商银行佛山分行禅城支行",
pay_type:"现结",
client:"客户名称",
phone:"15818085802",
order_total_length:"12",
order_total_price:"63000",
qrcode:"https://www.zzfzyc.com/checkorder/XS-211005888",
order_total_weight:"300.00",
list: [{product_code:'5215',product_name:'26S双纱亲水滑爽棉',product_color_code:'053',product_color_name:'洋红',num:'4',weight:'123.23',sale_price:'43',total_price:'4510.7'}]
})
const base64 = res.data.base64
setPayCodeImage(() => base64)
const time = new Date().valueOf()
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [];
let filePath = Taro.env.USER_DATA_PATH + '/img' + time +'.'+ format
fileData.current.filePath = filePath
fileData.current.base64 = bodyData
const save = Taro.getFileSystemManager()
save.writeFile({
filePath: fileData.current.filePath,
data: fileData.current.base64,
encoding: 'base64',
})
}
useEffect(() => {
if(show)
getCore()
}, [show])
//检查是否开启保存图片权限
const {check} = useCheckAuthorize({scope:'scope.writePhotosAlbum', msg:'您没授权，无法保存图片'})
const saveImageCheck = async () => {
const res = await check()
res&&saveImage()
}
//保存图片
const saveImage = () => {
alert.loading('正在保存图片')
Taro.saveImageToPhotosAlbum({
filePath: fileData.current.filePath,
success: function (res) {
alert.success('图片保存成功')
},
fail: function (err) {
console.log('err::', err)
}
})
}
//预览图片
const showImage = () => {
console.log('fileData.current.filePath::', fileData.current.filePath)
Taro.previewImage({
current: fileData.current.filePath, // 当前显示
urls: [fileData.current.filePath] // 需要预览的图片http链接列表
})
}
//复制功能
return (
<View className={styles.scanPay_main}>
<Popup show={show} showTitle={false} onClose={onClose}>
<View className={styles.scanPay_con}>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
<View className={styles.title}>扫码支付</View>
<View className={styles.desc}>
<Text className={classnames(styles.miconfont, 'iconfont, icon-zhuyi')}></Text>
扫码支付成功后，自动更新状态
</View>
<View className={styles.scanPay_list}>
{(state.loading)&&<LoadingCard/>||
<ScrollView scrollY className={styles.scanPay_list}>
<Image mode="widthFix" src={payCodeImage} onClick={showImage}></Image>
</ScrollView>}
</View>
<View className={styles.btns} onClick={saveImageCheck}>保存电子确认单</View>
</View>
</Popup>
</View>
)
})

1
src/pages/order/components/submitOrderBtn/index.tsx
View File

@ -33,6 +33,7 @@ export default memo(({style, number = 0}:Param) => {
<View className={classnames(styles.order_price_num, styles.emphasis_num)} style={style}> <View className={classnames(styles.order_price_num, styles.emphasis_num)} style={style}>
{priceDom()} {priceDom()}
</View> </View>
</View> </View>
</> </>
) )

4
src/pages/order/index.config.ts
View File

@ -1,3 +1,5 @@
export default { export default {
navigationBarTitleText: '订单详情' navigationBarTitleText: '订单详情',
enablePullDownRefresh: true,
backgroundTextStyle: 'dark'
} }

5
src/pages/order/index.module.scss
View File

@ -52,6 +52,7 @@
color: $color_font_two; color: $color_font_two;
margin-right: 10px; margin-right: 10px;
flex:1; flex:1;
word-break:break-all;
} }
.order_desc_text_hint{ .order_desc_text_hint{
text-align: right; text-align: right;
@ -89,6 +90,10 @@
margin-left: 34px; margin-left: 34px;
} }
} }
.order_btn_select{
color: $color_main;
border: 2px solid $color_main;
}
.order_number_desc{ .order_number_desc{
font-size: $font_size_medium; font-size: $font_size_medium;
color: $color_font_two; color: $color_font_two;

163
src/pages/order/index.tsx
View File

@ -1,18 +1,25 @@
import { GetSaleOrderDetailApi, EditSaleOrderRemarkApi } from "@/api/order"; import {
GetSaleOrderDetailApi,
EditSaleOrderRemarkApi,
CancelOrderApi
} from "@/api/order";
import { GetOrderPayApi } from "@/api/orderPay";
import { alert, goLink } from "@/common/common"; import { alert, goLink } from "@/common/common";
import { formatDateTime, formatPriceDiv } from "@/common/fotmat"; import { formatDateTime, formatPriceDiv } from "@/common/fotmat";
import { setParam } from "@/common/system"; import OrderBtns from "@/components/orderBtns";
import Popup from "@/components/popup"; import Popup from "@/components/popup";
import SearchInput from "@/components/searchInput"; import SearchInput from "@/components/searchInput";
import { Text, Textarea, View } from "@tarojs/components" import { Text, Textarea, View } from "@tarojs/components"
import Taro, { useDidShow, useRouter } from "@tarojs/taro"; import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
import classnames from "classnames"; import classnames from "classnames";
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import AddressInfo from "./components/addressInfo"; import order from "../orderList/components/order";
import AddressInfoDetail from "./components/addressInfoDetail";
import KindList from "./components/kindList"; import KindList from "./components/kindList";
import orderState from "./components/orderState";
import OrderState from "./components/orderState"; import OrderState from "./components/orderState";
import Payment from "./components/payment";
import Remark from "./components/remark"; import Remark from "./components/remark";
import WeightMemo from "./components/weightMemo";
import styles from './index.module.scss' import styles from './index.module.scss'
export default () => { export default () => {
@ -33,7 +40,8 @@ import styles from './index.module.scss'
let res = await getOrderFetchData({id: orderId.current}) let res = await getOrderFetchData({id: orderId.current})
setOrderDetail(res.data) setOrderDetail(res.data)
setOrderRemark(res.data.remark) setOrderRemark(res.data.remark)
} }
Taro.stopPullDownRefresh()
} }
//监听获取到的数据 //监听获取到的数据
@ -45,35 +53,21 @@ import styles from './index.module.scss'
//格式化数据格式 //格式化数据格式
const [formatDetailOrder, setFormatDetailOrder] = useState<any>() //格式化后的数据 const [formatDetailOrder, setFormatDetailOrder] = useState<any>() //格式化后的数据
const formatData = () => { const formatData = () => {
if(orderDetail?.color_list&&orderDetail?.color_list.length > 0) { setFormatDetailOrder({
let dataList = {} estimate_amount: orderDetail.estimate_amount, //预估金额
let num_count = 0 //总数量 sale_mode: orderDetail.sale_mode,
orderDetail?.color_list.map(item => { sale_mode_name: orderDetail.sale_mode_name,
dataList[item.product_code] = dataList[item.product_code]||{} total_colors: orderDetail.total_colors, //总颜色数量
dataList[item.product_code].product_code = item.product_code total_number: orderDetail.total_number, //总数量
dataList[item.product_code].product_name = item.product_name total_fabrics: orderDetail.total_fabrics, //面料数量
dataList[item.product_code].sale_mode_name = orderDetail.sale_mode_name unit: orderDetail.sale_mode == 0?'条':'m', //单位
dataList[item.product_code].color_list = dataList[item.product_code]?.color_list||[] list: orderDetail.product_list,
dataList[item.product_code].color_list.push(item) status: orderDetail.status, //订单状态
//大货 total_sale_price: orderDetail.total_sale_price, //销售金额
if (orderDetail.sale_mode == 0) num_count += item.roll total_should_collect_money: orderDetail.total_should_collect_money, //应收金额
//剪板或散件 total_weight_error_discount: orderDetail.total_weight_error_discount, //空差优惠
if (orderDetail.sale_mode == 1 || orderDetail.sale_mode == 2) num_count += item.length })
})
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,
sale_mode: orderDetail.sale_mode,
sale_mode_name: orderDetail.sale_mode_name,
colo_count: orderDetail.color_list.length, //颜色数量
num_count: num_count, //总数量
unit: orderDetail.sale_mode == 0?'条':'m', //单位
list: Object.values(dataList)
})
}
} }
const formatPreViewOrderMemo = useMemo(() => { const formatPreViewOrderMemo = useMemo(() => {
return formatDetailOrder return formatDetailOrder
}, [formatDetailOrder]) }, [formatDetailOrder])
@ -112,71 +106,114 @@ import styles from './index.module.scss'
setOrderRemark(() => e) setOrderRemark(() => e)
let res = await remarkFetchData({remark:e, id: orderId.current}) let res = await remarkFetchData({remark:e, id: orderId.current})
if(res.success) { if(res.success) {
alert.success('修改成功') getSaleOrderPreView()
alert.success('提交成功')
} else { } else {
alert.error(res.msg) alert.error(res.msg)
} }
setShowDesc(() => false) setShowDesc(() => false)
}, []) }, [])
//修改地址 //去付款
const changeAddress = () => { const [payMentShow, setPayMentShow] = useState(false)
//临时传递数据 const toPay = () => {
setParam({ setPayMentShow(true)
province_name: orderDetail?.province_name,
city_name: orderDetail?.city_name,
district_name: orderDetail?.district_name,
address_detail: orderDetail?.address_detail,
id: orderId.current,
name: orderDetail?.target_user_name,
phone: orderDetail?.target_user_phone,
shipment_mode: orderDetail?.shipment_mode,
}
)
goLink('/pages/editOrder/index')
} }
//打开地址修改
const addressRef = useRef<any>(null)
//修改收货方式
const getShipmentMode = useCallback(() => {
getSaleOrderPreView()
}, [orderDetail])
//修改地址
const getAddress = useCallback(() => {
getSaleOrderPreView()
}, [orderDetail])
//获取底部按钮点击, 获取按钮状态
const orderStateClick = useCallback((val) => {
console.log('val::', val)
if(val == 1) {
//取消订单
getSaleOrderPreView()
}
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,
payModel: orderDetail?.id, //支付方式
realPayPrice: orderDetail?.id, //实付金额
pendingPayPrice: orderDetail?.id, //待付金额
}
}, [orderDetail])
return ( return (
<View className={styles.order_main}> <View className={styles.order_main}>
<View className={styles.weight_memo_con}> {/* <View className={styles.weight_memo_con}>
<WeightMemo/> <WeightMemo/>
</View> </View> */}
<OrderState /> <OrderState list={orderDetail?.logistics_details}/>
<View onClick={() => changeAddress()}> <View >
<AddressInfo defaultValue={defaultAddress} disabled={true} /> <AddressInfoDetail orderId={orderDetail?.id} onSelect={getAddress} onChangeShipmentMode={getShipmentMode} ref={addressRef} defaultValue={defaultAddress} shipment_mode={orderDetail?.shipment_mode}/>
</View> </View>
<KindList value={formatPreViewOrderMemo}/> <KindList value={formatPreViewOrderMemo}/>
<View className={styles.order_info} > <View className={styles.order_info} >
<View className={styles.order_info_title}>订单信息</View> <View className={styles.order_info_title}>订单信息</View>
<SearchInput showBorder={false} title='单号'> <SearchInput showBorder={false} title='单号' height={50}>
<View className={styles.order_num}> <View className={styles.order_num}>
<Text>{orderDetail?.order_no}</Text> <Text>{orderDetail?.order_no}</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View> <View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
</View> </View>
</SearchInput> </SearchInput>
<SearchInput showBorder={false} title='下单时间'> <SearchInput showBorder={false} title='下单时间' height={50}>
<Text>{formatDateTime(orderDetail?.create_time)}</Text> <Text>{formatDateTime(orderDetail?.create_time)}</Text>
</SearchInput> </SearchInput>
<SearchInput showBorder={false} title='付款时间'> <SearchInput showBorder={false} title='付款时间' height={50}>
<Text>{formatDateTime(orderDetail?.create_time)}</Text> <Text>{formatDateTime(orderDetail?.create_time)}</Text>
</SearchInput> </SearchInput>
</View> </View>
<View className={styles.order_desc} onClick={() => setShowDesc(true)}> <View className={styles.order_desc} onClick={() => setShowDesc(true)}>
<View className={styles.order_desc_con}>订单备注</View> <View className={styles.order_desc_con}>订单备注</View>
{ {
orderRemark&&<View className={styles.order_desc_text}>{orderRemark}</View>|| orderRemark&&<View className={styles.order_desc_text}>{orderDetail?.remark}</View>||
<View className={styles.order_desc_text_hint}>填写备注</View> <View className={styles.order_desc_text_hint}>填写备注</View>
} }
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View> <View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
</View> </View>
<View className={styles.submit_order}> <View className={styles.submit_order}>
<View className={styles.order_btn}>申请退货</View> <OrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
<View className={styles.order_btn}>查看物流</View> {/* <View className={styles.order_btn} onClick={() => toPay()}>去支付</View> */}
<View className={styles.order_btn}>确认收货</View>
<View className={styles.order_btn}>再次购买</View>
</View> </View>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} > <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
<Remark onSave={(e) => getRemark(e)}/> <Remark onSave={(e) => getRemark(e)}/>
</Popup> </Popup>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderId={orderDetail?.should_collect_order_id}/>
<View className="common_safe_area_y"></View> <View className="common_safe_area_y"></View>
</View> </View>
) )

22
src/pages/orderList/components/order/index.module.scss
View File

@ -118,26 +118,4 @@
border-radius: 10px; border-radius: 10px;
padding: 10px 22px; padding: 10px 22px;
} }
.btns_list{
display: flex;
justify-content: flex-end;
margin-top: 30px;
.btns_item{
width: 152px;
height: 72px;
border: 2px solid #dddddd;
border-radius: 38px;
text-align: center;
line-height: 72px;
font-size: $font_size;
color: $color_font_three;
&:nth-child(n+2) {
margin-left: 32px;
}
}
.end_btn{
border: 2px solid $color_main;
color: $color_main;
}
}
} }

118
src/pages/orderList/components/order/index.tsx
View File

@ -1,60 +1,90 @@
import { formatImgUrl } from "@/common/fotmat"; import { goLink } from "@/common/common";
import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
import OrderBtns from "@/components/orderBtns";
import { useSelector } from "@/reducers/hooks"; import { useSelector } from "@/reducers/hooks";
import { Image, Text, View } from "@tarojs/components" import { Image, Text, View } from "@tarojs/components"
import classnames from "classnames"; import classnames from "classnames";
import { memo } from "react"; import { memo, useCallback, useMemo, useRef } from "react";
import styles from './index.module.scss' import styles from './index.module.scss'
export default memo(() => {
type Param = {
value?: {
order_no: string,
sale_mode: number,
sale_mode_name: string,
status_name: string,
shipment_mode_name: string,
product_list: any[],
total_fabrics: number,
total_colors: number,
total_number: number,
status: 0,
id: number
},
onClickBtn?: (val:number) => void
}
export default memo(({value, onClickBtn}: Param) => {
const userInfo = useSelector(state => state.userInfo) const userInfo = useSelector(state => state.userInfo)
//对应数量
const formatCount = useCallback((item, sale_mode) => {
return sale_mode == 0? item.roll : Number(item.length / 100)
}, [value])
//对应单价
const standardPrice = useCallback((price, sale_mode) => {
return formatPriceDiv(price).toLocaleString() + '/' + (sale_mode == 1?'m':'kg')
}, [value])
//点击订单按钮
const orderBtnsClick = useCallback((status) => {
onClickBtn?.(status)
}, [value])
return ( return (
<View className={styles.order_item}> <View className={styles.order_item}>
<View className={styles.header}> <View className={styles.header} onClick={() => goLink('/pages/order/index', {id: value?.id})}>
<View className={styles.user}> <View className={styles.user}>
<Image src={`${userInfo.adminUserInfo.avatar_url}`}/> <Image src={`${userInfo?.adminUserInfo?.avatar_url}`}/>
<Text className={styles.name}>{userInfo.adminUserInfo.user_name}</Text> <Text className={styles.name}>{userInfo?.adminUserInfo?.user_name}</Text>
</View> </View>
<View className={styles.order_num}> <View className={styles.order_num}>
<Text>订单号：LY2278204399678</Text> <Text>订单号：{value?.order_no}</Text>
<Text className={classnames(styles.miconfont, 'iconfont, icon-a-moreback')}></Text> <Text className={classnames(styles.miconfont, 'iconfont, icon-a-moreback')}></Text>
</View> </View>
<View className={styles.tag}>自提</View> <View className={styles.tag}>{value?.shipment_mode_name}</View>
</View> </View>
<View className={styles.product_title}> <View className={styles.product_con} onClick={() => goLink('/pages/order/index', {id: value?.id})}>
<View className={styles.product_tag}>大货</View> <View className={styles.product_title}>
<View className={styles.product_name}>0770# 21S单面平纹(食毛)</View> <View className={styles.product_tag}>{value?.sale_mode_name}</View>
<View className={styles.product_status}>待接单</View> <View className={styles.product_name}>{formatHashTag(value?.product_list[0].code, value?.product_list[0].name)}</View>
</View> <View className={styles.product_status}>{value?.status_name}</View>
<View className={styles.product_list}> </View>
<View className={styles.image}> <View className={styles.product_list}>
<Image src={formatImgUrl('')}/> <View className={styles.image}>
<View className={styles.color_num}>24色</View> <Image src={formatImgUrl(value?.product_list[0].product_colors[0].texture_url)}/>
</View> <View className={styles.color_num}>{value?.product_list[0].product_colors[0].code}</View>
<View className={styles.color_list}> </View>
<View className={styles.color_item}> <View className={styles.color_list}>
<View className={styles.color_title}>1# 薄荷绿</View> {value?.product_list[0].product_colors.map((itemColor, index) => {
<View className={styles.color_price}>¥40/kg</View> return (
<View className={styles.color_num}>×2条</View> (index <= 1)&&<View className={styles.color_item}>
</View> <View className={styles.color_title}>{formatHashTag(itemColor.code, itemColor.name)}</View>
<View className={styles.color_item}> <View className={styles.color_price}>{standardPrice(itemColor.sale_price, value.sale_mode)}</View>
<View className={styles.color_title}>1# 薄荷绿</View> <View className={styles.color_num}>×{formatCount(itemColor, value.sale_mode)}条</View>
<View className={styles.color_price}>¥40/kg</View> </View>
<View className={styles.color_num}>×2条</View> )
</View> })
<View className={styles.color_item}> }
<View className={styles.color_more}>……</View> <View className={styles.color_item}>
<View className={styles.color_more}>……</View> <View className={styles.color_more}>……</View>
<View className={styles.color_more}>……</View> <View className={styles.color_more}>……</View>
</View> <View className={styles.color_more}>……</View>
</View>
</View> </View>
</View> </View>
<View className={styles.color_count_num}>2种面料，3种颜色，共6条</View> <View className={styles.color_count_num}>{`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`}</View>
<View className={styles.btns_list}>
<View className={styles.btns_item}>取消订单</View>
<View className={styles.btns_item}>修改地址</View>
<View className={styles.btns_item}>修改地址</View>
<View className={classnames(styles.btns_item, styles.end_btn)}>去付款</View>
</View> </View>
<OrderBtns status={value?.status} onClick={orderBtnsClick} orderId={value?.id as number}/>
</View> </View>
) )
}) })

18
src/pages/orderList/components/orderStatusList/index.module.scss Normal file
View File

@ -0,0 +1,18 @@
.order_status_list{
font-size: $font_size;
color: #9E9E9E;
margin-top: 20px;
.order_status_item{
padding: 20px;
box-sizing: border-box;
}
.selected{
font-weight: 700;
color: #000;
border-bottom: 4px solid #707070;
}
.order_list_scroll{
white-space: nowrap;
display: flex;
}
}

46
src/pages/orderList/components/orderStatusList/index.tsx Normal file
View File

@ -0,0 +1,46 @@
import { ScrollView, View } from "@tarojs/components"
import { memo, useEffect, useState } from "react"
import styles from './index.module.scss'
import classnames from "classnames";
type Param = {
list: {id: number, name: string}[],
defaultId?: number|null,
onSelect?: (val: number) => void
}
export default memo(({list = [], defaultId = null, onSelect}: Param) => {
const [selectInfo, setSelectInfo] = useState({
selected: -1, //当前选中的id
tabId: '', //需要滚动到的id
})
useEffect(() => {
if(defaultId) {
const index = list?.findIndex(item => {
console.log(item.id, defaultId)
return item.id == defaultId
})
if(index !== -1) {
const num = index > 0?( index - 1) : 0
setSelectInfo((e) => ({...e, tabId:list[num].id.toString()}))
}
}
}, [defaultId])
const clickEvent = ({item, index}: {item:any, index:number}) => {
const num = index > 0?( index - 1) : 0
setSelectInfo((e) => ({...e, tabId:list[num].id.toString(), selected: item.id}))
onSelect?.(item.id)
}
return (
<View className={styles.order_status_list}>
<ScrollView scrollX scrollIntoView={`tabs_${selectInfo.tabId}`} scrollWithAnimation={true}>
<View className={styles.order_list_scroll}>
{list.map((item, index) => {
return <View key={item.id} id={`tabs_${item.id}`} onClick={() => clickEvent({item, index})} className={classnames(styles.order_status_item, (selectInfo.selected==item.id)&&styles.selected)}>{item.name}</View>
})}
</View>
</ScrollView>
</View>
)
})

12
src/pages/orderList/index.module.scss
View File

@ -9,28 +9,30 @@
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.16); box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.16);
border-bottom: 2px solid #e2e2e2; border-bottom: 2px solid #e2e2e2;
.order_status_list{ .order_status_list{
display: flex;
justify-content: space-between;
font-size: $font_size; font-size: $font_size;
color: #9E9E9E; color: #9E9E9E;
margin-top: 20px; margin-top: 20px;
.order_status_item{ .order_status_item{
padding: 20px 10px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
} }
.selected{ .selected{
font-weight: 700; font-weight: 700;
color: #000; color: #000;
border-bottom: 4px solid #707070; border-bottom: 4px solid #707070;
// border-radius: 4px; }
.order_list_scroll{
white-space: nowrap;
display: flex;
} }
} }
} }
.order_list{ .order_list{
flex:1; flex:1;
height: 0; height: 0;
.order_item{ .order_item_con{
margin-top: 20px; margin-top: 20px;
padding: 0 20px;
} }
} }
} }

103
src/pages/orderList/index.tsx
View File

@ -1,15 +1,15 @@
import Search from "@/components/search" import Search from "@/components/search"
import useLogin from "@/use/useLogin" import useLogin from "@/use/useLogin"
import { Image, Text, View } from "@tarojs/components" import { Image, ScrollView, Text, View } from "@tarojs/components"
import { useDidShow, useRouter } from "@tarojs/taro" import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro"
import { useCallback, useState } from "react" import { useCallback, useEffect, useMemo, useRef, useState } from "react"
import {ORDER_STATUS} from '@/common/enum'
import styles from './index.module.scss' import styles from './index.module.scss'
import classnames from "classnames"; import classnames from "classnames";
import { useSelector } from "@/reducers/hooks"
import { formatImgUrl } from "@/common/fotmat"
import Order from "./components/order" import Order from "./components/order"
import InfiniteScroll from "@/components/infiniteScroll" import InfiniteScroll from "@/components/infiniteScroll"
import {GetOrderStatusListApi, GetOrderListApi} from '@/api/order'
import { dataLoadingStatus, getFilterData } from "@/common/util"
import OrderStatusList from "./components/orderStatusList"
export default () => { export default () => {
const {checkLogin} = useLogin() const {checkLogin} = useLogin()
@ -17,46 +17,93 @@ export default () => {
await checkLogin() await checkLogin()
}) })
const router = useRouter()
//搜索参数 //搜索参数
const [searchField, setSearchField] = useState({ const [searchField, setSearchField] = useState({
shipment_mode:'', status: -1,
page : 1, page : 1,
size : 10, size : 10,
key:'' Name:''
}) })
//订单状态 //获取订单状态
type orderStatusParam = {value:number, label:string}[] const {fetchData: statusFetchData} = GetOrderStatusListApi()
const order_status: orderStatusParam = [{value:-1, label:'全部'}, ...Object.values(ORDER_STATUS)] const [statusList, setStatusList] = useState<any[]>([{id: -1, name: '全部'}])
const [selectStatus, setSelectStatus] = useState(-1) const getOrderStatusList = async () => {
const changeStatus = useCallback((e) => { let res = await statusFetchData()
setSelectStatus(() => e) let list = [...statusList, ...res.data.list||[]]
setStatusList(() => list)
}
useEffect(() => {
getOrderStatusList()
}, []) }, [])
//获取订单列表
const {fetchData: listFetchData, state:orderState} = GetOrderListApi()
const [orderData, setOrderData] = useState<{list:any[], total:number}>({list:[], total:0})
const getOrderList = async () => {
let res = await listFetchData(getFilterData(searchField))
setOrderData({list: res.data.list, total: res.data.total})
setRefresherTriggeredStatus(() => false)
}
//监听筛选条件变化
useEffect(() => {
getOrderList()
}, [searchField])
//上拉加载数据
const pageNum = useRef({size: searchField.size, page: searchField.page})
const getScrolltolower = useCallback(() => {
if(orderData.list.length < orderData.total) {
pageNum.current.page++
const size = pageNum.current.size * pageNum.current.page
setSearchField({...searchField, size })
}
}, [orderData])
//状态改变
const changeStatus = useCallback((e) => {
pageNum.current.page = 1
setSearchField((value) => ({...value, status:e, size:10}))
setOrderData(() => ({list:[], total:0}))
}, [])
//数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({list:orderData.list, total: orderData.total, status: orderState.loading})
}, [orderData, orderState])
//输入了搜索关键字 //输入了搜索关键字
const getSearchData = useCallback((e) => { const getSearchData = useCallback((e) => {
// setMaterialList(() => ({list:[], total:0})) pageNum.current.page = 1
setSearchField((val) => ({...val, code_or_name:e, size:10})) setOrderData(() => ({list:[], total:0}))
setSearchField((val) => ({...val, name:e, size:10}))
}, []) }, [])
const clickOrderBtn = useCallback((state) => {
getOrderList()
}, [orderData])
//列表下拉刷新
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
const getRefresherRefresh = async () => {
pageNum.current.size = 1
setRefresherTriggeredStatus(true)
setSearchField((val) => ({...val, size:10}))
}
return ( return (
<View className={styles.order_list_main}> <View className={styles.order_list_main}>
<View className={styles.title}> <View className={styles.title}>
<Search placeIcon="out" placeholder="搜索商品/名称/颜色/订单号" showBtn={true} defaultValue={router.params.key} changeOnSearch={getSearchData} debounceTime={300}/> <Search placeIcon="out" placeholder="搜索商品/名称/颜色/订单号" showBtn={true} changeOnSearch={getSearchData} debounceTime={300}/>
<View className={styles.order_status_list}> <OrderStatusList list={statusList} onSelect={changeStatus} defaultId={1}/>
{order_status.map(item => {
return <View key={item.value} onClick={() => changeStatus(item.value)} className={classnames(styles.order_status_item, (selectStatus==item.value)&&styles.selected)}>{item.label}</View>
})}
</View>
</View> </View>
<View className={styles.order_list}> <View className={styles.order_list}>
<InfiniteScroll> <InfiniteScroll statusMore={statusMore} selfonScrollToLower={getScrolltolower} refresherEnabled={true} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={getRefresherRefresh}>
{new Array(10).fill('').map(item => { {orderData?.list.map(item => {
return <View className={styles.order_item}> <Order/></View> return <View key={item.id} className={styles.order_item_con}> <Order value={item} onClickBtn={clickOrderBtn}/></View>
})} })}
</InfiniteScroll> </InfiniteScroll>
</View> </View>

22
src/styles/iconfont.scss
View File

@ -1,6 +1,6 @@
@font-face { @font-face {
font-family: "iconfont"; /* Project id 2987621 */ font-family: "iconfont"; /* Project id 2987621 */
src: url('iconfont.ttf?t=1652868058352') format('truetype'); src: url('iconfont.ttf?t=1653384789393') format('truetype');
} }
.iconfont { .iconfont {
@ -11,6 +11,26 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icon-yucunkuan:before {
content: "\e66c";
}
.icon-xianxiahuikuan:before {
content: "\e669";
}
.icon-xtianzhangqi:before {
content: "\e66a";
}
.icon-saomazhifu:before {
content: "\e66b";
}
.icon-fahuo:before {
content: "\e66d";
}
.icon-zhuyi:before { .icon-zhuyi:before {
content: "\e668"; content: "\e668";
} }

BIN
src/styles/iconfont.ttf
View File

Binary file not shown.

51
src/use/useCheckAuthorize.tsx Normal file
View File

@ -0,0 +1,51 @@
import { alert } from "@/common/common";
import Taro from "@tarojs/taro";
import { memo, useCallback, useState } from "react";
type Scope = 'scope.userLocation'|'scope.userLocation'|'scope.record'|'scope.camera'|'scope.bluetooth'|'scope.writePhotosAlbum'|'scope.addPhoneContact'|'scope.addPhoneCalendar'|'scope.werun'|'scope.address'|'scope.invoiceTitle'|'scope.invoice'|'scope.userInfo'
type Param = {
scope: Scope,
msg: string //检查不通过时警告
}
export default ({scope, msg}: Param) => {
//这个hook微信授权检查授权
const check = useCallback(() => {
return new Promise((reslove, reject) => {
Taro.getSetting({
success: (res) => {
if(res.authSetting[scope]) {
reslove(true)
} else if (res.authSetting[scope] === undefined) {
Taro.authorize({
scope: scope,
success() {
reslove(true)
},
fail() {
alert.none(msg)
reject(false)
}
})
} else {
Taro.openSetting({
success(res) {
if(res.authSetting[scope]) {
reslove(true)
} else {
alert.none(msg)
reject(false)
}
}
})
}
}
})
})
}, [scope])
return {
check,
}
}

25
src/use/useHttp.ts
View File

@ -1,10 +1,12 @@
import Taro, { useRouter } from '@tarojs/taro' import Taro, { useRouter } from '@tarojs/taro'
import { useRef, useState } from 'react' import { useEffect, useRef, useState } from 'react'
import {BASE_URL, WX_APPID} from '@/common/constant' import {BASE_URL, WX_APPID} from '@/common/constant'
import useUserInfo from "./useUserInfo" import useUserInfo from "./useUserInfo"
import qs from 'qs'; import qs from 'qs';
import useLogin from './useLogin';
import useLoginRequest from './useLoginRequest';
type Params = { type Params = {
@ -32,7 +34,8 @@ type option = {
data?: any, data?: any,
page?: number, page?: number,
pageSize?: number, pageSize?: number,
pagination?: true|false pagination?: true|false,
base_url?: string
} }
/** /**
@ -99,9 +102,9 @@ export const useRequest = (options:option = {
page: 1, page: 1,
pageSize: 24, pageSize: 24,
pagination: false, // 是否分页 pagination: false, // 是否分页
base_url: ''
}) => { }) => {
options.url = `${options.base_url||BASE_URL}${options.url}`
options.url = `${BASE_URL}${options.url}`
let params:Params = { let params:Params = {
code: null, // 业务码 code: null, // 业务码
success: false, // 请求是否成功 success: false, // 请求是否成功
@ -121,11 +124,16 @@ export const useRequest = (options:option = {
const stateRef = useRef({...params}) const stateRef = useRef({...params})
const [state, setState] = useState({...stateRef.current}) const [state, setState] = useState({...stateRef.current})
const {removeToken, removeSessionKey} = useUserInfo() const {removeToken, removeSessionKey} = useUserInfo()
const router = useRouter() const {login} = useLoginRequest()
useEffect(() => {
console.log('变化::', state.loading)
}, [state.loading])
// 请求函数 // 请求函数
const fetchData = async (sub_options?:any) => { const fetchData = async (sub_options?:any) => {
stateRef.current.loading = true stateRef.current.loading = true
setState((e) => ({...e, loading:true})) setState((e) => ({...e, loading:true}))
console.log('tf:::', stateRef.current.loading)
stateRef.current.query = { stateRef.current.query = {
...sub_options, ...sub_options,
...options.pagination && { ...options.pagination && {
@ -153,6 +161,7 @@ export const useRequest = (options:option = {
} }
} }
const result = await Taro.request(q as any) const result = await Taro.request(q as any)
const { statusCode } = result const { statusCode } = result
const { const {
code, code,
@ -170,9 +179,7 @@ export const useRequest = (options:option = {
if (statusCode === 401) { if (statusCode === 401) {
removeToken() removeToken()
removeSessionKey() removeSessionKey()
// Taro.reLaunch({ login()
// url: router.path +'?' + qs.stringify(router.params)
// })
} else { } else {
Taro.showToast({ Taro.showToast({
title: `错误：${showStatus(statusCode)}`, title: `错误：${showStatus(statusCode)}`,
@ -189,7 +196,7 @@ export const useRequest = (options:option = {
} }
stateRef.current.error = false stateRef.current.error = false
stateRef.current.loading = false stateRef.current.loading = false
setState(() => stateRef.current) setState(() => ({...stateRef.current}))
return stateRef.current return stateRef.current
} }

69
src/use/useLogin.ts
View File

@ -1,69 +1,31 @@
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import { WX_APPID } from "@/common/constant" import {BASE_URL, WX_APPID } from "@/common/constant"
import useUserInfo from "./useUserInfo" import useUserInfo from "./useUserInfo"
import Taro, { useRouter } from "@tarojs/taro" import Taro, { useRouter } from "@tarojs/taro"
import { LoginApi } from "@/api/login" import { LoginApi } from "@/api/login"
import { GetWxUserInfoApi, GetAdminUserInfoApi, GetPhoneNumberApi } from "@/api/user" import { GetWxUserInfoApi, GetAdminUserInfoApi, GetPhoneNumberApi } from "@/api/user"
import qs from 'qs'; import qs from 'qs';
import useLoginRequest from "./useLoginRequest"
export default () => { export default () => {
const {setToken, setSessionKey, setUserInfo, setAdminUserInfo, userInfo} = useUserInfo() const {setUserInfo, setAdminUserInfo, userInfo} = useUserInfo()
useEffect(() => { useEffect(() => {
console.log('userInfo::',userInfo.token) console.log('userInfo::',userInfo.token)
}, [userInfo]) }, [userInfo])
const router = useRouter() //登录请求 (调用这个就不能再useHttp中使用，当前这个hook, 否则会死循环内存溢出)
//登录请求 // const {fetchData} = LoginApi()
const {fetchData} = LoginApi()
//微信登录
const wxLogin = () => {
return new Promise((reslove, reject) => {
Taro.login({
success: async (res) => {
if (res.code) {
const {data, success, msg} = await fetchData({js_code: res.code})
if(success) {
console.log('token::',data.token)
setToken(data.token)
setSessionKey(data.session_key)
reslove(data)
let params = router.params
delete params.$taroTimestamp
console.log('params::',params)
if(router.path === '/pages/index/index' || router.path === '/pages/user/index') {
Taro.reLaunch({
url: router.path +'?' + qs.stringify(params)
})
} else {
Taro.redirectTo({
url: router.path +'?' + qs.stringify(params)
})
}
getAdminUserInfo()
//todo 删除本地授权用户信息，获取最新授权信息 //登录请求
const {login} = useLoginRequest()
} else { const wxLogin = async () => {
Taro.showToast({ try {
title:'登录失败', await login()
icon:"none" getAdminUserInfo()
}) } catch(e) {
reject(msg) console.log('登录失败::',e)
} }
} else {
console.log('登录失败！' + res.errMsg)
reject(res.errMsg)
}
},
fail: function(e) {
console.log('登录失败！::',e)
reject(e)
}
})
})
} }
//获取用户信息 //获取用户信息
@ -83,6 +45,7 @@ export default () => {
Taro.checkSession({ Taro.checkSession({
success: async () => { success: async () => {
reslove(true) reslove(true)
if(!userInfo.adminUserInfo) getAdminUserInfo()
}, },
fail: async () => { fail: async () => {
await wxLogin() await wxLogin()
@ -91,8 +54,6 @@ export default () => {
}) })
} }
}) })
} }
//获取用户头像等信息数据 //获取用户头像等信息数据

106
src/use/useLoginRequest.ts Normal file
View File

@ -0,0 +1,106 @@
import {BASE_URL, WX_APPID } from "@/common/constant"
import Taro, { useRouter } from "@tarojs/taro"
import { useRef, useState } from "react"
import qs from 'qs'
import useUserInfo from "./useUserInfo"
//开这个hook 主要是为了让useHttp 能够调用
type Param = {success: true|false, data: any, msg: string, code: null|number, loading: false|true}
export default () => {
let initData = {
success: false,
data: null,
msg: '',
code: null,
loading: false
}
let loginData = useRef<Param>(initData)
const {setToken, setSessionKey} = useUserInfo()
const router = useRouter()
//微信登录请求v2
const fetchData = async (login_code) => {
const q = {
url: BASE_URL + '/v1/mall/login',
header: {
"Platform": 6,
"Appid": WX_APPID,
},
method: 'post',
data:{js_code: login_code}
}
try{
const result = await Taro.request(q as any)
const {code, data, msg} = result.data
if(result.statusCode === 200) {
loginData.current.success = (code === 0 ? true : false)
loginData.current.code = code
loginData.current.msg = msg
loginData.current.data = data
} else {
Taro.showToast({
title: `错误：登录失败`,
icon: 'none'
})
console.log('登录错误：', result.errMsg)
}
}catch(e) {
Taro.showToast({
title: `错误：登录失败`,
icon: 'none'
})
console.log('登录错误：', e.errMsg)
}
return loginData.current
}
//微信登录
const login = () => {
return new Promise((reslove, reject) => {
Taro.login({
success: async (res) => {
if (res.code) {
const {data, success, msg} = await fetchData(res.code)
if(success) {
setToken(data.token)
setSessionKey(data.session_key)
reslove(data)
let params = router.params
delete params.$taroTimestamp
if(router.path === '/pages/index/index' || router.path === '/pages/user/index') {
Taro.reLaunch({
url: router.path +'?' + qs.stringify(params)
})
} else {
Taro.redirectTo({
url: router.path +'?' + qs.stringify(params)
})
}
} else {
Taro.showToast({
title:'登录失败',
icon:"none"
})
reject(msg)
}
} else {
console.log('登录失败！' + res.errMsg)
reject(res.errMsg)
}
},
fail: function(e) {
console.log('登录失败！::',e)
reject(e)
}
})
})
}
return {
login
}
}

24
src/use/useManualPullDownRefresh.ts
View File

@ -1,24 +0,0 @@
import Taro, { usePullDownRefresh } from "@tarojs/taro"
import { useCallback, useState } from "react"
type Arg = {[index:string]:any}
export default (fn?:(val:Arg) => any, arg?:Arg) => {
const [data, setData] = useState({})
usePullDownRefresh(() => {
getData()
})
const getData = useCallback(() => {
setTimeout(() => {
const res = fn?.({...arg})
setData((e) => ({...e, res}))
Taro.stopPullDownRefresh()
}, 1000)
}, [])
return {
getData,
data
}
}