韩昌 / pet-consultation-veterinary-react-ts · 提交

转到一个项目

作者 韩昌
提交 4bc7f7daf48c1dbf7790b6c32d8a3d489d175565 1 个父辈 7d1e6ae3

70%

内嵌 并排对比
正在显示 52 个修改的文件 包含 1050 行增加 和 213 行删除
import hyRequest from "@/service";
import { Send_prescription_formType } from '@/types'
import hyrequest from "@/service";
import { Send_prescription_formType, PageListParamsType } from '@/types'
export const getTopBanner = () => hyRequest.get({ url: '/banner' })
// export const getTopBanner = () => hyrequest.get({ url: '/banner' })
// 公共
export const getSendMessage = (params: { phoneNum: string }) => hyRequest.get({ url: '/pet/login/sendMessage', params }) // 发送验证码
export const getMessageLogin = (params: any) => hyRequest.get({ url: '/pet/login/messageLogin', params }) // 验证码登录
export const updateSend_prescription_form = (params: Send_prescription_formType) => hyRequest.post({ url: '/veterinary/send_prescription_form', params }) // 发送处方单
export const getSendMessage = (params: { phoneNum: string }) => hyrequest.get({ url: '/pet/login/sendMessage', params }) // 发送验证码
export const getMessageLogin = (params: any) => hyrequest.get({ url: '/pet/login/messageLogin', params }) // 验证码登录
// 问诊及处方
export const getConsultation_information_list = (params: PageListParamsType) => hyrequest.get({ url: '/veterinary/consultation_information_list', params }) // 问诊订单列表
export const updateSend_prescription_form = (params: any) => hyrequest.post({ url: '/veterinary/send_prescription_form', params }) // 发送处方单
export const getPrescription_detail = (params: { id: string | number }) => hyrequest.get({ url: '/veterinary/prescription_detail', params }) // 处方单详情
export const getConsultation_information_detail = (params: { id: string | number }) => hyrequest.get({ url: '/veterinary/consultation_information_detail', params }) // 问诊订单详情
... ...
... ... @@ -15,49 +15,49 @@ body, textarea, select, input, button {
margin: 0 auto;
}
.sprite_01 {
background: url(../img/sprite_01.png) no-repeat 0 9999px;
}
// .sprite_01 {
// background: url(../img/sprite_01.png) no-repeat 0 9999px;
// }
.sprite_02 {
background: url(../img/sprite_02.png) no-repeat 0 9999px;
}
// .sprite_02 {
// background: url(../img/sprite_02.png) no-repeat 0 9999px;
// }
.sprite_cover {
background: url(../img/sprite_cover.png) no-repeat 0 9999px;
}
// .sprite_cover {
// background: url(../img/sprite_cover.png) no-repeat 0 9999px;
// }
.sprite_icon {
background: url(../img/sprite_icon.png) no-repeat 0 9999px;
}
// .sprite_icon {
// background: url(../img/sprite_icon.png) no-repeat 0 9999px;
// }
.sprite_icon2 {
background: url(../img/sprite_icon2.png) no-repeat 0 9999px;
}
// .sprite_icon2 {
// background: url(../img/sprite_icon2.png) no-repeat 0 9999px;
// }
.sprite_icon3 {
background: url(../img/sprite_icon3.png) no-repeat 0 9999px;
}
// .sprite_icon3 {
// background: url(../img/sprite_icon3.png) no-repeat 0 9999px;
// }
.sprite_button {
background: url(../img/sprite_button.png) no-repeat 0 9999px;
}
// .sprite_button {
// background: url(../img/sprite_button.png) no-repeat 0 9999px;
// }
.sprite_button2 {
background: url(../img/sprite_button2.png) no-repeat 0 9999px;
}
// .sprite_button2 {
// background: url(../img/sprite_button2.png) no-repeat 0 9999px;
// }
.sprite_table {
background: url(../img/sprite_table.png) no-repeat 0 9999px;
}
// .sprite_table {
// background: url(../img/sprite_table.png) no-repeat 0 9999px;
// }
.sprite_playbar {
background: url(../img/playbar_sprite.png) no-repeat 0 9999px;
}
// .sprite_playbar {
// background: url(../img/playbar_sprite.png) no-repeat 0 9999px;
// }
.sprite_playlist {
background: url(../img/playlist_sprite.png) no-repeat 0 9999px;
}
// .sprite_playlist {
// background: url(../img/playlist_sprite.png) no-repeat 0 9999px;
// }
.ant-message .ant-message-notice-content {
// position: fixed;
... ...
不能预览此文件类型
// service统一出口
import HYRequest from './request'
import { BASE_URL, TIME_OUT } from './request/config'
const hyRequest = new HYRequest({
baseURL: BASE_URL,
timeout: TIME_OUT,
headers: {
'X-Access-Token': localStorage.getItem('token') || ''
},
interceptors: {
requestInterceptor: (config) => {
return config
},
requestInterceptorCatch: (err) => {
return err
},
responseInterceptor: (res) => {
return res
},
responseInterceptorCatch: (err) => {
return err
}
}
})
export default hyRequest
... ...
// const BASE_URL = 'http://codercba.com:9002/'
const BASE_URL = 'http://192.168.10.63:8080/jeecg-boot'
// const BASE_URL = 'http://192.168.10.63:8080/jeecg-boot'
const BASE_URL = 'http://127.0.0.1:4523/m1/3332971-0-default/jeecg-boot' // mock
const TIME_OUT = 10000
... ...
import axios from 'axios'
import type { AxiosInstance } from 'axios'
import type { HYRequestInterceptors, HYRequestConfig } from './type'
const DEAFULT_LOADING = true
class HYRequest {
instance: AxiosInstance
interceptors?: HYRequestInterceptors
showLoading: boolean
constructor(config: HYRequestConfig) {
// 创建axios实例
this.instance = axios.create(config)
// 保存基本信息
this.showLoading = config.showLoading ?? DEAFULT_LOADING
this.interceptors = config.interceptors
// 使用拦截器
// 1.从config中取出的拦截器是对应的实例的拦截器
this.instance.interceptors.request.use(
// this.interceptors?.requestInterceptor,
this.interceptors?.requestInterceptorCatch
)
this.instance.interceptors.response.use(
this.interceptors?.responseInterceptor,
this.interceptors?.responseInterceptorCatch
)
// 2.添加所有的实例都有的拦截器
this.instance.interceptors.request.use(
(config) => {
return config
},
(err) => {
return err
}
)
this.instance.interceptors.response.use(
(res: any) => {
console.log(res, 'res')
// const data = res
// console.log(data, '请求数据')
// if (data.code === '404') {
// console.log('请求失败~, 错误信息')
// } else {
// return data
// }
return res
},
(err) => {
// 例子: 判断不同的HttpErrorCode显示不同的错误信息
if (err.response.status === 404) {
console.log('404的错误~')
}
return err
}
)
}
request<T = any>(config: HYRequestConfig<T>): Promise<T> {
return new Promise((resolve, reject) => {
// 1.单个请求对请求config的处理
if (config.interceptors?.requestInterceptor) {
config = config.interceptors.requestInterceptor(config)
}
// 2.判断是否需要显示loading
if (config.showLoading === false) {
this.showLoading = config.showLoading
}
this.instance
.request<any, T>(config)
.then((res) => {
// 1.单个请求对数据的处理
if (config.interceptors?.responseInterceptor) {
res = config.interceptors.responseInterceptor(res)
}
// 2.将showLoading设置true, 这样不会影响下一个请求
this.showLoading = DEAFULT_LOADING
// 3.将结果resolve返回出去
resolve(res)
})
.catch((err) => {
// 将showLoading设置true, 这样不会影响下一个请求
this.showLoading = DEAFULT_LOADING
reject(err)
return err
})
})
}
get<T = any>(config: HYRequestConfig<T>): Promise<T> {
return this.request<T>({ ...config, method: 'GET' })
}
post<T = any>(config: HYRequestConfig<T>): Promise<T> {
return this.request<T>({ ...config, method: 'POST' })
}
delete<T = any>(config: HYRequestConfig<T>): Promise<T> {
return this.request<T>({ ...config, method: 'DELETE' })
}
patch<T = any>(config: HYRequestConfig<T>): Promise<T> {
return this.request<T>({ ...config, method: 'PATCH' })
}
}
export default HYRequest
... ...
// const BASE_URL = 'http://codercba.com:9002/'
const BASE_URL = 'http://192.168.10.63:8080/jeecg-boot'
// const BASE_URL = 'http://127.0.0.1:4523/m1/3332971-0-default/jeecg-boot' // mock
export const TIME_OUT = 10000;
export { BASE_URL }
... ...
// service统一出口
import HYRequest from './request'
import { BASE_URL, TIME_OUT } from './request/config'
import { LStore } from "@/utils/store";
import { BASE_URL, TIME_OUT } from "./config";
import HYRequest from "./request";
const hyRequest = new HYRequest({
const hyrequest = new HYRequest({
baseURL: BASE_URL,
timeout: TIME_OUT,
headers: {
'X-Access-Token': localStorage.getItem('token') || ''
},
interceptors: {
requestInterceptor: (config) => {
requestSuccessFn(config) {
const token = LStore.get('token')
if (token && config.headers) {
config.headers['Content-Type'] = 'multipart/form-data;'
config.headers.token = token
config.headers['X-Access-Token'] = token
}
return config
},
requestInterceptorCatch: (err) => {
return err
},
responseInterceptor: (res) => {
return res
responseFailureFn(err) {
// console.log(err, '相应失败')
// return err
},
responseInterceptorCatch: (err) => {
return err
requestFailureFn(err) {
// console.log(err, '请求失败')
// return err
}
}
})
export default hyRequest
export default hyrequest
... ...
import axios from 'axios'
import type { AxiosInstance } from 'axios'
import type { HYRequestInterceptors, HYRequestConfig } from './type'
const DEAFULT_LOADING = true
import axios from "axios"
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
import type { HYRequestConfig } from './types'
// import router from "../../router"
/**
* 两个难点：
* 1. 拦截器进行精细控制
* > 全局拦截器
* > 实例拦截器
* > 单次请求拦截器
* 2. 响应结果的类型处理(泛型)
*/
class HYRequest {
instance: AxiosInstance
interceptors?: HYRequestInterceptors
showLoading: boolean
// request 实例 => axios 实例
constructor(config: HYRequestConfig) {
// 创建axios实例
this.instance = axios.create(config)
// 保存基本信息
this.showLoading = config.showLoading ?? DEAFULT_LOADING
this.interceptors = config.interceptors
// 使用拦截器
// 1.从config中取出的拦截器是对应的实例的拦截器
this.instance.interceptors.request.use(
// this.interceptors?.requestInterceptor,
this.interceptors?.requestInterceptorCatch
)
this.instance.interceptors.response.use(
this.interceptors?.responseInterceptor,
this.interceptors?.responseInterceptorCatch
)
// 2.添加所有的实例都有的拦截器
this.instance.interceptors.request.use(
(config) => {
return config
},
(err) => {
return err
// 每个 instance 实例都添加拦截器
this.instance.interceptors.request.use((config) => {
// loading/token
return config
}, err => {
console.log('全局请求失败的拦截', err)
return err
})
this.instance.interceptors.response.use(res => {
// console.log('全局相应成功的拦截')
return res.data
}, err => {
if (err.response.data.code === 401) {
// router.push('/login')
}
)
console.log('全局相应失败的拦截', err.response.data)
return err
})
this.instance.interceptors.response.use(
(res) => {
const data = res.data
if (data.returnCode === '-1001') {
console.log('请求失败~, 错误信息')
} else {
return data
}
},
(err) => {
// 例子: 判断不同的HttpErrorCode显示不同的错误信息
if (err.response.status === 404) {
console.log('404的错误~')
}
return err
}
)
// 针对特定的 hyRequest 实例添加拦截器
if (config.interceptors) {
this.instance.interceptors.request.use(
config?.interceptors.requestSuccessFn,
config?.interceptors.requestFailureFn
)
this.instance.interceptors.response.use(
config?.interceptors.responseSuccessFn,
config?.interceptors.responseFailureFn
)
}
}
request<T = any>(config: HYRequestConfig<T>): Promise<T> {
return new Promise((resolve, reject) => {
// 1.单个请求对请求config的处理
if (config.interceptors?.requestInterceptor) {
config = config.interceptors.requestInterceptor(config)
}
// 2.判断是否需要显示loading
if (config.showLoading === false) {
this.showLoading = config.showLoading
}
this.instance
.request<any, T>(config)
.then((res) => {
// 1.单个请求对数据的处理
if (config.interceptors?.responseInterceptor) {
res = config.interceptors.responseInterceptor(res)
}
// 2.将showLoading设置true, 这样不会影响下一个请求
this.showLoading = DEAFULT_LOADING
// 3.将结果resolve返回出去
resolve(res)
})
.catch((err) => {
// 将showLoading设置true, 这样不会影响下一个请求
this.showLoading = DEAFULT_LOADING
reject(err)
return err
})
request<T = any>(config: HYRequestConfig<T>) {
// 单次请求的成功拦截器
if (config.interceptors?.requestSuccessFn) {
config = config.interceptors.requestSuccessFn(config)
}
return new Promise<T>((resolve, reject) => {
this.instance.request<any, T>(config).then(res => {
// 单词响应的成功拦截器
if (config.interceptors?.responseSuccessFn) {
res = config.interceptors.responseSuccessFn(res)
}
resolve(res)
}).catch(err => {
reject(err)
})
})
}
get<T = any>(config: HYRequestConfig<T>): Promise<T> {
return this.request<T>({ ...config, method: 'GET' })
get<T = any>(config: HYRequestConfig<T>) {
return this.request({ ...config, method: "GET" })
}
post<T = any>(config: HYRequestConfig<T>): Promise<T> {
return this.request<T>({ ...config, method: 'POST' })
post<T = any>(config: HYRequestConfig<T>) {
return this.request({ ...config, method: "POST" })
}
delete<T = any>(config: HYRequestConfig<T>): Promise<T> {
return this.request<T>({ ...config, method: 'DELETE' })
delete<T = any>(config: HYRequestConfig<T>) {
return this.request({ ...config, method: "DELETE" })
}
patch<T = any>(config: HYRequestConfig<T>): Promise<T> {
return this.request<T>({ ...config, method: 'PATCH' })
patch<T = any>(config: HYRequestConfig<T>) {
return this.request({ ...config, method: "PATCH" })
}
}
... ...
import type { AxiosRequestConfig, AxiosResponse } from "axios"
/* eslint-disable */
interface HCInterceptors<T = AxiosResponse> {
requestSuccessFn?: (config: any) => any
requestFailureFn?: (err: any) => any
responseSuccessFn?: (res: T) => T
responseFailureFn?: (err: any) => any
}
// 针对 AxiosRequestConfig 接口进行扩展
export interface HYRequestConfig<T = AxiosResponse> extends AxiosRequestConfig {
interceptors?: HCInterceptors<T>
}
... ...
... ... @@ -11,7 +11,7 @@ const store = configureStore({
})
type GetStateFnType = typeof store.getState
type RootState = ReturnType<GetStateFnType>
export type RootState = ReturnType<GetStateFnType>
type DispatchType = typeof store.dispatch
// 拿到 redux 内定义的变量的类型
... ...
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { getTopBanner } from '@/api'
import { getConsultation_information_list, getConsultation_information_detail, getPrescription_detail } from '@/api'
import type { PageListParamsType, ConsultationOrderListItemType, PageListType, ConsultationOrderDetailType, PrescriptionDetailType } from '@/types'
import type { RootState } from '@/store'
export const fetchOrderDataAction = createAsyncThunk(
'fetchdata',
(payload, { dispatch }) => {
// 1.顶部的banners
getTopBanner().then((res: any) => {
dispatch(changeBannerAction(res.banners))
export const fetchOrderDataAction = createAsyncThunk<void, PageListParamsType>(
'fetchdata', (payload, { dispatch }) => {
console.log(payload, '接受的参数')
// 1.获取问诊订单列表
getConsultation_information_list(payload).then(({ result }: { result: PageListType<ConsultationOrderListItemType[]> }) => {
console.log(result, '问诊订单列表')
dispatch(changeConsultationOrderAction(result))
})
}
)
export const fetchConsultationOrderDetailAction = createAsyncThunk<void, { id: string | number }>(
'ConsultationOrderDetailType', (payload, { dispatch }) => {
// getConsultation_information_detail(payload).then(({ result }: { result: ConsultationOrderDetailType }) => {
dispatch(changeConsultationOrderDetailAction({}))
// })
}
)
return null
export const fetchPrescriptionDetailAction = createAsyncThunk<void, { id: string | number }>(
'PrescriptionDetail', (payload, { dispatch }) => {
// getPrescription_detail(payload).then(({ result }: { result: PrescriptionDetailType }) => {
dispatch(changePrescriptionDetailAction({}))
// })
}
)
... ... @@ -19,15 +36,23 @@ const orderSlice = createSlice({
count: 100,
message: 'hello Redux',
name: 'HachimanC',
bannersList: []
ConsultationOrderList: [],
ConsultationOrderDetailData: {},
PrescriptionDetailData: {}
},
reducers: {
changeBannerAction(state, { payload }) {
state.bannersList = payload
changeConsultationOrderAction(state, { payload }) {
state.ConsultationOrderList = payload
},
changeConsultationOrderDetailAction(state, { payload }) {
state.ConsultationOrderDetailData = payload
},
changePrescriptionDetailAction(state, { payload }) {
state.PrescriptionDetailData = payload
}
}
})
export default orderSlice.reducer
export const { changeBannerAction } = orderSlice.actions
export const { changeConsultationOrderAction, changeConsultationOrderDetailAction, changePrescriptionDetailAction } = orderSlice.actions
... ...
export * from './result'
export * from './params'
export * from './props'
... ...
... ... @@ -8,6 +8,7 @@ export interface Send_prescription_formType {
* 处方药
*/
drugList: DrugList[];
// drugList: any;
/**
* 问诊订单id
*/
... ... @@ -46,3 +47,18 @@ export interface DrugList {
num: string;
[property: string]: any;
}
export interface PageListParamsType {
/**
* 订单状态 20-待问诊 30-问诊中 40-问诊结束 50-已取消
*/
orderState?: number | string;
/**
* 页数
*/
pageNo: number | string;
/**
* 每页显示条数
*/
pageSize?: number | string;
[property: string]: any;
}
... ...
import type { FC, ReactNode } from 'react'
import type { Send_prescription_formType } from '@/types'
export interface SendPrescriptionPropsType {
children?: ReactNode
ref?: any
Send_prescription_formData: Send_prescription_formType
fileList: any,
setSend_prescription_formTypeData?: (e: any) => any
setFileList?: (e: any) => any
}
... ...
... ... @@ -55,3 +55,469 @@ export interface ConsultationOrderRecordsType {
orderState: number;
effect_award: number;
}
export interface ConsultationOrderListItemType {
/**
* 宠物年龄
*/
age?: number;
/**
* 处方单价格
*/
amount?: number;
/**
* 预计收入
*/
award?: number;
/**
* 洗澡频次1=一周一次（狗狗）2=洗澡频次不规律3=想起来才洗4=定期洗澡（猫猫）
*/
batheFrequency?: string;
/**
* 问诊状态 0-未开始 1-进行中 2-已结束
*/
consultationState?: number;
/**
* 问诊方式 10-快速问诊 21-专家图文语音问诊 22-专家视频问诊 23-专家电话问诊
*/
consultationWay: number;
/**
* 医生信息
*/
doctor: Doctor;
/**
* 处方药
*/
drugList?: DrugList[];
/**
* 实际收入
*/
effect_award?: number;
/**
* 喂养方式1=配方粮2=配方粮+零食3=只吃人食物4=自制犬猫粮
*/
feedType?: string;
/**
* 订单id
*/
id: string;
/**
* 症状图片
*/
image?: string[];
/**
* 宠物免疫情况1=已免疫2=未免疫3=免疫不全4=免疫不详
*/
immuneStatus?: string;
/**
* 是否为复诊0=否1=是
*/
isAgain?: number;
/**
* 是否绝育 0-否 1-是
*/
isSterilization?: number;
/**
* 订单编号
*/
order_no: string;
/**
* 订单状态 10=待支付 20-待问诊 30-进行中 40-已完成 50-已取消
*/
orderState?: number;
/**
* 应付金额
*/
payAmount: number;
/**
* 下单时间
*/
payTime: string;
/**
* 宠物品种
*/
petClass?: string;
/**
* 宠物id
*/
petId?: string;
/**
* 宠物名称
*/
petName?: string;
/**
* 宠物性别 0-母 1-公
*/
petSex?: number;
/**
* 宠物类型 10-猫 20-狗 30-异宠
*/
petType?: number;
/**
* 处方单文件
*/
prescriptionFile?: string;
/**
* 处方单问诊病情描述
*/
prescriptionForm?: string;
/**
* 实付金额
*/
realityPayAmount: number;
/**
* 剩余时间（秒）
*/
remainder?: number;
/**
* 补充症状
*/
supplement?: string;
/**
* 宠物出现的症状1=呕吐2=软便拉稀3=皮肤问题4=眼睛问题5=泌尿问题6=绝育7=疫苗8=驱虫9=养护问题10=其他
*/
symptom?: string;
/**
* 问诊时间
*/
time?: string;
/**
* 症状出现时间1=<7天2=<1个月3=<3个月4=3个月以上
*/
timeFrame?: string;
/**
* 提交问诊用户信息
*/
user?: User;
/**
* 宠物体重
*/
weight?: string;
[property: string]: any;
}
// 问诊订单详情
export interface Response {
code: number;
message: string;
result: Result;
success: boolean;
timestamp: number;
[property: string]: any;
}
// 问诊订单详情
export interface ConsultationOrderDetailType {
/**
* 宠物年龄
*/
age?: number;
/**
* 处方单价格
*/
amount?: number;
/**
* 预计收入
*/
award?: number;
/**
* 洗澡频次1=一周一次（狗狗）2=洗澡频次不规律3=想起来才洗4=定期洗澡（猫猫）
*/
batheFrequency?: string;
/**
* 问诊状态 0-未开始 1-进行中 2-已结束
*/
consultationState?: number;
/**
* 问诊方式 10-快速问诊 21-专家图文语音问诊 22-专家视频问诊 23-专家电话问诊
*/
consultationWay: number;
/**
* 医生信息
*/
doctor: Doctor;
/**
* 处方药
*/
drugList?: DrugList[];
/**
* 实际收入
*/
effect_award?: number;
/**
* 喂养方式1=配方粮2=配方粮+零食3=只吃人食物4=自制犬猫粮
*/
feedType?: string;
/**
* 订单id
*/
id: string;
/**
* 症状图片
*/
image?: string[];
/**
* 宠物免疫情况1=已免疫2=未免疫3=免疫不全4=免疫不详
*/
immuneStatus?: string;
/**
* 是否为复诊0=否1=是
*/
isAgain?: number;
/**
* 是否绝育 0-否 1-是
*/
isSterilization?: number;
/**
* 订单编号
*/
order_no: string;
/**
* 订单状态 10=待支付 20-待问诊 30-进行中 40-已完成 50-已取消
*/
orderState?: number;
/**
* 应付金额
*/
payAmount: number;
/**
* 下单时间
*/
payTime: string;
/**
* 宠物品种
*/
petClass?: string;
/**
* 宠物id
*/
petId?: string;
/**
* 宠物名称
*/
petName?: string;
/**
* 宠物性别 0-母 1-公
*/
petSex?: number;
/**
* 宠物类型 10-猫 20-狗 30-异宠
*/
petType?: number;
/**
* 处方单文件
*/
prescriptionFile?: string;
/**
* 处方单问诊病情描述
*/
prescriptionForm?: string;
/**
* 实付金额
*/
realityPayAmount: number;
/**
* 剩余时间（秒）
*/
remainder?: number;
/**
* 补充症状
*/
supplement?: string;
/**
* 宠物出现的症状1=呕吐2=软便拉稀3=皮肤问题4=眼睛问题5=泌尿问题6=绝育7=疫苗8=驱虫9=养护问题10=其他
*/
symptom?: string;
/**
* 问诊时间
*/
time?: string;
/**
* 症状出现时间1=<7天2=<1个月3=<3个月4=3个月以上
*/
timeFrame?: string;
/**
* 提交问诊用户信息
*/
user?: User;
/**
* 宠物体重
*/
weight?: string;
[property: string]: any;
}
// 处方单详情
export interface PrescriptionDetailType {
/**
* 宠物年龄
*/
age?: number;
/**
* 处方单价格
*/
amount?: number;
/**
* 预计收入
*/
award?: number;
/**
* 洗澡频次1=一周一次（狗狗）2=洗澡频次不规律3=想起来才洗4=定期洗澡（猫猫）
*/
batheFrequency?: string;
/**
* 问诊状态 0-未开始 1-进行中 2-已结束
*/
consultationState?: number;
/**
* 问诊方式 10-快速问诊 21-专家图文语音问诊 22-专家视频问诊 23-专家电话问诊
*/
consultationWay?: number;
/**
* 处方药
*/
drugList?: DrugList[];
/**
* 喂养方式1=配方粮2=配方粮+零食3=只吃人食物4=自制犬猫粮
*/
feedType?: string;
/**
* 订单id
*/
id?: string;
/**
* 症状图片
*/
image?: string[];
/**
* 宠物免疫情况1=已免疫2=未免疫3=免疫不全4=免疫不详
*/
immuneStatus?: string;
/**
* 是否为复诊0=否1=是
*/
isAgain?: number;
/**
* 是否绝育 0-否 1-是
*/
isSterilization?: number;
/**
* 宠物品种
*/
petClass?: string;
/**
* 宠物id
*/
petId?: string;
/**
* 宠物名称
*/
petName?: string;
/**
* 宠物性别 0-母 1-公
*/
petSex?: number;
/**
* 宠物类型 10-猫 20-狗 30-异宠
*/
petType?: number;
/**
* 处方单文件
*/
prescriptionFile?: string;
/**
* 处方单问诊病情描述
*/
prescriptionForm?: string;
/**
* 剩余时间（秒）
*/
remainder?: number;
/**
* 订单状态 0-待发货 1-已发货 2-已完成 3-已退货
*/
state?: number;
/**
* 补充症状
*/
supplement?: string;
/**
* 宠物出现的症状1=呕吐2=软便拉稀3=皮肤问题4=眼睛问题5=泌尿问题6=绝育7=疫苗8=驱虫9=养护问题10=其他
*/
symptom?: string;
/**
* 问诊时间
*/
time?: string;
/**
* 症状出现时间1=<7天2=<1个月3=<3个月4=3个月以上
*/
timeFrame?: string;
/**
* 提交问诊用户信息
*/
user?: User;
/**
* 宠物体重
*/
weight?: string;
[property: string]: any;
}
/**
* 医生信息
*/
export interface Doctor {
/**
* 头像
*/
avatar: string;
/**
* 医生id
*/
id: string;
/**
* 昵称
*/
nickname: string;
[property: string]: any;
}
export interface DrugList {
/**
* 单价
*/
amount: string;
/**
* 描述
*/
des: string;
/**
* 药物名称
*/
name: string;
/**
* 数量
*/
num: number;
[property: string]: any;
}
/**
* 提交问诊用户信息
*/
export interface User {
/**
* 头像
*/
avatar: string;
/**
* 用户id
*/
id: string;
/**
* 昵称
*/
nickname: string;
[property: string]: any;
}
... ...
import { BASE_URL } from '@/service/request/config'
import { BASE_URL } from '@/service/config'
// immuneStatus: { 1:'',2:'',3: '',4: '' }
type ObjectString = {
... ... @@ -14,17 +14,17 @@ const GlobalData: ObjectString = {
'sexData': { 0: '未知', 1: '男', 2: '女' },
'MessageType': { 1: '系统通知', 2: '用户反馈' },
'consultationWay': { 10: '快速问诊', 21: '专家图文语音问诊', 22: '专家视频问诊', 23: '专家电话问诊' },
'isReply': { 0: '否', 1: '是' },
'isReply': { 0: '否', 1: '是' }, //
'orderState': { 20: '待问诊', 30: '问诊中', 40: '问诊结束', 50: '已取消' },
'state': { 0: '待发货', 1: '已发货', 2: '已完成', 3: '已退货' },
'isSterilization': { 0: '否', 1: '是' }, // 是否绝育
'petSec': { 0: '母', 1: '公' },
'petSex': { 0: '母', 1: '公' },
'immuneStatus': { 1: '已免疫', 2: '未免疫', 3: '免疫不全', 4: '免疫不详' },
'feedType': { 1: '配方粮', 2: '配方粮+零食', 3: '只吃人食物', 4: '自制犬猫粮' },
'batheFrequency': { 1: '一周一次（狗狗）', 2: '洗澡频次不规律', 3: '想起来才洗', 4: '定期洗澡（猫猫）' },
'timeFrame': { 1: '<7天', 2: '<1个月', 3: '<3个月', 4: '3个月以上' },
'petType': { 10: '猫', 20: '狗', 30: '异宠' },
'isAgain': { 1: '是', 0: '否' },
'isAgain': { 1: '是', 0: '否' }, // 是否为复诊
'symptom': { 1: '呕吐', 2: '软便拉稀', 3: '皮肤问题', 4: '眼睛问题', 5: '泌尿问题', 6: '绝育', 7: '疫苗', 8: '驱虫', 9: '养护问题', 10: '其他' }
}
... ...
enum StoreType {
local = 'local',
session = 'session'
}
class Store {
storage: Storage
constructor(type: StoreType) {
this.storage = type === StoreType.local ? localStorage : sessionStorage
}
set(key: string, value: any) {
if (value) {
this.storage.setItem(key, JSON.stringify(value))
}
}
get(key: string) {
const value = this.storage.getItem(key)
if (value) {
// return JSON.parse(value) || value
return value
}
}
del(key: string) {
this.storage.removeItem(key)
}
clear() {
this.storage.clear()
}
}
const LStore = new Store(StoreType.local)
const SStore = new Store(StoreType.session)
export { LStore, SStore }
... ...
import React, { memo, useState, forwardRef, useImperativeHandle } from 'react'
import type { FC, ReactNode } from 'react'
import type { FC, ReactNode, Ref } from 'react'
import { Input, Modal, Upload } from 'antd'
import { MinusCircleOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons'
import type { RcFile, UploadProps } from 'antd/es/upload'
import type { UploadFile } from 'antd/es/upload/interface'
import { SendPrescriptionWrapper } from '../style'
import { BASE_URL } from '@/service/request/config'
import type { Send_prescription_formType, DrugList } from '@/types'
import { BASE_URL } from '@/service/config'
import type { Send_prescription_formType } from '@/types'
// /sys/common/appUpload
const { TextArea } = Input
... ... @@ -24,7 +24,7 @@ const getBase64 = (file: RcFile): Promise<string> =>
})
const SendPrescription: FC<IProps> = memo(
forwardRef<HTMLDivElement, IProps>((props, ref) => {
forwardRef<HTMLDivElement, IProps>((props, ref: Ref<any>) => {
const [previewOpen, setPreviewOpen] = useState(false)
const [previewImage, setPreviewImage] = useState('')
const [previewTitle, setPreviewTitle] = useState('')
... ... @@ -73,9 +73,11 @@ const SendPrescription: FC<IProps> = memo(
const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) => setFileList(newFileList)
useImperativeHandle<HTMLDivElement, any>(ref, () => ({
useImperativeHandle(ref, () => ({
Send_prescription_formData,
fileList
fileList,
setSend_prescription_formTypeData,
setFileList
}))
const uploadButton = (
... ...
import React, { memo } from 'react'
import React, { memo, useEffect, useState } from 'react'
import type { FC, ReactNode } from 'react'
import { Image } from 'antd'
import { EyeOutlined } from '@ant-design/icons'
import { useAppDispatch, useAppSelector, shallowEqualApp } from '@/store'
import { fetchPrescriptionDetailAction } from '@/store/modules/order'
import { ViewPrescriptionWrapper } from '../style'
import type { PrescriptionDetailType } from '@/types'
interface IProps {
children?: ReactNode
id: string | number
}
const ViewPrescription: FC<IProps> = memo(() => {
const ViewPrescription: FC<IProps> = memo((props) => {
console.log(props.id, 'id')
const dispatch = useAppDispatch()
const [PrescriptionDetail, setPrescriptionDetail] = useState<PrescriptionDetailType>()
useEffect(() => {
console.log('first')
dispatch(fetchPrescriptionDetailAction({ id: props.id }))
}, [props.id])
const { PrescriptionDetailDetail } = useAppSelector(
(state) => ({
PrescriptionDetailDetail: state.order.PrescriptionDetailData
}),
shallowEqualApp
)
useEffect(() => {
setPrescriptionDetail(PrescriptionDetailDetail)
}, [PrescriptionDetailDetail])
return (
<ViewPrescriptionWrapper>
<div className="title">问诊病情：</div>
<div className="content">即该不低加造年周消养明价切公没家管发七议性原提何们领从很己发战</div>
<div className="content">{PrescriptionDetail?.prescriptionForm || '暂无问诊病情'}</div>
<div className="title">处方药：</div>
<div className="listbox">
<div className="itemo">
<div className="flexJ black">
<div>药品名称</div>
<div>¥3.00</div>
</div>
<div className="flexJ gray">
<div>外用，一日3次，每次10毫升</div>
<div>x2</div>
{Array.isArray(PrescriptionDetail?.drugList) && PrescriptionDetail?.drugList?.length ? (
PrescriptionDetail?.drugList?.map((_, index) => (
<div className="itemo">
<div className="flexJ black" key={index}>
<div>{_.name || '药物名称'}</div>
<div>¥{_.amount || 0}</div>
</div>
<div className="flexJ gray">
<div>{_.des || '描述'}</div>
<div>x{_.num || 0}</div>
</div>
</div>
))
) : (
<div className="itemo">
<div className="flexJ black">
<div>药品名称</div>
<div>¥3.00</div>
</div>
<div className="flexJ gray">
<div>外用，一日3次，每次10毫升</div>
<div>x2</div>
</div>
</div>
</div>
)}
</div>
<div className="title">处方单证明：</div>
<Image width={120} src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" className="title" />
<div className="black">总金额：¥26.00</div>
<Image
width={120}
preview={{
mask: <EyeOutlined />
}}
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
className="marbot"
/>
<div className="black">总金额：¥{PrescriptionDetail?.award || 0}</div>
</ViewPrescriptionWrapper>
)
})
... ...
import React, { memo } from 'react'
import React, { memo, useEffect, useState } from 'react'
import type { FC, ReactNode } from 'react'
import { Avatar, Image } from 'antd'
import { EyeOutlined } from '@ant-design/icons'
import { useAppDispatch, useAppSelector, shallowEqualApp } from '@/store'
import order, { fetchConsultationOrderDetailAction } from '@/store/modules/order'
import { ViewSymptomWrapper } from '../style'
import GHandler from '@/utils/methods'
import type { ConsultationOrderDetailType } from '@/types'
interface IProps {
children?: ReactNode
id: string | number
}
const url = 'https://p1.ssl.qhmsg.com/dr/270_500_/t010c2d50907f0a7b9c.png'
const ViewSymptom: FC<IProps> = memo(() => {
const ViewSymptom: FC<IProps> = memo((props) => {
const { id } = props
const dispatch = useAppDispatch()
const [orderDetail, setOrderDetail] = useState<ConsultationOrderDetailType>()
useEffect(() => {
console.log('id', id)
dispatch(fetchConsultationOrderDetailAction({ id: props.id }))
}, [props.id])
const { COrderDetail } = useAppSelector(
(state) => ({
COrderDetail: state.order.ConsultationOrderDetailData
}),
shallowEqualApp
)
useEffect(() => {
console.log(COrderDetail, '请求回来的订单详情数据')
setOrderDetail(COrderDetail as ConsultationOrderDetailType)
}, [COrderDetail])
return (
<ViewSymptomWrapper>
<div className="flexJ">
<div className="flexA top">
<Avatar size="large" src={<img src={url} alt="avatar" />} />
<div className="username">卡卡罗特</div>
<div className="tag">图文问诊</div>
<Avatar size="large" src={<img src={orderDetail?.user?.avatar} alt="avatar" />} />
<div className="username">{orderDetail?.user?.nickname}</div>
<div className="tag">{GHandler.optObjectValue('consultationWay', orderDetail?.consultationWay || 10)}</div>
</div>
<div className="money">预计收入：¥26.00</div>
<div className="money">预计收入：¥{orderDetail?.award || 0}</div>
</div>
<div className="row">
就诊宠物：<span>蓝猫/2岁/女/绝育/1kg</span>
就诊宠物：
<span>
{GHandler.optObjectValue('petType', orderDetail?.petType || 30)}/{orderDetail?.age || '年龄未知'}/
{GHandler.optObjectValue('petSex', orderDetail?.petSex || 1)}/{GHandler.optObjectValue('symptom', 7)}/{orderDetail?.weight || '体重未知'}
</span>
</div>
<div className="row">
免疫情况：<span>不详</span>
免疫情况：<span>{GHandler.optObjectValue('immuneStatus', orderDetail?.immuneStatus || 4)}</span>
</div>
<div className="row">
喂养方式：<span>自制杂粮</span>
喂养方式：
<span>
<span>{GHandler.optObjectValue('feedType', orderDetail?.feedType || 4)}</span>
</span>
</div>
<div className="row">
洗澡频次：<span>一周一次</span>
... ... @@ -39,11 +75,29 @@ const ViewSymptom: FC<IProps> = memo(() => {
症状时间：<span>{`<7天`}</span>
</div>
<div className="row">
症状描述：<span>快死了哦快死了哦快死了哦快死了哦快死了哦快死了哦快死了哦快死了哦快死了哦快死了哦快死了哦快死了哦快死了哦快死了哦快死了哦快死了哦</span>
症状描述：<span>{orderDetail?.supplement || '暂无症状描述'}</span>
</div>
<div className="row">
<div>上传图片</div>
<Image width={120} src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
<div>
<div className="row">症状图片</div>
{Array.isArray(orderDetail?.image) && orderDetail?.image.length ? (
orderDetail?.image.map((_, index) => (
<Image
width={120}
preview={{
mask: <EyeOutlined />
}}
src={_}
/>
))
) : (
<Image
width={120}
preview={{
mask: <EyeOutlined />
}}
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
/>
)}
</div>
</ViewSymptomWrapper>
)
... ...
... ... @@ -45,6 +45,9 @@ export const ViewPrescriptionWrapper = styled.div`
font-weight: 700;
margin-bottom: 8px;
}
.marbot{
margin-bottom: 8px;
}
.content{
color: #323233;
font-size: 14px;
... ... @@ -75,6 +78,12 @@ export const ViewPrescriptionWrapper = styled.div`
export const ViewSymptomWrapper = styled.div`
max-height: 440px;
overflow: auto;
.title{
color: #323233;
font-size: 14px;
font-weight: 700;
margin-bottom: 8px;
}
.top{
margin-bottom: 12px;
}
... ... @@ -107,4 +116,7 @@ export const ViewSymptomWrapper = styled.div`
color:#666666;
}
}
.fff{
color: #fff;
}
`
... ...
... ... @@ -5,7 +5,7 @@ import type { TabsProps } from 'antd'
import { ConsultationOrderWrapper, ConsultationOrderItemWrapper } from './styled'
import { useAppDispatch, useAppSelector, shallowEqualApp } from '@/store'
import { updateSend_prescription_form } from '@/api'
import { Send_prescription_formType } from '@/types'
import { Send_prescription_formType, SendPrescriptionPropsType, DrugList } from '@/types'
import { fetchOrderDataAction } from '@/store/modules/order'
import SendPrescription from '../../com/SendPrescription'
import ViewPrescription from '../../com/ViewPrescription'
... ... @@ -25,7 +25,7 @@ const ShowOrderComHandler: FC<IProps> = (props) => {
const [modalTitle, setModalTitle] = useState<string>(' ')
const [modalFlag, setModalFlag] = useState<number>(0)
const SendPrescriptionRef = useRef<ElementRef<typeof SendPrescription> | null>(null)
const SendPrescriptionRef = useRef<SendPrescriptionPropsType | null>(null)
const showModalHandler = (flag: number) => {
console.log(flag, '按钮状态')
... ... @@ -36,17 +36,31 @@ const ShowOrderComHandler: FC<IProps> = (props) => {
const handleOk = async () => {
if (modalFlag === 2) {
const instance = SendPrescriptionRef.current as any
const instance = SendPrescriptionRef.current
await updateSend_prescription_form({
...instance.Send_prescription_formData,
drugList: JSON.stringify(instance.Send_prescription_formData.drugList),
prescriptionFile: instance.fileList.map((_: any) => _.response.message).join()
...instance?.Send_prescription_formData,
drugList: JSON.stringify(instance?.Send_prescription_formData.drugList),
prescriptionFile: instance?.fileList.map((_: any) => _.response.message).join()
})
typeof instance?.setSend_prescription_formTypeData === 'function' &&
instance?.setSend_prescription_formTypeData({
drugList: [{ amount: '', des: '', name: '', num: '' }],
prescriptionForm: '',
prescriptionAmount: 0
})
typeof instance?.setFileList === 'function' && instance.setFileList([])
}
console.log(SendPrescriptionRef.current, 'SendPrescription 子组件实例')
setConfirmLoading(true)
setTimeout(() => {
setOpenHandler(false)
setConfirmLoading(false)
}, 2000)
}
... ... @@ -60,7 +74,7 @@ const ShowOrderComHandler: FC<IProps> = (props) => {
return (
<ConsultationOrderItemWrapper>
<Modal title={modalTitle} open={open} onOk={handleOk} cancelText="关闭" okText="确认" confirmLoading={confirmLoading} onCancel={handleCancel}>
{{ 1: <ViewSymptom />, 2: <SendPrescription ref={SendPrescriptionRef} />, 3: <ViewPrescription /> }[modalFlag]}
{{ 1: <ViewSymptom id={1} />, 2: <SendPrescription ref={SendPrescriptionRef} />, 3: <ViewPrescription id={1} /> }[modalFlag]}
</Modal>
{orderList?.length &&
orderList.map((_, index) => (
... ... @@ -110,31 +124,33 @@ const ConsultationOrder: FC<IProps> = memo(() => {
const dispatch = useAppDispatch()
useEffect(() => {
// dispatch(fetchOrderDataAction())
dispatch(fetchOrderDataAction({ pageNo: 1 }))
}, [])
const { banners } = useAppSelector(
const { ConsultationOrder } = useAppSelector(
(state) => ({
banners: state.order.bannersList
ConsultationOrder: state.order.ConsultationOrderList
}),
shallowEqualApp
)
useEffect(() => {
if (!banners.length) return
console.log(banners)
}, [banners])
if (!ConsultationOrder.length) return
console.log(ConsultationOrder)
}, [ConsultationOrder])
const [text, setText] = useState<string[]>([])
const items: TabsProps['items'] = [
{ key: '0', label: '全部', children: ShowOrderComHandler({ orderList: text }) },
{ key: '1', label: '待处理', children: ShowOrderComHandler({ orderList: text }) },
{ key: '2', label: '处理中', children: ShowOrderComHandler({ orderList: text }) },
{ key: '3', label: '已处理', children: ShowOrderComHandler({ orderList: text }) }
{ key: '', label: '全部', children: ShowOrderComHandler({ orderList: text }) },
{ key: '20', label: '待问诊', children: ShowOrderComHandler({ orderList: text }) },
{ key: '30', label: '问诊中', children: ShowOrderComHandler({ orderList: text }) },
{ key: '40', label: '问诊结束', children: ShowOrderComHandler({ orderList: text }) },
{ key: '50', label: '已取消', children: ShowOrderComHandler({ orderList: text }) }
]
const onChange = (key: string) => {
dispatch(fetchOrderDataAction({ pageNo: 1, orderState: key }))
setText([key, '1', '2', '', '', '', ''])
}
... ...