uni-Identify-quality/pages/order-goods/index.vue

<template>
  <div class="order-goods">
    <title-block title="订单库">
      <template #left>
        <u-action-sheet
            :show="show"
            :actions="this.statusValue.map(x=>({name:x.label,value:x.value}))"
            title="请选择状态"
            @close="show = false"
            @select="statusSelect"
        >
        </u-action-sheet>
        <div @click="openStatus" class="wrap1">
          <div class="wrap1_1">
            <div class="wrap1_1_1">{{ statusValue.find(x => x.value === status).label }}</div>
            <image style="width: 12rpx;height: 8rpx" src="../../static/dbx2@3x.png"></image>
          </div>

        </div>
      </template>
    </title-block>

    <div class="content2">
      <div class="wrap1">
        <div class="wrap1_1">
          <image src="../../static/zu1@3x.png"></image>
        </div>
        <div class="wrap1_2"></div>
        <input v-model="mobileKey" placeholder-style="color: #C7C7C7;font-size: 20rpx;"
               placeholder="在此处搜索您的订单"/>
      </div>
      <div class="wrap2" @click="search">
        搜索
      </div>

    </div>
    <scroll-view style="   margin-top: 28rpx;" class="scrollbox" :scroll-y="true" @scrolltolower="loadMore">
      <div class="content3">
        <div
            v-for="(item,index) in mainList" :key="index"
            @touchstart="(e)=>{touchStart(e,index)}"
            @touchmove="(e)=>{touchMove(e,index)}"
            @touchend="()=>{touchEnd(index)}"
            :style="{transform: `translateX(${item.distanceX}px)`}" class="wrap1">
          <div class="wrap1_1">
            <image src="../../static/jx632@3x.png"></image>
          </div>
          <div class="wrap1_2">
            <div class="wrap1_2_1">画作的名称</div>
            <div class="wrap1_2_2">订单号:0129181232101</div>
            <div class="wrap1_2_3">16平尺</div>
            <div class="wrap1_2_4">2023.09.01-2023.09.18</div>
          </div>
          <div class="wrap1_3" :class="[`status${item.status}`]">
            <div class="wrap1_3_1" v-if="item.status===4">
              <div class="wrap1_3_1_1">2023.09.28</div>
              <div class="wrap1_3_1_2">已超时</div>
              <div class="wrap1_3_1_3">点击补款</div>
            </div>
            <div class="wrap1_3_3" v-if="item.status!==4">
              <div class="wrap1_3_3_1">{{ statusValue.find(x => x.value === item.status).label }}</div>
            </div>
            <div class="wrap1_3_2">
              <div class="wrap1_3_2_1">货架号:</div>
              <div class="wrap1_3_2_2">12-02-13</div>
            </div>
          </div>

          <div class="wrap1_4" v-if="item.isRight">
            <image style="width: 80rpx;height: 80rpx" src="../../static/zu154@3x.png"></image>
          </div>
        </div>
      </div>
    </scroll-view>

    <tabbar :current="1"></tabbar>
  </div>
</template>
<script>
import tabbar from "../../components/uiq-tabbar/uiq-tabbar.vue";
import UImage from "../../uview-ui/components/u--image/u--image.vue";
import {postDataByParams} from "../../http/service";

export default {
  name: "index",
  data() {
    return {
      show: false,
      mobileKey: '',
      startX: 0,
      windowWidth: 0,
      page: 1,
      status: 0,
      pageSize: 999,
      mainList: [],
      statusValue: [{label: '全部状态', value: 0}, {label: '未入库', value: 1}, {
        label: '已入库',
        value: 2
      }, {label: '即将到期', value: 3}, {label: '超时', value: 4}, {label: '已取货', value: 5}]
    }
  },
  components: {UImage, tabbar},
  mounted() {
    this.getData()
    uni.getSystemInfo({
      success: (res) => {
        this.windowWidth = res.windowWidth
      }
    })
  },
  methods: {
    search() {
      this.getData()
    },
    statusSelect(data) {
      this.status = data.value
      this.getData()
    },
    openStatus() {
      this.show = true
    },
    loadMore() {
      console.log('loadMore')
    },
    async getData() {
      const data = {
        page: this.page, //分页
        pageSize: this.pageSize, //每页数据量
        status: this.status, //状态(1-未入库  2-已入库 3-即将到期 4-超时 5-已取货)
        mobileKey: this.mobileKey
      }
      const res = await postDataByParams('/api/warehouse/list', data)
      if (res.code === 200) {
        this.mainList = res.data.data
        this.mainList?.forEach((x) => {
          this.$set(x, 'distanceX', 0)
          this.$set(x, 'isRight', false)
        })
      }
    },
    touchMove(e, index) {
      this.mainList[index].distanceX = e.touches[0].clientX - this.startX;
    },
    touchStart(e, index) {
      this.mainList[index].isRight = true
      this.startX = e.touches[0].clientX;
    },
    touchEnd(index) {
      if (this.mainList[index].distanceX < -((144 / 750) * this.windowWidth)) {
        this.mainList[index].distanceX = -((144 / 750) * this.windowWidth);
      } else {
        this.mainList[index].isRight = false
        this.mainList[index].distanceX = 0;
      }
    }
  }
}
</script>
<style scoped lang="scss">

