water-sys/app/screens/function/BrowseHistoryScreen.tsx

import React, { useState } from "react";
import {
  View,
  Text,
  FlatList,
  Image,
  TouchableOpacity,
  Platform,
  StyleSheet,
} from "react-native";
import BackIcon from "../../components/BackIcon";
import fontSize from "../../utils/fontsizeUtils";
import { useNavigation } from "@react-navigation/native";
import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';
import widthUtils from "../../utils/widthUtils";

const browseData = [
  {
    id: "1",
    name: "商品名称示例",
    time: "14:32",
    price: 199.0,
    image: "https://via.placeholder.com/60",
  },
  {
    id: "2",
    name: "另一商品示例",
    time: "09:15",
    price: 89.9,
    image: "https://via.placeholder.com/60",
  },
  
];

export function BrowseHistoryScreen() {
  const navigation = useNavigation();
  const [date, setDate] = useState(new Date());

  const [show, setShow] = useState(false);



  const onChange = (event: DateTimePickerEvent, selectedDate?: Date) => {
    setShow(Platform.OS === "ios"); // iOS 会保持显示
    if (selectedDate) {
      setDate(selectedDate);
    }
  };




  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity
          onPress={() => navigation.goBack()}
          style={styles.backButton}
        >
          <BackIcon size={fontSize(22)} />
        </TouchableOpacity>
        <Text style={styles.title}>浏览历史</Text>
        <View style={styles.placeholder} />
      </View>

      <TouchableOpacity
        style={styles.dateInput}
        onPress={() => setShow(true)}
      >
        <Text style={styles.dateText}>筛选浏览记录</Text>
      </TouchableOpacity>

      {show && (
        <DateTimePicker
          value={date}
          mode="date"
          is24Hour={true}
          display="default"
          onChange={onChange}
        />
      )}

  
      
      <FlatList
        data={browseData}
        keyExtractor={(item) => item.id}
        contentContainerStyle={styles.list}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Image source={{ uri: item.image }} style={styles.image} />
            <View style={styles.info}>
              <View style={styles.row}>
                <Text style={styles.name}>{item.name}</Text>
                <Text style={styles.price}>¥{item.price.toFixed(2)}</Text>
              </View>
              <Text style={styles.time}>浏览时间：{item.time}</Text>
            </View>
          </View>
        )}
        ListEmptyComponent={
          <Text style={styles.empty}>当前日期没有浏览记录</Text>
        }
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#f8f8f8",
    flex: 1,
  },
  header: {
    paddingInline: 19,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    backgroundColor: "white",
    width: "100%",
    paddingVertical: 15,
    borderBottomWidth: 1,
    borderBottomColor: "#e9ecef",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  backButton: {
    width: widthUtils(24,24).width,
  },
  title: {
    fontSize: fontSize(20),
    fontWeight: "600",
    flex: 1,
    textAlign: "center",
  },
  placeholder: {
    width: widthUtils(24,24).width,
  },

  dateInput: {
    padding: 20,
    backgroundColor: "#fff",
    marginBottom: 16,
  },
  dateText: {
    fontSize: 16,
    color: "#333",
  },
  list: {
    gap: 12,
    paddingHorizontal: 20,
  },
  item: {
    flexDirection: "row",
    backgroundColor: "#fff",
    padding: 12,
    borderRadius: 8,
    gap: 12,
  },
  image: {
    width: widthUtils(60,60).width,
    height: widthUtils(60,60).height,
    borderRadius: 6,
    backgroundColor: "#eee",
  },
  info: {
    flex: 1,
    justifyContent: "center",
  },
  row: {
    flexDirection: "row",
    justifyContent: "space-between",
  },
  name: {
    fontSize: 16,
    fontWeight: "500",
    flex: 1,
  },
  price: {
    fontSize: 14,
    fontWeight: "bold",
    color: "#e60012",
    marginLeft: 8,
  },
  time: {
    fontSize: 12,
    color: "#888",
    marginTop: 4,
  },
  empty: {
    textAlign: "center",
    color: "#aaa",
    fontSize: 15,
    marginTop: 40,
  },
});