kailin_mp/pages/orders/index.vue

<template>
  <view>
    <view class="order_status_list">
      <view class="order_status_item" :class="requestParam.status == 0 ? 'active' : ''" @click="setStatus(0)"> 全部 </view>
      <view class="order_status_item" :class="requestParam.status == 1 ? 'active' : ''" @click="setStatus(1)"> 待付款 </view>
      <view class="order_status_item" :class="requestParam.status == 4 ? 'active' : ''" @click="setStatus(4)"> 已取消 </view>
      <view class="order_status_item" :class="requestParam.status == 8 ? 'active' : ''" @click="setStatus(8)"> 已完成 </view>
    </view>
    <view class="order_list" v-if="orderList.length">
      <view class="order_item" v-for="(item, index) in orderList" :key="index">
        <view @click.stop="goDetail(item.id)">
          <view class="order_title">
            <view class="business_name">{{ item.business_name }}</view>
            <view class="order_status">{{ item.state }}</view>
          </view>
          <view class="product_list" :class="item.contents_class ? 'active' : ''">
            <view class="product_item" v-for="(product_info, k) in item.product_list" :key="k">
              <image class="product_img" :src="product_info.product_thumb" mode=""></image>
              <view class="product_info">
                <view class="product_name"> <text v-if="product_info.is_rebate">【赠】</text> {{ product_info.product_name }} </view>
                <view class="product_spec">
                  {{ product_info.product_spec }}
                </view>
              </view>
              <view class="buy_num"> x{{ product_info.buy_num }} </view>
            </view>
          </view>
          <view class="show_more" v-if="item.product_list.length > 1" @click.stop="changeHeight(index)">
            <uni-icons :type="item.contents_class ? 'up' : 'down'"></uni-icons>
          </view>
          <view class="order_price">
            <view class="pay_total">￥{{ item.pay_total }}</view>
          </view>
        </view>
        <view class="order_btn" v-if="item.status == 0">
          <button v-if="item.regiment_id > 0" class="order_cancel" @click="cancelOrderRegiment(index)">取消拼团</button>
          <button v-else class="order_cancel" @click="cancelOrder(index)">取消订单</button>
          <button class="order_share" @click="toPay(item)">去付款</button>
        </view>
        <view class="order_btn" v-if="item.status == 2 || item.status == 3">
          <button class="order_share" @click="toReceipt(item)">我已收货</button>
        </view>

        <view class="order_btn" v-if="item.status == 1">
          <button class="order_cancel" @click="cancelOrder(index)">取消订单</button>
          <button class="order_share" @click="toReceipt(item)">我已收货</button>
        </view>
        <view class="order_btn" v-if="item.status == 10 && item.is_pay == 0">
          <button class="order_cancel" @click="cancelOrderRegiment(index)">取消拼团</button>
        </view>
      </view>
    </view>
    <Empty text="----- 还没有订单 -----" v-if="!orderList.length" />
    <view class="to_bottom" v-if="isLast && orderList.length"> -----到底啦-----</view>
  </view>
</template>

<script>
import Empty from '@/components/Empty/Empty.vue';

