cashier_app/pageMarket/couponExchangeCode/detail.vue

<template>
  <view class="min-page bg-f7 default-box-padding u-font-28 color-333">
    <view class="bg-fff default-box-radius">
      <view class="default-box-padding u-flex u-row-between">
        <text class="font-bold">兑换码名称</text>
        <text class="color-666">{{ form.name }}</text>
      </view>
      <up-line></up-line>
      <view class="default-box-padding u-flex u-row-between">
        <text class="font-bold">活动日期</text>
        <text class="color-666 u-font-24"
          >{{ form.startTime }} 至 {{ form.endTime }}</text
        >
      </view>
      <up-line></up-line>
      <view class="default-box-padding u-flex u-row-between">
        <text class="font-bold">总数</text>
        <text class="color-666 u-font-24">{{ form.total }}</text>
      </view>
      <up-line></up-line>
      <view class="default-box-padding u-flex u-row-between">
        <text class="font-bold">库存</text>
        <view style="width: 158rpx">
          <up-input
            v-model="form.stock"
            type="number"
            placeholder="库存"
            placeholder-class="color-999 u-font-28"
          ></up-input>
        </view>
      </view>
      <up-line></up-line>
      <view class="default-box-padding u-flex u-row-between">
        <text class="font-bold">优惠券</text>
        <view>
          <text class="u-p-l-30">{{ returnCoupon }}</text>
          <text class="color-main u-font-32 u-m-l-20" @click="showModal"
            >修改</text
          >
        </view>
      </view>
      <up-line></up-line>
      <view class="u-p-b-24"></view>
    </view>
    <view class="u-p-t-48 u-p-b-48 u-p-l-60 u-p-r-60">
      <my-button type="primary" shape="circle" @click="save">保存</my-button>
    </view>

    <view class="bg-fff default-box-radius">
      <view class="default-box-x-padding u-p-t-32 u-flex u-row-between">
        <couponStatus v-model="query.status"></couponStatus>

        <view class="u-flex">
          <view class="border u-flex default-box-radius search-box">
            <up-icon name="search"></up-icon>
            <input
              style="width: 140rpx"
              placeholder="输入兑换码"
              class="u-font-28 u-m-l-20"
              placeholder-class="color-999 u-font-28"
              v-model="query.name"
            />
          </view>
          <view class="daochu u-m-l-24">导出</view>
        </view>
      </view>

      <view class="list u-m-t-48">
        <view
          class="item default-box-padding"
          v-for="(item, index) in list"
          :key="index"
        >
          <view class="u-flex u-row-between">
            <text class="status" :class="['status-' + item.status]">{{
              item.status == 0 ? "未兑换" : "已兑换"
            }}</text>
            <view>
              <text class="color-666">{{ item.code }}</text>
              <text class="color-main u-m-l-20" @click="copyCode(item.code)"
                >复制</text
              >
            </view>
          </view>
          <view class="u-m-t-16 u-flex u-row-between color-666">
            <text>{{ item.redemptionTime }}</text>
            <view>
              <text>{{ item.nickName }}</text>
              <text>{{ item.phone }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <up-loadmore :status="isEnd ? 'nomore' : 'loading'"></up-loadmore>

    <Modal
      :title="ModalData.title"
      v-model="ModalData.show"
      @confirm="modelConfirm"
    >
      <view class="default-box-padding">
        <CouponList v-model="form.couponInfoList"></CouponList>
        <view class="u-m-t-16 u-flex">
          <view class="u-flex" @click="addCoupon">
            <up-icon
              name="plus-circle-fill"
              color="#318AFE"
              size="18"
            ></up-icon>
            <text class="font-bold u-m-l-20">添加</text>
          </view>
        </view>
      </view>
    </Modal>
  </view>
</template>

<script setup>
import {
  onLoad,
  onReady,
  onShow,
  onPageScroll,
  onReachBottom,
  onBackPress,
} from "@dcloudio/uni-app";
import couponStatus from "./components/status.vue";
import CouponList from "@/pageMarket/components/coupon-list.vue";

import Modal from "@/pageMarket/components/modal.vue";
import * as couponRedemptionApi from "@/http/api/market/couponRedemption.js";

import {
  reactive,
  toRefs,
  computed,
  watch,
  onMounted,
  onUnmounted,
  ref,
} from "vue";
function addCoupon() {
  form.couponInfoList.push({
    id: "",
    num: "",
    title: "",
  });
}
function modelConfirm() {
  //判断优惠券列表是否选择了优惠券，数量是否填写
  if (form.couponInfoList.some((item) => !item.id || !item.num)) {
    uni.showToast({
      title: "请选择优惠券并填写数量",
      icon: "none",
    });
    return;
  }
  ModalData.show = false;
}
const ModalData = reactive({
  show: false,
  title: "修改优惠券",
});
function save() {
  if (form.stock === "" || form.stock === null) {
    uni.showToast({
      title: "请填写库存",
      icon: "none",
    });
    return;
  }
  couponRedemptionApi.edit(form).then((res) => {
    uni.showToast({
      title: "修改成功",
      icon: "none",
    });
    ModalData.show = false;
    refresh();
  });
}
function showModal() {
  ModalData.show = true;
}
const form = reactive({
  couponInfoList: [],
});
onLoad((opt) => {
  const item = uni.getStorageSync("couponRedemptionItem");
  Object.assign(form, item);
});
const query = reactive({
  status: "",
  code: "",
  page: 1,
  size: 10,
});

function copyCode(code) {
  uni.setClipboardData({
    data: code,
    success: () => {
      uni.showToast({
        title: "复制成功",
        icon: "none",
      });
    },
  });
}
const returnCoupon = computed(() => {
  return form.couponInfoList
    .reduce((prev, cur) => prev + cur.title + "*" + cur.num + "、", "")
    .slice(0, -1);
});
const list = ref([]);
const isEnd = ref(false);
function getList() {
  couponRedemptionApi
    .codeList({ ...query, redemptionId: form.id })
    .then((res) => {
      if (query.page == 1) {
        list.value = res.records;
      } else {
        list.value = [...list.value, ...res.records];
      }
      if (query.page >= res.totalPage * 1) {
        isEnd.value = true;
      }
    });
}
function refresh() {
  isEnd.value = false;
  query.page = 1;
  getList();
}
watch(() => query, refresh);
onMounted(() => {
  getList();
});
onReachBottom(() => {
  console.log("触底");
  if (isEnd.value) {
    return;
  }
  query.page++;
  getList();
});
</script>

<style scoped lang="scss">
.border {
  border: 1rpx solid #dddfe6;
}
.search-box {
  padding: 18rpx 32rpx;
}
.daochu {
  border: 1rpx solid $my-main-color;
  padding: 12rpx 34rpx;
  border-radius: 8rpx;
  white-space: nowrap;
  color: $my-main-color;
  min-height: 72rpx;
}
.status {
  font-weight: 700;
  &.status-0 {
    color: #5bbc6d;
  }
  &.status-1 {
    color: #ff895c;
  }
}
.item {
  border-bottom: 1rpx solid #f5f5f5;
  &:last-child {
    border-bottom: none;
  }
}
</style>