applet/pages/groupBuying/myGbOrder/list.vue

<template>
  <view class="container">
    <view class="topview" :style="{ top: tabTop + 'px' }">
      <!--订单类型选择-->
      <scroll-view scroll-x="true" class="scrollbox">
        <view class="order-type u-flex-center">
          <view
            class="type-name u-font26 u-181818"
            :class="{ active: isChange == index }"
            v-for="(item, index) in orderType"
            :key="index"
            @click="clickBtn(index)"
          >
            {{ item }}
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="plrbottom">
      <!--订单列表-->
      <view class="order-list" v-for="item in orderList" :key="item.id">
        <view class="u-bg-fff order-item" @click="goGbOrderDetails(item)">
          <view class="u-shop-teile-pd">
            <view class="u-text1 viewWidthTitle">
              <text class="iconfont2 u-font34 u-bold" style="color: #fa6138"
                >&#xe611;</text
              >
              <text class="u-1A1A1A u-font30 u-ml15">{{ item.shop_name }}</text>
              <text class="u-CCC right-icon iconfont">&#xe6c7;</text>
            </view>

            <text class="u-FF0000 u-font28" v-if="item.pay_status == 0"
              >待付款</text
            >

            <text
              class="u-FF0000 u-font28"
              v-if="
                item.pay_status == 5 && (item.status == 0 || item.status == 1)
              "
              >待成团</text
            >
            <text
              class="u-FF0000 u-font28"
              v-if="item.pay_status == 5 && item.status == 2"
              >组团成功</text
            >
            <text
              class="u-FF0000 u-font28"
              v-if="item.status == 3 || item.status == 4"
              >组团失败</text
            >
          </view>

          <view class="u-border-one-one"></view>
          <view v-if="orderList.length > 0">
            <!-- <ldgoods :value="item" :isGroup="true" @click.native="goProductDetails(item)"></ldgoods> -->

            <view class="details-top">
              <view class="details-left">
                <image
                  :src="`${item.goods_cover}?x-oss-process=style/w_350`"
                  v-if="item.goods_cover"
                  class="u-goods200 u-ml15"
                  mode=""
                ></image>
                <image
                  :src="`${item.goods_img}?x-oss-process=style/w_350`"
                  v-if="item.goods_img"
                  class="u-goods200 u-ml15"
                  mode=""
                ></image>
              </view>
              <view class="details-right">
                <view class="right-top">
                  {{ item.goods_title }}
                </view>
                <view class="specifications">
                  规格：{{ item.sku_set_name }}
                </view>
                <view class="amount-of-money">
                  <view
                    style="font-size: 26rpx"
                    v-if="item.real_price % 1 === 0"
                  >
                    ￥{{ item.real_price }}.00
                  </view>
                  <view style="font-size: 26rpx" v-else>
                    ￥{{ item.real_price }}0
                  </view>
                  <text class="group">{{ item.group_people_num }}人拼</text>
                </view>
              </view>
            </view>

            <view class="u-text-right u-plr30 u-mt20">
              <view class="u-flex" style="justify-content: flex-end">
                <view class="u-text-right">
                  共{{ item.number }}件商品, 总金额
                </view>
                <view class="u-FF0000">
                  <rich-text
                    :nodes="$mUtil.priceBigSmall(item.total_amount)"
                  ></rich-text>
                </view>
                <text v-if="item.total_point > 0"
                  >，总积分：{{ item.total_point }}</text
                >
              </view>

              <view class="u-mt10">含运费￥{{ item.real_freight }}</view>
              <view class="u-flex-column-end u-mt30">
                <view class="u-flex">
                  <!--去付款-->
                  <view class="u-flex-center">
                    <view v-if="item.pay_status == 0">
                      <text class="iconfont">&#xe681;</text> 支付剩余（{{
                        item | dateFilter
                      }})
                    </view>
                    <view
                      class="btn-item u-text-center u-FF0000 br-FF0000"
                      v-if="item.pay_status == 0"
                      @click.stop="goGbOrderDetails(item)"
                      >去付款</view
                    >
                    <view
                      class="btn-item u-text-center u-060606 br-999"
                      v-if="item.pay_status != 0"
                      @click.stop="goGbOrderDetails(item)"
                      >查看详情</view
                    >
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <loadMore v-if="orderList.length > 0" :status="status"></loadMore>
      <nodata v-else :config="{ top: 15, content: '暂无订单~' }"></nodata>
    </view>
    <!--页面加载动画-->
    <ldLoading isFullScreen :active="loading"></ldLoading>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import {
  onLoad,
  onUnload,
  onReachBottom,
  onPullDownRefresh,
} from "@dcloudio/uni-app";

// 响应式数据
const list = ref(1);

const isChange = ref(0);
const timeCount = ref(0);
const timer = ref(null);
const orderType = ref(["全部订单", "待付款", "待成团", "组团成功", "组团失败"]);
const loading = ref(true);
const orderList = ref([]);
const status = ref("more");
const noData = ref(false);
const parmas = reactive({
  page: 1,
  limit: 10,
});
const orderid = ref(null);
const currentKey = ref(null);
const tabTop = ref(0);

// 全局变量
let vObj;
const app = getApp();

// 页面生命周期
onLoad((options) => {
  vObj = getCurrentInstance().proxy;

  timer.value = setInterval(() => {
    timeCount.value++;
  }, 1000);

  tabTop.value = app.globalData.barHeight + 44;

  if (options.keys) {
    // 处理选项
  }
  getOrderList();
});

onUnload(() => {
//   console.log(66666666);
  clearInterval(timer.value);
});

onReachBottom(() => {
  status.value = "loading";
  parmas.page++;
  getOrderList();
});

onPullDownRefresh(() => {
  rest();
  getOrderList();
});

// 过滤器函数
const dateFilter = (item) => {
  let time = item.pay_expire_time - item.now_millis - vObj.timeCount * 1000;
  let str = vObj.$mUtil.countDownClock(time);
  return str;
};

const payStatus = (val) => {
  switch (val) {
    case 0:
      return "待支付";
    case 1:
      return "待发货";
    case 2:
      return "部分发货";
    case 3:
      return "待收货";
    case 4:
      return "已收货";
    case 5:
      return "待评价";
    case 6:
      return "关闭";
    default:
      return "";
  }
};

const payStatusRight = (val) => {
  switch (val) {
    case 0:
      return "申请退款中";
    case 1:
      return "商家同意";
    case 4:
      return "商家发起退款支付";
    case 5:
      return "退款成功";
    case 6:
      return "商家拒绝";
    default:
      return "";
  }
};

const payStatusRights = (val) => {
  switch (val) {
    case 0:
      return "申请退款/退货中";
    case 1:
      return "等待买家发货";
    case 2:
      return "待商家收货";
    case 3:
      return "商家已收货";
    case 4:
      return "商家待打款";
    case 5:
      return "退款/退货成功";
    case 6:
      return "商家拒绝";
    case 7:
      return "自动关闭";
    case 8:
      return "撤销";
    default:
      return "";
  }
};

// 方法定义
const goGbOrderDetails = (item) => {
  if (item.pay_status == 0) {
    uni.navigateTo({
      url: `./gbOrderDetails?id=${item.pay_order_id}&status=waitpay`,
    });
  } else {
    uni.navigateTo({
      url: `./gbOrderDetails?id=${item.order_id}&groupId=${item.id}&status=pay`,
    });
  }
};

const goProductDetails = (item) => {
  uni.navigateTo({
    url: "/pages/product/goods/puzzleGoods?id=" + item.group_buy_goods_id,
  });
};

const goPhone = (phone) => {
  if (phone) {
    uni.makePhoneCall({
      phoneNumber: phone,
    });
  }
};

const lookLoginsList = (orderid, num, img, type) => {
  uni.navigateTo({
    url: `../logistics?id=${orderid}&num=${num}&img=${img}&type=${type}`,
  });
};

const goRefundType = (i, code, time, list, orderid, childid) => {
  uni.setStorageSync("blackgoodsList", list);
  if (i == 1) {
    uni.navigateTo({
      url: `applicationDrawback?keystatus=${i}&title=申请退款&orderid=${orderid}`,
    });
  } else {
    uni.navigateTo({
      url: `refundType?order_code=${code}&format_order_time=${time}&keystatus=${i}&orderid=${orderid}&childid=${childid}`,
    });
  }
};

const sureGetOrder = (id, k) => {
  uni.showModal({
    title: "提示",
    content: "确定已经收到了该商品？",
    success: (res) => {
      if (res.confirm) {
        globalThis.$http
          .post("/order/receipt", {
            order_id: id,
          })
          .then((res) => {
            if (res && res.code == 200) {
              globalThis.$mUtil.toast("收货成功");
              rest();
              if (k == 1) {
                getOrderList();
              } else if (k == 2) {
                otherPay(currentKey.value);
              }
            }
          });
      }
    },
  });
};

