dz-app/uni_modules/uv-action-sheet/components/uv-action-sheet/uv-action-sheet.vue

<template>
    <uv-popup
        ref="popup"
        mode="bottom"
        :safeAreaInsetBottom="safeAreaInsetBottom"
        :round="round"
        :close-on-click-overlay="closeOnClickOverlay"
        @change="popupChange"
    >
        <view class="uv-action-sheet">
            <view
                class="uv-action-sheet__header"
                v-if="title"
            >
                <text class="uv-action-sheet__header__title uv-line-1">{{ title }}</text>
                <view
                    class="uv-action-sheet__header__icon-wrap"
                    @tap.stop="cancel"
                >
                    <uv-icon
                        name="close"
                        size="17"
                        color="#c8c9cc"
                        bold
                    ></uv-icon>
                </view>
            </view>
            <text
                class="uv-action-sheet__description"
                :style="[{
					marginTop: `${title && description ? 0 : '18px'}`
				}]"
                v-if="description"
            >{{ description }}
            </text>
            <slot>
                <uv-line v-if="description"></uv-line>
                <view class="uv-action-sheet__item-wrap">
                    <view v-for="(item, index) in actions" :key="index">
                        <!-- #ifdef MP -->
                        <button
                            class="uv-reset-button"
                            :openType="item.openType"
                            @getuserinfo="onGetUserInfo"
                            @contact="onContact"
                            @getphonenumber="onGetPhoneNumber"
                            @error="onError"
                            @launchapp="onLaunchApp"
                            @opensetting="onOpenSetting"
                            :lang="lang"
                            :session-from="sessionFrom"
                            :send-message-title="sendMessageTitle"
                            :send-message-path="sendMessagePath"
                            :send-message-img="sendMessageImg"
                            :show-message-card="showMessageCard"
                            :app-parameter="appParameter"
                            @tap="selectHandler(index)"
                            :hover-class="!item.disabled && !item.loading ? 'uv-action-sheet--hover' : ''"
                        >
                            <!-- #endif -->
                            <view
                                class="uv-action-sheet__item-wrap__item"
                                @tap.stop="selectHandler(index)"
                                :hover-class="!item.disabled && !item.loading ? 'uv-action-sheet--hover' : ''"
                                :hover-stay-time="150"
                            >
                                <template v-if="!item.loading">
                                    <view
                                        class="uv-action-sheet__item-wrap__item__name"
                                        :style="[itemStyle(index)]"
                                    >
                                        {{ item.name }}
                                        <uv-icon v-if="item.icon" :name="item.icon"/>
                                    </view>
                                    <text
                                        v-if="item.subname"
                                        class="uv-action-sheet__item-wrap__item__subname"
                                    >{{ item.subname }}
                                    </text>
                                </template>
                                <uv-loading-icon
                                    v-else
                                    custom-class="van-action-sheet__loading"
                                    size="18"
                                    mode="circle"
                                />
                            </view>
                            <!-- #ifdef MP -->
                        </button>
                        <!-- #endif -->
                        <uv-line v-if="index !== actions.length - 1"></uv-line>
                    </view>
                </view>
            </slot>
            <uv-gap
                bgColor="#eaeaec"
                height="6"
                v-if="cancelText"
            ></uv-gap>
            <view hover-class="uv-action-sheet--hover">
                <text
                    @touchmove.stop.prevent
                    :hover-stay-time="150"
                    v-if="cancelText"
                    class="uv-action-sheet__cancel-text"
                    @tap="cancel"
                >{{ cancelText }}
                </text>
            </view>
        </view>
    </uv-popup>
</template>

<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import button from '@/uni_modules/uv-ui-tools/libs/mixin/button.js'
import openType from '@/uni_modules/uv-ui-tools/libs/mixin/openType.js'
import props from './props.js';

/**
 * ActionSheet 操作菜单
 * @description 本组件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
 * @tutorial https://www.uvui.cn/components/actionSheet.html
 * @property {Boolean}            show                操作菜单是否展示 （默认 false ）
 * @property {String}            title                操作菜单标题
 * @property {String}            description            选项上方的描述信息
 * @property {Array<Object>}    actions                按钮的文字数组，见官方文档示例
 * @property {String}            cancelText            取消按钮的提示文字,不为空时显示按钮
 * @property {Boolean}            closeOnClickAction    点击某个菜单项时是否关闭弹窗 （默认 true ）
 * @property {Boolean}            safeAreaInsetBottom    处理底部安全区 （默认 true ）
 * @property {String}            openType            小程序的打开方式 (contact | launchApp | getUserInfo | openSetting ｜getPhoneNumber ｜error )
 * @property {Boolean}            closeOnClickOverlay    点击遮罩是否允许关闭  (默认 true )
 * @property {String}            lang                指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文
 * @property {String}            sessionFrom            会话来源，openType="contact"时有效
 * @property {String}            sendMessageTitle    会话内消息卡片标题，openType="contact"时有效
 * @property {String}            sendMessagePath        会话内消息卡片点击跳转小程序路径，openType="contact"时有效
 * @property {String}            sendMessageImg        会话内消息卡片图片，openType="contact"时有效
 * @property {Boolean}            showMessageCard        是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效 （默认 false ）
 * @property {String}            appParameter        打开 APP 时，向 APP 传递的参数，openType=launchApp 时有效
 *
 * @event {Function} select            点击ActionSheet列表项时触发
 * @event {Function} close            点击取消按钮时触发
 * @event {Function} getuserinfo    用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，openType="getUserInfo"时有效
 * @event {Function} contact        客服消息回调，openType="contact"时有效
 * @event {Function} getphonenumber    获取用户手机号回调，openType="getPhoneNumber"时有效
 * @event {Function} error            当使用开放能力时，发生错误的回调，openType="error"时有效
 * @event {Function} launchapp        打开 APP 成功的回调，openType="launchApp"时有效
 * @event {Function} opensetting    在打开授权设置页后回调，openType="openSetting"时有效
 * @example <uv-action-sheet ref="actionSheet" :actions="list" :title="title" ></uv-action-sheet>
 */
