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

<template>
  <div class="order-goods">
    <title-block title="订单库">
      <template #left>
        <u-action-sheet
            :show="show"
            :actions="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 === artworkStatus).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>

    <div class="content3">
      <scroll-view :style="{height:`${elementBottom}rpx`}" class="scrollbox" :scroll-y="true" @scrolltolower="loadMore">
        <div
            v-for="(item,index) in mainList" :key="index"
            @touchstart="(e)=>{touchStart(e,index)}"
            @touchmove="(e)=>{touchMove(e,index)}"
            @touchend="()=>{touchEnd(index)}"
            @click="goRouter(item)"
            :style="{transform: `translateX(${item.distanceX}px)`}" class="wrap1">
          <div class="wrap1_1">
            <image :src="item.artworkImg?item.artworkImg:'../../static/jx632@3x.png'"></image>
          </div>
          <div class="wrap1_2">
            <div class="wrap1_2_1">{{ item.artworkName }}</div>
            <div class="wrap1_2_2">订单号:{{ item.artworkName }}</div>
            <div class="wrap1_2_3">{{ item.artworkSquareSize }}平尺</div>
            <div class="wrap1_2_4">{{ item.startAt }}-{{ item.endAt }}</div>
          </div>
          <div class="wrap1_3" :class="[`status${item.artworkStatus}`]">
            <div class="wrap1_3_1" v-if="item.artworkStatus===4">
              <div class="wrap1_3_1_1">{{ item.endAt }}</div>
              <div class="wrap1_3_1_2">已延期</div>
              <div class="wrap1_3_1_3" @click.stop="openShow2(item)">点击补款</div>
            </div>
            <div class="wrap1_3_3" v-if="item.artworkStatus!==4">
              <div class="wrap1_3_3_1">{{ statusValue.find(x => x.value === item.artworkStatus).label }}</div>
            </div>
            <div class="wrap1_3_2">
              <div class="wrap1_3_2_1">货架号:</div>
              <div class="wrap1_3_2_2">{{ item.shelvesNum }}</div>
            </div>
          </div>
          <div class="wrap1_4" v-if="item.isRight&&item.artworkStatus===5" @click.stop="openDelete(item)">
            <image style="width: 80rpx;height: 80rpx" src="../../static/zu154@3x.png"></image>
          </div>
        </div>
      </scroll-view>
    </div>
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog :type="'info'" cancelText="关闭" confirmText="确认" title="提示" :content="messageText"
                        @confirm="popForward"
      ></uni-popup-dialog>
    </uni-popup>
    <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 {
      messageText: '',
      show_1: false,
      show: false,
      mobileKey: '',
      startX: 0,
      windowWidth: 0,
      page: 1,
      elementBottom: '',
      item: null,
      artworkStatus: 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
      }
    })
    this.getDistanceFromTopToPageBottom('.content3')
  },
  computed: {},
  methods: {
    popForward() {

      if (this.messageText === '确认补款吗') {
        this.supplementaryPayment()
      } else if (this.messageText === '确认删除吗') {
        this.deleteClick()
      }
    },
    openShow2(item) {
      this.item = item
      this.messageText = `确认补款吗`
      this.$refs.alertDialog.open()
    },
    async supplementaryPayment() {
      const data = {
        ID: this.item.ID
      }
      const res = await postDataByParams('/api/warehouse/supply/paid', data)
      if (res.code===200){
        uni.showToast({
          title: '补款成功',
          icon: 'none'
        })
      }else {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    },
    async getDistanceFromTopToPageBottom(classValue) {
      const {windowHeight, windowWidth} = await uni.getSystemInfo();
      const [{top}] = await new Promise(resolve => uni.createSelectorQuery().select(classValue).boundingClientRect().exec(resolve));
      this.elementBottom = ((windowHeight - top) / windowWidth) * 750 - 175;
    },
    openDelete(item) {
      this.messageText = `确认删除吗`
      this.$refs.alertDialog.open()
      this.item = item
    },
    async deleteClick() {
      this.show_1 = false
      const data = {
        ID: this.item.ID
      }
      const res = await postDataByParams('/api/warehouse/remove', data)
      if (res.code === 200) {
        this.getData()
        uni.showToast({
          title: '删除成功',
          icon: 'none'
        })
      } else {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
      }


    },
    goRouter(item) {
      uni.navigateTo({
        url: `/pages/order-goods/order-details?ID=${item.ID}`
      })
    },
    search() {
      this.getData()
    },
    statusSelect(data) {
      this.artworkStatus = data.value
      this.getData()
    },
    openStatus() {
      this.show = true
    },
    loadMore() {
      console.log('loadMore')
    },
    async getData() {
      const data = {
        page: this.page, //分页
        pageSize: this.pageSize, //每页数据量
        status: this.artworkStatus, //状态(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)
        })
      } else {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    },
    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;
  box-sizing: border-box;
  background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/4fdc9a0f-d72a-46b6-a04d-ed56d5465213.png");
  padding-left: 30rpx;
  padding-right: 30rpx;
  background-size: cover;
  width: 100vw;
  height: 100vh;

  .content3 {
    margin-top: 20rpx;

    margin-bottom: 300rpx;

    .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;

        &.status5 {
          background: #939393;

          .wrap1_3_3_1 {
            color: #939393;
          }
        }

        &.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>