vue大型電商項目尚品彙(後台篇)day05

今天繼續是對後台管理部分的一個操作,但是快要結束了,今天結束,明天會進入一個從Vue以來,另外一個名聲顯著的東西了,一隻耳聞從未見識,而且十分的炫酷
他就是——數據可視化Echarts,迫不及待了解了

11.銷售屬性添加

當我們點擊添加就,應該把添加的放到table裡面來,table裡面每一行數據是一個對象

image-20220619101514502

然後就可以開始整理數據,我們select收集的值不應該只是id

image-20220619102104406

收集到了數據,直接在button點擊事件,整理參數,給到我們的data對應的數據

image-20220619102442001

12.銷售屬性值展示與收集

這裡主要是button和input的一個切換

image-20220619112152929

給添加來一個點擊事件,此時的row就為當前這一行的數據,我們知道每一行必須有自己獨有的控制切換的變數,我們前面也說過先把控制切換的變數還有收集input的變數先放在這裡,並沒有去做什麼時候添加這兩個變數,現在就是時候了,當點擊添加的時候就可以把兩個變數添加進來,但是要注意我們需要點擊就重新解析頁面出來input所以要做響應式數據,同時需要把上面表單收集的值也做好,因為馬上切換為input就要開始收集了

image-20220619113024974

然後就是當我們失去焦點,需要將值呈現出來,這個就要看到我們的tag是遍歷的什麼了

image-20220619113349188

所以失去焦點後要總結一下值放到這個子列表裡面

image-20220619113817669

然後就是兩個注意事項,一個是不能存空值,一個是不能存重複的值

image-20220619114230272

13.刪除銷售屬性與屬性值

拿到索引,直接根據splice方法刪除即可,注意tag組件點擊x的事件是close

image-20220619114932079

image-20220619115201199

順便把除了在場景0顯示其他都不能點擊的三級聯動也做了

image-20220619115506651

14.spu修改保存操作

這個頁面涉及到兩個操作的保存,一個是修改一個是新增,而且他們兩個介面要的數據都差不多就是一個id的區

image-20220619163056607

然後在我們保存點擊事件準備發請求,先要整理參數,所有的參數都能夠收集到,只是照片牆這裡需要整合進數據,我們新增的數據沒有imgname和imgurl,其次我們發過去的數據不需要name和url

image-20220619165158365

請求成功應該通知父組件回到table並刷新頁面

image-20220619165327122

image-20220619165345072

15.spu添加保存

當我們點擊添加spu,應該發起兩個請求,獲取品牌和銷售屬性的下拉框選擇,添加按鈕在父組件,所以通過ref通知子組件發請求

image-20220620084022981

image-20220620084530355

然後觀察得知都可以手機,就是category3id收集不到

image-20220620085155039

image-20220620085212172

然後就是幾個bug,當出現內容過多我在第三頁添加保存之後不應該在第三頁要回到第一頁

image-20220620093355428

取消按鈕也要改

image-20220620093427107

image-20220620094002526

二.刪除spu

準備介面,用到組件pop

image-20220620094843192

同時判斷當前位置應該停留在那

image-20220620095041741

三.添加sku

1.靜態組件

首先點擊新增sku會切換場景2

image-20220621085742559

image-20220621085759067

然後完成sku的靜態,主要就是注意一下table前面如果不是序號為選擇框,type為selection

image-20220621091141630

image-20220621091149690

2.獲取skuform數據

當我們點擊新增sku,需要發起三個請求,一樣的套路通過父組件ref來調用

image-20220621092741354

image-20220621093713278

3.sku收集與展示

總共應該分為三類數據,第一類應該是父組件傳過來的

image-20220621094913261

image-20220621095026264

第二類應該是通過v-model可以收集到的數據

image-20220621102320534

主要就是注意一下 input新增 type為number可以限制只能輸入數字

image-20220621102404630

第三類數據就是一些需要計算操作的數據

先把平台屬性完成,遍歷

image-20220621103725173

image-20220621104610757

image-20220621104618191

這裡的難點主要在於怎麼來收集數據,看介面文檔可知,需要這些數據

image-20220621104732200

但是我們這裡其實只需要拿到這兩個就可以了

image-20220621104856543

attrId表示你選擇了那一個select,valueId表示你選擇了那一個值,有這兩個就可以了

第二個難點就是我們數據要放在哪裡,因為你要知道我們這裡收集的可能不只一個值,不只一個select,所以最好的方法其實是存放在這個select的對象裡面

image-20220621110009350

銷售屬性同理

image-20220621110335975

接下來是對sku圖片的一個收集與展示

image-20220621161820035

