hymp
惠電影小程序
掃描體驗
mp核心功能分成三個Tab頁：
- 電影列表，顯示正在熱映和即將上映的電影
- 影院列表，根據用戶的位置由近及遠顯示影院列表
- 個人中心，用戶推薦、反饋入口
電影列表
電影列表包含頭部和主體兩部分，頭部是目前正在熱映八部電影的海報以幻燈浮圖的形式循環輪播，主體則根據電影上映時間劃分成正在熱映和即將上映兩個子Tab電影列表。
熱映浮圖
一般影視網站首頁都有最近熱播視頻幻燈視圖，熱映浮圖與此類似，使用滑塊試圖容器swiper輪番展示8部最近熱門電影海報大圖。
正在熱映
正在熱映列表是從豆瓣電影API分頁獲取所有正在熱映的電影，和熱映浮圖一起構成惠電影首頁視圖。
熱映列表中包含以下電影信息：
- 電影標題
- 電影海報小圖
- 電影豆瓣評分
- 電影導演
- 電影演員
- 比價按鈕，進入影院選擇列表和比價詳情頁查看電影比價信息
單擊電影列表項可進入電影詳情也，查看當前電影詳情信息。
電影詳情頁
電影詳情頁展示的電影信息：
- 電影標題、海報、評分，同列表頁
- 劇情摘要
- 導演、演員照片
- 劇照、預告片，單擊預告片可播放
- 比價按鈕，可選擇具體影院查看電影比價信息入口
即將上映
與正在熱映一樣，只是分頁展示的是即將上映的電影信息，列表項中無比價按鈕，單擊列表項同樣可查看電影詳情信息。正在熱映和即將上映兩個Tab位於同一container中，兩個Tab隨用戶選擇切換，同一時刻只有一個可展示。
使用高顏值、好用、易擴展的小程序 UI 庫vant-weapp中的zan-tab組件極大簡化了Tab切換效果的實現。
影院
影院信息入口，可查看搜索影院，包括：
- 影院列表
- 影院搜索
- 城市選擇
影院列表
根據微信定位的用戶位置由近及遠展示當前城市電影院名稱、電影院位置、距離、最低價格，單擊影院列表項可查看影院詳情比價信息。
影院搜索
影院搜索框裏用戶可輸入電影院名稱或道路地址，借用百度map微信小程序js api提供的POI檢索熱詞聯想功能可根據用戶的輸入顯示提示地址。用戶輸入或選擇某個具體地址後，利用百度map逆地址解析將輸入地址解析成經緯度，然後與當前城市所有影院計算距離排序後由近及遠展示所有影院。
城市選擇
惠電影使用微信sdk定位用戶位置經緯度信息，然後使用百度map sdk由經緯度獲取到具體城市，默認顯示當前城市影院列表,可通過城市選擇更換目的地城市。城市選擇組件基於citySelect實現。
影院詳情
- 影院詳情地址
- 熱映電影比較，是惠電影最核心的功能
影院地址
展示影院詳情地址，點擊地址icon可打開地圖查看位置和導航信息。
電影比較
浮圖形式展現當前影院熱映電影海報，海報下方顯示了電影名稱、評分及詳情的比價信息，滑動海報可切換熱映電影比價信息。
比價信息按可售賣日期分成多個可切換Tab,每個tab以列表項顯示了當前電影的開場時間、結束時間、放映廳、渠道最低價、語言等信息，點擊列表項可查看/隱藏所有渠道的價格信息，目前有貓眼、淘票票、糯米三個渠道。
個人中心
個人中心包括當前登錄用戶信息以及惠電影分享推薦、聯繫客服和關於我入口項。
Todo
- 電影搜索
- 影院按區域過濾、按價格排序
- 更多渠道方價格信息