guzijian / garbage-removal · Files

<template>
  <view class="content-container">
    <z-paging ref="paging" :fixed="false" v-model="dataList" :auto="false" @query="queryList">
      <empty-view slot:empty></empty-view>
      <view class="page-box">
        <view class="order" v-for="(item, index) in  dataList" :key="index">
          <view class="top">
            <view class="left">
              <u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
              <view class="store">{{ item.garOrderCompanyName }}</view>
              <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
            </view>
            <view v-if="item.garOrderHandlerStatus === 0 && item.garCancelFlag === 0" class="right">待清运 </view>
            <view v-if="item.garCancelFlag === 1" class="right">已取消 </view>
            <view v-if="item.garOrderHandlerStatus === 1 && item.garCancelFlag === 0" class="right">清运中 </view>
            <view v-if="item.garEvaluateFlag === 0 && userType === '居民用户'" class="right">待评价
            </view>
            <view v-if="item.garHandlerEvaluateFlag === 0 && userType === '管理负责人'" class="right">待评价
            </view>
            <view v-if="item.garEvaluateFlag === 1 && userType === '居民用户'" class="right">已评价
            </view>
            <view v-if="item.garHandlerEvaluateFlag === 1 && userType === '管理负责人'" class="right">已评价
            </view>
          </view>
          <view class="item" @click="handleClick(item.garOrderId)">
            <view class="left">
              <image :src="item.goodsUrl" mode="aspectFill"></image>
            </view>
            <view class="content">
              <view class="title u-line-2">{{ item.garOrderAddress + item.garOrderAddressDetails }}</view>
              <view class="type">垃圾类型: {{ item.garOrderTrashType }}</view>
              <view class="delivery-time">预约时间 {{ item.garOrderAgreementTime }}</view>
            </view>
          </view>
          <view class="bottom" v-if="item.garOrderHandlerStatus === 0 && item.garCancelFlag === 0">
            <view class="more">
              <!-- <u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon> -->
            </view>
            <view hover-class="btn-hover" class="logistics btn" @click="handleCancelOrder(item.garOrderId)">取消派单</view>
          </view>
          <!-- 用户对公司评价 -->
          <view class="bottom"
            v-if="item.garEvaluateFlag === 0 && item.garOrderHandlerStatus === 3 && userType === '居民用户'">
            <view class="more">
              <!-- <u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon> -->
            </view>
            <view hover-class="btn-hover" class="logistics btn" @click="handleUserEvaluate(item.garOrderId, userType)">去评价
            </view>
          </view>
          <!-- 公司对用户评价 -->
          <view class="bottom"
            v-if="item.garHandlerEvaluateFlag === 0 && item.garOrderHandlerStatus === 3 && userType === '管理负责人'">
            <view class="more">
              <!-- <u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon> -->
            </view>
            <view hover-class="btn-hover" class="logistics btn" @click="handleUserEvaluate(item.garOrderId, userType)">去评价
            </view>
          </view>
        </view>
      </view>
    </z-paging>
    <u-action-sheet :closeOnClickOverlay="true" :closeOnClickAction="false" @actionSheetClose="handleClose"
      @submitFunction="submitFunction" @select="selectClick" :actions="list" round="15" title="取消派单" :show="cancelShow">
    </u-action-sheet>
  </view>
</template>

<script setup>
import { queryOrderList, updateOrder } from "@/apis/order.js";
import { useMainStore } from '@/stores/index.js';
import { onShow } from "@dcloudio/uni-app";
import { computed, ref, watch } from 'vue';
const props = defineProps({
  tabIndex: {
    type: Number
  },
  currentIndex: {
    type: Number
  }
})

const store = useMainStore();
const userType = computed(() => store.userType)
const currentCancelOrderId = ref("");
const currentCancelName = ref("");
const cancelShow = ref(false)
const list = ref([
  {
    name: '长时间无人接单',
  },
  {
    name: '派单信息填写有误',
  },
  {
    name: '线下协商有问题',
  },
  {
    name: '不需要清运了',
  },
  {
    name: '其他',
  },
  {
    name: '提交',
  }
])
const dataList = ref([]);
const paging = ref(null);
const firstLoaded = ref(false)
/**
 * 取消派单
 * @param {string} orderId
 */
const handleCancelOrder = (orderId) => {
  currentCancelOrderId.value = orderId
  cancelShow.value = true
}
const handleClose = (e) => {
  cancelShow.value = false
}