然後這個圖片怎麼來收集的問題,複選框表格有一個事件,是當選擇按鈕發生變化時觸發,而且還會有參數,參數就為當前勾選的這些圖片的一行的數據

image-20220621162432194

image-20220621162531013

先不要放進skuInfo介面參數裡面,因為還不完整

image-20220621162624831

image-20220621162642111

查看我們介面數據可知有一個isDefault的參數,它是表示當前這個圖片是否是默認值,但是我們從伺服器拿回來數據的時候就沒有這個參數,所以一開始就要添加上

image-20220621163111387

然後做默認button

image-20220621163531225

image-20220621163612206

image-20220621163739436

4.sku保存

在做這一步之前,肯定是要先整理參數,首先是平台屬性和銷售屬性的參數整理,應該點擊保存後,就對attrData來一個遍歷,然後依次每一條數據字元串轉為數組,push到一個對象裡面,最後把這個對象給到skuinfo的參數

image-20220621175229253

但是我這裡不這樣做,用另一個方法,因為這裡你會重複往一個數組裡面添加內容,所以可以通過迭代來做

image-20220621175643026

銷售屬性同理

image-20220621175949968

整理圖片參數

image-20220621181339686

發起保存請求,成功返回頁面

image-20220621181730821

5.sku列表展示

完成介面後,這裡使用dialog展示出來,將標題改為動態

image-20220622111227305

image-20220622111233344

image-20220622111250171

然後修改table的結構

image-20220622111725099

image-20220622112937747

image-20220622113036830

6.loading效果

用到elementUI全新的組件loading

直接給table來一個v-loading指令

image-20220622114149569

然後需要在數據data定義loading為true

image-20220622114226958

記得數據回來將其改為false

image-20220622114258929

然後有兩個bug

一個是我們的loading只會執行一次,因為改為false後就永遠是false了,還有一個是會有數據回顯的問題,點了一個sku顯示之後在去點其他的 他一瞬間會顯示下上一條的數據

這些都可以通過dialog的一個回調來解決,before-close注意它是一個屬性,所以要用v-bind綁定,然後他有一個形參done,必須寫上才能正常關閉,他表示關閉dialog前的回調

image-20220622114650040

image-20220622114716952

四.Sku

1.數據展示與分頁

首先做好介面,然後完成靜態頁面

image-20220622120415339

image-20220622120421267

發請求獲取table數據

image-20220622120807483

image-20220622120813282

動態展示數據在表格上

image-20220622121457084

image-20220622121502847

然後做分頁器,點擊改變還是用的之前的套路

image-20220622121749257

image-20220622121658461

2.上架與下架功能

這是兩個介面,然後點擊切換上下架的按鈕,並發起相應的介面請求

image-20220622145624817

image-20220622150022575

3.查看詳情(多個新組件)

首先點擊查看詳情由一個從右往左出來的內容,用到Drawer 抽屜

image-20220622152817962

image-20220622153001270

同時點開查看詳情還應該發起請求

image-20220622153512766

然後給我們drawer抽屜整理下布局,這裡應該用到一個新組件layout,跟bootstrap的柵格系統一樣,但是餓了嗎是分為了24份

image-20220622153854247

要注意要自己去修改樣式,並不是用這裡的組件當成組件標籤去修改,可以去看最終在頁面上呈現的標籤類名等來修改

image-20220622154520378

image-20220622154547613

然後頁面布局完畢,就可以放入動態數據了,平台屬性用的是tag標籤

image-20220622155308562

最後是圖片展示這裡,需要一個輪播圖carousel

image-20220622155605154

要修改單獨的指示器

image-20220622155851256

image-20220622155942170

image-20220622160008298

4.深度選擇器

首先回顧一點,我們給css加scoped,是為了讓當前樣式只在這個組件生效,他的方法就是給當前組件所有的標籤都加上一個隨機的屬性,再通過你的選擇器和他的屬性選擇器達到只在這裡生效

image-20220622162202509

但是要注意一點,我們的子組件 根組件也會有這個屬性,所以如果子組件根組件跟父組件設置的選擇器一樣的話那麼根組件是會受影響的,但是隻影響根組件,根組件下面的其他標籤就沒事了

image-20220622162400855

image-20220622162337862

當我有這樣一個子組件,我也想要父組件設置了子組件能夠跟著生效

image-20220622162451331

一種方法就是父組件去掉scoped,但是我就是不能去掉,這個時候就要用到深度選擇器了,也叫樣式穿透在原生css裡面是>>>,less裡面是/deep/,scss裡面是::v-deep

image-20220622162624581

所以針對剛才那種情況樣式穿透也可以實現

image-20220622162650393

Tags: