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

领取剪样

Browse Source
This commit is contained in:
czmpower 2023-02-19 15:07:44 +08:00 committed by czm
parent 4043c77382
commit bf1a74981b
18 changed files with 816 additions and 352 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
project.config.json
View File

@ -1,48 +1,56 @@
{ {
"miniprogramRoot": "dist/", "miniprogramRoot": "dist/",
"projectname": "EShop", "projectname": "EShop",
"description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
"appid": "wx68d92d7cbf0b6963", "appid": "wx68d92d7cbf0b6963",
"setting": { "setting": {
"urlCheck": true, "urlCheck": false,
"es6": false, "es6": false,
"postcss": false, "enhance": true,
"minified": false, "postcss": false,
"coverView": true, "preloadBackgroundData": false,
"lazyloadPlaceholderEnable": false, "minified": false,
"preloadBackgroundData": false, "newFeature": false,
"autoAudits": false, "coverView": true,
"uglifyFileName": false, "nodeModules": false,
"uploadWithSourceMap": true, "autoAudits": false,
"enhance": true, "showShadowRootInWxmlPanel": true,
"useMultiFrameRuntime": true, "scopeDataCheck": false,
"showShadowRootInWxmlPanel": true, "uglifyFileName": false,
"packNpmManually": false, "checkInvalidKey": true,
"packNpmRelationList": [], "checkSiteMap": true,
"minifyWXSS": true, "uploadWithSourceMap": true,
"useStaticServer": true, "compileHotReLoad": true,
"showES6CompileOption": false, "lazyloadPlaceholderEnable": false,
"checkInvalidKey": true, "useMultiFrameRuntime": true,
"compileHotReLoad": true, "useApiHook": true,
"babelSetting": { "useApiHostProcess": true,
"ignore": [], "babelSetting": {
"disablePlugins": [], "ignore": [],
"outputPath": "" "disablePlugins": [],
"outputPath": ""
},
"useIsolateContext": true,
"userConfirmedBundleSwitch": false,
"packNpmManually": false,
"packNpmRelationList": [],
"minifyWXSS": true,
"disableUseStrict": false,
"minifyWXML": true,
"showES6CompileOption": false,
"useCompilerPlugins": false,
"ignoreUploadUnusedFiles": true
}, },
"disableUseStrict": false, "compileType": "miniprogram",
"useCompilerPlugins": false, "libVersion": "2.30.1",
"minifyWXML": true "srcMiniprogramRoot": "dist/",
}, "packOptions": {
"compileType": "miniprogram", "ignore": [],
"libVersion": "2.28.0", "include": []
"srcMiniprogramRoot": "dist/", },
"packOptions": { "editorSetting": {
"ignore": [], "tabIndent": "insertSpaces",
"include": [] "tabSize": 2
}, },
"condition": {}, "condition": {}
"editorSetting": {
"tabIndent": "insertSpaces",
"tabSize": 2
}
} }

76
project.private.config.json
View File

@ -1,36 +1,52 @@
{ {
"projectname": "EShop", "projectname": "EShop",
"setting": { "setting": {
"compileHotReLoad": true, "compileHotReLoad": true,
"bigPackageSizeSupport": true, "bigPackageSizeSupport": true,
"urlCheck": false "urlCheck": false
}, },
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
"condition": { "condition": {
"miniprogram": { "plugin": {
"list": [ "list": []
{
"name": "收藏夹",
"pathName": "pages/collection/collectionDetail/index",
"query": "",
"launchMode": "default",
"scene": null
}, },
{ "game": {
"name": "", "list": []
"pathName": "pages/sampleComparison/index",
"query": "",
"launchMode": "default",
"scene": null
}, },
{ "gamePlugin": {
"name": "", "list": []
"pathName": "pages/searchList/hightSearchList", },
"query": "", "miniprogram": {
"launchMode": "default", "list": [
"scene": null {
"name": "收藏夹",
"pathName": "pages/collection/collectionDetail/index",
"query": "",
"launchMode": "default",
"scene": null
},
{
"name": "",
"pathName": "pages/sampleComparison/index",
"query": "",
"launchMode": "default",
"scene": null
},
{
"name": "",
"pathName": "pages/searchList/hightSearchList",
"query": "",
"launchMode": "default",
"scene": null
},
{
"name": "",
"pathName": "pages/cutSampleList/index",
"query": "",
"scene": null,
"launchMode": "default"
}
]
} }
]
} }
}
} }

