Yougo Mall uni-app project

Project Introduction

Yougo Mall Mini Program Project

Project technology

• Project framework: uni-app
• Style precompilation: Sass
• Version management: Git
• Font icon: iconfont

Project directory structure

.
├─components
│  └─goods_detail
├─custom-tab-bar
├─pages
│  ├─cart
│  ├─category
│  ├─collect
│  ├─feedback
│  ├─goods_detail
│  ├─goods_list
│  ├─index
│  ├─login
│  ├─order
│  ├─pay
│  ├─search
│  └─user
├─static
│  ├─fonts
│  └─images
└─utils
    └─api

Project API

https://api-hmugo-web.itheima.net/api/public/v1/

Project routing

name	path
Home page	/pages/index/index
Categories	/pages/category/index
shopping cart	/pages/cart/index
Personal center	/pages/user/index
search for	/pages/search/index
Product list	/pages/goods_list/index
product details	/pages/goods_detail/index
Commodity collection	/pages/collect/index
Feedback	/pages/feedback/index
log in	/pages/login/index
Order Tracking	/pages/order/index
Pay	/pages/pay/index

Project realization

• Global WeChat custom navigation bar for non-tabbar indexed pages

• Global search bar component

• Global commodity item components, encapsulated into multiple states

• Global Commodity Total Column

• Global http request method encapsulation, unified error handling

• Vue package to the global error prototype root instance, the information is not in response api 200response data centralized processing tips

• Global api request method encapsulation, and mount prototype with Vue root instance

• The uni.getStorageSync()the uni.setStorageSync()encapsulation method to the root Vue prototype, data synchronized with the local data object, and reuse everywhere

• Public methods: date formatting, detecting login status, obtaining DOM element rectangle size, responding to error prompts

• The CSS value of the full-screen gesture prompt line compatible with iPhone:

  Designing Websites for iPhone X | WebKit

  • constant(safe-area-inset-bottom) For compatibility with iOS 11
  • env(safe-area-inset-bottom) For compatibility with iOS 11.2beta+

Home page

• Pull down to refresh
• `` Carousel picture merchandise display
• The reference of the search bar component, and the fixed positioning is achieved through scroll monitoring, the purpose is to coordinate the page style when the pull-down refresh is unified
• Category Navigation
• Recommended product floor display

Categories

• Search bar component reference
• Fixed side category navigation bar
• Commodity sub-category display on the right
• v-if Determine the current classification index to control the display of sub-category data in the product classification data

product search

• Enter the empty list for the first time to display the initial text
• Search box input
• Click the search button to search
• Prevent users from repeatedly clicking the search button when the search request is not responding
• Commodity item component reference, displaying information about search results
• If there is no search data, display an empty list status

Product list

• Pull down to refresh, reset the paging effect
• The search bar component is referenced, and fixed positioning is achieved through scroll monitoring. The purpose is to coordinate with the page style when the page is pulled down to refresh.
• Custom tabbarassembly of references, not to achieve tabbarthe routing configuration can be displayedtabbar
• Filter bar, scroll to monitor the fixed position of the filter bar, and set a transition effect
• By onReachBottomrealization paging cascade effect, and it does throttling function, in the end portion to prevent excessive rolling load data the user
• Commodity item component reference, display product information, and jump to the corresponding product details when the component is clicked

Note that this case uses the custom tabbar of the official case, but the official uses cover-view and cover-image on the custom tabbar. If it is displayed on iOS, it will be displayed on the page referencing the tabbar (not in the global "tabbar" list). Page), such as this product list page , there will be a problem of the tabbar position jumping, and finally it is changed to the view image label to solve it

Similar question reference:

• Custom tabbar appears on the iPhone 8p position moved up | WeChat Open Community (qq.com)
• Custom tabbar at the bottom | WeChat Open Community (qq.com)

product details

• `` Display a list of product pictures, if the product has no pictures, hide the index point and display an empty picture
• Commodity information display
• Share: Call WeChat to share
• Favorites, store part of the information of the favorites to the local and change the status of the favorites icon
• `` Display product graphic details, when the graphic details are empty, the empty status will be displayed
• Contact customer service: call WeChat to contact customer service Api
• Shopping cart: Jump to the shopping cart page
• Add to shopping cart: store part of the current product data locally and change the status of the shopping cart icon, and display information prompts
• Buy now: store part of the current product data locally and jump to the shopping cart

shopping cart

• Commodity item component reference, open the function of product component selection, quantity increase or decrease, quantity display, product information display, click on the picture to jump, and click on the product information to select the product
• Commodity total column component reference:
  • select all
  • Calculate the total price, using Array.prototype.reduceare summed
  • Delete button, if the product is not selected, the user is prompted to select the product, if there is no product, the delete button is hidden
  • Settlement, if the product is not selected, the settlement button is disabled

Pay

• In the address bar, if there is no address information in the local storage, the unselected address status will be displayed. If there is address information data in the local storage, the address bar will be directly filled in
• Commodity component reference, open product picture display, product information display, and product quantity display functions
• Commodity total column component reference:
  • Calculate the total price, using Array.prototype.reduceare summed
  • Pay button
• Commodity payment
  • Log in status judgment, if not logged in, prompt the user to log in
  • The following operations can only be performed under the prerequisite of successful login
  • Request the back-end service to obtain the order number
  • Request the back-end service again to obtain payment parameters through the order number
  • Call WeChat API through payment parameters to generate payment code for payment
  • If the payment is interrupted, the user will be prompted and jumped to the order page to switch to the unpaid option
  • If the payment is successful, the user will be prompted and jumped to the order page to switch to the unshipped option

Personal center

• User avatar information bar
  • If you are not logged in, the button to log in is displayed
  • If the login is successful, the user avatar and nickname will be displayed
• Order action bar
  • If you are not logged in, click on the option to jump to the login page
  • Click on pending payment to jump to the order page and switch to pending payment option
  • Click all orders to jump to the order page
  • Click on favorites to jump to the product favorites page
• Contact customer service, call the WeChat call API, click to make a call
• Feedback, jump to the feedback page
• Log out, clear the user data in the local storage, change the status of the user avatar information bar to not logged in, and prompt

log in

• Click the login button to call the WeChat login API
• After successful login, the welcome message is displayed and the page jumps back

Order Tracking

• Order options: all, to be paid, to be shipped
• Click on different order options to request order data in different states from the backend server. Each time you click on a different tab, you will get it from the first page.
• Waterfall paging function, cooperate with scroll monitor to send request to the back-end server to get the data of the next page

Feedback

• Multi-select question type button
• Fill in the description of the problem
• Limit the upload of 4 pictures

Favorites

• Get the data of favorite products stored locally on the product detail page
• Quote product item components, display product information, click on the product item to jump to the corresponding product details