cashier_app/pageMarket/orderRecommendation/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.title"
          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>
        <chooseGoods v-model="form.foods"> </chooseGoods>
      </view>
      <view class="u-m-t-16">
        <view class="font-bold u-m-b-16">自定义引导语</view>
        <up-input
          placeholder="请输入内容"
          border="none"
          placeholder-class="color-999 u-font-28"
        ></up-input>
      </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">
        <my-week-sel shape="circle" v-model="form.useDays"></my-week-sel>
      </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>
    </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 chooseGoods from "@/pageMarket/components/choose-goods.vue";
import * as suggestApi from "@/http/api/market/suggest.js";
import {
  onLoad,
  onReady,
  onShow,
  onPageScroll,
  onReachBottom,
  onBackPress,
} from "@dcloudio/uni-app";

const form = reactive({
  foods: "",
  useDays: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
  useStartTime: "",
  useTimeType: "all",
  useEndTime: "",
});

function save() {
  if (!form.title) {
    uni.showToast({
      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) {
    uni.showToast({
      title: "请选择可用周期",
      icon: "none",
    });
    return;
  }
  if (!form.foods) {
    uni.showToast({
      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",
      });
      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);
    });
}
const options=reactive({})
onLoad((opt) => {
    Object.assign(options,opt)
  const type = opt.type;
  if (type == "edit") {
    const item = uni.getStorageSync("suggestItem");
    form.title = item.title;
    form.foods = item.foods;
    form.useDays = item.useDays.split(",");
    form.useStartTime = item.useStartTime;
    form.useTimeType = item.useTimeType;
    form.useEndTime = item.useEndTime;
    form.id = item.id;
    console.log(form);
  }
});
</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>