8
src/app.config.ts
View File

@ -213,7 +213,7 @@ export default {
], ],
}, },
{ {
root: 'pages/getColorCard', root: 'pages/colorCardList',
pages: [ pages: [
'index', 'index',
], ],
@ -230,5 +230,11 @@ export default {
'index', 'index',
], ],
}, },
{
root: 'pages/cutSampleList',
pages: [
'index',
],
},
], ],
} }

2
src/common/constant.ts
View File

@ -14,7 +14,7 @@ export const BASE_URL = CURRENT_BASE_URL
// export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞 // export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞
// export const BASE_URL = 'http://192.168.1.7:50002/lymarket' // 添 // export const BASE_URL = 'http://192.168.1.7:50002/lymarket' // 添
// export const BASE_URL = 'http://192.168.1.28:50001/lymarket' // 婷 // export const BASE_URL = 'http://192.168.1.28:50001/lymarket' // 婷
export const BASE_URL = 'http://192.168.1.42:50002/lymarket' // 杰 // export const BASE_URL = 'http://192.168.1.42:50002/lymarket' // 杰
// CDN // CDN
// 生成密钥 // 生成密钥

2
src/pages/colorCardClipping/components/colorCardList/index.tsx
View File

@ -121,7 +121,7 @@ export default () => {
</InfiniteScroll> </InfiniteScroll>
</View> </View>
</View> </View>
<View className={styles.get_card_btn} onClick={() => goLink('/pages/getColorCard/index')}> <View className={styles.get_card_btn} onClick={() => goLink('/pages/colorCardList/index')}>
<Text>领取色卡</Text> <Text>领取色卡</Text>
</View> </View>
</> </>

72
src/pages/getColorCard/components/productItem/index.module.scss → src/pages/colorCardList/components/productItem/index.module.scss
View File

@ -1,36 +1,36 @@
.get_card_item { .get_card_item {
padding: 24px 16px; padding: 24px 16px;
display: flex; display: flex;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
.image { .image {
width: 144px; width: 144px;
height: 144px; height: 144px;
} }
.card_info { .card_info {
margin-left: 24px; margin-left: 24px;
flex: 1; flex: 1;
.card_info_name { .card_info_name {
font-size: 28px; font-size: 28px;
color: rgba(0, 0, 0, 0.8); color: rgba(0, 0, 0, 0.8);
} }
.card_info_label { .card_info_label {
display: grid; display: grid;
grid-template-columns: repeat(3, 100px); grid-template-columns: repeat(3, 100px);
grid-gap: 10px 10px; grid-gap: 10px 10px;
margin-top: 10px; margin-top: 10px;
text { text {
font-size: 24px; font-size: 24px;
color: #4581ff; color: #4581ff;
height: 34px; height: 34px;
text-align: center; text-align: center;
line-height: 34px; line-height: 34px;
background-color: rgba(69, 129, 255, 0.15); background-color: rgba(69, 129, 255, 0.15);
border-radius: 8px; border-radius: 8px;
} }
} }
} }
.checkBox { .checkBox {
display: flex; display: flex;
align-items: center; align-items: center;
} }
} }

106
src/pages/getColorCard/components/productItem/index.tsx → src/pages/colorCardList/components/productItem/index.tsx
View File

@ -1,53 +1,53 @@
import { Text, View } from '@tarojs/components' import { Text, View } from '@tarojs/components'
import { memo, useState } from 'react' import { memo, useState } from 'react'
import styles from './index.module.scss' import styles from './index.module.scss'
import LabAndImg from '@/components/LabAndImg' import LabAndImg from '@/components/LabAndImg'
import Checkbox from '@/components/checkbox' import Checkbox from '@/components/checkbox'
interface ProductItemParamType { interface ProductItemParamType {
code: string code: string
id: number id: number
name: string name: string
} }
export interface ParamType { export interface ParamType {
id: number id: number
affiliation_product: ProductItemParamType[] affiliation_product: ProductItemParamType[]
color_card_name: string color_card_name: string
texture_url: string texture_url: string
lab: { l: number; a: number; b: number } lab: { l: number; a: number; b: number }
rgb: { r: number; g: number; b: number } rgb: { r: number; g: number; b: number }
is_add: boolean is_add: boolean
onSelect?: (val: ParamType, status: boolean) => void onSelect?: (val: ParamType, status: boolean) => void
count?: number count?: number
} }
export default memo((props: ParamType) => { export default memo((props: ParamType) => {
const { affiliation_product, color_card_name = '', texture_url = '', lab, rgb } = props const { affiliation_product, color_card_name = '', texture_url = '', lab, rgb } = props
const [checkStatus, setCheckStatus] = useState(false) const [checkStatus, setCheckStatus] = useState(false)
const changeSelect = () => { const changeSelect = () => {
setCheckStatus(!checkStatus) setCheckStatus(!checkStatus)
props.onSelect?.(props, !checkStatus) props.onSelect?.(props, !checkStatus)
} }
const onSelect = () => { const onSelect = () => {
props.onSelect?.(props, true) props.onSelect?.(props, true)
setCheckStatus(true) setCheckStatus(true)
} }
const onClose = () => { const onClose = () => {
props.onSelect?.(props, false) props.onSelect?.(props, false)
setCheckStatus(false) setCheckStatus(false)
} }
return <View className={styles.get_card_item} onClick={changeSelect}> return <View className={styles.get_card_item} onClick={changeSelect}>
<View className={styles.image}> <View className={styles.image}>
<LabAndImg value={{}} /> <LabAndImg value={{}} />
</View> </View>
<View className={styles.card_info}> <View className={styles.card_info}>
<View className={styles.card_info_name}>{color_card_name}</View> <View className={styles.card_info_name}>{color_card_name}</View>
<View className={styles.card_info_label}> <View className={styles.card_info_label}>
{affiliation_product?.map(item => <Text key={item.id}>{item.code}</Text>)} {affiliation_product?.map(item => <Text key={item.id}>{item.code}</Text>)}
</View> </View>
</View> </View>
<View className={styles.checkBox} onClick={e => e.stopPropagation()}> <View className={styles.checkBox} onClick={e => e.stopPropagation()}>
<Checkbox status={props.is_add ? true : checkStatus} disabled={props.is_add} onSelect={onSelect} onClose={onClose} /> <Checkbox status={props.is_add ? true : checkStatus} disabled={props.is_add} onSelect={onSelect} onClose={onClose} />
</View> </View>
</View> </View>
}) })

8
src/pages/getColorCard/index.config.ts → src/pages/colorCardList/index.config.ts
View File

@ -1,4 +1,4 @@
export default { export default {
navigationBarTitleText: '添加色卡', navigationBarTitleText: '添加色卡',
enableShareAppMessage: true, enableShareAppMessage: true,
} }

98
src/pages/getColorCard/index.module.scss → src/pages/colorCardList/index.module.scss
View File

@ -1,49 +1,49 @@
.main { .main {
min-height: 100vh; min-height: 100vh;
background-color: #f7f7f7ff; background-color: #f7f7f7ff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.search { .search {
width: 100%; width: 100%;
height: 96px; height: 96px;
background-color: #fff; background-color: #fff;
padding: 16px 24px; padding: 16px 24px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
.btn_reset { .btn_reset {
display: flex; display: flex;
width: 100px; width: 100px;
font-size: 28px; font-size: 28px;
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
color: rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, 0.6);
} }
} }
.get_card_con { .get_card_con {
background-color: #fff; background-color: #fff;
box-sizing: border-box; box-sizing: border-box;
height: calc(100vh - 260px); height: calc(100vh - 260px);
.get_card_list { .get_card_list {
padding: 0 16px; padding: 0 16px;
} }
} }
.get_card_btn { .get_card_btn {
height: 161px; height: 161px;
background: #ffffff; background: #ffffff;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-shadow: 0px -5px 20px -8px rgba(0, 0, 0, 0.06); box-shadow: 0px -5px 20px -8px rgba(0, 0, 0, 0.06);
text { text {
width: 702px; width: 702px;
height: 80px; height: 80px;
background: #4581ff; background: #4581ff;
border-radius: 40px; border-radius: 40px;
text-align: center; text-align: center;
line-height: 80px; line-height: 80px;
color: #fff; color: #fff;
} }
} }
} }

