cashier_app/pageMarket/superVip/add-plans.vue

<template>
  <view class="min-page u-font-28 color-333">
    <view class="container">
      <view class="">
        <view class="font-bold u-m-b-16">周期名称</view>
        <up-input
          v-model="form.name"
          placeholder="请输入周期名称"
          :placeholderStyle="placeholderStyle"
        ></up-input>
      </view>
      <view class="u-m-t-32">
        <view class="font-bold u-m-b-16">周期价格</view>
        <view class="u-flex">
          <input class="number-box" type="digit" v-model="form.price" />
          <view class="unit">元</view>
        </view>
      </view>
      <view class="u-m-t-32">
        <view class="font-bold u-m-b-16">周期时间</view>
        <view class="u-flex" style="gap: 24rpx; align-items: stretch">
          <up-input type="digit" v-model="form.circleTime"></up-input>
          <view class="times">
            <up-select
              v-model:current="form.circleUnit"
              showOptionsLabel
              label="单位"
              keyName="value"
              labelName="label"
              :options="times"
              @select="selectItem"
            ></up-select>
          </view>
        </view>
      </view>
      <view class="u-m-t-32">
        <view class="font-bold u-m-b-16">赠送成长值</view>
        <up-input
          type="number"
          v-model="form.reward"
          placeholder="赠送成长值"
          :placeholderStyle="placeholderStyle"
        ></up-input>
      </view>
    </view>

    <view class="container">
      <view class="font-bold u-m-b-16">赠送优惠券</view>
      <CouponList v-model="form.couponList"></CouponList>
      <view class="u-flex">
        <view class="u-flex gap-20" @click="addCoupon()">
          <up-icon name="plus-circle-fill" color="#318AFE" size="16"></up-icon>
          <text class="">添加</text>
        </view>
      </view>
    </view>

    <my-bottom-btn-group @save="save" @cancel="cancel"></my-bottom-btn-group>
  </view>
</template>
<script setup>
import {
  onLoad,
  onReady,
  onShow,
  onPageScroll,
  onReachBottom,
  onBackPress,
} from "@dcloudio/uni-app";
import CouponList from "./components/coupon-list.vue";
import { ref, onMounted, watch, reactive, computed } from "vue";
import { useSuperVipStore } from "@/store/market.js";
import { add } from "lodash";
const times = [
  {
    label: "年",
    value: "年",
  },
  {
    label: "月",
    value: "月",
  },
  {
    label: "周",
    value: "周",
  },
  {
    label: "天",
    value: "天",
  },
];
const placeholderStyle = {
  "font-size": "28rpx",
};
const superVipStore = useSuperVipStore();

const form = reactive({
  name: "",
  price: 0,
  reward: 0,
  couponList: [], // 存储已选择的优惠券
  circleTime: 1, // 会员周期
  circleUnit: "月", // 会员周期单位
});
function addCoupon() {
  form.couponList.push({
    coupon: { id: null },
    num: "",
    title: "",
  });
}
const showDetailListSwitch = ref([true]);

//判断输入每一项是否为空
function checkInput() {
  for (let item of form.couponList) {
    if (!item.coupon.id) {
      uni.showToast({
        title: "请选择优惠券",
        icon: "none",
      });
      return false;
    }
    if (!item.num) {
      uni.showToast({
        title: "请输入优惠券数量",
        icon: "none",
      });
      return false;
    }
  }
  return true;
}
async function save() {
  const isPas = checkInput();
  if (!isPas) {
    return;
  }
  if (!form.name) {
    uni.showToast({
      title: "请输入周期名称",
      icon: "none",
    });
    return false;
  }
  if (!form.price) {
    uni.showToast({
      title: "请输入周期价格",
      icon: "none",
    });
    return false;
  }
  if (!form.circleTime) {
    uni.showToast({
      title: "请输入周期时间",
      icon: "none",
    });
    return false;
  }

  if (optiopns.type == "edit") {
    superVipStore.editPlan(optiopns.index, form);
  } else {
    superVipStore.addPlan(form);
  }
  const res = await superVipStore.editConfig();
  if (res) {
    uni.showToast({
      title: "保存成功",
      icon: "none",
    });
  }else{
      uni.showToast({
        title: "保存失败",
        icon: "none",
      });
      return 
  }
  setTimeout(() => {
    uni.navigateBack({
      delta: 1,
    });
  }, 1500);
}
function cancel() {
  uni.navigateBack({
    delta: 1,
  });
}
const optiopns = reactive({});
onLoad((opt) => {
  Object.assign(optiopns, opt);
  if (opt.type === "edit" && opt.index !== undefined && opt.index !== null) {
    const item = superVipStore.config.configList[opt.index];
    Object.assign(form, item);
  }
});
</script>
<style lang="scss" scoped>
.min-page {
  background: #f7f7f7;
  padding: 56rpx 28rpx;
}
.container {
  background: #fff;
  padding: 32rpx 24rpx;
  margin-top: 32rpx;
  border-radius: 16rpx;
}
.x-padding {
  padding: 0 24rpx;
}
$height: 70rpx;
.number-box {
  font-size: 28rpx;
  padding: 0 26rpx;
  border-radius: 6rpx 0 0 6rpx;
  border-top: 2rpx solid #d9d9d9;
  border-bottom: 2rpx solid #d9d9d9;
  border-left: 2rpx solid #d9d9d9;
  background: #fff;
  box-sizing: border-box;
  height: $height;
  flex: 1;
  line-height: $height;
  &.disabled {
    background-color: #f7f7fa;
    color: #999999;
  }
}
.unit {
  display: flex;
  padding: 0 38rpx;
  height: $height;
  line-height: $height;
  align-items: center;
  border-radius: 0 6rpx 6rpx 0;
  border: 2rpx solid #d9d9d9;
  background: #f7f7fa;
  font-size: 28rpx;
  color: #999999;
}

.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;
}
.title {
  font-weight: 700;
  color: #333;
  font-size: 28rpx;
}
.first {
  border-bottom: 2rpx solid #e5e5e5;
}
.arrow {
  transition: all 0.3s ease-in-out;
  &.rotate {
    transform: rotate(180deg);
  }
}
.times {
  padding: 10rpx 20rpx;
  border: 1px solid #d9d9d9;
  border-radius: 8rpx;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
}
:deep(.times .u-select) {
  display: flex;
}
</style>