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 = () => {
return useRequest({
url: `/v1/mall/saleOrder`,
url: `/v1/mall/saleOrder/detail`,
method: "get",
})
}
@ -59,4 +59,34 @@ export const SaleOrderApi = () => {
url: `/v1/mall/saleOrder/shipmentMode`,
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 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) {
let params_str = Qs.stringify(params)
console.log('params_str::',params_str)
path = params_str?path+'?'+params_str:path
if(!type) {
Taro.navigateTo({
url: path
})
} else {
Taro.switchTab({
url: path
})
}
console.log('path::', way)
Taro[way]({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 = `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.15:50001/lymarket` // 杰
// CDN
// 生成密钥

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

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

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

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

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

@ -93,7 +93,7 @@ export default memo(({
<View className={style.infinite_scroll}>
{
(statusMore == 2)&&<View className={style.loading_more}>加载中<DotLoading/></View>||
<View>没有更多数据了</View>
<View className={style.noMore}>没有更多数据了</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,
clickOnInput?: () => void,
children?: ReactNode
height?: number,
titleStyle?: Object
}
@ -24,7 +26,9 @@ export default memo((props: Params) => {
placeholder = '请输入',
showBorder = true,
changeOnInput,
clickOnInput
clickOnInput,
height = 80,
titleStyle = {}
} = props
let stylen = useMemo(() => {
@ -34,8 +38,8 @@ export default memo((props: Params) => {
return {}
}, [showBorder])
return (
<View className={styles.searchInput_main} style={stylen}>
{showTitle&&<View className={styles.searchInput_title}>{title}</View>}
<View className={styles.searchInput_main} style={{height: height + 'rpx', ...stylen}}>
{showTitle&&<View className={styles.searchInput_title} style={titleStyle}>{title}</View>}
<View className={styles.searchInput_con}>
{!props.children&&<Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/>
||<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 styles from './index.module.scss'
import { useEffect, useMemo, useState } from 'react';
import {formatHashTag} from '@/common/fotmat'
import {formatHashTag, formatImgUrl} from '@/common/fotmat'
import useManualPullDownRefresh from '@/use/useManualPullDownRefresh';
import { goLink } from '@/common/common';
import useUserInfo from '@/use/useUserInfo';
@ -147,7 +147,7 @@ export default (props:params) => {
{productInfo?.product_color_list?.map(item => {
return <View className={styles.item} onClick={() => getColorItem(item)}>
<View className={styles.item_color}>
<Image src={item.texture_url}></Image>
<Image src={formatImgUrl(item.texture_url)}></Image>
</View>
<View className={styles.item_name}>{item.code}</View>
</View>

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

@ -31,7 +31,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
const param = getParam()
const idsAndSaleModel = useRef<orderPreParam>({shopping_cart_product_color_list:[], sale_mode:0})
useDidShow(async () => {
await checkLogin()
// await checkLogin()
idsAndSaleModel.current.sale_mode = Number(param?.sale_mode)
param?.ids?.split('-')?.map(item => {
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<preViewOrderParam>() //获取到的原始数据
const [preViewOrder, setPreViewOrder] = useState<any>() //获取到的原始数据
const {fetchData} = SaleOrderPreViewApi()
const getSaleOrderPreView = async () => {
if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) {
@ -57,6 +56,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
useEffect(() => {
if(preViewOrder) {
formatData()
getDataList()
//当有默认地址时设置默认地址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 formatData = () => {
if(preViewOrder?.product_color_list&&preViewOrder?.product_color_list.length > 0) {
let dataList = {}
let num_count = 0 //总数量
let orderList:{shopping_cart_product_color_id:number}[] = [] //提交订单时的格式
preViewOrder?.product_color_list.map(item => {
dataList[item.product_code] = dataList[item.product_code]||{}
dataList[item.product_code].product_code = item.product_code
dataList[item.product_code].product_name = item.product_name
dataList[item.product_code].sale_mode_name = preViewOrder.sale_mode_name
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})
}
setFormatPreViewOrder({
estimate_amount: preViewOrder.estimate_amount, //预估金额
sale_mode: preViewOrder.sale_mode,
sale_mode_name: preViewOrder.sale_mode_name,
total_colors: preViewOrder.total_colors, //总颜色数量
total_number: preViewOrder.total_number, //总数量
total_fabrics: preViewOrder.total_fabrics, //面料数量
unit: preViewOrder.sale_mode == 0?'条':'m', //单位
list: preViewOrder.product_list
})
}
const formatPreViewOrderMemo = useMemo(() => {
console.log('formatPreViewOrder::',formatPreViewOrder)
return formatPreViewOrder
}, [formatPreViewOrder])
@ -118,6 +97,17 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
return null
}, [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) => {
setSubmitOrderData((val) => ({...val, address_id:e.id}))
@ -159,7 +149,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
if (res.confirm) {
const res = await saleOrderFetchData(submitOrderData)
if(res.success) {
goLink('/pages/order/index',{id: res.data.id})
goLink('/pages/order/index',{id: res.data.id}, 'redirectTo')
} else {
alert.none(res.msg)
}
@ -185,7 +175,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn";
<View className={styles.submit_order}>
<View className={styles.submit_order_number}>
<SubmitOrderBtn style={{color:'#007AFF'}} number={formatPriceDiv(formatPreViewOrder?.estimate_amount)}/>
<View className={styles.order_number_desc}>{`${formatPreViewOrder?.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 className={classnames(styles.order_btn, btnStatus&&styles.ok_order_btn)} onClick={() => submitOrderEven()}>提交订单</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 classnames from "classnames";
import styles from './index.module.scss'
import AmountShow from "../amountShow";
type Param = {
style?: Object,
number?: number,
title?: string,
status?: true|false, //true 加大加深
titleStatus?: true|false, //true 标题加大加深
numberStatus?: 0|1|2, //数字尺寸
}
export default memo(({style, number = 0, status = true, title = ''}: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])
export default memo(({style, number = 0, titleStatus = true, title = '', numberStatus = 1}:Param) => {
return (
<>
<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>
<View className={styles.iconfont_msg}>
<Text className={classnames(styles.miconfont, 'iconfont icon-zhushi')}></Text>
{/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */}
</View>
</View>
<View className={classnames(styles.order_price_num, status&&styles.emphasis_num)} style={style}>
{priceDom()}
</View>
<AmountShow status={numberStatus} number={number}/>
</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'
type OrderParam = {
estimate_amount: number,
estimate_weight: number,
estimate_amount: number, //预估金额
list: any[],
sale_mode: number,
sale_mode_name: string
sale_mode_name: string,
unit: string,
colo_count: number,
num_count: number
total_colors: number,
total_fabrics: number,
total_number: number,
status: number, //订单状态
total_sale_price: number, //销售金额
total_should_collect_money: number, //应收金额
total_weight_error_discount: number, //空差优惠
}
export default memo(({value}:{value:OrderParam|null}) => {
export default memo(({value}:{value?:OrderParam}) => {
//对应数量
const formatCount = useCallback((item) => {
return value?.sale_mode == 0? item.roll : Number(item.length / 100)
}, [value])
//对应单价
const standardPrice = useCallback(item => {
return formatPriceDiv(item.standard_price).toLocaleString() + '/' + (value?.sale_mode == 1?'m':'kg')
const standardPrice = useCallback(price => {
return formatPriceDiv(price).toLocaleString() + '/' + (value?.sale_mode == 1?'m':'kg')
}, [value])
//数量格式
const numText = useMemo(() => {
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])
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 (
<>
<View className={styles.orders_list_title}>{numText}</View>
<View className={styles.orders_list_con}>
{
value?.list.map(item => {
value?.list?.map(item => {
return <View key={item.product_code} className={styles.order_list}>
<View className={styles.order_list_title}>
<View className={styles.tag}>{item.sale_mode_name}</View>
<View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
<View className={styles.num}>共{item.color_list.length}种</View>
<View className={styles.tag}>{value.sale_mode_name}</View>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.num}>共{item?.product_colors.length}种</View>
</View>
<View className={styles.order_list_scroll}>
{item.color_list?.map(colorItem => {
return <View className={styles.order_list_item}>
{item?.product_colors?.map(colorItem => {
return <View key={colorItem.id} className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_con}>
<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_price}>¥{standardPrice(colorItem)}</View>
<View className={styles.order_list_item_title}>{colorItem.code + ' ' + colorItem.name}</View>
<View className={styles.order_list_item_price}>¥{standardPrice(colorItem.sale_price)}</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×{formatCount(colorItem)}<text>{value.unit}</text></View>
@ -64,7 +80,7 @@ export default memo(({value}:{value:OrderParam|null}) => {
})
}
<View className={styles.order_estimated_amount}>
<EstimatedAmount number={formatPriceDiv(value?.estimate_amount)} title="预估金额" />
{priceConDom}
</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{
position: relative;
padding-left: 50px;
min-height: 120px;
&:nth-last-child(n+2) {
padding-bottom: 30px;
}
.order_status_tail_end, .order_status_tail{
width: 15px;
height: 15px;
@ -35,7 +37,7 @@
border-left: 2px solid $color_main;
height: 100%;
top: 10px;
left: 8px;
left: 9px;
position: absolute;
z-index: 1;
}
@ -44,7 +46,7 @@
align-items: center;
.order_status_title{
color: $color_font_two;
font-size: $font_size_big;
font-size: $font_size;
font-weight: 700;
}
.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 { memo, useState } from "react"
import { memo, useMemo, useState } from "react"
import styles from './index.module.scss'
import classnames from "classnames";
import { formatImgUrl } from "@/common/fotmat";
import { formatDateTime, formatImgUrl } from "@/common/fotmat";
type Param = {
title: string,
status: string,
time: string,
tag: string,
desc: string
@ -14,33 +14,33 @@ export default memo(({list = []}:{list?:Param[]}) => {
const changeMore = () => {
setShowMore(() => !showMore)
}
list = [
{title:'待配布', time:'2022-04-24 09:08', tag:'已接单', desc:'仓库正在为你配布...'},
{title:'待配布', time:'2022-04-24 09:08', tag:'已接单', desc:'仓库正在为你配布...'},
{title:'待接单', time:'2022-04-24 09:08', tag:'已提交', desc:''},
]
const dataList = useMemo(() => {
return list.reverse()
}, [list])
return (
<View className={styles.order_flow_state}>
<View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}>
{list.map((item, index) => <View className={styles.order_status_item}>
{(list.length > 1)&&<View className={classnames(styles.order_status_tail, (index == 0)&&styles.order_status_tail_end)}></View>}
{(list.length != (index + 1))&&<View className={styles.order_status_line}></View>}
<View className={styles.order_status_content}>
<View className={classnames(styles.order_status_title, (index == 0)&&styles.order_status_select)}>{item.title}</View>
<View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{item.time}</View>
<View className={classnames(styles.order_status_tag, (index == 0)&&styles.order_status_tag_select)}>{item.tag}</View>
</View>
<Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text>
</View>)}
</View>
{(list.length > 2) && <View className={styles.more} onClick={() => changeMore()}>
<Text>{showMore&&'收起物流详情'||'点击查看更多物流详情'}</Text>
<Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
<>
{(dataList.length > 0)&&<View className={styles.order_flow_state}>
<View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}>
{dataList.map((item, index) => <View className={styles.order_status_item}>
{(dataList.length > 1)&&<View className={classnames(styles.order_status_tail, (index == 0)&&styles.order_status_tail_end)}></View>}
{(dataList.length != (index + 1))&&<View className={styles.order_status_line}></View>}
<View className={styles.order_status_content}>
<View className={classnames(styles.order_status_title, (index == 0)&&styles.order_status_select)}>{item.status}</View>
<View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{formatDateTime(item.time)}</View>
{/* <View className={classnames(styles.order_status_tag, (index == 0)&&styles.order_status_tag_select)}>{item.tag}</View> */}
</View>
<Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text>
</View>)}
</View>
{(dataList.length > 2) && <View className={styles.more} onClick={() => changeMore()}>
<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 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 (
<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}>
<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>

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}>
{priceDom()}
</View>
</View>
</>
)

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

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

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

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

@ -118,26 +118,4 @@
border-radius: 10px;
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 { Image, Text, View } from "@tarojs/components"
import classnames from "classnames";
import { memo } from "react";
import { memo, useCallback, useMemo, useRef } from "react";
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 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 (
<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}>
<Image src={`${userInfo.adminUserInfo.avatar_url}`}/>
<Text className={styles.name}>{userInfo.adminUserInfo.user_name}</Text>
<Image src={`${userInfo?.adminUserInfo?.avatar_url}`}/>
<Text className={styles.name}>{userInfo?.adminUserInfo?.user_name}</Text>
</View>
<View className={styles.order_num}>
<Text>订单号：LY2278204399678</Text>
<Text>订单号：{value?.order_no}</Text>
<Text className={classnames(styles.miconfont, 'iconfont, icon-a-moreback')}></Text>
</View>
<View className={styles.tag}>自提</View>
<View className={styles.tag}>{value?.shipment_mode_name}</View>
</View>
<View className={styles.product_title}>
<View className={styles.product_tag}>大货</View>
<View className={styles.product_name}>0770# 21S单面平纹(食毛)</View>
<View className={styles.product_status}>待接单</View>
</View>
<View className={styles.product_list}>
<View className={styles.image}>
<Image src={formatImgUrl('')}/>
<View className={styles.color_num}>24色</View>
</View>
<View className={styles.color_list}>
<View className={styles.color_item}>
<View className={styles.color_title}>1# 薄荷绿</View>
<View className={styles.color_price}>¥40/kg</View>
<View className={styles.color_num}>×2条</View>
</View>
<View className={styles.color_item}>
<View className={styles.color_title}>1# 薄荷绿</View>
<View className={styles.color_price}>¥40/kg</View>
<View className={styles.color_num}>×2条</View>
</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>
</View>
</View>
<View className={styles.color_count_num}>2种面料，3种颜色，共6条</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 className={styles.product_con} onClick={() => goLink('/pages/order/index', {id: value?.id})}>
<View className={styles.product_title}>
<View className={styles.product_tag}>{value?.sale_mode_name}</View>
<View className={styles.product_name}>{formatHashTag(value?.product_list[0].code, value?.product_list[0].name)}</View>
<View className={styles.product_status}>{value?.status_name}</View>
</View>
<View className={styles.product_list}>
<View className={styles.image}>
<Image src={formatImgUrl(value?.product_list[0].product_colors[0].texture_url)}/>
<View className={styles.color_num}>{value?.product_list[0].product_colors[0].code}</View>
</View>
<View className={styles.color_list}>
{value?.product_list[0].product_colors.map((itemColor, index) => {
return (
(index <= 1)&&<View className={styles.color_item}>
<View className={styles.color_title}>{formatHashTag(itemColor.code, itemColor.name)}</View>
<View className={styles.color_price}>{standardPrice(itemColor.sale_price, value.sale_mode)}</View>
<View className={styles.color_num}>×{formatCount(itemColor, value.sale_mode)}条</View>
</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>
</View>
</View>
<View className={styles.color_count_num}>{`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`}</View>
</View>
<OrderBtns status={value?.status} onClick={orderBtnsClick} orderId={value?.id as number}/>
</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);
border-bottom: 2px solid #e2e2e2;
.order_status_list{
display: flex;
justify-content: space-between;
font-size: $font_size;
color: #9E9E9E;
margin-top: 20px;
.order_status_item{
padding: 20px 10px;
padding: 20px;
box-sizing: border-box;
}
.selected{
font-weight: 700;
color: #000;
border-bottom: 4px solid #707070;
// border-radius: 4px;
}
.order_list_scroll{
white-space: nowrap;
display: flex;
}
}
}
.order_list{
flex:1;
height: 0;
.order_item{
.order_item_con{
margin-top: 20px;
padding: 0 20px;
}
}
}

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

@ -1,15 +1,15 @@
import Search from "@/components/search"
import useLogin from "@/use/useLogin"
import { Image, Text, View } from "@tarojs/components"
import { useDidShow, useRouter } from "@tarojs/taro"
import { useCallback, useState } from "react"
import {ORDER_STATUS} from '@/common/enum'
import { Image, ScrollView, Text, View } from "@tarojs/components"
import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro"
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
import styles from './index.module.scss'
import classnames from "classnames";
import { useSelector } from "@/reducers/hooks"
import { formatImgUrl } from "@/common/fotmat"
import Order from "./components/order"
import InfiniteScroll from "@/components/infiniteScroll"
import {GetOrderStatusListApi, GetOrderListApi} from '@/api/order'
import { dataLoadingStatus, getFilterData } from "@/common/util"
import OrderStatusList from "./components/orderStatusList"
export default () => {
const {checkLogin} = useLogin()
@ -17,46 +17,93 @@ export default () => {
await checkLogin()
})
const router = useRouter()
//搜索参数
const [searchField, setSearchField] = useState({
shipment_mode:'',
status: -1,
page : 1,
size : 10,
key:''
Name:''
})
//订单状态
type orderStatusParam = {value:number, label:string}[]
const order_status: orderStatusParam = [{value:-1, label:'全部'}, ...Object.values(ORDER_STATUS)]
const [selectStatus, setSelectStatus] = useState(-1)
const changeStatus = useCallback((e) => {
setSelectStatus(() => e)
//获取订单状态
const {fetchData: statusFetchData} = GetOrderStatusListApi()
const [statusList, setStatusList] = useState<any[]>([{id: -1, name: '全部'}])
const getOrderStatusList = async () => {
let res = await statusFetchData()
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) => {
// setMaterialList(() => ({list:[], total:0}))
setSearchField((val) => ({...val, code_or_name:e, size:10}))
pageNum.current.page = 1
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 (
<View className={styles.order_list_main}>
<View className={styles.title}>
<Search placeIcon="out" placeholder="搜索商品/名称/颜色/订单号" showBtn={true} defaultValue={router.params.key} changeOnSearch={getSearchData} debounceTime={300}/>
<View className={styles.order_status_list}>
{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>
<Search placeIcon="out" placeholder="搜索商品/名称/颜色/订单号" showBtn={true} changeOnSearch={getSearchData} debounceTime={300}/>
<OrderStatusList list={statusList} onSelect={changeStatus} defaultId={1}/>
</View>
<View className={styles.order_list}>
<InfiniteScroll>
{new Array(10).fill('').map(item => {
return <View className={styles.order_item}> <Order/></View>
<InfiniteScroll statusMore={statusMore} selfonScrollToLower={getScrolltolower} refresherEnabled={true} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={getRefresherRefresh}>
{orderData?.list.map(item => {
return <View key={item.id} className={styles.order_item_con}> <Order value={item} onClickBtn={clickOrderBtn}/></View>
})}
</InfiniteScroll>
</View>

22
src/styles/iconfont.scss
View File

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

69
src/use/useLogin.ts
View File

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