zhishifufei_uniapp/pages/my/order_list.vue

<template>
  
  <BaseContainer class="group-special">
    <NavBar title="拼团课程" />
    <view class="list">
      <view v-for="item in list" :key="item.id" class="item">
        <view class="item-hd">
          <view>{{ item.stop_time  ? item.stop_time : item.mark }}</view>
          <view v-if="item.pink_status == 1">拼团中</view>
          <view v-else-if="item.pink_status == 2">拼团成功</view>
          <view v-else-if="item.pink_status == 3">拼团失败</view>
          <view v-else-if="item.pink_status == 4">已退款</view>
          <view v-else-if="item.pink_status == 5">拼团删除</view>
        </view>
        <view class="item-bd">
          <view class="special">
            <view>
              <image :src="item.image" :alt="item.title" />
            </view>
            <view class="text">
              <view class="title">{{ item.title }}</view>
              <view class="money">
                ￥<text>{{ item.money }}</text>
              </view>
            </view>
          </view>
          <view v-if="item.pink_status <= 3" class="button-group">
            <button
              class="flex flex-center"
              v-if="item.pink_status == 1"
              type="button"
              @click="invite(item)"
            >
              邀请参团
            </button>
            <button
              class="flex flex-center"
              v-if="item.pink_status == 2"
              type="button"
              @click="goSpecial(item)"
            >
              去学习
            </button>
            <button
              class="flex flex-center"
              v-if="item.pink_status == 3"
              type="button"
              @click="goSpecial(item)"
            >
              重新开团
            </button>
          </view>
        </view>
      </view>
    </view>
    <image
      v-if="!list.length && finished"
      class="empty"
      mode="aspectFit"
      :src="getImgPath('/wap/first/zsff/images/no_data_available.png')"
    />
  </BaseContainer>
</template>

<script>
import { getOrderList } from "@/api/user";
export default {
  data() {
    return {
      page: 1,
      limit: 16,
      list: [],
      finished: false,
    };
  },
  onLoad() {
    this.getList();
  },
  onReachBottom() {
    this.getList();
  },
  methods: {
    // 列表信息
    async getList() {
      if (this.finished) return;
      uni.showLoading({ mask: true });

      try {
        const { data } = await getOrderList({
          page: this.page++,
          limit: this.limit,
          type: 3,
        });
        uni.hideLoading();
        const list = data.list;
        this.list = this.list.concat(list);
        this.finished = this.limit > list.length;
      } catch (err) {
        uni.hideLoading();
        this.$util.showMsg(err.msg);
      }
    },
    // 点击邀请参团
    invite(item) {
      console.log(item)
      if (item.pink_status != 4) {
        uni.navigateTo({
          url:
            "/pages/special/pink?" +
            this.$util.objToParam({
              pink_id: item.pink_id,
              special_id: item.cart_id,
              is_help: 0,
              orderId:item.order_id,
              oid:item.id
            }),
        });
      }
    },
    // 点击去学习、重新开团
    goSpecial(item) {
      const path = item.is_light
        ? "/pages/special/single_details"
        : "/pages/special/details";

      uni.navigateTo({
        url: path + "?id=" + item.cart_id,
      });
    },
  },
};
</script>

<style>
page {
  background: #f5f5f5;
}
</style>

<style scoped lang="scss">
/* 拼团课程 */
.group-special .list {
  padding: 20rpx;
}

.group-special .list .item {
  border-radius: 12rpx;
  background: #ffffff;
}

.group-special .list .item .item {
  margin-top: 20rpx;
}

.group-special .list .item-hd {
  display: flex;

  justify-content: space-between;

  align-items: center;
  height: 80rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #999999;
}

.group-special .list .item-hd view:last-child {
  color: #ff6b00;
}

.group-special .list .item-bd {
  padding: 0 30rpx;
  border-top: 1px solid #f5f5f5;
}

.group-special .list .special {
  display: flex;
  padding: 30rpx 0;
}

.group-special .list image {
  display: block;
  width: 250rpx;
  height: 140rpx;
  border-radius: 10rpx;

  object-fit: cover;
}

.group-special .list .text {
  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: space-between;
  min-width: 0;
  margin-left: 30rpx;
}

.group-special .list .title {
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #333333;
}

.group-special .list .money {
  font-weight: bold;
  font-size: 24rpx;
  color: #ff6b00;
}

.group-special .list .money text {
  font-size: 32rpx;
}

.group-special .list .button-group {
  padding: 25rpx 0;
  border-top: 1px solid #eeeeee;
  font-size: 0;
  text-align: right;
}

.group-special .list button {
  width: 176px;
  height: 60rpx;
  border: 1px solid #2c8eff;
  border-radius: 30rpx;
  background: #2c8eff;
  font-size: 28rpx;
  color: #ffffff;
}

.group-special .list button button {
  margin-left: 20rpx;
}

.group-special .empty {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 414rpx;
  height: 414rpx;
  transform: translate(-50%, -50%);
}
</style>