You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
3.0 KiB
104 lines
3.0 KiB
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 Taro from '@tarojs/taro'
|
|
import {ShopGoods} from "@/api/shop/shopGoods/model";
|
|
import {getShopGoods} from "@/api/shop/shopGoods";
|
|
import {View} from '@tarojs/components';
|
|
import {listShopUserAddress} from "@/api/shop/shopUserAddress";
|
|
import {ShopUserAddress} from "@/api/shop/shopUserAddress/model";
|
|
import './index.scss'
|
|
|
|
const OrderConfirm = () => {
|
|
const [goods, setGoods] = useState<ShopGoods | null>(null);
|
|
const [address, setAddress] = useState<ShopUserAddress>()
|
|
const router = Taro.getCurrentInstance().router;
|
|
const goodsId = router?.params?.goodsId;
|
|
|
|
const reload = async () => {
|
|
const address = await listShopUserAddress({isDefault: true});
|
|
if(address.length > 0){
|
|
setAddress(address[0])
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (goodsId) {
|
|
getShopGoods(Number(goodsId)).then(res => {
|
|
setGoods(res);
|
|
}).catch(error => {
|
|
console.error("Failed to fetch goods detail:", error);
|
|
});
|
|
}
|
|
reload().then()
|
|
}, [goodsId]);
|
|
|
|
if (!goods) {
|
|
return <div>加载中...</div>;
|
|
}
|
|
|
|
return (
|
|
<div className={'order-confirm-page'}>
|
|
<CellGroup>
|
|
{
|
|
address && (
|
|
<Cell>
|
|
<Space>
|
|
<Location/>
|
|
<View>送至</View>
|
|
<View>{address.fullAddress}</View>
|
|
</Space>
|
|
</Cell>
|
|
)
|
|
}
|
|
{!address && (
|
|
<Cell className={''} onClick={() => Taro.navigateTo({url: '/user/address/index'})}>
|
|
<Space>
|
|
<Location/>
|
|
添加收货地址
|
|
</Space>
|
|
</Cell>
|
|
)}
|
|
</CellGroup>
|
|
|
|
<CellGroup>
|
|
<Cell>
|
|
<div className={'flex items-center'}>
|
|
<Image src={goods.image} width="80" height="80"/>
|
|
<div className={'ml-2'}>
|
|
<div className={'text-sm font-bold'}>{goods.name}</div>
|
|
<div className={'text-red-500 text-lg'}>￥{goods.price}</div>
|
|
</div>
|
|
</div>
|
|
</Cell>
|
|
</CellGroup>
|
|
|
|
<CellGroup title="收货信息">
|
|
<Cell title="收货人">
|
|
<Input placeholder="请输入收货人姓名"/>
|
|
</Cell>
|
|
<Cell title="手机号">
|
|
<Input placeholder="请输入手机号" type="tel"/>
|
|
</Cell>
|
|
<Cell title="收货地址">
|
|
<TextArea placeholder="请输入详细收货地址"/>
|
|
</Cell>
|
|
</CellGroup>
|
|
|
|
<CellGroup title="订单备注">
|
|
<Cell>
|
|
<TextArea placeholder="请输入订单备注"/>
|
|
</Cell>
|
|
</CellGroup>
|
|
|
|
<div className={'fixed-bottom'}>
|
|
<div className={'total-price'}>
|
|
合计：<span className={'text-red-500 text-xl font-bold'}>￥{goods.price}</span>
|
|
</div>
|
|
<Button type="primary" size="large" className={'submit-btn'}>提交订单</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default OrderConfirm;
|