cashier_app/components/my-components/edit-discount.vue

<template>
  <my-model ref="model" :title="title" iconColor="#000" @close="resetForm">
    <template #desc>
      <view class="u-text-left u-p-30 color-666">
        <view class="u-m-t-32 u-flex">
          <view>应付金额</view>
          <view class="u-m-l-32">
            {{ form.price }}
          </view>
        </view>
        <view class="u-m-t-40 u-flex">
          <view>实收金额</view>
          <view class="u-m-l-32 border u-p-l-10 u-p-r-10 u-flex-1">
            <uni-easyinput
              type="number"
              @input="currentPriceInput"
              @change="currentPriceChange"
              paddingNone
              :inputBorder="false"
              v-model="form.currentPrice"
              placeholder="输入实际金额"
            ></uni-easyinput>
          </view>
        </view>
        <view class="u-m-t-54 u-flex">
          <view>优惠折扣</view>
          <view class="u-m-l-32 u-flex-1 u-flex border u-p-l-10 u-p-r-10">
            <view class="u-flex-1">
              <uni-easyinput
                type="number"
                @input="discountInput"
                @change="discountChange"
                paddingNone
                :inputBorder="false"
                v-model="form.discount"
                placeholder="输入折扣"
              ></uni-easyinput>
            </view>
            <view class="u-font-32 color-333">%</view>
          </view>
        </view>
      </view>
    </template>
    <template #btn>
      <view class="u-p-30">
        <view class="u-m-t-10">
          <my-button @tap="confirm" shape="circle" fontWeight="700"
            >修改</my-button
          >
          <view class="">
            <my-button @tap="close" type="cancel" bgColor="#fff"
              >取消</my-button
            >
          </view>
        </view>
      </view>
    </template>
  </my-model>
</template>

<script setup>
import { reactive, nextTick, ref, watch } from "vue";
import myModel from "@/components/my-components/my-model.vue";
import myButton from "@/components/my-components/my-button.vue";
import infoBox from "@/commons/utils/infoBox.js";
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  discount: {
    type: [Number, String],
    default: 100,
  },
  price: {
    type: [Number, String],
    default: 0,
  },
});
function currentPriceInput(newval) {
  form.discount = ((newval * 100) / form.price).toFixed(2);
}
function discountInput(newval) {
  const currentPrice = uni.$utils.isMoney((form.price * newval) / 100) * 1;
  form.currentPrice = currentPrice.toFixed(2);
}
function currentPriceChange(newval) {
  if (newval < 0) {
    form.currentPrice = "0.00";
    form.discount = 100;
    return infoBox.showToast("实收金额不能小于0");
  }
  console.log(props.price);
  console.log(newval);
  if (newval > props.price) {
    const currentPrice = uni.$utils.isMoney(props.price * 1);
    form.currentPrice = currentPrice.toFixed(2);
    form.discount = 0;
    return infoBox.showToast("实收金额不能大于应付金额");
  }
}
function discountChange(newval) {
  if (newval < 0) {
    form.currentPrice = props.price;
    form.discount = 0;
    return infoBox.showToast("优惠折扣不能小于0");
  }
  if (newval > 100) {
    form.discount = 100;
    form.currentPrice = 0;
    return infoBox.showToast("优惠折扣不能大于100");
  }
}

const $form = {
  price: props.price,
  currentPrice: props.price,
  discount: 100,
};
const form = reactive({
  ...$form,
});
watch(
  () => props.price,
  (newval) => {
    form.price = (newval * 1).toFixed(2);
    form.currentPrice = newval;
  }
);
function resetForm() {
  Object.assign(form, {
    ...$form,
  });
}

const model = ref(null);

function open() {
  model.value.open();
  form.price = (props.price * 1).toFixed(2);
  form.discount = props.discount;
  form.currentPrice = ((props.discount * props.price) / 100).toFixed(2);
  console.log(form);
}

function close() {
  model.value.close();
}
const emits = defineEmits(["confirm"]);

function confirm() {
  emits("confirm", {
    ...form,
    currentPrice: Number(form.currentPrice).toFixed(2),
  });
  close();
}
defineExpose({
  open,
  close,
});
</script>

<style lang="scss" scoped>
.border {
  border-radius: 8rpx;
  overflow: hidden;
  border-color: #999;
}
.lh34 {
  line-height: 34rpx;
}

.tag {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  line-height: inherit;
  font-size: 24rpx;
  color: #666666;
  padding: 6rpx 20rpx;
  border-radius: 8rpx;

  &.active {
    border-color: #e6f0ff;
    color: $my-main-color;
  }
}

.hover-class {
  background-color: #e5e5e5;
}

.discount {
  .u-absolute {
    top: 0;
    bottom: 0;
    right: 0;
  }
}

.bg1 {
  background: #f7f7fa;
}

.tab {
  padding: 0 80rpx;
}

.border {
  border: 1px solid #e5e5e5;
  border-radius: 4rpx;
}

.input-box {
  padding: 22rpx 32rpx;
  font-size: 28rpx;
  color: #666;
}

.placeholder-class {
  font-size: 28rpx;
}
</style>