用户管理，角色管理

src/config/index.config.js

@@ -2,8 +2,8 @@ const CONFIG = {
     //开发环境配置
     development: {
         assetsPath: '/static', // 静态资源路径
-        // baseUrl: 'http://tyou.xiudo.cn/merch',  // 后台接口请求地址
-        baseUrl: 'http://192.168.100.135:83/merch',  // 后台接口请求地址
+        baseUrl: 'http://tyou.xiudo.cn/merch',  // 后台接口请求地址
+        // baseUrl: 'http://192.168.100.135:83/merch',  // 后台接口请求地址
         hostUrl: 'http://localhost:8080',        // H5地址(前端运行地址)
         websocketUrl: '',        // websocket服务端地址
         weixinAppId: '', // 微信公众号appid

src/pages.json

@@ -32,6 +32,22 @@
       }
     },
     {
+      "path":"pages/index/userinfo/rolemenage",
+      "style":{
+        "navigationBarTitleText": "角色管理",
+        "navigationBarBackgroundColor":"#ffffff",
+        "navigationBarTextStyle": "black"
+      }
+    },
+    {
+      "path":"pages/index/userinfo/usermenage",
+      "style":{
+        "navigationBarTitleText": "用户管理",
+        "navigationBarBackgroundColor":"#ffffff",
+        "navigationBarTextStyle": "black"
+      }
+    },
+    {
       "path":"pages/index/setting/changepassword",
       "style":{
         "navigationBarTitleText": "修改密码",

src/pages/index/setting/setting.vue

@@ -15,6 +15,18 @@
 					<image src="../../../static/images/moreicon.png" class="more"></image>
 				</view>
 			</view>
+			<view class="item-warp rolemenage">
+				<view class="item cellme" @tap="topage('/pages/index/userinfo/rolemenage')">
+					<text class="name">角色管理</text>
+					<image src="../../../static/images/moreicon.png" class="more"></image>
+				</view>
+			</view>
+			<view class="item-warp usermenage">
+				<view class="item cellme" @tap="topage('/pages/index/userinfo/usermenage')">
+					<text class="name">用户管理</text>
+					<image src="../../../static/images/moreicon.png" class="more"></image>
+				</view>
+			</view>
 			<view class="item-warp">
 				<view class="item" @tap="topage('/pages/index/setting/notice')">
 					<text class="name">公告管理</text>
@@ -90,6 +102,15 @@ export default {
 				}
 			}
 		}
+		.rolemenage {
+			margin-top: 25upx;
+			.cellme{
+				border-bottom: 1px solid #e7e7e7;
+			}
+		}
+		.usermenage {
+			margin-top: 0;
+		}
 		.cellme-warp {
 			margin-top: 0;
 			.cellme {

src/pages/index/userinfo/rolemenage.vue

@@ -0,0 +1,103 @@
+<!-- 角色管理 -->
+<template>
+  <view class="rolemenage">
+    <view class="content">
+      <view class="item">
+        <view class="top">
+          <view class="expression">
+            <text class="title">标识:</text><text class="msg">admin</text>
+          </view>
+          <view class="expression name">
+            <text class="title">名称:</text><text class="msg">超级管理员</text>
+          </view>
+        </view>
+        <view class="bottom">
+          <view class="btns">
+            <view class="btn edit">编辑</view>
+            <view class="btn dele">删除</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+
+export default {
+  name: 'rolemenage',
+  components: {},
+  data () {
+    //这里存放数据
+    return {
+
+    };
+  },
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {
+
+  },
+}
+</script>
+<style lang='scss' scoped>
+.rolemenage {
+  padding: 24upx 32upx 0;
+  .content{
+    background-color: #f1f1f1;
+    .item{
+      padding: 24upx 24upx 0;
+      background-color: #fff;
+      border-radius: 8upx;
+      .top{
+        border-bottom: 1px solid #e7e7e7;
+        padding: 15upx 9upx 30upx;
+        .expression {
+          .title{
+            color: #7a7c7c;
+          }
+          .msg {
+            margin-left: 15upx;
+            color: #202020;
+          }
+        }
+        .name {
+          margin-top: 24upx;
+        }
+      }
+      .bottom{
+        padding: 17upx 0;
+        .btns{
+          display: flex;
+          justify-content : flex-end;
+          .btn {
+            width: 158upx;
+            height: 58upx;
+            border-radius: 6upx;
+            font-size: 30upx;
+            color: #7a7c7c;
+            border: 1px solid #e7e7e7;
+            text-align: center;
+            line-height: 58upx;
+          }
+          .dele {
+            margin-left:23upx;
+            background-color: #ff6a5e;
+            color: #fff;
+            border: none;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/index/userinfo/usermenage.vue

@@ -0,0 +1,135 @@
+<!-- 用户管理 -->
+<template>
+  <view class="usermenage">
+    
+    <view class="uuserheader">
+
+    </view>
+
+    <view class="content">
+      <view class="item">
+        <view class="top">
+          <view class="expression">
+            <text class="title">账号</text>:<text class="msg">admin</text>
+          </view>
+          <view class="expression">
+            <text class="title">实际姓名</text>:<text class="msg">admin</text>
+          </view>
+          <view class="expression">
+            <text class="title">手机</text>:<text class="msg">admin</text>
+          </view>
+          <view class="expression">
+            <text class="title">状态</text>:<text class="msg status">启用</text>
+          </view>
+        </view>
+        <view class="bottom">
+          <view class="btns">
+            <view class="btn more">
+              <view class="txt" @tap="showMore">更多</view>
+              <view class="bar" v-if="ishow">
+                ishow
+              </view>
+            </view>
+            <view class="btn edit">编辑</view>
+            <view class="btn change">修改密码</view>
+            <view class="btn reds">重置密码</view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+  </view>
+</template>
+
+<script>
+
+export default {
+  name: 'rolemenage',
+  components: {},
+  data () {
+    //这里存放数据
+    return {
+      ishow: false
+    };
+  },
+  //方法集合
+  methods: {
+    showMore () {
+      this.ishow = !this.ishow
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+.usermenage {
+  padding: 24upx 32upx 0;
+  .content {
+    background-color: #f1f1f1;
+    .item {
+      padding: 24upx 24upx 0;
+      background-color: #fff;
+      border-radius: 8upx;
+      .top {
+        border-bottom: 1px solid #e7e7e7;
+        padding: 15upx 9upx 30upx;
+        .expression {
+          margin-top: 11upx;
+          display: flex;
+          .title {
+            display: inline-block;
+            width: 120upx;
+            height: 32upx;
+            color: #7a7c7c;
+            text-align: justify;
+            &::after{
+              width: 100%;
+              display: inline-block;
+              content: '';
+            }
+          }
+          .msg {
+            margin-left: 15upx;
+            color: #202020;
+          }
+          .status {
+            color: #06d161;
+          }
+        }
+      }
+      .bottom {
+        padding: 17upx 0;
+        .btns {
+          display: flex;
+          // justify-content: flex-end;
+          .btn {
+            width: 158upx;
+            height: 58upx;
+            border-radius: 6upx;
+            font-size: 30upx;
+            color: #7a7c7c;
+            border: 1px solid #e7e7e7;
+            text-align: center;
+            line-height: 58upx;
+            margin-left: 24upx;
+          }
+          .more {
+            width: auto;
+            border: none;
+            margin-left: 0;
+            display: flex;
+            align-items: center;
+          }
+          .edit {
+            margin-left: 40upx;
+          }
+          .reds {
+            background-color: #ff6a5e;
+            color: #fff;
+            border: none;
+          }
+        }
+      }
+    }
+  }
+}
+</style>