hospital-accompaniment-wechat/components/reasonPop/index.vue

<template>
  <u-popup :show="popupShow" bgColor="transparent" :safeAreaInsetBottom="false" @close="close">
    <view class="popBox">
      <view class="popBox_title">{{title}}</view>
      <view class="popBox_list">
        <view class="popBox_item" v-for="(v,i) in reasonList" :key="i" @click="activeReason(v)">
          <view class="popBox_item_l" :class="{active:v.dictValue==refundReason}"></view>
          <view class="popBox_item_r">{{v.dictLabel}}</view>
        </view>
      </view>
      <view class="popBox_btn">
        <view class="popBox_btn_l" @click="affirm()">确认</view>
        <view class="popBox_btn_r" @click="close">取消</view>
      </view>
    </view>
  </u-popup>
</template>

<script>
import { dictData } from "@/api/home.js"
export default {
  data () {
    return {
      popupShow: false,
      reasonList: [],
      refundReason: ""
    }
  },
  props: {
    title: {
      type: String,
      default: "请选择退款原因"
    }
  },
  mounted () {
    this.getReasonList()
  },
  methods: {
    open () {
      this.popupShow = true
    },
    close () {
      this.popupShow = false;
      this.refundReason = ""
    },
    activeReason (item) {
      this.refundReason = item.dictValue
    },
    affirm () {
      if (!this.refundReason) {
        uni.$u.toast('请选择原因!');
        return
      }
      this.$emit("submit", this.refundReason)
      this.close()
    },
    // 获取退款原因列表
    getReasonList () {
      dictData('reason_refund').then(res => {
        this.reasonList = res.data;
      })
    },
  },
}
</script>

<style lang='scss' scoped>
.popBox {
  background: #ffffff;
  border-radius: 40rpx 40rpx 0rpx 0rpx;
  padding-top: 40rpx;
  .popBox_title {
    font-size: 40rpx;
    color: #1a1a1a;
    text-align: center;
  }
  .popBox_list {
    padding: 60rpx 30rpx 0;
    max-height: 50vh;
    overflow-y: scroll;
    .popBox_item {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      .popBox_item_l {
        width: 32rpx;
        height: 32rpx;
        background: #ffffff;
        border: 1rpx solid #b3b3b3;
        border-radius: 50%;
        margin-right: 10rpx;
      }
      .active {
        border: 1px solid #0099ff;
        position: relative;
        &::after {
          content: "";
          width: 14rpx;
          height: 14rpx;
          background: #0099ff;
          border-radius: 50%;
          position: absolute;
          top: 10rpx;
          left: 10rpx;
        }
      }
      .popBox_item_r {
        font-size: 28rpx;
        color: #808080;
      }
    }
  }
  .popBox_btn {
    display: flex;
    justify-content: space-between;
    padding: 40rpx 30rpx 100rpx;
    > view {
      width: 331rpx;
      height: 80rpx;
      border-radius: 40rpx;
      text-align: center;
      line-height: 80rpx;
    }
    .popBox_btn_l {
      background: #fb0b03;
      color: #ffffff;
    }
    .popBox_btn_r {
      border: 1rpx solid #fb0b03;
      background: #ffffff;
      color: #fb0b03;
    }
  }
}
</style>