vue大型電商專案尚品彙(後臺篇)day05

10 發表於 2022-06-23
Vue

今天繼續是對後臺管理部分的一個操作,但是快要結束了,今天結束,明天會進入一個從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