1.增加网络判断刷新页面，防止没网无法连接ws

2.商品增加上下架、售罄、修改库存登操作

src/views/home/components/goods.vue

@@ -26,11 +26,15 @@
         </el-popover>
     </div>
     <div class="search_wrap">
-        <div class="input">
-            <el-input placeholder="请输入商品名称查询" v-model="commdityName" clearable @focus="
-                global.updateData(false)" @blur="global.updateData(true)" @input="inputChange"></el-input>
+        <el-button :type="showEditor ? 'warning' : ''" @click="showEditorChange">{{ showEditor ? '关闭编辑' : '编辑'
+            }}</el-button>
+        <div class="right">
+            <div class="input">
+                <el-input placeholder="请输入商品名称查询" v-model="commdityName" clearable @focus="
+                    global.updateData(false)" @blur="global.updateData(true)" @input="inputChange"></el-input>
+            </div>
+            <el-button :loading="searchLoading" :icon="Search" @click="searchHandle">搜索</el-button>
         </div>
-        <el-button :loading="searchLoading" :icon="Search" @click="searchHandle">搜索</el-button>
         <!-- <el-button :icon="shopListType == 'text' ? 'PictureRounded' : 'PriceTag'"
             @click="changeShopListType"></el-button> -->
     </div>
@@ -40,15 +44,38 @@
             <swiper-slide class="slide_item" v-for="(goods, index) in goodsList" :key="index">
                 <div class="item_wrap" v-for="item in goods" :key="item.id" @click="showSkuHandle(item)">
                     <div class="item">
+                        <transition name="el-fade-in">
+                            <div class="more" v-if="item.showMore" @click.stop>
+                                <div class="ul">
+                                    <template v-if="categorys[categorysActive].id == '-1'">
+                                        <div class="li" @click.stop="showPutawayHandle(item)">上架</div>
+                                    </template>
+                                    <template v-else>
+                                        <div class="li" @click.stop="goodEditor(item, 0)">下架</div>
+                                        <div class="li" @click.stop="goodEditor(item, 1)">售罄</div>
+                                        <div class="li" @click.stop="goodStockNumberHandle(item)">修改库存</div>
+                                    </template>
+                                    <div class="li" @click.stop="item.showMore = false">取消</div>
+                                </div>
+                            </div>
+                        </transition>
                         <div class="dot" v-if="item.orderCount">{{ item.orderCount }}</div>
                         <div class="cover" v-if="shopListType == 'img'">
                             <el-image :src="`${item.coverImg}?x-oss-process=image/resize,m_lfit,w_150,h_150`"
                                 class="el_img" fit="cover"></el-image>
+                            <div class="sell_out" v-if="item.isPauseSale == 1">
+                                <img class="sell_out_icon" src="../../../assets/icon_xq.png">
+                            </div>
                         </div>
                         <div class="name"><el-text line-clamp="1">{{ item.name }}</el-text></div>
                         <div class="item_empty" v-if="shopListType == 'text'"></div>
                         <div class="price">
                             <el-text>￥{{ item.lowPrice }}</el-text>
+                            <div class="show_more_btn" v-if="showEditor">
+                                <el-icon>
+                                    <MoreFilled />
+                                </el-icon>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -60,9 +87,83 @@
     </div>
     <!-- 选择规格 -->
     <skuModal ref="skuModalRef" @success="skuConfirm" />
+    <!-- 编辑商品 -->
+    <el-dialog v-model="showGoodEditor" :title="`${goodEditorEmun[goodEditorType]}商品`">
+        <div class="dialog">
+            <div class="el-popover__title content">
+                确定要{{ `${goodEditorEmun[goodEditorType]}商品：${goodEditorItem.name}？` }}
+            </div>
+            <div class="footer_wrap">
+                <div class="btn">
+                    <el-button style="width: 100%;" @click="showGoodEditor = false">取消</el-button>
+                </div>
+                <div class="btn">
+                    <el-button type="primary" style="width: 100%;" :loading="goodEditorLoading"
+                        @click="goodEditorConfirm">确认</el-button>
+                </div>
+            </div>
+        </div>
+    </el-dialog>
+    <!-- 修改库存 -->
+    <el-dialog v-model="showGoodsEditorStock" title="修改库存" width="400px">
+        <div class="dialog">
+            <el-form>
+                <el-form-item label="库存">
+                    <div>
+                        <el-input-number v-model="goodsEditorStockNumber" :min="0"></el-input-number>
+                        <div class="tips">修改前库存：{{ goodsEditorStockItem.stockNumber }}</div>
+                    </div>
+                </el-form-item>
+            </el-form>
+            <div class="footer_wrap">
+                <div class="btn">
+                    <el-button style="width: 100%;" @click="showGoodsEditorStock = false">取消</el-button>
+                </div>
+                <div class="btn">
+                    <el-button type="primary" style="width: 100%;" :loading="goodsEditorStockLoading"
+                        @click="goodsEditorStockConfirm">确认</el-button>
+                </div>
+            </div>
+        </div>
+    </el-dialog>
+    <!-- 关闭售罄 -->
+    <el-dialog v-model="showCloseSell" title="关闭售罄">
+        <div class="dialog">
+            <div class="el-popover__title content">
+                确定要将{{ `【${goodEditorItem.name}】` }}关闭售罄吗？
+            </div>
+            <div class="footer_wrap">
+                <div class="btn">
+                    <el-button style="width: 100%;" @click="showCloseSell = false">取消</el-button>
+                </div>
+                <div class="btn">
+                    <el-button type="primary" style="width: 100%;" :loading="closeSellLoading"
+                        @click="closeSellHandle">确认</el-button>
+                </div>
+            </div>
+        </div>
+    </el-dialog>
+    <!-- 上架商品 -->
+    <el-dialog v-model="showPutaway" title="上架商品">
+        <div class="dialog">
+            <div class="el-popover__title content">
+                确定要上架商品：{{ `${goodEditorItem.name}` }}吗？
+            </div>
+            <div class="footer_wrap">
+                <div class="btn">
+                    <el-button style="width: 100%;" @click="showPutaway = false">取消</el-button>
+                </div>
+                <div class="btn">
+                    <el-button type="primary" style="width: 100%;" :loading="showPutawayLoading"
+                        @click="putawayHandle">确认</el-button>
+                </div>
+            </div>
+        </div>
+    </el-dialog>
 </template>
 
 <script setup>
