cashier_wx/pageChat/coupon-activity/detail.vue

<template>
  <view class="min-page bg-f7 u-font-28 color-333 u-p-t-32">
    <view class="bg-fff">
      <view class="default-box u-flex u-row-between border-bottom">
        <text class="font-bold">优惠券名称</text>
        <text>{{ couponActivity.couponJson.couponName }}</text>
      </view>
      <view class="default-box u-flex u-row-between border-bottom">
        <text class="font-bold">发放数量</text>
        <text>{{ couponActivity.giveNum }}</text>
      </view>
      <view class="default-box u-flex u-row-between border-bottom">
        <text class="font-bold">已领取数量</text>
        <text>{{ couponActivity.giveNum - couponActivity.leftNum }}</text>
      </view>
      <view class="default-box u-flex u-row-between border-bottom">
        <text class="font-bold">剩余数量</text>
        <text>{{ couponActivity.leftNum }}</text>
      </view>
      <view class="default-box u-flex u-row-between border-bottom">
        <text class="font-bold">已使用数量</text>
        <text>{{ couponActivity.useNum }}</text>
      </view>
    </view>

    <view class="u-flex u-row-right default-box u-p-r-32 bg-fff">
      <up-select
        :options="statusOptions"
        @select="selectItem"
        labelName="label"
      >
        <template #text>
          <view class="select">
            <text v-if="selStatus">{{ selStatus.label }}</text>
            <text v-else class="color-999">请选择状态</text>
            <up-icon name="arrow-down"></up-icon>
          </view>
        </template>
        <template #icon> <view></view></template>
      </up-select>
    </view>

    <view class="u-m-t-32 table bg-fff">
      <view class="header"> 
        <view class="user">用户</view>
        <view class="gettime">领取时间</view>
        <view class="usetime">使用时间</view>
        <view class="status">状态</view>
        <view class="operation">操作</view>
      </view>
      <view class="body"> 
        <view class="item" v-for="(item,index) in 10" :key="index">
            <view class="user">用户昵称（40239）</view>
            <view class="gettime">2025/06/27 20:07:18）</view>
            <view class="usetime">2025/01/15 08:02:38</view>
            <view class="status">已使用</view>
            <view class="operation status3">失效</view>
        </view>
      </view>
    </view>

    <up-loadmore :status="isEnd ? 'nomore' : 'loading'"></up-loadmore>
    <view style="height: 40px"></view>
  </view>
</template>

<script setup>
import { onReachBottom, onLoad } from "@dcloudio/uni-app";
import { reactive, ref, watch } from "vue";
import { onShow } from "@dcloudio/uni-app";
import go from "@/commons/utils/go.js";
import * as chatCouponApi from "@/http/api/market/chat";
const statusOptions = ref([
  { label: "全部", value: "" },
  { label: "未使用", value: 0 },
  { label: "已使用", value: 1 },
  { label: "已过期", value: 2 },
]);
const selStatus = ref("");
const query = reactive({
  page: 1,
  pageSize: 10,
  status: "",
});
const options = reactive({
  id: "",
});

function selectItem(item) {
  selStatus.value = item;
}

watch(
  () => selStatus.value,
  (newVal, oldVal) => {
    query.status = newVal.value;
    refresh();
  }
);

function refresh() {
  query.page = 1;
  isEnd.value = false;
  getList();
}

const couponActivity = ref({});

const list = ref([]);
const isEnd = ref(false);
function getList() {
  chatCouponApi.chatCouponRecord({ ...query, id: options.id }).then((res) => {
    if (query.page == 1) {
      list.value = res.records;
    } else {
      list.value.push(...res.records);
    }
    isEnd.value = query.page >= res.totalPage * 1;
  });
}

onReachBottom(() => {
  if (!isEnd.value) {
    query.page++;
    getList();
  }
});
onLoad((opt) => {
  Object.assign(options, opt);
  const item = uni.getStorageSync("cach_couponActivity");
  couponActivity.value = item || {};
  console.log(item);
  getList();
});
</script>

<style lang="scss" scoped>
.default-box {
  padding: 24rpx 28rpx;
}
.select {
  padding: 20rpx;
  border-radius: 8rpx;
  border: 2rpx solid #d9d9d9;
  min-width: 322rpx;
  display: flex;
  justify-content: space-between;
}
.table{
  .user{
    width: 142rpx;
  }
  .gettime{
    width: 172rpx;
  }
  .usetime{
    width: 158rpx;
  }
  .status{
    width: 84rpx;
  }
  .operation{
    width: 56rpx;
    &.status3{
      color: #FF383C;
    }
  }
    .header{
        display: flex;
        justify-content: space-between;
        padding: 32rpx 16rpx;
        color: #666;
        border-bottom: 1px solid #E5E5E5;
    }
    .body{
        .item{
            display: flex;
            justify-content: space-between;
            padding: 24rpx 16rpx;
            border-bottom: 1px solid #E5E5E5;
        }
    }
}
</style>