????????商品列表中的數據需要進行狀態管理，如上架、下架、刪除和修改等操作。對于存在錯誤或后期需要重新上傳的商品，可以通過刪除操作進行處理。

????????具體到商品刪除功能的實現，其基本流程如下：用戶在前端頁面點擊刪除按鈕后，系統會調用后端接口，將對應商品數據從數據庫中移除。

????????文章介紹了商品列表狀態管理的實現，特別是商品刪除功能的具體流程。用戶在前端點擊刪除按鈕后，系統調用后端接口，從數據庫中移除對應商品數據。刪除操作包括確認提示和權限驗證，確保只有具有管理權限的用戶才能執行刪除。刪除后，頁面會更新商品列表，避免頻繁調用數據庫。此外，文章還提到了未來可能添加上架和下架按鈕，進一步完善商品管理功能。代碼部分展示了刪除和修改按鈕的實現，以及相關的云對象數據處理邏輯。整體設計旨在提升商品管理的靈活性和安全性。

1、頁面布局

存在 刪除和修改，以后還可以添加上架和下架的按鈕。

2、代碼刪除和修改的按鈕

??????????????????????? <view class="info">
??????????????????????????? <!-- 編輯修改 -->
??????????????????????????? <view class="icon" @click="clickEdit(row._id)">
??????????????????????????????? <u-icon name="edit-pen" size="25"></u-icon>
??????????????????????????? </view>
??????????????????????????? <!-- 刪除該商品 -->
??????????????????????????? <view class="icon" @click="clickRemove(row._id)">
??????????????????????????????? <u-icon name="trash" size="25"></u-icon>
??????????????????????????? </view>
??????????????????????? </view>

3、刪除動作：clickRemove

3.1、給出刪除的確認判斷

            //刪除某一個商品clickRemove(id){uni.showModal({title:"是否確認刪除",success:res=>{if(res.confirm){this.removeGoods(id)}}})},//刪除數據async removeGoods(id){let res =await goodsCloudObj.remove(id);					if(res.code==-1){uni.showToast({title:res.msg,icon:"error"})return;}		this.getGoodsList();},

3.2 調用刪除數據的云對象 數據處理

let res =await goodsCloudObj.remove(id);???

const goodsCloudObj = uniCloud.importObject("green-mall-goods")

4、云對象數據處理

const goodsCloudObj = uniCloud.importObject("green-mall-goods")

4.1 代碼分析

	// 接收傳來的參數 id，對該id刪除async remove(id) {if (!this.userInfo.uid) return {msg: "沒有權限",code: -1};if (!this.userInfo.role.includes('manage')) return {msg: "沒有刪除權限",code: -1};let res = await db.collection("green-mall-goods").doc(id).remove();return res;},

5、頁面邏輯代碼

<template><view class="goodsList"><!-- 添加一個增加按鈕，通過這里也可以跳轉到新增商品的頁面 --><navigator url="./add" class="row add"><view class="left"><!-- 一個按鈕 u-icon  +  --><u-icon name="plus" color="#576b95" size="22"></u-icon><text class="text">新增商品</text></view></navigator><!-- 對商品列表goodsList 進行循環展示 --><view class="row" v-for="item in goodsList" :key="item._id"><view class="title"><!-- 標題欄顯示 商品類別名https://uniapp.dcloud.net.cn/component/uniui/uni-section.html#%E4%BB%8B%E7%BB%8D --><uni-section :title="item.name" type="line"></uni-section></view><!-- 下面是該類下的商品 循環展示 在該類商品的 proGroup 列表中--><view class="goodsRow" v-for="row in item.proGroup" :key="row._id"><view class="view"><!-- 左邊顯示商品縮略圖 --><view class="left"><!-- 如果存在就顯示圖的第一張【0】，不存在就顯示默認圖 --><image v-if="row.thumb.length" class="pic" :src="row.thumb[0].url" mode="aspectFill"></image><image v-else class="pic" src="../../static/images/logo.png" mode="aspectFill"></image></view><!-- 右邊顯示商品信息 --><view class="right"><!-- 顯示名字，沒有描述信息顯示 --><view class="top">{{row.name}}</view><view class="info"><!-- 編輯修改 --><view class="icon" @click="clickEdit(row._id)"><u-icon name="edit-pen" size="25"></u-icon></view><!-- 刪除該商品 --><view class="icon" @click="clickRemove(row._id)"><u-icon name="trash" size="25"></u-icon></view></view></view></view></view></view></view>
</template><script>const goodsCloudObj = uniCloud.importObject("green-mall-goods")export default {data() {return {goodsList:[]};},onShow() {this.isManage();this.getGoodsList();},methods: {//點擊跳轉到修改頁面clickEdit(id){				uni.navigateTo({url:"./add?id="+id})},//刪除某一個商品clickRemove(id){uni.showModal({title:"是否確認刪除",success:res=>{if(res.confirm){this.removeGoods(id)}}})},//刪除數據async removeGoods(id){let res =await goodsCloudObj.remove(id);					if(res.code==-1){uni.showToast({title:res.msg,icon:"error"})return;}		this.getGoodsList();//刪除后，還要更新表，間接更新頁面的展示，但最好的是更新表，不要去拉數據庫的值，避免多次使用云數據庫 要錢呀。},//獲取商品列表async getGoodsList() {let res =await goodsCloudObj.getList();console.log(res);this.goodsList = res}}}
</script><style lang="scss" scoped>.goodsList {padding: 30rpx;.row {border-bottom: 1px solid #ededed;padding: 25rpx 0;.title {margin-left: -20rpx;}.goodsRow {.view {display: flex;padding: 10rpx 0;@include flex-box();.left {width: 150rpx;height: 150rpx;.pic {width: 100%;height: 100%;border-radius: 10rpx;}}.right {flex: 1;padding-left: 20rpx;display: flex;justify-content: space-between;flex-direction: column;height: 150rpx;.top {font-size: 36rpx;font-weight: 600;}.info {display: flex;.icon {padding: 6rpx;}}}}}}.row.add {.left {color: $brand-theme-color-aux;@include flex-box-set(start);.text {font-size: 36rpx;padding-left: 10rpx;}}}}
</style>