|
|
@@ -1,9 +1,8 @@
|
|
|
<template>
|
|
|
<view class="page-wrap">
|
|
|
<view class="tabs-panel">
|
|
|
- <view :class="{item:true, active: tabActive === item.value}" v-for="(item,index) in tabList" :key="index"
|
|
|
- @click="tabActive =item.value">
|
|
|
- {{item.label}}
|
|
|
+ <view :class="{ item: true, active: tabActive === item.value }" v-for="(item, index) in tabList" :key="index" @click="tabActive = item.value">
|
|
|
+ {{ item.label }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 团队成员 -->
|
|
|
@@ -14,7 +13,7 @@
|
|
|
张无忌 18991397914
|
|
|
<text class="sub">总经办</text>
|
|
|
</view>
|
|
|
- <button class="btn">权限设置</button>
|
|
|
+ <button class="btn" @click="handleOpenAuthSetting">权限设置</button>
|
|
|
<button class="btn">删除</button>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
@@ -63,21 +62,21 @@
|
|
|
<view class="popup-form">
|
|
|
<view class="popup-form-item">
|
|
|
<view class="label">姓名</view>
|
|
|
- <input class="input" type="text" placeholder="请输入" maxlength="20"/>
|
|
|
+ <input class="input" type="text" placeholder="请输入" maxlength="20" />
|
|
|
</view>
|
|
|
<view class="popup-form-item">
|
|
|
<view class="label">手机号</view>
|
|
|
- <input class="input" type="text" placeholder="请输入" maxlength="11"/>
|
|
|
+ <input class="input" type="text" placeholder="请输入" maxlength="11" />
|
|
|
</view>
|
|
|
<view class="popup-form-item">
|
|
|
<view class="label">部门</view>
|
|
|
<picker class="picker" @change="bindPickerChange" :value="index" :range="array">
|
|
|
- <input class="input" type="text" placeholder="请选择" maxlength="11" :value="test" disabled/>
|
|
|
+ <input class="input" type="text" placeholder="请选择" maxlength="11" :value="test" disabled />
|
|
|
</picker>
|
|
|
</view>
|
|
|
<view class="popup-form-item">
|
|
|
<view class="label">职务</view>
|
|
|
- <input class="input" type="text" placeholder="请输入" maxlength="11"/>
|
|
|
+ <input class="input" type="text" placeholder="请输入" maxlength="11" />
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-popup-dialog>
|
|
|
@@ -88,7 +87,7 @@
|
|
|
<view class="popup-form">
|
|
|
<view class="popup-form-item">
|
|
|
<view class="label">部门名称</view>
|
|
|
- <input class="input" type="text" placeholder="请输入" maxlength="20"/>
|
|
|
+ <input class="input" type="text" placeholder="请输入" maxlength="20" />
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-popup-dialog>
|
|
|
@@ -97,212 +96,219 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- tabActive: 1,
|
|
|
- tabList: [{
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tabActive: 1,
|
|
|
+ tabList: [
|
|
|
+ {
|
|
|
label: '团队成员',
|
|
|
value: 1
|
|
|
- }, {
|
|
|
+ },
|
|
|
+ {
|
|
|
label: '部门管理',
|
|
|
value: 2
|
|
|
- }],
|
|
|
- array: ['总经办','财务部','行政部'],
|
|
|
- test: ''
|
|
|
- };
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ array: ['总经办', '财务部', '行政部'],
|
|
|
+ test: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleOpenAddMember() {
|
|
|
+ this.$refs.memberDialog.open();
|
|
|
+ },
|
|
|
+ handleOpenAddDepartment() {
|
|
|
+ this.$refs.departmentDialog.open();
|
|
|
+ },
|
|
|
+ bindPickerChange(e) {
|
|
|
+ this.test = this.array[e.detail.value];
|
|
|
},
|
|
|
- methods:{
|
|
|
- handleOpenAddMember(){
|
|
|
- this.$refs.memberDialog.open()
|
|
|
- },
|
|
|
- handleOpenAddDepartment(){
|
|
|
- this.$refs.departmentDialog.open()
|
|
|
- },
|
|
|
- bindPickerChange(e){
|
|
|
- this.test = this.array[e.detail.value]
|
|
|
- },
|
|
|
- dialogInputConfirm(){
|
|
|
-
|
|
|
- }
|
|
|
+ dialogInputConfirm() {},
|
|
|
+ //打开权限设置
|
|
|
+ handleOpenAuthSetting() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: 'authSetting'
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .page-wrap {
|
|
|
- padding-top: 82.42rpx;
|
|
|
- overflow: hidden;
|
|
|
- // .submit-btn{
|
|
|
- // width: 549.45rpx;
|
|
|
- // height: 75.55rpx;
|
|
|
- // background: #00BCD2;
|
|
|
- // font-size: 27.47rpx;
|
|
|
- // color: #fff;
|
|
|
- // border-radius: 8.24rpx;
|
|
|
- // margin: 54.95rpx auto;
|
|
|
- // }
|
|
|
- }
|
|
|
+.page-wrap {
|
|
|
+ padding-top: 82.42rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ // .submit-btn{
|
|
|
+ // width: 549.45rpx;
|
|
|
+ // height: 75.55rpx;
|
|
|
+ // background: #00BCD2;
|
|
|
+ // font-size: 27.47rpx;
|
|
|
+ // color: #fff;
|
|
|
+ // border-radius: 8.24rpx;
|
|
|
+ // margin: 54.95rpx auto;
|
|
|
+ // }
|
|
|
+}
|
|
|
+
|
|
|
+.tabs-panel {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 82.42rpx;
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ padding: 0 41.21rpx;
|
|
|
+ z-index: 1;
|
|
|
|
|
|
- .tabs-panel {
|
|
|
- position: fixed;
|
|
|
+ &::before,
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
left: 0;
|
|
|
- top: 0;
|
|
|
right: 0;
|
|
|
- height: 82.42rpx;
|
|
|
- background: #fff;
|
|
|
- display: flex;
|
|
|
- padding: 0 41.21rpx;
|
|
|
- z-index: 1;
|
|
|
-
|
|
|
- &::before,
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- height: 1rpx;
|
|
|
- background: #e0e0e0;
|
|
|
- }
|
|
|
+ height: 1rpx;
|
|
|
+ background: #e0e0e0;
|
|
|
+ }
|
|
|
|
|
|
- &::before {
|
|
|
- top: 0;
|
|
|
- }
|
|
|
+ &::before {
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
|
|
|
- &::after {
|
|
|
- bottom: 0;
|
|
|
- }
|
|
|
+ &::after {
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
|
|
|
- .item {
|
|
|
- padding: 0 9.62rpx;
|
|
|
- text-align: center;
|
|
|
- font-size: 27.47rpx;
|
|
|
- color: #999;
|
|
|
- line-height: 82.42rpx;
|
|
|
- position: relative;
|
|
|
+ .item {
|
|
|
+ padding: 0 9.62rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 27.47rpx;
|
|
|
+ color: #999;
|
|
|
+ line-height: 82.42rpx;
|
|
|
+ position: relative;
|
|
|
|
|
|
- &+.item {
|
|
|
- margin-left: 27.47rpx;
|
|
|
- }
|
|
|
+ & + .item {
|
|
|
+ margin-left: 27.47rpx;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .active {
|
|
|
- color: #00BCD2;
|
|
|
+ .active {
|
|
|
+ color: #00bcd2;
|
|
|
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: 0%;
|
|
|
- right: 0%;
|
|
|
- bottom: 0%;
|
|
|
- height: 5.49rpx;
|
|
|
- background: #00BCD2;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0%;
|
|
|
+ right: 0%;
|
|
|
+ bottom: 0%;
|
|
|
+ height: 5.49rpx;
|
|
|
+ background: #00bcd2;
|
|
|
+ z-index: 1;
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .list-panel {
|
|
|
- margin-top: 13.74rpx;
|
|
|
+.list-panel {
|
|
|
+ margin-top: 13.74rpx;
|
|
|
|
|
|
- .item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 16.48rpx 27.47rpx;
|
|
|
- min-height: 96.15rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- position: relative;
|
|
|
- background: #fff;
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16.48rpx 27.47rpx;
|
|
|
+ min-height: 96.15rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ background: #fff;
|
|
|
|
|
|
- &+.item::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: 0%;
|
|
|
- right: 0%;
|
|
|
- top: 0%;
|
|
|
- height: 1rpx;
|
|
|
- transform: scaleY(.5);
|
|
|
- background: #e0e0e0;
|
|
|
- }
|
|
|
+ & + .item::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0%;
|
|
|
+ right: 0%;
|
|
|
+ top: 0%;
|
|
|
+ height: 1rpx;
|
|
|
+ transform: scaleY(0.5);
|
|
|
+ background: #e0e0e0;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .avatar {
|
|
|
- width: 76.92rpx;
|
|
|
- height: 76.92rpx;
|
|
|
- }
|
|
|
+ .avatar {
|
|
|
+ width: 76.92rpx;
|
|
|
+ height: 76.92rpx;
|
|
|
+ }
|
|
|
|
|
|
- .text {
|
|
|
- flex: 1;
|
|
|
- font-size: 27.47rpx;
|
|
|
- color: #545E8F;
|
|
|
- margin-left: 13.74rpx;
|
|
|
- }
|
|
|
+ .text {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 27.47rpx;
|
|
|
+ color: #545e8f;
|
|
|
+ margin-left: 13.74rpx;
|
|
|
+ }
|
|
|
|
|
|
- .sub {
|
|
|
- display: block;
|
|
|
- font-size: 24.73rpx;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
+ .sub {
|
|
|
+ display: block;
|
|
|
+ font-size: 24.73rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
|
|
|
- .btn {
|
|
|
- background: none;
|
|
|
- border: none;
|
|
|
- font-size: 27.47rpx;
|
|
|
- color: #F97631;
|
|
|
- white-space: nowrap;
|
|
|
- padding: 0;
|
|
|
- margin-left: 13.74rpx;
|
|
|
+ .btn {
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ font-size: 27.47rpx;
|
|
|
+ color: #f97631;
|
|
|
+ white-space: nowrap;
|
|
|
+ padding: 0;
|
|
|
+ margin-left: 13.74rpx;
|
|
|
|
|
|
- &::after {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
- .add-btn{
|
|
|
- margin-top: 27.47rpx;
|
|
|
- font-size: 27.47rpx;
|
|
|
- color: #00BCD2;
|
|
|
- height: 82.42rpx;
|
|
|
- line-height: 82.42rpx;
|
|
|
- display: block;
|
|
|
- text-align: left;
|
|
|
- padding: 0 0 0 54.95rpx;
|
|
|
- background: #fff;
|
|
|
- border: none;
|
|
|
- border-radius: 13.74rpx;
|
|
|
- &::after {
|
|
|
- display: none;
|
|
|
- }
|
|
|
+ &::after {
|
|
|
+ display: none;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .popup-form{
|
|
|
- width: 100%;
|
|
|
+ .add-btn {
|
|
|
+ margin-top: 27.47rpx;
|
|
|
font-size: 27.47rpx;
|
|
|
- &-item{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 82.42rpx;
|
|
|
- position: relative;
|
|
|
- &+&::before{
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- height: 1rpx;
|
|
|
- background: #e0e0e0;
|
|
|
- }
|
|
|
- }
|
|
|
- .label{
|
|
|
- white-space: nowrap;
|
|
|
- margin-right: 13.74rpx;
|
|
|
- }
|
|
|
- .input{
|
|
|
- flex: 1;
|
|
|
- text-align: right;
|
|
|
+ color: #00bcd2;
|
|
|
+ height: 82.42rpx;
|
|
|
+ line-height: 82.42rpx;
|
|
|
+ display: block;
|
|
|
+ text-align: left;
|
|
|
+ padding: 0 0 0 54.95rpx;
|
|
|
+ background: #fff;
|
|
|
+ border: none;
|
|
|
+ border-radius: 13.74rpx;
|
|
|
+ &::after {
|
|
|
+ display: none;
|
|
|
}
|
|
|
- .picker{
|
|
|
- flex: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.popup-form {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 27.47rpx;
|
|
|
+ &-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 82.42rpx;
|
|
|
+ position: relative;
|
|
|
+ & + &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ height: 1rpx;
|
|
|
+ background: #e0e0e0;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+ .label {
|
|
|
+ white-space: nowrap;
|
|
|
+ margin-right: 13.74rpx;
|
|
|
+ }
|
|
|
+ .input {
|
|
|
+ flex: 1;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .picker {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
sinea17