1.1.1.10 自定義頁(yè)面 DIY功能

1.1.1.10 自定義頁(yè)面 DIY功能

在商城后臺(tái)“應(yīng)用”-“擴(kuò)展管理”-“插件管理”開(kāi)啟首頁(yè)自定義布局插件，才會(huì)顯示以下菜單

1.1.1.10.1 功能介紹

自定義頁(yè)面菜單在商淘多用戶商城系統(tǒng)后臺(tái)管理中心的系統(tǒng)管理目錄下，該功能主要是讓用戶可以自定義設(shè)置商淘多用戶商城系統(tǒng)的手機(jī)端、微信端與小程序端的首頁(yè)布局，不再千篇一律地使用商城的默認(rèn)布局。

1.1.1.10.2操作說(shuō)明

自定義頁(yè)面菜單下會(huì)分別列出電腦端、手機(jī)端、微信端與小程序端的自定義頁(yè)面列表，將鼠標(biāo)懸浮在模擬手機(jī)圖的屏幕上會(huì)出現(xiàn)一個(gè)菜單，該菜單會(huì)顯示自定義頁(yè)面的頁(yè)面名稱，中間的兩個(gè)按鈕分別代表“編輯”與“刪除”，底部的兩個(gè)按鈕分別為“設(shè)為首頁(yè)”與“復(fù)制”，“設(shè)為首頁(yè)”意思是講該頁(yè)面的內(nèi)容替換商城指定端默認(rèn)的首頁(yè)，每個(gè)端下同時(shí)只能有一個(gè)頁(yè)面設(shè)為首頁(yè), “復(fù)制”意思是復(fù)制一模一樣的頁(yè)面，并呈現(xiàn)在該列表中。

 

 

點(diǎn)擊自定義頁(yè)面的編輯按鈕或新增頁(yè)面會(huì)來(lái)到自定義頁(yè)面的布局編輯區(qū)

手機(jī)端、微信端、小程序端自定義頁(yè)面的布局編輯區(qū)如下圖：

 

點(diǎn)擊左側(cè)組件庫(kù)里的組件（下文稱組件區(qū)），中間會(huì)生成對(duì)應(yīng)的組件內(nèi)容（下文稱預(yù)覽區(qū)），右側(cè)會(huì)生成對(duì)應(yīng)的組件屬性內(nèi)容（下文稱屬性區(qū)）。拖拽組件位置可改變排列順序。

組件區(qū)分復(fù)用組件和單選組件，復(fù)用組件是指可在頁(yè)面多次使用的組件，單選組件是指僅可在頁(yè)面使用一次的組件。

設(shè)計(jì)完成后點(diǎn)擊"保存頁(yè)面"，在移動(dòng)端和微信端首頁(yè)下，刷新頁(yè)面即可看到效果。在小程序端首頁(yè)下，下拉刷新即可看到效果。

電腦端自定義頁(yè)面的布局編輯區(qū)如下圖：

 

點(diǎn)擊上方組件庫(kù)里的組件（下文稱組件區(qū)），中間會(huì)生成對(duì)應(yīng)的組件內(nèi)容（下文稱預(yù)覽區(qū)），右側(cè)會(huì)生成對(duì)應(yīng)的組件屬性內(nèi)容（下文稱屬性區(qū)）。拖拽組件位置可改變排列順序。

組件區(qū)分復(fù)用組件和單選組件，復(fù)用組件是指可在頁(yè)面多次使用的組件，單選組件是指僅可在頁(yè)面使用一次的組件。

設(shè)計(jì)完成后點(diǎn)擊"保存頁(yè)面"，在電腦端首頁(yè)下，刷新頁(yè)面即可看到效果。

如需填寫鏈接地址請(qǐng)參考操作說(shuō)明下的頁(yè)面鏈接。頁(yè)面鏈接內(nèi)容也是按照不同端來(lái)區(qū)分的，如圖所示。

1.1.1.10.3手機(jī)端、微信端、小程序端組件說(shuō)明

1.1.1.10.3.1 圖片組件

