Dingdong_client/screens/Detail/GoodsDetailScreen.jsx

import * as WebBrowser from 'expo-web-browser';
import * as React from 'react';
import { Dimensions } from 'react-native';
import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';
import { ScrollView } from 'react-native-gesture-handler';

import useModel from 'flooks';

import { useRequest } from '@umijs/hooks';
import User from '../../flooks/User'; // detail模块通用方法

import Header from '../../components/Header';
import SvgIcon from '../../components/SvgIcon';
import CommentItem from './CommentCom';
import request from '../../Utils/RequestUtils';

const { width } = Dimensions.get('window');

export default function LinksScreen({ route }) {
  const { userInfo } = useModel(User, ['id']);

  const { params } = route;
  const { goodsId } = params;

  const { data } = useRequest(`/goods/get/${goodsId}`, {
    initialData: () => {
      return {};
    },
    refreshDeps: [goodsId],
  });
  const appraisal = useRequest(
    () => {
      return request
        .get(`/appraisal/goods?goodsId=${goodsId}`)
        .then((res) => {
          return Promise.resolve(res);
        })
        .catch(() => {
          return Promise.resolve([]);
        });
    },
    {
      initialData: () => {
        return [];
      },
      refreshDeps: [goodsId],
    }
	);
	

  const {
    img,
    name,
    goodNum,
    badNum,
    monthSales,
    amount,
    discountAmount,
    introduction,
  } = data;

  return (
    <>
      <Header title="商品详情" />
      <ScrollView
        contentContainerStyle={{ flexGrow: 1, backgroundColor: '#eee' }}
      >
        <Image source={img} w={width} h={width} />

        <Div py={20} px={15} bg="white">
          <Text fontSize="xl" fontWeight="bold">
            {name}
          </Text>

          <Div row alignItems="center">
            <Div row alignItems="center" mr={10}>
              <SvgIcon name="zan" type="primary" width={18} height={18} />
              <Text fontSize="sm" color="brand500" ml={3} textAlign="left">
                {goodNum || 0}
              </Text>
            </Div>
            <Div row alignItems="center" mr={10}>
              <SvgIcon name="zan" Flip color="#000" width={18} height={18} />
              <Text fontSize="sm" color="gray300" ml={3} textAlign="left">
                {badNum || 0}
              </Text>
            </Div>
            <Div row alignItems="center">
              <Text size="c1" color="gray300" textAlign="left">
                月售：
                {monthSales || 0}
              </Text>
            </Div>
          </Div>

          <Div
            row
            alignItems="flex-end"
            py={15}
            borderBottomWidth={1}
            borderBottomColor="gray100"
          >
            <Text fontSize="2xl" color="red500">
              {discountAmount || amount}
            </Text>
            {!!discountAmount && (
              <Text
                fontSize="sm"
                color="gray300"
                textDecorLine="line-through"
                textDecorStyle="solid"
                textDecorColor="gray300"
                mb={2}
                ml={5}
              >
                ¥{amount}
              </Text>
            )}
          </Div>

          <Text color="gray300" fontSize="sm" pt={12}>
            {introduction}
          </Text>
        </Div>

        <Div bg="gray100">
          <Text fontSize="xl" pt={22} pb={12} px={17}>
            商品评价
          </Text>

          {appraisal.data.length === 0 ? (
            <Div px={10} py={20} bg="gray100">
              <Text color="gray300" textAlign="center">
                暂无数据
              </Text>
            </Div>
          ) : (
            <Div bg="white" py={20}>
              {appraisal.data.map((item, index) => {
                return <CommentItem info={item} key={index} />;
              })}
            </Div>
          )}
        </Div>
      </ScrollView>
    </>
  );
}