商城小程序页面展示

——首页登录(wx.login(),getPhoneNumber)

进入首页时,加载商品列表数据展示在页面。从缓存中获取token信息,判断用户登录状态,如果用户没有登录,调用微信小程序的login方法,进行登录,获取微信用户唯一的openid信息,发送给后端,后端返回token,存储到本地。若是用户没有授权过手机号,则展示授权手机号的按钮,让用户授权手机号,把获得的code传给后端。

e5befb38d03e49bf9a97634361340880.pngf6936d6a0cd943e590000c45d592dd76.gif

<button class="btn   bg-gradual-myOrange" lang="zh_CN" open-type="getPhoneNumber"
					@getphonenumber="onGetPhoneNumber">绑定并登录</button>

 01f24f236b3f40abaddb954b7e9727e4.png

4a180d9bcc5e4b05b70fe67c6f1d1e3d.gif

二 首页展示商品列表,点击商品进入详情

在首页拿到商品列表之后,将单独的商品封装成组件,进行复用,每个组件都是一个新的对象,互不影响,这样能够使用v-model去绑定商品的个数,确保添加a商品个数时不会影响到b商品的个数,并且简化首页组件中的代码,用做分离。点击商品时,子组件使用this.$emit()方法,触发父组件的函数,并把商品的id传给父组件,也就是首页,由首页携带id跳转至商品详情页面。

72377251b9eb4f97966417fa453d83e2.png

 ec9e7bbcec8e4f7ba762b2548a676c20.png

 7532bd2294f242bdac3811409c3821fb.gif

三 首页隐藏原生导航栏,自定义导航栏,展示地址信息和小程序客服入口。

首页一般展示的是默认地址,当用户在首页选择一个新的地址之后,就作为立即购买,创建订单时的地址,地址界面,有删除地址,设置默认地址,添加地址等功能。添加地址时,获取用户地理位置权限,进行定位,获得用户的地址信息。

dad87bd1fd26471f8c9c4b1cee994729.png

 92c42422818849b49fc25f22f826ec94.gif

 四 首页点击立即购买,可以进入创建订单页面。

根据首页地址信息,判断送货方式,如果地址附近有店面,送货方式可以是自提或者送货上门;如果附近没有店面,那么送货方式就是快递。用户如果未支付,返回首页时,会及时更新用户未支付的订单。如果用户已支付,支付成功后会跳转到订单详情页面。

f8b182ecf7b24211a1eef9ecbdac1823.gif

 3f8dc92fa3cc499f82577c4cb454829d.gif

 五 首页点击商品进入商品详情页

商品详情页中,使用正则表达式,处理后台返回的markdown详情页信息。

bda9ff3b06be4280a1005433dfd1a3c6.png

 监听页面的滚动事件,控制顶部导航的透明度。计算某些元素的高度,点击导航时,页面滚动到某个元素上。

c4b942c0d4584d588ef2e4559a3c8973.png

977dc2e76d0843428a7113b54a56a85d.png

d3bf5e23a1e04c94a7398dc98081ca22.png

并配置了转发本页面的功能

5b396794c32944189e8b3fee7b73a963.png

 203d9bd264f449eda3d66c2d237fe948.gif

六 我的优惠券列表,

使用swiper滑动组件,根据已领取,已使用等状态展示优惠券, 点击优惠券,进入优惠券可使用的商品展示,并做了瀑布流的效果

0c896095130941918afa98e5fd4ded77.png

 dc2f260f2fe74b83bb1956085bc38d63.gif

 七 订单列表页

订单列表中有7种状态,使用vuex在列表页和详情页共享一个对象,这个对象根据订单的状态,来展示不同的页面信息,比如要展示什么按钮等等,自定义数据结构,进行渲染。

7b2931e8fb534e3bbf966483eba3e3cf.png

 5a7e218887c1477ab72c5c95009af97a.png

 1f523faf3f794f2588fe97191147c52d.gif

 有申请退款功能。用户如果有选择图片,先将图片上传至七牛云服务器,获得七牛云服务器返回的信息,组装成图片路径,并将图片发送至后端。

77bd71e3adb2409a9e578dc214684930.gif

八,封装常用的组件,进行统一管理并复用

对于常用的功能,都进行封装,比如有时间戳的转换等等工具函数,

1a6e7097003b413fad3a910ab51e46ca.png

 经常出现的弹出框,也写在一个组件内,区分不同类型,展示不同的组件。

c91d31d8062542158b1205955b7d4897.png

4620c2f68bb7450b843e76d9f0efcb38.png

 bbcae51d1ca94432ada6236c7eefd2e5.gif

猜你喜欢

转载自blog.csdn.net/2201_75783276/article/details/131628964