262
src/pages/getColorCard/index.tsx → src/pages/colorCardList/index.tsx
View File

@ -1,131 +1,131 @@
import { Image, Text, View } from '@tarojs/components' import { Image, Text, View } from '@tarojs/components'
import Taro, { getCurrentPages, useDidShow } from '@tarojs/taro' import Taro, { getCurrentPages, useDidShow } from '@tarojs/taro'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import classNames from 'classnames' import classNames from 'classnames'
import styles from './index.module.scss' import styles from './index.module.scss'
import type { ParamType } from './components/productItem' import type { ParamType } from './components/productItem'
import ProductItem from './components/productItem' import ProductItem from './components/productItem'
import InfiniteScroll from '@/components/infiniteScroll' import InfiniteScroll from '@/components/infiniteScroll'
import Search from '@/components/search' import Search from '@/components/search'
import { GetColorCardApi } from '@/api/colorCard' import { GetColorCardApi } from '@/api/colorCard'
import { dataLoadingStatus, getFilterData } from '@/common/util' import { dataLoadingStatus, getFilterData } from '@/common/util'
export default () => { export default () => {
const { fetchData, state: cardState } = GetColorCardApi() const { fetchData, state: cardState } = GetColorCardApi()
const [colorCardData, setColorCardData] = useState<{ list: ParamType[]; total: number }>({ const [colorCardData, setColorCardData] = useState<{ list: ParamType[]; total: number }>({
list: [], list: [],
total: 0, total: 0,
}) })
const [searchData, setSearchData] = useState<{ color_card_ids?: number[]; name?: string; page: number; size: number }>({ const [searchData, setSearchData] = useState<{ color_card_ids?: number[]; name?: string; page: number; size: number }>({
page: 1, page: 1,
size: 10, size: 10,
}) })
const shopColorCardData = useRef<ParamType[]>([]) const shopColorCardData = useRef<ParamType[]>([])
// 获取已加入购物车的数据id // 获取已加入购物车的数据id
const getShopId = () => { const getShopId = () => {
if (shopColorCardData.current.length <= 0) { return null } if (shopColorCardData.current.length <= 0) { return null }
return shopColorCardData.current?.map((item) => { return shopColorCardData.current?.map((item) => {
return item.id return item.id
}) })
} }
// 获取数据 // 获取数据
const getGetColorCard = async() => { const getGetColorCard = async() => {
console.log('getShopId():::', getShopId()) console.log('getShopId():::', getShopId())
const { data } = await fetchData(getFilterData({ ...searchData, color_card_ids: getShopId() })) const { data } = await fetchData(getFilterData({ ...searchData, color_card_ids: getShopId() }))
setColorCardData(() => ({ list: data.list, total: data.total })) setColorCardData(() => ({ list: data.list, total: data.total }))
setRefresherTriggeredStatus(() => false) setRefresherTriggeredStatus(() => false)
} }
useEffect(() => { useEffect(() => {
if (Taro.getStorageSync('colorCard') && shopColorCardData.current.length <= 0) { if (Taro.getStorageSync('colorCard') && shopColorCardData.current.length <= 0) {
shopColorCardData.current = Taro.getStorageSync('colorCard') ? JSON.parse(Taro.getStorageSync('colorCard')) : [] shopColorCardData.current = Taro.getStorageSync('colorCard') ? JSON.parse(Taro.getStorageSync('colorCard')) : []
// Taro.removeStorageSync('colorCard') // Taro.removeStorageSync('colorCard')
} }
getGetColorCard() getGetColorCard()
}, [searchData]) }, [searchData])
const getSearch = (con) => { const getSearch = (con) => {
setSearchData(e => ({ ...e, name: con })) setSearchData(e => ({ ...e, name: con }))
} }
const onReset = () => { const onReset = () => {
setSearchData(e => ({ ...e, name: '' })) setSearchData(e => ({ ...e, name: '' }))
} }
// 选择的数据 // 选择的数据
const [selectList, setSelectList] = useState<ParamType[]>([]) const [selectList, setSelectList] = useState<ParamType[]>([])
// 数据加载状态 // 数据加载状态
const statusMore = useMemo(() => { const statusMore = useMemo(() => {
return dataLoadingStatus({ list: colorCardData.list, total: cardState.total, status: cardState.loading }) return dataLoadingStatus({ list: colorCardData.list, total: cardState.total, status: cardState.loading })
}, [colorCardData, cardState]) }, [colorCardData, cardState])
// 上拉加载数据 // 上拉加载数据
const pageNum = useRef({ size: searchData.size, page: searchData.page }) const pageNum = useRef({ size: searchData.size, page: searchData.page })
const getScrolltolower = useCallback(() => { const getScrolltolower = useCallback(() => {
if (colorCardData.list.length < colorCardData.total) { if (colorCardData.list.length < colorCardData.total) {
pageNum.current.page++ pageNum.current.page++
const size = pageNum.current.size * pageNum.current.page const size = pageNum.current.size * pageNum.current.page
setSearchData(e => ({ ...e, size })) setSearchData(e => ({ ...e, size }))
} }
}, [colorCardData]) }, [colorCardData])
// 列表下拉刷新 // 列表下拉刷新
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false) const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
const getRefresherRefresh = async() => { const getRefresherRefresh = async() => {
pageNum.current.size = 1 pageNum.current.size = 1
setRefresherTriggeredStatus(true) setRefresherTriggeredStatus(true)
setSearchData(val => ({ ...val, size: 10 })) setSearchData(val => ({ ...val, size: 10 }))
} }
const onSubmit = () => { const onSubmit = () => {
selectList?.map((item) => { selectList?.map((item) => {
item.count = 1 item.count = 1
}) })
Taro.setStorageSync('colorCard', JSON.stringify([...selectList, ...shopColorCardData.current])) Taro.setStorageSync('colorCard', JSON.stringify([...selectList, ...shopColorCardData.current]))
Taro.redirectTo({ Taro.redirectTo({
url: '/pages/colorCardOrder/index', url: '/pages/colorCardOrder/index',
}) })
} }
const onSelectData = (val, status) => { const onSelectData = (val, status) => {
if (status) { if (status) {
setSelectList(e => [...e, val]) setSelectList(e => [...e, val])
} }
else { else {
const res = selectList?.filter((item) => { const res = selectList?.filter((item) => {
return val.id != item.id return val.id != item.id
}) })
setSelectList(e => res) setSelectList(e => res)
} }
} }
return <View className={styles.main}> return <View className={styles.main}>
<View className={styles.search}> <View className={styles.search}>
<Search defaultValue={searchData?.name} placeholder="请输入搜索面料/色卡" changeOnSearch={getSearch} debounceTime={300} /> <Search defaultValue={searchData?.name} placeholder="请输入搜索面料/色卡" changeOnSearch={getSearch} debounceTime={300} />
<View className={styles.btn_reset} onClick={onReset}>取消</View> <View className={styles.btn_reset} onClick={onReset}>取消</View>
</View> </View>
<View className={styles.get_card_con}> <View className={styles.get_card_con}>
<InfiniteScroll <InfiniteScroll
selfonScrollToLower={getScrolltolower} selfonScrollToLower={getScrolltolower}
refresherTriggered={refresherTriggeredStatus} refresherTriggered={refresherTriggeredStatus}
statusMore={statusMore} statusMore={statusMore}
refresherEnabled refresherEnabled
selfOnRefresherRefresh={getRefresherRefresh} selfOnRefresherRefresh={getRefresherRefresh}
> >
{colorCardData.list?.map((item) => { {colorCardData.list?.map((item) => {
return ( return (
<View className={styles.get_card_list} key={item.id}> <View className={styles.get_card_list} key={item.id}>
<ProductItem {...item} onSelect={onSelectData} /> <ProductItem {...item} onSelect={onSelectData} />
</View> </View>
) )
})} })}
</InfiniteScroll> </InfiniteScroll>
</View> </View>
<View className={styles.get_card_btn} onClick={onSubmit}> <View className={styles.get_card_btn} onClick={onSubmit}>
<Text>确认</Text> <Text>确认</Text>
</View> </View>
</View> </View>
} }

