MoeNovaClient/components/dropDownSelection/ActionSheet.vue

<template>
  <view class="action-sheet-container" v-if="visible" @click="handleMaskClick">
    <view class="action-sheet-mask" @touchmove.stop.prevent></view>
    <view class="action-sheet" :class="{ 'action-sheet-show': animationShow }" @click.stop>
      <view class="action-sheet-title" v-if="title">{{ title }}</view>
      <view class="action-sheet-items">
        <view class="action-sheet-item" v-for="(item, index) in items" :key="index"
          :class="{ 'action-sheet-item-danger': item.danger }" @click.stop="handleItemClick(index, item)">
          <text class="action-sheet-item-text">{{ item.text }}</text>
          <image class="action-sheet-radio-img" :src="selectedIndex === index ? checkedImg : uncheckedImg"
            mode="widthFix" />
        </view>
      </view>
      <view class="action-sheet-confirm-btn" @click="handleConfirm">确认</view>
      <image class="action-sheet-confirm-img" src="@/static/icon/wd_icon_guanbi.png" @click="handleMaskClick" />
      <view class="action-sheet-line"></view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ActionSheet',
  props: {
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 选项列表，格式：[{text: '选项1', icon: 'fa-share-alt', danger: false}, ...]
    items: {
      type: Array,
      default: () => []
    },
    // 取消按钮文字
    cancelText: {
      type: String,
      default: '取消'
    },
    // 点击遮罩是否关闭
    maskClosable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      visible: false,
      animationShow: false,
      selectedIndex: null,
      checkedImg: require('@/static/icon/wd_icon_gouxuan05.png'),    // 选中图片
      uncheckedImg: require('@/static/icon/wd_icon_gouxuan04.png') // 未选中图片
    }
  },
  methods: {
    // 显示ActionSheet
    show() {
      this.visible = true;
      setTimeout(() => {
        this.animationShow = true;
      }, 10);
    },

    // 隐藏ActionSheet
    hide() {
      this.animationShow = false;
      setTimeout(() => {
        this.visible = false;
      }, 300); // 动画持续时间
    },

    // 处理选项点击
    handleItemClick(index, item) {
      this.selectedIndex = index;
    },

    // 处理确认按钮点击
    handleConfirm() {
      if (this.selectedIndex !== null) {
        this.$emit('select', this.selectedIndex, this.items[this.selectedIndex]);
        this.hide();
      }
    },

    // 处理遮罩点击
    handleMaskClick() {
      if (this.maskClosable) {
        this.$emit('cancel');
        this.hide();
      }
    }
  }
}
</script>

<style lang="scss">
.action-sheet-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;


  .action-sheet-mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .action-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    background: #F2F6F2;
    border-radius: 24rpx 24rpx 0 0;
    overflow: hidden;
    padding: 0rpx 32rpx 32rpx 32rpx;
    padding-bottom: 70rpx;

    &.action-sheet-show {
      transform: translateY(0);
    }

    .action-sheet-title {
      padding: 24rpx 0 32rpx 0;
      text-align: center;
      font-size: 32rpx;
      color: #222;
      background-color: transparent;
      font-weight: bold;
      border-bottom: none;
    }

    .action-sheet-items {

      .action-sheet-item {
        background-color: #fff;
        display: flex;
        align-items: center;
        height: 90rpx;
        font-size: 32rpx;
        color: #333;
        border-radius: 16rpx;
        margin-bottom: 20rpx;
        box-sizing: border-box;
        justify-content: space-between;
        padding: 24rpx 28rpx;

        &:active {
          background-color: #f2f2f2;
        }

        &.action-sheet-item-danger {
          color: #ff5151;
          margin-top: 16rpx;
          border-radius: 20rpx;
        }

        .action-sheet-item-text {
          font-size: 32rpx;
        }

        &:first-child {
          border-top-right-radius: 20rpx;
          border-top-left-radius: 20rpx;
        }

        &:nth-child(2) {
          border-bottom-right-radius: 20rpx;
          border-bottom-left-radius: 20rpx;
        }

        &:last-child {
          border-bottom-right-radius: 20rpx;
          border-bottom-left-radius: 20rpx;
        }
      }
    }

    .action-sheet-confirm-btn {
      height: 90rpx;
      line-height: 90rpx;
      background: #111;
      color: #A6E22E;
      border-radius: 45rpx;
      text-align: center;
      font-size: 36rpx;
      font-weight: bold;
      letter-spacing: 4rpx;
      width: 90%;
      margin: 0 auto;
      margin-top: 40rpx;
    }

    .action-sheet-line {
      position: absolute;
      bottom: 4rpx;
      left: 50%;
      transform: translateX(-50%); 
      width: 268rpx;
      height: 10rpx;
      background: #000000;
      border-radius: 200rpx;
    }
  }
}

.action-sheet-radio-img {
  width: 36rpx;
  height: 36rpx;
  margin-left: 24rpx;
}

.action-sheet-confirm-img {
  width: 38rpx;
  height: 38rpx;
  position: absolute;
  right: 28rpx;
  top: 24rpx;
  border-radius: 50%;
}
</style>