const otherFun = (object) => {
  if (object) {
    console.log(object.addressid);
    globalThis.$http
      .put("/order/update-receipt/" + orderid.value + "/" + object.addressid)
      .then((res) => {
        if (res && res.code == 200) {
          globalThis.$mUtil.toast("修改成功");
        }
      });
  }
};

const changeAddress = (id) => {
  orderid.value = id;
  uni.navigateTo({
    url: "/pages/user/address/addressList",
  });
};

const rest = () => {
  parmas.page = 1;
  orderList.value = [];
};

const getOrderList = () => {
  globalThis.$http.get("/groupbuy/team/my", parmas).then((res) => {
    loading.value = false;
    if (res && res.code == 200) {
      uni.stopPullDownRefresh();
      orderList.value = orderList.value.concat(res.page.list);
      if (orderList.value.length == 0) {
        noData.value = true;
      } else {
        noData.value = false;
      }
      if (res.page.totalPage <= res.page.currPage) {
        status.value = "noMore";
      } else {
        status.value = "more";
      }
    }
  });
};

const clickBtn = (index) => {
  rest();
  isChange.value = index;
  if (index > 0) {
    parmas.status = index;
  } else {
    delete parmas.status;
  }
  getOrderList();
};

const waitpayOrder = (id, total_amount, expired_pay_time) => {
  uni.navigateTo({
    url: `../../order/pay?id=${id}&total_amount=${total_amount}&expired_pay_time=${expired_pay_time}`,
  });
};

const goOrderDetails = (id) => {
  uni.navigateTo({
    url: `orderDetails?id=${id}&status=pay`,
  });
};

const gotoBalckDetail = (id, shopid, type, status) => {
  uni.navigateTo({
    url: `orderblackDetails?id=${id}&shopid=${shopid}&type=${type}&status=${status}`,
  });
};

const goOrderDetailsPay = (id) => {
  uni.navigateTo({
    url: `orderDetails?id=${id}&status=waitpay`,
  });
};

const otherPay = (key) => {
  // 需要实现 otherPay 方法
  console.log("otherPay called with key:", key);
};
</script>

<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.u-border-one-one {
  border-top: 3rpx solid #e7e7e7;
  margin-bottom: 30rpx;
}

.right-icon {
  font-size: 25rpx;
}

.details-top {
  display: flex;

  .details-right {
    margin-left: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .right-top {
      font-size: 28rpx;
      color: #1a1a1a;
      font-weight: 400;
    }

    .specifications {
      font-size: 22rpx;
      color: #999999;
      font-weight: 400;
      margin-top: 40rpx;
      margin-left: 2rpx;
    }

    .amount-of-money {
      display: flex;
      font-size: 26rpx;
      color: #1a1a1a;
      font-weight: 400;

      .group {
        margin-left: 20rpx;
        color: #999999;
        font-weight: 400;
        font-size: 26rpx;
      }
    }
  }
}

.shop-icon {
  font-size: 40rpx;
  color: #0b844a;
}

.order-list {
  margin-bottom: 30rpx;
}

.order-list .order-item {
  padding-bottom: 20px;
}

.u-shop-teile-pd {
  display: flex;
  justify-content: space-between;
}

.plrbottom {
  padding: 110rpx 30rpx 0;
}

.topview {
  background-color: #f5f5f5;
  height: 110rpx;
  width: 100%;
  position: fixed;
  left: 0;
  box-sizing: border-box;
  padding: 0 30rpx;
  z-index: 66;
}

.scrollbox {
  white-space: nowrap;
}

.pt-pb {
  padding: 30rpx;
}

.pt15-pb24 {
  padding-top: 24rpx;
  padding-bottom: 24rpx;
}

.br-FF0000 {
  border: 1px solid #ff0000;
}

.br-999 {
  border: 1px solid #999999;
}

.order-type {
  margin-top: 30rpx;
  margin-bottom: 26rpx;
  display: inline-block;

  .active {
    background: #fa6138;
    color: #ffffff;
  }

  .type-name {
    border-radius: 30px;
    padding: 12rpx 18rpx;
    display: inline-block;
  }
}

.listImg {
  padding: 20rpx 0 0 16rpx;
}

.listimgGroup {
  width: 200rpx;
  height: 200rpx;
  margin: 0 25rpx 25rpx 0;
}

.order-item {
  .btn-type {
    padding-bottom: 25rpx;

    .pay-time {
      line-height: 70rpx;
      margin-left: auto;
    }
  }

  .btn-item {
    width: 200rpx;
    height: 70rpx;
    line-height: 68rpx;
    border-radius: 35px;
    margin-left: 22rpx;
  }
}

.childBox {
  background-color: #ffffff;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
}
</style>