點(diǎn)擊組件區(qū)的圖片組件，預(yù)覽區(qū)會(huì)出現(xiàn)兩張圖片，在屬性區(qū)可以改變每張圖片的上下左右邊距，可以添加圖片與跳轉(zhuǎn)鏈接,可以新增與刪除圖片，但至少保留一張圖片。

 

1.1.1.10.3.2 圖片輪播組件

點(diǎn)擊組件區(qū)的圖片輪播組件，預(yù)覽區(qū)會(huì)出現(xiàn)輪播圖片的第一張圖片（沒(méi)有輪播效果），在屬性區(qū)可以設(shè)置指示點(diǎn)形狀、指示點(diǎn)顏色、輪播間隔、可以改變輪播圖片的上下左右邊距，可以添加輪播圖片與跳轉(zhuǎn)鏈接,可以新增與刪除輪播圖片，但至少保留一張輪播圖片。

 

1.1.1.10.3.3 導(dǎo)航組件

點(diǎn)擊組件區(qū)的導(dǎo)航組件，預(yù)覽區(qū)會(huì)出現(xiàn)導(dǎo)航組件展示區(qū)，默認(rèn)有四個(gè)導(dǎo)航按鈕（在后臺(tái)點(diǎn)擊不會(huì)跳轉(zhuǎn)），在屬性區(qū)可以設(shè)置導(dǎo)航組件的背景顏色、每行數(shù)量、樣式選擇，可以設(shè)置導(dǎo)航按鈕的圖片、文字內(nèi)容、文字顏色與鏈接地址,可以新增與刪除導(dǎo)航按鈕，但至少保留三個(gè)導(dǎo)航按鈕。

 

1.1.1.10.3.4 商品組件

點(diǎn)擊組件區(qū)的商品組件，預(yù)覽區(qū)會(huì)出現(xiàn)商品組件展示區(qū)（該組件不會(huì)顯示商品的真實(shí)數(shù)據(jù)，會(huì)在前臺(tái)顯示），在屬性區(qū)可以設(shè)置商品組件的顯示內(nèi)容、顯示布局、商品數(shù)量、列表名稱，可以設(shè)置每個(gè)列表中的列表名稱與選取商品的方式?？梢孕略雠c刪除列表，最多顯示三個(gè)列表，最少一個(gè)顯示列表。

 

當(dāng)選取商品為條件選取，可以選擇商品分類、商品標(biāo)簽、價(jià)格來(lái)篩選商品。

 

當(dāng)選取商品為手動(dòng)添加，則需手動(dòng)添加商城里的商品。

 

1.1.1.10.3.5 圖片櫥窗組件

點(diǎn)擊組件區(qū)的圖片櫥窗組件，預(yù)覽區(qū)會(huì)出現(xiàn)圖片櫥窗組件展示區(qū)，在屬性區(qū)可以設(shè)置圖片櫥窗組件的背景顏色、布局方式，可以設(shè)置每個(gè)圖片的圖片與鏈接,可以新增與刪除圖片，但至少保留一張圖片。

 

1.1.1.10.3.6 營(yíng)銷活動(dòng)組件

點(diǎn)擊組件區(qū)的營(yíng)銷活動(dòng)組件，預(yù)覽區(qū)會(huì)出現(xiàn)營(yíng)銷活動(dòng)組件展示區(qū)（該組件不會(huì)顯示商品的真實(shí)數(shù)據(jù)，會(huì)在前臺(tái)顯示），在屬性區(qū)可以設(shè)置列表名稱，組件的上下邊距，活動(dòng)類型，活動(dòng)類型一共有秒殺、拼團(tuán)、拍賣和砍價(jià)四種，需開(kāi)啟相應(yīng)的插件在營(yíng)銷活動(dòng)列表才會(huì)顯示。其中手機(jī)端前臺(tái)只會(huì)展示秒殺與拍賣，微信端與小程序端前臺(tái)則全部類型都可以展示。

 

1.1.1.10.3.7 優(yōu)惠券組件

