团队管理列表

pages/teams/index.js

@@ -0,0 +1,84 @@
+// pages/teams/index.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        butText: "账号", //按钮类型
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+    /* 新建账号/角色 */
+    newItem() {
+        if (this.data.butText == '账号') {
+            wx.navigateTo({
+                url: '/pages/teams/addUsers'
+            })
+        } else {
+            wx.navigateTo({
+                url: '/pages/teams/addRole'
+            })
+        }
+    },
+    /* tab切换 */
+    tabChange(e) {
+        this.setData({
+            butText: e.detail.title.slice(0, 2)
+        })
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

pages/teams/index.json

@@ -0,0 +1,4 @@
+{
+    "navigationBarTitleText": "团队管理",
+    "usingComponents": {}
+}

pages/teams/index.scss

@@ -0,0 +1,134 @@
+@import "../../components/My_card/index.scss";
+
+
+.user-item {
+    display: flex;
+    padding: 20rpx 30rpx;
+
+    .user-img {
+        display: flex;
+        align-items: center;
+        height: 130rpx;
+    }
+
+    .details {
+        width: 507rpx;
+        height: 130rpx;
+        margin-left: 30rpx;
+
+        .user-name {
+            display: flex;
+            height: 42rpx !important;
+            font-size: 30rpx;
+            font-family: PingFang SC-Bold, PingFang SC;
+            font-weight: bold;
+            color: #333333;
+
+            .line-1 {
+                max-width: 250rpx;
+            }
+
+            .position {
+                font-size: 24rpx;
+                font-family: PingFang SC-Bold, PingFang SC;
+                font-weight: bold;
+                color: #333333;
+                margin-top: 6rpx;
+                margin-left: 30rpx;
+            }
+
+            .icon {
+                flex: 1;
+
+                .iconfont {
+                    float: right;
+                    margin-top: 4rpx;
+                }
+            }
+
+        }
+
+        .base-msg {
+            margin-top: 10rpx;
+            height: 34rpx;
+            line-height: 34rpx;
+            font-size: 24rpx;
+            font-family: PingFang SC-Regular, PingFang SC;
+            color: #666666;
+
+            .iconfont {
+                margin-left: 60rpx;
+                color: var(--assist);
+                font-size: 26rpx;
+            }
+        }
+    }
+}
+
+/* 角色 */
+.role-item {
+    padding: 20rpx 30rpx;
+    display: flex;
+    justify-content: space-between;
+
+    .role-l {
+        height: 86rpx;
+        width: 580rpx;
+
+        .first-line {
+            height: 42rpx;
+
+            .label {
+                display: inline-block;
+                max-width: 250rpx;
+                font-size: 30rpx;
+                font-family: PingFang SC-Bold, PingFang SC;
+                font-weight: bold;
+                color: #333333;
+            }
+
+            .role {
+                display: inline-block;
+                max-width: 250rpx;
+                font-size: 24rpx;
+                font-family: PingFang SC-Regular, PingFang SC;
+                color: #333333;
+                margin-left: 20rpx;
+            }
+        }
+
+        .creator {
+            font-size: 24rpx;
+            font-family: PingFang SC-Regular, PingFang SC;
+            color: #666666;
+            margin-top: 10rpx;
+        }
+    }
+
+    .role-r {
+        display: flex;
+        align-items: center;
+        height: 86rpx;
+        width: 30rpx;
+
+        text {
+            font-size: 28rpx;
+        }
+    }
+}
+
+/* 吸底 */
+.footer {
+    position: fixed;
+    width: 100vw;
+    text-align: center;
+    padding: 20rpx 0;
+    background-color: #ffffff;
+    bottom: 0;
+
+    .add-but {
+        width: 500rpx;
+        height: 90rpx;
+        border-radius: 45rpx;
+    }
+}

pages/teams/index.wxml

@@ -0,0 +1,38 @@
+<van-tabs swipeable sticky title-active-color='var(--assist)' color='var(--assist)' bind:change="tabChange">
+    <van-tab title="账号列表">
+        <navigator url="#" class="my-card user-item" wx:for="{{10}}">
+            <view class="user-img">
+                <van-image width="96rpx" height="96rpx" fit='cover' radius='48rpx' lazy-load src="https://img.yzcdn.cn/vant/cat.jpeg" />
+            </view>
+            <view class="details">
+                <view class="user-name">
+                    <view class="line-1">用户名用户用户名用户用户名用户用户名用户</view>
+                    <view class="position">职位职位职位</view>
+                    <view class="icon">
+                        <text class="iconfont icon-a-wodetiaozhuan" />
+                    </view>
+                </view>
+                <view class="base-msg line-1">所属门店：建陶店</view>
+                <view class="base-msg">账号ID：123456<text class="iconfont icon-a-wodemendianxinxidianhua" />18912345698</view>
+            </view>
+        </navigator>
+    </van-tab>
+    <van-tab title="角色列表">
+        <navigator url="#" class="my-card role-item" wx:for="{{10}}">
+            <view class="role-l">
+                <view class="first-line">
+                    <text class="label line-1">角色</text>
+                    <text class="role line-1">员工</text>
+                </view>
+                <view class="creator line-1">创建人：张三丰</view>
+            </view>
+            <view class="role-r">
+                <text class="iconfont icon-a-wodetiaozhuan" />
+            </view>
+        </navigator>
+    </van-tab>
+</van-tabs>
+<view style="height: 100rpx;" />
+<view class="footer">
+    <van-button custom-class='add-but' color="var(--assist)" bindtap="newItem">新建{{butText}}</van-button>
+</view>