一天實現一個產品類的小程序

小程序依然採用mpvue+雲開發實現!本文只介紹功能,若是有問題歡迎留言,樂意解答。vue

小程序由來

前幾天我舅跟我說,他買的小程序提示長時間未使用可能會被凍結,簡單看了下他小程序的功能,就是產品的展現,沒其餘功能,舅還說花了2萬塊,我說你這錢徹底是打了水漂,等我有時間給你從新作一個。數據庫

界面展現

首頁

產品詳情頁

我的中心頁

在線留言頁

關於咱們頁

留言列表頁

功能介紹

首頁

  1. 輪播圖不用過多介紹,輪播圖右下角的數字是本身手寫的;
  2. 搜索框,沒有另起一頁,直接輸入可實現動態搜索產品;
  3. 產品列表頁,默認一頁加載6條;
  4. 每一個產品右上角可能會出現hot標誌,這裏是否顯示hot的條件是瀏覽量大於5,後面能夠適當增大這個數字;

產品詳情頁

因爲我舅提供的資料確實太少,因此詳情作的不免有點粗糙,後面若是他有心想好好介紹他的產品我再好好改改小程序

  1. 詳情頁banner圖,可預覽;
  2. 這裏有個瀏覽量,即當進入詳情走一遍針對這個產品瀏覽量+1的雲函數,雲函數實現了兩個功能,先count數+1;後返回當前產品的詳情內容;
  3. 底部fixed一個按鈕,方便用戶去聯繫我舅諮詢購買;

我的中心頁

爲了好看,這裏仍是放一下用戶頭像和姓名 數組

  1. 默認進我的中心頁,用戶未受權,一旦用戶受權後查看用戶權限是否能查看留言列表功能,這裏經過判斷openId,這裏的作法是當openId是我舅本人的時候,才展現留言列表欄,方便他進入留言列表頁與客戶聯繫;
  2. 留言列表欄有個計數紅點,紅點個數經過雲函數去讀取數據庫留言列表中read爲false的項數之和;
  3. 之因此要作這個留言列表欄,是爲了方便我舅管理,不至於要我去爲他提供一個後臺管理吧;
  4. 聯繫咱們欄就是一個打電話功能;
  5. 聯繫地址直接使用微信內置地圖查看位置;

在線留言頁

爲了凸顯簡單明瞭,這裏要填的都是必填項 微信

  1. 姓名,手機號,想要買的設備名稱;
  2. 手機號作了簡單的校驗,正則:/^1[3456789]\d{9}$/
  3. 提交成功後給個提交成功的提示返回到我的中心頁;

關於咱們頁

  1. 因爲能利用的資源實在匱乏,全部內容都是本身網上查找;函數

  2. 符合本身的審美就先湊合用;cdn

留言列表頁

  1. 默認每一項當管理員第一次看到的時候,右上角會有一個小紅點;
  2. 一旦管理員撥打了某項客戶的電話,咱們這裏走一下update相關的雲函數,將這一項的read置爲true,從新讀取列表數組,則紅點消失;
  3. 當返回我的中心頁時,建議使用onShow讓數據從新渲染,能夠動態更新計數小紅點;

歡迎體驗:

相關文章
相關標籤/搜索