diff --git a/project.config.json b/project.config.json index 9ca72a2..070713d 100644 --- a/project.config.json +++ b/project.config.json @@ -1,48 +1,56 @@ { - "miniprogramRoot": "dist/", - "projectname": "EShop", - "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", - "appid": "wx68d92d7cbf0b6963", - "setting": { - "urlCheck": true, - "es6": false, - "postcss": false, - "minified": false, - "coverView": true, - "lazyloadPlaceholderEnable": false, - "preloadBackgroundData": false, - "autoAudits": false, - "uglifyFileName": false, - "uploadWithSourceMap": true, - "enhance": true, - "useMultiFrameRuntime": true, - "showShadowRootInWxmlPanel": true, - "packNpmManually": false, - "packNpmRelationList": [], - "minifyWXSS": true, - "useStaticServer": true, - "showES6CompileOption": false, - "checkInvalidKey": true, - "compileHotReLoad": true, - "babelSetting": { - "ignore": [], - "disablePlugins": [], - "outputPath": "" + "miniprogramRoot": "dist/", + "projectname": "EShop", + "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", + "appid": "wx68d92d7cbf0b6963", + "setting": { + "urlCheck": false, + "es6": false, + "enhance": true, + "postcss": false, + "preloadBackgroundData": false, + "minified": false, + "newFeature": false, + "coverView": true, + "nodeModules": false, + "autoAudits": false, + "showShadowRootInWxmlPanel": true, + "scopeDataCheck": false, + "uglifyFileName": false, + "checkInvalidKey": true, + "checkSiteMap": true, + "uploadWithSourceMap": true, + "compileHotReLoad": true, + "lazyloadPlaceholderEnable": false, + "useMultiFrameRuntime": true, + "useApiHook": true, + "useApiHostProcess": true, + "babelSetting": { + "ignore": [], + "disablePlugins": [], + "outputPath": "" + }, + "useIsolateContext": true, + "userConfirmedBundleSwitch": false, + "packNpmManually": false, + "packNpmRelationList": [], + "minifyWXSS": true, + "disableUseStrict": false, + "minifyWXML": true, + "showES6CompileOption": false, + "useCompilerPlugins": false, + "ignoreUploadUnusedFiles": true }, - "disableUseStrict": false, - "useCompilerPlugins": false, - "minifyWXML": true - }, - "compileType": "miniprogram", - "libVersion": "2.28.0", - "srcMiniprogramRoot": "dist/", - "packOptions": { - "ignore": [], - "include": [] - }, - "condition": {}, - "editorSetting": { - "tabIndent": "insertSpaces", - "tabSize": 2 - } + "compileType": "miniprogram", + "libVersion": "2.30.1", + "srcMiniprogramRoot": "dist/", + "packOptions": { + "ignore": [], + "include": [] + }, + "editorSetting": { + "tabIndent": "insertSpaces", + "tabSize": 2 + }, + "condition": {} } \ No newline at end of file diff --git a/project.private.config.json b/project.private.config.json index c428241..26a50a2 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -1,36 +1,52 @@ { - "projectname": "EShop", - "setting": { - "compileHotReLoad": true, - "bigPackageSizeSupport": true, - "urlCheck": false - }, - "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", - "condition": { - "miniprogram": { - "list": [ - { - "name": "收藏夹", - "pathName": "pages/collection/collectionDetail/index", - "query": "", - "launchMode": "default", - "scene": null + "projectname": "EShop", + "setting": { + "compileHotReLoad": true, + "bigPackageSizeSupport": true, + "urlCheck": false + }, + "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html", + "condition": { + "plugin": { + "list": [] }, - { - "name": "", - "pathName": "pages/sampleComparison/index", - "query": "", - "launchMode": "default", - "scene": null + "game": { + "list": [] }, - { - "name": "", - "pathName": "pages/searchList/hightSearchList", - "query": "", - "launchMode": "default", - "scene": null + "gamePlugin": { + "list": [] + }, + "miniprogram": { + "list": [ + { + "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" + } + ] } - ] } - } } \ No newline at end of file diff --git a/src/app.config.ts b/src/app.config.ts index a5ae792..32bfcf1 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -213,7 +213,7 @@ export default { ], }, { - root: 'pages/getColorCard', + root: 'pages/colorCardList', pages: [ 'index', ], @@ -230,5 +230,11 @@ export default { 'index', ], }, + { + root: 'pages/cutSampleList', + pages: [ + 'index', + ], + }, ], } diff --git a/src/common/constant.ts b/src/common/constant.ts index ede38c2..19f8db6 100644 --- a/src/common/constant.ts +++ b/src/common/constant.ts @@ -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.7:50002/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 // 生成密钥 diff --git a/src/pages/colorCardClipping/components/colorCardList/index.tsx b/src/pages/colorCardClipping/components/colorCardList/index.tsx index 37b22c6..e33c46a 100644 --- a/src/pages/colorCardClipping/components/colorCardList/index.tsx +++ b/src/pages/colorCardClipping/components/colorCardList/index.tsx @@ -121,7 +121,7 @@ export default () => { - goLink('/pages/getColorCard/index')}> + goLink('/pages/colorCardList/index')}> 领取色卡 diff --git a/src/pages/getColorCard/components/productItem/index.module.scss b/src/pages/colorCardList/components/productItem/index.module.scss similarity index 95% rename from src/pages/getColorCard/components/productItem/index.module.scss rename to src/pages/colorCardList/components/productItem/index.module.scss index 7b54df1..f536c0f 100644 --- a/src/pages/getColorCard/components/productItem/index.module.scss +++ b/src/pages/colorCardList/components/productItem/index.module.scss @@ -1,36 +1,36 @@ -.get_card_item { - padding: 24px 16px; - display: flex; - border-bottom: 1px solid rgba(0, 0, 0, 0.1); - .image { - width: 144px; - height: 144px; - } - .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; - } - } - } - .checkBox { - display: flex; - align-items: center; - } -} +.get_card_item { + padding: 24px 16px; + display: flex; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + .image { + width: 144px; + height: 144px; + } + .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; + } + } + } + .checkBox { + display: flex; + align-items: center; + } +} diff --git a/src/pages/getColorCard/components/productItem/index.tsx b/src/pages/colorCardList/components/productItem/index.tsx similarity index 97% rename from src/pages/getColorCard/components/productItem/index.tsx rename to src/pages/colorCardList/components/productItem/index.tsx index 8e31233..d003b89 100644 --- a/src/pages/getColorCard/components/productItem/index.tsx +++ b/src/pages/colorCardList/components/productItem/index.tsx @@ -1,53 +1,53 @@ -import { Text, View } from '@tarojs/components' -import { memo, useState } from 'react' -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 - - - - - {color_card_name} - - {affiliation_product?.map(item => {item.code})} - - - e.stopPropagation()}> - - - -}) +import { Text, View } from '@tarojs/components' +import { memo, useState } from 'react' +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 + + + + + {color_card_name} + + {affiliation_product?.map(item => {item.code})} + + + e.stopPropagation()}> + + + +}) diff --git a/src/pages/getColorCard/index.config.ts b/src/pages/colorCardList/index.config.ts similarity index 95% rename from src/pages/getColorCard/index.config.ts rename to src/pages/colorCardList/index.config.ts index 9d45219..1469056 100644 --- a/src/pages/getColorCard/index.config.ts +++ b/src/pages/colorCardList/index.config.ts @@ -1,4 +1,4 @@ -export default { - navigationBarTitleText: '添加色卡', - enableShareAppMessage: true, -} +export default { + navigationBarTitleText: '添加色卡', + enableShareAppMessage: true, +} diff --git a/src/pages/getColorCard/index.module.scss b/src/pages/colorCardList/index.module.scss similarity index 95% rename from src/pages/getColorCard/index.module.scss rename to src/pages/colorCardList/index.module.scss index a1e763e..bc0b9b1 100644 --- a/src/pages/getColorCard/index.module.scss +++ b/src/pages/colorCardList/index.module.scss @@ -1,49 +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; - } - } -} +.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; + } + } +} diff --git a/src/pages/getColorCard/index.tsx b/src/pages/colorCardList/index.tsx similarity index 97% rename from src/pages/getColorCard/index.tsx rename to src/pages/colorCardList/index.tsx index bb333de..bfb102a 100644 --- a/src/pages/getColorCard/index.tsx +++ b/src/pages/colorCardList/index.tsx @@ -1,131 +1,131 @@ -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 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([]) - - // 获取已加入购物车的数据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([]) - - // 数据加载状态 - 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 onSelectData = (val, status) => { - if (status) { - setSelectList(e => [...e, val]) - } - else { - const res = selectList?.filter((item) => { - return val.id != item.id - }) - setSelectList(e => res) - } - } - - return - - - 取消 - - - - {colorCardData.list?.map((item) => { - return ( - - - - ) - })} - - - - 确认 - - -} +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 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([]) + + // 获取已加入购物车的数据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([]) + + // 数据加载状态 + 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 onSelectData = (val, status) => { + if (status) { + setSelectList(e => [...e, val]) + } + else { + const res = selectList?.filter((item) => { + return val.id != item.id + }) + setSelectList(e => res) + } + } + + return + + + 取消 + + + + {colorCardData.list?.map((item) => { + return ( + + + + ) + })} + + + + 确认 + + +} diff --git a/src/pages/colorCardOrder/index.tsx b/src/pages/colorCardOrder/index.tsx index e1e8915..a6a95a5 100644 --- a/src/pages/colorCardOrder/index.tsx +++ b/src/pages/colorCardOrder/index.tsx @@ -45,7 +45,7 @@ export default () => { Taro.setStorageSync('colorCard', JSON.stringify(list)) Taro.setStorageSync('colorCardOther', JSON.stringify({ address: addressInfo || {}, remark: submitData.current.remark })) Taro.navigateTo({ - url: '/pages/getColorCard/index', + url: '/pages/colorCardList/index', }) } diff --git a/src/pages/cutSampleList/components/popupSelectColor/index.module.scss b/src/pages/cutSampleList/components/popupSelectColor/index.module.scss new file mode 100644 index 0000000..9b1a53d --- /dev/null +++ b/src/pages/cutSampleList/components/popupSelectColor/index.module.scss @@ -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; + } + } +} diff --git a/src/pages/cutSampleList/components/popupSelectColor/index.tsx b/src/pages/cutSampleList/components/popupSelectColor/index.tsx new file mode 100644 index 0000000..8bfdc81 --- /dev/null +++ b/src/pages/cutSampleList/components/popupSelectColor/index.tsx @@ -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 + + + 请选择色号剪样( 20 ) + 剪样大小为A4，大约22cm*30cm + + + + + {new Array(20).fill('').map((item, index) => { + return + + + + + + + 罗兰紫 + + })} + + + + + 取消 + 领取剪样(8) + + + +} diff --git a/src/pages/cutSampleList/components/productItem/index.module.scss b/src/pages/cutSampleList/components/productItem/index.module.scss new file mode 100644 index 0000000..a8d7116 --- /dev/null +++ b/src/pages/cutSampleList/components/productItem/index.module.scss @@ -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; + } + } +} diff --git a/src/pages/cutSampleList/components/productItem/index.tsx b/src/pages/cutSampleList/components/productItem/index.tsx new file mode 100644 index 0000000..3c790a6 --- /dev/null +++ b/src/pages/cutSampleList/components/productItem/index.tsx @@ -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 + + + 24色 + + + 2S单面平纹(食毛) + + {new Array(2).fill('').map(item => 170CM)} + + 67.6%棉24%涤纶6.4%氨纶 + + e.stopPropagation()}> + onSelect()}>添加 + + + +}) diff --git a/src/pages/cutSampleList/index.config.ts b/src/pages/cutSampleList/index.config.ts new file mode 100644 index 0000000..4adf1d3 --- /dev/null +++ b/src/pages/cutSampleList/index.config.ts @@ -0,0 +1,4 @@ +export default { + navigationBarTitleText: '添加剪样', + enableShareAppMessage: true, +} diff --git a/src/pages/cutSampleList/index.module.scss b/src/pages/cutSampleList/index.module.scss new file mode 100644 index 0000000..bc0b9b1 --- /dev/null +++ b/src/pages/cutSampleList/index.module.scss @@ -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; + } + } +} diff --git a/src/pages/cutSampleList/index.tsx b/src/pages/cutSampleList/index.tsx new file mode 100644 index 0000000..d0b23f0 --- /dev/null +++ b/src/pages/cutSampleList/index.tsx @@ -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([]) + + // 获取已加入购物车的数据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([]) + + // 数据加载状态 + 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 + + + 取消 + + + + {new Array(10).fill('').map((item) => { + return ( + + + + ) + })} + + + + 确认 + + + +}