cashier_app/pageMarket/couponExchangeCode/add.vue

<template>
  <view class="min-page bg-f7 default-box-padding u-font-28 color-333">
    <view class="default-box-padding bg-fff default-box-radius">
      <view>
        <view class="font-bold u-m-b-16">兑换码名称</view>
        <up-input
          placeholder="请输入兑换码名称"
          border="none"
          v-model="form.name"
          placeholder-class="color-999 u-font-28"
        ></up-input>
        <view class="u-m-t-24">
          <up-line></up-line>
        </view>
      </view>

      <view class="u-m-t-24">
        <view class="font-bold u-m-b-16">活动日期</view>
        <DateTimePicker
          v-model:startTime="form.startTime"
          v-model:endTime="form.endTime"
        >
        </DateTimePicker>
      </view>
      <view class="u-m-t-24">
        <view class="font-bold u-m-b-16">发行数量</view>
        <view class="u-flex u-m-t-16">
          <input
            class="number-box"
            placeholder="请输入"
            placeholder-class="color-999 u-font-28"
            type="number"
            v-model="form.total"
          />
          <view class="unit">个</view>
        </view>
      </view>
    </view>
    <view class="default-box-padding bg-fff default-box-radius u-m-t-32">
      <view class="font-bold">优惠券</view>
      <view class="u-m-t-16">
        <CouponList v-model="form.couponInfoList"></CouponList>
      </view>
      <up-line></up-line>
      <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>

    <my-bottom-btn-group
      @cancel="cancel"
      @save="save"
      direction="column"
    ></my-bottom-btn-group>
  </view>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import DateTimePicker from "@/pageMarket/components/date-time-picker.vue";
import CouponList from "@/pageMarket/components/coupon-list.vue";
import * as couponRedemptionApi from "@/http/api/market/couponRedemption.js";
import {
  onLoad,
  onReady,
  onShow,
  onPageScroll,
  onReachBottom,
  onBackPress,
} from "@dcloudio/uni-app";


function cancel() {
  uni.navigateBack({
    delta: 1,
  });
}

const form = reactive({
  name: "",
  startTime: "",
  endTime: "",
  stock: "",
  total: 0,
  couponInfoList: [
    {
      id: "",
      num: "",
      title: "",
    },
  ],
});

function save() {
  if (!form.name) {
    uni.showToast({
      title: "请输入兑换码名称",
      icon: "none",
    });
    return;
  }
  if (!form.startTime || !form.endTime) {
    uni.showToast({
      title: "请选择活动日期",
      icon: "none",
    });
    return;
  }

  if (!form.total) {
    uni.showToast({
      title: "请输入发行数量",
      icon: "none",
    });
    return;
  }
  if (options.type == "edit") {
    couponRedemptionApi
      .editSuggest({
        title: form.title,
        id: form.id,
        foods: form.foods,
        useDays: form.useDays.join(","),
        useStartTime: form.useStartTime,
        useTimeType: form.useTimeType,
        useEndTime: form.useEndTime,
      })
      .then((res) => {
        uni.showToast({
          title: "修改成功",
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
          });
        }, 1500);
      });
    return;
  }
  console.log('form.couponInfoList',form.couponInfoList)

  //判断优惠券列表是否选择了优惠券，数量是否填写
  if (form.couponInfoList.some((item) => !item.id || !item.num)) {
    uni.showToast({
      title: "请选择优惠券并填写数量",
      icon: "none",
    });
    return;
  }
  couponRedemptionApi.add(form).then((res) => {
    uni.showToast({
      title: "添加成功",
      icon: "none",
    });
    setTimeout(() => {
      uni.navigateBack({
        delta: 1,
      });
    }, 1500);
  });
}
function addCoupon() {
  form.couponInfoList.push({
    id: "",
    num: "",
    title: "",
  });
}
const options = reactive({});
onLoad((opt) => {});
</script>

<style lang="scss" scoped>
:deep(.my-hour-area .container) {
  padding: 32rpx 28rpx;
  background-color: #f7f7f7;
  border-radius: 8rpx;
  margin-top: 16rpx;
}
:deep(.my-hour-area .box) {
  margin-top: 0 !important;
}
:deep(.fixed-bottom) {
  left: 110rpx;
  right: 110rpx;
}
</style>