.order-goods {
  overflow: hidden;
  background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/4fdc9a0f-d72a-46b6-a04d-ed56d5465213.png");
  box-sizing: border-box;

  padding-left: 30rpx;
  padding-right: 30rpx;
  background-size: cover;
  width: 100vw;
  height: 100vh;

  .content3 {
    height: 2000rpx;

    margin-bottom: 166rpx;

    .wrap1 {
      margin-bottom: 20rpx;
      position: relative;
      padding-left: 20rpx;
      border-radius: 20rpx;
      background-color: #fff;
      height: 228rpx;
      display: flex;
      align-items: center;

      .wrap1_4 {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 228rpx;
        width: 154rpx;
        background-color: #B7C0C8;
        right: -144rpx;
        position: absolute;
        z-index: -1;
      }

      .wrap1_3 {
        border-top-right-radius: 20rpx;
        border-bottom-right-radius: 20rpx;
        display: flex;
        margin-left: auto;

        position: relative;
        width: 144rpx;
        height: 228rpx;

        &.status1 {
          background: #FFBA00;

          .wrap1_3_3_1 {
            color: #FFBA00;
          }
        }

        &.status2 {
          background: #76C458;

          .wrap1_3_3_1 {
            color: #76C458;
          }
        }

        &.status3 {
          background: #76C458;

          .wrap1_3_3_1 {
            color: #FF4848;
          }
        }
        &.status4 {
          background: #FF4848;

          .wrap1_3_3_1 {
            color: #FF4848;
          }
        }

        .wrap1_3_2 {
          display: flex;
          flex-direction: column;
          left: 20rpx;
          position: absolute;
          bottom: 60rpx;

          .wrap1_3_2_1 {
            color: #fff;
            font-size: 16rpx;
          }

          .wrap1_3_2_2 {
            color: #fff;
            font-size: 24rpx;

          }
        }

        .wrap1_3_3 {
          padding-top: 18rpx;
          padding-bottom: 18rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          border-top-right-radius: 15rpx;
          left: 4rpx;
          top: 4rpx;
          width: 136rpx;
          background-color: #fff;
          position: absolute;

          .wrap1_3_3_1 {
            text-align: center;

            font-size: 28rpx;
          }
        }

        .wrap1_3_1 {

          padding-bottom: 6rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          border-top-right-radius: 15rpx;
          left: 4rpx;
          top: 4rpx;
          width: 136rpx;
          background-color: #fff;
          position: absolute;

          .wrap1_3_1_1 {
            font-size: 16rpx;
            color: #FF4848;
          }

          .wrap1_3_1_2 {
            font-size: 24rpx;
            color: #FF4848;
          }

          .wrap1_3_1_3 {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8rpx;
            color: #fff;
            font-size: 16rpx;
            width: 110rpx;
            height: 34rpx;
            background-color: #000;
          }
        }
      }

      .wrap1_2 {
        margin-left: 14rpx;
        display: flex;
        flex-direction: column;
        align-items: start;

        .wrap1_2_1 {
          margin-bottom: 12rpx;
          color: #000;
          font-size: 28rpx;
        }

        .wrap1_2_2 {
          margin-bottom: 12rpx;
          color: #808080;
          font-size: 24rpx;

        }

        .wrap1_2_3 {
          margin-bottom: 12rpx;
          color: #808080;
          font-size: 24rpx;
        }

        .wrap1_2_4 {

          color: #FF4848;
          font-size: 24rpx;
        }
      }

      .wrap1_1 {
        image {
          width: 188rpx;
          height: 188rpx;
        }
      }
    }
  }

  .content2 {
    margin-top: 26rpx;
    display: flex;
    justify-content: space-between;

    .wrap2 {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 20rpx;
      color: #fff;
      font-size: 20rpx;
      width: 94rpx;
      height: 52rpx;
      background-color: #4E964D;
    }

    .wrap1 {
      align-items: center;
      display: flex;
      border-radius: 20rpx;
      background-color: rgba(0, 0, 0, 0.5);
      width: 586rpx;
      height: 52rpx;

      .wrap1_2 {
        margin-left: 20rpx;
        margin-right: 20rpx;
        width: 1rpx;
        height: 30rpx;
        background-color: #fff;
      }

      input {

      }

      .wrap1_1 {
        margin-left: 26rpx;

        image {
          width: 28rpx;
          height: 28rpx;
        }
      }
    }
  }

  .content1 {
    display: flex;
    justify-content: space-between;

    .wrap3 {
      font-size: 24rpx;
      color: #fff;
      width: 132rpx;
      height: 52rpx;
      background-color: #76C458;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 20rpx;
    }

    .wrap2 {
      display: flex;
      flex-direction: column;
      align-items: center;

      .wrap2_1 {
        color: #4E964D;
        font-size: 32rpx;

      }

      .wrap2_2 {
        color: #7C9F6F;
        font-size: 16rpx;
      }
    }

    .wrap1 {
      .wrap1_1 {
        justify-content: center;
        border-radius: 20rpx;
        width: 156rpx;
        height: 52rpx;
        background-color: #4E964D;
        color: #fff;
        font-size: 24rpx;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>