江西小程序管理端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

278 lines
9.6 KiB

1 year ago
  1. <template>
  2. <u-popup
  3. :show="show"
  4. mode="bottom"
  5. @close="closeHandler"
  6. :safeAreaInsetBottom="safeAreaInsetBottom"
  7. :round="round"
  8. >
  9. <view class="u-action-sheet">
  10. <view
  11. class="u-action-sheet__header"
  12. v-if="title"
  13. >
  14. <text class="u-action-sheet__header__title u-line-1">{{title}}</text>
  15. <view
  16. class="u-action-sheet__header__icon-wrap"
  17. @tap.stop="cancel"
  18. >
  19. <u-icon
  20. name="close"
  21. size="17"
  22. color="#c8c9cc"
  23. bold
  24. ></u-icon>
  25. </view>
  26. </view>
  27. <text
  28. class="u-action-sheet__description"
  29. :style="[{
  30. marginTop: `${title && description ? 0 : '18px'}`
  31. }]"
  32. v-if="description"
  33. >{{description}}</text>
  34. <slot>
  35. <u-line v-if="description"></u-line>
  36. <view class="u-action-sheet__item-wrap">
  37. <template v-for="(item, index) in actions">
  38. <!-- #ifdef MP -->
  39. <button
  40. :key="index"
  41. class="u-reset-button"
  42. :openType="item.openType"
  43. @getuserinfo="onGetUserInfo"
  44. @contact="onContact"
  45. @getphonenumber="onGetPhoneNumber"
  46. @error="onError"
  47. @launchapp="onLaunchApp"
  48. @opensetting="onOpenSetting"
  49. :lang="lang"
  50. :session-from="sessionFrom"
  51. :send-message-title="sendMessageTitle"
  52. :send-message-path="sendMessagePath"
  53. :send-message-img="sendMessageImg"
  54. :show-message-card="showMessageCard"
  55. :app-parameter="appParameter"
  56. @tap="selectHandler(index)"
  57. :hover-class="!item.disabled && !item.loading ? 'u-action-sheet--hover' : ''"
  58. >
  59. <!-- #endif -->
  60. <view
  61. class="u-action-sheet__item-wrap__item"
  62. @tap.stop="selectHandler(index)"
  63. :hover-class="!item.disabled && !item.loading ? 'u-action-sheet--hover' : ''"
  64. :hover-stay-time="150"
  65. >
  66. <template v-if="!item.loading">
  67. <text
  68. class="u-action-sheet__item-wrap__item__name"
  69. :style="[itemStyle(index)]"
  70. >{{ item.name }}</text>
  71. <text
  72. v-if="item.subname"
  73. class="u-action-sheet__item-wrap__item__subname"
  74. >{{ item.subname }}</text>
  75. </template>
  76. <u-loading-icon
  77. v-else
  78. custom-class="van-action-sheet__loading"
  79. size="18"
  80. mode="circle"
  81. />
  82. </view>
  83. <!-- #ifdef MP -->
  84. </button>
  85. <!-- #endif -->
  86. <u-line v-if="index !== actions.length - 1"></u-line>
  87. </template>
  88. </view>
  89. </slot>
  90. <u-gap
  91. bgColor="#eaeaec"
  92. height="6"
  93. v-if="cancelText"
  94. ></u-gap>
  95. <view hover-class="u-action-sheet--hover">
  96. <text
  97. @touchmove.stop.prevent
  98. :hover-stay-time="150"
  99. v-if="cancelText"
  100. class="u-action-sheet__cancel-text"
  101. @tap="cancel"
  102. >{{cancelText}}</text>
  103. </view>
  104. </view>
  105. </u-popup>
  106. </template>
  107. <script>
  108. import openType from '../../libs/mixin/openType'
  109. import button from '../../libs/mixin/button'
  110. import props from './props.js';
  111. /**
  112. * ActionSheet 操作菜单
  113. * @description 本组件用于从底部弹出一个操作菜单供用户选择并返回结果本组件功能类似于uni的uni.showActionSheetAPI配置更加灵活所有平台都表现一致
  114. * @tutorial https://www.uviewui.com/components/actionSheet.html
  115. *
  116. * @property {Boolean} show 操作菜单是否展示 默认 false
  117. * @property {String} title 操作菜单标题
  118. * @property {String} description 选项上方的描述信息
  119. * @property {Array<Object>} actions 按钮的文字数组见官方文档示例
  120. * @property {String} cancelText 取消按钮的提示文字,不为空时显示按钮
  121. * @property {Boolean} closeOnClickAction 点击某个菜单项时是否关闭弹窗 默认 true
  122. * @property {Boolean} safeAreaInsetBottom 处理底部安全区 默认 true
  123. * @property {String} openType 小程序的打开方式 (contact | launchApp | getUserInfo | openSetting getPhoneNumber error )
  124. * @property {Boolean} closeOnClickOverlay 点击遮罩是否允许关闭 (默认 true )
  125. * @property {Number|String} round 圆角值默认无圆角 (默认 0 )
  126. * @property {String} lang 指定返回用户信息的语言zh_CN 简体中文zh_TW 繁体中文en 英文
  127. * @property {String} sessionFrom 会话来源openType="contact"时有效
  128. * @property {String} sendMessageTitle 会话内消息卡片标题openType="contact"时有效
  129. * @property {String} sendMessagePath 会话内消息卡片点击跳转小程序路径openType="contact"时有效
  130. * @property {String} sendMessageImg 会话内消息卡片图片openType="contact"时有效
  131. * @property {Boolean} showMessageCard 是否显示会话内消息卡片设置此参数为 true用户进入客服会话会在右下角显示"可能要发送的小程序"提示用户点击后可以快速发送小程序消息openType="contact"时有效 默认 false
  132. * @property {String} appParameter 打开 APP APP 传递的参数openType=launchApp 时有效
  133. *
  134. * @event {Function} select 点击ActionSheet列表项时触发
  135. * @event {Function} close 点击取消按钮时触发
  136. * @event {Function} getuserinfo 用户点击该按钮时会返回获取到的用户信息回调的 detail 数据与 wx.getUserInfo 返回的一致openType="getUserInfo"时有效
  137. * @event {Function} contact 客服消息回调openType="contact"时有效
  138. * @event {Function} getphonenumber 获取用户手机号回调openType="getPhoneNumber"时有效
  139. * @event {Function} error 当使用开放能力时发生错误的回调openType="error"时有效
  140. * @event {Function} launchapp 打开 APP 成功的回调openType="launchApp"时有效
  141. * @event {Function} opensetting 在打开授权设置页后回调openType="openSetting"时有效
  142. * @example <u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet>
  143. */
  144. export default {
  145. name: "u-action-sheet",
  146. // 一些props参数和methods方法,通过mixin混入,因为其他文件也会用到
  147. mixins: [openType, button, uni.$u.mixin, props],
  148. data() {
  149. return {
  150. }
  151. },
  152. computed: {
  153. // 操作项目的样式
  154. itemStyle() {
  155. return (index) => {
  156. let style = {};
  157. if (this.actions[index].color) style.color = this.actions[index].color
  158. if (this.actions[index].fontSize) style.fontSize = uni.$u.addUnit(this.actions[index].fontSize)
  159. // 选项被禁用的样式
  160. if (this.actions[index].disabled) style.color = '#c0c4cc'
  161. return style;
  162. }
  163. },
  164. },
  165. methods: {
  166. closeHandler() {
  167. // 允许点击遮罩关闭时,才发出close事件
  168. if(this.closeOnClickOverlay) {
  169. this.$emit('close')
  170. }
  171. },
  172. // 点击取消按钮
  173. cancel() {
  174. this.$emit('close')
  175. },
  176. selectHandler(index) {
  177. const item = this.actions[index]
  178. if (item && !item.disabled && !item.loading) {
  179. this.$emit('select', item)
  180. if (this.closeOnClickAction) {
  181. this.$emit('close')
  182. }
  183. }
  184. },
  185. }
  186. }
  187. </script>
  188. <style lang="scss" scoped>
  189. @import "../../libs/css/components.scss";
  190. $u-action-sheet-reset-button-width:100% !default;
  191. $u-action-sheet-title-font-size: 16px !default;
  192. $u-action-sheet-title-padding: 12px 30px !default;
  193. $u-action-sheet-title-color: $u-main-color !default;
  194. $u-action-sheet-header-icon-wrap-right:15px !default;
  195. $u-action-sheet-header-icon-wrap-top:15px !default;
  196. $u-action-sheet-description-font-size:13px !default;
  197. $u-action-sheet-description-color:14px !default;
  198. $u-action-sheet-description-margin: 18px 15px !default;
  199. $u-action-sheet-item-wrap-item-padding:15px !default;
  200. $u-action-sheet-item-wrap-name-font-size:16px !default;
  201. $u-action-sheet-item-wrap-subname-font-size:13px !default;
  202. $u-action-sheet-item-wrap-subname-color: #c0c4cc !default;
  203. $u-action-sheet-item-wrap-subname-margin-top:10px !default;
  204. $u-action-sheet-cancel-text-font-size:16px !default;
  205. $u-action-sheet-cancel-text-color:$u-content-color !default;
  206. $u-action-sheet-cancel-text-font-size:15px !default;
  207. $u-action-sheet-cancel-text-hover-background-color:rgb(242, 243, 245) !default;
  208. .u-reset-button {
  209. width: $u-action-sheet-reset-button-width;
  210. }
  211. .u-action-sheet {
  212. text-align: center;
  213. &__header {
  214. position: relative;
  215. padding: $u-action-sheet-title-padding;
  216. &__title {
  217. font-size: $u-action-sheet-title-font-size;
  218. color: $u-action-sheet-title-color;
  219. font-weight: bold;
  220. text-align: center;
  221. }
  222. &__icon-wrap {
  223. position: absolute;
  224. right: $u-action-sheet-header-icon-wrap-right;
  225. top: $u-action-sheet-header-icon-wrap-top;
  226. }
  227. }
  228. &__description {
  229. font-size: $u-action-sheet-description-font-size;
  230. color: $u-tips-color;
  231. margin: $u-action-sheet-description-margin;
  232. text-align: center;
  233. }
  234. &__item-wrap {
  235. &__item {
  236. padding: $u-action-sheet-item-wrap-item-padding;
  237. @include flex;
  238. align-items: center;
  239. justify-content: center;
  240. flex-direction: column;
  241. &__name {
  242. font-size: $u-action-sheet-item-wrap-name-font-size;
  243. color: $u-main-color;
  244. text-align: center;
  245. }
  246. &__subname {
  247. font-size: $u-action-sheet-item-wrap-subname-font-size;
  248. color: $u-action-sheet-item-wrap-subname-color;
  249. margin-top: $u-action-sheet-item-wrap-subname-margin-top;
  250. text-align: center;
  251. }
  252. }
  253. }
  254. &__cancel-text {
  255. font-size: $u-action-sheet-cancel-text-font-size;
  256. color: $u-action-sheet-cancel-text-color;
  257. text-align: center;
  258. padding: $u-action-sheet-cancel-text-font-size;
  259. }
  260. &--hover {
  261. background-color: $u-action-sheet-cancel-text-hover-background-color;
  262. }
  263. }
  264. </style>