bug

jiangping

2023-11-07 64b432916af9c9218ab3f3eca614e26c542142ae

 minipro_standard/uni_modules/uview-ui/components/u-action-sheet/u-action-sheet.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,278 @@

<template>
   <u-popup
       :show="show"
       mode="bottom"
       @close="closeHandler"
       :safeAreaInsetBottom="safeAreaInsetBottom"
       :round="round"
   >
      <view class="u-action-sheet">
         <view
             class="u-action-sheet__header"
             v-if="title"
         >
            <text class="u-action-sheet__header__title u-line-1">{{title}}</text>
            <view
                class="u-action-sheet__header__icon-wrap"
                @tap.stop="cancel"
            >
               <u-icon
                   name="close"
                   size="17"
                   color="#c8c9cc"
                   bold
               ></u-icon>
            </view>
         </view>
         <text
             class="u-action-sheet__description"
            :style="[{
               marginTop: `${title && description ? 0 : '18px'}`
            }]"
             v-if="description"
         >{{description}}</text>
         <slot>
            <u-line v-if="description"></u-line>
            <view class="u-action-sheet__item-wrap">
               <template v-for="(item, index) in actions">
                  <!-- #ifdef MP -->
                  <button
                      :key="index"
                      class="u-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 ? 'u-action-sheet--hover' : ''"
                  >
                     <!-- #endif -->
                     <view
                         class="u-action-sheet__item-wrap__item"
                         @tap.stop="selectHandler(index)"
                         :hover-class="!item.disabled && !item.loading ? 'u-action-sheet--hover' : ''"
                         :hover-stay-time="150"
                     >
                        <template v-if="!item.loading">
                           <text
                               class="u-action-sheet__item-wrap__item__name"
                               :style="[itemStyle(index)]"
                           >{{ item.name }}</text>
                           <text
                               v-if="item.subname"
                               class="u-action-sheet__item-wrap__item__subname"
                           >{{ item.subname }}</text>
                        </template>
                        <u-loading-icon
                            v-else
                            custom-class="van-action-sheet__loading"
                            size="18"
                            mode="circle"
                        />
                     </view>
                     <!-- #ifdef MP -->
                  </button>
                  <!-- #endif -->
                  <u-line v-if="index !== actions.length - 1"></u-line>
               </template>
            </view>
         </slot>
         <u-gap
             bgColor="#eaeaec"
             height="6"
             v-if="cancelText"
         ></u-gap>
         <view hover-class="u-action-sheet--hover">
            <text
                @touchmove.stop.prevent
                :hover-stay-time="150"
                v-if="cancelText"
                class="u-action-sheet__cancel-text"
                @tap="cancel"
            >{{cancelText}}</text>
         </view>
      </view>
   </u-popup>
</template>

<script>
   import openType from '../../libs/mixin/openType'
   import button from '../../libs/mixin/button'
   import props from './props.js';
   /**
    * ActionSheet æ“ä½œèœå•
    * @description æœ¬ç»„件用于从底部弹出一个操作菜单，供用户选择并返回结果。本组件功能类似于uni的uni.showActionSheetAPI，配置更加灵活，所有平台都表现一致。
    * @tutorial https://www.uviewui.com/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 {Number|String}   round            åœ†è§’值，默认无圆角  (默认 0 )
    * @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 <u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet>
    */
   export default {
      name: "u-action-sheet",
      // ä¸€äº›props参数和methods方法，通过mixin混入，因为其他文件也会用到
      mixins: [openType, button, uni.$u.mixin, props],
      data() {
         return {

         }
      },
      computed: {
         // æ“ä½œé¡¹ç›®çš„样式
         itemStyle() {
            return (index) => {
               let style = {};
               if (this.actions[index].color) style.color = this.actions[index].color
               if (this.actions[index].fontSize) style.fontSize = uni.$u.addUnit(this.actions[index].fontSize)
               // é€‰é¡¹è¢«ç¦ç”¨çš„样式
               if (this.actions[index].disabled) style.color = '#c0c4cc'
               return style;
            }
         },
      },
      methods: {
         closeHandler() {
            // å…è®¸ç‚¹å‡»é®ç½©å…³é—­æ—¶ï¼Œæ‰å‘出close事件
            if(this.closeOnClickOverlay) {
               this.$emit('close')
            }
         },
         // ç‚¹å‡»å–消按钮
         cancel() {
            this.$emit('close')
         },
         selectHandler(index) {
            const item = this.actions[index]
            if (item && !item.disabled && !item.loading) {
               this.$emit('select', item)
               if (this.closeOnClickAction) {
                  this.$emit('close')
               }
            }
         },
      }
   }
</script>

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

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

   .u-action-sheet {
      text-align: center;
      &__header {
         position: relative;
         padding: $u-action-sheet-title-padding;
         &__title {
            font-size: $u-action-sheet-title-font-size;
            color: $u-action-sheet-title-color;
            font-weight: bold;
            text-align: center;
         }

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

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

      &__item-wrap {

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

            &__name {
               font-size: $u-action-sheet-item-wrap-name-font-size;
               color: $u-main-color;
               text-align: center;
            }

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

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

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