优化element弹窗

2024-02-27 09:02:31 +08:00 · 2024-02-27 09:02:31 +08:00 · 1525bb1bf9
parent 276e65e9a3
commit 1525bb1bf9
4 changed files with 104 additions and 32 deletions
--- a/package.json
+++ b/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"
--- a/src/App.vue
+++ b/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>
--- a/src/components/skuModal.vue
+++ b/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 class="title">{{ item.name }}</div>
-            <div class="sku_wrap">
-                <div class="item" :class="{ active: val.active }" v-for="(val, i) in  item.value" :key="i"
-                    @click="selectedSku(index, i)">{{ val.name }}</div>
+        <div v-loading="loading">
+            <div class="row" v-for="(item, index) in goods.tbProductSpec.specList" :key="index">
+                <div class="title">{{ item.name }}</div>
+                <div class="sku_wrap">
+                    <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">
-                <el-button plain style="width: 100%;" @click="dialogVisible = false">取消</el-button>
+            <div class="info" v-if="goodsInfo.id">
+                <span>库存：{{ goodsInfo.stockNumber }}</span>
+                <span>￥{{ goodsInfo.salePrice }}</span>
            </div>
-            <div class="btn">
-                <el-button type="primary" style="width: 100%;">确认</el-button>
+            <div class="btn_wrap">
+                <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)
-    goods.value.tbProductSpec.specList.map(item => {
-        let arr = []
-        item.value.map(val => {
-            arr.push({
-                active: false,
-                name: val
+    if (typeof goods.value.tbProductSpec.specList == 'string') {
+        goods.value.tbProductSpec.specList = JSON.parse(goods.value.tbProductSpec.specList)
+        goods.value.tbProductSpec.specList.map(item => {
+            let arr = []
+            item.value.map(val => {
+                arr.push({
+                    active: false,
+                    name: val
+                })
            })
+            item.value = arr
        })
-        item.value = arr
-    })
+    }
+    selectedSuccess()
 }

 defineExpose({
@ -140,14 +162,24 @@ defineExpose({
 }

 .footer {
-    display: flex;
    padding-top: 100px;

-    .btn {
-        flex: 1;
+    .info {
+        padding-bottom: 20px;
+        display: flex;
+        justify-content: space-between;
+        font-size: 20px;
+    }

-        &:last-child {
-            margin-left: 14px;
+    .btn_wrap {
+        display: flex;
+
+        .btn {
+            flex: 1;
+
+            &:last-child {
+                margin-left: 14px;
+            }
        }
    }
 }
--- a/src/views/home/components/goods.vue
+++ b/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)
-    console.log(originalGoods.value.find(val => val.id == item.categoryId))
+    if (item.id) {
+        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 {