留样登记页面调整

src/pages/quality/ProductSample/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="page-product-receipt">
+  <view class="list-page">
     <!--  页面头  -->
     <page-head title="成品留样" />
 
@@ -10,10 +10,11 @@
       </u-form-item>
     </u-form>
 
-    <view class="scroll">
-      <view v-for="(item, index) in list" :key="index">
-        <u-form style="margin-top: 10rpx" class="form2">
-          <view>
+    <scroll-view id="list" scroll-y="true" :style="{ height: listHeight + 'px' }" :lower-threshold="50">
+      <!--  列表  -->
+      <u-form class="list">
+        <view v-if="list.length > 0">
+          <view class="list-item" v-for="(item, index) in list" :key="index" >
             <lj-list-row label="物料名称:" :value="item.materialName" />
             <lj-list-row label="来料批次号:" :value="item.incomeBatchNo" />
             <lj-list-row label="留样时间:" :value="formatDate(item.sampleTime, '未留样')" />
@@ -22,9 +23,26 @@
               <view @click.stop="handelOption(item)" class="boder-icon-rigth"> 留样</view>
             </view>
           </view>
-        </u-form>
-      </view>
-    </view>
+        </view>
+        <view v-else> 暂无数据 </view>
+      </u-form>
+    </scroll-view>
+
+<!--    <view class="scroll">-->
+<!--      <view v-for="(item, index) in list" :key="index">-->
+<!--        <u-form style="margin-top: 10rpx" class="form2">-->
+<!--          <view>-->
+<!--            <lj-list-row label="物料名称:" :value="item.materialName" />-->
+<!--            <lj-list-row label="来料批次号:" :value="item.incomeBatchNo" />-->
+<!--            <lj-list-row label="留样时间:" :value="formatDate(item.sampleTime, '未留样')" />-->
+
+<!--            <view v-if="!item.sampleTime" class="righttitle">-->
+<!--              <view @click.stop="handelOption(item)" class="boder-icon-rigth"> 留样</view>-->
+<!--            </view>-->
+<!--          </view>-->
+<!--        </u-form>-->
+<!--      </view>-->
+<!--    </view>-->
 
     <u-calendar v-model="showCalendar" :mode="mode" @change="changeTime"></u-calendar>
   </view>
@@ -36,6 +54,7 @@ import model from './model';
 import moment from 'moment';
 import PageHead from '@/components/lanju/page-head/index.vue';
 import LjListRow from '@/components/lanju/lj-list-row/index.vue';
+import {getWmsRawOrderInListToPda} from "@/pages/wms/Raw/TemporarilyCollected/model";
 
 @Component({
   components: {
@@ -44,6 +63,7 @@ import LjListRow from '@/components/lanju/lj-list-row/index.vue';
   },
 })
 export default class ProductSample extends BasePage {
+  listHeight = 500;
   model = model;
   checkTime: any = moment().format('YYYY-MM-DD');
   showCalendar = false;
@@ -109,9 +129,38 @@ export default class ProductSample extends BasePage {
     }
     return moment(time).format('YYYY-MM-DD HH:mm:ss');
   }
+
+  onReady() {
+    //等待页面加载完成
+    this.$nextTick(() => {
+      let buttonTop = 0;
+      //获取底部按钮信息
+      const query = uni.createSelectorQuery().in(this);
+      const screenHeight = uni.getSystemInfoSync().screenHeight;
+      //获取列表信息
+      query
+        .select('#list')
+        .boundingClientRect((data) => {
+          //获取列表到顶部距离
+          const listTop = data.top;
+          //
+          this.listHeight = screenHeight - listTop - 10;
+        })
+        .exec();
+    });
+  }
+
 }
 </script>
 <style lang="scss" scoped>
+
+.list-page {
+  background: #f2f2f2 linear-gradient(0deg, #f2f2f2 0%, #f8262c 51%, #d9001b 100%) no-repeat;
+  background-size: 100% 600rpx;
+  padding: 118rpx 30rpx 0;
+  min-height: 100%;
+}
+
 .form {
   background-color: #fff;
   padding: 0 40rpx;
@@ -131,48 +180,48 @@ export default class ProductSample extends BasePage {
   }
 }
 
-.scroll {
-  .form2 {
-    background-color: #fff;
-    padding: 10rpx 25rpx 10rpx 25rpx;
-    border-radius: 10rpx;
-    box-shadow: 0 0 20rpx 0 rgba(128, 128, 128, 0.2);
-    color: #8d8989;
 
-    .row-list {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      margin-top: 10rpx;
 
-      .list-label {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        width: 30%;
-      }
+.list {
+  background-color: #fff;
+  margin-top: 20rpx;
+  padding: 20rpx 20rpx 25rpx;
+  border-radius: 10rpx;
+  box-shadow: 0 0 20rpx 0 rgba(128, 128, 128, 0.2);
+  color: #8d8989;
 
-      .list-text {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        width: 70%;
-      }
-    }
+  .list-item {
+    padding: 20rpx;
+  }
 
-    .righttitle {
-      display: flex;
-      justify-content: flex-end;
+  .righttitle {
+    display: flex;
+    justify-content: flex-end;
 
-      .boder-icon-rigth {
-        border: 1rpx solid #fa3534;
-        width: 130rpx;
-        text-align: center;
-        background: #fa3534;
-        color: #ffffff;
-        margin-top: 10px;
-      }
+    .boder-icon-rigth {
+      font-size: 30rpx;
+      border-radius: 5px;
+      border: 1rpx solid #fa3534;
+      text-align: center;
+      background: #fa3534;
+      color: #ffffff;
+      margin-top: 10px;
+      margin-left: 10px;
     }
   }
+
+  /* 奇数行背景色 */
+  .list-item:nth-child(odd) {
+    background-color: #ffffff;
+  }
+
+  /* 偶数行背景色 */
+  .list-item:nth-child(even) {
+    background-color: #f5f5f5;
+  }
+}
+
+::v-deep .list-item {
+  width: 100% !important;
 }
 </style>