个人模块页面调整，添加联系客服、绑定手机号码以及关于我们功能

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

@@ -80,6 +80,23 @@ Page({
       wx.navigateTo({ url: "/pages/auth/login/login" });
     };
   },
+  aboutUs: function () {
+    // wx.navigateTo({
+    //   url: '/page/about/index',
+    // })
+    wx.navigateTo({
+      url: '../../about/index',//页面跳转相对路径要写清楚且准确
+      success: function (res) {
+        console.log('跳转到news页面成功')// success
+      },
+      fail: function () {
+        console.log('跳转到news页面失败')  // fail
+      },
+      complete: function () {
+        console.log('跳转到news页面完成') // complete
+      }
+    })
+  },
   exitLogin: function () {
     wx.showModal({
       title: '',

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

@@ -2,7 +2,7 @@
   <view class="profile-info" bindtap="goLogin">
     <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
     <view class="info">
-       <text class="name">{{userInfo.nickName}}</text> 
+      <text class="name">{{userInfo.nickName}}</text>
     </view>
   </view>
 
@@ -27,13 +27,13 @@
     </view> -->
     <view class="item">
       <view class="a" bindtap="goCollect">
-        <text class="icon collect"></text>
+        <image class="user-menu .icon.collect" src="/static/images/icon_collect.png"></image>
         <text class="txt">我的收藏</text>
       </view>
     </view>
     <view class="item">
       <view class="a" bindtap="goFootprint">
-        <text class="icon security"></text>
+        <image class="user-menu .icon.collect" src="/static/images/foot.png"></image>
         <text class="txt">我的足迹</text>
       </view>
     </view>
@@ -55,19 +55,27 @@
         <text class="txt">账号安全</text>
       </view>
     </view> -->
-    <!-- <view class="item no-border">
+    <!-- 能力有限，此添加方式开发环境看不到效果，但是线上环境可以正常使用-->
+    <button class="item no-border" open-type="contact" size="20" session-from="weapp">
       <view class="a">
         <text class="icon kefu"></text>
         <text class="txt">联系客服</text>
       </view>
-    </view> -->
-    <!-- <view class="item item-bottom">
+    </button>
+    <button view class="item" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
       <view class="a">
-        <text class="icon help"></text>
-        <text class="txt">帮助中心</text>
+        <image class="user-menu .icon.phone" src="/static/images/mobile.png"></image>
+        <text class="txt">绑定手机号码</text>
       </view>
-    </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>
   </view>
 
+
   <!--<view class="logout" bindtap="exitLogin">退出登录</view>-->
 </view>

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

@@ -1,72 +1,74 @@
-page{
-    height: 100%;
-    width: 100%;
-    background: #f4f4f4;
-}
-.container{
-    background: #f4f4f4;
-    height: auto;
-    overflow: hidden;
-    width: 100%;
-}
-.profile-info{
-    width: 100%;
-    height: 280rpx;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 0 30.25rpx;
-    background: #333;
-}
-
-.profile-info .avatar{
-    height: 148rpx;
-    width: 148rpx;
-    border-radius: 50%;
-}
-
-.profile-info .info{
-    flex: 1;
-    height: 85rpx;
-    padding-left: 31.25rpx;
-}
-
-.profile-info .name{
-    display: block;
-    height: 45rpx;
-    line-height: 45rpx;
-    color: #fff;
-    font-size: 37.5rpx;
-    margin-bottom: 10rpx;
-}
-
-.profile-info .level{
-    display: block;
-    height: 30rpx;
-    line-height: 30rpx;
-    margin-bottom: 10rpx;
-    color: #7f7f7f;
-    font-size: 30rpx;
-}
-
-.user-menu{
-    width: 100%;
-    height: auto;
-    overflow: hidden;
-    background: #fff;
-}
-
-.user-menu .item{
-    float: left;
-    width: 33.33333%;
-    height: 187.5rpx;
-    border-right: 1px solid rgba(0,0,0,.15);
-    border-bottom: 1px solid rgba(0,0,0,.15);
-    text-align: center;
-}
-
-.user-menu .item .a{
+page {
+  height: 100%;
+  width: 100%;
+  background: #f4f4f4;
+}
+
+.container {
+  background: #f4f4f4;
+  height: auto;
+  overflow: hidden;
+  width: 100%;
+}
+
+.profile-info {
+  width: 100%;
+  height: 280rpx;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 30.25rpx;
+  background: #333;
+}
+
+.profile-info .avatar {
+  height: 148rpx;
+  width: 148rpx;
+  border-radius: 50%;
+}
+
+.profile-info .info {
+  flex: 1;
+  height: 85rpx;
+  padding-left: 31.25rpx;
+}
+
+.profile-info .name {
+  display: block;
+  height: 45rpx;
+  line-height: 45rpx;
+  color: #fff;
+  font-size: 37.5rpx;
+  margin-bottom: 10rpx;
+}
+
+.profile-info .level {
+  display: block;
+  height: 30rpx;
+  line-height: 30rpx;
+  margin-bottom: 10rpx;
+  color: #7f7f7f;
+  font-size: 30rpx;
+}
+
+.user-menu {
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  background: #fff;
+}
+
+.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-menu .item .a {
   display: flex;
   width: 100%;
   height: 100%;
@@ -76,82 +78,100 @@ page{
 }
 
 .user-menu .item.no-border {
-    border-right: 0;
+  border-right: 0;
 }
 
 .user-menu .item.item-bottom {
-    border-bottom: none;
+  border-bottom: none;
 }
 
-.user-menu .icon{
-    margin: 0 auto;
-    display: block;
-    height: 52.803rpx;
-    width: 52.803rpx;
-    margin-bottom: 16rpx;
+.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.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-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-menu .icon.collect{
-    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-menu .icon.phone {
+  display: block;
+  height: 55rpx;
+  width: 55rpx;
+  background-size: 52.803rpx;
 }
 
-.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-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-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;
+.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;
 }
 
-.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;
+.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;
 }
 
-.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-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-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.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-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-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-menu .txt {
+  display: block;
+  height: 24rpx;
+  width: 100%;
+  font-size: 24rpx;
+  color: #333;
+}
 
-.user-menu .txt{
-    display: block;
-    height: 24rpx;
-    width: 100%;
-    font-size: 24rpx;
-    color:#333;
+.logout {
+  margin-top: 50rpx;
+  height: 101rpx;
+  width: 100%;
+  line-height: 101rpx;
+  text-align: center;
+  background: #fff;
+  color: #333;
+  font-size: 30rpx;
 }
 
-.logout{
-    margin-top: 50rpx;
-    height: 101rpx;
-    width: 100%;
-    line-height: 101rpx;
-    text-align: center;
-    background: #fff;
-    color: #333;
-    font-size: 30rpx;
+.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;
 }