福建网站建设哪家专业直播网站排名
完成了商品的添加和展示，下面的文字将继续进行商品页面的处理，主要为商品信息的修改的页面以及后天逻辑的处理。
本文主要介绍了商品信息修改页面的实现过程。首先，页面布局包括编辑和删除功能，未来还可添加上架和下架按钮。通过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}]}],