From 68c5ef7d9fea3f911e250fb5f8b300bc76099e49 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:55:49 +0800
Subject: [PATCH] 小程序
---
minipro_standard/uni_modules/uview-ui/components/u-action-sheet/u-action-sheet.vue | 278 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 278 insertions(+), 0 deletions(-)
diff --git a/minipro_standard/uni_modules/uview-ui/components/u-action-sheet/u-action-sheet.vue b/minipro_standard/uni_modules/uview-ui/components/u-action-sheet/u-action-sheet.vue
index e69de29..26d5d8d 100644
--- a/minipro_standard/uni_modules/uview-ui/components/u-action-sheet/u-action-sheet.vue
+++ b/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 鏈粍浠剁敤浜庝粠搴曢儴寮瑰嚭涓�涓搷浣滆彍鍗曪紝渚涚敤鎴烽�夋嫨骞惰繑鍥炵粨鏋溿�傛湰缁勪欢鍔熻兘绫讳技浜巙ni鐨剈ni.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 锝済etPhoneNumber 锝渆rror )
+ * @property {Boolean} closeOnClickOverlay 鐐瑰嚮閬僵鏄惁鍏佽鍏抽棴 (榛樿 true )
+ * @property {Number|String} round 鍦嗚鍊硷紝榛樿鏃犲渾瑙� (榛樿 0 )
+ * @property {String} lang 鎸囧畾杩斿洖鐢ㄦ埛淇℃伅鐨勮瑷�锛寊h_CN 绠�浣撲腑鏂囷紝zh_TW 绻佷綋涓枃锛宔n 鑻辨枃
+ * @property {String} sessionFrom 浼氳瘽鏉ユ簮锛宱penType="contact"鏃舵湁鏁�
+ * @property {String} sendMessageTitle 浼氳瘽鍐呮秷鎭崱鐗囨爣棰橈紝openType="contact"鏃舵湁鏁�
+ * @property {String} sendMessagePath 浼氳瘽鍐呮秷鎭崱鐗囩偣鍑昏烦杞皬绋嬪簭璺緞锛宱penType="contact"鏃舵湁鏁�
+ * @property {String} sendMessageImg 浼氳瘽鍐呮秷鎭崱鐗囧浘鐗囷紝openType="contact"鏃舵湁鏁�
+ * @property {Boolean} showMessageCard 鏄惁鏄剧ず浼氳瘽鍐呮秷鎭崱鐗囷紝璁剧疆姝ゅ弬鏁颁负 true锛岀敤鎴疯繘鍏ュ鏈嶄細璇濅細鍦ㄥ彸涓嬭鏄剧ず"鍙兘瑕佸彂閫佺殑灏忕▼搴�"鎻愮ず锛岀敤鎴风偣鍑诲悗鍙互蹇�熷彂閫佸皬绋嬪簭娑堟伅锛宱penType="contact"鏃舵湁鏁� 锛堥粯璁� false 锛�
+ * @property {String} appParameter 鎵撳紑 APP 鏃讹紝鍚� APP 浼犻�掔殑鍙傛暟锛宱penType=launchApp 鏃舵湁鏁�
+ *
+ * @event {Function} select 鐐瑰嚮ActionSheet鍒楄〃椤规椂瑙﹀彂
+ * @event {Function} close 鐐瑰嚮鍙栨秷鎸夐挳鏃惰Е鍙�
+ * @event {Function} getuserinfo 鐢ㄦ埛鐐瑰嚮璇ユ寜閽椂锛屼細杩斿洖鑾峰彇鍒扮殑鐢ㄦ埛淇℃伅锛屽洖璋冪殑 detail 鏁版嵁涓� wx.getUserInfo 杩斿洖鐨勪竴鑷达紝openType="getUserInfo"鏃舵湁鏁�
+ * @event {Function} contact 瀹㈡湇娑堟伅鍥炶皟锛宱penType="contact"鏃舵湁鏁�
+ * @event {Function} getphonenumber 鑾峰彇鐢ㄦ埛鎵嬫満鍙峰洖璋冿紝openType="getPhoneNumber"鏃舵湁鏁�
+ * @event {Function} error 褰撲娇鐢ㄥ紑鏀捐兘鍔涙椂锛屽彂鐢熼敊璇殑鍥炶皟锛宱penType="error"鏃舵湁鏁�
+ * @event {Function} launchapp 鎵撳紑 APP 鎴愬姛鐨勫洖璋冿紝openType="launchApp"鏃舵湁鏁�
+ * @event {Function} opensetting 鍦ㄦ墦寮�鎺堟潈璁剧疆椤靛悗鍥炶皟锛宱penType="openSetting"鏃舵湁鏁�
+ * @example <u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet>
+ */
+ export default {
+ name: "u-action-sheet",
+ // 涓�浜沺rops鍙傛暟鍜宮ethods鏂规硶锛岄�氳繃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() {
+ // 鍏佽鐐瑰嚮閬僵鍏抽棴鏃讹紝鎵嶅彂鍑篶lose浜嬩欢
+ 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>
--
Gitblit v1.9.3