2
src/pages/colorCardOrder/index.tsx
View File

@ -45,7 +45,7 @@ export default () => {
Taro.setStorageSync('colorCard', JSON.stringify(list)) Taro.setStorageSync('colorCard', JSON.stringify(list))
Taro.setStorageSync('colorCardOther', JSON.stringify({ address: addressInfo || {}, remark: submitData.current.remark })) Taro.setStorageSync('colorCardOther', JSON.stringify({ address: addressInfo || {}, remark: submitData.current.remark }))
Taro.navigateTo({ Taro.navigateTo({
url: '/pages/getColorCard/index', url: '/pages/colorCardList/index',
}) })
} }

82
src/pages/cutSampleList/components/popupSelectColor/index.module.scss Normal file
View File

@ -0,0 +1,82 @@
.main {
.header {
display: flex;
flex-direction: column;
padding: 32px 40px;
box-sizing: border-box;
text {
&:nth-child(1) {
font-size: 32px;
}
&:nth-child(2) {
font-size: 28px;
color: rgba(0, 0, 0, 0.4);
}
}
}
.color_list {
padding: 0 40px;
.scroll_view {
height: 70vh;
}
.color_list_con {
display: grid;
grid-template-columns: repeat(4, auto);
grid-gap: 37px 40px;
padding-bottom: 170px;
}
.item {
width: 136px;
.item_color {
width: 136px;
height: 136px;
border: 4px solid #4581ff;
box-sizing: border-box;
border-radius: 50%;
position: relative;
.icon {
position: absolute;
top: 0;
right: 0;
}
}
.item_name {
font-size: 24px;
color: #666666;
text-align: center;
margin-top: 10px;
}
}
}
.btns {
height: 162px;
background: #ffffff;
box-shadow: 0px -5px 20px -8px rgba(0, 0, 0, 0.06);
display: flex;
padding: 16px 24px 0 24px;
justify-content: space-between;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
.cancel,
.submit {
width: 335px;
height: 80px;
border-radius: 40px;
border: 1px solid #087eff;
text-align: center;
line-height: 80px;
}
.cancel {
font-size: 28px;
color: #4581ff;
}
.submit {
font-size: 28px;
color: #fff;
background: #4581ff;
}
}
}

