applet/components/RedeemPoints/RedeemPoints.vue

<template>
  <uv-popup
    ref="popupRef"
    mode="bottom"
    closeable
    round="40rpx"
    @change="handleClose"
  >
    <view
      class="exchange-content"
      :style="{
        paddingBottom: keyboardHeight ? keyboardHeight + 'px' : '40rpx',
      }"
    >
      <view class="exchange-content-top">
        <view class="popup-title">{{ $props.title + "积分" }}</view>
        <view class="exchange-view u-flex-center">
          <text class="exchange-text"
            >请输入<text>{{ $props.title }}</text
            >积分数：</text
          >
          <view class="exchange-view-input u-flex-center">
            <input
              class="exchange-input"
              v-model="formData.exchangePoints"
              placeholder="请输入"
              type="digit"
              :adjust-position="false"
              @blur="handleBlur"
            />
            <text class="exchange-btn" @click="handleExchangeAll">全部</text>
          </view>
        </view>
        <view class="exchange-num"
          >可<text>{{ $props.title }}</text
          >积分数：{{ formData.totalNum || 0 }}</view
        >
      </view>
      <view class="exchange-content-bottom">
        <view class="popup-title">请输入密码：</view>
        <uv-code-input
          v-model="formData.payPassword"
          size="82rpx"
          space="25rpx"
          dot
          @finish="handleFinish"
          v-if="formData.totalNum != null"
          :adjustPosition="false"
        ></uv-code-input>
        <view class="popup-btn u-flex-center-sb">
          <view class="popup-confirm" @click.stop="handleExchangeConfirm"
            >确认{{ $props.title }}</view
          >
          <view class="popup-cancel" @click="popupRef.close()">取消</view>
        </view>
      </view>
    </view>
  </uv-popup>
</template>

<script setup name="RedeemPoints">
import { ref } from "vue";
const $props = defineProps({
  title: {
    type: String,
    default: "兑换",
  },
});
const $emit = defineEmits(["confirm"]);
const popupRef = ref(null);
const formData = ref({
  exchangePoints: "",
  payPassword: "",
  totalNum: 0,
});

const handleExchangeAll = () => {
  formData.value.exchangePoints = formData.value.totalNum;
};

const handleExchangeConfirm = () => {
  if (!formData.value.exchangePoints) {
    uni.$uv.toast(`请输入${$props.title}积分数`);
    return;
  }
  if (formData.value.exchangePoints * 1 > formData.value.totalNum * 1) {
    uni.$uv.toast(`${$props.title}积分数不能大于可${$props.title}积分数`);
    return;
  }
  if (!formData.value.payPassword) {
    uni.$uv.toast("请输入密码");
    return;
  }

  $emit("confirm", formData.value);
};

// 输入框失焦处理数据
const handleBlur = () => {
  if (formData.value.exchangePoints) {
    formData.value.exchangePoints = (formData.value.exchangePoints * 1).toFixed(
      2
    );
  }
};

const keyboardHeight = ref(0);
const listener = (res) => {
  // console.log(res.height);
  keyboardHeight.value = res.height || 0;
};

// 关闭弹窗处理数据
const handleClose = (e) => {
  if (!e.show) {
    // console.log("关闭");
    formData.value = {};
    uni.offKeyboardHeightChange(listener); // 需传入与监听时同一个的函数对象
  }
};

// 输入完成处理数据
const handleFinish = () => {
  console.log("输入完成");
  try {
    uni.hideKeyboard();
  } catch (error) {}
  formData.value.focusShow = false;
  handleExchangeConfirm();
};

const open = (data) => {
  formData.value = data;
  popupRef.value.open();
  uni.onKeyboardHeightChange(listener);
};

const close = () => {
  popupRef.value.close();
};

defineExpose({
  open,
  close,
});
</script>

<style lang="scss" scoped>
.exchange-content {
  padding: 40rpx 0;
  //   text-align: center;
  background-color: #ffffff;
  .exchange-content-top {
    padding: 0 50rpx 40rpx 50rpx;
    border-bottom: 12rpx solid #f7f7f7;
    .exchange-view {
      border-bottom: 1rpx solid #f0f0f0;
      padding-bottom: 18rpx;
      margin-top: 20rpx;
      .exchange-text {
        flex-shrink: 0;
        font-size: 28rpx;
      }
      .exchange-view-input {
        flex: 1;
        .exchange-input {
          flex: 1;
          text-align: right;
        }
        .exchange-btn {
          flex-shrink: 0;
          color: #333333;
          font-size: 28rpx;
          margin-left: 20rpx;
        }
      }
    }
    .exchange-num {
      text-align: right;
      margin-top: 20rpx;
      font-size: 24rpx;
      color: #0090ff;
    }
  }
  .exchange-content-bottom {
    padding: 40rpx 50rpx 0 50rpx;
    .popup-title {
      text-align: left;
      margin-bottom: 30rpx;
    }
  }
}

.popup-btn {
  margin-top: 70rpx;
  .popup-confirm,
  .popup-cancel {
    width: 310rpx;
    height: 76rpx;
    line-height: 76rpx;
    border-radius: 38rpx;
    font-size: 28rpx;
    font-weight: 700;
    text-align: center;
  }
  .popup-confirm {
    background: #eb5153;
    color: #ffffff;
  }
  .popup-cancel {
    color: #808080;
    border: 1px solid #cccccc;
    background: #ffffff;
  }
}

.cancelQueue {
  .exchange-content-top {
    background-color: #f8f8f8;
    border-bottom: 1rpx solid #e6e6e6 !important;
    .cancelQueue-num {
      font-size: 40rpx;
      font-weight: 700;
      text-align: center;
      color: #eb5153;
    }
    .cancelQueue-prompt {
      font-size: 28rpx;
      font-weight: 400;
      color: #1a1a1a;
      text-align: center;
      margin-top: 20rpx;
    }
  }
}
</style>