From 469e020df5ff2cc0078199ae4da06224e9229e3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Sat, 26 Jul 2025 12:33:45 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=EF=BC=9A=E4=BD=99=E9=A2=9D?= =?UTF-8?q?=E6=94=AF=E4=BB=98=E3=80=81=E5=BE=AE=E4=BF=A1=E6=94=AF=E4=BB=98?= =?UTF-8?q?=E3=80=81=E4=B8=8B=E5=8D=95=E7=A1=AE=E8=AE=A4=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/shop/shopOrder/model/index.ts | 1 + src/api/system/payment/index.ts | 61 ++++-- src/api/system/payment/model/index.ts | 2 +- src/pages/order/components/OrderList.tsx | 181 +++++++++++++++++ src/pages/order/order.tsx | 25 ++- src/pages/user/components/UserCard.tsx | 2 +- src/shop/orderConfirm/index.scss | 25 ++- src/shop/orderConfirm/index.tsx | 225 ++++++++++++++++++---- src/shop/orderConfirmCart/index.config.ts | 4 + src/shop/orderConfirmCart/index.scss | 44 +++++ src/shop/orderConfirmCart/index.tsx | 132 +++++++++++++ src/user/address/index.tsx | 20 +- src/utils/server.ts | 2 +- 13 files changed, 658 insertions(+), 66 deletions(-) create mode 100644 src/pages/order/components/OrderList.tsx create mode 100644 src/shop/orderConfirmCart/index.config.ts create mode 100644 src/shop/orderConfirmCart/index.scss create mode 100644 src/shop/orderConfirmCart/index.tsx diff --git a/src/api/shop/shopOrder/model/index.ts b/src/api/shop/shopOrder/model/index.ts index 261f26c..8fa2ba0 100644 --- a/src/api/shop/shopOrder/model/index.ts +++ b/src/api/shop/shopOrder/model/index.ts @@ -153,5 +153,6 @@ export interface ShopOrderParam extends PageParam { orderStatus?: number; payType?: number; isInvoice?: boolean; + userId?: number; keywords?: string; } diff --git a/src/api/system/payment/index.ts b/src/api/system/payment/index.ts index 93ed0a7..7ec67a7 100644 --- a/src/api/system/payment/index.ts +++ b/src/api/system/payment/index.ts @@ -1,17 +1,16 @@ import request from '@/utils/request'; -import type { ApiResult, PageResult } from '@/api/index'; -import type { Payment, PaymentParam } from './model'; -import type { Order } from '@/api/shop/order/model'; +import type {ApiResult, PageResult} from '@/api/index'; +import type {Payment, PaymentParam} from './model'; +import type {ShopOrder} from '@/api/shop/shopOrder/model'; +import {SERVER_API_URL} from "@/utils/server"; /** * 分页查询支付方式 */ export async function pagePayment(params: PaymentParam) { const res = await request.get>>( - '/system/payment/page', - { - params - } + SERVER_API_URL + '/system/payment/page', + params ); if (res.code === 0) { return res.data; @@ -24,10 +23,8 @@ export async function pagePayment(params: PaymentParam) { */ export async function listPayment(params?: PaymentParam) { const res = await request.get>( - '/system/payment', - { - params - } + SERVER_API_URL + '/system/payment', + params ); if (res.code === 0 && res.data) { return res.data; @@ -40,7 +37,7 @@ export async function listPayment(params?: PaymentParam) { */ export async function addPayment(data: Payment) { const res = await request.post>( - '/system/payment', + SERVER_API_URL + '/system/payment', data ); if (res.code === 0) { @@ -54,7 +51,7 @@ export async function addPayment(data: Payment) { */ export async function updatePayment(data: Payment) { const res = await request.put>( - '/system/payment', + SERVER_API_URL + '/system/payment', data ); if (res.code === 0) { @@ -68,7 +65,7 @@ export async function updatePayment(data: Payment) { */ export async function removePayment(id?: number) { const res = await request.del>( - '/system/payment/' + id + SERVER_API_URL + '/system/payment/' + id ); if (res.code === 0) { return res.message; @@ -81,7 +78,7 @@ export async function removePayment(id?: number) { */ export async function removeBatchPayment(data: (number | undefined)[]) { const res = await request.del>( - '/system/payment/batch', + SERVER_API_URL + '/system/payment/batch', { data } @@ -97,7 +94,7 @@ export async function removeBatchPayment(data: (number | undefined)[]) { */ export async function getPayment(id: number) { const res = await request.get>( - '/system/payment/' + id + SERVER_API_URL + '/system/payment/' + id ); if (res.code === 0 && res.data) { return res.data; @@ -108,9 +105,9 @@ export async function getPayment(id: number) { /** * 生成支付二维码(微信native) */ -export async function getNativeCode(data: Order) { +export async function getNativeCode(data: ShopOrder) { const res = await request.post>( - '/system/wx-native-pay/codeUrl', + SERVER_API_URL + '/system/wx-native-pay/codeUrl', data ); if (res.code === 0) { @@ -118,3 +115,31 @@ export async function getNativeCode(data: Order) { } return Promise.reject(new Error(res.message)); } + +/** + * 使用余额支付 + */ +export async function payByBalance(data: ShopOrder) { + const res = await request.post>( + SERVER_API_URL + '/system/payment/balancePay', + data + ); + if (res.code === 0) { + return res.message; + } + return Promise.reject(new Error(res.message)); +} + +/** + * 选择支付方式 + */ +export async function selectPayment(params?: PaymentParam) { + const res = await request.get>( + SERVER_API_URL + '/system/payment/select', + params + ); + if (res.code === 0) { + return res.data; + } + return Promise.reject(new Error(res.message)); +} diff --git a/src/api/system/payment/model/index.ts b/src/api/system/payment/model/index.ts index 1761bb4..6a4ecfe 100644 --- a/src/api/system/payment/model/index.ts +++ b/src/api/system/payment/model/index.ts @@ -1,4 +1,4 @@ -import type { PageParam } from '@/api'; +import type { PageParam } from '@/api/index'; /** * 支付方式 diff --git a/src/pages/order/components/OrderList.tsx b/src/pages/order/components/OrderList.tsx new file mode 100644 index 0000000..b7badd6 --- /dev/null +++ b/src/pages/order/components/OrderList.tsx @@ -0,0 +1,181 @@ +import {Avatar, Cell, Space, Tabs, Button, TabPane} from '@nutui/nutui-react-taro' +import {useEffect, useState, CSSProperties} from "react"; +import Taro from '@tarojs/taro'; +import {InfiniteLoading} from '@nutui/nutui-react-taro' +import dayjs from "dayjs"; +import {pageShopOrder} from "@/api/shop/shopOrder"; +import {ShopOrder} from "@/api/shop/shopOrder/model"; +import {copyText} from "@/utils/common"; + +const InfiniteUlStyle: CSSProperties = { + marginTop: '84px', + height: '82vh', + width: '100%', + padding: '0', + overflowY: 'auto', + overflowX: 'hidden', +} +const tabs = [ + { + index: 0, + key: '全部', + title: '全部' + }, + { + index: 1, + key: '待付款', + title: '待付款' + }, + { + index: 2, + key: '待发货', + title: '待发货' + }, + { + index: 3, + key: '已收货', + title: '已收货' + }, + { + index: 4, + key: '已完成', + title: '已完成' + } +] + +function OrderList(props: any) { + const [list, setList] = useState([]) + const [page, setPage] = useState(1) + const [hasMore, setHasMore] = useState(true) + const [tapIndex, setTapIndex] = useState('0') + + console.log(props.statusBarHeight, 'ppp') + + const getOrderStatusParams = (index: string | number) => { + let params: { payStatus?: number; deliveryStatus?: number; orderStatus?: number } = {}; + switch (index) { + case '1': // 待付款 + params.payStatus = 0; + break; + case '2': // 待发货 + params.payStatus = 1; + params.deliveryStatus = 10; + break; + case '3': // 已收货 + params.deliveryStatus = 30; + break; + case '4': // 已完成 + params.orderStatus = 1; + break; + case '0': // 全部 + default: + break; + } + return params; + }; + + const reload = async (resetPage = false) => { + const currentPage = resetPage ? 1 : page; + const params = getOrderStatusParams(tapIndex); + pageShopOrder({ page: currentPage, ...params }).then(res => { + let newList: ShopOrder[] | undefined = []; + if (res?.list && res?.list.length > 0) { + newList = resetPage ? res.list : list?.concat(res.list); + setHasMore(true); + } else { + newList = res?.list; + setHasMore(false); + } + setList(newList || []); + setPage(currentPage); + }); + }; + + const reloadMore = async () => { + setPage(page + 1); + reload(); + }; + + useEffect(() => { + reload(true); // 首次加载或tab切换时重置页码 + }, [tapIndex]); // 监听tapIndex变化 + + return ( + <> + { + setTapIndex(paneKey) + }} + > + { + tabs?.map((item, index) => { + return + }) + } + +
+ { + + }} + onScrollToUpper={() => { + + }} + loadingText={ + <> + 加载中 + + } + loadMoreText={ + <> + 没有更多了 + + } + > + {props.data?.map(item => { + return ( + Taro.navigateTo({url: `/shop/orderDetail/index?orderId=${item.orderId}`})}> + +
+ {e.stopPropagation(); copyText(`${item.orderNo}`)}}>{item.orderNo} + 待付款 {/* 这里可以根据item.orderStatus显示不同的状态 */} +
+
{dayjs(item.createTime).format('YYYY年MM月DD日 HH:mm:ss')}
+
+
+
+ +
{item.realName}
+
+
{item.totalNum}件商品
+
+
+
实付金额：￥{item.payPrice}
+ + + + + + ) + })} + +
+ + ) +} + +export default OrderList diff --git a/src/pages/order/order.tsx b/src/pages/order/order.tsx index c56079e..a58c580 100644 --- a/src/pages/order/order.tsx +++ b/src/pages/order/order.tsx @@ -1,13 +1,25 @@ -import {useEffect, useState} from "react"; // 添加 useCallback 引入 -import Taro from '@tarojs/taro'; +import {useState} from "react"; // 添加 useCallback 引入 +import Taro, {useDidShow} from '@tarojs/taro' import {NavBar, Space} from '@nutui/nutui-react-taro' import {Search} from '@nutui/icons-react-taro' -import OrderList from "@/components/OrderList"; +import OrderList from "./components/OrderList"; +import {ShopOrder} from "@/api/shop/shopOrder/model"; +import {pageShopOrder} from "@/api/shop/shopOrder"; import './order.scss' + function Order() { const [statusBarHeight, setStatusBarHeight] = useState() + const [list, setList] = useState([]) + + + const reload = async () => { + const orders = await pageShopOrder({userId: Taro.getStorageSync('UserId')}) + if (orders) { + setList(orders.list || []) + } + } - useEffect(() => { + useDidShow(() => { Taro.getSystemInfo({ success: (res) => { setStatusBarHeight(res.statusBarHeight) @@ -18,7 +30,8 @@ function Order() { backgroundColor: '#ffffff', // 状态栏+导航栏背景色 frontColor: 'black', // 状态栏文字颜色（仅支持 black/white） }); - }, []); // 新增: 添加滚动事件监听 + reload().then() + }); // 新增: 添加滚动事件监听 return ( <> @@ -45,7 +58,7 @@ function Order() { > 订单 - + ); } diff --git a/src/pages/user/components/UserCard.tsx b/src/pages/user/components/UserCard.tsx index 651837a..41bb0e7 100644 --- a/src/pages/user/components/UserCard.tsx +++ b/src/pages/user/components/UserCard.tsx @@ -188,7 +188,7 @@ function UserCard() {
余额 - ¥ 0.00 + ¥ {userInfo?.balance}
优惠券 diff --git a/src/shop/orderConfirm/index.scss b/src/shop/orderConfirm/index.scss index 9a8ecdb..54ec1b6 100644 --- a/src/shop/orderConfirm/index.scss +++ b/src/shop/orderConfirm/index.scss @@ -15,13 +15,30 @@ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); .total-price { - flex: 1; - text-align: right; - margin-right: 20px; + display: flex; + align-items: center; } .submit-btn { width: 150px; } } -} \ No newline at end of file +} +.address-bottom-line{ + width: 100%; + border-radius: 24rpx 24rpx 0 0; + background: #fff; + padding: 26rpx 49rpx 0 34rpx; + position: relative; + &:before { + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 5px; + background: repeating-linear-gradient(-45deg, #ff6c6c, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, + #1989fa 45%, transparent 0, transparent 50%); + background-size: 120px; + content: ""; + } +} diff --git a/src/shop/orderConfirm/index.tsx b/src/shop/orderConfirm/index.tsx index 700ff7d..a064db1 100644 --- a/src/shop/orderConfirm/index.tsx +++ b/src/shop/orderConfirm/index.tsx @@ -1,6 +1,6 @@ import {useEffect, useState} from "react"; -import {Image, Button, Cell, CellGroup, Input, TextArea, Space} from '@nutui/nutui-react-taro' -import {Location} from '@nutui/icons-react-taro' +import {Image, Button, Cell, CellGroup, Input, Space, ActionSheet} from '@nutui/nutui-react-taro' +import {Location, ArrowRight} from '@nutui/icons-react-taro' import Taro from '@tarojs/taro' import {ShopGoods} from "@/api/shop/shopGoods/model"; import {getShopGoods} from "@/api/shop/shopGoods"; @@ -8,18 +8,138 @@ import {View} from '@tarojs/components'; import {listShopUserAddress} from "@/api/shop/shopUserAddress"; import {ShopUserAddress} from "@/api/shop/shopUserAddress/model"; import './index.scss' +import Gap from "@/components/Gap"; +import {TenantId} from "@/config/app"; +import {payByBalance, selectPayment} from "@/api/system/payment"; +import {Payment} from "@/api/system/payment/model"; const OrderConfirm = () => { const [goods, setGoods] = useState(null); const [address, setAddress] = useState() + const [payments, setPayments] = useState([]) + const [payment, setPayment] = useState() + const [isVisible, setIsVisible] = useState(false) const router = Taro.getCurrentInstance().router; const goodsId = router?.params?.goodsId; const reload = async () => { + // 默认收货地址 const address = await listShopUserAddress({isDefault: true}); - if(address.length > 0){ + if (address.length > 0) { setAddress(address[0]) } + // 支付方式 + const paymentList = await selectPayment({}); + if (paymentList && paymentList.length > 0) { + setPayments(paymentList?.map((d, _) => { + return { + type: d.type, + name: d.name, + description: d.comments + } + })) + setPayment(paymentList[0]) + } + } + + const handleSelect = (item: any) => { + setPayment(payments.find(payment => payment.name === item.name)) + setIsVisible(false) + } + + const onPay = async (goods: ShopGoods) => { + // 支付方式 + if (payment?.type == 0) { + await onBalancePay(goods) + } + if (payment?.type == 1) { + await onWxPay(goods) + } + } + + const onBalancePay = async (goods: ShopGoods) => { + Taro.showLoading({title: '支付中...'}) + payByBalance({ + payType: goods.type, + payPrice: goods.price, + totalPrice: goods.price, + userId: Taro.getStorageSync('UserId'), + tenantId: Number(TenantId) + }).then().finally(() => { + Taro.showToast({ + title: '支付成功', + icon: 'success', + duration: 2000 + }) + Taro.hideLoading() + setTimeout(() => { + // Taro.switchTab({url: '/pages/order/order'}) + }, 2000) + }).catch(() => { + Taro.hideLoading() + }) + } + + const onWxPay = async (goods: ShopGoods) => { + Taro.showLoading({title: '支付中...'}) + Taro.request({ + // url: 'https://cms-api.websoft.top/api/shop/shop-order', + url: 'http://127.0.0.1:9200/api/shop/shop-order', + method: 'POST', + header: { + 'content-type': 'application/json', + 'Authorization': Taro.getStorageSync('access_token'), + TenantId + }, + data: { + totalPrice: goods.price, + payPrice: goods.price, + tenantId: TenantId, + payType: goods.type, + comments: goods.name, + name: goods.name + }, + success: function (res) { + Taro.hideLoading() + const data = res.data.data + console.log(data, 'payInfo') + // Taro.showToast({ + // title: '下单成功', + // }) + // + // setTimeout(() => { + // Taro.switchTab({ + // url: '/pages/order/order' + // }) + // }, 1000); + // return false; + if (data) { + Taro.requestPayment({ + timeStamp: data.timeStamp, + nonceStr: data.nonceStr, + package: data.package, + signType: data.signType, + paySign: data.paySign, + success: function (res) { + if (res.errMsg == "requestPayment:ok") { + console.log('购买成功') + } + }, + fail: function (res) { + console.log(res) + } + }) + } + }, + fail: function (msg) { + console.log('支付失败') + Taro.hideLoading() + Taro.showToast({ + title: `${msg}`, + icon: 'error' + }) + } + }) } useEffect(() => { @@ -42,11 +162,18 @@ const OrderConfirm = () => { { address && ( - + Taro.navigateTo({url: '/user/address/index'})}> - 送至 - {address.fullAddress} + + + 送至 + {address.province} {address.city} {address.region} {address.address} + + + {address.name} {address.phone} + ) @@ -62,40 +189,72 @@ const OrderConfirm = () => { - -
- -
-
{goods.name}
-
￥{goods.price}
-
-
+ + + + + {goods.name} + 80g/袋 + + ￥{goods.price} + x 1 + + + - - - - - - - - -