47
src/pages/cutSampleList/components/popupSelectColor/index.tsx Normal file
View File

@ -0,0 +1,47 @@
import { ScrollView, Text, View } from '@tarojs/components'
import classNames from 'classnames'
import styles from './index.module.scss'
import Popup from '@/components/popup'
import LabAndImg from '@/components/LabAndImg'
import IconFont from '@/components/iconfont/iconfont'
export interface Param {
show: boolean
onClose?: () => void
}
export default (props: Param) => {
const { show = false, onClose } = props
return <View className={styles.main}>
<Popup show={show} showTitle={false} onClose={onClose}>
<View className={styles.header}>
<Text>请选择色号剪样( 20 )</Text>
<Text>剪样大小为A4，大约22cm*30cm</Text>
</View>
<View className={styles.color_list}>
<ScrollView scrollY className={styles.scroll_view}>
<View className={styles.color_list_con}>
{new Array(20).fill('').map((item, index) => {
return <View key={index} className={styles.item} >
<View className={classNames(styles.item_color, styles.select_color)}>
<LabAndImg
value={{}}
round
name="001"
/>
<View className={styles.icon}>
<IconFont name="icon-xuanzhongyanse" size={35} />
</View>
</View>
<View className={styles.item_name}>罗兰紫</View>
</View>
})}
</View>
</ScrollView>
</View>
<View className={styles.btns}>
<View className={styles.cancel}>取消</View>
<View className={styles.submit}>领取剪样(8)</View>
</View>
</Popup>
</View>
}

