forked from gxwebsoft/mp-10550
feat(home): 更新首页配置和界面展示
- 修改开发环境API基础URL地址 - 移除门店选择相关功能组件和逻辑 - 调整页面背景渐变色和字体大小 - 优化轮播图触摸操作支持 - 更新分享标题为用户专属推荐 - 调整商品分类显示,隐藏部分分类入口 - 移除领券中心入口 - 简化配送时间选择,只选择日期不选择具体时间 - 移除门店选择界面元素 - 调整时间选择器为日期模式并修正时间格式化逻辑
This commit is contained in:
@@ -2,8 +2,8 @@
|
|||||||
export const ENV_CONFIG = {
|
export const ENV_CONFIG = {
|
||||||
// 开发环境
|
// 开发环境
|
||||||
development: {
|
development: {
|
||||||
API_BASE_URL: 'http://127.0.0.1:9200/api',
|
// API_BASE_URL: 'http://127.0.0.1:9200/api',
|
||||||
// API_BASE_URL: 'https://mp-api.websoft.top/api',
|
API_BASE_URL: 'https://mp-api.websoft.top/api',
|
||||||
APP_NAME: '开发环境',
|
APP_NAME: '开发环境',
|
||||||
DEBUG: 'true',
|
DEBUG: 'true',
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
import {useEffect, useState} from "react";
|
import {useEffect, useState} from "react";
|
||||||
import Taro from '@tarojs/taro';
|
import Taro from '@tarojs/taro';
|
||||||
import {Button, Sticky, Popup, Cell, CellGroup} from '@nutui/nutui-react-taro'
|
import {Button, Sticky, Popup, Cell, CellGroup} from '@nutui/nutui-react-taro'
|
||||||
import {TriangleDown} from '@nutui/icons-react-taro'
|
// import {TriangleDown} from '@nutui/icons-react-taro'
|
||||||
import {Avatar, NavBar} from '@nutui/nutui-react-taro'
|
import { NavBar} from '@nutui/nutui-react-taro'
|
||||||
import {getUserInfo, getWxOpenId} from "@/api/layout";
|
import {getUserInfo, getWxOpenId} from "@/api/layout";
|
||||||
import {TenantId, TenantName} from "@/config/app";
|
import {TenantId, TenantName} from "@/config/app";
|
||||||
import {getOrganization} from "@/api/system/organization";
|
import {getOrganization} from "@/api/system/organization";
|
||||||
import {myUserVerify} from "@/api/system/userVerify";
|
import {myUserVerify} from "@/api/system/userVerify";
|
||||||
import { useShopInfo } from '@/hooks/useShopInfo';
|
// import { useShopInfo } from '@/hooks/useShopInfo';
|
||||||
import {handleInviteRelation, getStoredInviteParams} from "@/utils/invite";
|
import {handleInviteRelation, getStoredInviteParams} from "@/utils/invite";
|
||||||
import {View,Text} from '@tarojs/components'
|
import {View,Text} from '@tarojs/components'
|
||||||
import MySearch from "./MySearch";
|
import MySearch from "./MySearch";
|
||||||
@@ -19,9 +19,9 @@ import {getSelectedStoreFromStorage, saveSelectedStoreToStorage} from "@/utils/s
|
|||||||
|
|
||||||
const Header = (_: any) => {
|
const Header = (_: any) => {
|
||||||
// 使用新的useShopInfo Hook
|
// 使用新的useShopInfo Hook
|
||||||
const {
|
// const {
|
||||||
getWebsiteLogo
|
// getWebsiteLogo
|
||||||
} = useShopInfo();
|
// } = useShopInfo();
|
||||||
|
|
||||||
const [IsLogin, setIsLogin] = useState<boolean>(true)
|
const [IsLogin, setIsLogin] = useState<boolean>(true)
|
||||||
const [statusBarHeight, setStatusBarHeight] = useState<number>()
|
const [statusBarHeight, setStatusBarHeight] = useState<number>()
|
||||||
@@ -335,21 +335,21 @@ const Header = (_: any) => {
|
|||||||
}}
|
}}
|
||||||
onBackClick={() => {
|
onBackClick={() => {
|
||||||
}}
|
}}
|
||||||
left={
|
// left={
|
||||||
<View
|
// <View
|
||||||
style={{display: 'flex', alignItems: 'center', gap: '8px'}}
|
// style={{display: 'flex', alignItems: 'center', gap: '8px'}}
|
||||||
onClick={() => setStorePopupVisible(true)}
|
// onClick={() => setStorePopupVisible(true)}
|
||||||
>
|
// >
|
||||||
<Avatar
|
// <Avatar
|
||||||
size="22"
|
// size="22"
|
||||||
src={getWebsiteLogo()}
|
// src={getWebsiteLogo()}
|
||||||
/>
|
// />
|
||||||
<Text className={'text-white'}>
|
// <Text className={'text-white'}>
|
||||||
{selectedStore?.name || '请选择门店'}
|
// {selectedStore?.name || '请选择门店'}
|
||||||
</Text>
|
// </Text>
|
||||||
<TriangleDown className={'text-white'} size={9}/>
|
// <TriangleDown className={'text-white'} size={9}/>
|
||||||
</View>
|
// </View>
|
||||||
}
|
// }
|
||||||
right={
|
right={
|
||||||
!IsLogin ? (
|
!IsLogin ? (
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@@ -177,7 +177,7 @@ page {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 18rpx 20rpx;
|
padding: 18rpx 20rpx;
|
||||||
background: linear-gradient(90deg, #22d64a 0%, #7df4b0 100%);
|
background: linear-gradient(90deg, #22d64a 0%, #2fa560 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ticket-card__title {
|
.ticket-card__title {
|
||||||
@@ -188,7 +188,7 @@ page {
|
|||||||
|
|
||||||
.ticket-card__count {
|
.ticket-card__count {
|
||||||
color: rgba(255, 255, 255, 0.92);
|
color: rgba(255, 255, 255, 0.92);
|
||||||
font-size: 24rpx;
|
font-size: 28rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ticket-card__countNum {
|
.ticket-card__countNum {
|
||||||
@@ -392,20 +392,20 @@ page {
|
|||||||
/* 轮播图容器样式,确保支持两种滑动操作 */
|
/* 轮播图容器样式,确保支持两种滑动操作 */
|
||||||
.banner-swiper-container {
|
.banner-swiper-container {
|
||||||
touch-action: pan-y !important; /* 允许垂直滑动 */
|
touch-action: pan-y !important; /* 允许垂直滑动 */
|
||||||
|
|
||||||
.nut-swiper {
|
.nut-swiper {
|
||||||
touch-action: pan-y !important; /* 允许垂直滑动 */
|
touch-action: pan-y !important; /* 允许垂直滑动 */
|
||||||
|
|
||||||
.nut-swiper-item {
|
.nut-swiper-item {
|
||||||
touch-action: pan-x pan-y !important; /* 允许水平和垂直滑动 */
|
touch-action: pan-x pan-y !important; /* 允许水平和垂直滑动 */
|
||||||
|
|
||||||
image {
|
image {
|
||||||
pointer-events: auto; /* 确保图片点击事件正常 */
|
pointer-events: auto; /* 确保图片点击事件正常 */
|
||||||
touch-action: manipulation; /* 优化触摸操作 */
|
touch-action: manipulation; /* 优化触摸操作 */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 为Swiper容器添加特殊处理 */
|
/* 为Swiper容器添加特殊处理 */
|
||||||
.nut-swiper--horizontal {
|
.nut-swiper--horizontal {
|
||||||
touch-action: pan-y !important; /* 允许垂直滑动 */
|
touch-action: pan-y !important; /* 允许垂直滑动 */
|
||||||
@@ -422,7 +422,7 @@ page {
|
|||||||
/* 为Swiper添加更精确的触摸控制 */
|
/* 为Swiper添加更精确的触摸控制 */
|
||||||
.nut-swiper {
|
.nut-swiper {
|
||||||
touch-action: pan-y !important;
|
touch-action: pan-y !important;
|
||||||
|
|
||||||
.nut-swiper-inner {
|
.nut-swiper-inner {
|
||||||
touch-action: pan-x pan-y !important;
|
touch-action: pan-x pan-y !important;
|
||||||
}
|
}
|
||||||
@@ -431,7 +431,7 @@ page {
|
|||||||
/* 自定义Swiper样式 */
|
/* 自定义Swiper样式 */
|
||||||
.custom-swiper {
|
.custom-swiper {
|
||||||
touch-action: pan-y !important;
|
touch-action: pan-y !important;
|
||||||
|
|
||||||
.nut-swiper-item {
|
.nut-swiper-item {
|
||||||
touch-action: pan-x pan-y !important;
|
touch-action: pan-x pan-y !important;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import Banner from './Banner'
|
|||||||
import Taro, { useDidShow, useShareAppMessage } from '@tarojs/taro'
|
import Taro, { useDidShow, useShareAppMessage } from '@tarojs/taro'
|
||||||
import { View, Text, Image, ScrollView } from '@tarojs/components'
|
import { View, Text, Image, ScrollView } from '@tarojs/components'
|
||||||
import { useEffect, useMemo, useState, type ReactNode } from 'react'
|
import { useEffect, useMemo, useState, type ReactNode } from 'react'
|
||||||
import { Cart, Coupon, Gift, Ticket } from '@nutui/icons-react-taro'
|
import { Cart, Gift, Ticket } from '@nutui/icons-react-taro'
|
||||||
import { getShopInfo } from '@/api/layout'
|
import { getShopInfo } from '@/api/layout'
|
||||||
import { checkAndHandleInviteRelation, hasPendingInvite } from '@/utils/invite'
|
import { checkAndHandleInviteRelation, hasPendingInvite } from '@/utils/invite'
|
||||||
import { pageShopGoods } from '@/api/shop/shopGoods'
|
import { pageShopGoods } from '@/api/shop/shopGoods'
|
||||||
@@ -21,7 +21,7 @@ function Home() {
|
|||||||
const userId = Taro.getStorageSync('UserId');
|
const userId = Taro.getStorageSync('UserId');
|
||||||
|
|
||||||
return {
|
return {
|
||||||
title: '🏠 首页 🏠',
|
title: userId + '超值推荐',
|
||||||
path: userId ? `/pages/index/index?inviter=${userId}&source=share&t=${Date.now()}` : `/pages/index/index`,
|
path: userId ? `/pages/index/index?inviter=${userId}&source=share&t=${Date.now()}` : `/pages/index/index`,
|
||||||
success: function () {
|
success: function () {
|
||||||
console.log('首页分享成功');
|
console.log('首页分享成功');
|
||||||
@@ -174,9 +174,9 @@ function Home() {
|
|||||||
() => [
|
() => [
|
||||||
{ key: 'recommend', title: '推荐', params: { recommend: 1 } },
|
{ key: 'recommend', title: '推荐', params: { recommend: 1 } },
|
||||||
{ key: '4476', title: '桶装水', params: { categoryId: 4476 } },
|
{ key: '4476', title: '桶装水', params: { categoryId: 4476 } },
|
||||||
{ key: '4556', title: '优惠组合', params: { categoryId: 4556 } },
|
{ key: '4556', title: '水票套餐', params: { categoryId: 4556 } },
|
||||||
{ key: '4557', title: '购机套餐', params: { categoryId: 4557 } },
|
// { key: '4557', title: '购机套餐', params: { categoryId: 4557 } },
|
||||||
{ key: '4477', title: '饮水设备', params: { categoryId: 4477 } },
|
// { key: '4477', title: '饮水设备', params: { categoryId: 4477 } },
|
||||||
],
|
],
|
||||||
[]
|
[]
|
||||||
)
|
)
|
||||||
@@ -215,12 +215,12 @@ function Home() {
|
|||||||
icon: <Gift size={30} />,
|
icon: <Gift size={30} />,
|
||||||
onClick: () => Taro.navigateTo({ url: '/dealer/qrcode/index' }),
|
onClick: () => Taro.navigateTo({ url: '/dealer/qrcode/index' }),
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
key: 'coupon',
|
// key: 'coupon',
|
||||||
title: '领券中心',
|
// title: '领券中心',
|
||||||
icon: <Coupon size={30} />,
|
// icon: <Coupon size={30} />,
|
||||||
onClick: () => Taro.navigateTo({ url: '/coupon/index' }),
|
// onClick: () => Taro.navigateTo({ url: '/coupon/index' }),
|
||||||
},
|
// },
|
||||||
],
|
],
|
||||||
[]
|
[]
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ import {
|
|||||||
Popup,
|
Popup,
|
||||||
Space
|
Space
|
||||||
} from '@nutui/nutui-react-taro'
|
} from '@nutui/nutui-react-taro'
|
||||||
import { ArrowRight, Location, Shop, Ticket } from '@nutui/icons-react-taro'
|
import { ArrowRight, Location, Ticket } from '@nutui/icons-react-taro'
|
||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
import type { ShopGoods } from '@/api/shop/shopGoods/model'
|
import type { ShopGoods } from '@/api/shop/shopGoods/model'
|
||||||
import { getShopGoods } from '@/api/shop/shopGoods'
|
import { getShopGoods } from '@/api/shop/shopGoods'
|
||||||
@@ -35,7 +35,8 @@ const OrderConfirm = () => {
|
|||||||
const [address, setAddress] = useState<ShopUserAddress>()
|
const [address, setAddress] = useState<ShopUserAddress>()
|
||||||
const [quantity, setQuantity] = useState<number>(MIN_START_QTY)
|
const [quantity, setQuantity] = useState<number>(MIN_START_QTY)
|
||||||
const [orderRemark, setOrderRemark] = useState<string>('')
|
const [orderRemark, setOrderRemark] = useState<string>('')
|
||||||
const [sendTime, setSendTime] = useState<Date>(new Date())
|
// Delivery date only (no hour/min selection).
|
||||||
|
const [sendTime, setSendTime] = useState<Date>(() => dayjs().startOf('day').toDate())
|
||||||
const [sendTimePickerVisible, setSendTimePickerVisible] = useState(false)
|
const [sendTimePickerVisible, setSendTimePickerVisible] = useState(false)
|
||||||
const [loading, setLoading] = useState<boolean>(true)
|
const [loading, setLoading] = useState<boolean>(true)
|
||||||
const [error, setError] = useState<string>('')
|
const [error, setError] = useState<string>('')
|
||||||
@@ -119,7 +120,7 @@ const OrderConfirm = () => {
|
|||||||
}, [quantity, maxQuantity, canStartOrder])
|
}, [quantity, maxQuantity, canStartOrder])
|
||||||
|
|
||||||
const sendTimeText = useMemo(() => {
|
const sendTimeText = useMemo(() => {
|
||||||
return dayjs(sendTime).format('YYYY-MM-DD HH:mm')
|
return dayjs(sendTime).format('YYYY-MM-DD')
|
||||||
}, [sendTime])
|
}, [sendTime])
|
||||||
|
|
||||||
const loadStores = async () => {
|
const loadStores = async () => {
|
||||||
@@ -137,6 +138,7 @@ const OrderConfirm = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
const openStorePopup = async () => {
|
const openStorePopup = async () => {
|
||||||
setStorePopupVisible(true)
|
setStorePopupVisible(true)
|
||||||
if (!stores.length) {
|
if (!stores.length) {
|
||||||
@@ -239,7 +241,7 @@ const OrderConfirm = () => {
|
|||||||
addressId: address.id,
|
addressId: address.id,
|
||||||
totalNum: finalQty,
|
totalNum: finalQty,
|
||||||
buyerRemarks: orderRemark,
|
buyerRemarks: orderRemark,
|
||||||
sendTime: dayjs(sendTime).format('YYYY-MM-DD HH:mm:ss'),
|
sendTime: dayjs(sendTime).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
||||||
// Backend may take userId from token; pass-through is harmless if backend ignores it.
|
// Backend may take userId from token; pass-through is harmless if backend ignores it.
|
||||||
userId,
|
userId,
|
||||||
comments: goods.name ? `立即送水:${goods.name}` : '立即送水'
|
comments: goods.name ? `立即送水:${goods.name}` : '立即送水'
|
||||||
@@ -351,25 +353,25 @@ const OrderConfirm = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={'order-confirm-page'}>
|
<div className={'order-confirm-page'}>
|
||||||
<CellGroup>
|
{/*<CellGroup>*/}
|
||||||
<Cell
|
{/* <Cell*/}
|
||||||
title={(
|
{/* title={(*/}
|
||||||
<View className="flex items-center gap-2">
|
{/* <View className="flex items-center gap-2">*/}
|
||||||
<Shop className={'text-gray-500'}/>
|
{/* <Shop className={'text-gray-500'}/>*/}
|
||||||
<Text>选择门店</Text>
|
{/* <Text>选择门店</Text>*/}
|
||||||
</View>
|
{/* </View>*/}
|
||||||
)}
|
{/* )}*/}
|
||||||
extra={(
|
{/* extra={(*/}
|
||||||
<View className={'flex items-center gap-2'}>
|
{/* <View className={'flex items-center gap-2'}>*/}
|
||||||
<View className={'text-gray-900'}>
|
{/* <View className={'text-gray-900'}>*/}
|
||||||
{selectedStore?.name || '请选择门店'}
|
{/* {selectedStore?.name || '请选择门店'}*/}
|
||||||
</View>
|
{/* </View>*/}
|
||||||
<ArrowRight className={'text-gray-400'} size={14}/>
|
{/* <ArrowRight className={'text-gray-400'} size={14}/>*/}
|
||||||
</View>
|
{/* </View>*/}
|
||||||
)}
|
{/* )}*/}
|
||||||
onClick={openStorePopup}
|
{/* onClick={openStorePopup}*/}
|
||||||
/>
|
{/* />*/}
|
||||||
</CellGroup>
|
{/*</CellGroup>*/}
|
||||||
<CellGroup>
|
<CellGroup>
|
||||||
{
|
{
|
||||||
address && (
|
address && (
|
||||||
@@ -587,15 +589,15 @@ const OrderConfirm = () => {
|
|||||||
<DatePicker
|
<DatePicker
|
||||||
visible={sendTimePickerVisible}
|
visible={sendTimePickerVisible}
|
||||||
title="选择配送时间"
|
title="选择配送时间"
|
||||||
type="datetime"
|
type="date"
|
||||||
startDate={new Date()}
|
startDate={dayjs().startOf('day').toDate()}
|
||||||
endDate={dayjs().add(30, 'day').toDate()}
|
endDate={dayjs().add(30, 'day').toDate()}
|
||||||
value={sendTime}
|
value={sendTime}
|
||||||
onClose={() => setSendTimePickerVisible(false)}
|
onClose={() => setSendTimePickerVisible(false)}
|
||||||
onCancel={() => setSendTimePickerVisible(false)}
|
onCancel={() => setSendTimePickerVisible(false)}
|
||||||
onConfirm={(_options, selectedValue) => {
|
onConfirm={(_options, selectedValue) => {
|
||||||
const [y, m, d, hh, mm] = (selectedValue || []).map(v => Number(v))
|
const [y, m, d] = (selectedValue || []).map(v => Number(v))
|
||||||
const next = new Date(y, (m || 1) - 1, d || 1, hh || 0, mm || 0)
|
const next = new Date(y, (m || 1) - 1, d || 1, 0, 0, 0)
|
||||||
setSendTime(next)
|
setSendTime(next)
|
||||||
setSendTimePickerVisible(false)
|
setSendTimePickerVisible(false)
|
||||||
}}
|
}}
|
||||||
|
|||||||
Reference in New Issue
Block a user