export default {
    name: "uv-action-sheet",
    mixins: [openType, button, mpMixin, mixin, props],
    emits: ['close', 'select'],
    computed: {
        // 操作项目的样式
        itemStyle() {
            return (index) => {
                let style = {};
                if (this.actions[index].color) style.color = this.actions[index].color
                if (this.actions[index].fontSize) style.fontSize = this.$uv.addUnit(this.actions[index].fontSize)
                // 选项被禁用的样式
                if (this.actions[index].disabled) style.color = '#c0c4cc'
                return style;
            }
        },
    },
    methods: {
        open() {
            this.$refs.popup.open();
        },
        close() {
            this.$refs.popup.close();
        },
        popupChange(e) {
            if (!e.show) this.$emit('close');
        },
        // 点击取消按钮
        cancel() {
            this.close();
        },
        selectHandler(index) {
            const item = this.actions[index]
            if (item && !item.disabled && !item.loading) {
                this.$emit('select', item)
                if (this.closeOnClickAction) {
                    this.close();
                }
            }
        },
    }
}
</script>

<style lang="scss" scoped>
$show-lines: 1;
$show-reset-button: 1;
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
$uv-action-sheet-reset-button-width: 100% !default;
$uv-action-sheet-title-font-size: 16px !default;
$uv-action-sheet-title-padding: 12px 30px !default;
$uv-action-sheet-title-color: $uv-main-color !default;
$uv-action-sheet-header-icon-wrap-right: 15px !default;
$uv-action-sheet-header-icon-wrap-top: 15px !default;
$uv-action-sheet-description-font-size: 13px !default;
$uv-action-sheet-description-color: 14px !default;
$uv-action-sheet-description-margin: 18px 15px !default;
$uv-action-sheet-item-wrap-item-padding: 15px !default;
$uv-action-sheet-item-wrap-name-font-size: 16px !default;
$uv-action-sheet-item-wrap-subname-font-size: 13px !default;
$uv-action-sheet-item-wrap-subname-color: #c0c4cc !default;
$uv-action-sheet-item-wrap-subname-margin-top: 10px !default;
$uv-action-sheet-cancel-text-font-size: 16px !default;
$uv-action-sheet-cancel-text-color: $uv-content-color !default;
$uv-action-sheet-cancel-text-font-size: 15px !default;
$uv-action-sheet-cancel-text-hover-background-color: rgb(242, 243, 245) !default;

.uv-reset-button {
    width: $uv-action-sheet-reset-button-width;
}

.uv-action-sheet {
    text-align: center;

    &__header {
        position: relative;
        padding: $uv-action-sheet-title-padding;

        &__title {
            font-size: $uv-action-sheet-title-font-size;
            color: $uv-action-sheet-title-color;
            font-weight: bold;
            text-align: center;
        }

        &__icon-wrap {
            position: absolute;
            right: $uv-action-sheet-header-icon-wrap-right;
            top: $uv-action-sheet-header-icon-wrap-top;
        }
    }

    &__description {
        font-size: $uv-action-sheet-description-font-size;
        color: $uv-tips-color;
        margin: $uv-action-sheet-description-margin;
        text-align: center;
    }

    &__item-wrap {

        &__item {
            padding: $uv-action-sheet-item-wrap-item-padding;
            @include flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            &__name {
                font-size: $uv-action-sheet-item-wrap-name-font-size;
                color: $uv-main-color;
                text-align: center;
                display: flex;
                flex-direction: row;
            }

            &__subname {
                font-size: $uv-action-sheet-item-wrap-subname-font-size;
                color: $uv-action-sheet-item-wrap-subname-color;
                margin-top: $uv-action-sheet-item-wrap-subname-margin-top;
                text-align: center;
            }
        }
    }

    &__cancel-text {
        font-size: $uv-action-sheet-cancel-text-font-size;
        color: $uv-action-sheet-cancel-text-color;
        text-align: center;
        padding: $uv-action-sheet-cancel-text-font-size;
    }

    &--hover {
        background-color: $uv-action-sheet-cancel-text-hover-background-color;
    }
}
</style>