65
src/pages/cutSampleList/components/productItem/index.module.scss Normal file
View File

@ -0,0 +1,65 @@
.get_card_item {
padding: 24px 16px;
display: flex;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
.image {
width: 144px;
height: 144px;
position: relative;
text {
position: absolute;
bottom: 0;
right: 0;
font-size: 22px;
width: 75px;
height: 34px;
background: rgba(0, 0, 0, 0.55);
border-radius: 15px 0px 8px 0px;
text-align: center;
line-height: 34px;
color: #fff;
}
}
.card_info {
margin-left: 24px;
flex: 1;
.card_info_name {
font-size: 28px;
color: rgba(0, 0, 0, 0.8);
}
.card_info_label {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 10px 10px;
margin-top: 10px;
text {
font-size: 24px;
color: #4581ff;
height: 34px;
text-align: center;
line-height: 34px;
background-color: rgba(69, 129, 255, 0.15);
border-radius: 8px;
}
}
.desc {
font-size: 24px;
color: rgba(0, 0, 0, 0.4);
margin-top: 10px;
}
}
.checkBox {
display: flex;
align-items: center;
.add_btn {
width: 148px;
height: 64px;
border-radius: 40px;
border: 1px solid #087eff;
text-align: center;
line-height: 64px;
color: #4581ff;
font-size: 28px;
}
}
}

