xuan/TestEShopDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev' of http://git.online.zzfzyc.com/mp/EShop into dev

Browse Source
This commit is contained in:
li tong bao 2022-05-31 20:12:23 +08:00
commit 83f7bdac14
114 changed files with 4961 additions and 726 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
config/index.js
View File

@ -11,6 +11,7 @@ const config = {
outputRoot: 'dist',
plugins: [],
defineConstants: {
CURRENT_ENV: JSON.stringify(process.env.NODE_ENV)
},
copy: {
patterns: [

10
src/api/material.ts
View File

@ -45,3 +45,13 @@ export const GetProductDetailApi = () => {
})
}
/**
* 根据LAB匹配色卡基础资料
* @returns
*/
export const GetLabProductApi = () => {
return useRequest({
url: `/v1/mall/product/color/absorb/match`,
method: "get",
})
}

13
src/api/onlinePay.ts Normal file
View File

@ -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",
})
}

71
src/api/order.ts
View File

@ -19,3 +19,74 @@ import { useRequest } from "@/use/useHttp"
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",
})
}

21
src/api/orderPay.ts Normal file
View File

@ -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",
})
}

26
src/api/search.ts
View File

@ -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",
})
}

13
src/api/subjectMaterial.ts Normal file
View File

@ -0,0 +1,13 @@
import { useRequest } from "@/use/useHttp"
/**
* 获取专题列表
* @returns
*/
export const GetSubjectList = () => {
return useRequest({
url: `/v1/mall/subject/list`,
method: "get",
})
}

23
src/app.config.ts
View File

@ -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",
]
},
{

17
src/common/client.js
View File

@ -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
}

15
src/common/common.ts
View File

@ -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})
}
}

9
src/common/constant.js
View File

@ -17,8 +17,8 @@ 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"
// 上传图片视频
@ -26,3 +26,8 @@ export const CDN_UPLOAD_IMG = `${UPLOAD_CDN_URL || ''}`;
//appid
export const WX_APPID = 'wx68d92d7cbf0b6963'
//场景值
export const SCENE = {
SearchScene : 0 //商城面料搜索
}

7
src/common/enum.ts Normal file
View File

@ -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:'已完成'}
}

4
src/common/fotmat.js
View File

@ -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'
}

16
src/common/system.js → src/common/system.ts
View File

@ -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
}

15
src/common/util.js → src/common/util.ts
View File

@ -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(() => {
@ -91,3 +91,16 @@ 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
}
}

2
src/components/checkbox/index.module.scss
View File

@ -26,6 +26,6 @@
text-align: center;
line-height: 40px;
.miconfont{
font-size: 26px;
font-size: 32px;
}
}

4
src/components/filter/index.module.scss
View File

@ -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;

115
src/components/filter/index.tsx
View File

@ -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<any[]>([])
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)
//重置数据
const onRestEven = () => {
let res = {
seriesName: '',
seriesId: '',
width: '',
weight: '',
element: '',
}
setFilterObj(res)
onFiltr?.(filterObj)
onClose?.()
}
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 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 (
<Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton={true}>
<View className={styles.popup_main}>
<View className={styles.popup_title}>全部筛选</View>
<ScrollView scrollY className={styles.scroll}>
<View className={styles.popup_filter}>
<View className={styles.popup_filter_item}>
<View className={styles.title}>系列</View>
<View className={styles.btn_list}>
<View className={classnames(styles.btn_item, styles.select_btn_item)}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
{kindList.map(item => <View key={item.id} onClick={() => changeKind(item)} className={classnames(styles.btn_item, (filterObj.seriesId == item.id)&&styles.select_btn_item)}>{item.name}</View>)}
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>幅宽</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input value={filterObj.minWidth} type="digit" onBlur={(e) => setNumber(e,'minWidth')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
<Text>—</Text>
<View className={styles.btn_width}><Input value={filterObj.maxWidth} type="digit" onBlur={(e) => setNumber(e,'maxWidth')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.btn_width}><Input value={filterObj.width} onBlur={(e) => setFieldData(e,'width')} placeholder="请输入幅宽" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>cm</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>克重</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input type="digit" value={filterObj.minWeight} onBlur={(e) => setNumber(e,'minWeight')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
<Text>—</Text>
<View className={styles.btn_width}><Input type="digit" value={filterObj.maxWeight} onBlur={(e) => setNumber(e,'maxWeight')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>g</View>
<View className={styles.btn_width}><Input value={filterObj.weight} onBlur={(e) => setFieldData(e,'weight')} placeholder="请输入克重" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>kg</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>成分</View>
<View className={styles.btn_list_element}>
<Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setElement(e)}/>
<Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setFieldData(e, 'element')}/>
</View>
</View>
@ -104,12 +108,11 @@ export default ({onClose, onFiltr, show = false}:params) => {
</ScrollView>
<View className={styles.btns_con}>
<View className={styles.btns_two}>
<View className={styles.rest_btn} onClick={() => onRest()}>重置</View>
<View className={styles.rest_btn} onClick={() => onRestEven()}>重置</View>
<View className={styles.verify_btn } onClick={() => onVerify()}>确认</View>
</View>
</View>
</View>
</Popup>
)
}
})

130
src/components/filterV2/index copy.tsx Normal file
View File