+import { ElMessage } from 'element-plus'
 import { Search } from '@element-plus/icons-vue'
 import { onMounted, ref } from 'vue'
 import _ from 'lodash'
@@ -70,7 +171,7 @@ import useStorage from "@/utils/useStorage";
 
 import skuModal from '@/components/skuModal.vue'
 
-import { queryCategory, queryNewCommodityInfo, queryProductSku } from '@/api/product'
+import { queryCategory, queryNewCommodityInfo, queryProductSku, productStatus, productStock } from '@/api/product'
 import { useUser } from "@/store/user.js"
 
 import { Swiper, SwiperSlide } from 'swiper/vue'
@@ -140,14 +241,58 @@ function showMoreMenu() {
     showPopover.value = !showPopover.value
 }
 
+// 显示/隐藏编辑
+function showEditorChange() {
+    if (showEditor.value) {
+        showEditor.value = false
+        goodsList.value.map(item => {
+            item.map(val => {
+                val.showMore = false
+            })
+        })
+    } else {
+        showEditor.value = true
+    }
+}
+
 // 显示sku
 function showSkuHandle(item) {
-    if (item.typeEnum == 'sku') {
-        // 多规格
-        skuModalRef.value.show({ ...item })
+    if (showEditor.value) {
+        if (item.isPauseSale == 1) {
+            goodEditorItem.value = item
+            showCloseSell.value = true
+        } else {
+            goodsList.value.map(item => {
+                item.map(val => {
+                    val.showMore = false
+                })
+            })
+            item.showMore = true
+        }
     } else {
-        // 单规格
-        queryProductSkuAjax(item)
+        if (item.isPauseSale == 1) {
+            ElMessage({
+                type: 'error',
+                message: '该商品已售罄',
+                showClose: true,
+            })
+            return
+        }
+        if (categorys.value[categorysActive.value].id == '-1') {
+            ElMessage({
+                type: 'error',
+                message: '该商品已下架，请上架后操作',
+                showClose: true,
+            })
+            return
+        }
+        if (item.typeEnum == 'sku') {
+            // 多规格
+            skuModalRef.value.show({ ...item })
+        } else {
+            // 单规格
+            queryProductSkuAjax(item)
+        }
     }
 }
 
@@ -228,6 +373,10 @@ async function queryCategoryAjax() {
             name: '全部',
             id: ''
         })
+        categorys.value.push({
+            name: '已下架',
+            id: '-1'
+        })
     } catch (error) {
         console.log(error)
     }
@@ -259,6 +408,9 @@ async function productqueryCommodityInfoAjax() {
         //     clearInterval(loopTimer.value)
         //     loopTimer.value = null
         // }
+        res.list.map((val, index) => {
+            val.showMore = false
+        })
         return res
     } catch (error) {
         loading.value = false
@@ -337,6 +489,148 @@ function clearDot() {
     })
 }
 
