uni-app微信小程序——商城(6)——我的主页

本篇文章要介绍微信小程序商城最重要的内容——我的主页,“我的”这个页面内容包含了太多的东西,比如用户的个人信息,订单内容,地址管理,客服电话等等。所以它成为了整个功能模块中最为重要的部门,本篇文章将只会介绍页面的设计和功能模块的规划,其他内容将会在后续文章中一一介绍。

效果图如下所示:

uni-app微信小程序——商城(6)——我的主页_第1张图片

“我的”页面主要包括三个模块:个人积分及优惠券模块、订单内容模块、地址管理和客服联系等模块。三个模块基本包含了“我的”功能模块的基本内容,如果后续有具体的内容更新,还会在里面添加新的内容。

代码内容如下:






在代码中,数据内容都是写在了本地数组中,这些数据可以根据具体的需求,从后台获取,然后重新渲染到DOM中,实现动态的更新。代码中两次使用v-for循环,利用Vant Weapp组件来展现数据,v-for在uni-app中很多方面都会使用到,所以还是需要彻底了解它的使用方法,根据具体需求灵活运用。在订单详情中,我做了具体的页面展示,后续会讲到,使用了:url="item.toUrl" 来进行跳转。

本章内容先写到这里,后续应该会根据具体内容进行更新,内容如有不足,还望斧正,谢谢~

你可能感兴趣的:(#,uni-app之微信小程序,小程序,vue,前端)