@ -0,0 +1,130 @@
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 styles from './index.module.scss'
type params = {
onFiltr?: (val:object) => void
} & PopuParams
export default ({onClose, onFiltr, show = false}:params) => {
//搜索条件
const [filterObj, setFilterObj] = useState({
seriesId: '',
minWidth: '',
maxWidth: '',
minWeight: '',
maxWeight: '',
element: ''
})
//获取系列
const {fetchData: kindFetchData} = GetProductKindListApi()
const [kindList, setKindList] = useState<any[]>([])
const getCategoryList = async () => {
let {data} = await kindFetchData()
setKindList(data.list)
}
useEffect(() => {
show&&getCategoryList()
}, [show])
//切换系列
const changeKind = (e) => {
setFilterObj({...filterObj, seriesId:e.id})
}
const onCloseEven = () => {
onClose?.()
}
const onRest = () => {
console.log('12123')
setFilterObj({
seriesId: '',
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 (
<Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton={true}>
<View className={styles.popup_main}>
<View className={styles.popup_title}>全部筛选</View>
<ScrollView scrollY className={styles.scroll}>
<View className={styles.popup_filter}>
<View className={styles.popup_filter_item}>
<View className={styles.title}>系列</View>
<View className={styles.btn_list}>
{kindList.map(item => <View key={item.id} onClick={() => changeKind(item)} className={classnames(styles.btn_item, (filterObj.seriesId == item.id)&&styles.select_btn_item)}>{item.name}</View>)}
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>幅宽</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input value={filterObj.minWidth} type="digit" onBlur={(e) => setNumber(e,'minWidth')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
<Text>—</Text>
<View className={styles.btn_width}><Input value={filterObj.maxWidth} type="digit" onBlur={(e) => setNumber(e,'maxWidth')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>cm</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>克重</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input type="digit" value={filterObj.minWeight} onBlur={(e) => setNumber(e,'minWeight')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
<Text>—</Text>
<View className={styles.btn_width}><Input type="digit" value={filterObj.maxWeight} onBlur={(e) => setNumber(e,'maxWeight')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>g</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>成分</View>
<View className={styles.btn_list_element}>
<Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setElement(e)}/>
</View>
</View>
<View className="common_safe_area_y"></View>
</View>
</ScrollView>
<View className={styles.btns_con}>
<View className={styles.btns_two}>
<View className={styles.rest_btn} onClick={() => onRest()}>重置</View>
<View className={styles.verify_btn } onClick={() => onVerify()}>确认</View>
</View>
</View>
</View>
</Popup>
)
}

126
src/components/filterV2/index.module.scss Normal file
View File

@ -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;
}
}
}
}

128
src/components/filterV2/index.tsx Normal file
View File

@ -0,0 +1,128 @@
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 styles from './index.module.scss'
type params = {
onFiltr?: (val:object) => void
} & PopuParams
export default ({onClose, onFiltr, show = false}:params) => {
//搜索条件
const [filterObj, setFilterObj] = useState({
seriesId: '',
minWidth: '',
maxWidth: '',
minWeight: '',
maxWeight: '',
element: ''
})
//获取系列
const {fetchData: kindFetchData} = GetProductKindListApi()
const [kindList, setKindList] = useState<any[]>([])
const getCategoryList = async () => {
let {data} = await kindFetchData()
setKindList(data.list)
}
useEffect(() => {
show&&getCategoryList()
}, [show])
//切换系列
const changeKind = (e) => {
setFilterObj({...filterObj, seriesId:e.id})
}
const onCloseEven = () => {
onClose?.()
}
const onRest = () => {
console.log('12123')
setFilterObj({
seriesId: '',
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 (
<Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton={true}>
<View className={styles.popup_main}>
<View className={styles.popup_title}>全部筛选</View>
<ScrollView scrollY className={styles.scroll}>
<View className={styles.popup_filter}>
<View className={styles.popup_filter_item}>
<View className={styles.title}>系列</View>
<View className={styles.btn_list}>
{kindList.map(item => <View key={item.id} onClick={() => changeKind(item)} className={classnames(styles.btn_item, (filterObj.seriesId == item.id)&&styles.select_btn_item)}>{item.name}</View>)}
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>幅宽</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input value={filterObj.minWidth} type="digit" onBlur={(e) => setNumber(e,'minWidth')} placeholder="请输入幅宽" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>cm</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>克重</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input type="digit" value={filterObj.minWeight} onBlur={(e) => setNumber(e,'minWeight')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
<Text>—</Text>
<View className={styles.btn_width}><Input type="digit" value={filterObj.maxWeight} onBlur={(e) => setNumber(e,'maxWeight')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>g</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>成分</View>
<View className={styles.btn_list_element}>
<Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setElement(e)}/>
</View>
</View>
<View className="common_safe_area_y"></View>
</View>
</ScrollView>
<View className={styles.btns_con}>
<View className={styles.btns_two}>
<View className={styles.rest_btn} onClick={() => onRest()}>重置</View>
<View className={styles.verify_btn } onClick={() => onVerify()}>确认</View>
</View>
</View>
</View>
</Popup>
)
}

7
src/components/infiniteScroll/index.module.scss
View File

@ -1,7 +1,6 @@
.scroll_main{
height: 100%;
.infinite_scroll{
font-size: $font_size_medium;
color: $color_font_two;
@ -12,5 +11,11 @@
display: flex;
align-items: center;
}
.noMore{
padding-top: 20px;
}
}
.scrollViewCon {
// height: 100%;
}
}

32
src/components/infiniteScroll/index.tsx
View File

@ -2,12 +2,16 @@ import { ScrollView, View } from "@tarojs/components"
import { memo, ReactNode, useState } from "react"
import style from "./index.module.scss"
import DotLoading from "@/components/dotLoading"
import LoadingCard from "../loadingCard"
export type StatusParam = 0|1|2|3
type Params = {
styleObj?: Object,
selfonScrollToLower?: () => void,
hasMore?: false|true,
moreStatus?: false|true,
statusMore?: StatusParam //0:数据从无到有加载数据，1，没有任何数据， 2：下拉加载，3：下拉没有数据
children?: ReactNode,
lowerThresholdNum?: number,
selfOnScrollToUpper?:() => void
@ -35,7 +39,8 @@ export default memo(({
paddingBottom = 0,
refresherTriggered = false,
refresherEnabled = false,
moreStatus = true
moreStatus = true,
statusMore = 0
}: Params) => {
const scrollToLower = () => {
selfonScrollToLower?.()
@ -77,19 +82,28 @@ export default memo(({
onRefresherAbort = {() => refresherAbort()}
refresherBackground ='#F8F8F8'
>
<View style={{paddingBottom:paddingBottom + 'rpx'}}>
{!moreStatus&&<>
<View style={{paddingBottom:paddingBottom + 'rpx'}} className={style.scrollViewCon}>
{children}
{moreStatus&&<View className={style.infinite_scroll}>
{
hasMore&&<View className={style.loading_more}>加载中<DotLoading/></View>||
<View>没有更多数据了</View>
}
</View>}
</View>
</>||
<>
{(statusMore == 2 || statusMore == 3)&&<View style={{paddingBottom:paddingBottom + 'rpx'}} className={style.scrollViewCon}>
{children}
<View className={style.infinite_scroll}>
{
(statusMore == 2)&&<View className={style.loading_more}>加载中<DotLoading/></View>||
<View className={style.noMore}>没有更多数据了</View>
}
</View>
</View>
}
{(statusMore == 0)&&<LoadingCard/>}
{(statusMore == 1)&&<LoadingCard loadingIcon={false} title="暂无数据"/>}
</>}
<View className="common_safe_area_y"></View>
</ScrollView>
</>
)
})

8
src/components/loadingCard/index.tsx
View File

@ -5,17 +5,19 @@ import { memo } from "react";
type Params = {
styleLoading?: Object,
title?: string
title?: string,
loadingIcon?: false|true
}
export default memo(({
styleLoading = {},
title = "加载中..."
title = "加载中...", //显示的文字
loadingIcon = true //是否显示加载图标
}:Params) => {
console.log('loadingCard:::')
return (
<>
<View className={style.loadingCard_main}>
<Loading/>
{loadingIcon&&<Loading/>}
<View className={style.loading_text}>{title}</View>
</View>
</>

22
src/components/orderBtns/index.module.scss Normal file
View File

@ -0,0 +1,22 @@
.btns_list{
display: flex;
justify-content: flex-end;
margin-top: 30px;
.btns_item{
width: 152px;
height: 72px;
border: 2px solid #dddddd;
border-radius: 38px;
text-align: center;
line-height: 72px;
font-size: $font_size;
color: $color_font_three;
&:nth-child(n+2) {
margin-left: 32px;
}
}
.end_btn{
border: 2px solid $color_main;
color: $color_main;
}
}

102
src/components/orderBtns/index.tsx Normal file
View File

@ -0,0 +1,102 @@
import { CancelOrderApi } from "@/api/order"
import { alert } from "@/common/common"
import { View } from "@tarojs/components"
import Taro from "@tarojs/taro"
import { useCallback, useRef, memo } from "react"
import styles from './index.module.scss'
type Param = {
orderInfo: {
status?: number, //订单状态
orderId: number, //订单id
payModel: number, //支付方式
realPayPrice: number, //实付金额
pendingPayPrice: number, //待付金额
},
onClick?: (val: number) => void //点击后触发的事件，返回订单状态
}
export default memo(({orderInfo, onClick}:Param) => {
//订单按钮按订单状态归类
const orderBtnsList = useRef([
{
id: 1,
value: [0, 1, 2, 3, 4], //取消订单按钮对应： 待接单，待配布，已配布, 待付款， 待发货
label: '取消订单'
},
{
id: 2,
value: [3, 4], //去付款按钮对应：待付款， 待发货
label: '去付款'
},
{
id: 3,
value: [4], //取消订单按钮对应： 待发货
label: '申请退款'
},
{
id: 4,
value: [5, 6, 7, 8], //取消订单按钮对应： 待收货, 已收货, 已完成, 已退款
label: '查看物流'
},
{
id: 5,
value: [5, 6, 8], //取消订单按钮对应： 待收货, 已收货, 已退款
label: '申请退货'
},
{
id: 6,
value: [5], //取消订单按钮对应： 待收货
label: '确认收货'
},
{
id: 7,
value: [5,6,7,8], //取消订单按钮对应： 待收货，已收货，已完成, 已退款
label: '再次购买'
}
])
//判断是否显示该按钮
const orderBtnsShow = useCallback((item, status) => {
if(item.id == 1) {
return( orderInfo.realPayPrice == 0 && status <= 4) //在代发货之前没有付过款
}
if(item.id == 2) {
return( orderInfo.pendingPayPrice != 0 && status <= 4) //在代发货之前没有付完款
}
return item.value.includes(status)
},[])
//点击按钮操作
const submitBtns = (val) => {
(val == 1)&&cancelOrder(); //取消订单按钮
(val == 2)&&onClick?.(val); //去付款按钮
}
//取消订单
const {fetchData: cancelFetchData} = CancelOrderApi()
const cancelOrder = () => {
Taro.showModal({
title: '要取消该订单吗？',
success: async function (res) {
if (res.confirm) {
let res = await cancelFetchData({id: orderInfo.orderId})
if(res.success) {
alert.success('取消成功')
onClick?.(1)
} else {
alert.none(res.msg)
}
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
return (
<View className={styles.btns_list}>
{orderBtnsList.current.map((item, index) =>
orderBtnsShow(item, status)&&<View className={styles.btns_item} onClick={() => submitBtns(item.id)}>{item.label}</View>
)}
</View>
)
})

8
src/components/product/index.module.scss
View File

@ -25,21 +25,19 @@
border-radius: 10px;
}
.num{
width: 100px;
height: 36px;
padding: 5px 10px;
font-size: $font_size_min;
position: absolute;
right:0;
bottom: 0;
background: rgba($color: #fff, $alpha: 0.3);
background: rgba($color: #000, $alpha: 0.3);
border-radius: 36px 0px 10px 0px;
color: #fff;
text-align: center;
line-height: 36px;
}
}
.item_con{
padding-left: 15px;
padding-left: 20px;
font-size: $font_size;
flex:1;
.title{

5
src/components/product/index.tsx
View File

@ -2,6 +2,7 @@ import { Image, View } from "@tarojs/components"
import Taro from "@tarojs/taro"
import { goLink } from "@/common/common"
import styles from './index.module.scss'
import { formatHashTag, formatImgUrl } from "@/common/fotmat"
type Params = {
desStatus?: true|false,
@ -13,11 +14,11 @@ export default ({desStatus = true, productList = []}:Params) => {
{productList?.map(item => {
return <View className={styles.products_item} onClick={() => goLink(`/pages/details/index?id=${item.id}`)}>
<View className={styles.item_img}>
<Image src={item.texture_url}/>
<Image src={formatImgUrl(item.texture_url)}/>
<View className={styles.num}>{item.product_color_count}色</View>
</View>
<View className={styles.item_con}>
<View className={styles.title}><text>{item.code}#</text>{item.name}</View>
<View className={styles.title}><text>{formatHashTag(item.code, '')} </text>{item.name}</View>
<View className={styles.tag_list}>
<View className={styles.tag}>{item.width}</View>
<View className={styles.tag}>{item.weight_density}</View>

25
src/components/search/index.tsx
View File

@ -17,22 +17,27 @@ type Params = {
btnStyle?: Object,
btnTitle?: string,
debounceTime?: number //防抖时间，不设默认为零
defaultValue?: string
}
export default forwardRef(({
clickOnSearch,
changeOnSearch,
disabled = false,
export default memo(forwardRef(({
clickOnSearch, //点击筛选按钮触发
changeOnSearch, //输入文字触发
disabled = false, //是否禁用
placeholder = '输入搜索内容',
showIcon = true,
showBtn = false,
showIcon = true, //是否显示关闭图标
showBtn = false, //是否显示搜索按钮
btnStyle = {},
placeIcon = 'inner',
btnTitle = '搜索',
debounceTime = 0,
btnTitle = '搜索', //搜索文字
debounceTime = 0, //防抖时间，不设默认为零
defaultValue = '' //默认值
}:Params, ref) => {
const [inputCon , setInputCon] = useState('')
const debounceTimeRef = useRef(0)
useEffect(() => {
setInputCon(defaultValue)
}, [defaultValue])
useEffect(() => {
debounceTimeRef.current = debounceTime
@ -63,7 +68,7 @@ export default forwardRef(({
return (
<>
<View className={styles.search_main} onClick={() => clickOnSearch?.(inputCon)}>
<View className={styles.search_main} >
<View className={styles.search_con}>
{showIcon&&<View className={classnames('iconfont', 'icon-sousuo', styles.icon_a_sousuo1_self, placeIcon=='inner'?styles.icon_inner:styles.icon_out)}></View>}
<Input placeholderStyle='color:#ABABAB; font-size:26rpx' className={classnames(placeIcon=='out'&&styles.input_out)} disabled={disabled} value={inputCon} placeholder={placeholder} onInput={(e) => onInputEven(e)}></Input>
@ -75,4 +80,4 @@ export default forwardRef(({
</View>
</>
)
})
}))

11
src/components/searchInput/index.tsx
View File

@ -12,6 +12,8 @@ type Params = {
changeOnInput?: (string) => void,
clickOnInput?: () => void,
children?: ReactNode
height?: number,
titleStyle?: Object
}
@ -24,7 +26,9 @@ export default memo((props: Params) => {
placeholder = '请输入',
showBorder = true,
changeOnInput,
clickOnInput
clickOnInput,
height = 80,
titleStyle = {}
} = props
let stylen = useMemo(() => {
@ -33,10 +37,9 @@ export default memo((props: Params) => {
}
return {}
}, [showBorder])
console.log('searchInput::')
return (
<View className={styles.searchInput_main} style={stylen}>
{showTitle&&<View className={styles.searchInput_title}>{title}</View>}
<View className={styles.searchInput_main} style={{height: height + 'rpx', ...stylen}}>
{showTitle&&<View className={styles.searchInput_title} style={titleStyle}>{title}</View>}
<View className={styles.searchInput_con}>
{!props.children&&<Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/>
||<View>{props.children}</View>

8
src/components/shopCart/index.module.scss
View File

@ -35,13 +35,10 @@
border: 2px solid $color_main;
background-color: #ecf5ff;
color: $color_main;
width: 144px;
height: 51px;
}
}
.con{
padding:30px;
padding-bottom: 100px;
box-sizing: border-box;
flex:1;
height: 0;
@ -49,7 +46,7 @@
height: 100%;
}
.product_list{
padding-bottom: 20px;
padding-bottom: 120px;
.product_item{
display: flex;
justify-content: space-between;
@ -148,7 +145,7 @@
.buy_btn{
width: 100%;
position: fixed;
bottom: 0;
bottom: 20px;
display: flex;
justify-content: center;
padding-bottom: constant(safe-area-inset-bottom);
@ -163,6 +160,7 @@
align-items: center;
padding: 20px 0;
box-sizing: border-box;
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.5);
.icon{
width: 100px;
height: 100%;

29
src/components/shopCart/index.tsx
View File

@ -9,7 +9,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import Taro from "@tarojs/taro";
import { alert, goLink } from "@/common/common";
import {GetShoppingCartApi, DelShoppingCartApi} from "@/api/shopCart"
import { formatHashTag, formatImgUrl, formatMillionYuan } from "@/common/fotmat";
import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
import { setParam } from "@/common/system";
import { debounce } from "@/common/util";
type param = {
show?: true|false,
@ -175,35 +177,34 @@ export default ({show = false, onClose}: param) => {
//格式化金额
const formatPirce = useCallback((price) => {
const {num} = formatMillionYuan(price, 100)
return Number(num)
return Number(formatPriceDiv(price))
}, [])
//格式化数量
const formatCount = useCallback((item) => {
return item.sale_mode == 0? item.roll + '件': item.length + 'm'
return item.sale_mode == 0? item.roll + '件': (item.length/100) + 'm'
}, [])
//预估金额
const estimatePrice = useMemo(() => {
let count = 0
list.map(item => {
if(item.select) count += item.sale_price
if(item.select) count += item.estimate_amount
})
return Number(formatMillionYuan(count, 100).num)
return Number(formatPriceDiv(count))
},[list])
//去结算
const orderDetail = () => {
const orderDetail = debounce(() => {
getSelectId()
if(selectIds.current.length == 0) {
alert.error('请选择面料')
} else {
let ids = selectIds.current.join('-')
goLink('/pages/order/index',{ids, sale_mode:selectIndex})
}
setParam({ids, sale_mode:selectIndex})
goLink('/pages/order/comfirm')
}
}, 500)
return (
<View className={styles.shop_cart_main}>
@ -212,8 +213,8 @@ export default ({show = false, onClose}: param) => {
<View className={styles.header}>
<View onClick={selectAll}>{!selectStatus?'全选':'反选'}</View>
<View onClick={delSelect}>
<text className={classnames('iconfont', 'icon-lajixiang', styles.miconfont)}></text>
删除勾选项
<text className={classnames('iconfont', 'icon-shanchu', styles.miconfont)}></text>
删除所选
</View>
</View>
<View className={styles.search}>
@ -223,7 +224,7 @@ export default ({show = false, onClose}: param) => {
</View>
<View className={styles.con}>
{loading&&<LoadingCard/>}
{!loading&&list?.length > 0&&<InfiniteScroll refresherTriggered={true} refresherEnabled={true} moreStatus={false} >
{!loading&&list?.length > 0&&<InfiniteScroll moreStatus={false} >
<View className={styles.product_list}>
{list?.map((item, index) => {
return <View key={index} className={classnames(styles.product_item, (selectIndex!=-1&&selectIndex!= item.sale_mode)&&styles.no_product_item_select)}>
@ -239,7 +240,7 @@ export default ({show = false, onClose}: param) => {
<View className={styles.tag}>{item.sale_mode_name}</View>
</View>
<View className={styles.count}>
<View className={styles.price}><text>￥</text>{formatPirce(item.sale_price)}<text>/kg</text></View>
<View className={styles.price}><text>￥</text>{formatPirce(item.sale_price)}<text>/{selectList[selectIndex].eunit}</text></View>
<View className={styles.long}>×{formatCount(item)}</View>
</View>
</View>

16
src/components/sideBar/index.tsx
View File

@ -1,10 +1,10 @@
import { ScrollView, View } from "@tarojs/components"
import { memo, ReactNode, useEffect, useRef, useState } from "react"
import React, { memo, ReactNode, useEffect, useRef, useState } from "react"
import styles from "./index.module.scss"
import classnames from "classnames";
import Taro, { useReady } from "@tarojs/taro";
import InfiniteScroll from "../infiniteScroll";
import InfiniteScroll, {StatusParam} from "../infiniteScroll";
import LoadingCard from "../loadingCard";
type Params = {
@ -17,7 +17,8 @@ type Params = {
refresherTriggered?: true|false,
selfOnRefresherRefresh?: () => void
selfOnScrolltolower?: () => void,
hasMore?: true|false
hasMore?: true|false,
statusMore?: StatusParam
}
export default memo(({list = [],
@ -29,7 +30,8 @@ export default memo(({list = [],
refresherTriggered = false,
selfOnRefresherRefresh,
selfOnScrolltolower,
hasMore = true
hasMore = true,
statusMore = 0
}: Params) => {
let num_half = useRef(0)
@ -81,8 +83,6 @@ export default memo(({list = [],
})
})
return (
<>
<View className={classnames(styles.sideBar_main,'side_bar_select')}>
@ -107,7 +107,7 @@ export default memo(({list = [],
<View className="common_safe_area_y"></View>
</ScrollView>
<View className={styles.sideBar_con}>
<InfiniteScroll hasMore={hasMore} selfonScrollToLower={() => selfOnScrolltolower?.()} refresherTriggered={refresherTriggered} refresherEnabled={true} selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}>
<InfiniteScroll statusMore={statusMore} hasMore={hasMore} selfonScrollToLower={() => selfOnScrolltolower?.()} refresherTriggered={refresherTriggered} refresherEnabled={true} selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}>
{children}
</InfiniteScroll>
</View>

2
src/constants/common.ts Normal file
View File

@ -0,0 +1,2 @@
export const SET_COMMON = 'setCommon'
export const CLEAR_COMMON = 'clearCommon'

114
src/pages/classList/index.tsx
View File

@ -3,30 +3,104 @@ import classnames from "classnames";
import Search from '@/components/search'
import Product from '@/components/product'
import InfiniteScroll from '@/components/infiniteScroll'
import Popup from "@/components/popup";
import styles from './index.module.scss'
import { useState } from "react";
import Filter from "./components/filter";
import Tabs from "@/components/tabs";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import Filter from "@/components/filter";
import SortBtn from "@/components/sortBtn";
import SelectData, {ListProps} from "../searchList/components/selectData";
import {GetProductListApi} from '@/api/material'
import { useRouter } from "@tarojs/taro";
import { dataLoadingStatus, getFilterData } from "@/common/util";
import LoadingCard from "@/components/loadingCard";
export default () => {
const [showPopup, setShowPopup] = 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: '',
product_category_id: router.params.id,
page : 1,
size : 10,
width: '',
weight_density: '',
product_kind_id: '',
component: ''
})
//获取列表
const [categoryList, setCategoryList] = useState<{list:any[], total:number}>({
list:[],
total:0
})
const {fetchData, state} = GetProductListApi()
const getSubjectList = async () => {
let res = await fetchData(getFilterData(searchField))
setCategoryList({...categoryList, list:res.data.list, total: res.data.total})
}
//监听筛选数据变化
useEffect(() => {
getSubjectList()
}, [searchField])
//上拉加载数据
const pageNum = useRef({size: searchField.size, page: searchField.page})
const [hasMore, setHasMore] = useState(true)
const getScrolltolower = () => {
if(categoryList.list.length < categoryList.total) {
pageNum.current.page++
const size = pageNum.current.size * pageNum.current.page
setSearchField({...searchField, size })
}
}
//数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({list:categoryList.list, total: categoryList.total, status: state.loading})
}, [categoryList])
//获取筛选条件
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<ListProps[]>()
const formatSelectList = (val = {data:{}, field:{}}) => {
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 getSearchData = useCallback((e) => {
pageNum.current.page = 1
setCategoryList(() => ({list:[], total:0}))
setSearchField((val) => ({...val, code_or_name:e, size:10}))
}, [])
return (
<View className={styles.main}>
<View className={styles.search}>
<Search placeIcon="out" showBtn={true} btnStyle={{color: '#007AFF'}}/>
<Search placeIcon="out" showBtn={true} btnStyle={{color: '#007AFF'}} changeOnSearch={getSearchData} debounceTime={300}/>
</View>
<View className={styles.filter}>
<View className={styles.filter_all}>
@ -40,15 +114,15 @@ export default () => {
</View>
</View>
<View className={styles.filter_btns}>
<Tabs list={selectList} style={{}}/>
<SelectData list={selectList}/>
</View>
</View>
<View className={styles.list}>
<InfiniteScroll selfonScrollToLower={() => console.log('123123')}>
<Product desStatus={false}/>
<InfiniteScroll selfonScrollToLower={() => getScrolltolower()} statusMore={statusMore}>
<Product desStatus={false} productList={categoryList.list}/>
</InfiniteScroll>
</View>
<Filter show={showPopup} onClose={() => setShowPopup(false)} onFiltr={(e) => console.log('e:::',e)}/>
<Filter show={showPopup} onClose={() => setShowPopup(false)} onFiltr={getFiltr}/>
</View>
)
}

53
src/pages/creditLine/index.tsx
View File

@ -2,25 +2,45 @@
import AddressList from "@/components/AddressList"
import { Button, Canvas, ScrollView, Text, View } from "@tarojs/components"
import Taro, { useReady } from "@tarojs/taro"
import { useEffect } from "react"
import { useEffect, useState } from "react"
import {creditInfoApi} from "@/api/creditLine"
import "./index.scss"
import { useSelector } from "@/reducers/hooks";
export default ()=>{
const {userInfo} = useSelector(state => state.userInfo);
const userInfo = useSelector(state => state.userInfo);
useEffect(()=>{
console.log(userInfo,"==");
// getData()
getData()
}, [])
const {fetchData, state} = creditInfoApi();
const [data, setData] = useState({
credit_quota_used_line: [0,"00"],
credit_quota_line: [0,"00"],
credit_quota_available_line: [0,"00"],
progress: 0,
create_time: ""
});
// 获取数据
const getData = async ()=>{
const result = await fetchData();
console.log(state);
const progress = result.data.credit_quota_used_line / result.data.credit_quota_line * 100;
const credit_quota_used_line = convertPrice(result.data.credit_quota_used_line);
const credit_quota_line = convertPrice(result.data.credit_quota_line);
const credit_quota_available_line = convertPrice(result.data.credit_quota_available_line);
setData({
...result.data,
progress,
credit_quota_used_line,
credit_quota_line,
credit_quota_available_line
})
}
const convertPrice = (data)=>{
var t = data.toString().split(".");
t[0] = t[0].toLocaleString();
t[1] = t[1]?t[1].padStart(2,0):"00";
return t;
}
@ -31,11 +51,11 @@ export default ()=>{
</View>
<View className="credit-line-card">
<View className="credit-line-card-top">
<View><Progress /></View>
<View><Progress progress={data.progress} /></View>
<View className="credit-line-card-top-info">
<View className="credit-line-card-top-info-title">已用额度</View>
<View className="credit-line-card-top-info-price"><Text>¥</Text>999,999<Text>.20</Text></View>
<View className="credit-line-card-top-info-date">有效期: 2022-03-09至2022-05-13</View>
<View className="credit-line-card-top-info-price"><Text>¥</Text>{data?.credit_quota_used_line[0]}<Text>.{data.credit_quota_used_line[1]}</Text></View>
<View className="credit-line-card-top-info-date">有效期: {data.create_time} 2022-03-09至2022-05-13</View>
</View>
</View>
<View className="credit-line-card-bottom">
@ -44,14 +64,14 @@ export default ()=>{
<Text className="iconfont icon-yucunkuan"></Text>
<View>总额度</View>
</View>
<View className="credit-line-card-bottom-item-price"><Text>¥</Text>999,999<Text>.20</Text></View>
<View className="credit-line-card-bottom-item-price"><Text>¥</Text>{data.credit_quota_line[0]}<Text>.{data.credit_quota_line[1]}</Text></View>
</View>
<View className="credit-line-card-bottom-item">
<View className="credit-line-card-bottom-item-title">
<Text className="iconfont icon-tick-pressed"></Text>
<View>可用额度</View>
</View>
<View className="credit-line-card-bottom-item-price"><Text>¥</Text>999,999<Text>.20</Text></View>
<View className="credit-line-card-bottom-item-price"><Text>¥</Text>{data.credit_quota_available_line[0]}<Text>.{data.credit_quota_available_line[1]}</Text></View>
</View>
</View>
</View>
@ -59,9 +79,12 @@ export default ()=>{
)
}
const Progress = ()=>{
const Progress = (props)=>{
useEffect(()=>{
getCanvas();
},[props.progress])
const getCanvas = ()=>{
const percentage = 100;
const percentage = props.progress??0;
const query = Taro.createSelectorQuery();
query.select("#myCanvas").fields({ node: true, size: true }).exec((res) => {
const canvas = res[0]?.node;
@ -116,6 +139,7 @@ const Progress = ()=>{
ctx.fillText(percentage+"%", 0,0);
// 蓝色的圆
if(percentage>0){
ctx.beginPath();
ctx.lineWidth = 25;
ctx.lineCap = "round";
@ -125,6 +149,7 @@ const Progress = ()=>{
ctx.strokeStyle = gad;
ctx.arc(0,0,104,-Math.PI*0.5,2*Math.PI/100*((percentage<50?percentage:50)-25), false);
ctx.stroke();
}
if(percentage>50){
ctx.beginPath();

20
src/pages/details/components/orderCount/index.tsx
View File

@ -13,8 +13,8 @@ import {GetColorList} from "@/api/materialColor"
import {AddShoppingCartApi} from "@/api/shopCart"
import Taro, { useRouter } from "@tarojs/taro";
import UseLogin from "@/use/useLogin"
import { formatHashTag, formatMillionYuan } from "@/common/fotmat";
import { getFilterData } from "@/common/util";
import { formatHashTag, formatPriceDiv } from "@/common/fotmat";
import { debounce, getFilterData } from "@/common/util";
@ -56,7 +56,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
console.log('数据:::',getFilterData(condition.current))
let {data} = await colorFetchData(getFilterData(condition.current))
let lists = initList(data.list)
setList([...lists])
setList(() => [...lists])
setLoading(() => false)
}
const [showPopup, setShowPopup] = useState(false)
@ -114,7 +114,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
if(item.count > 0) {
sumCount = Big(sumCount).add(item.count).toNumber()
kindCount ++
color_list_info = selectIndex == 0? {product_color_id:item.id, roll:item.count}:{product_color_id:item.id, length:item.count}
color_list_info = selectIndex == 0? {product_color_id:item.id, roll:item.count}:{product_color_id:item.id, length:(item.count*100)}
color_list.push(color_list_info)
}
@ -144,7 +144,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
//添加购物车
const {getSelfUserInfo} = UseLogin()
const {fetchData:addFetchData} = AddShoppingCartApi()
const addShopCart = async () => {
const addShopCart = debounce( async () => {
try {
await getSelfUserInfo()
} catch(msg) {
@ -178,13 +178,13 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
})
}
}
}, 500)
//筛选数据
const searchInput = (e) => {
const searchInput = useCallback((e) => {
condition.current.code_or_name = e
getColorList()
}
}, [])
//清空搜索内容
const searchRef = useRef<any>(null)
@ -195,7 +195,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
//格式化金额
const formatPrice = useCallback((item) => {
const price = Number(formatMillionYuan(item[selectList[selectIndex].priceField], 100).num)
const price = Number(formatPriceDiv(item[selectList[selectIndex].priceField]))
return <View className={styles.priceText}><Text>¥</Text>{price}<Text> /{selectList[selectIndex].eunit}</Text></View>
}, [selectIndex])
@ -216,7 +216,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
</View>
{searchShow&&<View className={styles.colorFind}>
<View className={styles.search}>
<Search placeIcon="out" ref={searchRef} changeOnSearch={(e) => searchInput(e)} debounceTime={400}/>
<Search placeIcon="out" ref={searchRef} changeOnSearch={searchInput} debounceTime={400}/>
</View>
<View className={styles.text} onClick={() => clearSearch()}>取消</View>
</View>}

1
src/pages/details/components/swiper/index.tsx
View File

@ -21,7 +21,6 @@ export default ({list = []}: params) => {
setPageIndex(e.detail.current + 1)
}
return (
<View className={styles.swiper}>
<Swiper className={styles.swiper_item} circular={true} onAnimationFinish={(e) => swiperChange(e)}>

4
src/pages/details/index.tsx
View File

@ -8,7 +8,7 @@ import ShopCart from '@/components/shopCart';
import Preview,{colorItem} from './components/preview';
import styles from './index.module.scss'
import { useEffect, useMemo, useState } from 'react';
import {formatHashTag} from '@/common/fotmat'
import {formatHashTag, formatImgUrl} from '@/common/fotmat'
import useManualPullDownRefresh from '@/use/useManualPullDownRefresh';
import { goLink } from '@/common/common';
import useUserInfo from '@/use/useUserInfo';
@ -147,7 +147,7 @@ export default (props:params) => {
{productInfo?.product_color_list?.map(item => {
return <View className={styles.item} onClick={() => getColorItem(item)}>
<View className={styles.item_color}>
<Image src={item.texture_url}></Image>
<Image src={formatImgUrl(item.texture_url)}></Image>
</View>
<View className={styles.item_name}>{item.code}</View>
</View>

33
src/pages/editOrder/components/shipmentMode/index.module.scss Normal file
View File

@ -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;
}
}

32
src/pages/editOrder/components/shipmentMode/index.tsx Normal file
View File

@ -0,0 +1,32 @@
import { Text, View } from "@tarojs/components"
import styles from './index.module.scss'
import classnames from "classnames";
import { memo, useEffect, useRef, useState } from "react";
type Param = {
onSelect?:(val:number) => void
defaultValue?: 0|1|2
}
export default memo(({onSelect, defaultValue = 0}: Param) => {
//收货方法 0:没选择, 1:自提，2：物流
const shipmentMode = useRef([
{value:1, label:'上门自提', selected:false},
{value:2, label:'物流', selected:false}
])
const [selectValue, setSelectValue] = useState<number>()
useEffect(() => {
setSelectValue(defaultValue)
}, [defaultValue])
const selectShipmentMode = (value) => {
setSelectValue(() => value)
onSelect?.(value)
}
return (
<View className={styles.order_title}>
<Text>收货方式</Text>
{shipmentMode.current.map(item => {
return <View className={classnames(styles.order_status, (selectValue == item.value)&&styles.order_status_selected)} onClick={() => selectShipmentMode(item.value)}>{item.label}</View>
})}
</View>
)
})

5
src/pages/editOrder/index.config.ts Normal file
View File

@ -0,0 +1,5 @@
export default {
navigationBarTitleText: '修改地址',
enablePullDownRefresh: true,
backgroundTextStyle: 'dark'
}

120
src/pages/editOrder/index.module.scss Normal file
View File

@ -0,0 +1,120 @@
.order_edit_main{
min-height: 100%;
background-color:$color_bg_one;
padding-top: 20px;
display: flex;
flex-direction: column;
box-sizing: border-box;
.title_msg{
display: flex;
align-items: center;
padding: 20px;
background-color: #fff;
margin: 0 20px;
border-radius: 20px;
.miconfont{
font-size: 50px;
color: $color_main;
}
.title_msg_con{
font-size: 23px;
display: flex;
flex-direction: column;
margin-left: 30px;
text{
&:nth-child(1) {
color: $color_main;
}
&:nth-child(2) {
color: $color_font_three;
}
}
}
}
.shipmentMode_con{
margin: 0 20px;
}
.old_address{
display: flex;
flex-direction: column;
padding: 30px 20px 60px 20px;
box-sizing: border-box;
.old_address_text{
font-weight: 700;
&:nth-of-type(1) {
padding-bottom: 30px;
font-size: $font_size_big;
}
&:nth-of-type(2) {
padding-bottom: 30px;
font-size: $font_size;
}
}
.userInfo{
display: flex;
font-size: $font_size;
color: $color_font_three;
align-items: center;
.userInfo_text{
font-size: $font_size;
&:nth-child(2) {
padding-left: 20px;
}
}
}
}
.select_address_con{
flex:1;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
border-radius: 30px 30px 0px 0px;
position: relative;
.title{
font-size: $font_size;
font-weight: 700;
margin-top: 30px;
}
.address_list{
flex:1;
height: 0;
margin-top: 50px;
}
.submitBtn{
display: flex;
font-size: $font_size_big ;
justify-content: center;
height: 82px;
margin-bottom: 20px;
position: absolute;
bottom:0;
.addressBtn{
flex:1;
text-align: center;
height: 100%;
border: 3px solid #cde5ff;
width: 348px;
justify-content: center;
align-items: center;
}
.addAddress{
border-right: 0;
display: flex;
border-radius: 50px 0px 0px 50px;
color: $color_main;
background-color: #fff;
}
.submitUpdate{
display: flex;
justify-content: center;
align-items: center;
border-radius: 0px 50px 50px 0px;
background-color: $color_main;
color: #fff;
}
}
}
}

93
src/pages/editOrder/index.tsx Normal file
View File

@ -0,0 +1,93 @@
import { Text, View } from "@tarojs/components"
import styles from './index.module.scss'
import classnames from "classnames";
import { useCallback, useMemo, useRef, useState } from "react";
import ShipmentMode from "./components/shipmentMode";
import AddressList from "@/components/AddressList";
import { alert, goLink } from "@/common/common";
import { getParam } from "@/common/system";
import {EditSaleOrderAddressApi, EditSaleOrderShipmentModeApi} from "@/api/order";
import Taro from "@tarojs/taro";
export default () => {
//获取临时传递的数据
const params = getParam()
const [paramsData, setParamsData] = useState<any>(params)
//提交的数据
const [submitData, setSubmitData] = useState({
address_id:0,
id:params.id,
shipment_mode: params.shipment_mode
})
//格式化地址
const address = useMemo(() => {
return paramsData.province_name+' '+paramsData.city_name+' '+paramsData.district_name+' '+paramsData.address_detail
}, [paramsData])
//获取收货方法
const getShipmentMode = useCallback((num) => {
setSubmitData((val) => ({...val, shipment_mode:num}))
}, [])
//获取地址
const getSelectAddress = useCallback((e) => {
setSubmitData((val) => ({...val, address_id:e.id}))
}, [])
//修改请求
const {fetchData: addressFetchData} = EditSaleOrderAddressApi()
const {fetchData: shipmentFetchData} = EditSaleOrderShipmentModeApi()
const editData = async () => {
if(submitData.address_id) {
let res = await addressFetchData(submitData)
if(!res.success) {
alert.error(res.msg)
return false
}
}
let res = await shipmentFetchData(submitData)
if(!res.success) {
alert.error(res.msg)
return false
}
Taro.navigateBack()
}
return (
<View className={styles.order_edit_main}>
<View className={classnames(styles.title_msg)}>
<Text className={classnames(styles.miconfont, 'iconfont icon-zhuyi')}></Text>
<View className={styles.title_msg_con}>
<Text>修改收货地址可能会影响发货时效</Text>
<Text>若商品已发货，则不能修改</Text>
</View>
</View>
<View className={styles.shipmentMode_con}>
<ShipmentMode onSelect={getShipmentMode} defaultValue={paramsData.shipment_mode}/>
</View>
<View className={styles.old_address}>
<Text className={styles.old_address_text}>原地址:</Text>
<Text className={styles.old_address_text}>{address}</Text>
<View className={styles.userInfo}>
<Text className={styles.userInfo_text}>{paramsData.name}</Text>
<Text className={styles.userInfo_text}>{paramsData.phone}</Text>
</View>
</View>
<View className={styles.select_address_con}>
<View className={styles.title}>重新选择收货地址</View>
<View className={styles.address_list}>
<AddressList focusBorderEnabled={true} addButtonEnabled={false} onSelect={getSelectAddress}/>
</View>
<View className={styles.submitBtn}>
<View onClick={() => goLink('/pages/addressAdd/index', {type:'add'})} className={classnames(styles.addAddress, styles.addressBtn)}>添加新地址</View>
<View className={classnames(styles.submitUpdate, styles.addressBtn)} onClick={() => editData()}>提交修改</View>
</View>
</View>
<View className="common_safe_area_y"></View>
</View>
)
}

3
src/pages/index/context.ts Normal file
View File

@ -0,0 +1,3 @@
import React from "react";
export const ParamsContext = React.createContext<any>(null)

4
src/pages/index/index.config.ts
View File

@ -1,5 +1,3 @@
export default {
navigationBarTitleText: '电子商城',
enablePullDownRefresh: true,
backgroundTextStyle: 'dark'
navigationBarTitleText: '首页',
}

32
src/pages/index/index.tsx
View File

@ -7,17 +7,16 @@ import MoveBtn from '@/components/moveBtn'
import ShopCart from '@/components/shopCart'
import { goLink } from '@/common/common'
import styles from './index.module.scss'
import { useEffect, useRef, useState } from 'react'
import React, { useEffect, useMemo, useRef, useState } from 'react'
import Taro, { Events, useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
import useManualPullDownRefresh from '@/use/useManualPullDownRefresh'
import {GetProductKindListApi, GetProductListApi} from '@/api/material'
import useLogin from '@/use/useLogin'
import LoadingCard from '@/components/loadingCard'
import { dataLoadingStatus } from '@/common/util'
export default () => {
const {checkLogin} = useLogin()
useDidShow(async () => {
await checkLogin()
})
@ -42,7 +41,7 @@ export default () => {
const [productData, setProductData] = useState({list:[], total:0})
const [hasMore, setHasMore] = useState(true)
const [filtrate, setFiltrate] = useState({product_kind_id:0, size: 5,page: 1})
const pageNum = useRef(1)
const pageNum = useRef({size:filtrate.size, page:filtrate.page})
const {fetchData: productFetchData, state: productState} = GetProductListApi()
//获取数据方法
const getProductList = async () => {
@ -56,9 +55,10 @@ export default () => {
getProductList()
}, [filtrate])
//点击面料类型
const getProductKindId = async (e) => {
pageNum.current = 1
pageNum.current.page = 1
setFiltrate({...filtrate, size:5, product_kind_id:e.id})
setHasMore(true)
}
@ -68,8 +68,8 @@ export default () => {
if(productData.list.length >= productData.total) {
setHasMore(false)
} else {
pageNum.current++
const newSize = filtrate.size * pageNum.current
pageNum.current.page++
const newSize = pageNum.current.size * pageNum.current.page
setFiltrate({...filtrate, size:newSize})
}
}
@ -80,33 +80,36 @@ export default () => {
//列表下拉刷新
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
const getRefresherRefresh = async () => {
pageNum.current = 1
pageNum.current.size = 1
setFiltrate({...filtrate, size:5})
setHasMore(true)
setRefresherTriggeredStatus(true)
}
//页面下拉刷新
// const res = useManualPullDownRefresh()
usePullDownRefresh(() => {
console.log('123')
})
//数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({list:productData.list, total: productData.total, status: productState.loading})
}, [productData])
return (
<MoveBtn onClick={() => setShowShopCart(!showShopCart)}>
<View className={styles.main}>
<Banner/>
<View className={styles.search}>
<View className={styles.search_collect}>我的收藏</View>
<View className={styles.search_input}>
<Search disabled={true} style={{width: '263rpx'}} clickOnSearch={() => goLink('/pages/searchList/search')}/>
<View className={styles.search_input} onClick={() => goLink('/pages/searchList/search')}>
<Search disabled={true} style={{width: '263rpx'}} />
</View>
</View>
<View className={styles.products}>
<SideBar list={kindData.list} height="100%" defaultValue={kindData.defaultId} hasMore={hasMore} selfOnScrolltolower={() => getScrolltolower()} sideBarOnClick={(e) => getProductKindId(e)} heightItem={150} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={() => getRefresherRefresh()}>
<SideBar list={kindData.list} height="100%" defaultValue={kindData.defaultId} hasMore={hasMore} statusMore={statusMore} selfOnScrolltolower={() => getScrolltolower()} sideBarOnClick={(e) => getProductKindId(e)} heightItem={150} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={() => getRefresherRefresh()}>
<Product productList={productData.list}/>
</SideBar>
</View>
@ -116,3 +119,4 @@ export default () => {
</MoveBtn>
)
}

3
src/pages/order/comfirm.config.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '确认订单'
}

130
src/pages/order/comfirm.module.scss Normal file
View File

@ -0,0 +1,130 @@
.order_main{
min-height: 100%;
background-color:$color_bg_one;
padding: 20px;
padding-bottom: 190px;
box-sizing: border-box;
.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;
}
}
.order_desc{
display: flex;
align-items: center;
background-color: #fff;
padding: 20px;
min-height: 116px;
border-radius: 20px;
margin-top: 20px;
box-sizing: border-box;
.order_desc_con{
width: 150px;
font-size: $font_size;
font-weight: 700;
}
.order_desc_text, .order_desc_text_hint{
font-size: $font_size_medium;
color: $color_font_two;
margin-right: 10px;
flex:1;
}
.order_desc_text_hint{
text-align: right;
}
.miconfont{
font-size: 20px;
color: $color_font_two;
}
}
.submit_order{
display: flex;
position: fixed;
bottom: 0;
left: 0;
justify-content: space-between;
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;
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%);
border-radius: 46px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.ok_order_btn {
opacity: 1;
}
.order_number_desc{
font-size: $font_size_medium;
color: $color_font_two;
}
}
.order_info{
background-color: #fff;
margin-top: 20px;
border-radius: 20px;
padding: 20px;
.order_info_title{
font-size: $font_size;
font-weight: 700;
margin-bottom: 20px;
}
.order_num{
display: flex;
justify-content: space-between;
align-items: center;
.order_num_btn{
font-size: $font_size_medium;
padding: 5px 10px;
border: 2px solid #007cf7;
border-radius: 10px;
color: $color_main;
}
}
text{
font-size: $font_size;
}
}
}

188
src/pages/order/comfirm.tsx Normal file
View File

@ -0,0 +1,188 @@
import { SaleOrderPreViewApi, SaleOrderApi } from "@/api/order";
import { formatPriceDiv } from "@/common/fotmat";
import Popup from "@/components/popup";
import SearchInput from "@/components/searchInput";
import { Text, Textarea, View } from "@tarojs/components"
import Taro, { useDidShow, useRouter } from "@tarojs/taro";
import classnames from "classnames";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import AddressInfo,{AddressInfoParam} from "./components/addressInfo";
import EstimatedAmount from "./components/estimatedAmount";
import KindList from "./components/kindList";
import OrderState from "./components/orderState";
import Remark from "./components/remark";
import styles from './comfirm.module.scss'
import { getParam } from "@/common/system";
import useLogin from "@/use/useLogin";
import { alert, goLink } from "@/common/common";
import ShipmentMode from "../editOrder/components/shipmentMode";
import SubmitOrderBtn from "./components/submitOrderBtn";
export default () => {
const {checkLogin} = useLogin()
const [showDesc, setShowDesc] = useState(false)
//下单信息
type OrderParams = {address_id?: number, remark?: string, sale_mode?: number, shipment_mode?: number, list?: any[]}
const [submitOrderData, setSubmitOrderData] = useState<OrderParams>()
//获取购物车传过来的id
type orderPreParam = {shopping_cart_product_color_list:{shopping_cart_product_color_id:number}[], sale_mode:number}
const param = getParam()
const idsAndSaleModel = useRef<orderPreParam>({shopping_cart_product_color_list:[], sale_mode:0})
useDidShow(async () => {
// await checkLogin()
idsAndSaleModel.current.sale_mode = Number(param?.sale_mode)
param?.ids?.split('-')?.map(item => {
return idsAndSaleModel.current.shopping_cart_product_color_list?.push({
shopping_cart_product_color_id: Number(item)
})
})
getSaleOrderPreView()
setSubmitOrderData((val) => ({...val, sale_mode:param?.sale_mode}))
})
//获取销售预览订单
const [preViewOrder, setPreViewOrder] = useState<any>() //获取到的原始数据
const {fetchData} = SaleOrderPreViewApi()
const getSaleOrderPreView = async () => {
if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) {
let res = await fetchData(idsAndSaleModel.current)
setPreViewOrder(res.data)
}
}
//监听获取到的数据
useEffect(() => {
if(preViewOrder) {
formatData()
getDataList()
//当有默认地址时设置默认地址id
preViewOrder.default_address&&setSubmitOrderData((val) => ({...val, address_id:preViewOrder.default_address.id}))
}
}, [preViewOrder])
//格式化数据格式
const [formatPreViewOrder, setFormatPreViewOrder] = useState<any>() //格式化后的数据
const formatData = () => {
setFormatPreViewOrder({
estimate_amount: preViewOrder.estimate_amount, //预估金额
sale_mode: preViewOrder.sale_mode,
sale_mode_name: preViewOrder.sale_mode_name,
total_colors: preViewOrder.total_colors, //总颜色数量
total_number: preViewOrder.total_number, //总数量
total_fabrics: preViewOrder.total_fabrics, //面料数量
unit: preViewOrder.sale_mode == 0?'条':'m', //单位
list: preViewOrder.product_list
})
}
const formatPreViewOrderMemo = useMemo(() => {
return formatPreViewOrder
}, [formatPreViewOrder])
//格式化初始地址
const defaultAddress = useMemo(() => {
const address = preViewOrder?.default_address
if(address) {
return {
province_name: address.province_name,
city_name: address.city_name,
district_name: address.district_name,
address_detail: address.address_detail,
id: address.id,
name: address.name,
phone: address.phone
}
}
return null
}, [preViewOrder])
//获取提交格式数据列表
const getDataList = () => {
let list:{shopping_cart_product_color_id:number}[] = []
preViewOrder.product_list?.map(item => {
item.product_colors?.map(colorItem => {
list.push({shopping_cart_product_color_id:colorItem.id})
})
})
setSubmitOrderData((val) => ({...val, list}))
}
//获取地址
const getAddress = (e) => {
setSubmitOrderData((val) => ({...val, address_id:e.id}))
}
const selectShipmentMode = useCallback((value) => {
setSubmitOrderData((val) => ({...val, shipment_mode:value}))
}, [])
//获取备注
const getRemark = useCallback((e) => {
setSubmitOrderData((val) => ({...val, remark:e}))
setShowDesc(() => false)
}, [])
//提交按钮是否可用
const btnStatus = useMemo(() => {
if( submitOrderData?.list?.length == 0 || !submitOrderData?.shipment_mode || (submitOrderData?.shipment_mode == 2 && !submitOrderData?.address_id)) {
return false
} else {
return true
}
}, [submitOrderData])
//提交订单
const {fetchData: saleOrderFetchData} = SaleOrderApi()
const submitOrderEven = () => {
if(!submitOrderData?.address_id) {
alert.error('请选择地址')
return false
}
if(!submitOrderData?.shipment_mode) {
alert.error('请选择收货方式')
return false
}
Taro.showModal({
title: '确定提交？',
success: async function (res) {
if (res.confirm) {
const res = await saleOrderFetchData(submitOrderData)
if(res.success) {
goLink('/pages/order/index',{id: res.data.id}, 'redirectTo')
} else {
alert.none(res.msg)
}
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
return (
<View className={styles.order_main}>
<ShipmentMode onSelect={selectShipmentMode}/>
<AddressInfo onSelect={(e) => getAddress(e)} defaultValue={defaultAddress}/>
<KindList value={formatPreViewOrderMemo}/>
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
<View className={styles.order_desc_con}>订单备注</View>
{
submitOrderData?.remark&&<View className={styles.order_desc_text}>{submitOrderData?.remark}</View>||
<View className={styles.order_desc_text_hint}>填写备注</View>
}
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
</View>
<View className={styles.submit_order}>
<View className={styles.submit_order_number}>
<SubmitOrderBtn style={{color:'#007AFF'}} number={formatPriceDiv(formatPreViewOrder?.estimate_amount)}/>
<View className={styles.order_number_desc}>{`${formatPreViewOrder?.total_fabrics}种面料，${formatPreViewOrder?.total_colors}种颜色，共${formatPreViewOrder?.total_number + formatPreViewOrder?.unit}`}</View>
</View>
<View className={classnames(styles.order_btn, btnStatus&&styles.ok_order_btn)} onClick={() => submitOrderEven()}>提交订单</View>
</View>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
<Remark onSave={(e) => getRemark(e)}/>
</Popup>
<View className="common_safe_area_y"></View>
</View>
)
}

29
src/pages/order/components/addressInfo/index.module.scss
View File

@ -8,28 +8,45 @@
box-sizing: border-box;
margin-top: 20px;
.order_address_icon{
font-size: 60px;
font-size: 76px;
color: $color_main;
}
.order_address_text_con{
flex:1;
padding: 0 30px;
box-sizing: border-box;
.order_address_text_title{
font-size: $font_size;
font-weight: 700;
font-size: $font_size_medium;
margin-top: 10px;
@include common_ellipsis;
}
.order_address_text_name{
margin-top: 20px;
color: $color_font_three;
font-size: $font_size_medium;
align-items: center;
text{
&:nth-child(1) {
color: #000;
font-weight: 700;
font-size: $color_font_one;
margin-right: 40px;
}
&:nth-child(2) {
color: $color_font_one;
font-size: $font_size_medium;
}
}
}
}
.updateBtn{
font-size: $font_size_medium;
color: $color_font_three;
width: 96px;
height: 52px;
border: 2px solid #dddddd;
border-radius: 28px;
text-align: center;
line-height: 52px;
}
.order_address_text_no{
flex: 1;
font-size: $font_size;

72
src/pages/order/components/addressInfo/index.tsx
View File

@ -2,31 +2,75 @@ import AddressList from "@/components/AddressList";
import Popup from "@/components/popup";
import { Text, View } from "@tarojs/components"
import classnames from "classnames";
import { useState } from "react";
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import styles from './index.module.scss'
export default () => {
export type AddressInfoParam = {
province_name: string,
city_name: string,
district_name: string,
address_detail: string,
id?: number,
name: string,
phone: string
}
type Param = {
onSelect?: (val:any) => void, //选择
defaultValue?: AddressInfoParam|null //默认值
disabled?: false|true //true禁用后只用于展示
}
export default memo(({onSelect, defaultValue = null, disabled = false}: Param) => {
const [showAddressList, setShowAddressList] = useState(false)
useEffect(() => {
setUserInfo(() => defaultValue)
}, [defaultValue])
//选择地址
const [userInfo, setUserInfo] = useState<any>()
const getAddress = useCallback((val) => {
setShowAddressList(() => false)
setUserInfo(() => val)
onSelect?.(val)
}, [])
//地址格式
const formatAddress = useMemo(() => {
if(userInfo)
return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail
}, [userInfo])
const changeShow = () => {
if(!disabled)
setShowAddressList(() => true)
}
return (
<View>
<View className={styles.order_address} onClick={() => setShowAddressList(true)}>
<View className={classnames(styles.order_address_icon, 'iconfont icon-shaixuan')}></View>
{/* <View className={styles.order_address_text_no}>请选择收货地址及信息</View> */}
<View className={styles.order_address} onClick={() => changeShow()}>
<View className={classnames(styles.order_address_icon, 'iconfont icon-daohang')}></View>
{!userInfo&&
<>
<View className={styles.order_address_text_no}>请选择收货地址及信息</View>
<View className={classnames(styles.order_address_more_icon, 'iconfont icon-a-moreback')}></View>
</>
||<>
<View className={styles.order_address_text_con}>
<View className={styles.order_address_text_title}>**省**市**区**街道****仓库**省**市**区**街道****仓库</View>
<View className={styles.order_address_text_name}>
<Text>陈先生</Text>
<Text>1818877790</Text>
<Text>{userInfo?.name}</Text>
<Text>{userInfo?.phone}</Text>
</View>
<View className={styles.order_address_text_title}>{formatAddress}</View>
</View>
<View className={classnames(styles.order_address_more_icon, 'iconfont icon-jiantou')}></View>
<View className={styles.updateBtn}>修改</View>
</>}
</View>
<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
{!disabled&&<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
<View className={styles.order_address_list}>
<View className={styles.order_address_title}>选择收货地址</View>
<AddressList onSelect={(item, index) => console.log(index, item)}/>
<View className={styles.order_address_title}>请选择收货地址</View>
<AddressList onSelect={(item) => getAddress(item)}/>
</View>
</Popup>
</Popup>}
</View>
)
}
})

112
src/pages/order/components/addressInfoDetail/index.module.scss Normal file
View File

@ -0,0 +1,112 @@
.order_address{
height: 178px;
background: #ffffff;
border-radius: 20px;
display: flex;
align-items: center;
padding: 30px;
box-sizing: border-box;
margin-top: 20px;
position: relative;
.order_address_icon{
font-size: 50px;
color: $color_main;
position: absolute;
top: 35px;
left: 20px;
}
.order_address_text_con{
flex:1;
padding-left: 50px;
box-sizing: border-box;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.order_address_text_title{
font-size: $font_size_medium;
margin-top: 10px;
@include common_ellipsis;
display: flex;
align-items: center;
justify-content: space-between;
.moreIconfont{
font-size: 20px;
}
}
.order_address_text_name{
align-items: center;
text{
&:nth-child(1) {
color: #000;
font-weight: 700;
font-size: $color_font_one;
margin-right: 40px;
}
&:nth-child(2) {
color: $color_font_one;
font-size: $font_size_medium;
}
}
}
}
.updateBtn{
width:200px;
font-size: $font_size_min;
background-color: #F0F0F0;
height: 64px;
border-radius: 24px;
color: $color_font_two;
position: absolute;
bottom: 10px;
right: 10px;
z-index: 999;
.updateBtn_list{
position: absolute;
display: flex;
z-index: 5;
width: 100%;
.updateBtn_item_select{
color: #fff;
}
}
.updateBtn_item{
flex:1;
text-align: center;
line-height: 64px;
}
.updateBtn_select{
color: #fff;
background-color: $color_main;
border-radius: 24px;
position: absolute;
width: 100px;
height: 61px;
z-index: 1;
transition: all 0.3s ease-in-out;
}
}
.order_address_text_no{
flex: 1;
font-size: $font_size;
font-weight: 700;
margin-left: 30px;
}
.order_address_more_icon{
color: $color_font_three;
font-size: $font_size;
}
}
.order_address_list {
height: 900px;
.order_address_title{
font-size: $font_size;
font-weight: 700;
width: 100%;
text-align: center;
padding: 20px 0 30px 0;
}
}

122
src/pages/order/components/addressInfoDetail/index.tsx Normal file
View File

@ -0,0 +1,122 @@
import { EditSaleOrderAddressApi, EditSaleOrderShipmentModeApi } from "@/api/order";
import { alert } from "@/common/common";
import { debounce } from "@/common/util";
import AddressList from "@/components/AddressList";
import Popup from "@/components/popup";
import { Text, View } from "@tarojs/components"
import classnames from "classnames";
import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useState } from "react";
import styles from './index.module.scss'
export type AddressInfoParam = {
province_name: string,
city_name: string,
district_name: string,
address_detail: string,
id?: number,
name: string,
phone: string,
}
type Param = {
onSelect?: (val:any) => void, //选择
defaultValue?: AddressInfoParam|null, //默认值
disabled?: false|true, //true禁用后只用于展示
shipment_mode?: 1|2, //1自提 2物流
onChangeShipmentMode?: (val: number) => void, //返回收货方式
orderId?: number //订单id
}
export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = null, orderId = 0, shipment_mode = 1}: Param, ref) => {
const [showAddressList, setShowAddressList] = useState(false)
useEffect(() => {
setUserInfo(() => defaultValue)
}, [defaultValue])
const [userInfo, setUserInfo] = useState<any>()
//地址格式
const formatAddress = useMemo(() => {
if(userInfo)
return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail
}, [userInfo])
const changeShow = () => {
if(receivingStatus == 2)
setShowAddressList(() => true)
}
useEffect(() => {
setReceivingStatus(() => shipment_mode)
}, [shipment_mode])
//把内部方法提供给外部
useImperativeHandle(ref, () => ({
changeShow
}))
//收货方法,1:自提，2物流
const [receivingStatus, setReceivingStatus] = useState(1)
const {fetchData: shipmentModeFetchData} = EditSaleOrderShipmentModeApi()
const onReceivingStatus = (value, e) => {
e.stopPropagation()
changeReceivingStatus(value)
}
const changeReceivingStatus = debounce(async (value) => {
alert.loading('正在修改')
const res = await shipmentModeFetchData({id: orderId, shipment_mode:value})
if(res.success) {
alert.success('收货方式修改成功')
onChangeShipmentMode?.(value)
setReceivingStatus(value)
} else {
alert.none(res.msg)
}
}, 10)
//修改地址
const {fetchData: addressFetchData} = EditSaleOrderAddressApi()
const getAddress = async (value) => {
alert.loading('正在修改')
const res = await addressFetchData({id: orderId, address_id: value.id})
if(res.success) {
alert.success('地址修改成功')
onSelect?.(value)
setShowAddressList(() => false)
setUserInfo(() => value)
} else {
alert.none(res.msg)
}
}
return (
<View>
<View className={styles.order_address} onClick={() => changeShow()}>
<View className={classnames(styles.order_address_icon, 'iconfont', receivingStatus == 2?'icon-daohang':'icon-fahuo')}></View>
<View className={styles.order_address_text_con}>
<View className={styles.order_address_text_title}>
<Text>{formatAddress}</Text>
{(receivingStatus == 2)&&<Text className={classnames(styles.moreIconfont,'iconfont icon-a-moreback')}></Text>}
</View>
<View className={styles.order_address_text_name}>
<Text>{userInfo?.name}</Text>
<Text>{userInfo?.phone}</Text>
</View>
</View>
<View className={styles.updateBtn}>
<View className={styles.updateBtn_list}>
<View className={classnames(styles.updateBtn_item, receivingStatus==1&&styles.updateBtn_item_select)} onClick={(e) => onReceivingStatus(1,e)}>自提</View>
<View className={classnames(styles.updateBtn_item, receivingStatus==2&&styles.updateBtn_item_select)} onClick={(e) => onReceivingStatus(2,e)}>物流</View>
</View>
<View style={{transform: receivingStatus==1?'translateX(0)':'translateX(100%)'}} className={classnames(styles.updateBtn_select)}></View>
</View>
</View>
<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
<View className={styles.order_address_list}>
<View className={styles.order_address_title}>请选择收货地址</View>
<AddressList onSelect={getAddress}/>
</View>
</Popup>
</View>
)
}))

35
src/pages/order/components/amountShow/index.module.scss Normal file
View File

@ -0,0 +1,35 @@
.order_price_num{
color: $color_main;
font-weight: 700;
text{
&:nth-child(1) {
font-size: $font_size_min;
}
&:nth-child(2) {
font-size: $font_size;
}
&:nth-child(3) {
font-size: $font_size_medium;
}
}
}
.emphasis_num{
.price_text{
&:nth-child(2) {
font-size: $font_size_big;
}
}
}
.emphasis_num_big{
.price_text{
&:nth-child(1) {
font-size: $font_size_big;
}
&:nth-child(2) {
font-size: 60px;
}
&:nth-child(1) {
font-size: $font_size_big;
}
}
}

28
src/pages/order/components/amountShow/index.tsx Normal file
View File

@ -0,0 +1,28 @@
import { Text, View } from "@tarojs/components";
import { memo, useCallback } from "react";
import styles from './index.module.scss'
import classnames from "classnames";
type Param = {
number: number, //数字
status: 0|1|2 //0 小型，1中型，2大
}
export default memo(({number = 0, status = 1}:Param) => {
const priceDom = useCallback(() => {
let res = number.toFixed(2).split('.')
let int_num = parseInt(res[0]) + ''
let decimals_num = res[1]
return (
<>
<Text className={styles.price_text}>¥</Text>
<Text className={styles.price_text}>{Number(int_num).toLocaleString()}</Text>
<Text className={styles.price_text}>.{decimals_num}</Text>
</>
)
}, [number])
return (
<View className={classnames(styles.order_price_num, status==1&&styles.emphasis_num, status==2&&styles.emphasis_num_big)} >
{priceDom()}
</View>
)
})

53
src/pages/order/components/estimatedAmount/index.module.scss
View File

@ -1,23 +1,70 @@
.order_price{
font-weight: 700;
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;
// margin-right: 10px;
display: flex;
.iconfont_msg{
position: relative;
}
.miconfont{
font-size: 26px;
font-weight: normal;
margin-left: 5px;
}
.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: $font_size_big;
font-size: 26px;
}
&:nth-child(3) {
font-size: $font_size_medium;
}
}
}
.emphasis_num{
text{
&:nth-child(2) {
font-size: $font_size_big;
}
}
}
}

42
src/pages/order/components/estimatedAmount/index.tsx
View File

@ -1,33 +1,29 @@
import { Text, View } from "@tarojs/components"
import { useCallback, useEffect, useMemo } from "react"
import { memo, useCallback, useEffect, useMemo } from "react"
import {formatKbPrice} from '@/common/common'
import classnames from "classnames";
import styles from './index.module.scss'
import AmountShow from "../amountShow";
type Param = {
style?: Object,
number?: number
number?: number,
title?: string,
titleStatus?: true|false, //true 标题加大加深
numberStatus?: 0|1|2, //数字尺寸
}
export default ({style, number = 0}:Param) => {
const priceDom = useCallback(() => {
let res = number.toFixed(2).split('.')
let int_num = parseInt(res[0]) + ''
let decimals_num = res[1]
export default memo(({style, number = 0, titleStatus = true, title = '', numberStatus = 1}:Param) => {
return (
<>
<Text>¥</Text>
<Text>{formatPrice(int_num)}</Text>
<Text>.{decimals_num}</Text>
<View className={styles.order_price}>
<View className={classnames(styles.order_price_text, titleStatus&&styles.emphasis)}>
<Text>{title}</Text>
<View className={styles.iconfont_msg}>
<Text className={classnames(styles.miconfont, 'iconfont icon-zhushi')}></Text>
{/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */}
</View>
</View>
<AmountShow status={numberStatus} number={number}/>
</View>
</>
)
}, [number])
const formatPrice = useCallback((number: string) => {
return formatKbPrice(number)
}, [])
return (
<View className={styles.order_price}>
<Text className={styles.order_price_text}>预估金额</Text>
<View className={styles.order_price_num} style={style}>
{priceDom()}
</View>
</View>
)
}
})

13
src/pages/order/components/kindList/index.module.scss
View File

@ -1,5 +1,11 @@
.orders_list_title{
padding: 20px 20px 10px 20px;
color: $color_font_two;
font-size: $font_size_medium;
}
.orders_list_con{
margin-top: 20px;
background-color: #fff;
border-radius: 20px;
padding: 20px;
@ -67,6 +73,10 @@
}
}
.order_list_item_count{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-end;
.count_num{
color: $color_main;
font-size: $font_size;
@ -86,7 +96,6 @@
}
}
}
.order_estimated_amount{
display: flex;
align-items: flex-end;

126
src/pages/order/components/kindList/index.tsx
View File

@ -1,88 +1,88 @@
import { formatHashTag, formatPriceDiv } from "@/common/fotmat"
import { View } from "@tarojs/components"
import { useState } from "react"
import { memo, useCallback, useMemo } from "react"
import EstimatedAmount from "../estimatedAmount"
import styles from './index.module.scss'
export default () => {
const [price, setPrice] = useState(123000.33)
type OrderParam = {
estimate_amount: number, //预估金额
list: any[],
sale_mode: number,
sale_mode_name: string,
unit: string,
total_colors: number,
total_fabrics: number,
total_number: number,
status: number, //订单状态
total_sale_price: number, //销售金额
total_should_collect_money: number, //应收金额
total_weight_error_discount: number, //空差优惠
}
export default memo(({value}:{value?:OrderParam}) => {
//对应数量
const formatCount = useCallback((item) => {
return value?.sale_mode == 0? item.roll : Number(item.length / 100)
}, [value])
//对应单价
const standardPrice = useCallback(price => {
return formatPriceDiv(price).toLocaleString() + '/' + (value?.sale_mode == 1?'m':'kg')
}, [value])
//数量格式
const numText = useMemo(() => {
if(value)
return `${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}${value?.unit}`
}, [value])
const priceConDom = useMemo(() => {
return (
<>
{(value&&value.status < 3)&&<EstimatedAmount number={formatPriceDiv(value?.estimate_amount)} title="预估金额" />}
{(value&&value.status >= 3)&&<EstimatedAmount number={formatPriceDiv(value?.total_sale_price)} titleStatus={false} numberStatus={0} title="合计金额" />}
{(value&&value.status >= 3)&&<EstimatedAmount number={formatPriceDiv(value?.total_weight_error_discount)} titleStatus={false} numberStatus={0} title="空差优惠" />}
{(value&&value.status >= 3)&&<EstimatedAmount number={formatPriceDiv(value?.total_should_collect_money)} title="应付金额" />}
</>
)
}, [value])
return (
<>
<View className={styles.orders_list_title}>{numText}</View>
<View className={styles.orders_list_con}>
<View className={styles.order_list}>
{
value?.list?.map(item => {
return <View key={item.product_code} className={styles.order_list}>
<View className={styles.order_list_title}>
<View className={styles.tag}>大货</View>
<View className={styles.title}>0770# 21S单面平纹(食毛)</View>
<View className={styles.num}>共3种</View>
<View className={styles.tag}>{value.sale_mode_name}</View>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.num}>共{item?.product_colors.length}种</View>
</View>
<View className={styles.order_list_scroll}>
<View className={styles.order_list_item}>
{item?.product_colors?.map(colorItem => {
return <View key={colorItem.id} className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>1# 薄荷绿</View>
<View className={styles.order_list_item_price}>¥40/kg</View>
<View className={styles.order_list_item_title}>{colorItem.code + ' ' + colorItem.name}</View>
<View className={styles.order_list_item_price}>¥{standardPrice(colorItem.sale_price)}</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×1<text>条</text></View>
<View className={styles.count_price}><text>¥</text>1,000.5</View>
</View>
</View>
</View>
<View className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>1# 薄荷绿</View>
<View className={styles.order_list_item_price}>¥40/kg</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×1<text>条</text></View>
<View className={styles.count_price}><text>¥</text>1,000.5</View>
</View>
</View>
</View>
</View>
</View>
<View className={styles.order_list}>
<View className={styles.order_list_title}>
<View className={styles.tag}>大货</View>
<View className={styles.title}>0770# 21S单面平纹(食毛)</View>
<View className={styles.num}>共3种</View>
</View>
<View className={styles.order_list_scroll}>
<View className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>1# 薄荷绿</View>
<View className={styles.order_list_item_price}>¥40/kg</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×1<text>条</text></View>
<View className={styles.count_price}><text>¥</text>1,000.5</View>
</View>
</View>
</View>
<View className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>1# 薄荷绿</View>
<View className={styles.order_list_item_price}>¥40/kg</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×1<text>条</text></View>
<View className={styles.count_price}><text>¥</text>1,000.5</View>
<View className={styles.count_num}>×{formatCount(colorItem)}<text>{value.unit}</text></View>
<View className={styles.count_price}><text>¥</text>{formatPriceDiv(colorItem.estimate_amount).toLocaleString()}</View>
</View>
</View>
</View>
})}
</View>
</View>
})
}
<View className={styles.order_estimated_amount}>
<EstimatedAmount number={price}/>
<View className={styles.order_price_des}>（按照25kg/条, 预估金额）</View>
{priceConDom}
</View>
</View>
</>
)
}
})

46
src/pages/order/components/offlinePay/index.module.scss Normal file
View File

@ -0,0 +1,46 @@
$top:170px;
.offlinePay_main{
.offlinePay_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;
}
.offlinePay_list{
border-radius: 10px;
padding: 60px 0;
.offlinePay_con_text{
font-size: $font_size;
font-weight: 700;
}
}
.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;
}
}

52
src/pages/order/components/offlinePay/index.tsx Normal file
View File

@ -0,0 +1,52 @@
import { Text, View } from "@tarojs/components";
import { memo } from "react";
import AmountShow from "../amountShow";
import classnames from "classnames";
import styles from './index.module.scss'
import MCheckbox from "@/components/checkbox";
import Popup from "@/components/popup";
import SearchInput from "@/components/searchInput";
import Taro from "@tarojs/taro";
type Param = {
show?: true|false,
onClose?: () => void
}
export default memo(({show = true, onClose}:Param) => {
//复制功能
const clipboardData = () => {
Taro.setClipboardData({
data: '开户名称:佛山市浩川盛世科技有限公司; 开户银行:招商银行汾江支行; 转账汇款账号:62062342120001221231212',
success: function (res) {
Taro.showToast({
icon: 'none',
title: '复制成功'
})
}
})
}
return (
<View className={styles.offlinePay_main}>
<Popup show={show} showTitle={false} onClose={onClose} >
<View className={styles.offlinePay_con}>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
<View className={styles.title}>线下汇款</View>
<View className={styles.offlinePay_list}>
<SearchInput showBorder={false} title='开户名称' titleStyle={{fontSize:'23rpx'}}>
<Text className={styles.offlinePay_con_text}>佛山市浩川盛世科技有限公司</Text>
</SearchInput>
<SearchInput showBorder={false} title='开户银行' titleStyle={{fontSize:'23rpx'}}>
<Text className={styles.offlinePay_con_text}>招商银行汾江支行</Text>
</SearchInput>
<SearchInput showBorder={false} title='转账汇款账号' titleStyle={{fontSize:'23rpx'}}>
<Text className={styles.offlinePay_con_text}>62062342120001221231212</Text>
</SearchInput>
</View>
<View className={styles.btns} onClick={clipboardData}>复制信息</View>
</View>
</Popup>
</View>
)
})

18
src/pages/order/components/orderState copy/index.module.scss Normal file
View File

@ -0,0 +1,18 @@
.order_flow_state{
display: flex;
align-items: center;
padding: 0 30px;
height: 116px;
background-color: #fff;
border-radius: 20px;
.order_flow_state_text{
color: $color_main;
font-size:$font_size;
font-weight: 700;
}
.order_flow_state_desc{
color: $color_font_three;
font-size: $font_size_medium;
margin-left: 50px;
}
}

14
src/pages/order/components/orderState copy/index.tsx Normal file
View File

@ -0,0 +1,14 @@
import { View } from "@tarojs/components"
import styles from './index.module.scss'
export default ({
state = '',
desc = ''
}) => {
return (
<View className={styles.order_flow_state}>
<View className={styles.order_flow_state_text}>{state}</View>
<View className={styles.order_flow_state_desc}>{desc}</View>
</View>
)
}

105
src/pages/order/components/orderState/index.module.scss
View File

@ -1,18 +1,105 @@
.order_flow_state{
display: flex;
align-items: center;
padding: 0 30px;
height: 116px;
background-color: #fff;
border-radius: 20px;
.order_flow_state_text{
color: $color_main;
padding: 20px;
box-sizing:border-box;
position: relative;
overflow: hidden;
.order_status_list{
max-height: 250px;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.order_status_list_show {
max-height: 1000px !important;
}
.order_status_item{
position: relative;
padding-left: 50px;
&:nth-last-child(n+2) {
padding-bottom: 30px;
}
.order_status_tail_end, .order_status_tail{
width: 15px;
height: 15px;
border: 2px solid $color_main;
background-color: #fff;
border-radius: 50%;
position:absolute;
left: 0;
top: 10px;
z-index: 10;
}
.order_status_tail_end{
background-color: $color_main;
}
.order_status_line{
border-left: 2px solid $color_main;
height: 100%;
top: 10px;
left: 9px;
position: absolute;
z-index: 1;
}
.order_status_content{
display: flex;
align-items: center;
.order_status_title{
color: $color_font_two;
font-size: $font_size;
font-weight: 700;
}
.order_flow_state_desc{
color: $color_font_three;
.order_status_time{
color: $color_font_two;
font-size: $font_size_medium;
margin-left: 50px;
padding: 0 20px;
}
.order_status_tag{
font-size: $font_size_min;
background: #F0F0F0;
border-radius: 6px;
padding: 5px 10px;
color: $color_font_two;
}
.order_status_select{
color: $color_main;
}
.order_status_tag_select{
color: $color_main;
}
}
.order_status_des{
color: $color_font_two;
font-size: $font_size_medium;
}
.order_status_des_select{
color: $color_font_one;
}
}
.more{
width: 100%;
text-align: center;
font-size: $font_size_min;
color: $color_font_one;
padding-top: 20px;
.miconfonts{
display: inline-block;
font-size: 25px;
transform:rotate(90deg);
}
.open_miconfonts{
transform:rotate(-90deg);
}
}
.image_tag{
width: 140px;
height: 144px;
.image{
width: 140px;
height: 144px;
}
position: absolute;
top: -10px;
right: -10px;
}
}

56
src/pages/order/components/orderState/index.tsx
View File

@ -1,14 +1,46 @@
import { View } from "@tarojs/components"
import { Image, Text, View } from "@tarojs/components"
import { memo, useMemo, useState } from "react"
import styles from './index.module.scss'
export default ({
state = '',
desc = ''
}) => {
return (
<View className={styles.order_flow_state}>
<View className={styles.order_flow_state_text}>{state}</View>
<View className={styles.order_flow_state_desc}>{desc}</View>
</View>
)
import classnames from "classnames";
import { formatDateTime, formatImgUrl } from "@/common/fotmat";
type Param = {
status: string,
time: string,
tag: string,
desc: string
}
export default memo(({list = []}:{list?:Param[]}) => {
const [showMore, setShowMore] = useState(false)
const changeMore = () => {
setShowMore(() => !showMore)
}
const dataList = useMemo(() => {
return list.reverse()
}, [list])
return (
<>
{(dataList.length > 0)&&<View className={styles.order_flow_state}>
<View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}>
{dataList.map((item, index) => <View className={styles.order_status_item}>
{(dataList.length > 1)&&<View className={classnames(styles.order_status_tail, (index == 0)&&styles.order_status_tail_end)}></View>}
{(dataList.length != (index + 1))&&<View className={styles.order_status_line}></View>}
<View className={styles.order_status_content}>
<View className={classnames(styles.order_status_title, (index == 0)&&styles.order_status_select)}>{item.status}</View>
<View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{formatDateTime(item.time)}</View>
{/* <View className={classnames(styles.order_status_tag, (index == 0)&&styles.order_status_tag_select)}>{item.tag}</View> */}
</View>
<Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text>
</View>)}
</View>
{(dataList.length > 2) && <View className={styles.more} onClick={() => changeMore()}>
<Text>{showMore&&'收起详情'||'点击查看详情'}</Text>
<Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
</View>}
<View className={styles.image_tag}>
{/* <Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/> */}
</View>
</View>}
</>
)
})

126
src/pages/order/components/payment/index.module.scss Normal file
View File

@ -0,0 +1,126 @@
$top:190px;
.payment_main{
.payment_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;
}
.amount{
text-align: center;
padding: 25px 0;
}
.payment_list{
background-color: #fff;
// box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.16);
min-height: 300px;
border-radius: 10px;
padding-bottom: 100px;
position: relative;
background: radial-gradient(circle 20px at left $top, transparent 20px, #fff 20px + 3px) left 0px/60% no-repeat ,
radial-gradient(circle 20px at right $top, transparent 20px, #fff 20px + 3px) right 0px/60% no-repeat;
filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, .16));
position: relative;
&::before{
content: '';
position: absolute;
border-bottom: 3px dashed #ccc;
top: $top;
width: calc(100% - 100px);
left:0;
right: 0;
margin: auto;
}
.payment_list_top_border{
height: 32px;
width: 100%;
background: linear-gradient(215deg,#cde5ff 2%, #cde5ff 2%, #68b4ff 72%);
border-radius: 10px 10px 0px 0px;
}
.payment_list_title{
text-align: center;
padding: 30px 0 50px 0;
font-size: $font_size;
color: $color_font_three;
.payment_list_title_price_item{
display: flex;
justify-content: space-between;
padding: 0 90px;
&:nth-child(1) {
margin-bottom: 15px;
}
}
text{
&:nth-child(2) {
color: $color_main;
}
}
}
.payment_list_con{
padding: 20px 30px 0 30px;
.payment_list_item{
display: flex;
justify-content: space-between;
align-items: center;
height: 123px;
&:nth-last-child(n+2) {
border-bottom: 2px solid #F3F3F3;
}
}
.payment_list_item_left{
display: flex;
flex-direction: column;
font-size: $font_size;
.payment_list_item_left_name{
display: flex;
align-items: center;
}
.miconfont{
font-size: 30px;
color: #FFC300;
padding-right: 10px;
}
.payment_list_item_left_price{
font-size: $font_size_min;
color: $color_font_two;
padding-left: 35px;
padding-top: 5px;
}
}
.miconfont_more{
font-size: 20px;
}
}
}
.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;
}
}

168
src/pages/order/components/payment/index.tsx Normal file
View File

@ -0,0 +1,168 @@
import { Text, View } from "@tarojs/components";
import { memo, useEffect, useMemo, useState } from "react";
import AmountShow from "../amountShow";
import classnames from "classnames";
import styles from './index.module.scss'
import MCheckbox from "@/components/checkbox";
import Popup from "@/components/popup";
import OfflinePay from "../offlinePay";
import ScanPay from "../scanPay";
import { GetOrderPayApi, SubmitOrderPayApi } from "@/api/orderPay";
import { formatPriceDiv } from "@/common/fotmat";
import {alert} from "@/common/common"
type Param = {
show?: true|false,
onClose?: () => void,
orderId?: number, //应付单id
onSubmitSuccess?: () => void //支付成功
}
type PayInfo = {
amount: string
}
type PayStatus = 0|1|2|3|4|null //0:预存款， 1:账期，2：线下汇款， 3：扫码支付, 4:货到付款
export default memo(({show = false, onClose, orderId = 0, onSubmitSuccess}:Param) => {
//提交参数
const [submitData, setSubmitData] = useState<{id:number, payment_method: PayStatus}>({
id:0,
payment_method: null
})
//线下付款
const [offlinePayShow, setofflinePayShow] = useState(false)
const onShowOfflinePay = () => {
setofflinePayShow(true)
onClose?.()
}
//扫码支付
const [scanPayShow, setScanPayShow] = useState(false)
const onShowScanPay = () => {
setScanPayShow(true)
onClose?.()
}
//获取支付方式数据
const [payInfo, setPayInfo] = useState<any>()
const {fetchData: orderFetchData} = GetOrderPayApi()
const getOrderPay = async () => {
let {data} = await orderFetchData({id: orderId})
setPayInfo(() => data)
}
useEffect(() => {
if(show&&orderId)
setSubmitData((val) => ({...val, id:orderId}))
getOrderPay()
}, [show, orderId])
//预存款选择
const advanceSelectData = (val) => {
setSubmitData((e) => ({...e, payment_method:val}))
}
//账期选择
const periodSelectData = (val) => {
setSubmitData((e) => ({...e, payment_method:val}))
}
//提交支付
const {fetchData: submitFetchData} = SubmitOrderPayApi()
const submitPay = async () => {
if(submitData.payment_method === null) {
alert.error('请选择支付方式')
return false
}
alert.loading('正在支付')
let res = await submitFetchData(submitData)
if(res.success) {
alert.success('支付成功')
onSubmitSuccess?.()
} else {
alert.none(res.msg)
}
}
const advance_payment = useMemo(() => {
const price = formatPriceDiv(payInfo?.should_collect_money - payInfo?.amount_paid)
return (
<View className={styles.payment_list_item_left_price}>{(payInfo?.advance_deposit_balance < price)&&'余额不足，' }剩余 ¥{payInfo?.advance_deposit_balance}</View>
)
}, [payInfo])
return (
<View className={styles.payment_main}>
<Popup show={show} showTitle={false} onClose={onClose} >
<View className={styles.payment_con}>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
<View className={styles.title}>订单支付</View>
<View className={styles.amount}>
<AmountShow status={2} number={formatPriceDiv(payInfo?.should_collect_money - payInfo?.amount_paid)}/>
</View>
<View className={styles.payment_list}>
<View className={styles.payment_list_top_border}></View>
<View className={styles.payment_list_title}>
{/* <Text>向商家发起支付</Text> */}
<View className={styles.payment_list_title_price}>
<View className={styles.payment_list_title_price_item}>
<Text>订单金额</Text>
<Text>¥{formatPriceDiv(payInfo?.should_collect_money)}</Text>
</View>
<View className={styles.payment_list_title_price_item}>
<Text>已付金额</Text>
<Text>¥{formatPriceDiv(payInfo?.amount_paid)}</Text>
</View>
</View>
</View>
<View className={styles.payment_list_con}>
<View className={styles.payment_list_item}>
<View className={styles.payment_list_item_left}>
<View className={styles.payment_list_item_left_name}>
<View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
<View className={styles.payment_list_item_left_text}>预存款</View>
</View>
{advance_payment}
</View>
<MCheckbox status={submitData.payment_method == 0} onSelect={() => advanceSelectData(0)} onClose={() => advanceSelectData(null)}/>
</View>
<View className={styles.payment_list_item}>
<View className={styles.payment_list_item_left}>
<View className={styles.payment_list_item_left_name}>
<View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
<View className={styles.payment_list_item_left_text}>{payInfo?.account_period}天账期</View>
</View>
<View className={styles.payment_list_item_left_price}>可用额度 ¥{payInfo?.account_period_credit_available_line}</View>
</View>
<MCheckbox status={submitData.payment_method == 1} onSelect={() => periodSelectData(1)} onClose={() => periodSelectData(null)}/>
</View>
<View className={styles.payment_list_item} onClick={onShowOfflinePay}>
<View className={styles.payment_list_item_left}>
<View className={styles.payment_list_item_left_name}>
<View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
<View className={styles.payment_list_item_left_text}>线下汇款</View>
</View>
</View>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_more)}></View>
</View>
<View className={styles.payment_list_item} onClick={onShowScanPay}>
<View className={styles.payment_list_item_left}>
<View className={styles.payment_list_item_left_name}>
<View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
<View className={styles.payment_list_item_left_text}>扫码支付</View>
</View>
</View>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_more)}></View>
</View>
</View>
</View>
<View className={styles.btns} onClick={submitPay}>确认交易</View>
</View>
</Popup>
<OfflinePay show={offlinePayShow} onClose={() => setofflinePayShow(false)}/>
<ScanPay show={scanPayShow} onClose={() => setScanPayShow(false)}/>
</View>
)
})

2
src/pages/order/components/remark/index.tsx
View File

@ -27,7 +27,7 @@ export default ({onBlur, onSave}:Param) => {
}
return (
<View className={styles.order_popup}>
<View className={styles.order_popup_title}>添加备注</View>
<View className={styles.order_popup_title}>编辑备注</View>
<View className={styles.order_popup_input}>
<Textarea placeholder="请添加备注" maxlength={descData.count} cursorSpacing={100} onInput={(e) => getDesc(e)} onBlur={(e) => onBlur?.(e)}></Textarea>
<View className={styles.descDataNum}>{descData.number}/{descData.count}</View>

54
src/pages/order/components/scanPay/index.module.scss Normal file
View File

@ -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;
}
}

161
src/pages/order/components/scanPay/index.tsx Normal file
View File

@ -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<string>('')
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 (
<View className={styles.scanPay_main}>
<Popup show={show} showTitle={false} onClose={onClose}>
<View className={styles.scanPay_con}>
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
<View className={styles.title}>扫码支付</View>
<View className={styles.desc}>
<Text className={classnames(styles.miconfont, 'iconfont, icon-zhuyi')}></Text>
扫码支付成功后，自动更新状态
</View>
<View className={styles.scanPay_list}>
{(state.loading)&&<LoadingCard/>||
<ScrollView scrollY className={styles.scanPay_list}>
<Image mode="widthFix" src={payCodeImage} onClick={showImage}></Image>
</ScrollView>}
</View>
<View className={styles.btns} onClick={saveImageCheck}>保存电子确认单</View>
</View>
</Popup>
</View>
)
})

33
src/pages/order/components/shipmentMode/index.module.scss Normal file
View File

@ -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;
}
}

28
src/pages/order/components/shipmentMode/index.tsx Normal file
View File

@ -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 (
<View className={styles.order_title}>
<Text>收货方式</Text>
{shipmentMode.current.map(item => {
return <View className={classnames(styles.order_status, (selectValue == item.value)&&styles.order_status_selected)} onClick={() => selectShipmentMode(item.value)}>{item.label}</View>
})}
</View>
)
})

69
src/pages/order/components/submitOrderBtn/index.module.scss Normal file
View File

@ -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;
}
}
}
}

40
src/pages/order/components/submitOrderBtn/index.tsx Normal file
View File

@ -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 (
<>
<Text>¥</Text>
<Text>{Number(int_num).toLocaleString()}</Text>
<Text>.{decimals_num}</Text>
</>
)
}, [number])
return (
<>
<View className={styles.order_price}>
<View className={classnames(styles.order_price_text, styles.emphasis)}>
<Text>应付金额</Text>
<View className={styles.iconfont_msg}>
<Text className={classnames(styles.miconfont, 'iconfont icon-a-tuikuanshouhou')}></Text>
{/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */}
</View>
</View>
<View className={classnames(styles.order_price_num, styles.emphasis_num)} style={style}>
{priceDom()}
</View>
</View>
</>
)
})

39
src/pages/order/components/weightMemo/index.module.scss Normal file
View File

@ -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;
}
}
}

36
src/pages/order/components/weightMemo/index.tsx Normal file
View File

@ -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 (
<View className={styles.weight_memo}>
<View className={styles.weight_memo_item} onClick={() => onCheck?.()}>
<View className={styles.title}>
<Text className={classnames("iconfont icon-a-yuanmadanmadanguanli", styles.miconfont_check)}></Text>
<Text>陆盈纺织</Text>
</View>
<View className={styles.desc}>
<Text>查看原码单</Text>
<Text className={classnames("iconfont icon-a-moreback", styles.miconfont_more)}></Text>
</View>
</View>
<View className={styles.weight_memo_item} onClick={() => onCustom?.()}>
<View className={styles.title}>
<Text className={classnames("iconfont icon-a-yuanmadanmadanguanli", styles.miconfont_custom)}></Text>
<Text>我的码单</Text>
</View>
<View className={styles.desc}>
<Text>自定义</Text>
<Text className={classnames("iconfont icon-a-moreback", styles.miconfont_more)}></Text>
</View>
</View>
</View>
)
})

4
src/pages/order/index.config.ts
View File

@ -1,3 +1,5 @@
export default {
navigationBarTitleText: '确认订单'
navigationBarTitleText: '订单详情',
enablePullDownRefresh: true,
backgroundTextStyle: 'dark'
}

38
src/pages/order/index.module.scss
View File

@ -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;
}
}

222
src/pages/order/index.tsx
View File

@ -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>(Number(router.params.id))
useDidShow(() => {
getSaleOrderPreView()
})
//获取订单详情
const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
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<any>() //格式化后的数据
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<orderPreParam>({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)
})
})
//格式化初始地址
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<any>(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 (
<View className={styles.order_main}>
<OrderState state="预约中" desc="客服已接单，等待仓库配布出单..."/>
<View className={styles.order_title}>
<Text>收货方式</Text>
<View className={styles.order_status}>物流</View>
<View className={styles.order_status}>上门自提</View>
</View>
<AddressInfo/>
<KindList/>
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
<View className={styles.order_desc_con}>订单备注</View>
<View className={styles.order_desc_text}>点击填写</View>
<View className={classnames(styles.miconfont, 'iconfont icon-jiantou')}></View>
{/* <View className={styles.weight_memo_con}>
<WeightMemo/>
</View> */}
<OrderState list={orderDetail?.logistics_details}/>
<View >
<AddressInfoDetail orderId={orderDetail?.id} onSelect={getAddress} onChangeShipmentMode={getShipmentMode} ref={addressRef} defaultValue={defaultAddress} shipment_mode={orderDetail?.shipment_mode}/>
</View>
<KindList value={formatPreViewOrderMemo}/>
<View className={styles.order_info} >
<View className={styles.order_info_title}>订单备注</View>
<SearchInput showBorder={false} title='单号'>
<View className={styles.order_info_title}>订单信息</View>
<SearchInput showBorder={false} title='单号' height={50}>
<View className={styles.order_num}>
<Text>13535359535</Text>
<Text>{orderDetail?.order_no}</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
</View>
</SearchInput>
<SearchInput showBorder={false} title='下单时间'>
<Text>2022-4-5 10:11:55</Text>
<SearchInput showBorder={false} title='下单时间' height={50}>
<Text>{formatDateTime(orderDetail?.create_time)}</Text>
</SearchInput>
<SearchInput showBorder={false} title='付款时间' height={50}>
<Text>{formatDateTime(orderDetail?.create_time)}</Text>
</SearchInput>
</View>
<View className={styles.submit_order}>
<View className={styles.submit_order_number}>
<EstimatedAmount style={{color:'#007AFF'}} number={price}/>
<View className={styles.order_number_desc}>2种面料，6种颜色，共6条</View>
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
<View className={styles.order_desc_con}>订单备注</View>
{
orderRemark&&<View className={styles.order_desc_text}>{orderDetail?.remark}</View>||
<View className={styles.order_desc_text_hint}>填写备注</View>
}
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
</View>
<View className={styles.order_btn}>提交订单</View>
<View className={styles.submit_order}>
<OrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
{/* <View className={styles.order_btn} onClick={() => toPay()}>去支付</View> */}
</View>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
<Remark onSave={(e) => console.log(e)}/>
<Remark onSave={(e) => getRemark(e)}/>
</Popup>
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderId={orderDetail?.should_collect_order_id}/>
<View className="common_safe_area_y"></View>
</View>
)

121
src/pages/orderList/components/order/index.module.scss Normal file
View File

@ -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;
}
}

90
src/pages/orderList/components/order/index.tsx Normal file
View File

@ -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 (
<View className={styles.order_item}>
<View className={styles.header} onClick={() => goLink('/pages/order/index', {id: value?.id})}>
<View className={styles.user}>
<Image src={`${userInfo?.adminUserInfo?.avatar_url}`}/>
<Text className={styles.name}>{userInfo?.adminUserInfo?.user_name}</Text>
</View>
<View className={styles.order_num}>
<Text>订单号：{value?.order_no}</Text>
<Text className={classnames(styles.miconfont, 'iconfont, icon-a-moreback')}></Text>
</View>
<View className={styles.tag}>{value?.shipment_mode_name}</View>
</View>
<View className={styles.product_con} onClick={() => goLink('/pages/order/index', {id: value?.id})}>
<View className={styles.product_title}>
<View className={styles.product_tag}>{value?.sale_mode_name}</View>
<View className={styles.product_name}>{formatHashTag(value?.product_list[0].code, value?.product_list[0].name)}</View>
<View className={styles.product_status}>{value?.status_name}</View>
</View>
<View className={styles.product_list}>
<View className={styles.image}>
<Image src={formatImgUrl(value?.product_list[0].product_colors[0].texture_url)}/>
<View className={styles.color_num}>{value?.product_list[0].product_colors[0].code}</View>
</View>
<View className={styles.color_list}>
{value?.product_list[0].product_colors.map((itemColor, index) => {
return (
(index <= 1)&&<View className={styles.color_item}>
<View className={styles.color_title}>{formatHashTag(itemColor.code, itemColor.name)}</View>
<View className={styles.color_price}>{standardPrice(itemColor.sale_price, value.sale_mode)}</View>
<View className={styles.color_num}>×{formatCount(itemColor, value.sale_mode)}条</View>
</View>
)
})
}
<View className={styles.color_item}>
<View className={styles.color_more}>……</View>
<View className={styles.color_more}>……</View>
<View className={styles.color_more}>……</View>
</View>
</View>
</View>
<View className={styles.color_count_num}>{`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`}</View>
</View>
<OrderBtns status={value?.status} onClick={orderBtnsClick} orderId={value?.id as number}/>
</View>
)
})

18
src/pages/orderList/components/orderStatusList/index.module.scss Normal file
View File

@ -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;
}
}

46
src/pages/orderList/components/orderStatusList/index.tsx Normal file
View File

@ -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 (
<View className={styles.order_status_list}>
<ScrollView scrollX scrollIntoView={`tabs_${selectInfo.tabId}`} scrollWithAnimation={true}>
<View className={styles.order_list_scroll}>
{list.map((item, index) => {
return <View key={item.id} id={`tabs_${item.id}`} onClick={() => clickEvent({item, index})} className={classnames(styles.order_status_item, (selectInfo.selected==item.id)&&styles.selected)}>{item.name}</View>
})}
</View>
</ScrollView>
</View>
)
})

3
src/pages/orderList/index.config.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '订单列表',
}

38
src/pages/orderList/index.module.scss Normal file
View File

@ -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;
}
}
}

112
src/pages/orderList/index.tsx Normal file
View File

@ -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<any[]>([{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 (
<View className={styles.order_list_main}>
<View className={styles.title}>
<Search placeIcon="out" placeholder="搜索商品/名称/颜色/订单号" showBtn={true} changeOnSearch={getSearchData} debounceTime={300}/>
<OrderStatusList list={statusList} onSelect={changeStatus} defaultId={1}/>
</View>
<View className={styles.order_list}>
<InfiniteScroll statusMore={statusMore} selfonScrollToLower={getScrolltolower} refresherEnabled={true} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={getRefresherRefresh}>
{orderData?.list.map(item => {
return <View key={item.id} className={styles.order_item_con}> <Order value={item} onClickBtn={clickOrderBtn}/></View>
})}
</InfiniteScroll>
</View>
</View>
)
}

10
src/pages/searchList/components/selectData/index.module.scss
View File

@ -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;

4
src/pages/searchList/components/selectData/index.tsx
View File

@ -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 (
<View key={index} id={`tabs_${index}`} className={styles.tabs_item} onClick={() => clickEvent({item,index})}>
<View className={classnames(styles.tabs_item_con)}>{item.title}</View>
<View className={classnames(styles.tabs_item_con)}>{`${item.title}: ${item.value}`}</View>
</View>
)
})

3
src/pages/searchList/hightSearchList.module.scss
View File

@ -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()
}
}
}

155
src/pages/searchList/hightSearchList.tsx
View File

@ -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})
}
}, [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<ListProps[]>()
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])
}
}, [state.deviceLab])
//页面下拉刷新
const res = useManualPullDownRefresh()
usePullDownRefresh(() => {
setSearchField({...searchField ,size : 10})
})
return (
<View className={styles.main}>
<View className={styles.search}>
@ -86,16 +164,9 @@ export default () => {
</View>
<View className={styles.filter_btn_con}>
<ScrollView scrollX className={styles.filter_scroll}>
<View className={styles.filter_btn}>
<View>系列</View>
<View>幅宽</View>
<View>克重</View>
<View>克重</View>
<View>克重</View>
<View className={styles.selected}>成分</View>
<View className={styles.filter_scroll}>
<SelectData list={selectList}/>
</View>
</ScrollView>
<View className={styles.filter_more} onClick={() => setShowFilter(true)}>
<Text>筛选</Text>
<Text className={classnames('iconfont icon-shaixuan', styles.miconfont)}></Text>
@ -103,22 +174,24 @@ export default () => {
</View>
</View>
<View className={styles.list}>
<View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 (2条记录)</View>
<View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 ({materialList.total}条记录)</View>
<View className={styles.scroll}>
<InfiniteScroll
selfonScrollToLower={() => console.log('123123')}
selfonScrollToLower={() => getScrolltolower()}
selfOnScroll={(e) => onscroll(e)}
statusMore={statusMore}
>
<View className={styles.product_list}>
{new Array(9).fill(' ').map(item => {
return <View className={styles.product_item}>
{materialList.list.map(item => {
return <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
<View className={styles.product_img}>
<Image mode="aspectFill" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d"></Image>
<View className={styles.color_num}>25色</View>
<Image mode="aspectFill" src={formatImgUrl(item.texture_url)}></Image>
<View className={styles.color_num}>{(item.product_color_code)}#</View>
</View>
<View className={styles.product_info}>
<View className={styles.title}>0770#21S精棉平纹</View>
<View className={styles.introduce}>平纹系列</View>
<View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
<View className={styles.introduce}>{item.product_kind_name}</View>
</View>
</View>
})}
@ -126,7 +199,7 @@ export default () => {
</InfiniteScroll>
</View>
</View>
<Filter show={showFilter} onClose={() => setShowFilter(false)}/>
<Filter show={showFilter} onFiltr={(e) => getFiltr(e)} onClose={() => setShowFilter(false)}/>
</View>
)
}

78
src/pages/searchList/search.tsx
View File

@ -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 (
<View className={styles.main}>
<View className={styles.search}>
<Search style={{width: '100%'}} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} clickOnSearch={() => {}}/>
<Search style={{width: '100%'}} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} clickOnSearch={(e) => searchEvent(e)}/>
</View>
<View className={styles.hot}>
<View className={styles.hot_header}>
@ -17,12 +75,9 @@ export default () => {
<View className={styles.hot_header_up} onClick={() => goLink('/pages/searchList/searchList')}>高级搜索</View>
</View>
<View className={styles.list}>
<View className={styles.item}>9265</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>26s</View>
{searchData?.hotField?.map((item, index) => {
return <View key={index} className={styles.item} onClick={() => searchEvent(item.search_key, false)}>{item.search_key}</View>
})}
</View>
</View>
<View className={styles.history}>
@ -31,12 +86,7 @@ export default () => {
<View className={classnames('iconfont icon-lajixiang', styles.miconfont)}></View>
</View>
<View className={styles.list}>
<View className={styles.item}>9265</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>26s</View>
{searchData?.historyField?.map((item, index) => <View key={index} className={styles.item} onClick={() => searchEvent(item.search_key, false)}>{item.search_key}</View>)}
</View>
</View>
</View>

3
src/pages/searchList/searchList.module.scss
View File

@ -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();
}
}
}

142
src/pages/searchList/searchList.tsx
View File

@ -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<ListProps[]>()
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 (
<View className={styles.main}>
<View className={styles.search}>
<Search placeIcon="out" btnStyle={{color: '#007AFF'}}/>
<Search placeIcon="out" placeholder="请输入面料关键词" defaultValue={router.params.key} changeOnSearch={getSearchData} debounceTime={300}/>
</View>
<View className={styles.filter}>
<View className={styles.filter_all}>
@ -66,26 +153,27 @@ export default () => {
</View>
</View>
<View className={styles.list}>
<View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 (2条记录)</View>
<View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 ({materialList.total}条记录)</View>
<View className={styles.scroll}>
<InfiniteScroll
selfonScrollToLower={() => console.log('123123')}
selfonScrollToLower={() => getScrolltolower()}
selfOnScroll={(e) => onscroll(e)}
statusMore={statusMore}
>
<View className={styles.product_list}>
{new Array(9).fill(' ').map(item => {
return <View className={styles.product_item}>
{materialList.list.map(item => {
return <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
<View className={styles.product_img}>
<Image mode="aspectFill" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d"></Image>
<View className={styles.color_num}>25色</View>
<Image mode="aspectFill" src={formatImgUrl(item.texture_url)}></Image>
<View className={styles.color_num}>{(item.product_color_count)}色</View>
</View>
<View className={styles.product_info}>
<View className={styles.title}>0770#21S精棉平纹</View>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.tag_list}>
<View className={styles.tag}>160cm</View>
<View className={styles.tag}>110g</View>
<View className={styles.tag}>{item.width}</View>
<View className={styles.tag}>{item.weight_density}</View>
</View>
<View className={styles.introduce}>67.6%棉24%涤纶6.4%氨纶</View>
<View className={styles.introduce}>{item.component}</View>
</View>
</View>
})}
@ -93,7 +181,7 @@ export default () => {
</InfiniteScroll>
</View>
</View>
<Filter show={showFilter} onClose={() => setShowFilter(false)}/>
<Filter show={showFilter} onClose={() => setShowFilter(false)} onFiltr={(e) => getFiltr(e)} />
</View>
)
}

126
src/pages/subjectList/components/filter/index.module.scss Normal file
View File

@ -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;
}
}
}
}

115
src/pages/subjectList/components/filter/index.tsx Normal file
View File

@ -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 (
<Popup position="right" show={show} showTitle={false} onClose={() => onCloseEven()} showIconButton={true}>
<View className={styles.popup_main}>
<View className={styles.popup_title}>全部筛选</View>
<ScrollView scrollY className={styles.scroll}>
<View className={styles.popup_filter}>
<View className={styles.popup_filter_item}>
<View className={styles.title}>系列</View>
<View className={styles.btn_list}>
<View className={classnames(styles.btn_item, styles.select_btn_item)}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
<View className={styles.btn_item}>不限</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>幅宽</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input value={filterObj.minWidth} type="digit" onBlur={(e) => setNumber(e,'minWidth')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
<Text>—</Text>
<View className={styles.btn_width}><Input value={filterObj.maxWidth} type="digit" onBlur={(e) => setNumber(e,'maxWidth')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>cm</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>克重</View>
<View className={styles.btn_list_input}>
<View className={styles.btn_width}><Input type="digit" value={filterObj.minWeight} onBlur={(e) => setNumber(e,'minWeight')} placeholder="自定义最低值" placeholderStyle="font-size: 26rpx"/></View>
<Text>—</Text>
<View className={styles.btn_width}><Input type="digit" value={filterObj.maxWeight} onBlur={(e) => setNumber(e,'maxWeight')} placeholder="自定义最高值" placeholderStyle="font-size: 26rpx"/></View>
<View className={styles.unit}>g</View>
</View>
</View>
<View className={styles.popup_filter_item}>
<View className={styles.title}>成分</View>
<View className={styles.btn_list_element}>
<Textarea placeholder="请输入" cursorSpacing={60} value={filterObj.element} onInput={(e) => setElement(e)}/>
</View>
</View>
<View className="common_safe_area_y"></View>
</View>
</ScrollView>
<View className={styles.btns_con}>
<View className={styles.btns_two}>
<View className={styles.rest_btn} onClick={() => onRest()}>重置</View>
<View className={styles.verify_btn } onClick={() => onVerify()}>确认</View>
</View>
</View>
</View>
</Popup>
)
}

3
src/pages/subjectList/index.config.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '分类标题'
}

150
src/pages/subjectList/index.module.scss Normal file
View File

@ -0,0 +1,150 @@
.main{
display: flex;
flex-direction: column;
height: 100vh;
background-color: $color_bg_one;
.search{
padding: 20px;
}
.filter{
.filter_all {
display: flex;
justify-content: space-between;
padding: 20px 50px;
font-size: $font_size_medium;
color: $color_font_three;
.text_one{
color: $color_main;
display: flex;
align-items: center;
}
.text_two{
position: relative;
.miconfont{
font-size: 20px;
margin-left: 10px;
}
&::before{
content: '';
width: 2px;
height: 32px;
background-color: #C2C2C2;
position: absolute;
top: 0;
left: -50px;
}
}
}
.filter_btns{
display: flex;
justify-content: space-between;
padding: 20px;
.selected{
background-color: #ecf5ff;
border: 2px solid #cde5ff;
color: $color_main;
width: 122px;
height: 42.93px;
}
}
}
.list{
flex:1;
height: 0;
}
.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{
}
.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;
}
}
}
}
}

128
src/pages/subjectList/index.tsx Normal file
View File

@ -0,0 +1,128 @@
import { Input, ScrollView, Text, Textarea, View } from "@tarojs/components"
import classnames from "classnames";
import Search from '@/components/search'
import Product from '@/components/product'
import InfiniteScroll from '@/components/infiniteScroll'
import styles from './index.module.scss'
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import Filter from "@/components/filter";
import SortBtn from "@/components/sortBtn";
import SelectData, {ListProps} from "../searchList/components/selectData";
import {GetProductListApi} from '@/api/material'
import { useRouter } from "@tarojs/taro";
import { dataLoadingStatus, getFilterData } from "@/common/util";
import LoadingCard from "@/components/loadingCard";
export default () => {
const [showPopup, setShowPopup] = useState(false)
const router = useRouter()
//搜索参数
const [searchField, setSearchField] = useState({
code_or_name: '',
product_subject_id: router.params.id,
page : 1,
size : 10,
width: '',
weight_density: '',
product_kind_id: '',
component: ''
})
//获取专题
const [subjectList, setSubjectList] = useState<{list:any[], total:number}>({
list:[],
total:0
})
const {fetchData, state} = GetProductListApi()
const getSubjectList = async () => {
let res = await fetchData(getFilterData(searchField))
setSubjectList({...subjectList, list:res.data.list, total: res.data.total})
}
//监听筛选数据变化
useEffect(() => {
getSubjectList()
}, [searchField])
//上拉加载数据
const pageNum = useRef({size: searchField.size, page: searchField.page})
const [hasMore, setHasMore] = useState(true)
const getScrolltolower = () => {
if(subjectList.list.length < subjectList.total) {
pageNum.current.page++
const size = pageNum.current.size * pageNum.current.page
setSearchField({...searchField, size })
}
}
//数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({list:subjectList.list, total: subjectList.total, status: state.loading})
}, [subjectList])
//获取筛选条件
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<ListProps[]>()
const formatSelectList = (val = {data:{}, field:{}}) => {
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 getSearchData = useCallback((e) => {
pageNum.current.page = 1
setSubjectList(() => ({list:[], total:0}))
setSearchField((val) => ({...val, code_or_name:e, size:10}))
}, [])
return (
<View className={styles.main}>
<View className={styles.search}>
<Search placeIcon="out" showBtn={true} btnStyle={{color: '#007AFF'}} changeOnSearch={getSearchData} debounceTime={300}/>
</View>
<View className={styles.filter}>
<View className={styles.filter_all}>
<View className={styles.text_one}>
<Text>综合</Text>
<SortBtn status="top"/>
</View>
<View className={styles.text_two} onClick={() => setShowPopup(true)}>
<Text>筛选</Text>
<Text className={classnames('iconfont icon-bianji_bianji', styles.miconfont)}></Text>
</View>
</View>
<View className={styles.filter_btns}>
<SelectData list={selectList}/>
</View>
</View>
<View className={styles.list}>
<InfiniteScroll selfonScrollToLower={() => getScrolltolower()} statusMore={statusMore}>
<Product desStatus={false} productList={subjectList.list}/>
</InfiniteScroll>
</View>
<Filter show={showPopup} onClose={() => setShowPopup(false)} onFiltr={getFiltr}/>
</View>
)
}

35
src/reducers/commonData.ts Normal file
View File

@ -0,0 +1,35 @@
//公共数据,什么都可往里面传，可用于临时传参
import Taro from '@tarojs/taro'
import {
SET_COMMON,
CLEAR_COMMON
} from '../constants/common'
export type DataParam = {
common: any
}
type Action = {
type?: string,
data?: DataParam
}
const INIT = {
common: Taro.getStorageSync('common')?JSON.parse(Taro.getStorageSync('common')):null,
}
export default function counter (state = INIT, action: Action) {
const {type, data} = action
switch (type) {
case SET_COMMON:
Taro.setStorageSync('common',JSON.stringify(data))
return {...state,...data}
case CLEAR_COMMON:
Taro.removeStorageSync('common')
return {...state, common: null}
default:
return state
}
}

Some files were not shown because too many files have changed in this diff Show More