One day achieve a small program product category

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
This link: https://blog.csdn.net/qq_36070288/article/details/102501835

Applets still using mpvue + cloud development to achieve! This paper describes only function if there are questions please leave a message, happy to answer.

The origin of the applet

A few days ago my uncle told me that he bought a small program prompts unused for a long time may be frozen, he looked at the simple function of small programs, is the product of the show, no other function, he said uncle spent 20,000 block, I say you this money failed to be implemented completely, so I have time to give you a re-do.

Interface display

Home

Product details page

 

Personal Center page

 

 Feedback page

About us page

Message List 

Features

 Home

  1. Carousel Figure without much introduction, digital carousel bottom right of their own handwriting;
  2. Search box, not on a separate page, can be directly input dynamic search product;
  3. Product List, a default load 6;
  4. The upper right corner of each hot product may occur flag, whether the display condition where the hot views greater than 5, the latter may be suitably increased this figure;

Product details page

Because the information provided by my uncle did too little, so the details do was somewhat rough, behind a good thought if he had introduced me to his product a good change to change

  1. Map details page banner, preview;
  2. Here's views, that is, when to go into the details again for this function +1 Product views cloud, cloud function to achieve two functions, first count the number of +1; return after the current product content details;
  3. A bottom fixed buttons, user-friendly to contact my uncle to buy them;

Personal Center page

In order to look good, put it here or user avatar and name 

  1. The default into the personal center page, the user is not authorized, once authorized users to see if the user permissions can view the message list functions here by determining openId, practice here is that when openId is my uncle and myself when we come to display a message list field, convenient for him enter message list contact with customers;
  2. Comments field counts have red spots, red spots by the number of cloud database function to read a message as read list items and the number of the false;
  3. Comments reason to do this column, my uncle is to facilitate the management, and will not want me to provide a background for him to manage it;

在线留言页

为了凸显简单明了,这里要填的都是必填项 

  1. 姓名,手机号,想要买的设备名称;
  2. 手机号做了简单的校验,正则:/^1[3456789]\d{9}$/
  3. 提交成功后给个提交成功的提示返回到个人中心页;

关于我们页

  1. 由于能利用的资源实在匮乏,所有内容都是自己网上查找;

  2. 符合自己的审美就先凑合用;

留言列表页 

  1. 默认每一项当管理员第一次看到的时候,右上角会有一个小红点;
  2. 一旦管理员拨打了某项客户的电话,我们这里走一下update相关的云函数,将这一项的read置为true,重新读取列表数组,则红点消失;
  3. 当返回个人中心页时,建议使用onShow让数据重新渲染,可以动态更新计数小红点;

欢迎体验:

 

 

Guess you like

Origin blog.csdn.net/qq_36070288/article/details/102501835