wx-qhb/pageC/applicationRefund/component/reasonPopup.vue

<template>
  <view class="">
    <u-popup
      :show="show"
      @close="$emit('close')"
      round="16rpx"
      @open="open"
      closeable
      closeOnClickOverlay
    >
      <view class="title"> {{ i18n.reasonApplication }} </view>
      <view class="radio-list">
        <u-radio-group
          v-model="value"
          @change="handleChange"
          iconPlacement="right"
          placement="column"
        >
          <view class="radio">
            <u-radio
              activeColor="red"
              :name="i18n.wrongShot"
              :label="i18n.wrongShot"
            ></u-radio>
          </view>
          <view class="radio">
            <u-radio
              activeColor="red"
              :name="i18n.pageDescription"
              :label="i18n.pageDescription"
            ></u-radio>
          </view>
          <view class="radio">
            <u-radio
              activeColor="red"
              :name="i18n.productDamage"
              :label="i18n.productDamage"
            ></u-radio>
          </view>
          <view class="radio">
            <u-radio
              activeColor="red"
              :name="i18n.incorrectly"
              :label="i18n.incorrectly"
            ></u-radio>
          </view>
          <view class="radio">
            <u-radio
              activeColor="red"
              :name="i18n.wrongItem"
              :label="i18n.wrongItem"
            ></u-radio>
          </view>
          <view class="radio">
            <u-radio
              activeColor="red"
              :name="i18n.otherReasons"
              :label="i18n.otherReasons"
            ></u-radio>
          </view>
        </u-radio-group>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  props: {
    show: {
      typeof: Boolean,
      default: false,
    },
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  data() {
    return {
      value: "",
    };
  },
  methods: {
    open() {},
    handleChange(name) {
      this.$emit("close", name);
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  text-align: center;
  font-size: 36rpx;
  color: #222;
  font-weight: 500;
  margin-top: 20rpx;
}

.radio-list {
  padding: 0 28rpx;
  margin-top: 40rpx;
}

.radio {
  margin-bottom: 48rpx;
}
</style>