|
@@ -1,227 +1,227 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <view class="select-bg_bx">
|
|
|
|
|
|
|
+ <view class="select-bg_bx">
|
|
|
|
|
|
|
|
- <view v-if="isShowTit" @click="switchCut" :class="['select-title',dropdownShow?'select_corlor':'']">
|
|
|
|
|
-<!-- {{menuObjActive?menuObjActive:menuObj.title}}-->
|
|
|
|
|
- <text v-if="typeTime">{{selectItemId?menuObjActive:menuObj.title}}</text>
|
|
|
|
|
- <text v-else>{{menuObjActive?menuObjActive:getMyShopInfo.shopName}}</text>
|
|
|
|
|
- <i v-if="isShowMore" class="iconfont iconsanjiao_xia"></i>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view
|
|
|
|
|
- class="select-mark-view" v-show="dropdownShow" @click="switchCut"></view>
|
|
|
|
|
- <view
|
|
|
|
|
- v-if="dropdownShow"
|
|
|
|
|
- :style="{
|
|
|
|
|
|
|
+ <view
|
|
|
|
|
+ v-if="isShowTit"
|
|
|
|
|
+ @click="switchCut"
|
|
|
|
|
+ :class="['select-title',dropdownShow?'select_corlor':'']"
|
|
|
|
|
+ >
|
|
|
|
|
+ <!-- {{menuObjActive?menuObjActive:menuObj.title}}-->
|
|
|
|
|
+ <text v-if="typeTime">{{selectItemId?menuObjActive:menuObj.title}}</text>
|
|
|
|
|
+ <text v-else>{{menuObjActive?menuObjActive:getMyShopInfo.shopName}}</text>
|
|
|
|
|
+ <i
|
|
|
|
|
+ v-if="isShowMore"
|
|
|
|
|
+ class="iconfont iconsanjiao_xia"
|
|
|
|
|
+ ></i>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view
|
|
|
|
|
+ class="select-mark-view"
|
|
|
|
|
+ v-show="dropdownShow"
|
|
|
|
|
+ @click="switchCut"
|
|
|
|
|
+ ></view>
|
|
|
|
|
+ <view
|
|
|
|
|
+ v-if="dropdownShow"
|
|
|
|
|
+ :style="{
|
|
|
top
|
|
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',selectItemId === item.id?'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" >
|
|
|
|
|
- <view class="admin-button-com mini-btn default custom" @tap="changeItem({name:'自定义',id:'custom'})">自定义</view>
|
|
|
|
|
-<!-- <picker-->
|
|
|
|
|
-<!-- class="admin-button-com mini-btn default custom"-->
|
|
|
|
|
-<!-- mode="date" :value="selectItemId" @change="endTimeFn">-->
|
|
|
|
|
-<!-- <div v-if="selectItemId&&formatSelect">{{ selectItemId }}</div>-->
|
|
|
|
|
-<!-- <div class="tui-placeholder" v-else>自定义时间</div>-->
|
|
|
|
|
-<!-- </picker>-->
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </slot>
|
|
|
|
|
|
|
+ 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',selectItemId === item.id?'blue':'default']"
|
|
|
|
|
+ >
|
|
|
|
|
+ {{item.name}}
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ <view
|
|
|
|
|
+ v-if="typeSelect === 1"
|
|
|
|
|
+ class="select-item-box"
|
|
|
|
|
+ >
|
|
|
|
|
+ <view class="title">其他时间选择</view>
|
|
|
|
|
+ <view class="item-child_box">
|
|
|
|
|
+ <view
|
|
|
|
|
+ class="admin-button-com mini-btn default custom"
|
|
|
|
|
+ @tap="changeItem({name:'自定义',id:'custom'})"
|
|
|
|
|
+ >自定义</view>
|
|
|
|
|
+ <!-- <picker-->
|
|
|
|
|
+ <!-- class="admin-button-com mini-btn default custom"-->
|
|
|
|
|
+ <!-- mode="date" :value="selectItemId" @change="endTimeFn">-->
|
|
|
|
|
+ <!-- <div v-if="selectItemId&&formatSelect">{{ selectItemId }}</div>-->
|
|
|
|
|
+ <!-- <div class="tui-placeholder" v-else>自定义时间</div>-->
|
|
|
|
|
+ <!-- </picker>-->
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </slot>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
+ </view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
- import DropdownList from "@/components/plugin/dropdown-list";
|
|
|
|
|
- import AppDatePicker from "@/components/app-date-picker";
|
|
|
|
|
- import rangeDatePick from '@/components/pyh-rdtpicker/pyh-rdtpicker.vue';
|
|
|
|
|
- import {mapGetters} from "vuex";
|
|
|
|
|
- export default {
|
|
|
|
|
- name:'DorpdownSelect',
|
|
|
|
|
- components:{
|
|
|
|
|
- DropdownList,AppDatePicker,rangeDatePick
|
|
|
|
|
- },
|
|
|
|
|
- props:{
|
|
|
|
|
- menuObj:{
|
|
|
|
|
- type: Object,
|
|
|
|
|
- default: ()=>({
|
|
|
|
|
- title:'时间',
|
|
|
|
|
- titleChild:'时间',
|
|
|
|
|
- list: [{name:'昨天',id:'0'},{name:'今天',id:'1'},{name:'本月',id:'2'},{name:'上月',id:'3'},{name:'今年',id:'4'}]
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- // 1 是时间 2是其他
|
|
|
|
|
- typeSelect:{
|
|
|
|
|
- type:Number,
|
|
|
|
|
- default: 2
|
|
|
|
|
- },
|
|
|
|
|
- top:{
|
|
|
|
|
- type: String,
|
|
|
|
|
- default: 'auto'
|
|
|
|
|
- },
|
|
|
|
|
- selectItemId:{
|
|
|
|
|
- type:[String,Number],
|
|
|
|
|
- default:''
|
|
|
|
|
- },
|
|
|
|
|
- isShowTit:{
|
|
|
|
|
- type: Boolean,
|
|
|
|
|
- default: true
|
|
|
|
|
- },
|
|
|
|
|
- typeTime:{
|
|
|
|
|
- type: Boolean,
|
|
|
|
|
- default: false
|
|
|
|
|
- },
|
|
|
|
|
- isShowMore:{
|
|
|
|
|
- type: Boolean,
|
|
|
|
|
- default: true
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- data(){
|
|
|
|
|
- return {
|
|
|
|
|
- dropdownShow: false,
|
|
|
|
|
- selectItem:'',
|
|
|
|
|
- menuObjActive:'',
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- computed:{
|
|
|
|
|
- ...mapGetters(["getMyShopInfo"]),
|
|
|
|
|
- formatSelect(){
|
|
|
|
|
- if(!this.$util.isEmpty(this.selectItemId)&&
|
|
|
|
|
- this.$util.isString(this.selectItemId)&&
|
|
|
|
|
- this.selectItemId.split('-').length>1){
|
|
|
|
|
- return true
|
|
|
|
|
- }else{
|
|
|
|
|
- return false
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- },
|
|
|
|
|
- mounted(){
|
|
|
|
|
-
|
|
|
|
|
- },
|
|
|
|
|
- onLoad(){
|
|
|
|
|
-
|
|
|
|
|
- },
|
|
|
|
|
- methods:{
|
|
|
|
|
- switchCut(){
|
|
|
|
|
- this.dropdownShow = !this.dropdownShow
|
|
|
|
|
- },
|
|
|
|
|
- changeItem(val){
|
|
|
|
|
- if(val.id== this.selectItemId&&val.name!='自定义'){
|
|
|
|
|
- return false
|
|
|
|
|
- }
|
|
|
|
|
- this.$emit('update:selectItemId',val.id)
|
|
|
|
|
-
|
|
|
|
|
- this.dropdownShow = false;
|
|
|
|
|
-
|
|
|
|
|
- this.$emit('update:menuObj',{
|
|
|
|
|
- ...this.menuObj,
|
|
|
|
|
- title:val.name
|
|
|
|
|
- })
|
|
|
|
|
- this.menuObjActive = val.name;
|
|
|
|
|
-
|
|
|
|
|
- this.$emit('selectSussess',{
|
|
|
|
|
- select: this.$util.isString(val)?val:val.name,
|
|
|
|
|
- selectItem: val
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- endTimeFn(e){
|
|
|
|
|
-
|
|
|
|
|
- this.selectItemId = e.detail.value;
|
|
|
|
|
-
|
|
|
|
|
- this.dropdownShow = false;
|
|
|
|
|
-
|
|
|
|
|
- this.$emit('update:selectItemId',val.id)
|
|
|
|
|
-
|
|
|
|
|
- this.$emit('update:menuObj',{
|
|
|
|
|
- ...this.menuObj,
|
|
|
|
|
- title:e.detail.value
|
|
|
|
|
- })
|
|
|
|
|
-
|
|
|
|
|
- this.$emit('selectSussess',{
|
|
|
|
|
- select: e.detail.value,
|
|
|
|
|
- selectItem: val
|
|
|
|
|
- })
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+import DropdownList from "@/components/plugin/dropdown-list";
|
|
|
|
|
+import AppDatePicker from "@/components/app-date-picker";
|
|
|
|
|
+import rangeDatePick from '@/components/pyh-rdtpicker/pyh-rdtpicker.vue';
|
|
|
|
|
+import { mapGetters } from "vuex";
|
|
|
|
|
+export default {
|
|
|
|
|
+ name: 'DorpdownSelect',
|
|
|
|
|
+ components: {
|
|
|
|
|
+ DropdownList, AppDatePicker, rangeDatePick
|
|
|
|
|
+ },
|
|
|
|
|
+ props: {
|
|
|
|
|
+ menuObj: {
|
|
|
|
|
+ type: Object,
|
|
|
|
|
+ default: () => ({
|
|
|
|
|
+ title: '时间',
|
|
|
|
|
+ titleChild: '时间',
|
|
|
|
|
+ list: [{ name: '昨天', id: '0' }, { name: '今天', id: '1' }, { name: '本月', id: '2' }, { name: '上月', id: '3' }, { name: '今年', id: '4' }]
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ // 1 是时间 2是其他
|
|
|
|
|
+ typeSelect: {
|
|
|
|
|
+ type: Number,
|
|
|
|
|
+ default: 2
|
|
|
|
|
+ },
|
|
|
|
|
+ top: {
|
|
|
|
|
+ type: String,
|
|
|
|
|
+ default: 'auto'
|
|
|
|
|
+ },
|
|
|
|
|
+ selectItemId: {
|
|
|
|
|
+ type: [String, Number],
|
|
|
|
|
+ default: ''
|
|
|
|
|
+ },
|
|
|
|
|
+ isShowTit: {
|
|
|
|
|
+ type: Boolean,
|
|
|
|
|
+ default: true
|
|
|
|
|
+ },
|
|
|
|
|
+ typeTime: {
|
|
|
|
|
+ type: Boolean,
|
|
|
|
|
+ default: false
|
|
|
|
|
+ },
|
|
|
|
|
+ isShowMore: {
|
|
|
|
|
+ type: Boolean,
|
|
|
|
|
+ default: true
|
|
|
}
|
|
}
|
|
|
|
|
+ },
|
|
|
|
|
+ data () {
|
|
|
|
|
+ return {
|
|
|
|
|
+ dropdownShow: false,
|
|
|
|
|
+ selectItem: '',
|
|
|
|
|
+ menuObjActive: '',
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ computed: {
|
|
|
|
|
+ ...mapGetters(["getMyShopInfo"]),
|
|
|
|
|
+ formatSelect () {
|
|
|
|
|
+ if (!this.$util.isEmpty(this.selectItemId) &&
|
|
|
|
|
+ this.$util.isString(this.selectItemId) &&
|
|
|
|
|
+ this.selectItemId.split('-').length > 1) {
|
|
|
|
|
+ return true
|
|
|
|
|
+ } else {
|
|
|
|
|
+ return false
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ switchCut () {
|
|
|
|
|
+ this.dropdownShow = !this.dropdownShow
|
|
|
|
|
+ },
|
|
|
|
|
+ changeItem (val) {
|
|
|
|
|
+ if (val.id == this.selectItemId && val.name != '自定义') {
|
|
|
|
|
+ return false
|
|
|
|
|
+ }
|
|
|
|
|
+ this.$emit('update:selectItemId', val.id)
|
|
|
|
|
+ this.dropdownShow = false;
|
|
|
|
|
+ this.$emit('update:menuObj', {
|
|
|
|
|
+ ...this.menuObj,
|
|
|
|
|
+ title: val.name
|
|
|
|
|
+ })
|
|
|
|
|
+ this.menuObjActive = val.name;
|
|
|
|
|
+ this.$emit('selectSussess', {
|
|
|
|
|
+ select: this.$util.isString(val) ? val : val.name,
|
|
|
|
|
+ selectItem: val
|
|
|
|
|
+ })
|
|
|
|
|
+ },
|
|
|
|
|
+ endTimeFn (e) {
|
|
|
|
|
+ this.selectItemId = e.detail.value;
|
|
|
|
|
+ this.dropdownShow = false;
|
|
|
|
|
+ this.$emit('update:selectItemId', val.id)
|
|
|
|
|
+ this.$emit('update:menuObj', {
|
|
|
|
|
+ ...this.menuObj,
|
|
|
|
|
+ title: e.detail.value
|
|
|
|
|
+ })
|
|
|
|
|
+ this.$emit('selectSussess', {
|
|
|
|
|
+ select: e.detail.value,
|
|
|
|
|
+ selectItem: val
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
- .select-bg_bx {
|
|
|
|
|
- .select-title {
|
|
|
|
|
- color: #666666;
|
|
|
|
|
- font-size: 26px;
|
|
|
|
|
- & .iconsanjiao_xia {
|
|
|
|
|
- margin-left: 10px;
|
|
|
|
|
- }
|
|
|
|
|
- &.select_corlor {
|
|
|
|
|
- color: #3385FF;
|
|
|
|
|
- & .iconsanjiao_xia {
|
|
|
|
|
- transform: rotate(180deg);
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- .select-mark-view {
|
|
|
|
|
- height: 100vh;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- position: fixed;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
- left: 0;
|
|
|
|
|
- top: 0px;
|
|
|
|
|
- z-index: 900;
|
|
|
|
|
- }
|
|
|
|
|
- & .select-fixed_bx {
|
|
|
|
|
- position: fixed;
|
|
|
|
|
|
|
+.select-bg_bx {
|
|
|
|
|
+ .select-title {
|
|
|
|
|
+ color: #666666;
|
|
|
|
|
+ font-size: 26px;
|
|
|
|
|
+ & .iconsanjiao_xia {
|
|
|
|
|
+ margin-left: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+ &.select_corlor {
|
|
|
|
|
+ color: #3385ff;
|
|
|
|
|
+ & .iconsanjiao_xia {
|
|
|
|
|
+ transform: rotate(180deg);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .select-mark-view {
|
|
|
|
|
+ height: 100vh;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ top: 0px;
|
|
|
|
|
+ z-index: 900;
|
|
|
|
|
+ }
|
|
|
|
|
+ & .select-fixed_bx {
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ background-color: #ffffff;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ z-index: 999;
|
|
|
|
|
+ // box-shadow: 0 6px 10px #cccccc;
|
|
|
|
|
+ padding: 120px 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;
|
|
|
|
|
+ text-align: left;
|
|
|
|
|
+ }
|
|
|
|
|
+ & .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%;
|
|
width: 100%;
|
|
|
- background-color: #FFFFFF;
|
|
|
|
|
- left: 0;
|
|
|
|
|
- z-index: 999;
|
|
|
|
|
- // box-shadow: 0 6px 10px #cccccc;
|
|
|
|
|
- padding:120px 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;
|
|
|
|
|
- text-align: left;
|
|
|
|
|
- }
|
|
|
|
|
- & .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>
|
|
</style>
|