完善券兑换码功能

pageMarket/couponExchangeCode/add.vue

@@ -6,32 +6,47 @@
         <up-input
           placeholder="请输入兑换码名称"
           border="none"
-          v-model="form.title"
+          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>
+        <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 u-p-b-24">
+      <view class="u-m-t-16">
         <CouponList v-model="form.couponInfoList"></CouponList>
       </view>
       <up-line></up-line>
-      <view class="font-bold u-m-t-24 u-m-b-16">指定时间段可用</view>
-      <view class="my-hour-area">
-        <my-hour-area
-          v-model:useTimeType="form.useTimeType"
-          v-model:startValue="form.useStartTime"
-          v-model:endValue="form.useEndTime"
-        ></my-hour-area>
+      <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>
 
@@ -47,7 +62,7 @@
 import { reactive, onMounted } from "vue";
 import DateTimePicker from "@/pageMarket/components/date-time-picker.vue";
 import CouponList from "@/pageMarket/components/coupon-list.vue";
-import * as suggestApi from "@/http/api/market/suggest.js";
+import * as couponRedemptionApi from "@/http/api/market/couponRedemption.js";
 import {
   onLoad,
   onReady,
@@ -57,103 +72,106 @@ import {
   onBackPress,
 } from "@dcloudio/uni-app";
 
+
+function cancel() {
+  uni.navigateBack({
+    delta: 1,
+  });
+}
+
 const form = reactive({
-  useStartTime: "",
-  useTimeType: "all",
-  useEndTime: "",
-  startTime:'',
-  endTime:'',
-  couponInfoList: [],
+  name: "",
+  startTime: "",
+  endTime: "",
+  stock: "",
+  total: 0,
+  couponInfoList: [
+    {
+      id: "",
+      num: "",
+      title: "",
+    },
+  ],
 });
 
 function save() {
-  if (!form.title) {
+  if (!form.name) {
     uni.showToast({
-      title: "请输入模版名称",
+      title: "请输入兑换码名称",
       icon: "none",
     });
     return;
   }
-  if (form.useTimeType == "custom") {
-    if (!form.useStartTime) {
-      uni.showToast({
-        title: "请选择开始时间",
-        icon: "none",
-      });
-      return;
-    }
-    if (!form.useEndTime) {
-      uni.showToast({
-        title: "请选择结束时间",
-        icon: "none",
-      });
-      return;
-    }
-  }
-  if (form.useDays.length == 0) {
+  if (!form.startTime || !form.endTime) {
     uni.showToast({
-      title: "请选择可用周期",
+      title: "请选择活动日期",
       icon: "none",
     });
     return;
   }
-  if (!form.foods) {
+
+  if (!form.total) {
     uni.showToast({
-      title: "请选择商品",
+      title: "请输入发行数量",
       icon: "none",
     });
     return;
   }
-  if(options.type=='edit'){
-    suggestApi
-    .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",
+  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);
       });
-      setTimeout(() => {
-        uni.navigateBack({
+    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);
-      
-    });
-    return 
-  }
-  suggestApi
-    .addSuggest({
-      title: form.title,
-      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);
-    });
+    }, 1500);
+  });
 }
-const options=reactive({})
-onLoad((opt) => {
-   
-});
+function addCoupon() {
+  form.couponInfoList.push({
+    id: "",
+    num: "",
+    title: "",
+  });
+}
+const options = reactive({});
+onLoad((opt) => {});
 </script>
 
 <style lang="scss" scoped>

pageMarket/couponExchangeCode/components/status.vue

@@ -0,0 +1,52 @@
+<template>
+  <view class="u-flex">
+    <view @click="show = true">
+      <slot v-if="$slots.default"> </slot>
+      <view v-else class="choose-goods u-flex u-row-between">
+        <text class="color-333 u-font-28 font-bold">{{ statusText }}</text>
+        <up-icon size="14" name="arrow-down" color="#333" bold></up-icon>
+      </view>
+    </view>
+
+    <up-action-sheet
+      :show="show"
+      cancel-text="取消"
+      closeOnClickAction
+      @close="show = false"
+      :actions="actions"
+      @select="confirm"
+    ></up-action-sheet>
+  </view>
+</template>
+<script setup>
+import { ref ,computed } from "vue";
+const show = ref(false);
+const modelValue = defineModel({
+  type: String,
+  default: "",
+});
+function confirm(item) {
+  modelValue.value = item.value;
+}
+const actions = ref([
+  {
+    name: "全部",
+    value: "",
+  },
+  {
+    name: "已兑换",
+    value: "1",
+  },
+  {
+    name: "未兑换",
+    value: "0",
+  },
+]);
+
+const statusText = computed(() => {
+  if (modelValue.value === "") {
+    return "全部";
+  }
+  return modelValue.value === "1" ? "已兑换" : "未兑换";
+});
+</script>

pageMarket/couponExchangeCode/detail.vue

@@ -0,0 +1,280 @@
+<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>

pageMarket/couponExchangeCode/index.vue

@@ -204,8 +204,8 @@ function refreshList() {
 }
 
 function handleEdit(item) {
-  uni.setStorageSync("suggestItem", item);
-  go.to("PAGES_MARKET_ORDER_RECOMMENDATION_ADD", {
+  uni.setStorageSync("couponRedemptionItem", item);
+  go.to("PAGES_MARKET_COUPON_EXCHANGE_CODE_DETAIL", {
     type: "edit",
   });
 }