diff --git a/config/index.js b/config/index.js index eeaacd9..d68f13d 100644 --- a/config/index.js +++ b/config/index.js @@ -11,6 +11,7 @@ const config = { outputRoot: 'dist', plugins: [], defineConstants: { + CURRENT_ENV: JSON.stringify(process.env.NODE_ENV) }, copy: { patterns: [ diff --git a/src/api/material.ts b/src/api/material.ts index 1b47f30..a777a95 100644 --- a/src/api/material.ts +++ b/src/api/material.ts @@ -45,3 +45,13 @@ export const GetProductDetailApi = () => { }) } +/** + * 根据LAB匹配色卡基础资料 + * @returns +*/ +export const GetLabProductApi = () => { + return useRequest({ + url: `/v1/mall/product/color/absorb/match`, + method: "get", + }) +} diff --git a/src/api/onlinePay.ts b/src/api/onlinePay.ts new file mode 100644 index 0000000..b5ce06f --- /dev/null +++ b/src/api/onlinePay.ts @@ -0,0 +1,13 @@ +import { useRequest } from "@/use/useHttp" + +/** + * 获取在线支付二维码 + */ + export const GetPayCode = () => { + return useRequest({ + url: `/`, + base_url: 'http://192.168.1.127:8081/caphtml', + method: "post", + }) +} + diff --git a/src/api/order.ts b/src/api/order.ts index 2fd72f8..f723f47 100644 --- a/src/api/order.ts +++ b/src/api/order.ts @@ -3,7 +3,7 @@ import { useRequest } from "@/use/useHttp" /** * 下单现货销售单 */ - export const SaleOrderApi = () => { +export const SaleOrderApi = () => { return useRequest({ url: `/v1/mall/saleOrder`, method: "post", @@ -18,4 +18,75 @@ import { useRequest } from "@/use/useHttp" url: `/v1/mall/saleOrder/preView`, method: "put", }) +} + +/** + * 获取商城订单详情 + */ + export const GetSaleOrderDetailApi = () => { + return useRequest({ + url: `/v1/mall/saleOrder/detail`, + method: "get", + }) +} + + +/** + * 修改销售单备注 + */ + export const EditSaleOrderRemarkApi = () => { + return useRequest({ + url: `/v1/mall/saleOrder/remark`, + method: "put", + }) +} + +/** + * 修改销售单地址 + */ + export const EditSaleOrderAddressApi = () => { + return useRequest({ + url: `/v1/mall/saleOrder/address`, + method: "put", + }) +} + +/** + * 修改销售单收货方法 + */ + export const EditSaleOrderShipmentModeApi = () => { + return useRequest({ + url: `/v1/mall/saleOrder/shipmentMode`, + method: "put", + }) +} + +/** + * 获取订单状态枚举 + */ + export const GetOrderStatusListApi = () => { + return useRequest({ + url: `/v1/mall/enum/sale/order/status`, + method: "get", + }) +} + +/** + * 获取订单列表 + */ + export const GetOrderListApi = () => { + return useRequest({ + url: `/v1/mall/saleOrder/list`, + method: "get", + }) +} + +/** + * 作废销售单 + */ + export const CancelOrderApi = () => { + return useRequest({ + url: `/v1/mall/saleOrder/cancel`, + method: "put", + }) } \ No newline at end of file diff --git a/src/api/orderPay.ts b/src/api/orderPay.ts new file mode 100644 index 0000000..99ba9d9 --- /dev/null +++ b/src/api/orderPay.ts @@ -0,0 +1,21 @@ +import { useRequest } from "@/use/useHttp" + +/** + * 获取订单支付方式信息 + */ + export const GetOrderPayApi = () => { + return useRequest({ + url: `/v1/mall/orderPayment/orderPaymentMethodInfo`, + method: "get", + }) +} + +/** + * 订单支付提交 + */ + export const SubmitOrderPayApi = () => { + return useRequest({ + url: `/v1/mall/orderPayment/orderPaymentSubmission`, + method: "put", + }) +} \ No newline at end of file diff --git a/src/api/search.ts b/src/api/search.ts index 9f91366..5b0f296 100644 --- a/src/api/search.ts +++ b/src/api/search.ts @@ -3,9 +3,31 @@ import { useRequest } from "@/use/useHttp" /** * 获取热门搜索 */ - export const getHotSearchApi = () => { + export const GetHotSearchApi = () => { return useRequest({ - url: `/v1/mall/hotSearch`, + url: `/v1/mall/hotSearch/list`, method: "get", }) +} + + +/** + * 获取历史搜索 + */ + export const GetSearchHistoryApi = () => { + return useRequest({ + url: `/v1/mall/searchHistory/list`, + method: "get", + }) +} + + +/** + * 添加搜索关键字 + */ + export const AddSearchHistoryApi = () => { + return useRequest({ + url: `/v1/mall/searchHistory`, + method: "post", + }) } \ No newline at end of file diff --git a/src/api/subjectMaterial.ts b/src/api/subjectMaterial.ts new file mode 100644 index 0000000..78a9cd1 --- /dev/null +++ b/src/api/subjectMaterial.ts @@ -0,0 +1,13 @@ +import { useRequest } from "@/use/useHttp" + +/** + * 获取专题列表 + * @returns +*/ +export const GetSubjectList = () => { + return useRequest({ + url: `/v1/mall/subject/list`, + method: "get", + }) +} + diff --git a/src/app.config.ts b/src/app.config.ts index 898aa9d..f2ce4d9 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -45,7 +45,7 @@ export default { { root: "pages/details", pages: [ - "index" + "index", ] }, { @@ -95,7 +95,26 @@ export default { { root: "pages/order", pages: [ - "index" + "index", + "comfirm" + ] + }, + { + root: "pages/editOrder", + pages: [ + "index", + ] + }, + { + root: "pages/orderList", + pages: [ + "index", + ] + }, + { + root: "pages/subjectList", + pages: [ + "index", ] }, { diff --git a/src/common/client.js b/src/common/client.js index 0aefa83..e69de29 100644 --- a/src/common/client.js +++ b/src/common/client.js @@ -1,17 +0,0 @@ -import Taro from "@tarojs/taro"; - - -/** - * 设置 客户 本地存储 - * @param {Object} clientInfo - */ -export const setClient = (clientInfo) => { - Taro.setStorageSync('client', clientInfo) -} - -/** - * 返回 客户 本地存储 - */ -export const getClient = () => { - Taro.getStorageSync('client') || null -} diff --git a/src/common/common.ts b/src/common/common.ts index 080373b..0c814aa 100644 --- a/src/common/common.ts +++ b/src/common/common.ts @@ -7,20 +7,15 @@ import Qs from 'qs' * @param params * @param type false 跳转普通页面，true 跳转tabbar页面 */ -export const goLink = (path = '', params = {}, type:false|true = false) => { +type ParamLink = 'navigateTo'|'switchTab'|'reLaunch'|'redirectTo' +export const goLink = (path = '', params = {}, way: ParamLink = 'navigateTo') => { if(path) { let params_str = Qs.stringify(params) console.log('params_str::',params_str) path = params_str?path+'?'+params_str:path - if(!type) { - Taro.navigateTo({ - url: path - }) - } else { - Taro.switchTab({ - url: path - }) - } + console.log('path::', way) + Taro[way]({url: path}) + } } diff --git a/src/common/constant.js b/src/common/constant.js index f82b8c9..cde84ce 100644 --- a/src/common/constant.js +++ b/src/common/constant.js @@ -17,12 +17,17 @@ export const BASE_URL = `http://192.168.1.224:50001/lymarket` // 添 export const GET_UPLOAD_SIGN = `/upyun/getsign` // 请求签名 url export const UPLOAD_CDN_URL = `https://v0.api.upyun.com/` -// 前缀 -export const IMG_CND_Prefix = "http://test.cdn.zzfzyc.com" +// cdn +export const IMG_CND_Prefix = CURRENT_ENV.includes('development')? "https://test.cdn.zzfzyc.com":"https://cdn.zzfzyc.com" // 上传图片视频 export const CDN_UPLOAD_IMG = `${UPLOAD_CDN_URL || ''}`; //appid -export const WX_APPID = 'wx68d92d7cbf0b6963' \ No newline at end of file +export const WX_APPID = 'wx68d92d7cbf0b6963' + +//场景值 +export const SCENE = { + SearchScene : 0 //商城面料搜索 +} \ No newline at end of file diff --git a/src/common/enum.ts b/src/common/enum.ts new file mode 100644 index 0000000..df57d45 --- /dev/null +++ b/src/common/enum.ts @@ -0,0 +1,7 @@ +export const ORDER_STATUS = { + 0:{value:0, label:'申请中'}, + 1:{value:1, label:'配布中'}, + 2:{value:2, label:'待发货'}, + 3:{value:3, label:'已发货'}, + 4:{value:4, label:'已完成'} +} \ No newline at end of file diff --git a/src/common/fotmat.js b/src/common/fotmat.js index 3cff723..2176a51 100644 --- a/src/common/fotmat.js +++ b/src/common/fotmat.js @@ -141,6 +141,6 @@ export const toDecimal2 = (x) => { * @param {*} url * @returns */ -export const formatImgUrl = (url) => { - return IMG_CND_Prefix + url +export const formatImgUrl = (url, suffix="!w200") => { + return url?IMG_CND_Prefix + url + suffix:'https://cdn.zzfzyc.com/mall/no_img.png' } \ No newline at end of file diff --git a/src/common/system.js b/src/common/system.ts similarity index 66% rename from src/common/system.js rename to src/common/system.ts index 12e2036..1d99ae5 100644 --- a/src/common/system.js +++ b/src/common/system.ts @@ -32,3 +32,19 @@ export const getAccountInfo = () => { const result = Taro.getStorageSync('accountInfo') return result ? JSON.parse(result) : null } + +/** + * 设置 参数本地存储 + * @param {Object} info + */ +export const setParam = (info:Object) => { + Taro.setStorageSync('params', JSON.stringify(info)) +} + +/** + * 返回 参数本地存储 + */ +export const getParam = () => { + const res = Taro.getStorageSync('params') || null + return res?JSON.parse(res):null +} diff --git a/src/common/util.js b/src/common/util.ts similarity index 74% rename from src/common/util.js rename to src/common/util.ts index 6c131c9..15f5d6b 100644 --- a/src/common/util.js +++ b/src/common/util.ts @@ -5,7 +5,7 @@ * @returns */ export const debounce = (fn, delay) => { - let timer = null; + let timer:any = null; return (...param) => { if (timer) clearTimeout(timer); timer = setTimeout(() => { @@ -90,4 +90,17 @@ export const throttle = (fn, delay) => { */ export const screenshot = (url, suffix="!w200")=>{ return url+suffix; + } + + //获取数据加载状态 //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据 + export const dataLoadingStatus = ({list = [], total = 0, status = false}:{list:any[], total:number, status:true|false}) => { + if(list.length == 0 && status) { + return 0 + } else if (list.length == 0 && !status) { + return 1 + } else if (list.length < total) { + return 2 + } else { + return 3 + } } \ No newline at end of file diff --git a/src/components/checkbox/index.module.scss b/src/components/checkbox/index.module.scss index 345ad92..b50f17d 100644 --- a/src/components/checkbox/index.module.scss +++ b/src/components/checkbox/index.module.scss @@ -26,6 +26,6 @@ text-align: center; line-height: 40px; .miconfont{ - font-size: 26px; + font-size: 32px; } } \ No newline at end of file diff --git a/src/components/filter/index.module.scss b/src/components/filter/index.module.scss index 599cdd0..48538c0 100644 --- a/src/components/filter/index.module.scss +++ b/src/components/filter/index.module.scss @@ -31,7 +31,7 @@ grid-template-columns: repeat(3, 165.75px); justify-content: space-between; .btn_item{ - width: 165.75px; + // width: 165.75px; height: 69.2px; background: #f0f0f0; border-radius: 34px; @@ -54,7 +54,7 @@ // justify-content: space-between; align-items: center; .btn_width { - width: 220px; + flex:1; height: 70px; background: #f0f0f0; border-radius: 50px; diff --git a/src/components/filter/index.tsx b/src/components/filter/index.tsx index d64ab87..b05ae35 100644 --- a/src/components/filter/index.tsx +++ b/src/components/filter/index.tsx @@ -1,101 +1,105 @@ +import { GetProductKindListApi } from "@/api/material"; import Popup, {Params as PopuParams} from "@/components/popup" import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components" +import { useDidShow } from "@tarojs/taro"; import classnames from "classnames"; -import { useEffect, useState } from "react"; +import { memo, useEffect, useRef, useState } from "react"; import styles from './index.module.scss' type params = { - onFiltr?: (val:object) => void + onFiltr?: (val:object) => void //确定搜索 + onRest?: (val:Object) => void //重置 } & PopuParams -export default ({onClose, onFiltr, show = false}:params) => { - const [filterObj, setFilterObj] = useState({ - series: '', - minWidth: '', - maxWidth: '', - minWeight: '', - maxWeight: '', - element: '' +export default memo(({onClose, onFiltr, show = false, onRest}:params) => { + //搜索条件 + const [filterObj, setFilterObj] = useState({ + seriesName: '', + seriesId: '', + width: '', + weight: '', + element: '', }) + + const selectFieldValue = useRef({width:'幅宽', weight:'克重', element:'成分', seriesName:'系列'}) + + //获取系列 + const {fetchData: kindFetchData} = GetProductKindListApi() + const [kindList, setKindList] = useState([]) + const getCategoryList = async () => { + let {data} = await kindFetchData() + setKindList(data.list) + } + + useEffect(() => { + show&&getCategoryList() + }, [show]) + + //切换系列 + const changeKind = (e) => { + setFilterObj({...filterObj, seriesId:e.id, seriesName: e.name}) + } + const onCloseEven = () => { onClose?.() } - const onRest = () => { - console.log('12123') - setFilterObj({ - series: '', - minWidth: '', - maxWidth: '', - minWeight: '', - maxWeight: '', - element: '' - }) - } - useEffect(() => { - console.log(filterObj) - }, [filterObj]) - const onVerify = () => { - console.log(filterObj) - onFiltr?.(filterObj) - } - - const setNumber = (e, field) => { - console.log(e) - let num = parseFloat(e.detail.value) - if(isNaN(num)) { - filterObj[field] = null - } else { - filterObj[field] = parseFloat(num.toFixed(2)) + //重置数据 + const onRestEven = () => { + let res = { + seriesName: '', + seriesId: '', + width: '', + weight: '', + element: '', } + setFilterObj(res) + onFiltr?.(filterObj) + onClose?.() + } + + //提交搜索 + const onVerify = () => { + onFiltr?.({data:filterObj, field: selectFieldValue.current}) + onClose?.() + } + + //获取幅宽或克重输入值或成分 + const setFieldData = (e, field) => { + filterObj[field] = e.detail.value setFilterObj({...filterObj}) } - const setElement = (e) => { - let res = e.detail.value - setFilterObj({...filterObj, element:res}) - } return ( - onCloseEven()} showIconButton={true}> 全部筛选 - 系列 - 不限 - 不限 - 不限 - 不限 - 不限 - 不限 + {kindList.map(item => changeKind(item)} className={classnames(styles.btn_item, (filterObj.seriesId == item.id)&&styles.select_btn_item)}>{item.name})} 幅宽 - setNumber(e,'minWidth')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/> - — - setNumber(e,'maxWidth')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/> + setFieldData(e,'width')} placeholder="请输入幅宽" placeholderStyle="font-size: 26rpx"/> cm 克重 - setNumber(e,'minWeight')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/> - — - setNumber(e,'maxWeight')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/> - g + setFieldData(e,'weight')} placeholder="请输入克重" placeholderStyle="font-size: 26rpx"/> + kg 成分 - {descData.number}/{descData.count} diff --git a/src/pages/order/components/scanPay/index.module.scss b/src/pages/order/components/scanPay/index.module.scss new file mode 100644 index 0000000..dcb356d --- /dev/null +++ b/src/pages/order/components/scanPay/index.module.scss @@ -0,0 +1,54 @@ +$top:170px; +.scanPay_main{ + .scanPay_con{ + padding: 20px; + background-color: #F6F6F6; + border-radius: 20px; + .miconfont_title{ + transform: rotate(-180deg); + position: absolute; + left: 20px; + top: 27px; + font-size: 37px; + color: $color_font_three; + z-index: 99; + + } + } + .title{ + font-size: $font_size_big; + color: #000000; + text-align: center; + font-weight: 700; + position: relative; + } + .desc{ + font-size: $font_size_min; + color: $color_main; + text-align: center; + padding: 10px 0; + .miconfont{ + font-size: 25px; + } + } + + .scanPay_list{ + border-radius: 10px; + height: 900px; + image{ + width: 100%; + } + } + .btns{ + background: #007aff; + border-radius: 40px; + width: 668px; + height: 82px; + text-align: center; + line-height: 80px; + width: 100%; + color: #fff; + font-size: 32px; + margin-top: 30px; + } +} \ No newline at end of file diff --git a/src/pages/order/components/scanPay/index.tsx b/src/pages/order/components/scanPay/index.tsx new file mode 100644 index 0000000..d6fb06e --- /dev/null +++ b/src/pages/order/components/scanPay/index.tsx @@ -0,0 +1,161 @@ +import { Image, ScrollView, Text, View } from "@tarojs/components"; +import { memo, useEffect, useRef, useState } from "react"; +import classnames from "classnames"; +import styles from './index.module.scss' +import Popup from "@/components/popup"; +import Taro from "@tarojs/taro"; +import { alert } from "@/common/common"; +import { formatImgUrl } from "@/common/fotmat"; +import useCheckAuthorize from "@/use/useCheckAuthorize"; +import { GetPayCode } from "@/api/onlinePay"; +import LoadingCard from "@/components/loadingCard"; + + +type Param = { + show?: true|false, + onClose?: () => void +} + + +type Item = { + product_code: string, + product_name: string, + product_color_code: string, + product_color_name: string, + num: string, + weight: string, + sale_price: string, + total_price: string +} +type CodeParam = { + title: string, + company: string, + order_type: string, + sale_user: string, + order_created_time: string, + order_no: string, + department: string, + shipment_mode: string, + target_user_name: string, + target_address: string, + target_description: string, + pay_account: string, + bank_account_name: string, + bank_name: string, + pay_type: string, + client: string, + phone: string, + order_total_length: string, + order_total_price: string, + qrcode: string, + order_total_weight: string, + list: Item[] +} +export default memo(({show = true, onClose}:Param) => { + + //获取支付二维码 + const [payCodeImage, setPayCodeImage] = useState('') + const fileData = useRef({ + filePath: '', + base64: '' + }) + const {fetchData, state} = GetPayCode() + const getCore = async () => { + let res = await fetchData({ + title: "面料销售电子确认单", + company: "什么什么公司123", + order_type: "散剪", + sale_user: "小崔", + order_created_time:"2022/02/01 12:32:13", + order_no:"XS-211005888", + department:"嘻嘻嘻", + shipment_mode:"自提", + target_user_name:"大崔", + target_address:"阿斯顿发斯蒂芬", + target_description:"无", + pay_account:"1234567890123450001", + bank_account_name:"佛山市浩川长盛科技有限公司", + bank_name:"招商银行佛山分行禅城支行", + pay_type:"现结", + client:"客户名称", + phone:"15818085802", + order_total_length:"12", + order_total_price:"63000", + qrcode:"https://www.zzfzyc.com/checkorder/XS-211005888", + order_total_weight:"300.00", + list: [{product_code:'5215',product_name:'26S双纱亲水滑爽棉',product_color_code:'053',product_color_name:'洋红',num:'4',weight:'123.23',sale_price:'43',total_price:'4510.7'}] + }) + const base64 = res.data.base64 + setPayCodeImage(() => base64) + const time = new Date().valueOf() + const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || []; + let filePath = Taro.env.USER_DATA_PATH + '/img' + time +'.'+ format + fileData.current.filePath = filePath + fileData.current.base64 = bodyData + const save = Taro.getFileSystemManager() + save.writeFile({ + filePath: fileData.current.filePath, + data: fileData.current.base64, + encoding: 'base64', + }) + + } + useEffect(() => { + if(show) + getCore() + }, [show]) + + //检查是否开启保存图片权限 + const {check} = useCheckAuthorize({scope:'scope.writePhotosAlbum', msg:'您没授权，无法保存图片'}) + const saveImageCheck = async () => { + const res = await check() + res&&saveImage() + } + + //保存图片 + const saveImage = () => { + alert.loading('正在保存图片') + Taro.saveImageToPhotosAlbum({ + filePath: fileData.current.filePath, + success: function (res) { + alert.success('图片保存成功') + }, + fail: function (err) { + console.log('err::', err) + } + }) + } + + //预览图片 + const showImage = () => { + console.log('fileData.current.filePath::', fileData.current.filePath) + Taro.previewImage({ + current: fileData.current.filePath, // 当前显示 + urls: [fileData.current.filePath] // 需要预览的图片http链接列表 + }) + } + + //复制功能 + return ( + + + + + 扫码支付 + + + 扫码支付成功后，自动更新状态 + + + {(state.loading)&&|| + + + } + + 保存电子确认单 + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/order/components/shipmentMode/index.module.scss b/src/pages/order/components/shipmentMode/index.module.scss new file mode 100644 index 0000000..5f818f9 --- /dev/null +++ b/src/pages/order/components/shipmentMode/index.module.scss @@ -0,0 +1,33 @@ + + .order_title{ + display: flex; + align-items: center; + padding: 20px 30px; + box-sizing: border-box; + background-color: #fff; + height: 116px; + border-radius: 20px; + margin-top: 20px; + text{ + flex:1; + font-size: $font_size; + font-weight: 700; + } + .order_status{ + background-color: #F0F0F0; + width: 148px; + height: 55px; + color: $color_font_three; + text-align: center; + line-height: 55px; + font-size: $font_size_medium; + border-radius: 30px; + &:nth-last-child(1) { + margin-left: 20px; + } + } + .order_status_selected{ + color: $color_main; + border: 1px solid $color_main; + } + } \ No newline at end of file diff --git a/src/pages/order/components/shipmentMode/index.tsx b/src/pages/order/components/shipmentMode/index.tsx new file mode 100644 index 0000000..235591c --- /dev/null +++ b/src/pages/order/components/shipmentMode/index.tsx @@ -0,0 +1,28 @@ +import { Text, View } from "@tarojs/components" +import styles from './index.module.scss' +import classnames from "classnames"; +import { memo, useRef, useState } from "react"; + +type Param = { + onSelect?:(val:number) => void +} +export default memo(({onSelect}: Param) => { + //收货方法 1:自提，2：物流 + const shipmentMode = useRef([ + {value:1, label:'上门自提', selected:false}, + {value:2, label:'物流', selected:false} + ]) + const [selectValue, setSelectValue] = useState() + const selectShipmentMode = (value) => { + setSelectValue(() => value) + onSelect?.(value) + } + return ( + + 收货方式 + {shipmentMode.current.map(item => { + return selectShipmentMode(item.value)}>{item.label} + })} + + ) +}) \ No newline at end of file diff --git a/src/pages/order/components/submitOrderBtn/index.module.scss b/src/pages/order/components/submitOrderBtn/index.module.scss new file mode 100644 index 0000000..c5ac9ed --- /dev/null +++ b/src/pages/order/components/submitOrderBtn/index.module.scss @@ -0,0 +1,69 @@ +.order_price{ + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + &:nth-last-child(n+2) { + margin-bottom: 30px; + } + .order_price_text{ + font-size: $font_size_medium; + // margin-right: 10px; + display: flex; + .iconfont_msg{ + position: relative; + } + .miconfont{ + font-size: 30px; + font-weight: normal; + } + .message{ + position: absolute; + top: -50px; + background: #A8B3BD; + z-index: 9; + min-height: 50px; + border-radius: 10px; + padding: 10px; + box-sizing: border-box; + &::before{ + z-index: 1; + position: absolute; + bottom: -7px; + left: 10px; + width: 15px; + height: 15px; + content: " "; + transform: rotate(45deg); + background: #A8B3BD; + box-sizing: border-box; + } + } + } + .emphasis{ + font-weight: 700; + } + .order_price_num{ + color: $color_main; + font-weight: 700; + text{ + &:nth-child(1) { + font-size: $font_size_min; + } + &:nth-child(2) { + font-size: 26px; + } + &:nth-child(3) { + font-size: $font_size_medium; + } + } + } + .emphasis_num{ + text{ + &:nth-child(2) { + font-size: $font_size_big; + } + } + } + +} \ No newline at end of file diff --git a/src/pages/order/components/submitOrderBtn/index.tsx b/src/pages/order/components/submitOrderBtn/index.tsx new file mode 100644 index 0000000..db9b432 --- /dev/null +++ b/src/pages/order/components/submitOrderBtn/index.tsx @@ -0,0 +1,40 @@ +import { Text, View } from "@tarojs/components" +import { memo, useCallback, useEffect, useMemo } from "react" +import {formatKbPrice} from '@/common/common' +import classnames from "classnames"; +import styles from './index.module.scss' +type Param = { + style?: Object, + number?: number +} +export default memo(({style, number = 0}:Param) => { + const priceDom = useCallback(() => { + let res = number.toFixed(2).split('.') + let int_num = parseInt(res[0]) + '' + let decimals_num = res[1] + return ( + <> + ¥ + {Number(int_num).toLocaleString()} + .{decimals_num} + + ) + }, [number]) + return ( + <> + + + 应付金额 + + + {/* 123123123121212312312312312 */} + + + + {priceDom()} + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/order/components/weightMemo/index.module.scss b/src/pages/order/components/weightMemo/index.module.scss new file mode 100644 index 0000000..3c74511 --- /dev/null +++ b/src/pages/order/components/weightMemo/index.module.scss @@ -0,0 +1,39 @@ + +.weight_memo{ + background-color: #fff; + border-radius: 20px; + padding: 0 20px; + .weight_memo_item{ + display: flex; + justify-content: space-between; + height: 130px; + &:nth-child(1) { + border-bottom: 1px solid #f3f3f3; + } + .title, .desc{ + display: flex; + align-items: center; + } + .title { + font-size: $font_size; + font-weight: 700; + } + .desc{ + color: $color_font_two; + font-size: $font_size_medium; + } + .miconfont_check, .miconfont_custom{ + font-size: 37px; + color: $color_main; + font-weight: normal; + padding-right: 10px; + } + .miconfont_custom{ + color:#FFC300; + } + .miconfont_more{ + font-size: 30px; + padding-left: 10px; + } + } +} \ No newline at end of file diff --git a/src/pages/order/components/weightMemo/index.tsx b/src/pages/order/components/weightMemo/index.tsx new file mode 100644 index 0000000..7cbfd13 --- /dev/null +++ b/src/pages/order/components/weightMemo/index.tsx @@ -0,0 +1,36 @@ +import Popup from "@/components/popup" +import { Text, Textarea, View } from "@tarojs/components" +import { memo, useCallback, useState } from "react" +import styles from './index.module.scss' +import classnames from "classnames"; + +type Param = { + onCheck?: () => void + onCustom?: () => void +} +export default memo(({onCheck, onCustom}:Param) => { + return ( + + onCheck?.()}> + + + 陆盈纺织 + + + 查看原码单 + + + + onCustom?.()}> + + + 我的码单 + + + 自定义 + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/order/index.config.ts b/src/pages/order/index.config.ts index b0cb522..b518f53 100644 --- a/src/pages/order/index.config.ts +++ b/src/pages/order/index.config.ts @@ -1,3 +1,5 @@ export default { - navigationBarTitleText: '确认订单' + navigationBarTitleText: '订单详情', + enablePullDownRefresh: true, + backgroundTextStyle: 'dark' } diff --git a/src/pages/order/index.module.scss b/src/pages/order/index.module.scss index d6246e0..a032fbe 100644 --- a/src/pages/order/index.module.scss +++ b/src/pages/order/index.module.scss @@ -37,19 +37,25 @@ display: flex; align-items: center; background-color: #fff; - padding: 0 20px; - height: 116px; + padding: 20px; + min-height: 116px; border-radius: 20px; margin-top: 20px; + box-sizing: border-box; .order_desc_con{ - flex:1; + width: 150px; font-size: $font_size; font-weight: 700; } - .order_desc_text{ + .order_desc_text, .order_desc_text_hint{ font-size: $font_size_medium; color: $color_font_two; margin-right: 10px; + flex:1; + word-break:break-all; + } + .order_desc_text_hint{ + text-align: right; } .miconfont{ font-size: 20px; @@ -61,26 +67,32 @@ position: fixed; bottom: 0; left: 0; - justify-content: space-between; + justify-content: flex-end; width: 100%; height: 175px; align-items: center; background-color: #fff; box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16); - padding: 20px 50px; + padding: 20px 20px; box-sizing: border-box; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); .order_btn { - width: 250px; - height: 90px; - opacity: 0.6; - background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%); + width: 152px; + height: 72px; + border: 2px solid #dddddd; border-radius: 46px; display: flex; justify-content: center; align-items: center; - color: #fff; + color: $color_font_three; + &:nth-child(n+2) { + margin-left: 34px; + } + } + .order_btn_select{ + color: $color_main; + border: 2px solid $color_main; } .order_number_desc{ font-size: $font_size_medium; @@ -115,4 +127,8 @@ } } + .weight_memo_con{ + margin-bottom: 20px; + } + } \ No newline at end of file diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx index c53952b..abeee6e 100644 --- a/src/pages/order/index.tsx +++ b/src/pages/order/index.tsx @@ -1,23 +1,81 @@ -import { SaleOrderPreViewApi } from "@/api/order"; +import { + GetSaleOrderDetailApi, + EditSaleOrderRemarkApi, + CancelOrderApi +} from "@/api/order"; +import { GetOrderPayApi } from "@/api/orderPay"; +import { alert, goLink } from "@/common/common"; +import { formatDateTime, formatPriceDiv } from "@/common/fotmat"; +import OrderBtns from "@/components/orderBtns"; import Popup from "@/components/popup"; import SearchInput from "@/components/searchInput"; import { Text, Textarea, View } from "@tarojs/components" -import Taro, { useRouter } from "@tarojs/taro"; +import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro"; import classnames from "classnames"; -import { useCallback, useEffect, useRef, useState } from "react"; -import AddressInfo from "./components/addressInfo"; -import EstimatedAmount from "./components/estimatedAmount"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import order from "../orderList/components/order"; +import AddressInfoDetail from "./components/addressInfoDetail"; import KindList from "./components/kindList"; +import orderState from "./components/orderState"; import OrderState from "./components/orderState"; +import Payment from "./components/payment"; import Remark from "./components/remark"; import styles from './index.module.scss' export default () => { - const [price, setPrice] = useState(123000.33) const [showDesc, setShowDesc] = useState(false) + + const router = useRouter() + const orderId = useRef(Number(router.params.id)) + + useDidShow(() => { + getSaleOrderPreView() + }) + + //获取订单详情 + const [orderDetail, setOrderDetail] = useState() //获取到的原始数据 + const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi() + const getSaleOrderPreView = async () => { + if(orderId.current) { + let res = await getOrderFetchData({id: orderId.current}) + setOrderDetail(res.data) + setOrderRemark(res.data.remark) + } + Taro.stopPullDownRefresh() + } + + //监听获取到的数据 + useEffect(() => { + if(orderDetail) + formatData() + }, [orderDetail]) + + //格式化数据格式 + const [formatDetailOrder, setFormatDetailOrder] = useState() //格式化后的数据 + const formatData = () => { + setFormatDetailOrder({ + estimate_amount: orderDetail.estimate_amount, //预估金额 + sale_mode: orderDetail.sale_mode, + sale_mode_name: orderDetail.sale_mode_name, + total_colors: orderDetail.total_colors, //总颜色数量 + total_number: orderDetail.total_number, //总数量 + total_fabrics: orderDetail.total_fabrics, //面料数量 + unit: orderDetail.sale_mode == 0?'条':'m', //单位 + list: orderDetail.product_list, + status: orderDetail.status, //订单状态 + total_sale_price: orderDetail.total_sale_price, //销售金额 + total_should_collect_money: orderDetail.total_should_collect_money, //应收金额 + total_weight_error_discount: orderDetail.total_weight_error_discount, //空差优惠 + }) + } + const formatPreViewOrderMemo = useMemo(() => { + return formatDetailOrder + }, [formatDetailOrder]) + + //复制功能 const clipboardData = () => { Taro.setClipboardData({ - data: '123123121321', + data: orderDetail?.order_no||'', success: function (res) { Taro.showToast({ icon: 'none', @@ -26,66 +84,136 @@ import styles from './index.module.scss' } }) } - //获取购物车传过来的id - type orderPreParam = {shopping_cart_product_color_list:{shopping_cart_product_color_id:number}[], sale_mode:number} - const router = useRouter() - const idsAndSaleModel = useRef({shopping_cart_product_color_list:[], sale_mode:0}) - useEffect(() => { - idsAndSaleModel.current.sale_mode = Number(router.params.sale_mode) - router.params.ids?.split('-')?.map(item => { - return idsAndSaleModel.current.shopping_cart_product_color_list?.push({ - shopping_cart_product_color_id: Number(item) - }) - }) - getSaleOrderPreView() + + //格式化初始地址 + const defaultAddress = useMemo(() => { + return { + province_name: orderDetail?.province_name, + city_name: orderDetail?.city_name, + district_name: orderDetail?.district_name, + address_detail: orderDetail?.address_detail, + // id: address.id, + name: orderDetail?.target_user_name, + phone: orderDetail?.target_user_phone + } + + }, [orderDetail]) + + //订单备注 + const {fetchData: remarkFetchData} = EditSaleOrderRemarkApi() + const [orderRemark, setOrderRemark] = useState('') + const getRemark = useCallback(async (e) => { + setOrderRemark(() => e) + let res = await remarkFetchData({remark:e, id: orderId.current}) + if(res.success) { + getSaleOrderPreView() + alert.success('提交成功') + } else { + alert.error(res.msg) + } + setShowDesc(() => false) }, []) - //获取销售订单预览图 - const {fetchData} = SaleOrderPreViewApi() - const getSaleOrderPreView = async () => { - if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) { - let res = await fetchData(idsAndSaleModel.current) - console.log('res::', res) - } + //去付款 + const [payMentShow, setPayMentShow] = useState(false) + const toPay = () => { + setPayMentShow(true) } + //打开地址修改 + const addressRef = useRef(null) + + //修改收货方式 + const getShipmentMode = useCallback(() => { + getSaleOrderPreView() + }, [orderDetail]) + + //修改地址 + const getAddress = useCallback(() => { + getSaleOrderPreView() + }, [orderDetail]) + + //获取底部按钮点击, 获取按钮状态 + const orderStateClick = useCallback((val) => { + console.log('val::', val) + if(val == 1) { + //取消订单 + getSaleOrderPreView() + } + if(val == 2) { + //待付款 + toPay() + } + }, [orderDetail]) + + //页面下拉刷新 + usePullDownRefresh(() => { + getSaleOrderPreView() + }) + + //支付成功 + const onPaySuccess = useCallback(() => { + getSaleOrderPreView() + closePayShow() + }, [orderDetail]) + + //关闭支付弹窗 + const closePayShow = useCallback(() => { + setPayMentShow(() => false) + }, [orderDetail]) + + //按钮所需数据 + const orderInfo = useMemo(() => { + return { + status: orderDetail?.status, + orderId: orderDetail?.id, + payModel: orderDetail?.id, //支付方式 + realPayPrice: orderDetail?.id, //实付金额 + pendingPayPrice: orderDetail?.id, //待付金额 + } + }, [orderDetail]) + return ( - - - 收货方式 - 物流 - 上门自提 - - - - setShowDesc(true)}> - 订单备注 - 点击填写 - + {/* + + */} + + + + - 订单备注 - + 订单信息 + - 13535359535 + {orderDetail?.order_no} clipboardData()}>复制 - - 2022-4-5 10:11:55 + + {formatDateTime(orderDetail?.create_time)} + + + {formatDateTime(orderDetail?.create_time)} + setShowDesc(true)}> + 订单备注 + { + orderRemark&&{orderDetail?.remark}|| + 填写备注 + } + + - - - 2种面料，6种颜色，共6条 - - 提交订单 + + {/* toPay()}>去支付 */} setShowDesc(false)} > - console.log(e)}/> + getRemark(e)}/> + ) diff --git a/src/pages/orderList/components/order/index.module.scss b/src/pages/orderList/components/order/index.module.scss new file mode 100644 index 0000000..e453de3 --- /dev/null +++ b/src/pages/orderList/components/order/index.module.scss @@ -0,0 +1,121 @@ +.order_item{ + background-color: #fff; + border-radius: 20px; + padding: 20px; + box-sizing: border-box; + .header{ + display: flex; + align-items: center; + .user{ + display: flex; + align-items: center; + .name { + color: #000; + font-weight: 700; + margin-left: 15px; + font-size: $font_size; + } + image{ + width: 70px; + height: 70px; + border-radius: 50%; + } + } + .order_num { + flex: 1; + font-size: $font_size_medium; + color: $color_font_one; + text-align: right; + padding-right: 30px; + display: flex; + justify-content: flex-end; + align-items: center; + .miconfont { + font-size: 20px; + } + } + .tag{ + font-size: $font_size_min; + padding: 5px 15px; + background-color: $color_main; + color: #fff; + border-radius: 0px 20px 0px 20px; + } + } + .product_title{ + display: flex; + align-items: center; + padding: 35px 0; + .product_tag{ + background-color: #CDE5FF; + font-size: $font_size_min; + padding: 5px 10px; + color: $color_main; + border-radius: 6px; + } + .product_name{ + flex:1; + font-size: $font_size; + font-weight: 700; + padding-left: 20px; + } + .product_status{ + font-size: $font_size; + color: $color_main; + } + } + .product_list{ + display: flex; + .image{ + width: 126px; + height: 126px; + background: #e5ad3a; + border-radius: 20px 20px 0px 0px; + position: relative; + image{ + width: 100%; + height: 100%; + border-radius: 20px 20px 0px 0px; + } + .color_num { + background: rgba(0,0,0, 0.5); + border-radius: 50px 0px 0px 0px; + font-size: $font_size_min; + color: #fff; + position: absolute; + right:0; + bottom:0; + padding: 5px 10px; + box-sizing: border-box; + } + } + .color_list{ + flex:1; + padding-left: 30px; + .color_item{ + display: flex; + justify-content: space-between; + font-size: $font_size_min; + color: $color_font_three; + align-items: center; + margin-bottom: 20px; + .color_title{ + font-weight: 700; + font-size: $font_size; + color: #000; + } + .color_more{ + color: $color_font_three; + } + } + } + + } + .color_count_num{ + font-size: $font_size_min; + color: $color_font_two; + background-color: #F6F6F6; + border-radius: 10px; + padding: 10px 22px; + } +} \ No newline at end of file diff --git a/src/pages/orderList/components/order/index.tsx b/src/pages/orderList/components/order/index.tsx new file mode 100644 index 0000000..7ad9512 --- /dev/null +++ b/src/pages/orderList/components/order/index.tsx @@ -0,0 +1,90 @@ +import { goLink } from "@/common/common"; +import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat"; +import OrderBtns from "@/components/orderBtns"; +import { useSelector } from "@/reducers/hooks"; +import { Image, Text, View } from "@tarojs/components" +import classnames from "classnames"; +import { memo, useCallback, useMemo, useRef } from "react"; +import styles from './index.module.scss' + +type Param = { + value?: { + order_no: string, + sale_mode: number, + sale_mode_name: string, + status_name: string, + shipment_mode_name: string, + product_list: any[], + total_fabrics: number, + total_colors: number, + total_number: number, + status: 0, + id: number + }, + onClickBtn?: (val:number) => void +} +export default memo(({value, onClickBtn}: Param) => { + const userInfo = useSelector(state => state.userInfo) + //对应数量 + const formatCount = useCallback((item, sale_mode) => { + return sale_mode == 0? item.roll : Number(item.length / 100) + }, [value]) + //对应单价 + const standardPrice = useCallback((price, sale_mode) => { + return formatPriceDiv(price).toLocaleString() + '/' + (sale_mode == 1?'m':'kg') + }, [value]) + + //点击订单按钮 + const orderBtnsClick = useCallback((status) => { + onClickBtn?.(status) + }, [value]) + + return ( + + goLink('/pages/order/index', {id: value?.id})}> + + + {userInfo?.adminUserInfo?.user_name} + + + 订单号：{value?.order_no} + + + {value?.shipment_mode_name} + + goLink('/pages/order/index', {id: value?.id})}> + + {value?.sale_mode_name} + {formatHashTag(value?.product_list[0].code, value?.product_list[0].name)} + {value?.status_name} + + + + + {value?.product_list[0].product_colors[0].code} + + + {value?.product_list[0].product_colors.map((itemColor, index) => { + return ( + (index <= 1)&& + {formatHashTag(itemColor.code, itemColor.name)} + {standardPrice(itemColor.sale_price, value.sale_mode)} + ×{formatCount(itemColor, value.sale_mode)}条 + + ) + }) + } + + …… + …… + …… + + + + {`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`} + + + + ) +}) + diff --git a/src/pages/orderList/components/orderStatusList/index.module.scss b/src/pages/orderList/components/orderStatusList/index.module.scss new file mode 100644 index 0000000..47de83d --- /dev/null +++ b/src/pages/orderList/components/orderStatusList/index.module.scss @@ -0,0 +1,18 @@ +.order_status_list{ + font-size: $font_size; + color: #9E9E9E; + margin-top: 20px; + .order_status_item{ + padding: 20px; + box-sizing: border-box; + } + .selected{ + font-weight: 700; + color: #000; + border-bottom: 4px solid #707070; + } + .order_list_scroll{ + white-space: nowrap; + display: flex; + } +} \ No newline at end of file diff --git a/src/pages/orderList/components/orderStatusList/index.tsx b/src/pages/orderList/components/orderStatusList/index.tsx new file mode 100644 index 0000000..3e12f6f --- /dev/null +++ b/src/pages/orderList/components/orderStatusList/index.tsx @@ -0,0 +1,46 @@ +import { ScrollView, View } from "@tarojs/components" +import { memo, useEffect, useState } from "react" +import styles from './index.module.scss' +import classnames from "classnames"; + +type Param = { + list: {id: number, name: string}[], + defaultId?: number|null, + onSelect?: (val: number) => void +} +export default memo(({list = [], defaultId = null, onSelect}: Param) => { + const [selectInfo, setSelectInfo] = useState({ + selected: -1, //当前选中的id + tabId: '', //需要滚动到的id + }) + useEffect(() => { + if(defaultId) { + const index = list?.findIndex(item => { + console.log(item.id, defaultId) + return item.id == defaultId + }) + if(index !== -1) { + const num = index > 0?( index - 1) : 0 + setSelectInfo((e) => ({...e, tabId:list[num].id.toString()})) + } + } + }, [defaultId]) + const clickEvent = ({item, index}: {item:any, index:number}) => { + const num = index > 0?( index - 1) : 0 + setSelectInfo((e) => ({...e, tabId:list[num].id.toString(), selected: item.id})) + onSelect?.(item.id) + } + + return ( + + + + {list.map((item, index) => { + return clickEvent({item, index})} className={classnames(styles.order_status_item, (selectInfo.selected==item.id)&&styles.selected)}>{item.name} + })} + + + + ) +}) + diff --git a/src/pages/orderList/index.config.ts b/src/pages/orderList/index.config.ts new file mode 100644 index 0000000..c47055c --- /dev/null +++ b/src/pages/orderList/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: '订单列表', +} diff --git a/src/pages/orderList/index.module.scss b/src/pages/orderList/index.module.scss new file mode 100644 index 0000000..f7222c8 --- /dev/null +++ b/src/pages/orderList/index.module.scss @@ -0,0 +1,38 @@ +.order_list_main{ + min-height: 100vh; + background-color: $color_bg_one; + display: flex; + flex-direction: column; + .title{ + padding: 0 20px; + background-color: #fff; + box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.16); + border-bottom: 2px solid #e2e2e2; + .order_status_list{ + font-size: $font_size; + color: #9E9E9E; + margin-top: 20px; + .order_status_item{ + padding: 20px; + box-sizing: border-box; + } + .selected{ + font-weight: 700; + color: #000; + border-bottom: 4px solid #707070; + } + .order_list_scroll{ + white-space: nowrap; + display: flex; + } + } + } + .order_list{ + flex:1; + height: 0; + .order_item_con{ + margin-top: 20px; + padding: 0 20px; + } + } +} \ No newline at end of file diff --git a/src/pages/orderList/index.tsx b/src/pages/orderList/index.tsx new file mode 100644 index 0000000..866597b --- /dev/null +++ b/src/pages/orderList/index.tsx @@ -0,0 +1,112 @@ +import Search from "@/components/search" +import useLogin from "@/use/useLogin" +import { Image, ScrollView, Text, View } from "@tarojs/components" +import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro" +import { useCallback, useEffect, useMemo, useRef, useState } from "react" +import styles from './index.module.scss' +import classnames from "classnames"; +import Order from "./components/order" +import InfiniteScroll from "@/components/infiniteScroll" +import {GetOrderStatusListApi, GetOrderListApi} from '@/api/order' +import { dataLoadingStatus, getFilterData } from "@/common/util" +import OrderStatusList from "./components/orderStatusList" + +export default () => { + const {checkLogin} = useLogin() + useDidShow(async () => { + await checkLogin() + }) + + //搜索参数 + const [searchField, setSearchField] = useState({ + status: -1, + page : 1, + size : 10, + Name:'' + }) + + //获取订单状态 + const {fetchData: statusFetchData} = GetOrderStatusListApi() + const [statusList, setStatusList] = useState([{id: -1, name: '全部'}]) + const getOrderStatusList = async () => { + let res = await statusFetchData() + let list = [...statusList, ...res.data.list||[]] + setStatusList(() => list) + } + useEffect(() => { + getOrderStatusList() + }, []) + + //获取订单列表 + const {fetchData: listFetchData, state:orderState} = GetOrderListApi() + const [orderData, setOrderData] = useState<{list:any[], total:number}>({list:[], total:0}) + const getOrderList = async () => { + let res = await listFetchData(getFilterData(searchField)) + setOrderData({list: res.data.list, total: res.data.total}) + setRefresherTriggeredStatus(() => false) + } + + + //监听筛选条件变化 + useEffect(() => { + getOrderList() + }, [searchField]) + + //上拉加载数据 + const pageNum = useRef({size: searchField.size, page: searchField.page}) + const getScrolltolower = useCallback(() => { + if(orderData.list.length < orderData.total) { + pageNum.current.page++ + const size = pageNum.current.size * pageNum.current.page + setSearchField({...searchField, size }) + } + }, [orderData]) + + //状态改变 + const changeStatus = useCallback((e) => { + pageNum.current.page = 1 + setSearchField((value) => ({...value, status:e, size:10})) + setOrderData(() => ({list:[], total:0})) + }, []) + + + //数据加载状态 + const statusMore = useMemo(() => { + return dataLoadingStatus({list:orderData.list, total: orderData.total, status: orderState.loading}) + }, [orderData, orderState]) + + //输入了搜索关键字 + const getSearchData = useCallback((e) => { + pageNum.current.page = 1 + setOrderData(() => ({list:[], total:0})) + setSearchField((val) => ({...val, name:e, size:10})) + }, []) + + const clickOrderBtn = useCallback((state) => { + getOrderList() + }, [orderData]) + + //列表下拉刷新 + const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false) + const getRefresherRefresh = async () => { + pageNum.current.size = 1 + setRefresherTriggeredStatus(true) + setSearchField((val) => ({...val, size:10})) + } + + return ( + + + + + + + + {orderData?.list.map(item => { + return + })} + + + + ) +} diff --git a/src/pages/searchList/components/selectData/index.module.scss b/src/pages/searchList/components/selectData/index.module.scss index 0d19650..f7f3ea5 100644 --- a/src/pages/searchList/components/selectData/index.module.scss +++ b/src/pages/searchList/components/selectData/index.module.scss @@ -3,7 +3,7 @@ width: 100%; .tabs_scroll{ width: 100%; - display: flex; + // display: flex; white-space: nowrap; ::-webkit-scrollbar { display:none; @@ -12,12 +12,12 @@ color:transparent; } .tabs_item{ - flex:1; + min-width: 130px; + padding: 0 10px; display: inline-block; - font-size: 24rpx; + font-size: 24px; background-color: #ecf5ff; border-radius: 24rpx; - min-width: 126rpx; height: 46.93rpx; text-align: center; line-height: 46.93rpx; @@ -30,7 +30,7 @@ align-items: center; justify-content: center; font-size: $font_size_medium; - + @include common_ellipsis(); } .tabs_index{ height: 5px; diff --git a/src/pages/searchList/components/selectData/index.tsx b/src/pages/searchList/components/selectData/index.tsx index 60db6ee..e82b2d2 100644 --- a/src/pages/searchList/components/selectData/index.tsx +++ b/src/pages/searchList/components/selectData/index.tsx @@ -4,7 +4,7 @@ import classnames from "classnames"; import styles from './index.module.scss' -type ListProps = { +export type ListProps = { title: string, value: number } @@ -44,7 +44,7 @@ export default memo(({list = [], defaultValue = 0, tabsOnClick}: Params) => { list.map((item, index) => { return ( clickEvent({item,index})}> - {item.title} + {`${item.title}: ${item.value}`} ) }) diff --git a/src/pages/searchList/hightSearchList.module.scss b/src/pages/searchList/hightSearchList.module.scss index b40fa10..c4e305b 100644 --- a/src/pages/searchList/hightSearchList.module.scss +++ b/src/pages/searchList/hightSearchList.module.scss @@ -74,6 +74,7 @@ .filter_scroll{ flex:1; width: 0; + padding-left: 20px; ::-webkit-scrollbar { display:none; width:0; @@ -190,6 +191,7 @@ .title{ font-size: $font_size; color: $color_font_three; + @include common_ellipsis() } .tag_list{ display: flex; @@ -209,6 +211,7 @@ font-size: $font_size_medium; color: $color_font_two; margin-top: 16px; + @include common_ellipsis() } } } diff --git a/src/pages/searchList/hightSearchList.tsx b/src/pages/searchList/hightSearchList.tsx index 34b8614..f7d31db 100644 --- a/src/pages/searchList/hightSearchList.tsx +++ b/src/pages/searchList/hightSearchList.tsx @@ -1,6 +1,5 @@ import { Image, ScrollView, Text, View } from "@tarojs/components" import classnames from "classnames"; -import Search from '@/components/search' import Filter from "@/components/filter"; import InfiniteScroll from '@/components/infiniteScroll' import SortBtn from "@/components/sortBtn"; @@ -8,25 +7,69 @@ import SearchInput from "@/components/searchInput"; import LinkBlueTooth from "@/components/bluetooth/LinkBlueTooth"; import {useBluetooth} from "@/use/contextBlueTooth" import {toRgb} from '@/common/bluetooth/color/colorSpace' -import Tabs from "@/components/tabs"; import styles from './hightSearchList.module.scss' -import { useCallback, useEffect, useState } from "react"; -import Taro, { useReady } from "@tarojs/taro"; -import useManualPullDownRefresh from "@/use/useManualPullDownRefresh"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import Taro, { useDidShow, usePullDownRefresh, useReady } from "@tarojs/taro"; +import {GetLabProductApi} from "@/api/material" +import { dataLoadingStatus, getFilterData } from "@/common/util"; +import { formatHashTag, formatImgUrl } from "@/common/fotmat"; +import LoadingCard from "@/components/loadingCard"; +import useLogin from "@/use/useLogin"; +import { goLink } from "@/common/common"; +import SelectData, {ListProps} from "./components/selectData"; export default () => { + const {checkLogin} = useLogin() + useDidShow(async () => { + await checkLogin() + }) + const [showFilter, setShowFilter] = useState(false) - const [selectList, setSelectList] = useState([ - {title: '系列', value:1}, - {title: '系列', value:2}, - {title: '系列', value:3}, - {title: '系列', value:4}, - {title: '系列', value:5}, - {title: '系列', value:5}, - {title: '系列', value:5}, - {title: '系列', value:5}, - {title: '系列', value:5}, - ]) + + //搜索参数 + const [searchField, setSearchField] = useState({ + l: '', + a: '', + b: '', + page : 1, + size : 10, + width: '', + weight_density: '', + product_kind_id: '', + component: '' + }) + + //获取面料列表 + const [materialList, setMaterialList] = useState<{list:any[], total:number}>({list:[], total:0}) + const {fetchData: materialFetchData, state: materialState} = GetLabProductApi() + const getProductList = async () => { + let {data} = await materialFetchData(getFilterData(searchField)) + setMaterialList({list:data.list, total:data.total}) + Taro.stopPullDownRefresh() + } + + //监听筛选条件变化 + useEffect(() => { + getProductList() + }, [searchField]) + + //上拉加载数据 + const pageNum = useRef({size: searchField.size, page: searchField.page}) + const [hasMore, setHasMore] = useState(true) + const getScrolltolower = () => { + if(materialList.list.length < materialList.total) { + pageNum.current.page++ + const size = pageNum.current.size * pageNum.current.page + setSearchField({...searchField, size }) + } + } + + + //数据加载状态 + const statusMore = useMemo(() => { + return dataLoadingStatus({list:materialList.list, total: materialList.total, status: materialState.loading}) + }, [materialList]) + const [scrollStatus, setScrollStatus] = useState(false) const onscroll = useCallback((e) => { if(e.detail.scrollTop > 20) { @@ -36,9 +79,9 @@ export default () => { } },[]) - const {state, measureAndGetLab} = useBluetooth() + const {state: colorState, measureAndGetLab} = useBluetooth() const getLab = () => { - if(state.connected) { + if(colorState.connected) { measureAndGetLab() } else { Taro.showToast({ @@ -48,17 +91,52 @@ export default () => { } } + //监听lab数据变化 const [blueToothColor, setBlueToothColor] = useState('') useEffect(() => { - if(state.deviceLab) { - console.log('颜色：',state.deviceLab) - const rgb = toRgb([state.deviceLab.L, state.deviceLab.a, state.deviceLab.b]) + if(colorState.deviceLab) { + console.log('颜色：',colorState.deviceLab) + const rgb = toRgb([colorState.deviceLab.L, colorState.deviceLab.a, colorState.deviceLab.b]) setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`) + setSearchField({...searchField, l:rgb[0], a:rgb[1], b:rgb[2], size:10}) } - }, [state.deviceLab]) + }, [colorState.deviceLab]) + + const goLinkPage = (item) => { + goLink('/pages/details/index',{id:item.id}) + } + + //获取筛选条件 + const getFiltr = (e) => { + const {data} = e + setSearchField({ + ...searchField, + width: data?.width, + weight_density: data?.weight, + size: 10, + component: data?.element, + product_kind_id: data?.seriesId + }) + formatSelectList(e) + } + + //筛选条件格式化 + const [selectList , setSelectList] = useState() + const formatSelectList = (val = {data:{}, field:{}}) => { + console.log('data123::',val.data) + let data:ListProps[] = [] + for(let key in val.data) { + if(key !== 'seriesId'&& val.data[key] != '') { + data.push({title:val.field[key], value:val.data[key]}) + } + } + setSelectList([...data]) + } //页面下拉刷新 - const res = useManualPullDownRefresh() + usePullDownRefresh(() => { + setSearchField({...searchField ,size : 10}) + }) return ( @@ -86,16 +164,9 @@ export default () => { - - - 系列 - 幅宽 - 克重 - 克重 - 克重 - 成分 - - + + + setShowFilter(true)}> 筛选 @@ -103,22 +174,24 @@ export default () => { - 搜索结果 (2条记录) + 搜索结果 ({materialList.total}条记录) + console.log('123123')} + selfonScrollToLower={() => getScrolltolower()} selfOnScroll={(e) => onscroll(e)} + statusMore={statusMore} > - {new Array(9).fill(' ').map(item => { - return + {materialList.list.map(item => { + return goLinkPage(item)}> - - 25色 + + {(item.product_color_code)}# - 0770#21S精棉平纹 - 平纹系列 + {formatHashTag(item.product_code, item.product_name)} + {item.product_kind_name} })} @@ -126,7 +199,7 @@ export default () => { - setShowFilter(false)}/> + getFiltr(e)} onClose={() => setShowFilter(false)}/> ) } \ No newline at end of file diff --git a/src/pages/searchList/search.tsx b/src/pages/searchList/search.tsx index 787d428..301c413 100644 --- a/src/pages/searchList/search.tsx +++ b/src/pages/searchList/search.tsx @@ -1,15 +1,73 @@ import { View } from '@tarojs/components' import Search from '@/components/search' -import { goLink } from '@/common/common'; +import { alert, goLink } from '@/common/common'; import classnames from "classnames"; import styles from './search.module.scss' +import { useEffect, useRef, useState } from 'react'; +import {GetHotSearchApi, GetSearchHistoryApi, AddSearchHistoryApi} from "@/api/search" +import { SCENE } from '@/common/constant'; +import useLogin from '@/use/useLogin'; +import Taro, { useDidShow } from '@tarojs/taro'; +type searchDataParam = {'search_key':''} export default () => { + const {checkLogin} = useLogin() + useDidShow(async () => { + await checkLogin() + }) + + const [searchData, setSearchData] = useState<{hotField: searchDataParam[], historyField: searchDataParam[]}>({ + hotField: [], + historyField: [] + }) + + //获取热门搜索数据 + const {fetchData:hotFetchData} = GetHotSearchApi() + const getHotSearch = async () => { + let {data} = await hotFetchData() + setSearchData((val) => ({...val, hotField: data.list})) + } + + //获取历史搜索数据 + const {fetchData:HistoryFetchData} = GetSearchHistoryApi() + const getSearchHistory = async () => { + let {data} = await HistoryFetchData() + setSearchData((val) => ({...val, historyField: data.list})) + } + + useEffect(() => { + getHotSearch(), + getSearchHistory() + }, []) + + //添加搜索关键字 + const addSearchField = useRef({key: '', screen: SCENE.SearchScene}) + const {fetchData:addFetchData} = AddSearchHistoryApi() + const addSearchHistory = async () => { + await addFetchData(addSearchField.current) + // goLink('/pages/searchList/searchList', {key: addSearchField.current.key}) + + } + + //搜索事件, status = true 添加搜索， status = false 直接跳转 + const searchEvent = (e, status = true) => { + if(e == "") { + alert.error('请输入关键词') + return false + } + addSearchField.current.key = e + status&&addSearchHistory() + Taro.navigateTo({ + url: `/pages/searchList/searchList?key=${addSearchField.current.key}` + }) + } + + return ( - {}}/> + searchEvent(e)}/> @@ -17,12 +75,9 @@ export default () => { goLink('/pages/searchList/searchList')}>高级搜索 - 9265 - 全棉双卫衣 - 全棉双卫衣 - 全棉双卫衣 - 全棉双卫衣 - 26s + {searchData?.hotField?.map((item, index) => { + return searchEvent(item.search_key, false)}>{item.search_key} + })} @@ -31,12 +86,7 @@ export default () => { - 9265 - 全棉双卫衣 - 全棉双卫衣 - 全棉双卫衣 - 全棉双卫衣 - 26s + {searchData?.historyField?.map((item, index) => searchEvent(item.search_key, false)}>{item.search_key})} diff --git a/src/pages/searchList/searchList.module.scss b/src/pages/searchList/searchList.module.scss index 11f55be..cb88783 100644 --- a/src/pages/searchList/searchList.module.scss +++ b/src/pages/searchList/searchList.module.scss @@ -174,6 +174,7 @@ .title{ font-size: $font_size; color: $color_font_three; + @include common_ellipsis(); } .tag_list{ display: flex; @@ -184,6 +185,7 @@ font-size: $font_size_min; border-radius: 5px; color: $color_main; + @include common_ellipsis(); &:nth-child(2) { margin-left: 10px; } @@ -193,6 +195,7 @@ font-size: $font_size_medium; color: $color_font_two; margin-top: 16px; + @include common_ellipsis(); } } } diff --git a/src/pages/searchList/searchList.tsx b/src/pages/searchList/searchList.tsx index bfc274a..2fe2769 100644 --- a/src/pages/searchList/searchList.tsx +++ b/src/pages/searchList/searchList.tsx @@ -4,25 +4,85 @@ import Search from '@/components/search' import Filter from "@/components/filter"; import InfiniteScroll from '@/components/infiniteScroll' import SortBtn from "@/components/sortBtn"; -import SelectData from "./components/selectData"; +import SelectData, {ListProps} from "./components/selectData"; import { goLink } from "@/common/common"; import styles from './searchList.module.scss' -import { useCallback, useState } from "react"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import useManualPullDownRefresh from "@/use/useManualPullDownRefresh"; +import {GetProductListApi} from "@/api/material" +import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro"; +import { formatHashTag, formatImgUrl } from "@/common/fotmat"; +import { dataLoadingStatus, getFilterData } from "@/common/util"; +import LoadingCard from "@/components/loadingCard"; +import useLogin from "@/use/useLogin"; export default () => { + const {checkLogin} = useLogin() + useDidShow(async () => { + await checkLogin() + }) + const [showFilter, setShowFilter] = useState(false) - const [selectList, setSelectList] = useState([ - {title: '系列', value:1}, - {title: '系列', value:2}, - {title: '系列', value:3}, - {title: '系列', value:4}, - {title: '系列', value:6}, - {title: '系列', value:7}, - {title: '系列', value:8}, - {title: '系列', value:9}, - {title: '系列', value:10}, - ]) + const router = useRouter() + + //搜索参数 + const [searchField, setSearchField] = useState({ + code_or_name: router.params.key, + page : 1, + size : 10, + width: '', + weight_density: '', + product_kind_id: '', + component: '' + }) + + //获取面料列表 + const [materialList, setMaterialList] = useState<{list:any[], total:number}>({list:[], total:0}) + const {fetchData: materialFetchData, state: materialState} = GetProductListApi() + const getProductList = async () => { + let {data} = await materialFetchData(getFilterData(searchField)) + setMaterialList({list:data.list, total:data.total}) + Taro.stopPullDownRefresh() + } + + //监听筛选条件变化 + useEffect(() => { + getProductList() + }, [searchField]) + + + //上拉加载数据 + const pageNum = useRef({size: searchField.size, page: searchField.page}) + const getScrolltolower = () => { + if(materialList.list.length < materialList.total) { + pageNum.current.page++ + const size = pageNum.current.size * pageNum.current.page + setSearchField({...searchField, size }) + } + } + + //数据加载状态 + const statusMore = useMemo(() => { + return dataLoadingStatus({list:materialList.list, total: materialList.total, status: materialState.loading}) + }, [materialList]) + + //输入了搜索关键字 + const getSearchData = useCallback((e) => { + pageNum.current.page = 1 + setMaterialList(() => ({list:[], total:0})) + setSearchField((val) => ({...val, code_or_name:e, size:10})) + }, []) + + const goLinkPage = (item) => { + goLink('/pages/details/index',{id:item.id}) + } + + //页面下拉刷新 + usePullDownRefresh(() => { + setSearchField({...searchField ,size : 10}) + }) + + //监听滚动 const [scrollStatus, setScrollStatus] = useState(false) const onscroll = useCallback((e) => { if(e.detail.scrollTop > 20) { @@ -32,12 +92,39 @@ export default () => { } },[]) - //页面下拉刷新 - const res = useManualPullDownRefresh() + //获取筛选条件 + const getFiltr = (e) => { + pageNum.current.page = 1 + const {data} = e + setSearchField({ + ...searchField, + width: data?.width, + weight_density: data?.weight, + size: 10, + component: data?.element, + product_kind_id: data?.seriesId + }) + formatSelectList(e) + } + + //筛选条件格式化 + const [selectList , setSelectList] = useState() + const formatSelectList = (val = {data:{}, field:{}}) => { + console.log('data123::',val.data) + let data:ListProps[] = [] + for(let key in val.data) { + if(key !== 'seriesId'&& val.data[key] != '') { + data.push({title:val.field[key], value:val.data[key]}) + } + } + console.log('data::',data) + setSelectList([...data]) + } + return ( - + @@ -45,7 +132,7 @@ export default () => { 综合 - + 收藏 @@ -66,26 +153,27 @@ export default () => { - 搜索结果 (2条记录) + 搜索结果 ({materialList.total}条记录) console.log('123123')} + selfonScrollToLower={() => getScrolltolower()} selfOnScroll={(e) => onscroll(e)} + statusMore={statusMore} > - {new Array(9).fill(' ').map(item => { - return + {materialList.list.map(item => { + return goLinkPage(item)}> - - 25色 + + {(item.product_color_count)}色 - 0770#21S精棉平纹 + {formatHashTag(item.code, item.name)} - 160cm - 110g + {item.width} + {item.weight_density} - 67.6%棉24%涤纶6.4%氨纶 + {item.component} })} @@ -93,7 +181,7 @@ export default () => { - setShowFilter(false)}/> + setShowFilter(false)} onFiltr={(e) => getFiltr(e)} /> ) } \ No newline at end of file diff --git a/src/pages/subjectList/components/filter/index.module.scss b/src/pages/subjectList/components/filter/index.module.scss new file mode 100644 index 0000000..599cdd0 --- /dev/null +++ b/src/pages/subjectList/components/filter/index.module.scss @@ -0,0 +1,126 @@ +.popup_main{ + width: 608px; + height: 100vh; + padding: 20px; + box-sizing: border-box; + display: flex; + flex-direction: column; + .popup_title{ + font-size: $font_size; + font-weight: 700; + text-align: center; + padding: 20px 0; + } + .scroll{ + flex:1; + height: 0; + } + .popup_filter{ + padding-bottom: 100px; + } + .popup_filter_item{ + margin-bottom: 20px; + .title{ + font-size: $font_size; + color: $color_font_one; + font-weight: 700; + padding: 20px 0; + } + .btn_list{ + display: grid; + grid-template-columns: repeat(3, 165.75px); + justify-content: space-between; + .btn_item{ + width: 165.75px; + height: 69.2px; + background: #f0f0f0; + border-radius: 34px; + text-align: center; + line-height: 69.2px; + font-size: $font_size_medium; + color: $color_font_one; + margin-bottom: 20px; + } + .select_btn_item{ + color: $color_main; + background: #ecf5ff; + border: 2px solid #007aff; + width: 161.75px; + height: 65.2px; + } + } + .btn_list_input{ + display: flex; + // justify-content: space-between; + align-items: center; + .btn_width { + width: 220px; + height: 70px; + background: #f0f0f0; + border-radius: 50px; + padding: 10px 20px; + box-sizing: border-box; + input{ + width: 100%; + height: 100%; + font-size: $font_size_medium; + } + } + .unit{ + color: $color_font_one; + font-size: $font_size; + margin-left: 20px; + } + text{ + color: #ccc; + padding: 0 20px; + } + .width_main{ + + } + } + .btn_list_element{ + background-color: #F0F0F0; + border-radius: 30px; + padding: 20px; + box-sizing: border-box; + textarea{ + width: 100%; + height: 126px; + font-size: $font_size_medium; + } + } + } + .btns_con{ + width: 100%; + position: fixed; + bottom:0; + padding-bottom: constant(safe-area-inset-bottom); + padding-bottom: env(safe-area-inset-bottom); + .btns_two{ + display: flex; + width: 552px; + height: 82px; + border: 2px solid #cde5ff; + font-size: $font_size_big; + border-radius: 40px; + margin-bottom: 20px; + .rest_btn{ + flex:1; + border-radius: 0px 40px 40px 0px; + text-align: center; + line-height: 82px; + color: $color_main; + + } + .verify_btn{ + flex:1; + border-radius: 0px 40px 40px 0px; + background: #007aff; + text-align: center; + line-height: 82px; + color: #fff; + } + } + } +} \ No newline at end of file diff --git a/src/pages/subjectList/components/filter/index.tsx b/src/pages/subjectList/components/filter/index.tsx new file mode 100644 index 0000000..d64ab87 --- /dev/null +++ b/src/pages/subjectList/components/filter/index.tsx @@ -0,0 +1,115 @@ +import Popup, {Params as PopuParams} from "@/components/popup" +import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components" +import classnames from "classnames"; +import { useEffect, useState } from "react"; +import styles from './index.module.scss' + +type params = { + onFiltr?: (val:object) => void +} & PopuParams +export default ({onClose, onFiltr, show = false}:params) => { + const [filterObj, setFilterObj] = useState({ + series: '', + minWidth: '', + maxWidth: '', + minWeight: '', + maxWeight: '', + element: '' + + }) + const onCloseEven = () => { + onClose?.() + } + const onRest = () => { + console.log('12123') + setFilterObj({ + series: '', + minWidth: '', + maxWidth: '', + minWeight: '', + maxWeight: '', + element: '' + }) + } + useEffect(() => { + console.log(filterObj) + }, [filterObj]) + + const onVerify = () => { + console.log(filterObj) + onFiltr?.(filterObj) + } + + const setNumber = (e, field) => { + console.log(e) + let num = parseFloat(e.detail.value) + if(isNaN(num)) { + filterObj[field] = null + } else { + filterObj[field] = parseFloat(num.toFixed(2)) + } + setFilterObj({...filterObj}) + } + + const setElement = (e) => { + let res = e.detail.value + setFilterObj({...filterObj, element:res}) + } + return ( + + onCloseEven()} showIconButton={true}> + + 全部筛选 + + + + + 系列 + + 不限 + 不限 + 不限 + 不限 + 不限 + 不限 + + + + 幅宽 + + setNumber(e,'minWidth')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/> + — + setNumber(e,'maxWidth')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/> + cm + + + + 克重 + + setNumber(e,'minWeight')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/> + — + setNumber(e,'maxWeight')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/> + g + + + + 成分 + +