Smart_Canteen_Handheld_Device-JYY/pages/enterAndExit/exit/index.vue

<template>
  <page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
  <view class="content">
    <view class="search-form">
      <uni-easyinput class="searchInput" suffixIcon="search" @iconClick="search" placeholder="输入入库单号/仓库"
                     v-model="searchValue" @keyup.enter.native="search"></uni-easyinput>
    </view>
    <scroll-view class="chronic-science" scroll-y="true" @scrolltolower="onScrollTolower">
      <view class="scroll-view-item" v-for="(item,index) in tableList" :key="index">
        <view
          style="width: 100%;display: flex;align-items: center;height: 240rpx;justify-content: space-between;border: 1px solid #ccc;border-radius: 10px;">
          <view
            style="width: 100%;height: 90%;display: flex;flex-direction: column;justify-content: space-between;padding: 10px;">
            <view style="width: 100%;height: 80rpx;display: flex;">
              <view style="width:80%;font-size:32rpx;font-weight: 600;color: #FF6816;font-family: PingFang SC-Semibold">
                {{ item.outDate }}
              </view>
              <view style="width:20%;float: right;display: flex;align-items: center"
                    @click="navigateTo(`/pages/enterAndExit/exit/recordDetail?outId=${item.outId}`)">
                <text style="font-size:28rpx;font-weight: 600;color: #3E34FF;font-family: PingFang SC-Regular">详情
                </text>
                <image src="/static/images/handheld/ic_right_arrow.png"
                       style="width: 35rpx;height: 35rpx;margin-left: 5rpx;"></image>
              </view>
            </view>
            <view style="width: 100%;height: 40px;display: flex;margin-top: 10rpx;">
              <view style="width: 65%;font-size:24rpx;color: black;height: 40px;display: flex;align-items: center;">
                <view style="color: black;font-weight: 600;font-family: PingFang SC-Medium">
                  出库单号：
                </view>
                <view
                  style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #86817B;font-family: PingFang SC-Regular">
                  {{ item.outCode }}
                </view>
              </view>
              <view style="width: 35%;font-size:24rpx;color: black;height: 40px;display: flex;align-items: center;">
                <view style="color: black;font-weight: 600;font-family: PingFang SC-Medium">
                  出库总数量：
                </view>
                <view
                  style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #86817B;font-family: PingFang SC-Regular">
                  {{ item.totalNum }}
                </view>
              </view>
            </view>
            <view style="width: 100%;height: 40px;display: flex;">
              <view style="width: 65%;font-size:24rpx;color: black;height: 30px;display: flex;align-items: center;">
                <view style="color: black;font-weight: 600;font-family: PingFang SC-Medium">
                  仓&emsp;&emsp;库：
                </view>
                <view
                  style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #86817B;font-family: PingFang SC-Regular">
                  {{ item.warehouseName }}
                </view>
              </view>
              <view style="width: 35%;font-size:24rpx;color: black;height: 30px;display: flex;align-items: center;">
                <view style="color: black;font-weight: 600;font-family: PingFang SC-Medium">
                  出库总金额：
                </view>
                <view
                  style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #86817B;font-family: PingFang SC-Regular">
                  {{ item.totalAmount / 100 }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <u-button class="add-btn" type="primary" @click="add">
      <image src="/static/images/handheld/ic_add.png"
             style="width: 32rpx;height: 32rpx;margin-right: 8rpx;vertical-align: middle;" />
      <text>新增</text>
    </u-button>
  </view>
</template>

<script>
import Tabs from '@/pages/components/Tabs.vue'
import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'
import UButton from '@/uni_modules/uview-ui/components/u-button/u-button.vue'
import UniSection from '@/components/uni-section/uni-section.vue'
import { getWarehouseOutRecordApi } from '@/api/enterExit'

export default {
  components: { UniSection, UButton, UniEasyinput, Tabs },
  data() {
    return {
      fontValue: uni.getStorageSync('fontSize') || 8,
      searchValue: '',
      tableList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      status: 'loadmore'
    }
  },
  onLoad() {
  },
  onShow() {
    this.getList()
  },
  methods: {
    search() {
      console.log('Searching for:', this.searchValue)
      this.getList()
    },
    // 翻页
    onScrollTolower() {
      console.log(this.tableList.length)
      if (this.total > this.tableList.length) {
        this.pageNum++
        this.getList()
      }
    },
    //获取订单列表
    async getList() {
      console.log('获取列表')
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        searchValue: this.searchValue
      }
      try {
        const res = await getWarehouseOutRecordApi(params)
        console.log('?? ~ getList ~ res:', res)
        this.total = Number(res.total)
        if (this.pageNum == 1) {
          this.tableList = res.rows
        } else {
          this.tableList.push(...res.rows)
        }
        this.status = this.total == this.tableList.length ? 'nomore' : 'loadmore'
      } catch (error) {
        console.log(error)
      }
    },
    navigateTo(url) {
      console.log('Navigating to:', url)
      uni.navigateTo({
        url
      })
    },
    add() {
      uni.navigateTo({
        url: '/pages/enterAndExit/exit/add'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  //从上到下渐变
  min-height: 88vh;
  background-size: 100% 100%;

}

.content {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  background: #f9fbff;
  .search-form {
    display: flex;
    width: 98%;
    margin-top: 10px;

    .searchInput {
      width: 300px;
      height: 40px;
      margin-left: 10px;
      font-size: 28rpx;
      font-family: PingFang SC-Regular;
    }

    .searchBtn {
      margin-left: 10px;
      height: 35px;
    }
  }

  .chronic-science {
    width: 100%;
    height: 82vh;

    .scroll-view-item {
      width: 96%;
      margin: 10px auto;
      background: #fff;
      border-radius: 23rpx;
    }
  }

  .add-btn {
    display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 2%;
    width: 30%;
    right: 1%;
    background: linear-gradient(90deg, #EF882E 30%, #FFB679 100%);
    font-family: PingFang SC-Regular;
    font-size: 32rpx;
    border: 0;
  }
}

</style>