cashier-ipad-new/pagesOrder/pay-order/components/edit-accountPoints.vue

<template>
  <my-model ref="model" :title="title" iconColor="#000" @close="resetForm">
    <template #desc>
      <view class="u-text-left u-p-30 color-666 u-font-28">
        <view class="u-m-t-32 u-flex">
          <view class="" v-if="accountPoints.calcRes.usable">
            <text class="color-red">*</text>
            <text class="" v-if="accountPoints.calcRes.equivalentPoints"
              >{{ accountPoints.calcRes.equivalentPoints }}积分等于1元,</text
            >
            <text>
				最大抵扣积分{{ accountPoints.calcRes.maxUsablePoints }}
            </text>
            <text>, 最小抵扣积分0 </text>
          </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="pointsInput"
              @change="pointsChange"
              paddingNone
              :inputBorder="false"
              v-model="form.points"
              placeholder="输入积分抵扣数量"
            ></uni-easyinput>
          </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 myTabs from "@/components/my-components/my-tabs.vue";
import infoBox from "@/commons/utils/infoBox.js";
const props = defineProps({
  title: {
    type: String,
    default: "积分抵扣",
  },
  accountPoints: {
    type: Object,
    default: () => {
      return {
        calcRes: {
          usable: false,
          unusableReason: "",
          minDeductionPoints: 0,
          maxUsablePoints: 0,
        },
      };
    },
  },
  price: {
    type: [Number, String],
    default: 0,
  },
});

function to2(n) {
  if (!n) {
    return "";
  }
  return n.toFixed(2);
}

function pointsInput(e) {
  setTimeout(() => {
    form.points = Math.floor(e);
  }, 100);
}

function pointsChange(newval) {
  form.points = Math.floor(newval);
  if (newval < 0) {
    form.points = 0;
    return infoBox.showToast("积分抵扣不能小于0");
  }
  if (newval > props.accountPoints.calcRes.maxUsablePoints) {
    form.points = props.price;
    return infoBox.showToast(
      "积分抵扣不能大于" + props.accountPoints.calcRes.maxUsablePoints
    );
  }
}

const form = reactive({
  points: props.price,
});
watch(
  () => props.price,
  (newval) => {
    form.points = newval;
  }
);

function resetForm() {
  form.points = 0;
}

const model = ref(null);

function open() {
  model.value.open();
  form.points = props.price;
}

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

function confirm() {
  emits("confirm", Math.floor(form.points));
  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>