Skip to content
GitLab
Commit 864d2553 authored by usgeek's avatar usgeek Committed by linlinjava
Browse files

个人中心界面调整

parent 990cb1c8
Hide whitespace changes
Inline Side-by-side
litemall-wx/pages/ucenter/index/index.js
View file @ 864d2553
......@@ -51,6 +51,21 @@ Page({
url: "/pages/auth/login/login"
});
}
},
goOrderIndex(e) {
let tab = e.currentTarget.dataset.index
let route = e.currentTarget.dataset.route
try {
wx.setStorageSync('tab', tab);
} catch (e) {
}
wx.navigateTo({
url: route,
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
},
goCoupon() {
if (app.globalData.hasLogin) {
......@@ -85,6 +100,17 @@ Page({
});
};
},
goFeedback(e) {
if (app.globalData.hasLogin) {
wx.navigateTo({
url: "/pages/ucenter/feedback/feedback"
});
} else {
wx.navigateTo({
url: "/pages/auth/login/login"
});
};
},
goFootprint() {
if (app.globalData.hasLogin) {
wx.navigateTo({
......
litemall-wx/pages/ucenter/index/index.wxml
View file @ 864d2553
......@@ -6,78 +6,90 @@
</view>
</view>
<view class="user-menu">
<view class="item">
<view class="a" bindtap="goOrder">
<text class="icon order"></text>
<text class="txt">我的订单</text>
</view>
<view class='separate'></view>
<view class='user_area'>
<view class='user_row' bindtap='goOrder'>
<view class='user_row_left'>我的订单</view>
<image class='user_row_right' src='/static/images/goright.png'></image>
</view>
<view class="item">
<view class="a" bindtap="goCoupon">
<text class="icon coupon"></text>
<text class="txt">优惠券</text>
<view class='user_column'>
<view class='user_column_item' bindtap='goOrderIndex' data-index='1' data-route='/pages/ucenter/order/order'>
<image class='user_column_item_image' src='/static/images/pendpay.png'></image>
<view class='user_column_item_text'>待付款</view>
</view>
</view>
<view class="item no-border" bindtap="goGroupon">
<view class="a">
<text class="icon gift"></text>
<text class="txt">团购</text>
<view class='user_column_item' bindtap='goOrderIndex' data-index='2' data-route='/pages/ucenter/order/order'>
<image class='user_column_item_image' src='/static/images/send.png'></image>
<view class='user_column_item_text'>待发货</view>
</view>
</view>
<view class="item">
<view class="a" bindtap="goCollect">
<image class="user-menu .icon.collect" src="/static/images/icon_collect.png"></image>
<text class="txt">我的收藏</text>
<view class='user_column_item' bindtap='goOrderIndex' data-index='3' data-route='/pages/ucenter/order/order'>
<image class='user_column_item_image' src='/static/images/receive.png'></image>
<view class='user_column_item_text'>待收货</view>
</view>
</view>
<view class="item">
<view class="a" bindtap="goFootprint">
<image class="user-menu .icon.collect" src="/static/images/foot.png"></image>
<text class="txt">我的足迹</text>
<view class='user_column_item' bindtap='goOrderIndex' data-index='4' data-route='/pages/ucenter/order/order'>
<image class='user_column_item_image' src='/static/images/comment.png'></image>
<view class='user_column_item_text'>待评价</view>
</view>
</view>
<!-- <view class="item no-border">
<view class="a">
<text class="icon kefu"></text>
<text class="txt">会员福利</text>
</view>
</view> -->
<view class="item">
<view class="a" bindtap="goAddress">
<text class="icon address"></text>
<text class="txt">地址管理</text>
</view>
</view>
<view class='separate'></view>
<view class='user_row'>
<view class='user_row_left'>核心服务</view>
</view>
<view class='user_column'>
<view class='user_column_item' bindtap='goCoupon' data-route='/pages/ucenter/order/order'>
<image class='user_column_item_image' src='/static/images/coupon.png'></image>
<view class='user_column_item_text'>优惠卷</view>
</view>
<!-- <view class="item">
<view class="a">
<text class="icon security"></text>
<text class="txt">账号安全</text>
</view>
</view> -->
<!-- 开发环境看不到效果，但是线上环境可以正常使用-->
<!-- 开发者参考以下文档自行测试，建议直接采用文档中的网页版客服工具 -->
<!-- https://developers.weixin.qq.com/miniprogram/introduction/custom.html#功能介绍 -->
<button class="item" open-type="contact" size="20" session-from="weapp">
<view class="a">
<text class="icon kefu"></text>
<text class="txt">联系客服</text>
</view>
</button>
<button class="item" open-type="getPhoneNumber" bindgetphonenumber="bindPhoneNumber">
<view class="a">
<image class="user-menu .icon.phone" src="/static/images/mobile.png"></image>
<text class="txt">绑定手机号码</text>
</view>
</button>
<view class="item">
<view class="a" bindtap="aboutUs">
<image class="user-menu .icon.collect" src="/static/images/about_us.png"></image>
<text class="txt">关于我们</text>
</view>
<view class='user_column_item' bindtap='goCollect' data-route='/pages/ucenter/order/order'>
<image class='user_column_item_image' src='/static/images/icon_collect.png'></image>
<view class='user_column_item_text'>商品收藏</view>
</view>
<view class='user_column_item' bindtap='goFootprint' data-route='/pages/ucenter/order/order'>
<image class='user_column_item_image' src='/static/images/footprint.png'></image>
<view class='user_column_item_text'>浏览足迹</view>
</view>
<view class='user_column_item' bindtap='goGroupon' data-route='/pages/ucenter/order/order'>
<image class='user_column_item_image' src='/static/images/group.png'></image>
<view class='user_column_item_text'>我的拼团</view>
</view>
<view class='user_column_item' bindtap='goOrderIndex' data-route='/pages/ucenter/order/order'>
<image class='user_column_item_image' src='/static/images/aftersale.png'></image>
<view class='user_column_item_text'>退款/售后</view>
</view>
</view>
<view class='separate'></view>
<view class='user_row'>
<view class='user_row_left'>必备工具</view>
</view>
<view class='user_tool_area'>
<view class='user_tool_item' bindtap='goAddress'>
<image class='user_tool_item_image' src='/static/images/address.png'></image>
<view class='user_tool_item_text'>地址管理</view>
</view>
<button class="user_tool_item_phone" open-type="getPhoneNumber" bindgetphonenumber="bindPhoneNumber">
<image class='user_tool_item_image' src='/static/images/mobile.png'></image>
<view class='user_tool_item_text'>绑定手机</view>
</button>
<view class='user_tool_item' bindtap='goFeedback'>
<image class='user_tool_item_image' src='/static/images/feedback.png'></image>
<view class='user_tool_item_text'>意见反馈</view>
</view>
<view class='user_tool_item'>
<contact-button style="opacity:0;position:absolute;" type="default-dark" session-from="weapp" size="27">
</contact-button>
<image class='user_tool_item_image' src='/static/images/customer.png'></image>
<view class='user_tool_item_text'>联系客服</view>
</view>
<view class='user_tool_item' bindtap='aboutUs'>
<image class='user_tool_item_image' src='/static/images/about_us.png'></image>
<view class='user_tool_item_text'>关于我们</view>
</view>
</view>
<!--<view class="logout" bindtap="exitLogin">退出登录</view>-->
</view>
\ No newline at end of file
litemall-wx/pages/ucenter/index/index.wxss
View file @ 864d2553
......@@ -12,14 +12,12 @@ page {
}
.profile-info {
width: 100%;
height: 280rpx;
background-color: #ab956d;
color: #fff;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
padding: 0 30.25rpx;
background: #333;
padding: 30rpx;
font-size: 28rpx;
}
.profile-info .avatar {
......@@ -52,126 +50,147 @@ page {
font-size: 30rpx;
}
.user-menu {
.user_area {
/* border: 1px solid black; */
width: 100%;
height: auto;
overflow: hidden;
height: 226rpx;
/* margin: 0 auto; */
margin-top: -8rpx;
background: #fff;
/* border-top: 1px solid #f4f4f4; */
}
.user-menu .item {
float: left;
width: 33.33333%;
height: 187.5rpx;
border-right: 1px solid rgba(0, 0, 0, 0.15);
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
text-align: center;
.user_row {
/* border: 1px solid black; */
height: 86rpx;
line-height: 86rpx;
border-bottom: 1px solid #fafafa;
}
.user-menu .item .a {
.user_row_left {
/* border: 1px solid #757575; */
float: left;
height: 86rpx;
font-weight: 550;
line-height: 86rpx;
margin-left: 35rpx;
font-size: 26rpx;
letter-spacing: 1rpx;
}
.user_row_right {
/* border: 1px solid #757575; */
float: right;
height: 40rpx;
width: 40rpx;
font-weight: 550;
line-height: 86rpx;
margin-top: 28rpx;
margin-right: 30rpx;
}
.user_column {
/* border: 1px solid black; */
height: 140rpx;
display: flex;
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
align-items: center;
}
.user-menu .item.no-border {
border-right: 0;
}
.user-menu .item.item-bottom {
border-bottom: none;
}
.user-menu .icon {
margin: 0 auto;
display: block;
height: 52.803rpx;
width: 52.803rpx;
margin-bottom: 16rpx;
}
.user-menu .icon.order {
background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 -437.5rpx no-repeat;
background-size: 52.803rpx;
}
.user-menu .icon.coupon {
background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 -62.4997rpx no-repeat;
background-size: 52.803rpx;
.user_column_item {
width: 30%;
height: 140rpx;
/* background: #757575; */
text-align: center;
}
.user-menu .icon.phone {
display: block;
height: 55rpx;
width: 55rpx;
background-size: 52.803rpx;
.user_column_item_image {
width: 50rpx;
height: 50rpx;
margin-top: 30rpx;
}
.user-menu .icon.gift {
background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 -187.5rpx no-repeat;
background-size: 52.803rpx;
.user_column_item_text {
/* border: 1px solid black; */
margin-top: 5rpx;
font-size: 24rpx;
color: #555;
}
.user-menu .icon.address {
background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 0 no-repeat;
background-size: 52.803rpx;
.separate {
background: #e0e3da;
width: 100%;
height: 6rpx;
}
.user-menu .icon.security {
background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 -500rpx no-repeat;
background-size: 52.803rpx;
.box_bottom_area {
/* border: 1px solid black; *//* margin-top: 32rpx; */
height: auto;
background: #fff;
}
.user-menu .icon.kefu {
background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 -312.5rpx no-repeat;
background-size: 52.803rpx;
.user_tool_item {
width: 187.5rpx;
height: 142rpx;
/* border: 1px solid #757575; */
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
float: left;
background: #fff;
border-bottom: 1px solid #fafafa;
}
.user-menu .icon.help {
background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 -250rpx no-repeat;
background-size: 52.803rpx;
}
.user-menu .icon.about {
/* background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 -62.4997rpx no-repeat; */
display: block;
height: 55rpx;
width: 55rpx;
background-size: 52.803rpx;
.user_tool_item_image {
/* border: 1px solid #757575; */
width: 50rpx;
height: 50rpx;
margin-top: 23rpx;
}
.user-menu .icon.feedback {
background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/sprites/ucenter-sdf6a55ee56-f2c2b9c2f0.png) 0 -125rpx no-repeat;
background-size: 52.803rpx;
.user_tool_item_text {
/* border: 1px solid #757575; */
width: 187.5rpx;
margin-bottom: 12rpx;
height: 42rpx;
line-height: 42rpx;
font-size: 23rpx;
color: #555;
}
.user-menu .txt {
display: block;
height: 24rpx;
width: 100%;
font-size: 24rpx;
color: #333;
.user_tool_item {
width: 187.5rpx;
height: 142rpx;
/* border: 1px solid #757575; */
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
float: left;
background: #fff;
border-bottom: 1px solid #fafafa;
}
.logout {
margin-top: 50rpx;
height: 101rpx;
width: 100%;
line-height: 101rpx;
.user_tool_item_phone {
background: none !important;
font-size: 32rpx;
color: #fff !important;
border-radius: 0%;
width: 187.5rpx;
height: 142rpx;
/* border: 1px solid #757575; */
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
float: left;
background: #fff;
color: #333;
font-size: 30rpx;
border-bottom: 0px solid #fafafa;
}
.about {
width: 100%;
background: url(https://cdn.it120.cc/images/weappshop/arrow-right.png) no-repeat 750rpx center;
background-size: 16rpx auto, 750rpx auto;
margin: 20rpx 0;
height: 80rpx;
line-height: 80rpx;
padding-left: 100rpx;
.user_tool_item_phone::after{
border: none;
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment