menduner-mall-uniapp/pages/user/prize/index.vue

<!-- 我的奖品 -->
<template>
  <s-layout title="我的奖品">
    <view class="ss-m-t-20">
			<view
				class="ss-order-card-warp bg-white"
				style="border-radius: 10rpx; margin-bottom: 20rpx;"
				v-for="val in state.pagination.list" :key="val.record.id"
			>
				<view class="ss-flex ss-col-stretch ss-row-between border-bottom ss-p-b-20">
					<view class="img-box ss-m-r-24">
						<image class="order-img" :src="sheep.$url.cdn(val.prize.image)" mode="aspectFill"></image>
					</view>
					<view class="box-right ss-flex-col ss-row-between">
						<view class="title-text ss-line-2">{{ val.prize.name }}</view>
						<view class="ss-flex">
							<view class="ss-flex ss-col-center">
								<view class="price-text ss-flex ss-col-center">
									{{ val.prize.extend.provinceName + ' ' + (val.prize.extend.cityName ? val.prize.extend.cityName : '') + '  ' + (val.prize.extend.districtName ? val.prize.extend.districtName : '') }}
								</view>
							</view>
						</view>
						<view class="spec-text">中奖时间: {{ val.record.createTime }}</view>
            <view v-if="orderReceiveInfo(val)" class="spec-text">收货信息：{{ orderReceiveInfo(val) }}</view>
            <view class="spec-text" v-if="val.record.deliverInfo">
              发货信息：{{ val.record.deliverInfo ? JSON.parse(val.record.deliverInfo).name + '-' + JSON.parse(val.record.deliverInfo).no  : ''}}
            </view>
					</view>
				</view>
				<view class="tool-box">
          <view v-if="!val.record.isReceive && !val.record.receiveInfo" class="ss-flex">
            <button class="tool-btn ss-reset-button"  @tap.stop="handleReceive(val.record.id)">领取</button>
            <button class="tool-btn ss-reset-button" @tap.stop="handleGiveUp(val)" style="color: #ff3000">放弃</button>
          </view>
					<view style="color: #00897B" class="ss-m-x-20" v-else-if="val.record.deliverInfo">已发货</view>
					<view style="color: #fb8c00" class="ss-m-x-20" v-else>等待发货</view>
				</view>
			</view>
		</view>
    <uni-load-more
      v-if="state.pagination.total > 0"
      :status="state.loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
      }"
      @tap="loadMore"
    />
    <s-empty v-if="!state.pagination.list.length" text="暂无奖品" icon="/static/collect-empty.png" />
  </s-layout>
</template>

<script setup>
import sheep from '@/sheep';
import { reactive, computed } from 'vue';
import { onShow, onReachBottom } from '@dcloudio/uni-app';
import _ from 'lodash-es';
import PrizeApi from '@/sheep/api/prizeDraw/index';

const state = reactive({
  pagination: {
    list: [],
    total: 0,
    pageNo: 1,
    pageSize: 6,
  },
  loadStatus: '',
});

async function getData() {
  state.loadStatus = 'loading';
  const { code, data } = await PrizeApi.getLuckLotteryRecordPage({
    pageNo: state.pagination.pageNo,
    pageSize: state.pagination.pageSize,
  });
  if (code !== 0) {
    return;
  }
  state.pagination.list = _.concat(state.pagination.list, data.list);
  state.pagination.total = data.total;
  state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
}

// 加载更多
function loadMore() {
  if (state.loadStatus === 'noMore') {
    return;
  }
  state.pagination.pageNo++;
  getData();
}

// 收货信息
const orderReceiveInfo = computed(() => (item) => {
  const info = item.record.receiveInfo ? JSON.parse(item.record.receiveInfo) : {}
  if (!info || !Object.keys(info).length) return ''
  return `${info.name}，${info.mobile}，${info.areaName} ${info.detailAddress}`
})

// 领取
const handleReceive = (id) => {
	sheep.$router.go('/pages/user/prize/receive', { id });
}

// 放弃
async function handleGiveUp (item) {
  await PrizeApi.luckyLotteryRecordGiveUp(item.record.id)
  uni.showToast({
    title: '操作成功',
    icon: 'none',
    duration: 2000
  })
  getData()
}

onReachBottom(() => {
  loadMore();
});

onShow(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.tool-btn {
    width: 160rpx;
    height: 60rpx;
    background: #f6f6f6;
    font-size: 26rpx;
    border-radius: 30rpx;
    margin-right: 10rpx;

    &:last-of-type {
      margin-right: 0;
    }
  }
  .point-img {
    width: 36rpx;
    height: 36rpx;
    margin: 0 4rpx;
  }
  .ss-order-card-warp {
    padding: 20rpx;

    .img-box {
      width: 164rpx;
      height: 164rpx;
      border-radius: 10rpx;
      overflow: hidden;
      .order-img {
        width: 164rpx;
        height: 164rpx;
      }
    }
    .box-right {
      flex: 1;
    }

    .title-text {
      font-size: 28rpx;
      font-weight: 500;
      line-height: 40rpx;
    }

    .spec-text {
      font-size: 24rpx;
      font-weight: 400;
      color: $dark-9;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    .price-text {
      font-size: 24rpx;
      font-weight: 500;
      font-family: OPPOSANS;
    }

    .total-text {
      font-size: 24rpx;
      font-weight: 400;
      line-height: 24rpx;
      color: $dark-9;
      margin-left: 8rpx;
    }
  }
	.tool-box {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
</style>