购物车

src/views/cart/index.module.less

@@ -135,4 +135,15 @@ body {
       position: relative;
     }
   }
+}
+.sellOut {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.2);
 }

src/views/cart/index.tsx

@@ -1,12 +1,22 @@
 import { defineComponent, ref } from 'vue'
 import ColHeader from '@/components/col-header'
 import styles from './index.module.less'
-import { Checkbox, SubmitBar, Card, Stepper, CheckboxGroup, Dialog, Toast } from 'vant'
+import {
+  Checkbox,
+  SubmitBar,
+  Card,
+  Stepper,
+  CheckboxGroup,
+  Dialog,
+  Toast,
+  Image
+} from 'vant'
 import request from '@/helpers/request'
 import { cartConfirm, formateAttr } from './cart'
 import ColResult from '@/components/col-result'
 import { moneyFormat } from '@/helpers/utils'
 import { postMessage } from '@/helpers/native-message'
+import iconSellOut from '../shop-mall/images/icon-sell-out.png'
 
 export default defineComponent({
   name: 'cart',
@@ -47,10 +57,10 @@ export default defineComponent({
       this.cartList = []
       try {
         let { code, data } = await request.get('/api-mall-portal/cart/list')
-        if (code === 200){
+        if (code === 200) {
           this.cartList = data.map(n => {
             n.stock = n.stock - n.lockStock
-            n.stock = n.stock <= 0 ? 1 : n.stock
+            n.stock = n.stock <= 0 ? 0 : n.stock
             return n
           })
         }
@@ -79,15 +89,13 @@ export default defineComponent({
           }
         )
         item.stock = data
-        if (item.quantity > data){
+        if (item.quantity > data) {
           item.quantity = data
           setTimeout(() => {
             Toast('库存不足')
-          },500)
-          
+          }, 500)
         }
-      } catch (err) {
-      }
+      } catch (err) {}
     },
 
     onChecked(id: number) {
@@ -173,12 +181,11 @@ export default defineComponent({
                 <CheckboxGroup v-model={this.selectItems}>
                   {this.cartList.map((item: any) => (
                     <div class={styles.cartItem}>
-                      <Checkbox name={item.id}>
+                      <Checkbox name={item.id} disabled={item.stock <= 0}>
                         <Card
                           price={moneyFormat(item.price)}
                           desc={formateAttr(item.productAttr)}
                           title={item.productName}
-                          thumb={item.productPic}
                           v-slots={{
                             num: () => (
                               <Stepper
@@ -197,6 +204,20 @@ export default defineComponent({
                                 max={item.stock}
                                 integer
                               />
+                            ),
+                            thumb: () => (
+                              <div>
+                                <Image src={item.productPic}></Image>
+                                {item.stock <= 0 && (
+                                  <div class={styles.sellOut}>
+                                    <Image
+                                      src={iconSellOut}
+                                      fit="cover"
+                                      class={styles.sellOutImg}
+                                    />
+                                  </div>
+                                )}
+                              </div>
                             )
                           }}
                         ></Card>

src/views/shop-mall/modal/add-goods-cart/index.module.less

@@ -70,6 +70,7 @@
   display: flex;
   flex-wrap: wrap;
   margin-top: 14px;
+  min-width: 60px;
 }
 
 .radio {

src/views/shop-mall/modal/add-goods-cart/index.tsx

@@ -39,65 +39,63 @@ export default defineComponent({
   data() {
     return {
       radio: '',
-      selectItem: {
-        id: '',
-        pic: '',
-        stock: 0,
-        price: 0,
-        spDataJson: '',
-        skuCode: ''
-      },
       total: 1,
-      totalData:{}
+      totalData: {},
+      skuStockList: []
     }
   },
+  mounted() {
+    this.setList()
+  },
   computed: {
-    skuStockList() {
-      // 处理规格
-      const skuStockList = this.item.skuStockList || [
-        {
-          id: -1,
-          price: this.item.price,
-          pic: this.item.pic,
-          stock: this.item.stock,
-          spData: null
-        }
-      ]
-      skuStockList.forEach((item: any) => {
-        item.stock = item.stock - item.lockStock
-        if (item.spData) {
-          const spData = JSON.parse(item.spData)
-          let str = ''
-          spData.forEach((sp: any) => {
-            str += `${sp.value}`
-          })
-          item.spDataJson = str
-        } else {
-          item.spDataJson = '默认'
+    selectItem() {
+      const select = this.skuStockList.find((n: any) => n.id == this.radio) as any
+      if (select) {
+        return {
+          ...select,
+          stock: select.stock - (select.lockStock < 0 ? 0 : select.lockStock)
         }
-      })
+      }
+      return {
+        stock: 0
+      }
+    }
+  },
+  methods: {
+    setList() {
+      // 处理规格
+      let skuStockList = [] as any
+      const item = JSON.parse(JSON.stringify(this.item))
+      if (Array.isArray(item.skuStockList)) {
+        skuStockList = item.skuStockList.map((n: any) => {
+          n.pic = n.pic || item.pic
+          if (n.spData) {
+            const spData = JSON.parse(n.spData)
+            let str = ''
+            spData.forEach((sp: any) => {
+              str += `${sp.value}`
+            })
+            n.spDataJson = str
+          } else {
+            n.spDataJson = '默认'
+          }
+          n.lock = n.stock - n.lockStock
+          return {
+            ...n
+          }
+        })
+      }
+      if (!skuStockList.length) return skuStockList
       // 处理默认显示
       let index = 0
       if (this.defaultRadio) {
         let i = skuStockList.findIndex(n => n.id == this.defaultRadio)
         index = i > -1 ? i : 0
       }
-      const { id, price, pic, stock, spDataJson, skuCode } = skuStockList[index]
-      this.getProductAddCartCount(id)
-      this.radio = id
-      this.selectItem = {
-        id,
-        price,
-        pic: pic || this.item.pic,
-        stock,
-        spDataJson,
-        skuCode
-      }
-
-      return skuStockList
-    }
-  },
-  methods: {
+      this.getProductAddCartCount(skuStockList[index].id)
+      this.radio = skuStockList[index].id
+      this.skuStockList = skuStockList
+    },
     async onAddCart() {
       const selectItem = this.selectItem
       const item = this.item
@@ -138,8 +136,8 @@ export default defineComponent({
     },
 
     // 获取购物车当前产品的数量
-    async getProductAddCartCount(id?:any) {
-      id = id ? id : this.skuStockList.find((n: any) => n.id == this.radio)?.id
+    async getProductAddCartCount(id?: any) {
+      id = id ? id : this.selectItem.id
       if (this.totalData[id]) {
         this.total = this.totalData[id]
         return
@@ -190,10 +188,7 @@ export default defineComponent({
           v-slots={{
             title: () => <div class={styles.title}>规格</div>,
             label: () => (
-              <RadioGroup
-                class={styles['radio-group']}
-                modelValue={this.radio}
-              >
+              <RadioGroup class={styles['radio-group']} modelValue={this.radio}>
                 {this.skuStockList.map((item: any) => {
                   const isActive = item.id === this.radio
                   const type = isActive ? 'primary' : 'default'
@@ -203,18 +198,8 @@ export default defineComponent({
                       name={item.id}
                       onClick={() => {
                         if (this.radio == item.id) return
-                        // 处理默认显示
-                        const { id, price, pic, stock, spDataJson, skuCode } = item
                         this.radio = item.id
-                        this.selectItem = {
-                          id,
-                          price,
-                          pic: pic || this.item.pic,
-                          stock,
-                          spDataJson,
-                          skuCode
-                        }
-                        this.getProductAddCartCount(id)
+                        this.getProductAddCartCount(item.id)
                       }}
                     >
                       <Tag size="large" plain={isActive} type={type}>