點(diǎn)擊組件區(qū)的優(yōu)惠券組件，預(yù)覽區(qū)會(huì)出現(xiàn)優(yōu)惠券組件展示區(qū)，在屬性區(qū)可以設(shè)置優(yōu)惠券樣式、上下邊距、背景顏色。其中優(yōu)惠券樣式設(shè)置為樣式1，需要添加三張優(yōu)惠券，設(shè)置為樣式2，需要添加兩張優(yōu)惠券，不符合要求則無(wú)法保存頁(yè)面。

 

1.1.1.10.3.8 新聞組件

點(diǎn)擊組件區(qū)的新聞組件，預(yù)覽區(qū)會(huì)出現(xiàn)新聞組件展示區(qū)（該組件不會(huì)顯示新聞的真實(shí)數(shù)據(jù)，會(huì)在前臺(tái)顯示），在屬性區(qū)可以設(shè)置新聞數(shù)量、新聞主題名稱，可以添加新聞列表。

 

1.1.1.10.3.9 視頻組件

點(diǎn)擊組件區(qū)的視頻組件，預(yù)覽區(qū)會(huì)出現(xiàn)視頻組件展示區(qū)（該組件不會(huì)顯示新聞的真實(shí)數(shù)據(jù)，會(huì)在前臺(tái)顯示），在屬性區(qū)可以設(shè)置上下邊距、視頻封面、視頻地址，其中小程序端的視頻地址的域名是小程序后臺(tái)配置里的域名，前臺(tái)才可以播放。

 

1.1.1.10.3.10 圖文列表組件

點(diǎn)擊組件區(qū)的圖文列表組件，預(yù)覽區(qū)會(huì)出現(xiàn)圖文列表組件展示區(qū)，在屬性區(qū)可以設(shè)置排列樣式，上下邊距，可以設(shè)置圖文列表的圖片、標(biāo)題、簡(jiǎn)介、鏈接。

 

1.1.1.10.3.11 富文本組件

點(diǎn)擊組件區(qū)的富文本組件，預(yù)覽區(qū)會(huì)出現(xiàn)富文本組件展示區(qū)，在屬性區(qū)可以設(shè)置上下邊距、左右邊距、背景顏色，可以添加富文本里的內(nèi)容。

 

1.1.1.10.3.12 單文本組件

點(diǎn)擊組件區(qū)的單文本組件，預(yù)覽區(qū)會(huì)出現(xiàn)單文本組件展示區(qū)，在屬性區(qū)可以設(shè)置提示文字、鏈接地址、字體位置、背景顏色、文字顏色、上下邊距和左右邊距。

 

1.1.1.10.3.13 輔助空白組件

點(diǎn)擊組件區(qū)的輔助空白組件，預(yù)覽區(qū)會(huì)出現(xiàn)輔助空白組件展示區(qū)，在屬性區(qū)可以設(shè)置組件高度與背景顏色。

 

1.1.1.10.3.14 搜索框組件

點(diǎn)擊組件區(qū)的搜索框組件，預(yù)覽區(qū)會(huì)出現(xiàn)搜索框組件展示區(qū)，在屬性區(qū)可以設(shè)置提示文字、搜索框樣式、文字對(duì)齊。

 

1.1.1.10.3.15 公告組件

點(diǎn)擊組件區(qū)的公告組件，預(yù)覽區(qū)會(huì)出現(xiàn)公告組件展示區(qū)，在屬性區(qū)可以設(shè)置上下邊距、背景顏色、文字顏色、公告圖標(biāo)、滾動(dòng)方向?？梢栽O(shè)置每個(gè)公告的內(nèi)容與鏈接，可以新增與刪除公告，至少保留兩個(gè)公告。

 

1.1.1.10.3.16 多店鋪組件

點(diǎn)擊組件區(qū)的多店鋪組件，預(yù)覽區(qū)會(huì)出現(xiàn)多店鋪組件展示區(qū)，在屬性區(qū)可以設(shè)置搜索半徑與頂部文字。

 

1.1.1.10.3.17 底部導(dǎo)航欄組件