export default {
  components: {
    Empty,
  },
  data() {
    return {
      // 产品列表
      orderList: [],
      // 请求参数
      requestParam: {
        page: 1,
        status: 0,
      },
      // 是否最后一页
      isLast: false,
      // 是否请求中
      isReqing: false,
    };
  },
  onLoad(param) {
    if (param.status) {
      this.requestParam.status = param.status;
    }
  },
  onShow() {
    // 登录提示
    if (!this.$checkAccess.alterLogin()) return;
    // 没有数据的话，或者请求中，不允许刷新
    if (this.isReqing) return;
    // 初始化页码为1
    this.requestParam.page = 1;
    // 是否是最后一页
    this.isLast = false;
    // 设置请求中
    this.isReqing = true;
    // 请求列表
    this.$http.request('api/orders/get_list', this.requestParam).then((re) => {
      // 设置非请求中
      this.isReqing = false;
      // 成功结果
      if (re.code == 'success') {
        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
        this.orderList = re.data.data;
      }
    });
  },
  onPullDownRefresh() {
    // 登录提示
    if (!this.$checkAccess.alterLogin()) return;
    // 如果请求中，不允许请求，
    if (this.isReqing) return false;
    // 初始化页码为1
    this.requestParam.page = 1;
    // 是否是最后一页
    this.isLast = false;
    // 设置请求中
    this.isReqing = true;
    // 请求列表
    this.$http.request('api/orders/get_list', this.requestParam).then((re) => {
      // 设置非请求中
      this.isReqing = false;
      // 成功结果
      if (re.code == 'success') {
        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
        this.orderList = re.data.data;
      }
    });
    uni.stopPullDownRefresh();
  },
  onReachBottom() {
    // 登录提示
    if (!this.$checkAccess.alterLogin()) return;
    // 如果页码是0，避免第一页重复
    if (this.requestParam.page < 1) return;
    // 最后一页不请求
    if (this.isLast) return;
    // 请求中，不再请求
    if (this.isReqing) return;
    // 增加一页
    this.requestParam.page = this.requestParam.page + 1;
    // 设置请求中
    this.isReqing = true;
    // 请求列表
    this.$http.request('api/orders/get_list', this.requestParam).then((re) => {
      // 设置非请求中
      this.isReqing = false;
      // 成功结果
      if (re.code == 'success') {
        if (re.data.last_page <= this.requestParam.page) this.isLast = true;
        // 追加数据
        this.orderList.push(...re.data.data);
      }
    });
  },
  methods: {
    setStatus(status) {
      // 登录提示
      if (!this.$checkAccess.alterLogin()) return;
      // 请求中，不再请求
      if (this.isReqing) return;
      // 初始化页码为1
      this.requestParam.page = 1;
      // 是否是最后一页
      this.isLast = false;
      // 状态变更
      this.requestParam.status = status;
      // 设置请求中
      this.isReqing = true;
      // 请求列表
      this.$http.request('api/orders/get_list', this.requestParam).then((re) => {
        // 设置非请求中
        this.isReqing = false;
        // 成功结果
        if (re.code == 'success') {
          if (re.data.last_page >= this.requestParam.page) this.isLast = true;
          this.orderList = re.data.data;
        }
      });
    },
    changeHeight(index) {
      this.orderList[index].contents_class = this.orderList[index].contents_class ? 0 : 1;
    },
    // 取消订单
    cancelOrder(index) {
      uni.showModal({
        title: '确认取消该订单?',
        success: (res) => {
          if (res.confirm) {
            // 请求列表
            this.$http.request('api/orders/cancel', { id: this.orderList[index].id }).then((re) => {
              this.orderList[index].state = '已取消';
              this.orderList[index].status = 4;
            });
          }
        },
      });
    },
    toPay(item) {
      if (item) {
        let orderInfo = {
          snowflake_id: item.snowflake_id,
          pay_total: item.pay_total,
          order_id: item.id,
        };
        orderInfo = JSON.stringify(orderInfo);
        let params = encodeURIComponent(orderInfo);
        // 跳转到确认支付页面
        uni.navigateTo({ url: `/pages/orders/confirm?params=${params}` });
      } else {
        uni.showToast({
          title: '订单数据错误',
          icon: 'none',
        });
        return;
      }
    },
    // 取消拼团
    cancelOrderRegiment(index) {
      uni.showModal({
        title: '确认取消该订单?',
        success: (res) => {
          if (res.confirm) {
            // 请求列表
            this.$http.request('api/orders/cancel_regiment', { id: this.orderList[index].id }).then((re) => {
              this.orderList[index].state = '已取消';
              this.orderList[index].status = 4;
            });
          }
        },
      });
    },
    navToProduct(id) {
      if (id) {
        uni.navigateTo({
          url: '/pages/product/index?product_id=' + id,
        });
      }
    },
    toReceipt(item) {
      uni.navigateTo({
        url: '/pages/orders/receipt?order_id=' + item.id,
      });
    },
    goDetail(id) {
      uni.navigateTo({
        url: '/pages/orders/detail?order_id=' + id,
      });
    },
  },
};
</script>

