wx-qhb/pageD/afterSalesDetail/component/refusePopup.vue

<template>
  <view class="popup">
    <u-popup
      :show="show"
      @close="$emit('close')"
      :safeAreaInsetBottom="false"
      mode="center"
      round="10"
    >
      <view class="popup-content">
        <view class="title"> {{ i18n.reasonForRefusal }} </view>
        <view class="_textarea">
          <u--textarea
            v-model="value2"
            height="108"
            maxlength="200"
            :placeholder="i18n.pleaseEnterReason"
            count
          ></u--textarea>
        </view>
        <button class="btn-1" @click="$emit('refund', 2, value2)">
          {{ i18n.submitTo }}
        </button>
        <view class="cancel" @click="$emit('close')"> {{ i18n.Cancel }} </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    show: {
      typeof: Boolean,
      default: false,
    },
  },
  watch: {
    show(newVal) {
      if (!newVal) {
        this.value2 = "";
      }
    },
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  data() {
    return {
      value2: "",
    };
  },
  methods: {
    close() {},
  },
};
</script>

<style scoped lang="scss">
.popup-content {
  padding: 36rpx 28rpx;
  .title {
    font-size: 32rpx;
    color: #333;
    font-weight: 600;
    text-align: center;
    margin-bottom: 28rpx;
  }
  ._textarea {
    width: 534rpx;
    height: 216rpx;
  }
  .btn-1 {
    background-color: #f83224;
    color: #fff;
    margin-top: 40rpx;
    border-radius: 38rpx;
  }
  .cancel {
    text-align: center;
    margin-top: 28rpx;
    font-size: 28rpx;
    color: rgba(51, 51, 51, 0.6);
  }
}
</style>