uniapp-商城-63-后台 商品列表（分类展示商品的删除）

        商品列表中的数据需要进行状态管理，如上架、下架、删除和修改等操作。对于存在错误或后期需要重新上传的商品，可以通过删除操作进行处理。

        具体到商品删除功能的实现，其基本流程如下：用户在前端页面点击删除按钮后，系统会调用后端接口，将对应商品数据从数据库中移除。

        文章介绍了商品列表状态管理的实现，特别是商品删除功能的具体流程。用户在前端点击删除按钮后，系统调用后端接口，从数据库中移除对应商品数据。删除操作包括确认提示和权限验证，确保只有具有管理权限的用户才能执行删除。删除后，页面会更新商品列表，避免频繁调用数据库。此外，文章还提到了未来可能添加上架和下架按钮，进一步完善商品管理功能。代码部分展示了删除和修改按钮的实现，以及相关的云对象数据处理逻辑。整体设计旨在提升商品管理的灵活性和安全性。

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>