<style lang="less">
.order_status_list {
  display: block;
  height: 60rpx;
  color: #666666;
  line-height: 60rpx;
  background: #ffffff;
  padding: 10rpx 35rpx;
  .order_status_item {
    float: left;
    font-size: 28rpx;
    padding: 0rpx 20rpx;
  }
  .order_status_item.active {
    color: #000000;
    font-weight: bold;
  }
}
.order_list {
  display: block;
  overflow: hidden;
  margin: 0rpx auto;
  .order_item {
    display: block;
    background: #ffffff;
    margin: 0rpx auto;
    padding: 0rpx 35rpx;
    margin-bottom: 10rpx;
    .order_title {
      width: 100%;
      height: 60rpx;
      display: block;
      overflow: hidden;
      line-height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .business_name {
        float: left;
        font-size: 32rpx;
        display: flex;
        align-items: center;
        .business_icon {
          width: 48rpx;
          height: 48rpx;
          margin-right: 10rpx;
        }
      }
      .order_status {
        float: right;
        color: #999999;
        font-size: 24rpx;
      }
    }
    .product_list {
      display: block;
      height: 100rpx;
      overflow: hidden;
      margin: 15rpx auto;
      transition: all 1s ease-out; /* 添加过渡效果 */
      .product_item {
        display: block;
        height: 100rpx;
        overflow: hidden;
        .product_img {
          float: left;
          width: 80rpx;
          height: 80rpx;
          display: block;
          margin-top: 10rpx;
          margin-right: 30rpx;
        }
        .product_info {
          float: left;
          width: 480rpx;
          height: 100rpx;
          display: block;
          overflow: hidden;
          .product_name {
            display: block;
            height: 60rpx;
            display: block;
            font-size: 28rpx;
            line-height: 60rpx;
            overflow: hidden;
          }
          .product_spec {
            color: #999999;
            height: 40rpx;
            display: block;
            font-size: 24rpx;
            line-height: 40rpx;
            overflow: hidden;
          }
        }
        .buy_num {
          float: right;
          height: 100rpx;
          color: #999999;
          font-size: 26rpx;
          text-align: right;
          position: relative;
          line-height: 100rpx;
        }
      }
    }
    .product_list.active {
      height: auto !important;
    }

    .order_price {
      display: block;
      height: 60rpx;
      overflow: hidden;
      line-height: 60rpx;
      .pay_total {
        float: right;
        height: 60rpx;
        color: #f89c33;
        font-size: 28rpx;
        line-height: 60rpx;
      }
    }
    .show_more {
      width: 100%;
      height: 30rpx;
      display: block;
      font-size: 20rpx !important;
      margin-top: -30rpx;
      text-align: center;
      position: relative;
      background-color: rgba(0, 0, 0, 0.05);
    }
    .order_btn {
      display: block;
      height: 60rpx;
      overflow: hidden;
      .order_cancel {
        float: left;
        height: 50rpx;
        color: #999999;
        font-size: 24rpx;
        padding: 0rpx 10rpx;
        line-height: 50rpx;
        margin-left: 10rpx;
        border-radius: 25rpx;
        border: 2rpx solid #999999;
        background-color: transparent;
      }
      .order_cancel::after {
        border: none;
      }
      .order_share {
        float: right;
        height: 50rpx;
        color: #f89c33;
        font-size: 24rpx;
        padding: 0rpx 10rpx;
        line-height: 50rpx;
        margin-left: 10rpx;
        border-radius: 25rpx;
        border: 2rpx solid #f89c33;
        background-color: transparent;
      }
      .order_share::after {
        border: none;
      }
    }
  }
}
</style>