Browse Source

refactor(shop): 更新 API调用和页面逻辑

- 修改了多个文件中的 API调用路径
- 优化了部分组件的显示逻辑
- 添加了优惠券相关功能
-调整了环境变量配置
master
科技小王子 2 weeks ago
parent
commit
2c864ce770
  1. 4
      config/env.ts
  2. 4
      src/api/layout/index.ts
  3. 6
      src/api/shop/shopUserCoupon/model/index.ts
  4. 2
      src/components/CouponStats.tsx
  5. 10
      src/pages/cart/cart.tsx
  6. 108
      src/pages/index/BestSellers.tsx
  7. 4
      src/pages/index/Header.tsx
  8. 4
      src/pages/index/index.tsx
  9. 4
      src/pages/order/order.scss
  10. 3
      src/pages/user/components/UserCard.tsx
  11. 55
      src/pages/user/components/UserCell.tsx
  12. 23
      src/user/coupon/index.tsx

4
config/env.ts

@ -2,13 +2,13 @@
export const ENV_CONFIG = {
// 开发环境
development: {
API_BASE_URL: 'http://127.0.0.1:9200/api',
API_BASE_URL: 'https://cms-api.websoft.top/api',
APP_NAME: '开发环境',
DEBUG: 'true',
},
// 生产环境
production: {
API_BASE_URL: 'https://cms-api.websoft.top/api',
API_BASE_URL: 'https://cms-api.s209.websoft.top/api',
APP_NAME: '时里院子市集',
DEBUG: 'false',
},

4
src/api/layout/index.ts

@ -8,9 +8,9 @@ import {SERVER_API_URL} from "@/utils/server";
/**
*
*/
export async function getSiteInfo() {
export async function getShopInfo() {
const res = await request.get<ApiResult<CmsWebsite>>(
'/cms/cms-website/getSiteInfo'
'/shop/getShopInfo'
);
if (res.code === 0 && res.data) {
return res.data;

6
src/api/shop/shopUserCoupon/model/index.ts

@ -32,6 +32,8 @@ export interface ShopUserCoupon {
endTime?: string;
// 使用状态(0未使用 1已使用 2已过期)
status?: number;
// 是否过期, 0否, 1是
isExpire?: number;
// 使用时间
useTime?: string;
// 使用订单ID
@ -57,5 +59,9 @@ export interface ShopUserCoupon {
*/
export interface ShopUserCouponParam extends PageParam {
id?: number;
status?: number;
isExpire?: number;
sortBy?: string;
sortOrder?: string;
keywords?: string;
}

2
src/components/CouponStats.tsx

@ -24,7 +24,7 @@ const CouponStats: React.FC<CouponStatsProps> = ({
}
return (
<View className="bg-white mx-4 my-3 rounded-xl p-4">
<View className="bg-white mx-4 my-3 rounded-xl p-4 hidden">
<Text className="font-semibold text-gray-800"></Text>
<View className="flex justify-between mt-2">

10
src/pages/cart/cart.tsx

@ -1,5 +1,5 @@
import {useEffect, useState} from "react";
import Taro, {useShareAppMessage, useShareTimeline} from '@tarojs/taro';
import Taro, {useShareAppMessage, useShareTimeline, useDidShow} from '@tarojs/taro';
import {
NavBar,
Checkbox,
@ -25,7 +25,8 @@ function Cart() {
cartCount,
updateQuantity,
removeFromCart,
clearCart
clearCart,
loadCartFromStorage
} = useCart();
// InputNumber 主题配置
@ -56,6 +57,11 @@ function Cart() {
};
});
// 页面显示时刷新购物车数据
useDidShow(() => {
loadCartFromStorage();
});
useEffect(() => {
Taro.getSystemInfo({
success: (res) => {

108
src/pages/index/BestSellers.tsx

@ -1,6 +1,7 @@
import {useEffect, useState} from "react";
import {Image} from '@nutui/nutui-react-taro'
import {Share} from '@nutui/icons-react-taro'
import {View, Text} from '@tarojs/components';
import Taro, {useShareAppMessage, useShareTimeline} from "@tarojs/taro";
import {ShopGoods} from "@/api/shop/shopGoods/model";
import {pageShopGoods} from "@/api/shop/shopGoods";
@ -17,6 +18,42 @@ const BestSellers = () => {
})
}
// 处理分享点击
const handleShare = (item: ShopGoods) => {
setGoods(item);
// 显示分享选项菜单
Taro.showActionSheet({
itemList: ['分享给好友', '分享到朋友圈'],
success: (res) => {
if (res.tapIndex === 0) {
// 分享给好友 - 触发转发
Taro.showShareMenu({
withShareTicket: true,
success: () => {
// 提示用户点击右上角分享
Taro.showToast({
title: '请点击右上角分享给好友',
icon: 'none',
duration: 2000
});
}
});
} else if (res.tapIndex === 1) {
// 分享到朋友圈
Taro.showToast({
title: '请点击右上角分享到朋友圈',
icon: 'none',
duration: 2000
});
}
},
fail: (err) => {
console.log('显示分享菜单失败', err);
}
});
}
useEffect(() => {
reload()
}, [])
@ -57,52 +94,47 @@ const BestSellers = () => {
return (
<>
<div className={'py-3'}>
<div className={'flex flex-col justify-between items-center rounded-lg px-2'}>
<View className={'py-3'}>
<View className={'flex flex-col justify-between items-center rounded-lg px-2'}>
{list?.map((item, index) => {
return (
<div key={index} className={'flex flex-col rounded-lg bg-white shadow-sm w-full mb-5'}>
<View key={index} className={'flex flex-col rounded-lg bg-white shadow-sm w-full mb-5'}>
<Image src={item.image} mode={'aspectFit'} lazyLoad={false}
radius="10px 10px 0 0" height="180"
onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}/>
<div className={'flex flex-col p-2 rounded-lg'}>
<div>
<div className={'car-no text-sm'}>{item.name}</div>
<div className={'flex justify-between text-xs py-1'}>
<span className={'text-orange-500'}>{item.comments}</span>
<span className={'text-gray-400'}> {item.sales}</span>
</div>
<div className={'flex justify-between items-center py-2'}>
<div className={'flex text-red-500 text-xl items-baseline'}>
<span className={'text-xs'}></span>
<span className={'font-bold text-2xl'}>{item.price}</span>
</div>
<div className={'buy-btn'}>
<div className={'cart-icon flex items-center'}>
<button
className={'flex flex-col justify-center items-center text-gray-500 px-3 gap-1 text-nowrap whitespace-nowrap'}
open-type="share"
onClick={() => {
setGoods(item)
}}
<View className={'flex flex-col p-2 rounded-lg'}>
<View>
<View className={'car-no text-sm'}>{item.name}</View>
<View className={'flex justify-between text-xs py-1'}>
<Text className={'text-orange-500'}>{item.comments}</Text>
<Text className={'text-gray-400'}> {item.sales}</Text>
</View>
<View className={'flex justify-between items-center py-2'}>
<View className={'flex text-red-500 text-xl items-baseline'}>
<Text className={'text-xs'}></Text>
<Text className={'font-bold text-2xl'}>{item.price}</Text>
</View>
<View className={'buy-btn'}>
<View className={'cart-icon flex items-center'}>
<View
className={'flex flex-col justify-center items-center text-white px-3 gap-1 text-nowrap whitespace-nowrap cursor-pointer'}
onClick={() => handleShare(item)}
>
<Share className={'text-white'} size={20}/>
</button>
{/*<Share size={20} className={'mx-4 mt-2'}*/}
{/* onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}/>*/}
</div>
<div className={'text-white pl-4 pr-5'}
onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}>
</div>
</div>
</div>
</div>
</div>
</div>
<Share size={20}/>
</View>
</View>
<Text className={'text-white pl-4 pr-5'}
onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}>
</Text>
</View>
</View>
</View>
</View>
</View>
)
})}
</div>
</div>
</View>
</View>
</>
)
}

4
src/pages/index/Header.tsx

@ -3,7 +3,7 @@ import Taro from '@tarojs/taro';
import {Button, Space} from '@nutui/nutui-react-taro'
import {TriangleDown} from '@nutui/icons-react-taro'
import {Popup, Avatar, NavBar} from '@nutui/nutui-react-taro'
import {getSiteInfo, getUserInfo, getWxOpenId} from "@/api/layout";
import {getShopInfo, getUserInfo, getWxOpenId} from "@/api/layout";
import {TenantId} from "@/config/app";
import {getOrganization} from "@/api/system/organization";
import {myUserVerify} from "@/api/system/userVerify";
@ -26,7 +26,7 @@ const Header = (props: any) => {
},
})
// 获取站点信息
getSiteInfo().then((data) => {
getShopInfo().then((data) => {
setConfig(data);
console.log(userInfo)
})

4
src/pages/index/index.tsx

@ -3,7 +3,7 @@ import BestSellers from './BestSellers';
import Taro from '@tarojs/taro';
import {useShareAppMessage, useShareTimeline} from "@tarojs/taro"
import {useEffect, useState} from "react";
import {getSiteInfo} from "@/api/layout";
import {getShopInfo} from "@/api/layout";
import {Sticky} from '@nutui/nutui-react-taro'
import Menu from "./Menu";
import Banner from "./Banner";
@ -84,7 +84,7 @@ function Home() {
useEffect(() => {
// 获取站点信息
getSiteInfo().then(() => {
getShopInfo().then(() => {
})
// Taro.getSetting:获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。

4
src/pages/order/order.scss

@ -0,0 +1,4 @@
// 订单页面样式
.order-page {
// 订单相关样式
}

3
src/pages/user/components/UserCard.tsx

@ -237,8 +237,7 @@ function UserCard() {
<span className={'text-sm text-gray-500'}></span>
<span className={'text-xl'}>{giftCount}</span>
</div>
<div className={'item flex justify-center flex-col items-center'}
onClick={() => navTo('/user/points/points', true)}>
<div className={'item flex justify-center flex-col items-center'}>
<span className={'text-sm text-gray-500'}></span>
<span className={'text-xl'}>{pointsCount}</span>
</div>

55
src/pages/user/components/UserCell.tsx

@ -1,6 +1,7 @@
import {Cell} from '@nutui/nutui-react-taro'
import navTo from "@/utils/common";
import Taro from '@tarojs/taro'
import {View,Text} from '@tarojs/components'
import {ArrowRight, ShieldCheck, LogisticsError, Location, Reward, Tips, Ask} from '@nutui/icons-react-taro'
const UserCell = () => {
@ -25,25 +26,25 @@ const UserCell = () => {
return (
<>
<div className={'px-4'}>
<View className={'px-4'}>
<Cell
className="nutui-cell-clickable"
style={{
backgroundImage: 'linear-gradient(to right bottom, #54a799, #177b73)',
}}
title={
<div style={{display: 'inline-flex', alignItems: 'center'}} onClick={() => navTo('/dealer/index', true)}>
<View style={{display: 'inline-flex', alignItems: 'center'}} onClick={() => navTo('/dealer/index', true)}>
<Reward className={'text-orange-100 '} size={16}/>
<span style={{fontSize: '16px'}} className={'pl-3 text-orange-100 font-medium'}></span>
<span className={'text-white opacity-80 pl-3'}></span>
</div>
<Text style={{fontSize: '16px'}} className={'pl-3 text-orange-100 font-medium'}></Text>
<Text className={'text-white opacity-80 pl-3'}></Text>
</View>
}
extra={<ArrowRight color="#cccccc" size={18}/>}
/>
<Cell.Group divider={true} description={
<div style={{display: 'inline-flex', alignItems: 'center'}}>
<span style={{marginTop: '12px'}}></span>
</div>
<View style={{display: 'inline-flex', alignItems: 'center'}}>
<Text style={{marginTop: '12px'}}></Text>
</View>
}>
<Cell
className="nutui-cell-clickable"
@ -51,10 +52,10 @@ const UserCell = () => {
display: 'none'
}}
title={
<div style={{display: 'inline-flex', alignItems: 'center'}}>
<View style={{display: 'inline-flex', alignItems: 'center'}}>
<LogisticsError size={16}/>
<span className={'pl-3 text-sm'}></span>
</div>
<Text className={'pl-3 text-sm'}></Text>
</View>
}
align="center"
extra={<ArrowRight color="#cccccc" size={18}/>}
@ -65,10 +66,10 @@ const UserCell = () => {
<Cell
className="nutui-cell-clickable"
title={
<div style={{display: 'inline-flex', alignItems: 'center'}}>
<View style={{display: 'inline-flex', alignItems: 'center'}}>
<Location size={16}/>
<span className={'pl-3 text-sm'}></span>
</div>
<Text className={'pl-3 text-sm'}></Text>
</View>
}
align="center"
extra={<ArrowRight color="#cccccc" size={18}/>}
@ -79,10 +80,10 @@ const UserCell = () => {
<Cell
className="nutui-cell-clickable"
title={
<div style={{display: 'inline-flex', alignItems: 'center'}}>
<View style={{display: 'inline-flex', alignItems: 'center'}}>
<ShieldCheck size={16}/>
<span className={'pl-3 text-sm'}></span>
</div>
<Text className={'pl-3 text-sm'}></Text>
</View>
}
align="center"
extra={<ArrowRight color="#cccccc" size={18}/>}
@ -93,10 +94,10 @@ const UserCell = () => {
<Cell
className="nutui-cell-clickable"
title={
<div style={{display: 'inline-flex', alignItems: 'center'}}>
<View style={{display: 'inline-flex', alignItems: 'center'}}>
<Ask size={16}/>
<span className={'pl-3 text-sm'}></span>
</div>
<Text className={'pl-3 text-sm'}></Text>
</View>
}
align="center"
extra={<ArrowRight color="#cccccc" size={18}/>}
@ -107,10 +108,10 @@ const UserCell = () => {
<Cell
className="nutui-cell-clickable"
title={
<div style={{display: 'inline-flex', alignItems: 'center'}}>
<View style={{display: 'inline-flex', alignItems: 'center'}}>
<Tips size={16}/>
<span className={'pl-3 text-sm'}></span>
</div>
<Text className={'pl-3 text-sm'}></Text>
</View>
}
align="center"
extra={<ArrowRight color="#cccccc" size={18}/>}
@ -120,9 +121,9 @@ const UserCell = () => {
/>
</Cell.Group>
<Cell.Group divider={true} description={
<div style={{display: 'inline-flex', alignItems: 'center'}}>
<span style={{marginTop: '12px'}}></span>
</div>
<View style={{display: 'inline-flex', alignItems: 'center'}}>
<Text style={{marginTop: '12px'}}></Text>
</View>
}>
<Cell
className="nutui-cell-clickable"
@ -139,7 +140,7 @@ const UserCell = () => {
onClick={onLogout}
/>
</Cell.Group>
</div>
</View>
</>
)
}

23
src/user/coupon/index.tsx

@ -3,8 +3,8 @@ import Taro, {useDidShow} from '@tarojs/taro'
import {Button, Empty, ConfigProvider, SearchBar, InfiniteLoading, Loading, PullToRefresh, Tabs, TabPane} from '@nutui/nutui-react-taro'
import {Plus, Filter} from '@nutui/icons-react-taro'
import {View} from '@tarojs/components'
import {ShopCoupon} from "@/api/shop/shopCoupon/model";
import {pageShopCoupon} from "@/api/shop/shopCoupon";
import {ShopUserCoupon} from "@/api/shop/shopUserCoupon/model";
import {pageShopUserCoupon} from "@/api/shop/shopUserCoupon";
import CouponList from "@/components/CouponList";
import CouponStats from "@/components/CouponStats";
import CouponGuide from "@/components/CouponGuide";
@ -14,7 +14,7 @@ import {CouponCardProps} from "@/components/CouponCard";
import dayjs from "dayjs";
const CouponManage = () => {
const [list, setList] = useState<ShopCoupon[]>([])
const [list, setList] = useState<ShopUserCoupon[]>([])
const [loading, setLoading] = useState(false)
const [hasMore, setHasMore] = useState(true)
const [searchValue, setSearchValue] = useState('')
@ -63,7 +63,7 @@ const CouponManage = () => {
try {
const currentPage = isRefresh ? 1 : page
const statusFilter = getStatusFilter()
const res = await pageShopCoupon({
const res = await pageShopUserCoupon({
page: currentPage,
limit: 10,
keywords: searchValue,
@ -127,7 +127,7 @@ const CouponManage = () => {
}
// 转换优惠券数据为CouponCard组件所需格式
const transformCouponData = (coupon: ShopCoupon): CouponCardProps => {
const transformCouponData = (coupon: ShopUserCoupon): CouponCardProps => {
// 判断优惠券状态
let status: 0 | 1 | 2 = 0 // 默认未使用
if (coupon.isExpire === 1) {
@ -176,7 +176,7 @@ const CouponManage = () => {
}
// 使用优惠券
const handleUseCoupon = (coupon: ShopCoupon) => {
const handleUseCoupon = (coupon: ShopUserCoupon) => {
Taro.showModal({
title: '使用优惠券',
content: `确定要使用"${coupon.name}"吗?`,
@ -201,7 +201,7 @@ const CouponManage = () => {
}
// 显示优惠券详情
const showCouponDetail = (coupon: ShopCoupon) => {
const showCouponDetail = (coupon: ShopUserCoupon) => {
// 跳转到优惠券详情页
Taro.navigateTo({
url: `/user/coupon/detail?id=${coupon.id}`
@ -213,9 +213,9 @@ const CouponManage = () => {
try {
// 并行获取各状态的优惠券数量
const [availableRes, usedRes, expiredRes] = await Promise.all([
pageShopCoupon({ page: 1, limit: 1, status: 0, isExpire: 0 }),
pageShopCoupon({ page: 1, limit: 1, status: 1 }),
pageShopCoupon({ page: 1, limit: 1, isExpire: 1 })
pageShopUserCoupon({ page: 1, limit: 1, status: 0, isExpire: 0 }),
pageShopUserCoupon({ page: 1, limit: 1, status: 1 }),
pageShopUserCoupon({ page: 1, limit: 1, isExpire: 1 })
])
setStats({
@ -248,7 +248,7 @@ const CouponManage = () => {
const checkExpiringSoonCoupons = async () => {
try {
// 获取即将过期的优惠券(3天内过期)
const res = await pageShopCoupon({
const res = await pageShopUserCoupon({
page: 1,
limit: 50,
status: 0, // 未使用
@ -277,6 +277,7 @@ const CouponManage = () => {
.sort((a, b) => a.daysLeft - b.daysLeft)
if (expiringSoon.length > 0) {
// @ts-ignore
setExpiringSoonCoupons(expiringSoon)
// 延迟显示提醒,避免与页面加载冲突
setTimeout(() => {

Loading…
Cancel
Save