电子商城测试版v4

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

@@ -14,7 +14,10 @@
         align-items: center;
         flex-direction: column;
         width: 100%;
-        margin-top: 200px;
+        height: 60vh;
+        margin-top: 100px;
+        padding: 20px;
+        box-sizing: border-box;
         image{
             width:100%;
             border-radius: 10px;

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

@@ -1,9 +1,12 @@
+import LabAndImg from "@/components/LabAndImg"
 import { Image, View } from "@tarojs/components"
 import styles from './index.module.scss'
 
 export type colorItem = {
     title: string,
-    img: string
+    lab: {l:number, a:number, b:number},
+    rgb: {r:number, g:number, b:number},
+    texture_url: string
 }
 export type colorParams = {
     value?: colorItem,
@@ -15,7 +18,7 @@ export default ({value, show = false, onClose}: colorParams) => {
         <>
             {show&&<View className={styles.main} catch-move="true" onClick={() => onClose?.()}>
                 <View className={styles.con}>
-                    <Image mode="aspectFill" src={value?.img as string}/>
+                    <LabAndImg value={{lab:value?.lab,rgb:value?.rgb,texture_url:value?.texture_url}}/>
                     <View className={styles.name}>{value?.title}</View>
                 </View>
             </View>}

src/pages/details/index.module.scss

@@ -125,16 +125,33 @@
         background-color: #fff;
         padding-bottom: constant(safe-area-inset-bottom);
         padding-bottom: env(safe-area-inset-bottom);
+        
+    
         .buy_cart{
             width: 150px;
             color: $color_font_three;
             text-align: center;
+            position: relative;
             .text{
                 font-size: $font_size_min;
             }
             .miconfont{
                 font-size: 36px;
             }
+            .product_num{
+                position: absolute;
+                font-size: 23px;
+                background-color: red;
+                color: #fff;
+                height: 36px;
+                line-height: 36px;
+                padding: 0 6px;
+                border-radius: 72px;
+                min-width: 25px;
+                text-align: center;
+                top: 0;
+                right: 20px;
+            }
         }
         .buy_btn{
             display: flex;

src/pages/details/index.tsx

@@ -18,6 +18,7 @@ import LabAndImg from '@/components/LabAndImg';
 import { alert } from '@/common/common';
 import AddCollection from '@/components/addCollection';
 import { AddFavoriteApi } from '@/api/favorite';
+import { GetShoppingCartApi } from '@/api/shopCart';
 
 type item = {title:string, img:string, url:string, id:number}
 
@@ -27,7 +28,7 @@ type Params = {
   style?: Object
 }
 export default (props:Params) => {
-  const {checkLogin, getPhoneNumber, userInfo} = useLogin()
+  const {getPhoneNumber, userInfo} = useLogin()
 
   //获取参数(有两种参数：1.商品id, 2.页面分享)
   const router = useRouter()
@@ -50,9 +51,9 @@ export default (props:Params) => {
   }
 
   useDidShow(() => {
-    checkLogin()
     judgeParam()
     setShowCart(false)
+    getShoppingCart()
   })
 
   useEffect(() => {
@@ -96,7 +97,9 @@ export default (props:Params) => {
   const getColorItem = (item) => {
     setColorInfo({
       title: item.code,
-      img: item.texture_url,
+      texture_url: item.texture_url,
+      lab: item.lab,
+      rgb: item.rgb
     })
     setShowPreview(true)
   }
@@ -149,7 +152,14 @@ export default (props:Params) => {
     setCollectionShow(false)
   }, [])
 
-  
+  //获取购物车数据数量
+  const [shopCount, setShopCount] = useState<number>(0)
+  const {fetchData: fetchDataShopCount} = GetShoppingCartApi()
+  const getShoppingCart = async () => {
+      const {data} = await fetchDataShopCount()
+      let color_list = data.color_list||[]
+      setShopCount(color_list.length)
+  }
 
 
   //页面下拉刷新
@@ -163,7 +173,7 @@ export default (props:Params) => {
       <DesSwiper list={productInfo.texture_url||[]}/>
       <View className={styles.product_header}>
         <View className={styles.title}>
-          <View className={styles.name}>{productName}</View>
+          {productInfo.code&&<View className={styles.name}>{productName}</View>}
           <View className={styles.des}>{productInfo.describe}</View>
         </View>
         <View className={styles.share}>
@@ -205,6 +215,7 @@ export default (props:Params) => {
         <View className={styles.buy_cart}  onClick={() => setShowCart(true)}>
           <View className={classnames('iconfont icon-gouwuche', styles.miconfont)}></View>
           <View className={styles.text}>购物车</View>
+          {(shopCount > 0)&&<View className={styles.product_num}>{shopCount > 99?'99+':shopCount}</View>}
         </View>
         {
             (!userInfo.adminUserInfo?.is_authorize_phone)&&<View className={styles.buy_btn} >