——Homepage login (wx.login(), getPhoneNumber)
When entering the home page, load the product list data and display it on the page. Obtain token information from the cache to determine the user's login status. If the user is not logged in, call the login method of the WeChat applet to log in, obtain the unique openid information of the WeChat user, send it to the backend, and the backend returns the token and stores it locally. If the user has not authorized the mobile phone number, the button to authorize the mobile phone number will be displayed to allow the user to authorize the mobile phone number and pass the obtained code to the backend.
<button class="btn bg-gradual-myOrange" lang="zh_CN" open-type="getPhoneNumber"
@getphonenumber="onGetPhoneNumber">绑定并登录</button> 
2. The product list is displayed on the home page, click on the product to enter the details
After getting the product list on the homepage, package the individual products into components and reuse them. Each component is a new object and does not affect each other. In this way, v-model can be used to bind the number of products to ensure that the added The number of products in a will not affect the number of products in b, and the code in the homepage component is simplified for separation. When the product is clicked, the child component uses the this.$emit() method to trigger the function of the parent component, and passes the id of the product to the parent component, which is the home page, and the home page carries the id to jump to the product details page.
3. The home page hides the original navigation bar, customizes the navigation bar, and displays address information and the customer service entrance of the applet.
The home page generally displays the default address. When the user selects a new address on the home page, it will be used as the address for immediate purchase and order creation. The address interface has functions such as deleting addresses, setting default addresses, and adding addresses. When adding an address, obtain the user's geographical location permission, perform positioning, and obtain the user's address information.
4. Click Buy Now on the home page to enter the order creation page.
According to the address information on the home page, determine the delivery method. If there is a store near the address, the delivery method can be self-pickup or door-to-door delivery; if there is no store nearby, the delivery method is express delivery. If the user has not paid, when returning to the home page, the user's unpaid order will be updated in time. If the user has already paid, it will jump to the order details page after the payment is successful.
5. Click on the product on the home page to enter the product details page
On the product details page, use regular expressions to process the markdown details page information returned by the background.
Listen to the scrolling event of the page and control the transparency of the top navigation. Calculate the height of some elements, and when the navigation is clicked, the page scrolls to a certain element.
And configure the function of forwarding this page
Six my coupon list,
Use the swiper sliding component to display the coupons according to the status of received, used, etc. Click on the coupon to enter the product display where the coupon can be used, and make a waterfall effect
Seven order list page
There are 7 states in the order list. Use vuex to share an object on the list page and the details page. This object displays different page information according to the order status, such as what button to display, etc., and customizes the data structure for rendering.
There is a refund request function. If the user chooses a picture, first upload the picture to the Qiniu cloud server, obtain the information returned by the Qiniu cloud server, assemble it into a picture path, and send the picture to the backend.
8. Encapsulate commonly used components for unified management and reuse
For commonly used functions, they are all encapsulated, such as tool functions such as conversion with timestamps,
Frequently appearing pop-up boxes are also written in a component to distinguish between different types and display different components.
