子卷入库

common/style/layout.styl

@@ -606,4 +606,7 @@ uni-button[disabled]:not([type]) {
 	width: 100%;
 	border-radius: 20rpx;
 	background-color: #fff;
+}
+.down_icon {
+	text-align: center;
 }

pages/SecondPhase/production/ZjInStore.vue

@@ -3,8 +3,8 @@
 		<!-- <nav-bar title="子卷入库"></nav-bar> -->
 		<nav-bar :title="title"></nav-bar>
 		<view class="zd_content">
-			<view class="zd_wrapper">
-				<view class="filter_item">
+			<view class="zd_wrapper" style="padding: 0;">
+				<view class="filter_item" style="padding: 14rpx;">
 					<view class="filter_label_wraper">
 						<span class="filter_label">子卷号</span>
 					</view>
@@ -12,14 +12,24 @@
 						<search-box v-model="val1" @handleChange="handleChange" />
 					</view>
 				</view>
-				<view class="filter_item">
-					<view class="filter_label_wraper">
-						<span class="filter_label filter_label_1"></span>
-					</view>
-					<view class="filter_input_wraper filter_input_wraper_1">
-						<view class="iconfont icon_unchecked" :class="{'icon_checked': isV === '1'}" @tap="isVirtual">&#xe66b;</view>
-						<view class="filter_input_wraper_inn_text">直接入库</view>
+				<transition
+				  name="content"
+				  @before-enter="beforeEnter"
+				  @enter="enter"
+				  @leave="leave"
+				>
+					<view class="filter_item" v-if="isExpanded">
+						<view class="filter_label_wraper">
+							<span class="filter_label"></span>
+						</view>
+						<view class="filter_input_wraper" style="margin-left: 44rpx;">
+							<view class="iconfont icon_unchecked" :class="{'icon_checked': isV === '1'}" @tap="isVirtual">&#xe66b;</view>
+							<view class="filter_input_wraper_inn_text">直接入库</view>
+						</view>
 					</view>
+				</transition>
+				<view class="down_icon">
+					<uni-icons :type="iconType" size="24" color="#4e6ef2" style="margin:0 auto;" @click="toggleContent"></uni-icons>
 				</view>
 			</view>
 			<view class="zd_wrapper grid-wraper">
@@ -82,9 +92,16 @@
 				arr1: [],
 				dataList: [],
 				disabled: false,
-				isV: '0'
+				isV: '0',
+				isExpanded: false,
+				contentHeight: 0
 			};
 		},
+		computed: {
+			iconType() {
+				return this.isExpanded ? 'up' : 'down'
+			}
+		},
 		onPageScroll(e) {
 			this.$refs.UT.topData(e.scrollTop)
 		},
@@ -92,6 +109,44 @@
 			this.title = options.title
 		},
 		methods: {
+			toggleContent() {
+				this.isExpanded = !this.isExpanded
+			},
+			beforeEnter(el) {
+				el.style.height = '0'
+				this.$nextTick(() => {
+					el.style.height = el.scrollHeight + 'px'
+				})
+			},
+			enter(el, done) {
+			  const animation = el.animate(
+				[
+				  { height: '0', opacity: 0 },
+				  { height: el.scrollHeight + 'px', opacity: 1 },
+				],
+				{
+				  duration: 300,
+				  easing: 'ease',
+				}
+			  );
+			  animation.onfinish = done
+			},
+			leave(el, done) {
+			  const animation = el.animate(
+				[
+				  { height: el.scrollHeight + 'px', opacity: 1 },
+				  { height: '0', opacity: 0 },
+				],
+				{
+				  duration: 300,
+				  easing: 'ease',
+				}
+			  )
+			  animation.onfinish = () => {
+				el.style.height = '0'
+				done()
+			  }
+			},
 			isVirtual () {
 				this.isV = this.isV === '0' ? '1' : '0'
 			},