领取剪样

project.config.json

@@ -4,45 +4,53 @@
     "description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
     "appid": "wx68d92d7cbf0b6963",
     "setting": {
-    "urlCheck": true,
+        "urlCheck": false,
         "es6": false,
-    "postcss": false,
-    "minified": false,
-    "coverView": true,
-    "lazyloadPlaceholderEnable": false,
-    "preloadBackgroundData": false,
-    "autoAudits": false,
-    "uglifyFileName": false,
-    "uploadWithSourceMap": true,
         "enhance": true,
-    "useMultiFrameRuntime": true,
+        "postcss": false,
+        "preloadBackgroundData": false,
+        "minified": false,
+        "newFeature": false,
+        "coverView": true,
+        "nodeModules": false,
+        "autoAudits": false,
         "showShadowRootInWxmlPanel": true,
-    "packNpmManually": false,
-    "packNpmRelationList": [],
-    "minifyWXSS": true,
-    "useStaticServer": true,
-    "showES6CompileOption": false,
+        "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,
-    "minifyWXML": true
+        "ignoreUploadUnusedFiles": true
     },
     "compileType": "miniprogram",
-  "libVersion": "2.28.0",
+    "libVersion": "2.30.1",
     "srcMiniprogramRoot": "dist/",
     "packOptions": {
         "ignore": [],
         "include": []
     },
-  "condition": {},
     "editorSetting": {
         "tabIndent": "insertSpaces",
         "tabSize": 2
-  }
+    },
+    "condition": {}
 }

project.private.config.json

@@ -7,6 +7,15 @@
     },
     "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
     "condition": {
+        "plugin": {
+            "list": []
+        },
+        "game": {
+            "list": []
+        },
+        "gamePlugin": {
+            "list": []
+        },
         "miniprogram": {
             "list": [
                 {
@@ -29,6 +38,13 @@
                     "query": "",
                     "launchMode": "default",
                     "scene": null
+                },
+                {
+                    "name": "",
+                    "pathName": "pages/cutSampleList/index",
+                    "query": "",
+                    "scene": null,
+                    "launchMode": "default"
                 }
             ]
         }

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',
+      ],
+    },
   ],
 }

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
 // 生成密钥

src/pages/colorCardClipping/components/colorCardList/index.tsx

@@ -121,7 +121,7 @@ export default () => {
         </InfiniteScroll>
       </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>
     </View>
   </>

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',
     })
   }
 

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

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

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

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

src/pages/cutSampleList/index.config.ts

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

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

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