xuxueyang
2024-07-30 1fb44496929548b4f07b37796d506dedc494d44a
sub_pages/partner/delivery/delivery.vue
@@ -1,207 +1,254 @@
<script>
export default {
  data() {
    return {
      query: {
        supplierName: '',
        stationId: '',
        stationName: '',
        statusStr:'',
        status:'',
      },
      show_select_station: false,
      show_select_status: false,
   export default {
      data() {
         return {
            query: {
               supplierName: '',
               stationId: '',
               stationName: '',
               statusStr: '',
               status: '',
            },
            show_select_station: false,
            show_select_status: false,
      columns_station: [],
      status_columns:[],
    }
  },
  onLoad() {
    this.listApi = '/api/delivery/list/today'
    this.getList()
    this.$http.request('get', '/api/station/list', {
      params: {}
    }).then(res => {
      var data = res.data
      this.columns_station = [data || []]
    })
    this.$http.request('get', '/api/code/value', {
      params: {
        type: 'DELIVERY_ORDER_STATUS'
      }
    }).then(res => {
      var data = res.data
      this.status_columns = [data || []]
      this.status_columns[0].unshift({
        label: '全部',
        value: ''
      })
    })
            columns_station: [],
            status_columns: [],
         }
      },
      onLoad() {
         this.listApi = '/api/delivery/list'
         this.getList()
         this.$http.request('get', '/api/station/list', {
            params: {}
         }).then(res => {
            var data = res.data
            this.columns_station = [data || []]
         })
         this.$http.request('get', '/api/code/value', {
            params: {
               type: 'DELIVERY_ORDER_STATUS'
            }
         }).then(res => {
            var data = res.data
            this.status_columns = [data || []]
            this.status_columns[0].unshift({
               label: '全部',
               value: ''
            })
         })
  },
  onReachBottom() {
    this.page.current += 1
    this.getMore()
  },
  async onPullDownRefresh() {
    this.page.current = 1
    await this.getList()
    uni.stopPullDownRefresh()
  },
  methods: {
    select_station(e) {
      this.show_select_station = false
      this.query.stationName = e.value[0].name
      this.query.stationId = e.value[0].id
      this.refreshList()
    },
    select_status(e) {
      this.show_select_status = false
      this.query.statusStr = e.value[0].name
      this.query.status = e.value[0].id
      this.refreshList()
    },
    toDetail(item) {
      uni.navigateTo({
        url: `//sub_pages/partner/delivery/delivery-detail?id=${item.id}`
      })
    },
    async compelete(item) {
      await this.$message.confirm("是否完成此单质检")
      },
      onReachBottom() {
         this.getMore()
      },
      async onPullDownRefresh() {
         this.page.current = 1
         await this.getList()
         uni.stopPullDownRefresh()
      },
      methods: {
         buttonSearchFlow() {
            this.refreshList()
         },
         select_station(e) {
            this.show_select_station = false
            this.query.stationName = e.value[0].name
            this.query.stationId = e.value[0].id
            this.refreshList()
         },
         select_status(e) {
            this.show_select_status = false
            this.query.statusStr = e.value[0].name
            this.query.status = e.value[0].id
            this.refreshList()
         },
         toDetail(item) {
            uni.navigateTo({
               url: `/sub_pages/partner/delivery/delivery-detail?id=${item.id}`
            })
         },
         async compelete(item) {
            await this.$message.confirm("是否完成此单质检")
      const {code, data} = this.$http.request('get', '/api/delivery/list/view/complete', {
        params: {
          id: item.id
        }
      })
      if (code === 0) {
        this.$message.showToast('完成成功')
        setTimeout(() => {
          this.refreshList()
        }, 200)
      }
    }
  }
}
            const {
               code,
               data
            } = this.$http.request('get', '/api/delivery/list/view/complete', {
               params: {
                  id: item.id
               }
            })
            if (code === 0) {
               this.$message.showToast('完成成功')
               let tmp = this
               setTimeout(() => {
                  tmp.refreshList()
               }, 200)
            }
         }
      }
   }
