店鋪裝修移動化前端方案


功能整理:

店鋪裝修移動化目前需求主要是以下幾個:

  • 模擬手機端預覽裝修效果
  • 拖拽裝修模塊進預覽處
  • 對模塊進行布局順序修改(上移下移刪除等)
  • 對模塊進行屬性修改
  • 裝修備份功能(即讀取指定數據并在預覽處展示指定效果)

其中模塊屬性修改,相對比較復雜,主要包含幾個功能:

  • 根據需求上傳指定格式的圖片
  • 裁剪圖片(每個模塊都有指定的尺寸)
  • 鏈接選擇小工具(彈窗形式,選擇已有的鏈接并填充到表單中)
  • 服務選擇 (彈窗形式,選擇已有的服務,并填充到表單中)
  • 案例選擇 (彈窗形式,選擇已有的案例,并填充到表單中)

前提:

參考淘寶的移動店鋪裝修功能,只支持Chrome和UC瀏覽器,所以經過產品同意,可以不考慮兼容性的問題,也意味著可以選擇更多。

開發(fā)周期:

約兩周


選型:

手機端預覽效果

因為這個項目功能比較獨立,所以遷入fis項目進行構建。同時考慮到涉及交互還比較多,所以參考使用框架來幫助我們更好的完成開發(fā)??紤]開發(fā)周期,經過初步篩選,決定入坑Vuejs。

我們這里使用這個框架主要是拿它來實現需求中手機端的預覽效果:把手機端預覽中的每個模塊都當成component進行組裝,通過改變數據來控制展示(拖拽功能即多塞了一條數據,改變屬性就相當于改變其中一個數據)。

備份

備份功能也可以使用預覽的相同機制實現。

表單功能

至于表單部分功能比較多,可能還是要使用現有的組件來完成部分功能(如選擇服務)。

擴展

以后擴展其他模塊的話,其實也就相當于多注冊幾個component,擴展起來比較隨意,也比較獨立。

其他問題

  • Vuejs的文檔相對比較友好,容錯度也較高,入手使用并不會那么痛苦(就算日后有人接手也相對來說不會那么無從著手)。
  • Vuejs本身組件并不豐富。Github上實用的組件也就是vue-crop(包裝的jCrop)和vue-validator。 但是經過測試其實也可以使用其他組件,如rake中正在使用的彈窗組件,如拖拽使用的Sortable插件。這些都可以在測試中正常使用。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容