aosiyiliaouniapp/pages/wuliugenzong/genzong.vue

<template>
	<view class="page">
		<DaDropdownVue2
		  ref="daDropdownVue2Ref"
		  :dropdownMenu="dropdownMenuList"
		  @confirm="handleConfirm"
		  @close="handleClose"
		  @open="handleOpen">
		  <template v-slot:slot3="{item,index}">
		    <view style="padding: 40px">
		      自定义插槽内容
		      <input
		        type="text"
		        class="slot-input"
		        placeholder="请输入1"
		        v-model="item.value">
		      
			  <input
			    type="text"
			    class="slot-input"
			    placeholder="请输入2"
			    v-model="item.value">
				
				
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							当前选择
						</view>
						<view class="uni-list-cell-db">
							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
								<view class="uni-input">{{date}}</view>
							</picker>
						</view>
					</view> 
			  <button @click="onGetInput(item,index)">查询</button>
		    </view>
		  </template>
		</DaDropdownVue2>
		
	</view>
</template>

<script>
import DaDropdownVue2 from '../../components/da-dropdown-vue2/index.vue'
export default {
	components: { DaDropdownVue2 },
	data() {
		const currentDate = this.getDate({
			format: true
		})
		return {
			title: 'picker',
					            array: ['中国', '美国', '巴西', '日本'],
					            index: 0,
					            date: currentDate,
					            time: '12:01',
			dropdownMenuList: [
			  // {
			  //   title: '插槽1',
			  //   type: 'slot1',
			  //   prop: 'god1',
			  //   showArrow: true,
			  // },
			  // {
			  //   title: '下拉',
			  //   type: 'cell',
			  //   prop: 'god1',
			  //   showAll: true,
			  //   showIcon: true,
			  //   // value: '2', // 默认内容2
			  //   options: [
			  //     { label: '下拉列表项1', value: '1', suffix: '副标题' },
			  //     { label: '下拉列表项2', value: '2' },
			  //     { label: '下拉列表项3', value: '3' },
			  //   ],
			  // },
			  // {
			  //   title: '插槽2',
			  //   type: 'slot2',
			  //   prop: 'god2',
			  //   showArrow: true,
			  // },
			  {
			    title: '条件查询',
			    type: 'slot3',
			    prop: 'god3',
			    showArrow: true,
			  },
			  // {
			  //   title: '日期',
			  //   type: 'daterange',
			  //   prop: 'god6',
			  // // 默认选中 2022-01-01到2022-02-01
			  // // value: { start: '2022-01-01', end: '2022-02-01' },
			  // },
			  // {
			  //   title: '插槽4',
			  //   type: 'slot4',
			  //   prop: 'god4',
			  //   showArrow: true,
			  // },
			  // {
			  //   title: '插槽5',
			  //   type: 'slot5',
			  //   prop: 'god5',
			  //   showArrow: true,
			  // },
			],
		}
	},
	computed: {
	   startDate() {
		   return this.getDate('start');
	   },
	   endDate() {
		   return this.getDate('end');
	   }
    },
	onLoad() {
		
	},
	methods: {
		bindPickerChange: function(e) {
		  console.log('picker发送选择改变，携带值为', e.detail.value)
		  this.index = e.detail.value
	    },
	    bindDateChange: function(e) {
		  this.date = e.detail.value
	    },
	    bindTimeChange: function(e) {
		  this.time = e.detail.value
	    },
	    getDate(type) {
		  const date = new Date();
		  let year = date.getFullYear();
		  let month = date.getMonth() + 1;
		  let day = date.getDate();

		  if (type === 'start') {
			  year = year - 60;
		  } else if (type === 'end') {
			  year = year + 2;
		  }
		  month = month > 9 ? month : '0' + month;
		  day = day > 9 ? day : '0' + day;
		  return `${year}-${month}-${day}`;
	    },
		handleConfirm(v, selectedValue) {
		  console.log('handleConfirm ==>', v, selectedValue)
		},
		handleClose(v, callbackMenuList) {
		  console.log('handleClose ==>', v, callbackMenuList)
		},
		handleOpen(v) {
		  console.log('handleOpen ==>', v)
		},
		handleSwitchChange(event, item, index) {
		  console.log('handleSwitchChange ==>', event, item, index)
		
		  item.value = event.detail.value === true ? 1 : 0
		  // 操作完成后关闭弹窗
		  this.$refs.daDropdownVue2Ref?.closeMenuPopup()
		},
		onGetInput(item, index) {
		  console.log('onGetInput ==>', item, index)
		  console.log('当前输入的内容是 ==>', item.value)
		
		  // 操作完成后关闭弹窗
		  this.$refs.daDropdownVue2Ref?.closeMenuPopup()
		},
			
	},
}
</script>

<style>
	@import url("genzong.css");
</style>