Merge pull request #31 from usgeek/master

小程序前端界面调整及部分功能实现，java后端添加阿里云对象存储

litemall-os-api/pom.xml

@@ -28,6 +28,11 @@
             <version>5.4.4</version>
         </dependency>
 
+        <dependency>
+            <groupId>com.aliyun.oss</groupId>
+            <artifactId>aliyun-sdk-oss</artifactId>
+            <version>2.5.0</version>
+        </dependency>
 
     </dependencies>
 

litemall-os-api/src/main/java/org/linlinjava/litemall/os/service/AliyunOsService.java

@@ -0,0 +1,111 @@
+package org.linlinjava.litemall.os.service;
+
+import com.aliyun.oss.OSSClient;
+import com.aliyun.oss.model.ObjectMetadata;
+import com.aliyun.oss.model.PutObjectRequest;
+import com.aliyun.oss.model.PutObjectResult;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.context.annotation.PropertySource;
+import org.springframework.core.io.Resource;
+import org.springframework.core.io.UrlResource;
+import org.springframework.stereotype.Service;
+import org.springframework.web.multipart.MultipartFile;
+
+import java.net.MalformedURLException;
+import java.net.URL;
+import java.nio.file.Path;
+import java.util.stream.Stream;
+
+/**
+ * @author Yogeek
+ * @date 2018/7/16 16:10
+ * @decrpt 阿里云对象存储服务
+ */
+@PropertySource(value = "classpath:aliyun.properties")
+@Service("aos")
+public class AliyunOsService implements ObjectStorageService {
+
+    @Value("${aliyun.os.ENDPOINT}")
+    private  String ENDPOINT;
+    @Value("${aliyun.os.ACCESS_KEY_ID}")
+    private  String ACCESS_KEY_ID;
+    @Value("${aliyun.os.ACCESS_KEY_SECRET}")
+    private  String ACCESS_KEY_SECRET;
+    @Value("${aliyun.os.BUCKET_NAME}")
+    private  String BUCKET_NAME;
+//    @Value("${aliyun.os.FOLDER}")
+//    private  String FOLDER;
+
+    /**
+     * 获取阿里云OSS客户端对象
+     *
+     * @return ossClient
+     */
+    private OSSClient getOSSClient(){
+        return new OSSClient(ENDPOINT,ACCESS_KEY_ID, ACCESS_KEY_SECRET);
+    }
+
+    private String getBaseUrl() {
+        return "https://" + BUCKET_NAME + "." +  ENDPOINT + "/" ;
+    }
+
+    /**
+     * 阿里云OSS对象存储简单上传实现
+     */
+    @Override
+    public void store(MultipartFile file, String keyName) {
+        try {
+            // 简单文件上传, 最大支持 5 GB, 适用于小文件上传, 建议 20M以下的文件使用该接口
+            ObjectMetadata objectMetadata = new ObjectMetadata();
+            objectMetadata.setContentLength(file.getSize());
+            objectMetadata.setContentType(file.getContentType());
+            // 对象键（Key）是对象在存储桶中的唯一标识。
+            PutObjectRequest putObjectRequest = new PutObjectRequest(BUCKET_NAME, keyName, file.getInputStream(), objectMetadata);
+            PutObjectResult putObjectResult = getOSSClient().putObject(putObjectRequest);
+        } catch (Exception ex) {
+            ex.printStackTrace();
+        }
+
+    }
+
+    @Override
+    public Stream<Path> loadAll() {
+        return null;
+    }
+
+    @Override
+    public Path load(String keyName) {
+        return null;
+    }
+
+    @Override
+    public Resource loadAsResource(String keyName) {
+        try {
+            URL url = new URL(getBaseUrl() + keyName);
+            Resource resource = new UrlResource(url);
+            if (resource.exists() || resource.isReadable()) {
+                return resource;
+            } else {
+                return null;
+            }
+        } catch (MalformedURLException e) {
+            e.printStackTrace();
+            return null;
+        }
+    }
+
+    @Override
+    public void delete(String keyName) {
+        try {
+            getOSSClient().deleteObject(BUCKET_NAME, keyName);
+        }catch (Exception e){
+            e.printStackTrace();
+        }
+
+    }
+
+    @Override
+    public String generateUrl(String keyName) {
+        return getBaseUrl() + keyName;
+    }
+}

litemall-os-api/src/main/resources/aliyun.properties

@@ -0,0 +1,6 @@
+# 阿里云对象存储配置信息
+aliyun.os.ENDPOINT=oss-cn-shenzhen.aliyuncs.com
+aliyun.os.ACCESS_KEY_ID=
+aliyun.os.ACCESS_KEY_SECRET=
+aliyun.os.BUCKET_NAME=
+#aliyun.os.FOLDER="xxxxxx"