58
src/pages/cutSampleList/components/productItem/index.tsx Normal file
View File

@ -0,0 +1,58 @@
import { Text, View } from '@tarojs/components'
import { memo, useState } from 'react'
import PopupSelectColor from '../popupSelectColor'
import styles from './index.module.scss'
import LabAndImg from '@/components/LabAndImg'
import Checkbox from '@/components/checkbox'
interface ProductItemParamType {
code: string
id: number
name: string
}
export interface ParamType {
id: number
affiliation_product: ProductItemParamType[]
color_card_name: string
texture_url: string
lab: { l: number; a: number; b: number }
rgb: { r: number; g: number; b: number }
is_add: boolean
onSelect?: (val: ParamType, status: boolean) => void
count?: number
}
export default memo((props: ParamType) => {
const { affiliation_product, color_card_name = '', texture_url = '', lab, rgb } = props
const [checkStatus, setCheckStatus] = useState(false)
const changeSelect = () => {
setCheckStatus(!checkStatus)
props.onSelect?.(props, !checkStatus)
}
const onSelect = () => {
props.onSelect?.(props, true)
setCheckStatus(true)
}
const onClose = () => {
props.onSelect?.(props, false)
setCheckStatus(false)
}
return <View className={styles.get_card_item} onClick={changeSelect}>
<View className={styles.image}>
<LabAndImg value={{}} />
<Text>24色</Text>
</View>
<View className={styles.card_info}>
<View className={styles.card_info_name}>2S单面平纹(食毛)</View>
<View className={styles.card_info_label}>
{new Array(2).fill('').map(item => <Text key={item.id}>170CM</Text>)}
</View>
<View className={styles.desc}>67.6%棉24%涤纶6.4%氨纶</View>
</View>
<View className={styles.checkBox} onClick={e => e.stopPropagation()}>
<View className={styles.add_btn} onClick={() => onSelect()}>添加</View>
</View>
</View>
})

4
src/pages/cutSampleList/index.config.ts Normal file
View File

@ -0,0 +1,4 @@
export default {
navigationBarTitleText: '添加剪样',
enableShareAppMessage: true,
}

49
src/pages/cutSampleList/index.module.scss Normal file
View File

@ -0,0 +1,49 @@
.main {
min-height: 100vh;
background-color: #f7f7f7ff;
display: flex;
flex-direction: column;
.search {
width: 100%;
height: 96px;
background-color: #fff;
padding: 16px 24px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
.btn_reset {
display: flex;
width: 100px;
font-size: 28px;
align-items: center;
justify-content: flex-end;
color: rgba(0, 0, 0, 0.6);
}
}
.get_card_con {
background-color: #fff;
box-sizing: border-box;
height: calc(100vh - 260px);
.get_card_list {
padding: 0 16px;
}
}
.get_card_btn {
height: 161px;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px -5px 20px -8px rgba(0, 0, 0, 0.06);
text {
width: 702px;
height: 80px;
background: #4581ff;
border-radius: 40px;
text-align: center;
line-height: 80px;
color: #fff;
}
}
}

129
src/pages/cutSampleList/index.tsx Normal file
View File