</script>
<template>
  <!-- 列表页面 -->
  <view class="page-delivery">
    <view class="p15" style="min-height: calc(100vh - 260rpx);">
      <view class="search-container m-t-12 flex">
        <view class="flex1 input">
          <u-input placeholder="请输入花名" v-model="search_flow">
            <template slot="suffix">
              <uni-icons color="#20613D" type="search" size="24" @tap="buttonSearchFlow"></uni-icons>
            </template>
          </u-input>
        </view>
      </view>
      <view class="component-filter-container">
        <view class="flex1" @click="show_select_status=true">
          配送单状态:{{ query.statusStr || '全部' }}
          <image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
        </view>
   <!-- 列表页面 -->
   <view class="page-delivery">
      <view class="p15" style="min-height: calc(100vh - 260rpx);">
         <view class="search-container m-t-12 flex">
            <view class="flex1 input">
               <u-input placeholder="请输入供应商名称" v-model="query.supplierName">
                  <template slot="suffix">
                     <uni-icons color="#20613D" type="search" size="24" @tap="buttonSearchFlow"></uni-icons>
                  </template>
               </u-input>
            </view>
         </view>
         <view class="component-filter-container p20 bg-white">
            <view class="flex1" @click="show_select_status=true">
               配送单状态:{{ query.statusStr || '全部' }}
               <image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
            </view>
        <view class="flex1" @click="show_select_station=true">
          集货站:{{ query.stationName || '全部' }}
          <image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
        </view>
      </view>
            <view class="flex1" @click="show_select_station=true">
               集货站:{{ query.stationName || '全部' }}
               <image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
            </view>
         </view>
      <no-data v-if="!list||list.length===0" style="width: 100%;"></no-data>
      <view v-for="(item,index) in list" :key="index" class="m-b-24">
        <view class="delivery-item">
          <view class="title">{{ item.supplierName }}</view>
          <view class="line-gray"></view>
          <view class="form-item">
            <view class="form-item-label">订单单号:</view>
            <view class="form-item-value">{{ item.orderNo || '-' }}</view>
          </view>
          <view class="form-item">
            <view class="form-item-label">集货站名称:</view>
            <view class="form-item-value">{{ item.stationName || '-' }}</view>
          </view>
          <view class="form-item">
            <view class="form-item-label">配送单状态:</view>
            <view class="form-item-value">{{ item.levelStr || '-' }}</view>
          </view>
          <view class="form-item">
            <view class="form-item-label">送达时间</view>
            <view class="form-item-value">{{ item.arriveTime || '-' }}</view>
          </view>
          <view class="form-item">
            <view class="form-item-label">供货总数</view>
            <view class="form-item-value">{{ item.totalNum || '-' }}</view>
          </view>
          <view class="line-gray"></view>
          <view class="flex">
            <view class="button button-2 m-l-a m-r-0" @click="toDetail(item)">前往质检</view>
            <view class="button button-1 m-l-15 m-r-0" @click="compelete(item)">质检完成</view>
          </view>
        </view>
      </view>
    </view>
         <no-data v-if="!list||list.length===0" style="width: 100%;"></no-data>
         <view v-for="(item,index) in list" :key="index" class="m-b-24">
            <view class="delivery-item bg-white br-4 p10">
               <view class="title">供应商:{{ item.supplierName }}</view>
               <view class="line-gray"></view>
               <view class="form-item">
                  <view class="form-item-label">订单单号</view>
                  <view class="form-item-value">{{ item.orderNo || '-' }}</view>
               </view>
               <view class="flex">
                  <view class="form-item flex1">
                     <view class="form-item-label">集货站</view>
                     <view class="form-item-value">{{ item.stationName || '-' }}</view>
                  </view>
    <!-- 判断是否到底了,自动吧 -->
    <footer-msg :more="page.total>0&&page.total>page.current*page.size"></footer-msg>
    <u-picker @confirm="select_station" keyName="name" @cancel="show_select_station=false"
              :show="show_select_station" :columns="columns_station"></u-picker>
    <u-picker @confirm="select_status" keyName="name" @cancel="show_select_status=false"
              :show="show_select_status" :columns="status_columns"></u-picker>
               </view>
               <view class="flex">
                  <view class="form-item flex1">
                     <view class="form-item-label">状态</view>
                     <view class="form-item-value">{{ item.statusStr || '-' }}</view>
                  </view>
                  <view class="form-item flex1">
                     <view class="form-item-label">供货总数</view>
                     <view class="form-item-value">{{ item.totalNum || '-' }}</view>
                  </view>
               </view>
               <view class="form-item flex1">
                  <view class="form-item-label">送达时间</view>
                  <view class="form-item-value">{{ item.arriveTime || '-' }}</view>
               </view>
  </view>
               <view class="line-gray" v-if="item.status==='ARRIVED'"></view>
               <view class="flex buttons" v-if="item.status==='ARRIVED'">
                  <view class="button button-0 m-l-a m-r-0" @click="toDetail(item)">前往质检</view>
                  <view class="button button-1 m-l-15 m-r-0" @click="compelete(item)">质检完成</view>
               </view>
            </view>
         </view>
      </view>
      <!-- 判断是否到底了,自动吧 -->
      <footer-msg :more="page.total>0&&page.total>page.current*page.size"></footer-msg>
      <u-picker @confirm="select_station" keyName="name" @cancel="show_select_station=false"
         :show="show_select_station" :columns="columns_station"></u-picker>
      <u-picker @confirm="select_status" keyName="name" @cancel="show_select_status=false" :show="show_select_status"
         :columns="status_columns"></u-picker>
   </view>
