From d46dd16c36b19d9531eab7b9f049afbadfd1d470 Mon Sep 17 00:00:00 2001 From: tangping Date: Fri, 26 May 2023 23:23:56 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AE=A2=E5=8D=95=E7=9B=B8=E5=85=B3=E6=8E=A5?= =?UTF-8?q?=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/clock.png | Bin 0 -> 1426 bytes src/assets/images/tick.png | Bin 0 -> 1441 bytes src/pages/order-detail/index.jsx | 56 +++++++++++++--------- src/pages/order/index.jsx | 79 +++++++++++++++++++------------ src/pages/pay-success/index.jsx | 2 +- src/pages/settle/index.jsx | 26 ++++++++-- src/utils/api.js | 13 +++-- src/utils/utils.js | 40 ++++++++++++++++ 8 files changed, 158 insertions(+), 58 deletions(-) create mode 100644 src/assets/images/clock.png create mode 100644 src/assets/images/tick.png diff --git a/src/assets/images/clock.png b/src/assets/images/clock.png new file mode 100644 index 0000000000000000000000000000000000000000..85687b65f258105fcf5a3a80750d6908350c59a9 GIT binary patch literal 1426 zcmV;D1#S9?P)Px)Oi4sRRA@uhT3^VYV;H`!Qj`_4LanSQ%49;6EfcZ>vK3j`!44>jnyjo$wrtsI zi?Ra;4yY+InK)Qcw(NjRZJDAd%E6REs3~>n(*1nh-}`&t-}~qHu6^HA-^uqq@AKT( z{r|b{k67f3i(Gz;3P95N09FE64qzF8C840d0GtN!t$#@VJ(l8T1|aDw02=|^7s8*{ zBHX_KP5}4_zyXp!%mQXG07-WM*bZRLECK*H24FAA4~Cr68-S$i0PJrN+}i!$O#u81 z;P((}DS*oXTnk`DgP;cTB*~L~fOG~R$*%DXfSmxcn^QJpkZPY;<0}xeoa>%|?6S0JH^PC;8YAOGvr~ zfX^xMu!iK(eAa{oBxUWtLh|Xpmq(jn%Qb4Q>zR^Xb%ky^YaW2m-1kZQ%iHpBoggCv zxDtS6Dpt5UH-J?DIdBem3k<-!?og}loh{&Ae{XEqPx7e+2H<4?n?t58 zB==Pdqj%TCqm??-O6S;!Ak15=cf9R3Ylx| zvkPUvohgl`)OS~8HZu}sxj{6mv909tHsM1dIgQS_WCq~Q@y}E&mXiFV%i+`ZNOC;5 zuYa`iaJO688m-k{k_%a3J6yyvZ)SGJd&*W^3EvR{9bsXMG4ux z>syI1(0AkL>nAiL{JK^W{N`DWAp zpmlys?$_K-hZR0ewBbw@dDi#|d2$6lMsjsNx9&xj8!=m9#aIMZUqC^4xxp;t!bDs) zJ?gU+%ucNC`>5|LY;}L|QXeO8n9%-27E1Zs4791e(hAJf8w~*?>BYp-xpugPo?x!0 z5nIm!*qtsvm&De*%ri9xk`=6dr!P-lyv`N1==S6O-qd1b0MqJ@fjpG(d|=1eF%dp* zI9YPx)TS-JgRA@uhT3^VYV;H`!QYI@zSxs%Vl^sl0R;IRWwF5$?$ch7wtWcAQwH0bI znXGIzM|MCFWwNqDCM#2vWe0>%4k%)=no_r}bw9uE-}Ali`@HY(eLnTQwS#@%^XIyr z=l=Ix_eU)7j|&_>suD1>3jwSFupGcu02ccJ{SDw30AK4L$+NW%ZZrWiTLIus09yd8 z1#m$D+`j-$0yqZXRgyoAAu}@pGrJMMQvf!O0pLUqk$h*Cbp{hKv#S9dY5}g(m6?18 z;70&|I;blEECH|z!0HyDx{)VHo*F`A5CJoL6u=$;i^3)Xecl`Zd`R-QE&yhBDS%r5 zYz446TkD)|mE?1MN%SIMW)}l^9l)&_aDm=K^83CU#&KqLrA{5dwv5P8`4!23O6wL0 zIC!1#`mmUs@II2?ls4$|do#P%&2n8Be*(ZwrHIu@z|3SS?`Pom0oX}Wrc>?ny`Jnt1hnd4@%w5y==Vo~KuDiT-5#F-P=<)wo5?+jmk z0CtV>xc|2M+7Xg>w2e2j7|vBMO-hZNfSe{}+jXRb56hRg=|tG=SIIQ>U75W@eZBgGgqigt|CI#Yo^f0H6Eh(C#?i_Ejjw6&XL%oJimvFNyW@w@BVqT6D7*`=vtCr>AJWTTbzMIX*I5UeG_!!BX<33FUB-$#zr(0NEOTZdRut8kd zl8eA?kNS8Edem>IEo7C*cp?;z^r)Y6`g5XCmY}{2cDIk@W2H@N{@%=<4Jw_Uw~gXL zm#`H}3t`(f->O_VK&f*F!hy6tc!o-g+vi)Ib5%~@(<6R1Y0(piWc6H`mfWZqUzEOw zn3O9NGMl8vX}ZMS&0Twqk=JEXgSshggggNr4i1~ZkCWGfO)80~8jKANIhI;Y(oJX5 zj$HHEt?Dvs4ywVSQl{9=EZ#soHCL?lYKtu<5mEV|4vy^gOqc1n!l2fYKudp(T}`c} zQlU|aZd!K`0rv}aQ{)Fp{LR;umZ@@D51iC5Q(sKIW4++i=xb`lDtXE*2X%c069{G{ z5m>#gHX?m}Silt&rbOGmlV>Inh)A7C=Af+Er_n9_NeXyT(I^oaO(63Tse9@p%S_Z4 vj(=+Kvsaa;NXpi$d{qflK{RlY1yA5VwB9yPmW$PU00000NkvXXu0mjf1ks&Z literal 0 HcmV?d00001 diff --git a/src/pages/order-detail/index.jsx b/src/pages/order-detail/index.jsx index a1f6cc8..bf1b659 100644 --- a/src/pages/order-detail/index.jsx +++ b/src/pages/order-detail/index.jsx @@ -1,14 +1,17 @@ import React from 'react' import { Image, Text, View } from '@tarojs/components' import './index.scss' - import { useEffect } from 'react'; import { useState } from 'react'; import backNav from '@/images/backNav.png' import success from '@/images/success.png' +import clock from '@/images/clock.png' +import tick from '@/images/tick.png' import Taro from '@tarojs/taro'; import { useRouter } from '@tarojs/taro'; import { Popup } from '@nutui/nutui-react-taro'; +import { formatDateByStr, navigateTo, orderState, orderStateNotice } from '../../utils/utils'; +import { orderList } from '../../utils/api'; @@ -16,14 +19,20 @@ function Index() { const param = useRouter().params const [id] = useState(param.id) - + const [chanel] = useState('all') const [actionVisible, setActionVisible] = useState(false) const [actionText, setActionText] = useState('') + const [detail, setDetail] = useState({}) useEffect(() => { - + if (!id) return + orderList(chanel, { id }).then(re => { + if (!re) return + if (!re.items?.length) return + setDetail(re.items[0]) + }) }, [id]) @@ -54,17 +63,18 @@ function Index() { 订单详情 - - 等待发货 + + + {orderState.get(detail.state)} - 请耐心等待 + {orderStateNotice.get(detail.state)} - 李四 18080093730 - 四川省 成都市 天府二街 + {detail.recipient_name} {detail.recipient_phone} + {`${detail.province?.name}${detail.city?.name}${detail.county?.name}${detail.address}`} {/* 选择地址 */} @@ -73,11 +83,11 @@ function Index() { 商品信息 - + - 商品名称 + {detail.product?.name} - ¥199 + ¥{detail.amount} x1 @@ -85,7 +95,7 @@ function Index() { 总价： - ¥199 + ¥1{detail.amount} @@ -93,19 +103,19 @@ function Index() { 订单信息 商品合计 - ¥199.00 + ¥{detail.amount} 运费 - ¥199.00 + ¥0 优惠券 - ¥199.00 + ¥0 购物金折扣 - ¥199.00 + ¥{detail.channel == 'shopping_score_mall' ? detail.amount : 0} @@ -113,17 +123,17 @@ function Index() { 订单编号 - 32842942342 + {detail.id} { Taro.setClipboardData({ - data: '32842942342' + data: detail.id }) }}>复制 提交时间 - 2017-05-01 16:00 + {formatDateByStr('YYYY-mm-dd HH:MM', detail.created_at)} 支付方式 @@ -131,9 +141,11 @@ function Index() { - 取消订单 - 去支付 - {/* 再次购买 */} + {/* 取消订单 + 去支付 */} + { + navigateTo(`/pages/settle/index?id=${detail.product_id}`) + }}>再次购买 diff --git a/src/pages/order/index.jsx b/src/pages/order/index.jsx index 09f118b..93dbad1 100644 --- a/src/pages/order/index.jsx +++ b/src/pages/order/index.jsx @@ -9,21 +9,35 @@ import backNav from '@/images/backNav.png' import { Picker } from "@nutui/nutui-react-taro" import { Infiniteloading } from "@nutui/nutui-react-taro" import { useEffect } from "react" +import { orderList } from "../../utils/api" +import { navigateTo, orderState } from "../../utils/utils" const Login = () => { - + const limit = 20 const [tabKey, setTabKey] = useState('0') + const [chanel] = useState('all') const [page, setPage] = useState(1) const [list, setList] = useState([]) + const [total, setTotal] = useState(0) // 返回页面 const backFn = () => { Taro.getCurrentPages().length > 0 && Taro.navigateBack() } - useEffect(() => { }, [tabKey]) + useEffect(() => { + const offset = (page - 1) * limit + let state = tabKey + if (tabKey == '0') { + state = '' + } + orderList(chanel, { state, offset, limit }).then(re => { + setList(re.items) + setTotal(re.total) + }) + }, [tabKey, page]) return @@ -36,9 +50,9 @@ const Login = () => { setTabKey('0')}>全部 - setTabKey('1')}>待付款 - setTabKey('2')}>待发货 - setTabKey('3')}>已完成 + setTabKey('paid')}>待发货 + setTabKey('sent')}>已发货 + setTabKey('received')}>已收货 { @@ -46,38 +60,45 @@ const Login = () => { containerId="orderScroll" useWindow={false} loadTxt="loading" - loadMoreTxt="没有数据啦～" + loadMoreTxt={} loadIcon='loading' - hasMore={false} + hasMore={total > list.length} onLoadMore={(x) => { setPage(p => p + 1) x() }} > - - - 订单号：1947034434 - 等待付款 - - - - - - 商品名称 - ¥199.00 + { + list.map(item => { + return + + 订单号：{item.id} + {orderState.get(item.state)} + + Taro.navigateTo({ url: `/pages/order-detail/index?id=${item.id}` })}> + + + + {item.product.name} + ¥{item.amount} + + + X1 + + + + 已付金额: + ¥{item.amount} + + + {/* */} - X1 - - - - 已付金额: - ¥19999.00 - - - - - + }) + } + } { diff --git a/src/pages/pay-success/index.jsx b/src/pages/pay-success/index.jsx index 1c8ba1a..8f0b435 100644 --- a/src/pages/pay-success/index.jsx +++ b/src/pages/pay-success/index.jsx @@ -15,7 +15,7 @@ function Index() { // 跳转 const navDetailFn = (id) => { Taro.navigateTo({ - url: `/pages/goods-detail/index?id=${id}` + url: `/pages/order/index` }) } // 返回页面 diff --git a/src/pages/settle/index.jsx b/src/pages/settle/index.jsx index bf7f103..086e715 100644 --- a/src/pages/settle/index.jsx +++ b/src/pages/settle/index.jsx @@ -9,9 +9,11 @@ import next from '@/images/next.png' import Taro from '@tarojs/taro'; import { useRouter } from '@tarojs/taro'; import { Button } from '@nutui/nutui-react-taro'; -import { getAddress, mallDetail } from '../../utils/api'; +import { getAddress, mallDetail, order } from '../../utils/api'; import { GetData } from '../../utils/storage'; import { useDidShow } from '@tarojs/taro'; +import { useLoad } from '@tarojs/taro'; +import { closeLoading, loading } from '../../utils/utils'; @@ -20,12 +22,15 @@ function Index() { const param = useRouter().params const [id] = useState(param.id) const [aid, setAid] = useState(param.aid) + const [scene] = useState('mall') const [addrData, setAddrData] = useState({}) const [info, setInfo] = useState({}) useEffect(() => { + console.log(id, "xxx") + if (!id) return mallDetail(id).then(re => { if (!re) return setInfo(re) @@ -56,9 +61,24 @@ function Index() { // 跳转 - const navDetailFn = (id) => { + const navDetailFn = async () => { + if (!id) return + loading('订单生成中，请稍后...') + const re = await order(scene, { + product_id: Number(id), + address: addrData.address, + recipient_name: addrData.recipient_name, + recipient_phone: addrData.recipient_phone, + province_id: addrData.province_id, + city_id: addrData.city_id, + county_id: addrData.county_id, + zipcode: addrData.zipcode + }) + closeLoading() + console.log(re, "order") + if (!re) return Taro.navigateTo({ - url: `/pages/pay-success/index?id=${id}` + url: `/pages/pay-success/index?id=${re.id}` }) } diff --git a/src/utils/api.js b/src/utils/api.js index 19a9fac..07b854c 100644 --- a/src/utils/api.js +++ b/src/utils/api.js @@ -2,7 +2,7 @@ import { d, put } from './request' import { g, p } from './request' export const mallList = async (channel = 'mall', offset = 0, limit = 10) => { - return await g(`/products/${channel}`) + return await g(`/products/${channel}`, { limit, offset }) } export const mallDetail = async (id) => { @@ -23,8 +23,6 @@ export const sendCode = async (phone) => { return await p('/users/sms-verification-code', { phone }) } - - // 创建地址 export const createAddress = async (data = {}) => { return await p(`/users/addresses`, data) @@ -44,4 +42,13 @@ export const getAddress = async (data = {}) => { // 获取城市 export const cities = async (pid = 0) => { return await g('/cities', { pid }) +} + +// 下单 +export const order = async (channel, data = {}) => { + return await p(`/orders/${channel}`, data) +} + +export const orderList = async (channel, params = {}) => { + return await g(`/orders/${channel}`, params) } \ No newline at end of file diff --git a/src/utils/utils.js b/src/utils/utils.js index 413d7e7..17b3951 100644 --- a/src/utils/utils.js +++ b/src/utils/utils.js @@ -1,5 +1,18 @@ import Taro from "@tarojs/taro" +export const orderState = new Map([ + ['paid', '待发货'], + ['sent', '已发货'], + ['received', '已收货'], +]) + +export const orderStateNotice = new Map([ + ['paid', '请耐心等待'], + ['sent', '请耐心等待'], + ['received', ''], +]) + + export const successNotice = (content) => { Taro.showToast({ title: content, icon: 'success' }) } @@ -34,3 +47,30 @@ export const backOrGo = (url) => { Taro.getCurrentPages().length > 0 ? Taro.navigateBack() : redirectTo(url) } + + +export function dateFormat(fmt, date) { + let ret; + const opt = { + "Y+": date.getFullYear().toString(), // 年 + "m+": (date.getMonth() + 1).toString(), // 月 + "d+": date.getDate().toString(), // 日 + "H+": date.getHours().toString(), // 时 + "M+": date.getMinutes().toString(), // 分 + "S+": date.getSeconds().toString() // 秒 + // 有其他格式化字符需求可以继续添加，必须转化成字符串 + }; + for (let k in opt) { + ret = new RegExp("(" + k + ")").exec(fmt); + if (ret) { + fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0"))) + }; + }; + return fmt; +} + + +export const formatDateByStr = (fmt, date) => { + const d = new Date(date) + return dateFormat(fmt, d) +} \ No newline at end of file