本文给大家带来的是微信小程序商城系统详细个人中心功能大全设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--pages/center/center.wxml-->
<view class="m-ucenter g-row greybg">
<view class="m-uc-top">
<view class="m-profile">
<image class="avatar" src="https://img02.camel.com.cn/image/headportrait345.png" alt=""></image>
<view class="info">
<view class="nickname">
camel1059205
</view>
<view class="membershipLevel">
<text class="memberTitle1">驼客</text>
</view>
<view class="icon ion-ios-arrow-right top_right"></view>
</view>
</view>
</view>
<view class="m-uc-wrap">
<view class="m-uc-wraptit">
<text class="txt">我的订单</text>
<view class="icon-arrow-right">查看全部订单></view>
</view>
<view class="m-uc-menu">
<view class="list">
<view class="item">
<navigator url="../member/orderList/orderList">
<image class="menu-icon" src="http://img02.camel.com.cn/image/zwuc_icon1.png" alt=""></image>
<text class="txt">待付款</text>
<text class="red-dot">0</text>
</navigator>
</view>
<view class="item">
<navigator url="../member/orderList/orderList">
<image class="menu-icon" src="http://img02.camel.com.cn/image/zwuc_icon2.png" alt=""></image>
<text class="txt">待发货</text>
<text class="red-dot">0</text>
</navigator>
</view>
<view class="item">
<navigator url="../member/orderList/orderList">
<image class="menu-icon" src="http://img02.camel.com.cn/image/zwuc_icon3.png" alt=""></image>
<text class="txt">已发货</text>
<text class="red-dot">0</text>
</navigator>
</view>
<view class="item">
<navigator url="../member/orderList/orderList">
<image class="menu-icon" src="http://img02.camel.com.cn/image/zwuc_icon4.png" alt=""></image>
<text class="txt">待评价</text>
<text class="red-dot">0</text>
</navigator>
</view>
<view class="item">
<navigator url="../member/orderList/orderList">
<image class="menu-icon" src="http://img02.camel.com.cn/image/zwuc_icon5.png" alt=""></image>
<text class="txt">退款/售后</text>
</navigator>
</view>
</view>
</view>
</view>
<view class="m-uc-wrap">
<view class="m-uc-wraptit">
<text class="txt">我的服务</text>
</view>
<view class="m-uc-menu">
<view class="list">
<view class="item">
<navigator url="../member/ticketList/ticketList">
<image class="menu-icon" src="http://img02.camel.com.cn/image/zwuc_icon6.png" alt=""></image>
<text class="txt">优惠券</text>
</navigator>
</view>
<view class="item">
<navigator url="../member/productStore/productStore">
<image class="menu-icon" src="http://img02.camel.com.cn/image/zwuc_icon7.png" alt=""></image>
<text class="txt">收藏夹</text>
</navigator>
</view>
<view class="item">
<navigator url="../member/productCommentList/productCommentList">
<image class="menu-icon" src="http://img02.camel.com.cn/image/zwuc_icon8.png" alt=""></image>
<text class="txt">商品点评</text>
</navigator>
</view>
<view class="item">
<image class="menu-icon" src="http://img02.camel.com.cn/image/zwuc_icon9.png" alt=""></image>
<text class="txt">联系客服</text>
</view>
</view>
<view class="list">
<view class="item">
<navigator url="../member/receiveList/receiveList">
<image class="menu-icon" src="http://img02.camel.com.cn/image/zwuc_icon10.png" alt=""></image>
<text class="txt">地址管理</text>
</navigator>
</view>
<view class="item">
<navigator url="../member/mobileVerify/mobileVerify">
<image class="menu-icon" src="http://img02.camel.com.cn/image/zwuc_icon11.png" alt=""></image>
<text class="txt">修改密码</text>
</navigator>
</view>
<view class="item">
<navigator url="../portal/helpList/helpList">
<image class="menu-icon" src="http://img02.camel.com.cn/image/zwuc_icon12.png" alt=""></image>
<text class="txt">帮助</text>
</navigator>
</view>
<view class="item">
<navigator url="../member/account/account">
<image class="menu-icon" src="http://img02.camel.com.cn/image/zwuc_icon13.png" alt=""></image>
<text class="txt">设置</text>
</navigator>
</view>
</view>
</view>
</view>
<button class="w-button ">退出</button>
</view>
|
二、js页面代码如下:
// pages/center/center.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
|