279 lines
		
	
	
		
			9.6 KiB
		
	
	
	
		
			Vue
		
	
	
	
		
		
			
		
	
	
			279 lines
		
	
	
		
			9.6 KiB
		
	
	
	
		
			Vue
		
	
	
	
|  | 
 | |||
|  | <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> |