优化element弹窗

package.json

@@ -11,7 +11,9 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "axios": "^1.6.2",
+    "electron": "^29.0.1",
     "element-plus": "^2.4.3",
+    "lodash": "^4.17.21",
     "pinia": "^2.1.7",
     "vue": "^3.3.8",
     "vue-router": "^4.2.5"

src/App.vue

@@ -58,6 +58,11 @@ router.beforeEach((to, from) => {
   --r-lighter: calc(var(--r) + (255 - var(--r)) * 0.2);
   --g-lighter: calc(var(--g) + (255 - var(--g)) * 0.2);
   --b-lighter: calc(var(--b) + (255 - var(--b)) * 0.2);
+
+  --r-lighter2: calc(var(--r) + (255 - var(--r)) * 0.5);
+  --g-lighter2: calc(var(--g) + (255 - var(--g)) * 0.5);
+  --b-lighter2: calc(var(--b) + (255 - var(--b)) * 0.5);
+
   --r-darker: calc(var(--r) * 0.8);
   --g-darker: calc(var(--g) * 0.8);
   --b-darker: calc(var(--b) * 0.8);
@@ -67,6 +72,7 @@ router.beforeEach((to, from) => {
   --el-button-hover-bg-color: var(--primary-color) !important;
   --el-color-primary-light-3: rgb(var(--r-lighter), var(--g-lighter), var(--b-lighter)) !important;
   --el-color-primary-dark-2: rgb(var(--r-darker), var(--g-darker), var(--b-darker)) !important;
+  --el-color-primary-light-5: rgb(var(--r-lighter2), var(--g-lighter2), var(--b-lighter2)) !important;
 
   --el-font-size-base: 20px !important;
   --el-message-close-size: 20px !important;
@@ -78,6 +84,10 @@ html {
   color: #333;
 }
 
+.el-dialog__headerbtn {
+  top: 10px !important;
+}
+
 .el-textarea {
   font-size: var(--el-font-size-base) !important;
 }
@@ -116,6 +126,16 @@ html {
   margin-right: 16px;
 }
 
+.el-input__suffix {
+  font-size: 20px !important;
+}
+
+.empty {
+  display: flex;
+  justify-content: center;
+  padding-top: 100px;
+}
+
 /*定义滚动条高宽及背景
  高宽分别对应横竖滚动条的尺寸*/
 ::-webkit-scrollbar {
@@ -213,5 +233,4 @@ html {
     }
   }
 }
-
 </style>

src/components/skuModal.vue

@@ -1,22 +1,27 @@
 <template>
     <el-dialog :title="goods.name" width="800" v-model="dialogVisible">
         <div class="header">选择规格</div>
-        <div class="row" v-for="(item, index) in goods.tbProductSpec.specList" :key="index">
+        <div v-loading="loading">
-            <div class="title">{{ item.name }}</div>
+            <div class="row" v-for="(item, index) in goods.tbProductSpec.specList" :key="index">
-            <div class="sku_wrap">
+                <div class="title">{{ item.name }}</div>
-                <div class="item" :class="{ active: val.active }" v-for="(val, i) in  item.value" :key="i"
+                <div class="sku_wrap">
-                    @click="selectedSku(index, i)">{{ val.name }}</div>
+                    <div class="item" :class="{ active: val.active }" v-for="(val, i) in  item.value" :key="i"
+                        @click="selectedSku(index, i)">{{ val.name }}</div>
+                </div>
             </div>
         </div>
-        <div class="info">
-            <span>库存：{{  }}</span>
-        </div>
         <div class="footer">
-            <div class="btn">
+            <div class="info" v-if="goodsInfo.id">
-                <el-button plain style="width: 100%;" @click="dialogVisible = false">取消</el-button>
+                <span>库存：{{ goodsInfo.stockNumber }}</span>
+                <span>￥{{ goodsInfo.salePrice }}</span>
             </div>
-            <div class="btn">
+            <div class="btn_wrap">
-                <el-button type="primary" style="width: 100%;">确认</el-button>
+                <div class="btn">
+                    <el-button plain style="width: 100%;" @click="dialogVisible = false">取消</el-button>
+                </div>
+                <div class="btn">
+                    <el-button type="primary" style="width: 100%;" :disabled="!goodsInfo.id">确认</el-button>
+                </div>
             </div>
         </div>
     </el-dialog>
@@ -35,7 +40,9 @@ const goods = ref({})
 const selectedSkuNum = ref(0)
 const selectedSkuTag = ref('')
 
+const goodsInfo = ref({})
 
+const loading = ref(false)
 
 // 选择规格
 function selectedSku(index, i) {
@@ -49,7 +56,11 @@ function selectedSku(index, i) {
         goods.value.tbProductSpec.specList[index].value[i].active = true
         selectedSkuNum.value++
     }
+    selectedSuccess()
+}
 
+// 规格是否选择完
+function selectedSuccess() {
     let num = 0
     let tag = []
     goods.value.tbProductSpec.specList.map(item => {
@@ -64,7 +75,7 @@ function selectedSku(index, i) {
     })
 
     if (selectedSkuNum.value >= goods.value.tbProductSpec.specList.length) {
-        console.log('规格选完了');
+        // 规格选完了
         queryProductSkuAjax()
     }
 }
@@ -72,32 +83,43 @@ function selectedSku(index, i) {
 // 通过选中的商品规格查询价格
 async function queryProductSkuAjax() {
     try {
+        loading.value = true
         const res = await queryProductSku({
             shopId: store.userInfo.shopId,
             productId: goods.value.id,
             spec_tag: selectedSkuTag.value
         })
+        goodsInfo.value = res
+        setTimeout(() => {
+            loading.value = false
+        }, 100)
     } catch (error) {
+        loading.value = false
         console.log(error)
     }
 }
 
 // 显示规格
 function show(item) {
+    goodsInfo.value = {}
+    goods.value = {}
     selectedSkuNum.value = 0
     dialogVisible.value = true
     goods.value = item
-    goods.value.tbProductSpec.specList = JSON.parse(goods.value.tbProductSpec.specList)
+    if (typeof goods.value.tbProductSpec.specList == 'string') {
-    goods.value.tbProductSpec.specList.map(item => {
+        goods.value.tbProductSpec.specList = JSON.parse(goods.value.tbProductSpec.specList)
-        let arr = []
+        goods.value.tbProductSpec.specList.map(item => {
-        item.value.map(val => {
+            let arr = []
-            arr.push({
+            item.value.map(val => {
-                active: false,
+                arr.push({
-                name: val
+                    active: false,
+                    name: val
+                })
             })
+            item.value = arr
         })
-        item.value = arr
+    }
-    })
+    selectedSuccess()
 }
 
 defineExpose({
@@ -140,14 +162,24 @@ defineExpose({
 }
 
 .footer {
-    display: flex;
     padding-top: 100px;
 
-    .btn {
+    .info {
-        flex: 1;
+        padding-bottom: 20px;
+        display: flex;
+        justify-content: space-between;
+        font-size: 20px;
+    }
 
-        &:last-child {
+    .btn_wrap {
-            margin-left: 14px;
+        display: flex;
+
+        .btn {
+            flex: 1;
+
+            &:last-child {
+                margin-left: 14px;
+            }
         }
     }
 }

src/views/home/components/goods.vue

@@ -15,7 +15,8 @@
     </div>
     <div class="search_wrap">
         <div class="input">
-            <el-input placeholder="商品名称或首字母简称" prefix-icon="Search" v-model="commdityName"></el-input>
+            <el-input placeholder="商品名称或首字母简称" prefix-icon="Search" v-model="commdityName" clearable
+                @input="inputChange"></el-input>
         </div>
         <el-button :icon="shopListType == 'text' ? 'PictureRounded' : 'PriceTag'" @click="changeShopListType"></el-button>
     </div>
@@ -34,12 +35,17 @@
             </div>
         </div>
     </div>
+    <div class="empty">
+        <el-empty description="空空如也~" v-if="!goodsList.length" />
+    </div>
     <!-- 选择规格 -->
     <skuModal ref="skuModalRef" />
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue'
+import _ from 'lodash'
+
 import skuModal from '@/components/skuModal.vue'
 
 import { queryCategory, productqueryCommodityInfo } from '@/api/product'
@@ -58,6 +64,10 @@ const commdityName = ref('')
 const originalGoods = ref([])
 const goodsList = ref([])
 
+const inputChange = _.debounce(function (e) {
+    productqueryCommodityInfoAjax()
+}, 500)
+
 // 显示sku
 function showSkuHandle(item) {
     if (item.typeEnum == 'sku') {
@@ -79,8 +89,16 @@ function changeShopListType() {
 // 切换分类
 function changeCategory(item, index) {
     categorysActive.value = index
-    // goodsList.value = originalGoods.value.find(val => val.id == item.categoryId)
+    if (item.id) {
-    console.log(originalGoods.value.find(val => val.id == item.categoryId))
+        goodsList.value = []
+        originalGoods.value.map(val => {
+            if (val.categoryId == item.id) {
+                goodsList.value.push(val)
+            }
+        })
+    } else {
+        goodsList.value = [...originalGoods.value]
+    }
 }
 
 // 查询分类信息
@@ -224,7 +242,7 @@ onMounted(async () => {
         }
 
         .dot {
-            padding: 0 8px;
+            padding: 0 14px;
             background-color: var(--el-color-danger);
             color: #fff;
             border-radius: 20px;
@@ -233,6 +251,7 @@ onMounted(async () => {
             right: 4px;
             z-index: 1;
             font-size: 12px;
+            font-size: 18px;
         }
 
         .cover {