@ -0,0 +1,129 @@
import { Image, Text, View } from '@tarojs/components'
import Taro, { getCurrentPages, useDidShow } from '@tarojs/taro'
import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import classNames from 'classnames'
import styles from './index.module.scss'
import type { ParamType } from './components/productItem'
import ProductItem from './components/productItem'
import PopupSelectColor from './components/popupSelectColor'
import InfiniteScroll from '@/components/infiniteScroll'
import Search from '@/components/search'
import { GetColorCardApi } from '@/api/colorCard'
import { dataLoadingStatus, getFilterData } from '@/common/util'
export default () => {
const { fetchData, state: cardState } = GetColorCardApi()
const [colorCardData, setColorCardData] = useState<{ list: ParamType[]; total: number }>({
list: [],
total: 0,
})
const [searchData, setSearchData] = useState<{ color_card_ids?: number[]; name?: string; page: number; size: number }>({
page: 1,
size: 10,
})
const shopColorCardData = useRef<ParamType[]>([])
// 获取已加入购物车的数据id
const getShopId = () => {
if (shopColorCardData.current.length <= 0) { return null }
return shopColorCardData.current?.map((item) => {
return item.id
})
}
// 获取数据
const getGetColorCard = async() => {
console.log('getShopId():::', getShopId())
const { data } = await fetchData(getFilterData({ ...searchData, color_card_ids: getShopId() }))
setColorCardData(() => ({ list: data.list, total: data.total }))
setRefresherTriggeredStatus(() => false)
}
useEffect(() => {
if (Taro.getStorageSync('colorCard') && shopColorCardData.current.length <= 0) {
shopColorCardData.current = Taro.getStorageSync('colorCard') ? JSON.parse(Taro.getStorageSync('colorCard')) : []
// Taro.removeStorageSync('colorCard')
}
getGetColorCard()
}, [searchData])
const getSearch = (con) => {
setSearchData(e => ({ ...e, name: con }))
}
const onReset = () => {
setSearchData(e => ({ ...e, name: '' }))
}
// 选择的数据
const [selectList, setSelectList] = useState<ParamType[]>([])
// 数据加载状态
const statusMore = useMemo(() => {
return dataLoadingStatus({ list: colorCardData.list, total: cardState.total, status: cardState.loading })
}, [colorCardData, cardState])
// 上拉加载数据
const pageNum = useRef({ size: searchData.size, page: searchData.page })
const getScrolltolower = useCallback(() => {
if (colorCardData.list.length < colorCardData.total) {
pageNum.current.page++
const size = pageNum.current.size * pageNum.current.page
setSearchData(e => ({ ...e, size }))
}
}, [colorCardData])
// 列表下拉刷新
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
const getRefresherRefresh = async() => {
pageNum.current.size = 1
setRefresherTriggeredStatus(true)
setSearchData(val => ({ ...val, size: 10 }))
}
const onSubmit = () => {
selectList?.map((item) => {
item.count = 1
})
Taro.setStorageSync('colorCard', JSON.stringify([...selectList, ...shopColorCardData.current]))
Taro.redirectTo({
url: '/pages/colorCardOrder/index',
})
}
const [showColorList, setShowColorList] = useState(false)
const onSelectData = (val, status) => {
setShowColorList(true)
}
const onClose = () => {
setShowColorList(false)
}
return <View className={styles.main}>
<View className={styles.search}>
<Search defaultValue={searchData?.name} placeholder="请输入搜索面料/色卡" changeOnSearch={getSearch} debounceTime={300} />
<View className={styles.btn_reset} onClick={onReset}>取消</View>
</View>
<View className={styles.get_card_con}>
<InfiniteScroll
// selfonScrollToLower={getScrolltolower}
// refresherTriggered={refresherTriggeredStatus}
statusMore={2}
refresherEnabled
// selfOnRefresherRefresh={getRefresherRefresh}
>
{new Array(10).fill('').map((item) => {
return (
<View className={styles.get_card_list} key={item.id}>
<ProductItem {...item} onSelect={onSelectData} />
</View>
)
})}
</InfiniteScroll>
</View>
<View className={styles.get_card_btn} onClick={onSubmit}>
<Text>确认</Text>
</View>
<PopupSelectColor show={showColorList} onClose={onClose} />
</View>
}