cashier_app/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 list" :key="index">
          <view class="user">
            <view>
              {{ item.nickName }}
            </view>
            <view> ({{ item.shopUserId }}) </view>
          </view>
          <view class="gettime">{{ item.createTime }}</view>
          <view class="usetime">{{ item.useTime }}</view>
          <view class="status">{{ returnStatus(item.status) }}</view>
          <view class="operation status3">
            <text v-if="item.status == 0" @click="deleteRecord(item)"
              >失效</text
            ></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";

function deleteRecord(item) {
  uni
    .showModal({
      title: "提示",
      content: "确定要让该记录失效吗？",
    })
    .then((res) => {
      if (res.confirm) {
        chatCouponApi
          .deleteRecord({
            id: item.id,
          })
          .then((res) => {
            uni.showToast({
              title: "操作成功",
              icon: "none",
            });

            setTimeout(() => {
              refresh();
            }, 1000);
          });
      }
    });
}
const statusOptions = ref([
  { label: "全部", value: "" },
  { label: "未使用", value: 0 },
  { label: "已使用", value: 1 },
  { label: "已过期", value: 2 },
]);
function returnStatus(status) {
  if (status == 0) {
    return "未使用";
  }
  if (status == 1) {
    return "已使用";
  }
  if (status == 2) {
    return "已过期";
  }
}
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>