个人中心界面调整

litemall-wx/pages/ucenter/index/index.js

@@ -52,6 +52,21 @@ Page({
       });
     }
   },
+    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) {
       wx.navigateTo({
@@ -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

@@ -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>

litemall-wx/pages/ucenter/index/index.wxss

@@ -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;
 }