????????完成了商品的添加和展示，下面的文字將繼續進行商品頁面的處理，主要為商品信息的修改的頁面以及后天邏輯的處理。

????????本文主要介紹了商品信息修改頁面的實現過程。首先，頁面布局包括編輯和刪除功能，未來還可添加上架和下架按鈕。通過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}]}],