TmOct5/barter-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

新增员工管理等

Browse Source
This commit is contained in:
唐明明
2021-09-01 10:42:21 +08:00
parent 248992dac2
commit 8a574d5e36
36 changed files with 7931 additions and 773 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
pages/employees/add.vue Normal file
View File

@@ -0,0 +1,193 @@
<template>
<view class="content">
<!-- 基础信息 -->
<view class="info-card">
<view class="cover">
<view class="cover-add vertical">
<image src="@/static/icons/add-icon.png" mode="widthFix"></image>
<view>员工寸照</view>
</view>
<!-- <image src="@/static/dev/good_cover_00.jpg" mode="aspectFill"></image> -->
</view>
<view class="info-text">
<view class="info-inputs">
<input type="text" v-model="name" placeholder="姓名"/>
</view>
<view class="info-inputs">
<input type="number" v-model="phone" placeholder="手机号码"/>
</view>
<view class="info-inputs">
<input type="text" v-model="job" placeholder="职业"/>
</view>
<view class="info-inputs">
<picker :range="section" range-key="name" @change="pickerChange">
<view class="picker-text">
{{section[sectionIndex].name}}
<uni-icons class="icon" type="arrowdown" color="#555"></uni-icons>
</view>
</picker>
</view>
</view>
</view>
<!-- 权限设置 -->
<view class="title">权限设置</view>
<view class="jurisdiction">
<view class="item">
<label>
<view class="item-title">运营者权限</view>
<view class="item-info">管理、推广、设置等模块权限，可使用体验版小程序</view>
<checkbox class="item-checkbox" color="#c82626" />
</label>
</view>
<view class="item">
<label>
<view class="item-title">开发者权限</view>
<view class="item-info">开发模块权限，可使用体验版小程序、开发者工具（IDE）</view>
<checkbox class="item-checkbox" color="#c82626" />
</label>
</view>
<view class="item">
<label>
<view class="item-title">数据分析者（基础分析）</view>
<view class="item-info">统计模块权限，可使用体验版小程序</view>
<checkbox class="item-checkbox" color="#c82626" />
</label>
</view>
</view>
<!-- 按钮 -->
<view class="add-btns">
<button size="default">确认添加</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
section : [
{name: '技术部', id: 0},
{name: '市场部', id: 1},
{name: '南岗店', id: 2}
],
sectionIndex: 0,
name : '',
phone : '',
job : ''
};
},
methods:{
// 选择部门
pickerChange(e){
this.sectionIndex = e.detail.value
}
}
}
</script>
<style lang="scss" scoped>
.content{
min-height: 100vh;
@extend .ios-bottom;
.title{
padding: ($padding/2) $padding;
color: $text-gray;
}
.jurisdiction{
background: white;
.item{
position: relative;
padding: $padding 150rpx $padding $padding;
&::after{
position: absolute;
left: $padding;
right: 0;
bottom: 0;
height: 1rpx;
content: " ";
background: $border-color;
}
&:last-child::after{
display: none;
}
.item-checkbox{
position: absolute;
right: $padding;
top: 50%;
height: 40rpx;
width: 40rpx;
margin-top: -27rpx;
}
.item-title{
font-size: $title-size;
padding-bottom: $margin/3;
}
.item-info{
font-size: $title-size-m;
color: $text-gray;
}
}
}
// 基础信息
.info-card{
background: white;
padding: $padding;
position: relative;
min-height: 238rpx;
.cover{
position: absolute;
top: $padding;
left: $padding;
background: #f8f8f8;
width: 229rpx;
height: 320rpx;
.cover-add{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
image{
width: 128rpx;
}
color: $text-gray-m;
font-size: $title-size-m;
}
}
.info-text{
padding-left: $padding + 229;
.info-inputs{
height: 80rpx;
line-height: 80rpx;
border-bottom: solid 1rpx $border-color;
input{
height: 80rpx;
}
.picker-text{
position: relative;
padding-right: 80rpx;
.icon{
position: absolute;
right: 0;
top: 0;
}
}
}
}
}
// 添加按钮
.add-btns{
padding: $padding;
button[size='default']{
height: 90rpx;
line-height: 90rpx;
padding: 0;
margin: 0;
background: $text-price;
font-size: $title-size;
font-weight: bold;
color: white;
border-radius: 0;
}
}
}
</style>