订单相关接口

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() {
         订单详情
       </View>
       <View className='order-detail-state flex-between'>
-        <View>
+        <View className='flex-center'>
-          等待发货
+          <Image src={detail.state == 'received' ? tick : clock} className='w-6 h-6 mr-1' />
+          {orderState.get(detail.state)}
         </View>
-        <Text>请耐心等待</Text>
+        <Text>{orderStateNotice.get(detail.state)}</Text>
       </View>
       <View className='order-detail-body' >
         <View className='order-detail-address'>
           <View className='order-detail-address-area'>
             <View className='address-item'>
-              <View className='address-item-name'>李四 18080093730</View>
+              <View className='address-item-name'>{detail.recipient_name} {detail.recipient_phone}</View>
-              <View className='address-info'>四川省 成都市 天府二街</View>
+              <View className='address-info'>{`${detail.province?.name}${detail.city?.name}${detail.county?.name}${detail.address}`}</View>
               {/* <View className='address-item-name text-gold'>选择地址</View> */}
             </View>
           </View>
@@ -73,11 +83,11 @@ function Index() {
         <View className='order-detail-goods'>
           <View className='mt-22 order-detail-goods-title'>商品信息</View>
           <View className='order-detail-goods-info'>
-            <Image className='order-detail-goods-img' />
+            <Image className='order-detail-goods-img' src={detail.product?.cover_image} />
             <View className='order-detail-goods-content'>
-              <View className='order-detail-goods-content-title line-clamp-1'>商品名称</View>
+              <View className='order-detail-goods-content-title line-clamp-1'>{detail.product?.name}</View>
               <View className='order-detail-goods-content-price'>
-                <View className='order-detail-goods-content-price-1'>¥199</View>
+                <View className='order-detail-goods-content-price-1'>¥{detail.amount}</View>
                 <View className='order-detail-goods-content-price-num'>x1</View>
               </View>
             </View>
@@ -85,7 +95,7 @@ function Index() {
         </View>
         <View className='order-detail-price-container'>
           <View>总价：</View>
-          <View className='order-detail-price-p'>¥199</View>
+          <View className='order-detail-price-p'>¥1{detail.amount}</View>
         </View>
       </View>
 
@@ -93,19 +103,19 @@ function Index() {
         <View className='order-detail-title mt-22'>订单信息</View>
         <View className="flex-between order-detail-item">
           <Text>商品合计</Text>
-          <Text className='order-detail-item-right'>¥199.00</Text>
+          <Text className='order-detail-item-right'>¥{detail.amount}</Text>
         </View>
         <View className="flex-between order-detail-item">
           <Text>运费</Text>
-          <Text className='order-detail-item-right'>¥199.00</Text>
+          <Text className='order-detail-item-right'>¥0</Text>
         </View>
         <View className="flex-between order-detail-item">
           <Text>优惠券</Text>
-          <Text className='order-detail-item-right'>¥199.00</Text>
+          <Text className='order-detail-item-right'>¥0</Text>
         </View>
         <View className="flex-between order-detail-item">
           <Text>购物金折扣</Text>
-          <Text className='order-detail-item-right'>¥199.00</Text>
+          <Text className='order-detail-item-right'>¥{detail.channel == 'shopping_score_mall' ? detail.amount : 0}</Text>
         </View>
       </View>
 
@@ -113,17 +123,17 @@ function Index() {
         <View className="flex-between order-detail-item">
           <Text>订单编号</Text>
           <View className='flex-center'>
-            <Text className='order-detail-item-right'>32842942342</Text>
+            <Text className='order-detail-item-right'>{detail.id}</Text>
             <View className='order-detail-copy flex-center' onClick={() => {
               Taro.setClipboardData({
-                data: '32842942342'
+                data: detail.id
               })
             }}>复制</View>
           </View>
         </View>
         <View className="flex-between order-detail-item">
           <Text>提交时间</Text>
-          <Text className='order-detail-item-right'>2017-05-01  16:00</Text>
+          <Text className='order-detail-item-right'>{formatDateByStr('YYYY-mm-dd HH:MM', detail.created_at)}</Text>
         </View>
         <View className="flex-between order-detail-item">
           <Text>支付方式</Text>
@@ -131,9 +141,11 @@ function Index() {
         </View>
       </View>
       <View className='flex-end order-detail-action'>
-        <View className='order-detail-btn flex-center order-btn-cancel'>取消订单</View>
+        {/* <View className='order-detail-btn flex-center order-btn-cancel'>取消订单</View>
-        <View className='order-detail-btn flex-center order-btn-pay'>去支付</View>
+        <View className='order-detail-btn flex-center order-btn-pay'>去支付</View> */}
-        {/* <View className='order-detail-algin-btn flex-center'>再次购买</View> */}
+        <View className='order-detail-algin-btn flex-center order-btn-algin' onClick={() => {
+          navigateTo(`/pages/settle/index?id=${detail.product_id}`)
+        }}>再次购买</View>
       </View>
 
 

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 <View className="order-frame bg-slate-50 h-screen text-base">
@@ -36,9 +50,9 @@ const Login = () => {
 
             <View className="order-tabs flex-around">
                 <View className={'order-tab-pane ' + (tabKey == '0' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('0')}>全部</View>
-                <View className={'order-tab-pane ' + (tabKey == '1' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('1')}>待付款</View>
+                <View className={'order-tab-pane ' + (tabKey == 'paid' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('paid')}>待发货</View>
-                <View className={'order-tab-pane ' + (tabKey == '2' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('2')}>待发货</View>
+                <View className={'order-tab-pane ' + (tabKey == 'sent' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('sent')}>已发货</View>
-                <View className={'order-tab-pane ' + (tabKey == '3' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('3')}>已完成</View>
+                <View className={'order-tab-pane ' + (tabKey == 'received' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('received')}>已收货</View>
             </View>
             <View className="orderScroll" id="orderScroll">
                 {
@@ -46,25 +60,27 @@ const Login = () => {
                         containerId="orderScroll"
                         useWindow={false}
                         loadTxt="loading"
-                        loadMoreTxt="没有数据啦～"
+                        loadMoreTxt={<View></View>}
                         loadIcon='loading'
-                        hasMore={false}
+                        hasMore={total > list.length}
                         onLoadMore={(x) => {
                             setPage(p => p + 1)
                             x()
                         }}
                     >
-                        <View className="order-item-container mt20 flex-col">
+                        {
+                            list.map(item => {
+                                return <View className="order-item-container mt20 flex-col" key={item.id}>
                                     <View className="flex-between">
-                                <Text>订单号：1947034434</Text>
+                                        <Text>订单号：{item.id}</Text>
-                                <Text className="text-gold">等待付款</Text>
+                                        <Text className="text-gold">{orderState.get(item.state)}</Text>
                                     </View>
-                            <View className="order-goods flex-between">
+                                    <View className="order-goods flex-between" onClick={() => Taro.navigateTo({ url: `/pages/order-detail/index?id=${item.id}` })}>
                                         <View className="order-goods-left flex-start">
-                                    <Image src={'https://img.yzcdn.cn/vant/cat.jpeg'} className="order-goods-img" />
+                                            <Image src={item.product.cover_image} className="order-goods-img" />
                                             <View className="flex-col ml17">
-                                        <Text>商品名称</Text>
+                                                <Text>{item.product.name}</Text>
-                                        <Text>¥199.00</Text>
+                                                <Text>¥{item.amount}</Text>
                                             </View>
                                         </View>
                                         <View className="order-goods-num">X1</View>
@@ -72,12 +88,17 @@ const Login = () => {
                                     <View className="order-goods-action flex-between">
                                         <View className="order-goods-settle">
                                             <Text>已付金额:</Text>
-                                    <Text className="text-gold">¥19999.00</Text>
+                                            <Text className="text-gold">¥{item.amount}</Text>
                                         </View>
-                                <Button className="order-goods-btn flex-center order-btn-cancel">取消订单</Button>
+                                        <Button className="order-goods-btn flex-center order-btn-algin" onClick={() => {
-                                <Button className="order-goods-btn flex-center order-btn-pay">立即付款</Button>
+                                            navigateTo(`/pages/settle/index?id=${item.product_id}`)
+                                        }}>再次购买</Button>
+                                        {/* <Button className="order-goods-btn flex-center order-btn-pay">立即付款</Button> */}
                                     </View>
                                 </View>
+                            })
+                        }
+
                     </Infiniteloading>
                 }
                 {

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`
         })
     }
     // 返回页面

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}`
     })
   }
 

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)
@@ -45,3 +43,12 @@ 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)
+}

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)
+}