|
|
@@ -0,0 +1,177 @@
|
|
|
+<template>
|
|
|
+ <view class="select-bg_bx">
|
|
|
+ <view
|
|
|
+ :id="titId"
|
|
|
+ @click="switchCut"
|
|
|
+ :class="['select-title',dropdownShow?'select_corlor':'']">
|
|
|
+ {{menuObj.title}}
|
|
|
+ <i class="iconfont iconsanjiao_xia"></i>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ :style="{
|
|
|
+ top
|
|
|
+ }"
|
|
|
+ class="select-mark-view" v-show="dropdownShow" @click="switchCut"></view>
|
|
|
+ <view
|
|
|
+ v-if="dropdownShow"
|
|
|
+ :style="{
|
|
|
+ top
|
|
|
+ }"
|
|
|
+ class="select-fixed_bx">
|
|
|
+ <slot>
|
|
|
+ <view class="select-item-box">
|
|
|
+ <view class="title">{{menuObj.titleChild}}</view>
|
|
|
+ <view class="item-child_box">
|
|
|
+ <button
|
|
|
+ v-for="(item,index) in menuObj.list"
|
|
|
+ :key="index"
|
|
|
+ @click="changeItem(item)"
|
|
|
+ :class="['admin-button-com','mini-btn',selectItem.name === item.name?'blue':'default']">
|
|
|
+ {{item.name}}
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ v-if="typeSelect === 1"
|
|
|
+ class="select-item-box">
|
|
|
+ <view class="title">其他时间选择</view>
|
|
|
+ <view class="item-child_box">
|
|
|
+ <picker
|
|
|
+ class="admin-button-com mini-btn default custom"
|
|
|
+ mode="date" :value="selectItem" @change="endTimeFn">
|
|
|
+ <div v-if="selectItem&&$util.isString(selectItem)">{{ selectItem }}</div>
|
|
|
+ <div class="tui-placeholder" v-else>自定义时间</div>
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </slot>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import DropdownList from "@/components/plugin/dropdown-list";
|
|
|
+ import AppDatePicker from "@/components/app-date-picker";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name:'DorpdownSelect',
|
|
|
+ components:{
|
|
|
+ DropdownList,
|
|
|
+ AppDatePicker
|
|
|
+ },
|
|
|
+ props:{
|
|
|
+ menuObj:{
|
|
|
+ type: Object,
|
|
|
+ default: ()=>({
|
|
|
+ title:'时间',
|
|
|
+ titleChild:'选择时间',
|
|
|
+ list: [{name:'昨天'},{name:'今天'},{name:'本月'},{name:'上月'},{name:'今年'}]
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 1 是时间 2是其他
|
|
|
+ typeSelect:{
|
|
|
+ type:Number,
|
|
|
+ default: 2
|
|
|
+ },
|
|
|
+ top:{
|
|
|
+ type: String,
|
|
|
+ default: 'auto'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ dropdownShow: false,
|
|
|
+ selectItem:'',
|
|
|
+ titId:'cesshi123'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ switchCut(){
|
|
|
+ this.dropdownShow = !this.dropdownShow
|
|
|
+ },
|
|
|
+ changeItem(val){
|
|
|
+ this.selectItem = val
|
|
|
+ },
|
|
|
+ endTimeFn(e){
|
|
|
+ this.selectItem = e.detail.value;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ selectItem(val){
|
|
|
+ this.$emit('selectSussess',{
|
|
|
+ select: this.$util.isString(val)?val:val.name,
|
|
|
+ selectItem: val
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .select-bg_bx {
|
|
|
+ .select-title {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 26px;
|
|
|
+ & .iconsanjiao_xia {
|
|
|
+ margin-left: 30px;
|
|
|
+ }
|
|
|
+ &.select_corlor {
|
|
|
+ color: #3385FF;
|
|
|
+ & .iconsanjiao_xia {
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .select-mark-view {
|
|
|
+ /* #ifndef H5 */
|
|
|
+ height: 100vh;
|
|
|
+ /* #endif */
|
|
|
+ /* #ifdef H5 */
|
|
|
+ height: 100%;
|
|
|
+ /* #endif */
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ left: 0;
|
|
|
+ // top: 100px;
|
|
|
+ }
|
|
|
+ & .select-fixed_bx {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ left: 0;
|
|
|
+ z-index: 999;
|
|
|
+ // box-shadow: 0 6px 10px #cccccc;
|
|
|
+ padding:40px 30px 40px;
|
|
|
+ border-radius: 0px 0px 20px 20px;
|
|
|
+ transition: all 0.5s ease-in-out;
|
|
|
+ // top: 100px;
|
|
|
+ & .select-item-box {
|
|
|
+ & .title {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ & .item-child_box {
|
|
|
+ display: flex;
|
|
|
+ padding: 20px 0 20px;
|
|
|
+ align-items: center;
|
|
|
+ flex-flow: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ & .admin-button-com {
|
|
|
+
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 18px 50px;
|
|
|
+ &.custom {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
fuwei