litemall-wx/app.json

@@ -31,43 +31,45 @@
     "pages/shopping/checkout/checkout",
     "pages/shopping/address/address",
     "pages/shopping/addressAdd/addressAdd",
-    "pages/goods/goods"
+    "pages/goods/goods",
+	"pages/about/index"
   ],
   "window": {
+    "navigationBarTitleText": "litemall小程序商城",
+    "navigationBarTextStyle": "#FFFFFF",
+    "navigationBarBackgroundColor": "#696969",
+    "backgroundColor": "#FFFFFF",
     "backgroundTextStyle": "dark",
-    "navigationBarBackgroundColor": "#fff",
-    "navigationBarTitleText": "仿网易严选",
-    "navigationBarTextStyle": "black",
-    "enablePullDownRefresh": true
+    "enablePullDownRefresh": false
   },
   "tabBar": {
     "backgroundColor": "#fafafa",
     "borderStyle": "white",
-    "selectedColor": "#b4282d",
+    "selectedColor": "#AB956D",
     "color": "#666",
     "list": [
       {
         "pagePath": "pages/index/index",
         "iconPath": "static/images/ic_menu_choice_nor.png",
-        "selectedIconPath": "static/images/ic_menu_choice_pressed.png",
+        "selectedIconPath": "static/images/home@selected.png",
         "text": "首页"
       },
       {
         "pagePath": "pages/catalog/catalog",
         "iconPath": "static/images/ic_menu_sort_nor.png",
-        "selectedIconPath": "static/images/ic_menu_sort_pressed.png",
+        "selectedIconPath": "static/images/category@selected.png",
         "text": "分类"
       },
       {
         "pagePath": "pages/cart/cart",
         "iconPath": "static/images/ic_menu_shoping_nor.png",
-        "selectedIconPath": "static/images/ic_menu_shoping_pressed.png",
+        "selectedIconPath": "static/images/cart@selected.png",
         "text": "购物车"
       },
       {
         "pagePath": "pages/ucenter/index/index",
         "iconPath": "static/images/ic_menu_me_nor.png",
-        "selectedIconPath": "static/images/ic_menu_me_pressed.png",
+        "selectedIconPath": "static/images/my@selected.png",
         "text": "个人"
       }
     ]

litemall-wx/pages/about/index.js

@@ -0,0 +1,49 @@
+// index.js
+var app = getApp()
+var util = require("../../utils/util.js");
+
+
+var api = require("../../config/api.js");
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    load_statue: true,
+    shopInfo: {
+      name: 'litemall',
+      address: 'https://github.com/linlinjava/litemall',
+      latitude: 22.60,
+      longitude: 116.87,
+      linkPhone: '0755-xxxx-xxxx',
+      qqNumber: '738696120'
+    },
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    
+  },
+
+  showLocation: function (e) {
+    var that = this
+    wx.openLocation({
+      latitude: that.data.shopInfo.latitude,
+      longitude: that.data.shopInfo.longitude,
+      name: that.data.shopInfo.name,
+      address: that.data.shopInfo.address,
+    })
+  },
+  callPhone: function (e) {
+    var that = this
+    wx.makePhoneCall({
+      phoneNumber: that.data.shopInfo.linkPhone,
+    })
+  },
+  reLoad: function (e) {
+    this.loadShopInfo();
+  }
+})

litemall-wx/pages/about/index.json

@@ -0,0 +1 @@
+{}

litemall-wx/pages/about/index.wxml

@@ -0,0 +1,43 @@
+<view class="container">
+
+  <view class="about-item">
+
+    <view class="item-left">
+      <label>项目名称: </label>
+       <text>{{shopInfo.name}}</text> 
+    </view>
+
+  </view>
+
+  <view class="about-item">
+    <view class="item-left">
+      <label>项目地址: </label>
+       <text>{{shopInfo.address}}</text> 
+    </view>
+
+    <view class="item-right" bindtap="showLocation">
+      <image src="/static/images/ico-addr.png" class="right-icon"></image>
+    </view>
+  </view>
+
+  <view class="about-item">
+    <view class="item-left">
+      <label>电话号码:    </label>
+       <text>{{shopInfo.linkPhone}}</text> 
+    </view>
+    <view class="item-right" bindtap="callPhone">
+      <image src="/static/images/telephone.png" class="right-icon"></image>
+    </view>
+  </view>
+
+  <view class="about-item">
+    <view class="item-left">
+      <label>litemall交流群: </label>
+       <text>{{shopInfo.qqNumber}}</text> 
+    </view>
+    <view class="item-right">
+      <image src="/static/images/mobile.png" class="right-icon"></image>
+    </view>
+  </view>
+
+</view>