+const showEditor = ref(false)
+const goodEditorType = ref(0) // 0 上下架 1售罄
+const goodEditorItem = ref({})
+const goodEditorLoading = ref(false)
+const showGoodEditor = ref(false)
+
+const goodEditorEmun = ref({
+    0: '下架',
+    1: '售罄'
+})
+
+// 编辑商品
+function goodEditor(item, t) {
+    goodEditorItem.value = item
+    if (item.isPauseSale == 1) {
+    } else {
+        goodEditorType.value = t
+        showGoodEditor.value = true
+    }
+}
+
+// 关闭售罄
+const showCloseSell = ref(false)
+const closeSellLoading = ref(false)
+async function closeSellHandle() {
+    try {
+        closeSellLoading.value = true
+        const res = await productStatus({
+            shopId: store.userInfo.shopId,
+            productId: goodEditorItem.value.id,
+            type: 1,
+            state: 0
+        })
+        closeSellLoading.value = false
+        showCloseSell.value = false
+        ElMessage({
+            type: 'success',
+            message: '操作成功',
+            showClose: true,
+        })
+        updateData()
+    } catch (error) {
+        console.log(error);
+    }
+}
+
+// 上架商品
+const showPutaway = ref(false)
+const showPutawayLoading = ref(false)
+
+function showPutawayHandle(item) {
+    goodEditorItem.value = item
+    showPutaway.value = true
+}
+
+async function putawayHandle(item) {
+    try {
+        showPutawayLoading.value = true
+        const res = await productStatus({
+            shopId: store.userInfo.shopId,
+            productId: goodEditorItem.value.id,
+            type: 0,
+            state: 1
+        })
+        showPutawayLoading.value = false
+        showPutaway.value = false
+        ElMessage({
+            type: 'success',
+            message: '操作成功',
+            showClose: true,
+        })
+        updateData()
+    } catch (error) {
+        console.log(error);
+    }
+}
+
+// 确认操作
+async function goodEditorConfirm() {
+    try {
+        goodEditorLoading.value = true
+        const res = await productStatus({
+            shopId: store.userInfo.shopId,
+            productId: goodEditorItem.value.id,
+            type: goodEditorType.value,
+            state: goodEditorType.value == 0 ? 0 : 1
+        })
+        goodEditorLoading.value = false
+        showGoodEditor.value = false
+        ElMessage({
+            type: 'success',
+            message: '操作成功',
+            showClose: true,
+        })
+        updateData()
+    } catch (error) {
+        console.log(error);
+    }
+}
+
+// 显示修改库存
+const goodsEditorStockItem = ref(0)
+const showGoodsEditorStock = ref(false)
+const goodsEditorStockNumber = ref(0)
+const goodsEditorStockLoading = ref(false)
+function goodStockNumberHandle(item) {
+    if (item.isDistribute == 0 && item.typeEnum == 'sku') {
+        ElMessage({
+            type: 'warning',
+            message: '未开启共享库存无法修改',
+
+            showClose: true,
+        })
+    } else {
+        goodsEditorStockItem.value = item
+        goodsEditorStockNumber.value = item.stockNumber
+        showGoodsEditorStock.value = true
+    }
+}
+
+// 确认修改库存
+async function goodsEditorStockConfirm() {
+    try {
+        goodsEditorStockLoading.value = true
+        const res = await productStock({
+            shopId: store.userInfo.shopId,
+            productId: goodsEditorStockItem.value.id,
+            stock: goodsEditorStockNumber.value
+        })
+        goodsEditorStockLoading.value = false
+        showGoodsEditorStock.value = false
+        ElMessage({
+            type: 'success',
+            message: '操作成功',
+            showClose: true,
+        })
+        updateData()
+    } catch (error) {
+        console.log(error);
+    }
+}
+
 defineExpose({
     updateData,
     clearDot
@@ -456,9 +750,13 @@ onMounted(async () => {
 
 .search_wrap {
     display: flex;
-    justify-content: flex-end;
-    gap: 10px;
+    justify-content: space-between;
     padding: var(--el-font-size-base);
+
+    .right {
+        display: flex;
+        gap: 10px;
+    }
 }
 
 .shop_list {
@@ -489,6 +787,38 @@ onMounted(async () => {
             overflow: hidden;
             position: relative;
 
+            .more {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 10;
+                background-color: rgba(0, 0, 0, .6);
+                backdrop-filter: blur(2px);
+                border-radius: 10px;
+
+                .ul {
+                    height: 100%;
+                    padding: 20px;
+                    display: flex;
+                    justify-content: center;
+                    flex-direction: column;
+
+                    .li {
+                        display: flex;
+                        align-items: center;
+                        color: #fff;
+                        padding: 8px 0;
+
+                        &:last-child {
+                            border-top: 1px solid rgba(255 255 255 / 20%);
+                            color: #ececec;
+                        }
+                    }
+                }
+            }
+
             &:hover {
                 cursor: pointer;
             }
@@ -518,6 +848,27 @@ onMounted(async () => {
                     top: 0;
                     left: 0;
                 }
+
+                .sell_out {
+                    width: 100%;
+                    height: 100%;
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    background-color: rgba(0, 0, 0, 0.3);
+                    // backdrop-filter: blur(2px);
+                    z-index: 10;
+
+                    .sell_out_icon {
+                        $size: 60px;
+                        width: $size;
+                        height: $size;
+                        object-fit: cover;
+                    }
+                }
             }
 
             .name {
@@ -540,13 +891,43 @@ onMounted(async () => {
                 height: 20%;
                 padding: 6px 10px;
                 background-color: var(--primary-color);
+                position: relative;
 
                 span {
                     color: #fff;
                     font-weight: bold;
                 }
+
+                .show_more_btn {
+                    width: 40px;
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    z-index: 1;
+                    color: #fff;
+                }
             }
         }
     }
 }
+
+.dialog {
+
+    .content {
+        padding-bottom: 20px;
+    }
+
+    .footer_wrap {
+        display: flex;
+        gap: 20px;
+
+        .btn {
+            flex: 1;
+        }
+    }
+}
 </style>