底部導(dǎo)航欄組件會(huì)在預(yù)覽區(qū)底部展示，在屬性區(qū)可以設(shè)置文字顏色、選中時(shí)文字顏色、背景顏色、上邊框顏色，可以設(shè)置每個(gè)導(dǎo)航按鈕的未選中圖片、選中圖片、按鈕文字、鏈接地址。可以新增與刪除導(dǎo)航按鈕，最多五個(gè)導(dǎo)航按鈕，最少三個(gè)導(dǎo)航按鈕。

 

1.1.1.10.3.18 頁(yè)面設(shè)置

頁(yè)面設(shè)置，在屬性區(qū)可以設(shè)置頁(yè)面名稱、頁(yè)面標(biāo)題與頁(yè)面封面。頁(yè)面名稱和頁(yè)面封面用于展示在自定義列表中，頁(yè)面標(biāo)題用于展示在前臺(tái)頁(yè)面。

 

1.1.1.10.4電腦端組件說(shuō)明

電腦端組件與其他端組件的屬性有區(qū)別的或新增的組件會(huì)在下文中列出，同樣的效果（樣式略微不同的）不做過(guò)多的描述。

1.1.1.10.4.1 搜索框組件

 

點(diǎn)擊組件區(qū)的搜索框組件，預(yù)覽區(qū)會(huì)出現(xiàn)搜索框組件展示區(qū)，在屬性區(qū)可以設(shè)置搜索組件左側(cè)的圖片與鏈接、搜索商品和搜索店鋪的提示文字以及添加搜索關(guān)鍵詞。

1.1.1.10.4.2 導(dǎo)航組件

 

點(diǎn)擊組件區(qū)的導(dǎo)航組件，預(yù)覽區(qū)會(huì)出現(xiàn)導(dǎo)航組件展示區(qū)，默認(rèn)有四個(gè)導(dǎo)航按鈕（在后臺(tái)點(diǎn)擊不會(huì)跳轉(zhuǎn)），在屬性區(qū)可以設(shè)置導(dǎo)航組件的背景顏色、是否顯示分類，可以設(shè)置導(dǎo)航按鈕文字內(nèi)容、文字顏色與鏈接地址,可以新增與刪除導(dǎo)航按鈕，但至少保留三個(gè)導(dǎo)航按鈕，最多保留十個(gè)導(dǎo)航按鈕。

1.1.1.10.4.3 樓層商品組件

 

點(diǎn)擊組件區(qū)的樓層商品組件，預(yù)覽區(qū)會(huì)出現(xiàn)樓層商品組件展示區(qū)，在屬性區(qū)可以設(shè)置樓層商品組件的樓層名稱、樓層左側(cè)圖片與鏈接、右側(cè)商品區(qū)的排序、可以設(shè)置每個(gè)列表中的列表名稱與選取商品的方式。可以新增與刪除列表，最多顯示五個(gè)列表，最少一個(gè)列表。

1.1.1.10.4.4 商品組件

 

點(diǎn)擊組件區(qū)的商品組件，預(yù)覽區(qū)會(huì)出現(xiàn)商品組件展示區(qū)（該組件不會(huì)顯示商品的真實(shí)數(shù)據(jù)，會(huì)在前臺(tái)顯示），在屬性區(qū)可以設(shè)置商品組件的標(biāo)題名稱、是否顯示標(biāo)題名稱、商品數(shù)量、商品排序、選取商品的方式。

1.1.1.10.4.5 優(yōu)惠券組件

 

點(diǎn)擊組件區(qū)的優(yōu)惠券組件，預(yù)覽區(qū)會(huì)出現(xiàn)優(yōu)惠券組件展示區(qū)，在屬性區(qū)可以設(shè)置優(yōu)惠券背景圖片、優(yōu)惠券標(biāo)題、優(yōu)惠券描述、優(yōu)惠券標(biāo)題文字顏色、優(yōu)惠券描述文字顏色、優(yōu)惠券文字顏色、優(yōu)惠券按鈕顏色、優(yōu)惠券按鈕文字顏色?？梢蕴砑觾?yōu)惠券，如果不添加優(yōu)惠券，則自動(dòng)獲取正在進(jìn)行中的優(yōu)惠券，該組件最多顯示四張優(yōu)惠券。