115 lines
2.4 KiB
Vue
115 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<div class="scopedSelect">
|
||
|
|
<div class="item">
|
||
|
|
<div>添加人</div>
|
||
|
|
<div @click="selectUser">
|
||
|
|
<span>请选择</span>
|
||
|
|
<u-icon name="arrow-right" color="#CCD0D3"></u-icon>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<div>包含标签</div>
|
||
|
|
<div>
|
||
|
|
<span>请选择</span>
|
||
|
|
<u-icon name="arrow-right" color="#CCD0D3"></u-icon>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<div>剔除标签</div>
|
||
|
|
<div>
|
||
|
|
<span>请选择</span>
|
||
|
|
<u-icon name="arrow-right" color="#CCD0D3"></u-icon>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="item">
|
||
|
|
<div>添加时间</div>
|
||
|
|
<div @click="showCalendar = true">
|
||
|
|
<span v-if="!startTime.length && !endTime.length">请选择</span>
|
||
|
|
<span v-if="startTime.length && endTime.length">{{ startTime }} - {{ endTime }}</span>
|
||
|
|
<u-icon name="arrow-right" color="#CCD0D3"></u-icon>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<u-calendar v-model="showCalendar" mode="range" @change="selectDate"></u-calendar>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="btn">
|
||
|
|
<div class="submitBtn" @click="submit">确定</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "scopedSelect",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
type: "",
|
||
|
|
showCalendar: false,
|
||
|
|
startTime: '',
|
||
|
|
endTime: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 选人
|
||
|
|
selectUser() {},
|
||
|
|
|
||
|
|
// 选包含标签
|
||
|
|
selectTags() {},
|
||
|
|
|
||
|
|
// 选剔除标签
|
||
|
|
deleteTags() {},
|
||
|
|
|
||
|
|
// 选时间范围
|
||
|
|
selectDate(e) {
|
||
|
|
console.log(e);
|
||
|
|
this.startTime = e.startDate
|
||
|
|
this.endTime = e.endDate
|
||
|
|
},
|
||
|
|
submit() {}
|
||
|
|
},
|
||
|
|
onLoad(o) {
|
||
|
|
this.type = o.type;
|
||
|
|
document.title = this.type == 0? '按部门选择':'按网格选择'
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.scopedSelect {
|
||
|
|
.item {
|
||
|
|
padding: 32px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
background: #FFF;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
box-shadow: inset 0px -1px 0px 0px #DDDDDD;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
background: #FFF;
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
height: 128px;
|
||
|
|
padding: 24px 32px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
.submitBtn {
|
||
|
|
flex: 1;
|
||
|
|
height: 80px;
|
||
|
|
line-height: 80px;
|
||
|
|
text-align: center;
|
||
|
|
border-radius: 8px;
|
||
|
|
border: 2px solid #CCCCCC;
|
||
|
|
background: #1365DD;
|
||
|
|
color: #FFF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|