From 0a24ffeb3eff074c8f11e9f94fdf2c2cb4929799 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Fri, 10 Nov 2023 13:08:29 +0800 Subject: [PATCH] fix:小程序详情修改 --- uni_modules/uview-ui/components/u-action-sheet/u-action-sheet.vue | 278 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 278 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-action-sheet/u-action-sheet.vue b/uni_modules/uview-ui/components/u-action-sheet/u-action-sheet.vue new file mode 100644 index 0000000..26d5d8d --- /dev/null +++ b/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> -- Gitblit v1.8.0