guzijian / garbage-removal · Files

<template>
  <view class="content-container">
    <z-paging ref="paging" :fixed="false" v-model="dataList" @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 style="display: flex;align-items: center;">
              <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>
            <view v-if="item.garEvaluateFlag === 0 && userType === '用户'" class="right">待评价
            </view>
            <view v-if="item.garTimeOutFlag === 1" class="right" style="color: red;">超时取消
            </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="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 === '运输企业负责人'  && item.haveEvaluateOfClient==1">
            <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 { onLoad } from "@dcloudio/uni-app";
import { computed, ref } from 'vue';
const store = useMainStore();
const userType = computed(() => store.userType)
const currentCancelOrderId = ref("");
const currentCancelName = ref("");
const cancelShow = ref(false);
const type = ref(0);
const evaluateFlag = ref();
const list = computed(() => {
  let reason = [
    {
      name: '订单信息填写有误',
    },
    {
      name: '线下协商有问题',
    },
    {
      name: '不需要清运了',
    },
    {
      name: '其他',
    },
    {
      name: '提交',
    }
  ]
  if (userType.value === '用户') {
    reason.unshift({
      name: '长时间无人接单',
    })
  }
  return reason
})
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
}

/**
 * 跳转公司详情
 * @param {*} val
 */
const goDetail = (val) => {
  uni.$u.route({
    url: `pages/home-info/clean/company-detail/index?companyId=${val.garOrderCompanyId}`,
  })
}

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("取消成功")
      paging.value.reload();
    }
  })
}
const handleClick = (orderId) => {
  uni.$u.route({
    url: `pages/order-info/order-other/detail/index`,
    params: {
      orderId: orderId
    }
  })
}

/**
 * 订单评价
 * @param {*} orderId
 */
const handleUserEvaluate = (orderId, userType) => {
  uni.$u.route(`pages/order-info/order-other/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: type.value, evaluateFlag: evaluateFlag.value, 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);
  })
}

onLoad((options) => {
  type.value = options.type;
  uni.setNavigationBarTitle({
    title: options.title
  })
  if (options.evaluateFlag) {
    evaluateFlag.value = options.evaluateFlag;
  }
})

</script>

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

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

    &:active {
      background-color: #f3f4f6;
      opacity: 0.8;
      transition: opacity 0.3s;
      -webkit-transition: opacity 0.3s;
      -moz-transition: opacity 0.3s;
      -ms-transition: opacity 0.3s;
    }

    .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;
      align-items: center;
      margin: 20rpx 0 0;

      .left {
        margin-right: 20rpx;

        image {
          width: 160rpx;
          height: 160rpx;
          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>