litemall-wx/pages/about/index.wxss

@@ -0,0 +1,44 @@
+/* index.wxss */
+
+page{
+  height: 100%;
+  background-color: #F2f2f2;
+}
+.page-view{
+  height: 100%;
+}
+.banner-image{
+  width: 100%;
+  height: 350rpx;
+  background: #ee1;
+  margin-bottom: 30rpx;
+  border-bottom: solid #f2f2f2 0.5dp;
+}
+
+.about-item{
+  background: white;
+  border-top: solid #f2f2f2 0.5rpx;
+  border-bottom: solid #f2f2f2 0.5rpx;
+  width: 100%;
+  height: 100rpx;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.item-left{
+  font-size: 32rpx;
+  margin-left: 15rpx;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.item-right{
+   
+  margin-right: 15rpx;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.right-icon{
+  width: 40rpx;
+   height: 40rpx;
+}

litemall-wx/pages/goods/goods.js

@@ -42,7 +42,7 @@ Page({
             // 这里检测一下
             let _productPrice = res.data.productList[0].price;
             let _goodsPrice = res.data.info.retailPrice;
-            if (_productPrice != _goodsPrice){
+            if (_productPrice != _goodsPrice) {
               console.error('商品数量价格和货品不一致');
             }
 
@@ -206,21 +206,21 @@ Page({
       }
 
       let checkedProduct = checkedProductArray[0];
-      if (checkedProduct.number > 0){
+      if (checkedProduct.number > 0) {
         this.setData({
           checkedSpecPrice: checkedProduct.price,
           soldout: false
         });
       }
-      else{
+      else {
         this.setData({
           checkedSpecPrice: this.data.goods.retailPrice,
           soldout: true
-        }); 
+        });
       }
-      
+
     }
-    else{
+    else {
       this.setData({
         checkedSpecText: '规格数量选择',
         checkedSpecPrice: this.data.goods.retailPrice,
@@ -276,28 +276,33 @@ Page({
       });
     }
   },
-  closeAttrOrCollect: function () {
+  closeAttr: function () {
+    this.setData({
+      openAttr: false,
+    });
+  },
+  addCollectOrNot: function () {
     let that = this;
-    if (this.data.openAttr) {
-      this.setData({
-        openAttr: false,
-      });
-      if (that.data.userHasCollect == 1) {
-        that.setData({
-          collectBackImage: that.data.hasCollectImage
-        });
-      } else {
-        that.setData({
-          collectBackImage: that.data.noCollectImage
-        });
-      }
-    } else {
+    // if (this.data.openAttr) {
+    //   this.setData({
+    //     openAttr: false,
+    //   });
+    //   if (that.data.userHasCollect == 1) {
+    //     that.setData({
+    //       collectBackImage: that.data.hasCollectImage
+    //     });
+    //   } else {
+    //     that.setData({
+    //       collectBackImage: that.data.noCollectImage
+    //     });
+    //   }
+    // } else {
       //添加或是取消收藏
       util.request(api.CollectAddOrDelete, { type: 0, valueId: this.data.id }, "POST")
         .then(function (res) {
           let _res = res;
           if (_res.errno == 0) {
-            if ( _res.data.type == 'add') {
+            if (_res.data.type == 'add') {
               that.setData({
                 collectBackImage: that.data.hasCollectImage
               });
@@ -316,7 +321,6 @@ Page({
           }
 
         });
-    }
 
   },
   openCartPage: function () {
@@ -394,7 +398,7 @@ Page({
       //打开规格选择窗口
       this.setData({
         openAttr: !this.data.openAttr,
-        collectBackImage: '/static/images/detail_back.png'
+        // collectBackImage: '/static/images/detail_back.png'
       });
     } else {
 

litemall-wx/pages/goods/goods.wxml

@@ -1,112 +1,117 @@
-<scroll-view class="container" scroll-y="true">
-  <view wx:if="{{!openAttr}}">
-    <swiper class="goodsimgs" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
-      <swiper-item wx:for="{{goods.gallery}}" wx:key="*this">
-        <image src="{{item}}" background-size="cover"></image>
-      </swiper-item>
-    </swiper>
-    <view class="service-policy">
-      <view class="item">30天无忧退货</view>
-      <view class="item">48小时快速退款</view>
-      <view class="item">满88元免邮费</view>
-    </view>
-    <view class="goods-info">
-      <view class="c">
-        <text class="name">{{goods.name}}</text>
-        <text class="desc">{{goods.goodsBrief}}</text>
-        <text class="price">￥{{checkedSpecPrice}}</text>
-        <view class="brand" wx:if="{{brand.name}}">
-          <navigator url="/pages/brandDetail/brandDetail?id={{brand.id}}">
-            <text>{{brand.name}}</text>
-          </navigator>
-        </view>
+<view class="container">
+  <swiper class="goodsimgs" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
+    <swiper-item wx:for="{{goods.gallery}}" wx:key="*this">
+      <image src="{{item}}" background-size="cover"></image>
+    </swiper-item>
+  </swiper>
+  <view class="service-policy">
+    <view class="item">30天无忧退货</view>
+    <view class="item">48小时快速退款</view>
+    <view class="item">满88元免邮费</view>
+  </view>
+  <view class="goods-info">
+    <view class="c">
+      <text class="name">{{goods.name}}</text>
+      <text class="desc">{{goods.goodsBrief}}</text>
+      <text class="price">￥{{checkedSpecPrice}}</text>
+      <view class="brand" wx:if="{{brand.name}}">
+        <navigator url="../brandDetail/brandDetail?id={{brand.id}}">
+          <text>{{brand.name}}</text>
+        </navigator>
       </view>
     </view>
-    <view class="section-nav section-attr" bindtap="switchAttrPop">
-      <view class="t">{{checkedSpecText}}</view>
-      <image class="i" src="/static/images/address_right.png" background-size="cover"></image>
+  </view>
+  <view class="section-nav section-attr" bindtap="switchAttrPop">
+    <view class="t">{{checkedSpecText}}</view>
+    <image class="i" src="/static/images/address_right.png" background-size="cover"></image>
+  </view>
+  <view class="comments" wx:if="{{comment.count > 0}}">
+    <view class="h">
+      <navigator url="/pages/comment/comment?valueId={{goods.id}}&type=0">
+        <text class="t">评价({{comment.count > 999 ? '999+' : comment.count}})</text>
+        <text class="i">查看全部</text>
+      </navigator>
     </view>
-    <view class="comments" wx:if="{{comment.count > 0}}">
-      <view class="h">
-        <navigator url="/pages/comment/comment?valueId={{goods.id}}&type=0">
-          <text class="t">评价({{comment.count > 999 ? '999+' : comment.count}})</text>
-          <text class="i">查看全部</text>
-        </navigator>
-      </view>
-      <view class="b">
-        <view class="item" wx:for="{{comment.data}}" wx:key="id">
-          <view class="info">
-            <view class="user">
-              <image src="{{item.avatar}}"></image>
-              <text>{{item.nickname}}</text>
-            </view>
-            <view class="time">{{item.addTime}}</view>
-          </view>
-          <view class="content">
-            {{item.content}}
-          </view>
-          <view class="imgs" wx:if="{{item.picList.length > 0}}">
-            <image class="img"  wx:for="{{item.picList}}" wx:key="*this"  wx:for-item="iitem" src="{{iitem}}"></image>
+    <view class="b">
+      <view class="item" wx:for="{{comment.data}}" wx:key="id">
+        <view class="info">
+          <view class="user">
+            <image src="{{item.avatar}}"></image>
+            <text>{{item.nickname}}</text>
           </view>
+          <view class="time">{{item.addTime}}</view>
+        </view>
+        <view class="content">
+          {{item.content}}
+        </view>
+        <view class="imgs" wx:if="{{item.picList.length > 0}}">
+          <image class="img" wx:for="{{item.picList}}" wx:key="*this" wx:for-item="iitem" src="{{iitem}} "></image>
         </view>
+        <!-- <view class="spec">白色 2件</view> -->
       </view>
     </view>
-    <view class="goods-attr">
-      <view class="t">商品参数</view>
-      <view class="l">
-        <view class="item" wx:for="{{attribute}}" wx:key="item">
-          <text class="left">{{item.attribute}}</text>
-          <text class="right">{{item.value}}</text>
-        </view>
+  </view>
+  <view class="goods-attr">
+    <view class="t">商品参数</view>
+    <view class="l">
+      <view class="item" wx:for="{{attribute}}" wx:key="name">
+        <text class="left">{{item.attribute}}</text>
+        <text class="right">{{item.value}}</text>
       </view>
     </view>
+  </view>
 
-    <view class="detail">
-      <import src="/lib/wxParse/wxParse.wxml" />
-      <template is="wxParse" data="{{wxParseData:goodsDetail.nodes}}" />
-    </view>
+  <view class="detail">
+    <import src="/lib/wxParse/wxParse.wxml" />
+    <template is="wxParse" data="{{wxParseData:goodsDetail.nodes}}" />
+  </view>
 
-    <view class="common-problem">
-      <view class="h">
-        <view class="line"></view>
-        <text class="title">常见问题</text>
-      </view>
-      <view class="b">
-        <view class="item" wx:for="{{issueList}}" wx:key="id">
-          <view class="question-box">
-            <text class="spot"></text>
-            <text class="question">{{item.question}}</text>
-          </view>
-          <view class="answer">
-            {{item.answer}}
-          </view>
+
+  <view class="common-problem">
+    <view class="h">
+      <view class="line"></view>
+      <text class="title">常见问题</text>
+    </view>
+    <view class="b">
+      <view class="item" wx:for="{{issueList}}" wx:key="id">
+        <view class="question-box">
+          <text class="spot"></text>
+          <text class="question">{{item.question}}</text>
+        </view>
+        <view class="answer">
+          {{item.answer}}
         </view>
       </view>
     </view>
+  </view>
 
-    <view class="related-goods" wx:if="{{relatedGoods.length > 0}}">
-      <view class="h">
-        <view class="line"></view>
-        <text class="title">大家都在看</text>
-      </view>
-      <view class="b">
-        <view class="item" wx:for="{{relatedGoods}}" wx:key="id">
-          <navigator url="/pages/goods/goods?id={{item.id}}">
-            <image class="img" src="{{item.picUrl}}" background-size="cover"></image>
-            <text class="name">{{item.name}}</text>
-            <text class="price">￥{{item.retailPrice}}</text>
-          </navigator>
-        </view>
+  <view class="related-goods" wx:if="{{relatedGoods.length > 0}}">
+    <view class="h">
+      <view class="line"></view>
+      <text class="title">大家都在看</text>
+    </view>
+    <view class="b">
+      <view class="item" wx:for="{{relatedGoods}}" wx:key="id">
+        <navigator url="/pages/goods/goods?id={{item.id}}">
+          <image class="img" src="{{item.picUrl}}" background-size="cover"></image>
+          <text class="name">{{item.name}}</text>
+          <text class="price">￥{{item.retailPrice}}</text>
+        </navigator>
       </view>
     </view>
   </view>
-  <view wx:if="{{openAttr}}" class="attr-pop">
+</view>
+<view class="attr-pop-box" hidden="{{!openAttr}}">
+  <view class="attr-pop">
+    <view class="close" bindtap="closeAttr">
+      <image class="icon" src="/static/images/icon_close.png"></image>
+    </view>
     <view class="img-info">
       <image class="img" src="{{goods.picUrl}}"></image>
       <view class="info">
         <view class="c">
           <view class="p">价格：￥{{checkedSpecPrice}}</view>
-          <view class="a">{{tmpSpecText}}</view>
+          <view class="a" wx:if="{{productList.length>0}}">已选择：{{checkedSpecText}}</view>
         </view>
       </view>
     </view>
@@ -114,9 +119,7 @@
       <view class="spec-item" wx:for="{{specificationList}}" wx:key="name">
         <view class="name">{{item.name}}</view>
         <view class="values">
-          <view class="value {{vitem.checked ? 'selected' : ''}}" bindtap="clickSkuValue" wx:for="{{item.valueList}}" wx:for-item="vitem" wx:key="id" data-value-id="{{vitem.id}}" data-name="{{vitem.specification}}">
-          {{vitem.value}}
-          </view>
+          <view class="value {{vitem.checked ? 'selected' : ''}}" bindtap="clickSkuValue" wx:for="{{item.valueList}}" wx:for-item="vitem" wx:key="{{vitem.id}}" data-value-id="{{vitem.id}}" data-name-id="{{vitem.specification}}">{{vitem.value}}</view>
         </view>
       </view>
 
@@ -130,9 +133,13 @@
       </view>
     </view>
   </view>
-</scroll-view>
+</view>
+<view class="contact">
+  <contact-button style="opacity:0;position:absolute;" type="default-dark" session-from="weapp" size="27">
+  </contact-button>
+</view>
 <view class="bottom-btn">
-  <view class="l l-collect {{ openAttr ? 'back' : ''}}" bindtap="closeAttrOrCollect">
+  <view class="l l-collect" bindtap="addCollectOrNot">
     <image class="icon" src="{{ collectBackImage }}"></image>
   </view>
   <view class="l l-cart">

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