zhishifufei_uniapp/pages/my/my_gift.vue

<template>
  
  <BaseContainer class="gift-given">
    <NavBar title="我的赠送" />
    <view class="list" v-if="updateGiftList.length">
      <navigator
        v-for="(item, index) in updateGiftList"
        :key="index"
        :url="item.path"
        class="item given"
      >
        <view class="item-hd">
          <view v-if="item.is_draw">赠送成功</view>
          <view v-else>未赠送</view>
          <view v-if="item.is_draw">领取人:{{ item.gift_user.nickname }}</view>
          <view v-else>去赠送</view>
        </view>
        <view class="item-bd">
          <view>
            <image :src="item.image" alt="" />
          </view>
          <view class="text">
            <view class="title">{{ item.title }}</view>
            <view class="money">
              ￥<text>{{ item.money }}</text>
            </view>
          </view>
        </view>
      </navigator>
    </view>
    <view v-if="!updateGiftList.length && loaded" class="empty">
      <image
        mode="aspectFit"
        :src="getImgPath('/wap/first/zsff/images/empty.png')"
        alt="暂无数据"
      />
      <view>暂无数据</view>
    </view>
  </BaseContainer>
</template>

<script>
import { getOrderList } from "@/api/user";
export default {
  data() {
    return {
      page: 1,
      limit: 16,
      appear: true,
      giftList: [],
      loaded: false,
      loading: false,
    };
  },
  computed: {
    updateGiftList() {
      return this.giftList.map((value) => {
        value.path = value.is_draw
          ? `/pages/special/gift_receive?orderId=${value.order_id}`
          : `/pages/special/gift_special?orderId=${value.order_id}`;
        return value;
      });
    },
  },
  onLoad() {
    this.getGiftList();
  },
  onReachBottom() {
    this.getGiftList();
  },
  methods: {
    async getGiftList() {
      if (this.loading || this.loaded) return;
      this.loading = true;

      uni.showLoading({ mask: true });
      try {
        const { data } = await getOrderList({
          page: this.page,
          limit: this.limit,
          type: 1,
        });
        uni.hideLoading();
        const list = data.list;
        const giftList = this.$util.SplitArray(list, this.giftList);
        this.loaded = list.length < this.limit;
        this.page = data.page;
        this.$set(this, "giftList", giftList);
      } catch (err) {
        uni.hideLoading();
        this.$util.showMsg(err);
      }
      this.loading = false;
    },
  },
};
</script>

<style scoped lang="scss">
page {
  background: #f5f5f5;
}

/* 我的赠送 */
.gift-given .list {
  padding: 20rpx;
}

.gift-given .list .item {
  display: block;
  border-radius: 12rpx;
  background: #ffffff;
}

.gift-given .list .item .item {
  margin-top: 20rpx;
}

.gift-given .list .item-hd {
  display: flex;

  justify-content: space-between;

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

.gift-given .list .item-hd view:last-child {
  width: 140rpx;
  height: 52rpx;
  border-radius: 26rpx;
  background: #ff6b00;
  font-size: 28rpx;
  line-height: 52rpx;
  text-align: center;
  color: #ffffff;
}

.gift-given .list .item.given .item-hd {
  color: #2c8eff;
}

.gift-given .list .item.given .item-hd view:last-child {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  line-height: normal;
  text-align: left;
  color: #999999;
}

.gift-given .list .item-bd {
  display: flex;
  padding: 30rpx;
  border-top: 1px solid #f5f5f5;
}

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

  object-fit: cover;
}

.gift-given .list .text {
  flex: 1;

  display: flex;

  flex-direction: column;

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

.gift-given .list .title {
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 28rpx;
  line-height: 36rpx;
  color: #333333;
}

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

.gift-given .list .money text {
  font-size: 32rpx;
}

.gift-given .empty {
  margin-top: 400rpx;
  font-size: 28rpx;
  text-align: center;
  color: #cdcdcd;
}

.gift-given .empty image {
  display: block;
  width: 414rpx;
  margin: 0 auto;
}
</style>