商城测试版v7

src/pages/details/components/orderCount/index.tsx

@@ -13,11 +13,12 @@ import {GetColorList} from "@/api/materialColor"
 import {AddShoppingCartApi} from "@/api/shopCart"
 import Taro, { useRouter } from "@tarojs/taro";
 import UseLogin from "@/use/useLogin"
-import { formatHashTag, formatPriceDiv } from "@/common/fotmat";
+import { formatHashTag, formatPriceDiv, formatRemoveHashTag } from "@/common/fotmat";
 import { debounce, getFilterData } from "@/common/util";
 import LabAndImg from "@/components/LabAndImg";
 import VirtualList from '@tarojs/components/virtual-list'
 import useCommonData from "@/use/useCommonData";
+import LabAndImgShow from "@/components/LabAndImgShow";
 
 
 
@@ -200,12 +201,11 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
     //虚拟滚动
     const Rows = useCallback(({id, index, style, data}:any) => {
         let item = data[index]
-        console.log('123456')
         return (
             <>
                 {item&&<View className={styles.item} key={item.id}>
                     <View className={styles.item_color}>
-                        <LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
+                        <LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url, title:item.code}} showStatus={false}/>
                     </View>
                     <View className={styles.item_con}>
                         <View className={styles.title}>{formatHashTag(item.code, item.name)}</View>

src/pages/details/components/preview/index.module.scss

@@ -8,6 +8,7 @@
     display: flex;
     justify-content: center;
     align-items: flex-start;
+    z-index: 999;
     .con{
         display: flex;
         justify-content: center;

src/pages/details/components/swiper/index.tsx

@@ -1,6 +1,7 @@
 import { formatImgUrl } from "@/common/fotmat"
 import { Image, Swiper, SwiperItem, View } from "@tarojs/components"
 import { useMemo, useRef, useState } from "react"
+import Taro from '@tarojs/taro'
 import styles  from './index.module.scss'
 
 type item = {title:string, img:string, url:string, id:number}
@@ -16,21 +17,32 @@ export default ({list = []}: params) => {
         return list.length
     },[list])
 
+    const formatImages = useMemo(() => {
+        return list?.map(item => formatImgUrl(item, '!w800'))
+    }, [list])
+
     const swiperChange = (e) => {
         setPageIndex(e.detail.current + 1)
     }
+
+    const onShowImage = () => {
+        Taro.previewImage({
+            current: formatImages[0], 
+            urls: formatImages  
+        })
+    }
     
     return (
         <View className={styles.swiper}>
-            <Swiper className={styles.swiper_item} circular={true}   onAnimationFinish={(e) => swiperChange(e)}>
-            {list?.map((item) => {
-                return <SwiperItem key={item.id}>
-                    <View className={styles.image_item} >
-                        <Image mode="aspectFill" src={formatImgUrl(item)}></Image>
-                    </View>
-                </SwiperItem>
-            })}
-            </Swiper>
+            {list.length > 0 && <Swiper className={styles.swiper_item} circular={true} onAnimationFinish={(e) => swiperChange(e)}>
+                {list?.map((item) => {
+                    return <SwiperItem >
+                        <View className={styles.image_item} onClick={onShowImage}>
+                            <Image mode="aspectFill" src={formatImgUrl(item, '!w400')}></Image>
+                        </View>
+                    </SwiperItem>
+                })}
+            </Swiper>}
             {(list.length > 0)&&<View className={styles.page} ref={pageRef}>{pageIndex+'/'+pageCount}</View>}
         </View>
     )

src/pages/details/index.tsx

@@ -5,7 +5,6 @@ import classnames from "classnames";
 import DesSwiper from './components/swiper';
 import OrderCount from './components/orderCount';
 import ShopCart from '@/components/shopCart';
-import Preview,{colorItem} from './components/preview';
 import styles  from './index.module.scss'
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import {formatHashTag} from '@/common/fotmat'
@@ -20,6 +19,7 @@ import AddCollection from '@/components/addCollection';
 import { AddFavoriteApi, DelFavoriteProductApi } from '@/api/favorite';
 import useCommonData from '@/use/useCommonData';
 import { IMG_CND_Prefix } from '@/common/constant';
+import LabAndImgShow from '@/components/LabAndImgShow';
 
 type item = {title:string, img:string, url:string, id:number}
 
@@ -95,19 +95,6 @@ export default (props:Params) => {
   // `
   const html = ``
 
-  //弹窗提示
-  const [colorInfo, setColorInfo] = useState<colorItem>()
-  const [showPreview, setShowPreview] = useState(false)
-  const getColorItem = (item) => {
-    setColorInfo({
-      title: item.code,
-      texture_url: item.texture_url,
-      lab: item.lab,
-      rgb: item.rgb
-    })
-    setShowPreview(true)
-  }
-
   const {setSortCode, userInfo : userObj } = useUserInfo()
   //详情页获取分享短码
   const {ShareDetail} = SHARE_SCENE
@@ -209,9 +196,9 @@ export default (props:Params) => {
         <View className={styles.title}>色号 ({productInfo?.product_color_list?.length})</View>
           <View className={styles.list}>
               {productInfo?.product_color_list?.map(item => {
-                return <View className={styles.item} onClick={() => getColorItem(item)}>
+                return <View key={item.id} className={styles.item}>
                   <View className={styles.item_color}>
-                    <LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
+                    <LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url, title: item.code}} showStatus={true}/>
                   </View>
                   <View className={styles.item_name}>{item.code}</View>
                 </View>