cashier_app/pageMarket/discountActivity/index.vue

<template>
  <view class="box min-page">
    <view class="top">
      <my-button type="primary" height="72" @click="toAdd"
        >添加满减活动</my-button
      >
    </view>
    <view class="list u-font-28">
      <view class="u-m-t-32 item" v-for="item in list" :key="item.id">
        <view class="u-flex u-row-between">
          <view class="color-999 u-font-24">
            <text> ID:{{ item.id }} </text>
            <text class="u-m-l-24"> 优先级:{{ item.sort }} </text>
          </view>
          <view class="tag" :class="[returnTagClass(item)]">{{ returnStatus(item) }}</view>
        </view>
        <view class="coor-333 font-bold u-m-t-16"
          >活动日期：{{ returnActivityDate(item) }}</view
        >
        <view class="u-font-24 color-666 u-m-t-16 u-flex u-row-between">
          <text class="no-wrap"> {{ returnActivityWeek(item) }}</text>
          <text class="no-wrap"> {{ returnCanUseTime(item) }}</text>
        </view>
        <view class="u-m-t-26">
          <u-line></u-line>
        </view>
        <view class="color-333 u-m-t-24">
          <view>活动内容：</view>
          <view>{{ returnActivityContent(item) }}</view>
        </view>
        <view class="u-flex u-row-right u-m-t-26" style="gap: 16rpx">
          <button class="my-btn edit-btn" @click="toEdit(item)">编辑</button>
          <button
            class="my-btn delete-btn"
            @click="deleteDiscountActivity(item)"
          >
            删除
          </button>
        </view>
      </view>
      <view class="u-p-30">
        <up-loadmore :status="isEnd ? 'nomore' : 'loading'"></up-loadmore>
      </view>
    </view>
  </view>
</template>
<script setup>
import {
  onLoad,
  onReady,
  onShow,
  onPageScroll,
  onReachBottom,
  onBackPress,
} from "@dcloudio/uni-app";
import { ref, onMounted } from "vue";
import * as discountActivityApi from "@/http/api/market/discountActivity.js";
import dayjs from "dayjs";

const list = ref([]);
const pageNum = ref(1);
const isEnd = ref(false);

async function getList() {
  const res = await discountActivityApi.getList({
    pageNum: pageNum.value,
    pageSize: 10,
  });
  if (res) {
    if (pageNum.value == 1) {
      list.value = res.records || [];
    } else {
      list.value = [...list.value, ...(res.records || [])];
    }
    isEnd.value = pageNum.value >= res.totalPage * 1 ? true : false;
    console.log(isEnd.value);
  }
}

function returnActivityDate(item) {
  return `${item.validStartTime.split(" ")[0]} 至 ${
    item.validEndTime.split(" ")[0]
  }`;
}
function returnActivityWeek(item) {
  if (!item.useDays.length) {
    return "每天都不可用";
  }
  return "每" + item.useDays.replaceAll(",", "、");
}
function returnCanUseTime(item) {
  if (item.useTimeType != "all") {
    return `${item.useStartTime} 至 ${item.useEndTime}`;
  } else {
    return "全天可用";
  }
}

function returnActivityContent(item) {
  return item.thresholds
    .map((cur) => {
      return `满${cur.fullAmount}减${cur.discountAmount}`;
    }, "")
    .join("、");
}
function toAdd() {
  clearDiscountActivity();
  uni.navigateTo({
    url: "/pageMarket/discountActivity/add",
  });
}
function clearDiscountActivity() {
  uni.removeStorageSync("discountActivity");
}
function toEdit(item) {
  uni.setStorageSync("discountActivity", { ...item });
  uni.navigateTo({
    url: "/pageMarket/discountActivity/add?id=" + item.id,
  });
}

function deleteDiscountActivity(item) {
  uni.showModal({
    title: "确认删除",
    content: `是否确认删除？`,
    success: async (res) => {
      console.log(res);
      if (res.confirm) {
        const res = await discountActivityApi.del(item.id);
        uni.showToast({
          title: "删除成功",
          icon: "none",
          duration: 2000,
          success: function () {
            getList();
          },
        });
      }
    },
  });
}


function returnStatus(item) {
  if (item.status == 1) {
    //未开始
    return "未开始";
  }
  if (item.status == 2) {
    //进行中
    return "进行中";
  }
  if (item.status == 3) {
    //已结束
    return "已结束";
  }
}
function returnTagClass(item) {
  if (item.status == 1) {
    //未开始
    return "tag-priority";
  }
  if (item.status == 2) {
    //进行中
    return "tag-green";
  }
  if (item.status == 3) {
    //已结束
    return "tag-end";
  }
}
onReachBottom(() => {
  if (!isEnd.value) {
    pageNum.value++;
    getList();
  }
});
onShow(() => {
  pageNum.value = 1;
  getList();
});
</script>
<style lang="scss" scoped>
.box {
  padding: 0 30rpx;
  background: #f7f7f7;
}
.top {
  margin-top: 18rpx;
}
.list {
  .item {
    padding: 32rpx 24rpx;
    border-radius: 14rpx;
    background-color: #fff;
    overflow: hidden;
  }
}
.tag {
  border-radius: 12rpx;
  padding: 8rpx 22rpx;
  font-size: 28rpx;
  &.success {
    background-color: #edfff0;
    color: #5bbc6d;
  }
  &.tag-priority {
    background-color: #fff2e6;
    color: #ff9900;
  }
  &.tag-gray {
    background-color: #f7f7f7;
    color: #999;
  }
  &.tag-green {
    background-color: #edfff0;
    color: #5bbc6d;
  }
  &.tag-end {
    background-color: #f7f7f7;
    color: #999;
  }
}
.my-btn {
  font-size: 28rpx;
  line-height: 36rpx;
  padding: 8rpx 32rpx;
  border-radius: 12rpx;
  margin: 0;
}
.edit-btn {
  background: #e6f0ff;
  color: $my-main-color;
}
.delete-btn {
  background: #ffe7e6;
  color: #ff1c1c;
}
</style>