tangping/mall-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

订单相关接口

Browse Source
This commit is contained in:
tangping 2023-05-26 23:23:56 +08:00
parent eaee69667c
commit d46dd16c36
8 changed files with 158 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/clock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/images/tick.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

56
src/pages/order-detail/index.jsx
View File

@ -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-info'>四川省 成都市 天府二街</View>
<View className='address-item-name'>{detail.recipient_name} {detail.recipient_phone}</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-pay'>去支付</View>
{/* <View className='order-detail-algin-btn flex-center'>再次购买</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-algin-btn flex-center order-btn-algin' onClick={() => {
navigateTo(`/pages/settle/index?id=${detail.product_id}`)
}}>再次购买</View>
</View>

79
src/pages/order/index.jsx
View File

@ -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 == '2' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('2')}>待发货</View>
<View className={'order-tab-pane ' + (tabKey == '3' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('3')}>已完成</View>
<View className={'order-tab-pane ' + (tabKey == 'paid' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('paid')}>待发货</View>
<View className={'order-tab-pane ' + (tabKey == 'sent' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('sent')}>已发货</View>
<View className={'order-tab-pane ' + (tabKey == 'received' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('received')}>已收货</View>
</View>
<View className="orderScroll" id="orderScroll">
{
@ -46,38 +60,45 @@ 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">
<View className="flex-between">
<Text>订单号：1947034434</Text>
<Text className="text-gold">等待付款</Text>
</View>
<View className="order-goods flex-between">
<View className="order-goods-left flex-start">
<Image src={'https://img.yzcdn.cn/vant/cat.jpeg'} className="order-goods-img" />
<View className="flex-col ml17">
<Text>商品名称</Text>
<Text>¥199.00</Text>
{
list.map(item => {
return <View className="order-item-container mt20 flex-col" key={item.id}>
<View className="flex-between">
<Text>订单号：{item.id}</Text>
<Text className="text-gold">{orderState.get(item.state)}</Text>
</View>
<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={item.product.cover_image} className="order-goods-img" />
<View className="flex-col ml17">
<Text>{item.product.name}</Text>
<Text>¥{item.amount}</Text>
</View>
</View>
<View className="order-goods-num">X1</View>
</View>
<View className="order-goods-action flex-between">
<View className="order-goods-settle">
<Text>已付金额:</Text>
<Text className="text-gold">¥{item.amount}</Text>
</View>
<Button className="order-goods-btn flex-center order-btn-algin" onClick={() => {
navigateTo(`/pages/settle/index?id=${item.product_id}`)
}}>再次购买</Button>
{/* <Button className="order-goods-btn flex-center order-btn-pay">立即付款</Button> */}
</View>
</View>
<View className="order-goods-num">X1</View>
</View>
<View className="order-goods-action flex-between">
<View className="order-goods-settle">
<Text>已付金额:</Text>
<Text className="text-gold">¥19999.00</Text>
</View>
<Button className="order-goods-btn flex-center order-btn-cancel">取消订单</Button>
<Button className="order-goods-btn flex-center order-btn-pay">立即付款</Button>
</View>
</View>
})
}
</Infiniteloading>
}
{

2
src/pages/pay-success/index.jsx
View File

@ -15,7 +15,7 @@ function Index() {
// 跳转
const navDetailFn = (id) => {
Taro.navigateTo({
url: `/pages/goods-detail/index?id=${id}`
url: `/pages/order/index`
})
}
// 返回页面

26
src/pages/settle/index.jsx
View File

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

13
src/utils/api.js
View File

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

40
src/utils/utils.js
View File

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