</template>
<style lang="scss" scoped>
.page-delivery {
  .delivery-item {
    .title {
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
      line-height: 40rpx;
    }
   .page-delivery {
      .delivery-item {
         .title {
            font-weight: 600;
            font-size: 32rpx;
            color: #000000;
            line-height: 40rpx;
         }
    .button {
      min-width: 122rpx;
      text-align: center;
      height: 48rpx;
      line-height: 48rpx;
      border-radius: 28rpx;
      border: 2rpx solid #20613D;
      font-size: 24rpx;
      color: #20613D;
    }
  }
         .form-item {
            line-height: 40rpx;
            font-size: 28rpx;
            color: #666;
            display: flex;
  .search-container {
    display: flex;
    margin: 12rpx 0rpx 20rpx 0rpx;
    position: relative;
    z-index: 1;
            .form-item-label {
               min-width: 120rpx;
            }
    .input {
      // flex: 1;
      // max-width: 400rpx;
      background-color: #fff !important;
      // line-height: 58rpx;
      // height: 58rpx;
      border-radius: 8rpx;
    }
            .form-item-label::after {
               content: ":";
               margin-right: 20rpx;
            }
         }
    .button {
      min-width: 120rpx;
      max-width: 120rpx;
      margin-left: auto;
      margin-right: 0rpx;
      text-align: right;
      line-height: 70rpx !important;
      // height: 58rpx !important;
      // display: flex;
    }
  }
}
         .buttons {
            display: flex;
            margin-left: auto;
            width: fit-content;
            .button {
               // width: 216rpx;
               padding: 10rpx 20rpx;
               line-height: 34rpx;
               font-size: 24rpx;
               height: 34rpx;
               background: #20613D;
               text-align: center;
               border-radius: 30rpx;
            }
            .button-1 {
               background: #fff;
               color: #333;
               border: 2rpx solid #333;
            }
            .button-0 {
               color: #fff;
               border: 2rpx solid #20613D;
            }
         }
      }
      .search-container {
         display: flex;
         margin: 12rpx 0rpx 20rpx 0rpx;
         position: relative;
         z-index: 1;
         .input {
            // flex: 1;
            // max-width: 400rpx;
            background-color: #fff !important;
            // line-height: 58rpx;
            // height: 58rpx;
            border-radius: 8rpx;
         }
         .button {
            min-width: 120rpx;
            max-width: 120rpx;
            margin-left: auto;
            margin-right: 0rpx;
            text-align: right;
            line-height: 70rpx !important;
            // height: 58rpx !important;
            // display: flex;
         }
      }
   }
</style>