wx-qhb/pageD/components/agreePopup.vue

<template>
  <view>
    <u-popup
      :show="agreeShow"
      @close="$emit('close')"
      :safeAreaInsetBottom="false"
      mode="center"
      round="10"
    >
      <view class="popup-content">
        <view class="title"> {{ title }} </view>

        <u--input
          v-if="title == '请确认是否退款'"
          placeholder="请输入退款金额"
          border="surround"
          type="number"
          v-model="value"
        ></u--input>
        <view class="btn-list">
          <button class="btn-2" @click="$emit('close')">取消</button>
          <button class="btn-1" @click="submit">提交</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    agreeShow: {
      typeof: Boolean,
      default: false,
    },
    title: {
      typeof: String,
      default: "",
    },
  },
  watch: {
    agreeShow() {
      console.log(111);
    },
  },
  data() {
    return {
      value: "",
    };
  },
  methods: {
    submit() {
      if (this.title == "请确认是否退款") {
        if (!this.value) {
          uni.showToast({
            title: "请输入退款金额",
            icon: "none",
          });
          return;
        }
        this.$emit("close", 1, this.value);
      } else {
        this.$emit("close", 1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.popup-content {
  padding: 36rpx 28rpx;
  width: 450rpx;
  .title {
    font-size: 32rpx;
    color: #333;
    font-weight: 600;
    text-align: center;
    margin-bottom: 28rpx;
  }
  .btn-list {
    display: flex;
    justify-content: space-around;
    margin-top: 20rpx;
    .btn-1 {
      background-color: #f83224;
      color: #fff;
      margin-top: 40rpx;
      border-radius: 38rpx;
      margin: 0;
      width: 188rpx;
      height: 76rpx;
      line-height: 76rpx;
      font-size: 32rpx;
    }

    .btn-2 {
      background-color: #fff;
      color: #f83224;
      margin-top: 40rpx;
      border-radius: 38rpx;
      border: 2rpx solid #f83224;
      margin: 0;
      width: 188rpx;
      height: 76rpx;
      line-height: 76rpx;
      font-size: 32rpx;
    }
  }
}
</style>