const selectClick = (index) => {
  currentCancelName.value = index.name;
}
/**
 * 提交取消派单
 */
const submitFunction = (otherReason) => {
  let reason = otherReason
  if (currentCancelName.value != "其他") {
    reason = currentCancelName.value
  }
  if (!reason) {
    uni.$u.toast("请提供取消派单的原因")
    return
  }
  let params = {
    garOrderId: currentCancelOrderId.value,
    garCancelFlag: 1,
    garReason: reason
  }
  updateOrder(params).then(res => {
    if (res.data.success) {
      cancelShow.value = false
      uni.$u.toast(res.data.data)
      paging.value.reload();
    }
  })
}
const handleClick = (orderId) => {
  uni.$u.route({
    url: `pages/order/detail/index`,
    params: {
      orderId: orderId
    }
  })
}

/**
 * 派单评价
 * @param {*} orderId
 */
const handleUserEvaluate = (orderId, userType) => {
  uni.$u.route(`pages/order/evaluate/index?orderId=${orderId}&userType=${userType}`)
}
// list集合
const queryList = (pageNo, pageSize) => {
  //这里的pageNo和pageSize会自动计算好，直接传给服务器即可
  //这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过paging.value.complete(请求回来的数组)将请求结果传给z-paging
  // request.queryList({ pageNo, pageSize }).then(res => {
  //   //请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
  queryOrderList({ type: props.tabIndex, pageNo, pageSize }).then((res) => {
    paging.value.complete(res.data.data.list);
    firstLoaded.value = true
  }).catch(res => {
    //如果请求失败写paging.value.complete(false)，会自动展示错误页面
    //注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
    //在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
    paging.value.complete(false);
  })
}

onShow(() => {
  if (props.currentIndex == props.tabIndex) {
    if (firstLoaded.value) {
      setTimeout(() => {
        paging.value.reload();
      }, 50);
    }
  }
})

// 重写load的方法，自动刷新
watch(() => props.currentIndex, (val1, val2) => {
  if (props.currentIndex == props.tabIndex) {
    if (!firstLoaded.value) {
      setTimeout(() => {
        paging.value.reload();
      }, 50);
    }
  }
}, { immediate: true })
</script>

<style lang="scss" scoped>
.content-container {
  height: 100%;

  .order {
    width: 90%;
    background-color: #ffffff;
    margin: 20rpx auto;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 20rpx;
    font-size: 28rpx;

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

      .left {
        display: flex;
        align-items: center;

        .store {
          margin: 0 10rpx;
          font-size: 32rpx;
          font-weight: bold;
        }
      }
    }

    .item {
      display: flex;
      margin: 20rpx 0 0;

      .left {
        margin-right: 20rpx;

        image {
          width: 200rpx;
          height: 200rpx;
          border-radius: 10rpx;
        }
      }

      .content {

        .title {
          font-size: 28rpx;
          line-height: 50rpx;
        }

        .type {
          margin: 10rpx 0;
          font-size: 24rpx;
          color: $u-tips-color;
        }

        .delivery-time {
          color: #e5d001;
          font-size: 24rpx;
        }
      }


    }

    .total {
      margin-top: 20rpx;
      text-align: right;
      font-size: 24rpx;

      .total-price {
        font-size: 32rpx;
      }
    }

    .bottom {
      display: flex;
      margin-top: 20rpx;
      padding: 0 10rpx;
      justify-content: space-between;
      align-items: center;

      .btn {
        line-height: 52rpx;
        width: 160rpx;
        border-radius: 26rpx;
        border: 2rpx solid $u-border-color;
        font-size: 26rpx;
        text-align: center;
        color: $u-info-dark;
      }

      .btn--hover {
        background-color: $u-success-light;
      }

      .evaluate {
        color: $u-warning-dark;
        border-color: $u-warning-dark;
      }
    }
  }

  .centre {
    text-align: center;
    margin: 200rpx auto;
    font-size: 32rpx;

    image {
      width: 164rpx;
      height: 164rpx;
      border-radius: 50%;
      margin-bottom: 20rpx;
    }

    .tips {
      font-size: 24rpx;
      color: #999999;
      margin-top: 20rpx;
    }

    .btn {
      margin: 80rpx auto;
      width: 200rpx;
      border-radius: 32rpx;
      line-height: 64rpx;
      color: #ffffff;
      font-size: 26rpx;
      background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
    }
  }
}
</style>