当前位置：首页 > ops >正文

uniapp-商城-64-后台商品列表（商品修改---页面跳转，深浅copy应用，递归调用等）

ops 2025/8/14 17:08:10

完成了商品的添加和展示，下面的文字将继续进行商品页面的处理，主要为商品信息的修改的页面以及后天逻辑的处理。

本文主要介绍了商品信息修改页面的实现过程。首先，页面布局包括编辑和删除功能，未来还可添加上架和下架按钮。通过clickEdit函数，用户点击商品ID后可跳转到修改页面，页面加载时根据传入的ID获取商品信息。商品数据的获取和更新通过云对象goodsCloudObj实现，包括获取单个商品信息、更新商品数据等操作。此外，还涉及SKU数据的获取和表单提交后的数据处理，确保数据能够正确更新到数据库中。整个流程涵盖了从页面跳转、数据获取到数据库更新的完整逻辑。

1、页面布局

存在删除和修改，以后还可以添加上架和下架的按钮。下面进行修改页面的处理和实现。

2、主要的页面布局

<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>

3、页面修改函数 clickEdit 传入参数是点击商品的 id

clickEdit

//点击跳转到修改页面
            clickEdit(id){
                uni.navigateTo({
                    url:"./add?id="+id
                })
            },

4、去到add页面上，处理带有id的页面路径

        onLoad(e) {    //进入页面就需要执行， e 就是传过来的值，如果是添加这个e 就是空
            this.isManage();
            goodID = e?.id ?? null      // 如果 e 存在就获取 id 给goodID ，如果e不存在， goodID 就是null
            if (goodID) this.getGoodsOne()     //如果 goodID存在（也就是e存在），就执行
            this.getSkuData(); //获取 sku的数据
        },

4.1 this.getGoodsOne 的函数接口，当然需要云对象，该云对象前面已经创建了。

    const goodsCloudObj = uniCloud.importObject("green-mall-goods", {
        "customUI": true
    })

上面云对象，定义在页面上的。

            //获取一个商品
            async getGoodsOne() {
                let res = await goodsCloudObj.getOne(goodID);
                console.log(res);
                this.goodsFormData = res.data[0]   //数据中是一个数组，数组中也就一个值，所以[0]就是数组的第一个值
            },

4.1.1 数据库的处理

    async getOne(id) {
        let res = await db.collection("green-mall-goods").doc(id).get();
        res.data[0].price = res.data[0].price / 100
        res.data[0].before_price = res.data[0].before_price ? res.data[0].before_price / 100 : null
        return res
    },

4.2 this.getSkuData 获取sku的数据当然要云对象

    const skuCloudObj = uniCloud.importObject("green-mall-sku", {
        "customUI": true
    });

            //获取sku列表
            async getSkuData() {
                let res = await skuCloudObj.get();
                this.skuArr = res.data
                console.log(res);
            },

4.3 更新数据和提交

            //点击提交表单
            onSubmit() {
                this.$refs.goodsForm.validate().then(res => {
                    this.toDataBase();

                }).catch(err => {
                    console.log(err);
                })
            },

4.3.1 toDataBase 将数据更新到数据库根据goodID 存在否，存在就更新，不存在就添加

            //上传到云数据库
            async toDataBase() {
                //这里缺少一个更新的按钮，需要在list中去实现,list跳转过来实现
                // console.log(this.goodsFormData.thumb);   //这里的数据太多了，需要处理一下
                this.goodsFormData.thumb = this.goodsFormData.thumb.map(item => {
                    return {
                        url: item.url,
                        name: item.name,
                        extname: item.extname
                    }
                })

                let toastTit;
                if (goodID) {
                    toastTit = "修改成功"
                    await goodsCloudObj.update(this.goodsFormData)
                } else {
                    toastTit = "新增成功"
                    await goodsCloudObj.add(this.goodsFormData)
                }

                uni.showToast({
                    title: toastTit
                })
                setTimeout(() => {
                    uni.navigateBack()
                }, 1500)

}

4.3.2 goodsCloudObj.update 更新数据在green-mall-goods中

    const goodsCloudObj = uniCloud.importObject("green-mall-goods", {
        "customUI": true
    })

    async update(params) {
        if (!this.userInfo.uid) return {
            msg: "没有权限",
            code: -1
        };
        if (!this.userInfo.role.includes('manage')) return {
            msg: "没有权限",
            code: -1
        };
        //深copy的应用只有这样才能删除 id
        let _params = {
            ...params
        };
        delete _params._id; //删除id id是不能更新
        _params.price = Number(_params.price).toFixed(2) * 100
        _params.before_price = _params.before_price ? Number(_params.before_price).toFixed(2) * 100 : null
        //这里是用了深copy，删除了id ，但是params 中还有 id
        await db.collection("green-mall-goods").doc(params._id).update(_params);
    },

5、属性的修改（递归调用）

上面讲的是普通的修改，没有说属性这个修改。且在我们添加商品的时候，没有关注更新时，对属性修改的需要。

5.1 先看看，点击属性的界面需要

我们需要添加一个函数，来读取商品信息中，是否选中那些商品属性。使用了arrSetCheck来实现。

当我们点击属性框，弹窗出来，就应该标识出用√ 表示被选中的属性父级

属性的子级子选项，用颜色来表示出来被选中的子级。

如下图的界面

            //点击选择属性
            clickSelect() {
                this.$refs.attrWrapPop.open(); //使用open方法弹出来
                this.arrSetCheck(this.skuArr, this.goodsFormData.sku_select, "_id")
            },

5.2 实现选中比对，使用递归的方式，也就是自己调用自己，数据查看最后的附录

参数是：二个数组，一个比对tag

this.skuArr, 默认的属性父级值

this.goodsFormData.sku_select, 商品选中的属性选项

"_id" 比对表示

如果商品选中的属性选项中属性 id 和默认的属性父级值的属性id 一样就给这个属性的check给一个true

            //选中项的数组格式化
            arrSetCheck(arr1, arr2, key) {
                arr1.forEach(item => {
                    arr2.forEach(row => {
                        if (item[key] == row[key]) {
                            item.checked = true
                            if (item?.children?.length) this.arrSetCheck(item.children, row.children,
                                "name")
                        }
                    })
                })
            },

下面是比对选中的子级：

item.children, 属性父级中的子级选项

row.children, 商品属性的子级选项（具有的子级属性）

"name"：子级属性obj的键：name

如果属性父级中的子级选项的name 和商品属性的子级选项（具有的子级属性） name 对应的值相等就给这个选项的 check 一个true。

if (item?.children?.length) this.arrSetCheck(item.children, row.children,"name")

附录：

        skuArr: [{_id:1,skuName:"颜色",checked:false,children:[{name:"红",checked:false},{name:"蓝",checked:false}]},{_id:2,skuName:"规格",checked:false,children:[{name:"M",checked:false},{name:"S",checked:false}]}],

查看全文

http://www.xdnf.cn/news/7815.html