Skip to content

U
uniapp_order
Commit 314e0846 authored by jyx's avatar jyx
Browse files
Options

代码优化

parent f7d38554
Hide whitespace changes
Inline Side-by-side
Showing with 1204 additions and 964 deletions
order/mixins/common.js
View file @ 314e0846
......@@ -179,7 +179,7 @@ export default {
if (fail) {
fail(res.data.message);
}
message.notify(res.data.message);
// message.notify(res.data.message);
break;
}
},
......
order/pages/refund/refund.vue
View file @ 314e0846
......@@ -4,8 +4,8 @@
<view class="label-wrap">
<view class="str">{{strInfo}}</view>
<view class="str2 mt-30" @click="open1">{{strLabel1}}</view>
<view class="str2 mt-10" @click="open2">{{strLabel2}}</view>
<view class="str2 mt-30" @click="openGuide">{{strLabel1}}</view>
<view class="str2 mt-10" @click="openRefund">{{strLabel2}}</view>
<view class="str2 mt-10" @click="callPhone">{{strLabel3}}</view>
</view>
......@@ -14,7 +14,7 @@
<swiper class="swiper-wrap" :duration="1000" @change="changeGuide" :current="curGuideIndex">
<swiper-item v-for="(item,index) in guideImgs" :key="index">
<view class="swiper-item">
<image :src="item" mode="aspectFill" class=""></image>
<image :src="item" mode="scaleToFill" class="image"></image>
</view>
</swiper-item>
</swiper>
......@@ -25,7 +25,7 @@
<uni-popup class="popup" ref="popup2" type="center">
<view class="pop-wrap" style="justify-content:flex-start">
<view style="margin-left: auto;" @click="closeDialog2">
<view style="margin-left: auto;" @click="closeRefund">
<icon size="30" type="clear"></icon>
</view>
<view class="refund-wrap flex1 mt-30">
......@@ -34,14 +34,14 @@
</view>
<input v-model="alipayOrder" class="input mt-30" type="number" placeholder="请输入支付宝订单号" />
<text class="guide-text" style="margin-top: 30rpx;" @click="open3">立即退款</text>
<text class="guide-text" style="margin-top: 30rpx;" @click="openTip">立即退款</text>
</view>
</view>
</uni-popup>
<uni-popup class="popup2" ref="popup3" type="center">
<uni-popup-dialog title="\n是否确定要退款?" :duration="2000" :before-close="true" @close="closeDialog3"
@confirm="confirm"></uni-popup-dialog>
<uni-popup-dialog :style="{color:refundColor}" :title="refundResult" :duration="2000"
:showClose="showTipColse" @close="closeTip" @confirm="confirm"></uni-popup-dialog>
</uni-popup>
</view>
</template>
......@@ -66,11 +66,16 @@
strLabel2: "2.一键退款",
strLabel3: "3.客服电话",
guideImgs: [
"",
"",
""
"https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_guide_alipay1.png",
"https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_guide_alipay2.png",
"https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_guide_alipay3.png",
"https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_guide_alipay4.png",
"https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_guide_alipay5.png"
],
refundImg: '',
refundResult: '\n是否确定要退款?',
refundColor: "#909399",
showTipColse: true,
guideText: "下一步",
curGuideIndex: 0
};
......@@ -78,10 +83,15 @@
methods: {
handleRefund() {
if (!this.alipayOrder) {
message.notify('请输入支付宝订单号');
setTimeout(() => {
this.refundResult = '\n请输入支付宝订单号'
this.showTipColse = false
this.refundColor = '#f56c6c'
this.openTip()
}, 500)
return;
}
let that = this
this.post({
url: '/payH5/refundForAliAto',
......@@ -90,13 +100,20 @@
},
success: ({
data
}) => {
that.closeDialog2()
// message.notify(data.msg)
}) => {
that.closeRefund()
that.refundResult = data.message
that.showTipColse = false
that.refundColor = '#09bb07'
that.openTip()
},
fail: () => {
that.closeDialog2()
message.notify("网络出小差了~")
fail: (e) => {
that.closeRefund()
that.refundResult = '\n' + e
that.showTipColse = false
that.refundColor = '#f56c6c'
that.openTip()
// message.notify("网络出小差了~")
}
});
},
......@@ -113,8 +130,6 @@
},
changeGuide(e) {
this.curGuideIndex = e.detail.current
console.log("sssssss", this.curGuideIndex)
console.log("sssssss-", this.guideImgs.length)
if (this.curGuideIndex >= this.guideImgs.length - 1) {
this.guideText = "我知道了"
} else {
......@@ -123,7 +138,7 @@
},
clickGuide() {
if (this.curGuideIndex >= this.guideImgs.length - 1) {
this.closeDialog1()
this.closeGuide()
} else {
if (++this.curGuideIndex >= this.guideImgs.length - 1) {
this.guideText = "我知道了"
......@@ -132,16 +147,18 @@
}
}
},
open1() {
openGuide() {
// APP退款引导
this.$refs.popup1.open()
},
open2() {
openRefund() {
// 退款
this.$refs.popup2.open()
},
open3() {
openTip() {
this.$refs.popup3.open()
},
closeDialog1() {
closeGuide() {
setTimeout(() => {
this.curGuideIndex = 0
this.guideText = "下一步"
......@@ -149,14 +166,23 @@
this.$refs.popup1.close()
},
closeDialog2() {
closeRefund() {
this.$refs.popup2.close()
},
closeDialog3() {
closeTip() {
this.$refs.popup3.close()
},
confirm() {
this.closeDialog3()
confirm() {
this.closeTip()
if (!this.showTipColse) {
setTimeout(() => {
this.refundResult = '\n是否确定要退款?'
this.showTipColse = true
}, 500)
return
}
this.handleRefund()
}
}
......@@ -258,11 +284,14 @@
height: 800rpx;
width: 80%;
text-align: center;
.image {
width: 100%;
height: 100%;
}
}
}
}
.guide-text {
......@@ -277,6 +306,16 @@
border-radius: 8rpx;
}
.success-text {
color: #09bb07;
}
.warn-text {
color: #e6a23c;
}
.error-text {
color: #f56c6c;
}
}
</style>
\ No newline at end of file
order/uni_modules/uni-popup/changelog.md
View file @ 314e0846
## 1.9.5（2024-10-15）
- 修复 微信小程序中的getSystemInfo警告
## 1.9.4（2024-10-12）
- 修复 微信小程序中的getSystemInfo警告
## 1.9.3（2024-10-12）
- 修复 微信小程序中的getSystemInfo警告
## 1.9.2（2024-09-21）
- 修复 uni-popup在android上的重复点击弹出位置不正确的bug
## 1.9.1（2024-04-02）
- 修复 uni-popup-dialog vue3下使用value无法进行绑定的bug(双向绑定兼容旧写法)
## 1.9.0（2024-03-28）
- 修复 uni-popup-dialog 双向绑定时初始化逻辑修正
## 1.8.9（2024-03-20）
- 修复 uni-popup-dialog 数据输入时修正为双向绑定
## 1.8.8（2024-02-20）
- 修复 uni-popup 在微信小程序下出现文字向上闪动的bug
## 1.8.7（2024-02-02）
- 新增 uni-popup-dialog 新增属性focus：input模式下，是否自动自动聚焦
## 1.8.6（2024-01-30）
- 新增 uni-popup-dialog 新增属性maxLength:限制输入框字数
## 1.8.5（2024-01-26）
- 新增 uni-popup-dialog 新增属性showClose:控制关闭按钮的显示
## 1.8.4（2023-11-15）
- 新增 uni-popup 支持uni-app-x 注意暂时仅支持 `maskClick` `@open` `@close`
## 1.8.3（2023-04-17）
- 修复 uni-popup 重复打开时的 bug
## 1.8.2（2023-02-02）
- uni-popup-dialog 组件新增 inputType 属性
## 1.8.1（2022-12-01）
- 修复 nvue 下 v-show 报错
## 1.8.0（2022-11-29）
- 优化 主题样式
## 1.7.9（2022-04-02）
- 修复 弹出层内部无法滚动的bug
## 1.7.8（2022-03-28）
......
order/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue
View file @ 314e0846
......@@ -10,14 +10,15 @@
</view>
<view v-else class="uni-dialog-content">
<slot>
<input class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholderText" :focus="focus" >
<input class="uni-dialog-input" :maxlength="maxlength" v-model="val" :type="inputType"
:placeholder="placeholderText" :focus="focus">
</slot>
</view>
<view class="uni-dialog-button-group">
<view class="uni-dialog-button" @click="closeDialog">
<view class="uni-dialog-button" v-if="showClose" @click="closeDialog">
<text class="uni-dialog-button-text">{{closeText}}</text>
</view>
<view class="uni-dialog-button uni-border-left" @click="onOk">
<view class="uni-dialog-button" :class="showClose?'uni-border-left':''" @click="onOk">
<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
</view>
</view>
......@@ -28,16 +29,19 @@
<script>
import popup from '../uni-popup/popup.js'
import {
initVueI18n
initVueI18n
} from '@dcloudio/uni-i18n'
import messages from '../uni-popup/i18n/index.js'
const { t } = initVueI18n(messages)
const {
t
} = initVueI18n(messages)
/**
* PopUp 弹出层-对话框样式
* @description 弹出层-对话框样式
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} value input 模式下的默认值
* @property {String} placeholder input 模式下输入提示
* @property {Boolean} focus input模式下是否自动聚焦，默认为true
* @property {String} type = [success|warning|info|error] 主题样式
* @value success 成功
* @value warning 提示
......@@ -46,8 +50,10 @@
* @property {String} mode = [base|input] 模式、
* @value base 基础对话框
* @value input 可输入对话框
* @showClose {Boolean} 是否显示关闭按钮
* @property {String} content 对话框内容
* @property {Boolean} beforeClose 是否拦截取消事件
* @property {Number} maxlength 输入
* @event {Function} confirm 点击确认按钮触发
* @event {Function} close 点击取消按钮触发
*/
......@@ -55,12 +61,30 @@
export default {
name: "uniPopupDialog",
mixins: [popup],
emits:['confirm','close'],
emits: ['confirm', 'close', 'update:modelValue', 'input'],
props: {
inputType: {
type: String,
default: 'text'
},
showClose: {
type: Boolean,
default: true
},
// #ifdef VUE2
value: {
type: [String, Number],
default: ''
},
// #endif
// #ifdef VUE3
modelValue: {
type: [Number, String],
default: ''
},
// #endif
placeholder: {
type: [String, Number],
default: ''
......@@ -84,20 +108,27 @@
beforeClose: {
type: Boolean,
default: false
},
cancelText:{
type: String,
default: ''
},
confirmText:{
type: String,
default: ''
},
cancelText: {
type: String,
default: ''
},
confirmText: {
type: String,
default: ''
},
maxlength: {
type: Number,
default: -1,
},
focus: {
type: Boolean,
default: true,
}
},
data() {
return {
dialogType: 'error',
focus: false,
val: ""
}
},
......@@ -125,7 +156,21 @@
}
},
value(val) {
this.val = val
if (this.maxlength != -1 && this.mode === 'input') {
this.val = val.slice(0, this.maxlength);
} else {
this.val = val
}
},
val(val) {
// #ifdef VUE2
// TODO 兼容 vue2
this.$emit('input', val);
// #endif
// #ifdef VUE3
// TODO　兼容　vue3
this.$emit('update:modelValue', val);
// #endif
}
},
created() {
......@@ -134,25 +179,25 @@
// this.popup.closeMask()
if (this.mode === 'input') {
this.dialogType = 'info'
this.val = this.value
this.val = this.value;
// #ifdef VUE3
this.val = this.modelValue;
// #endif
} else {
this.dialogType = this.type
}
},
mounted() {
this.focus = true
},
methods: {
/**
* 点击确认按钮
*/
onOk() {
if (this.mode === 'input'){
if (this.mode === 'input') {
this.$emit('confirm', this.val)
}else{
} else {
this.$emit('confirm')
}
if(this.beforeClose) return
if (this.beforeClose) return
this.popup.close()
},
/**
......@@ -160,17 +205,17 @@
*/
closeDialog() {
this.$emit('close')
if(this.beforeClose) return
if (this.beforeClose) return
this.popup.close()
},
close(){
close() {
this.popup.close()
}
}
}
</script>
<style lang="scss" >
<style lang="scss">
.uni-popup-dialog {
width: 300px;
border-radius: 11px;
......@@ -186,7 +231,10 @@
padding-top: 25px;
}
.uni-dialog-title-text {
.uni-dialog-title-text {
padding: 0 10px;
line-height: 26px;
text-align: center;
font-size: 16px;
font-weight: 500;
}
......@@ -268,4 +316,4 @@
.uni-popup__info {
color: #909399;
}
</style>
</style>
order/uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue
View file @ 314e0846
......@@ -47,7 +47,7 @@
{
text: '支付宝',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
name: 'wx'
name: 'ali'
},
{
text: 'QQ',
......
order/uni_modules/uni-popup/components/uni-popup/uni-popup.vue
View file @ 314e0846
<template>
<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']">
<view @touchstart="touchstart">
<uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass"
:duration="duration" :show="showTrans" @click="onTap" />
<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration"
:show="showTrans" @click="onTap">
<view class="uni-popup__wrapper" :style="{ backgroundColor: bg }" :class="[popupstyle]" @click="clear">
<slot />
</view>
</uni-transition>
</view>
<!-- #ifdef H5 -->
<keypress v-if="maskShow" @esc="onTap" />
<!-- #endif -->
</view>
</template>
<script>
// #ifdef H5
import keypress from './keypress.js'
// #endif
/**
* PopUp 弹出层
* @description 弹出层组件，为了解决遮罩弹层的问题
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
* @value top 顶部弹出
* @value center 中间弹出
* @value bottom 底部弹出
* @value left 左侧弹出
* @value right 右侧弹出
* @value message 消息提示
* @value dialog 对话框
* @value share 底部分享示例
* @property {Boolean} animation = [true|false] 是否开启动画
* @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
* @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
* @property {String} backgroundColor 主窗口背景色
* @property {String} maskBackgroundColor 蒙版颜色
* @property {Boolean} safeArea 是否适配底部安全区
* @event {Function} change 打开关闭弹窗触发，e={show: false}
* @event {Function} maskClick 点击遮罩触发
*/
export default {
name: 'uniPopup',
components: {
// #ifdef H5
keypress
// #endif
},
emits: ['change', 'maskClick'],
props: {
// 开启动画
animation: {
type: Boolean,
default: true
},
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
// message: 消息提示 ; dialog : 对话框
type: {
type: String,
default: 'center'
},
// maskClick
isMaskClick: {
type: Boolean,
default: null
},
// TODO 2 个版本后废弃属性 ，使用 isMaskClick
maskClick: {
type: Boolean,
default: null
},
backgroundColor: {
type: String,
default: 'none'
},
safeArea: {
type: Boolean,
default: true
},
maskBackgroundColor: {
type: String,
default: 'rgba(0, 0, 0, 0.4)'
},
},
watch: {
/**
* 监听type类型
*/
type: {
handler: function(type) {
if (!this.config[type]) return
this[this.config[type]](true)
},
immediate: true
},
isDesktop: {
handler: function(newVal) {
if (!this.config[newVal]) return
this[this.config[this.type]](true)
},
immediate: true
},
/**
* 监听遮罩是否可点击
* @param {Object} val
*/
maskClick: {
handler: function(val) {
this.mkclick = val
},
immediate: true
},
isMaskClick: {
handler: function(val) {
this.mkclick = val
},
immediate: true
},
// H5 下禁止底部滚动
showPopup(show) {
// #ifdef H5
// fix by mehaotian 处理 h5 滚动穿透的问题
document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible'
// #endif
}
},
data() {
return {
duration: 300,
ani: [],
showPopup: false,
showTrans: false,
popupWidth: 0,
popupHeight: 0,
config: {
top: 'top',
bottom: 'bottom',
center: 'center',
left: 'left',
right: 'right',
message: 'top',
dialog: 'center',
share: 'bottom'
},
maskClass: {
position: 'fixed',
bottom: 0,
top: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(0, 0, 0, 0.4)'
},
transClass: {
position: 'fixed',
left: 0,
right: 0
},
maskShow: true,
mkclick: true,
popupstyle: this.isDesktop ? 'fixforpc-top' : 'top'
}
},
computed: {
isDesktop() {
return this.popupWidth >= 500 && this.popupHeight >= 500
},
bg() {
if (this.backgroundColor === '' || this.backgroundColor === 'none') {
return 'transparent'
}
return this.backgroundColor
}
},
mounted() {
const fixSize = () => {
const {
windowWidth,
windowHeight,
windowTop,
safeArea,
screenHeight,
safeAreaInsets
} = uni.getSystemInfoSync()
this.popupWidth = windowWidth
this.popupHeight = windowHeight + (windowTop || 0)
// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
if (safeArea && this.safeArea) {
// #ifdef MP-WEIXIN
this.safeAreaInsets = screenHeight - safeArea.bottom
// #endif
// #ifndef MP-WEIXIN
this.safeAreaInsets = safeAreaInsets.bottom
// #endif
} else {
this.safeAreaInsets = 0
}
}
fixSize()
// #ifdef H5
// window.addEventListener('resize', fixSize)
// this.$once('hook:beforeDestroy', () => {
// window.removeEventListener('resize', fixSize)
// })
// #endif
},
// #ifndef VUE3
// TODO vue2
destroyed() {
this.setH5Visible()
},
// #endif
// #ifdef VUE3
// TODO vue3
unmounted() {
this.setH5Visible()
},
// #endif
created() {
// this.mkclick = this.isMaskClick || this.maskClick
if (this.isMaskClick === null && this.maskClick === null) {
this.mkclick = true
} else {
this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick
}
if (this.animation) {
this.duration = 300
} else {
this.duration = 0
}
// TODO 处理 message 组件生命周期异常的问题
this.messageChild = null
// TODO 解决头条冒泡的问题
this.clearPropagation = false
this.maskClass.backgroundColor = this.maskBackgroundColor
},
methods: {
setH5Visible() {
// #ifdef H5
// fix by mehaotian 处理 h5 滚动穿透的问题
document.getElementsByTagName('body')[0].style.overflow = 'visible'
// #endif
},
/**
* 公用方法，不显示遮罩层
*/
closeMask() {
this.maskShow = false
},
/**
* 公用方法，遮罩层禁止点击
*/
disableMask() {
this.mkclick = false
},
// TODO nvue 取消冒泡
clear(e) {
// #ifndef APP-NVUE
e.stopPropagation()
// #endif
this.clearPropagation = true
},
open(direction) {
// fix by mehaotian 处理快速打开关闭的情况
if (this.showPopup) {
clearTimeout(this.timer)
this.showPopup = false
}
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
if (!(direction && innerType.indexOf(direction) !== -1)) {
direction = this.type
}
if (!this.config[direction]) {
console.error('缺少类型：', direction)
return
}
this[this.config[direction]]()
this.$emit('change', {
show: true,
type: direction
})
},
close(type) {
this.showTrans = false
this.$emit('change', {
show: false,
type: this.type
})
clearTimeout(this.timer)
// // 自定义关闭事件
// this.customOpen && this.customClose()
this.timer = setTimeout(() => {
this.showPopup = false
}, 300)
},
// TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
touchstart() {
this.clearPropagation = false
},
onTap() {
if (this.clearPropagation) {
// fix by mehaotian 兼容 nvue
this.clearPropagation = false
return
}
this.$emit('maskClick')
if (!this.mkclick) return
this.close()
},
/**
* 顶部弹出样式处理
*/
top(type) {
this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
this.ani = ['slide-top']
this.transClass = {
position: 'fixed',
left: 0,
right: 0,
backgroundColor: this.bg
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
this.$nextTick(() => {
if (this.messageChild && this.type === 'message') {
this.messageChild.timerClose()
}
})
},
/**
* 底部弹出样式处理
*/
bottom(type) {
this.popupstyle = 'bottom'
this.ani = ['slide-bottom']
this.transClass = {
position: 'fixed',
left: 0,
right: 0,
bottom: 0,
paddingBottom: this.safeAreaInsets + 'px',
backgroundColor: this.bg
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
},
/**
* 中间弹出样式处理
*/
center(type) {
this.popupstyle = 'center'
this.ani = ['zoom-out', 'fade']
this.transClass = {
position: 'fixed',
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column',
/* #endif */
bottom: 0,
left: 0,
right: 0,
top: 0,
justifyContent: 'center',
alignItems: 'center'
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
},
left(type) {
this.popupstyle = 'left'
this.ani = ['slide-left']
this.transClass = {
position: 'fixed',
left: 0,
bottom: 0,
top: 0,
backgroundColor: this.bg,
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column'
/* #endif */
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
},
right(type) {
this.popupstyle = 'right'
this.ani = ['slide-right']
this.transClass = {
position: 'fixed',
bottom: 0,
right: 0,
top: 0,
backgroundColor: this.bg,
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column'
/* #endif */
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
}
}
}
</script>
<style lang="scss">
.uni-popup {
position: fixed;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
&.top,
&.left,
&.right {
/* #ifdef H5 */
top: var(--window-top);
/* #endif */
/* #ifndef H5 */
top: 0;
/* #endif */
}
.uni-popup__wrapper {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: relative;
/* iphonex 等安全区设置，底部安全区适配 */
/* #ifndef APP-NVUE */
// padding-bottom: constant(safe-area-inset-bottom);
// padding-bottom: env(safe-area-inset-bottom);
/* #endif */
&.left,
&.right {
/* #ifdef H5 */
padding-top: var(--window-top);
/* #endif */
/* #ifndef H5 */
padding-top: 0;
/* #endif */
flex: 1;
}
}
}
.fixforpc-z-index {
/* #ifndef APP-NVUE */
z-index: 999;
/* #endif */
}
.fixforpc-top {
top: 0;
}
<template>
<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']">
<view @touchstart="touchstart">
<uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass"
:duration="duration" :show="showTrans" @click="onTap" />
<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration"
:show="showTrans" @click="onTap">
<view class="uni-popup__wrapper" :style="getStyles" :class="[popupstyle]" @click="clear">
<slot />
</view>
</uni-transition>
</view>
<!-- #ifdef H5 -->
<keypress v-if="maskShow" @esc="onTap" />
<!-- #endif -->
</view>
</template>
<script>
// #ifdef H5
import keypress from './keypress.js'
// #endif
/**
* PopUp 弹出层
* @description 弹出层组件，为了解决遮罩弹层的问题
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
* @value top 顶部弹出
* @value center 中间弹出
* @value bottom 底部弹出
* @value left 左侧弹出
* @value right 右侧弹出
* @value message 消息提示
* @value dialog 对话框
* @value share 底部分享示例
* @property {Boolean} animation = [true|false] 是否开启动画
* @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
* @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
* @property {String} backgroundColor 主窗口背景色
* @property {String} maskBackgroundColor 蒙版颜色
* @property {String} borderRadius 设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px"
* @property {Boolean} safeArea 是否适配底部安全区
* @event {Function} change 打开关闭弹窗触发，e={show: false}
* @event {Function} maskClick 点击遮罩触发
*/
export default {
name: 'uniPopup',
components: {
// #ifdef H5
keypress
// #endif
},
emits: ['change', 'maskClick'],
props: {
// 开启动画
animation: {
type: Boolean,
default: true
},
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
// message: 消息提示 ; dialog : 对话框
type: {
type: String,
default: 'center'
},
// maskClick
isMaskClick: {
type: Boolean,
default: null
},
// TODO 2 个版本后废弃属性 ，使用 isMaskClick
maskClick: {
type: Boolean,
default: null
},
backgroundColor: {
type: String,
default: 'none'
},
safeArea: {
type: Boolean,
default: true
},
maskBackgroundColor: {
type: String,
default: 'rgba(0, 0, 0, 0.4)'
},
borderRadius:{
type: String,
}
},
watch: {
/**
* 监听type类型
*/
type: {
handler: function(type) {
if (!this.config[type]) return
this[this.config[type]](true)
},
immediate: true
},
isDesktop: {
handler: function(newVal) {
if (!this.config[newVal]) return
this[this.config[this.type]](true)
},
immediate: true
},
/**
* 监听遮罩是否可点击
* @param {Object} val
*/
maskClick: {
handler: function(val) {
this.mkclick = val
},
immediate: true
},
isMaskClick: {
handler: function(val) {
this.mkclick = val
},
immediate: true
},
// H5 下禁止底部滚动
showPopup(show) {
// #ifdef H5
// fix by mehaotian 处理 h5 滚动穿透的问题
document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible'
// #endif
}
},
data() {
return {
duration: 300,
ani: [],
showPopup: false,
showTrans: false,
popupWidth: 0,
popupHeight: 0,
config: {
top: 'top',
bottom: 'bottom',
center: 'center',
left: 'left',
right: 'right',
message: 'top',
dialog: 'center',
share: 'bottom'
},
maskClass: {
position: 'fixed',
bottom: 0,
top: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(0, 0, 0, 0.4)'
},
transClass: {
backgroundColor: 'transparent',
borderRadius: this.borderRadius || "0",
position: 'fixed',
left: 0,
right: 0
},
maskShow: true,
mkclick: true,
popupstyle: 'top'
}
},
computed: {
getStyles() {
let res = { backgroundColor: this.bg };
if (this.borderRadius || "0") {
res = Object.assign(res, { borderRadius: this.borderRadius })
}
return res;
},
isDesktop() {
return this.popupWidth >= 500 && this.popupHeight >= 500
},
bg() {
if (this.backgroundColor === '' || this.backgroundColor === 'none') {
return 'transparent'
}
return this.backgroundColor
}
},
mounted() {
const fixSize = () => {
// #ifdef MP-WEIXIN
const {
windowWidth,
windowHeight,
windowTop,
safeArea,
screenHeight,
safeAreaInsets
} = uni.getWindowInfo()
// #endif
// #ifndef MP-WEIXIN
const {
windowWidth,
windowHeight,
windowTop,
safeArea,
screenHeight,
safeAreaInsets
} = uni.getSystemInfoSync()
// #endif
this.popupWidth = windowWidth
this.popupHeight = windowHeight + (windowTop || 0)
// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
if (safeArea && this.safeArea) {
// #ifdef MP-WEIXIN
this.safeAreaInsets = screenHeight - safeArea.bottom
// #endif
// #ifndef MP-WEIXIN
this.safeAreaInsets = safeAreaInsets.bottom
// #endif
} else {
this.safeAreaInsets = 0
}
}
fixSize()
// #ifdef H5
// window.addEventListener('resize', fixSize)
// this.$once('hook:beforeDestroy', () => {
// window.removeEventListener('resize', fixSize)
// })
// #endif
},
// #ifndef VUE3
// TODO vue2
destroyed() {
this.setH5Visible()
},
// #endif
// #ifdef VUE3
// TODO vue3
unmounted() {
this.setH5Visible()
},
// #endif
activated() {
this.setH5Visible(!this.showPopup);
},
deactivated() {
this.setH5Visible(true);
},
created() {
// this.mkclick = this.isMaskClick || this.maskClick
if (this.isMaskClick === null && this.maskClick === null) {
this.mkclick = true
} else {
this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick
}
if (this.animation) {
this.duration = 300
} else {
this.duration = 0
}
// TODO 处理 message 组件生命周期异常的问题
this.messageChild = null
// TODO 解决头条冒泡的问题
this.clearPropagation = false
this.maskClass.backgroundColor = this.maskBackgroundColor
},
methods: {
setH5Visible(visible = true) {
// #ifdef H5
// fix by mehaotian 处理 h5 滚动穿透的问题
document.getElementsByTagName('body')[0].style.overflow = visible ? "visible" : "hidden";
// #endif
},
/**
* 公用方法，不显示遮罩层
*/
closeMask() {
this.maskShow = false
},
/**
* 公用方法，遮罩层禁止点击
*/
disableMask() {
this.mkclick = false
},
// TODO nvue 取消冒泡
clear(e) {
// #ifndef APP-NVUE
e.stopPropagation()
// #endif
this.clearPropagation = true
},
open(direction) {
// fix by mehaotian 处理快速打开关闭的情况
if (this.showPopup) {
return
}
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
if (!(direction && innerType.indexOf(direction) !== -1)) {
direction = this.type
}
if (!this.config[direction]) {
console.error('缺少类型：', direction)
return
}
this[this.config[direction]]()
this.$emit('change', {
show: true,
type: direction
})
},
close(type) {
this.showTrans = false
this.$emit('change', {
show: false,
type: this.type
})
clearTimeout(this.timer)
// // 自定义关闭事件
// this.customOpen && this.customClose()
this.timer = setTimeout(() => {
this.showPopup = false
}, 300)
},
// TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
touchstart() {
this.clearPropagation = false
},
onTap() {
if (this.clearPropagation) {
// fix by mehaotian 兼容 nvue
this.clearPropagation = false
return
}
this.$emit('maskClick')
if (!this.mkclick) return
this.close()
},
/**
* 顶部弹出样式处理
*/
top(type) {
this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
this.ani = ['slide-top']
this.transClass = {
position: 'fixed',
left: 0,
right: 0,
backgroundColor: this.bg,
borderRadius:this.borderRadius || "0"
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
this.$nextTick(() => {
this.showPoptrans()
if (this.messageChild && this.type === 'message') {
this.messageChild.timerClose()
}
})
},
/**
* 底部弹出样式处理
*/
bottom(type) {
this.popupstyle = 'bottom'
this.ani = ['slide-bottom']
this.transClass = {
position: 'fixed',
left: 0,
right: 0,
bottom: 0,
paddingBottom: this.safeAreaInsets + 'px',
backgroundColor: this.bg,
borderRadius:this.borderRadius || "0",
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPoptrans()
},
/**
* 中间弹出样式处理
*/
center(type) {
this.popupstyle = 'center'
//微信小程序下，组合动画会出现文字向上闪动问题，再此做特殊处理
// #ifdef MP-WEIXIN
this.ani = ['fade']
// #endif
// #ifndef MP-WEIXIN
this.ani = ['zoom-out', 'fade']
// #endif
this.transClass = {
position: 'fixed',
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column',
/* #endif */
bottom: 0,
left: 0,
right: 0,
top: 0,
justifyContent: 'center',
alignItems: 'center',
borderRadius:this.borderRadius || "0"
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPoptrans()
},
left(type) {
this.popupstyle = 'left'
this.ani = ['slide-left']
this.transClass = {
position: 'fixed',
left: 0,
bottom: 0,
top: 0,
backgroundColor: this.bg,
borderRadius:this.borderRadius || "0",
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column'
/* #endif */
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPoptrans()
},
right(type) {
this.popupstyle = 'right'
this.ani = ['slide-right']
this.transClass = {
position: 'fixed',
bottom: 0,
right: 0,
top: 0,
backgroundColor: this.bg,
borderRadius:this.borderRadius || "0",
/* #ifndef APP-NVUE */
display: 'flex',
flexDirection: 'column'
/* #endif */
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPoptrans()
},
showPoptrans(){
this.$nextTick(()=>{
this.showPopup = true
this.showTrans = true
})
}
}
}
</script>
<style lang="scss">
.uni-popup {
position: fixed;
/* #ifndef APP-NVUE */
z-index: 99;
/* #endif */
&.top,
&.left,
&.right {
/* #ifdef H5 */
top: var(--window-top);
/* #endif */
/* #ifndef H5 */
top: 0;
/* #endif */
}
.uni-popup__wrapper {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
position: relative;
/* iphonex 等安全区设置，底部安全区适配 */
/* #ifndef APP-NVUE */
// padding-bottom: constant(safe-area-inset-bottom);
// padding-bottom: env(safe-area-inset-bottom);
/* #endif */
&.left,
&.right {
/* #ifdef H5 */
padding-top: var(--window-top);
/* #endif */
/* #ifndef H5 */
padding-top: 0;
/* #endif */
flex: 1;
}
}
}
.fixforpc-z-index {
/* #ifndef APP-NVUE */
z-index: 999;
/* #endif */
}
.fixforpc-top {
top: 0;
}
</style>
order/uni_modules/uni-popup/package.json
View file @ 314e0846
{
"id": "uni-popup",
"displayName": "uni-popup 弹出层",
"version": "1.7.9",
"version": "1.9.5",
"description": " Popup 组件，提供常用的弹层",
"keywords": [
"uni-ui",
......@@ -17,12 +17,8 @@
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
......@@ -38,7 +34,8 @@
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
},
"uni_modules": {
"dependencies": [
......@@ -49,7 +46,8 @@
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
"aliyun": "y",
"alipay": "n"
},
"client": {
"App": {
......
order/uni_modules/uni-transition/changelog.md
View file @ 314e0846
## 1.3.3（2024-04-23）
- 修复 当元素会受变量影响自动隐藏的bug
## 1.3.2（2023-05-04）
- 修复 NVUE 平台报错的问题
## 1.3.1（2021-11-23）
- 修复 init 方法初始化问题
## 1.3.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-transition](https://uniapp.dcloud.io/component/uniui/uni-transition)
## 1.2.1（2021-09-27）
- 修复 init 方法不生效的 Bug
## 1.2.0（2021-07-30）
- 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.1（2021-05-12）
- 新增 示例地址
- 修复 示例项目缺少组件的 Bug
## 1.1.0（2021-04-22）
- 新增 通过方法自定义动画
- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式
- 优化 动画触发逻辑，使动画更流畅
- 优化 支持单独的动画类型
- 优化 文档示例
## 1.0.2（2021-02-05）
- 调整为 uni_modules 目录规范
## 1.2.1（2021-09-27）
- 修复 init 方法不生效的 Bug
## 1.2.0（2021-07-30）
- 组件兼容 vue3，如何创建 vue3 项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.1（2021-05-12）
- 新增 示例地址
- 修复 示例项目缺少组件的 Bug
## 1.1.0（2021-04-22）
- 新增 通过方法自定义动画
- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式
- 优化 动画触发逻辑，使动画更流畅
- 优化 支持单独的动画类型
- 优化 文档示例
## 1.0.2（2021-02-05）
- 调整为 uni_modules 目录规范
order/uni_modules/uni-transition/components/uni-transition/createAnimation.js
View file @ 314e0846
// const defaultOption = {
// duration: 300,
// timingFunction: 'linear',
// delay: 0,
// transformOrigin: '50% 50% 0'
// }
// #ifdef APP-NVUE
const nvueAnimation = uni.requireNativePlugin('animation')
// #endif
class MPAnimation {
constructor(options, _this) {
this.options = options
this.animation = uni.createAnimation(options)
this.currentStepAnimates = {}
this.next = 0
this.$ = _this
}
_nvuePushAnimates(type, args) {
let aniObj = this.currentStepAnimates[this.next]
let styles = {}
if (!aniObj) {
styles = {
styles: {},
config: {}
}
} else {
styles = aniObj
}
if (animateTypes1.includes(type)) {
if (!styles.styles.transform) {
styles.styles.transform = ''
// const defaultOption = {
// duration: 300,
// timingFunction: 'linear',
// delay: 0,
// transformOrigin: '50% 50% 0'
// }
// #ifdef APP-NVUE
const nvueAnimation = uni.requireNativePlugin('animation')
// #endif
class MPAnimation {
constructor(options, _this) {
this.options = options
// 在iOS10+QQ小程序平台下，传给原生的对象一定是个普通对象而不是Proxy对象，否则会报parameter should be Object instead of ProxyObject的错误
this.animation = uni.createAnimation({
...options
})
this.currentStepAnimates = {}
this.next = 0
this.$ = _this
}
_nvuePushAnimates(type, args) {
let aniObj = this.currentStepAnimates[this.next]
let styles = {}
if (!aniObj) {
styles = {
styles: {},
config: {}
}
} else {
styles = aniObj
}
if (animateTypes1.includes(type)) {
if (!styles.styles.transform) {
styles.styles.transform = ''
}
let unit = ''
if(type === 'rotate'){
unit = 'deg'
}
styles.styles.transform += `${type}(${args+unit}) `
} else {
styles.styles[type] = `${args}`
}
this.currentStepAnimates[this.next] = styles
}
_animateRun(styles = {}, config = {}) {
let ref = this.$.$refs['ani'].ref
if (!ref) return
}
styles.styles.transform += `${type}(${args+unit}) `
} else {
styles.styles[type] = `${args}`
}
this.currentStepAnimates[this.next] = styles
}
_animateRun(styles = {}, config = {}) {
let ref = this.$.$refs['ani'].ref
if (!ref) return
return new Promise((resolve, reject) => {
nvueAnimation.transition(ref, {
styles,
...config
}, res => {
resolve()
})
})
}
_nvueNextAnimate(animates, step = 0, fn) {
let obj = animates[step]
if (obj) {
let {
styles,
config
} = obj
this._animateRun(styles, config).then(() => {
step += 1
this._nvueNextAnimate(animates, step, fn)
})
} else {
this.currentStepAnimates = {}
typeof fn === 'function' && fn()
this.isEnd = true
}
}
nvueAnimation.transition(ref, {
styles,
...config
}, res => {
resolve()
})
})
}
_nvueNextAnimate(animates, step = 0, fn) {
let obj = animates[step]
if (obj) {
let {
styles,
config
} = obj
this._animateRun(styles, config).then(() => {
step += 1
this._nvueNextAnimate(animates, step, fn)
})
} else {
this.currentStepAnimates = {}
typeof fn === 'function' && fn()
this.isEnd = true
}
}
step(config = {}) {
// #ifndef APP-NVUE
this.animation.step(config)
// #endif
// #ifdef APP-NVUE
this.animation.step(config)
// #endif
// #ifdef APP-NVUE
this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
this.next++
// #endif
return this
}
run(fn) {
this.next++
// #endif
return this
}
run(fn) {
// #ifndef APP-NVUE
this.$.animationData = this.animation.export()
this.$.animationData = this.animation.export()
this.$.timer = setTimeout(() => {
typeof fn === 'function' && fn()
}, this.$.durationTime)
// #endif
// #ifdef APP-NVUE
typeof fn === 'function' && fn()
}, this.$.durationTime)
// #endif
// #ifdef APP-NVUE
this.isEnd = false
let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
if(!ref) return
this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
this.next = 0
// #endif
}
}
const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
'translateZ'
]
const animateTypes2 = ['opacity', 'backgroundColor']
const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
MPAnimation.prototype[type] = function(...args) {
if(!ref) return
this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
this.next = 0
// #endif
}
}
const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
'translateZ'
]
const animateTypes2 = ['opacity', 'backgroundColor']
const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
MPAnimation.prototype[type] = function(...args) {
// #ifndef APP-NVUE
this.animation[type](...args)
// #endif
// #ifdef APP-NVUE
this._nvuePushAnimates(type, args)
// #endif
return this
}
})
// #endif
// #ifdef APP-NVUE
this._nvuePushAnimates(type, args)
// #endif
return this
}
})
export function createAnimation(option, _this) {
if(!_this) return
clearTimeout(_this.timer)
return new MPAnimation(option, _this)
if(!_this) return
clearTimeout(_this.timer)
return new MPAnimation(option, _this)
}
order/uni_modules/uni-transition/components/uni-transition/uni-transition.vue
View file @ 314e0846
<template>
<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
</template>
<script>
import { createAnimation } from './createAnimation'
/**
* Transition 过渡动画
* @description 简单过渡动画组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
* @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
* @value fade 渐隐渐出过渡
* @value slide-top 由上至下过渡
* @value slide-right 由右至左过渡
* @value slide-bottom 由下至上过渡
* @value slide-left 由左至右过渡
* @value zoom-in 由小到大过渡
* @value zoom-out 由大到小过渡
* @property {Number} duration 过渡动画持续时间
* @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
*/
export default {
name: 'uniTransition',
emits:['click','change'],
props: {
show: {
type: Boolean,
default: false
},
modeClass: {
type: [Array, String],
default() {
return 'fade'
}
},
duration: {
type: Number,
default: 300
},
styles: {
type: Object,
default() {
return {}
}
<template>
<!-- #ifndef APP-NVUE -->
<view v-show="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
<!-- #endif -->
</template>
<script>
import { createAnimation } from './createAnimation'
/**
* Transition 过渡动画
* @description 简单过渡动画组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
* @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
* @value fade 渐隐渐出过渡
* @value slide-top 由上至下过渡
* @value slide-right 由右至左过渡
* @value slide-bottom 由下至上过渡
* @value slide-left 由左至右过渡
* @value zoom-in 由小到大过渡
* @value zoom-out 由大到小过渡
* @property {Number} duration 过渡动画持续时间
* @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
*/
export default {
name: 'uniTransition',
emits:['click','change'],
props: {
show: {
type: Boolean,
default: false
},
modeClass: {
type: [Array, String],
default() {
return 'fade'
}
},
duration: {
type: Number,
default: 300
},
styles: {
type: Object,
default() {
return {}
}
},
customClass:{
type: String,
default: ''
}
},
data() {
return {
isShow: false,
transform: '',
opacity: 1,
animationData: {},
durationTime: 300,
config: {}
}
},
watch: {
show: {
handler(newVal) {
if (newVal) {
this.open()
} else {
// 避免上来就执行 close,导致动画错乱
if (this.isShow) {
this.close()
}
}
},
immediate: true
}
},
computed: {
// 生成样式数据
stylesObject() {
let styles = {
...this.styles,
'transition-duration': this.duration / 1000 + 's'
}
let transform = ''
for (let i in styles) {
let line = this.toLine(i)
transform += line + ':' + styles[i] + ';'
}
return transform
},
// 初始化动画条件
transformStyles() {
return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
}
},
created() {
// 动画默认配置
this.config = {
duration: this.duration,
timingFunction: 'ease',
transformOrigin: '50% 50%',
delay: 0
}
this.durationTime = this.duration
},
methods: {
/**
* ref 触发 初始化动画
*/
init(obj = {}) {
if (obj.duration) {
this.durationTime = obj.duration
}
this.animation = createAnimation(Object.assign(this.config, obj),this)
},
/**
* 点击组件触发回调
*/
onClick() {
this.$emit('click', {
detail: this.isShow
})
},
/**
* ref 触发 动画分组
* @param {Object} obj
*/
step(obj, config = {}) {
},
onceRender:{
type:Boolean,
default:false
},
},
data() {
return {
isShow: false,
transform: '',
opacity: 1,
animationData: {},
durationTime: 300,
config: {}
}
},
watch: {
show: {
handler(newVal) {
if (newVal) {
this.open()
} else {
// 避免上来就执行 close,导致动画错乱
if (this.isShow) {
this.close()
}
}
},
immediate: true
}
},
computed: {
// 生成样式数据
stylesObject() {
let styles = {
...this.styles,
'transition-duration': this.duration / 1000 + 's'
}
let transform = ''
for (let i in styles) {
let line = this.toLine(i)
transform += line + ':' + styles[i] + ';'
}
return transform
},
// 初始化动画条件
transformStyles() {
return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
}
},
created() {
// 动画默认配置
this.config = {
duration: this.duration,
timingFunction: 'ease',
transformOrigin: '50% 50%',
delay: 0
}
this.durationTime = this.duration
},
methods: {
/**
* ref 触发 初始化动画
*/
init(obj = {}) {
if (obj.duration) {
this.durationTime = obj.duration
}
this.animation = createAnimation(Object.assign(this.config, obj),this)
},
/**
* 点击组件触发回调
*/
onClick() {
this.$emit('click', {
detail: this.isShow
})
},
/**
* ref 触发 动画分组
* @param {Object} obj
*/
step(obj, config = {}) {
if (!this.animation) return
for (let i in obj) {
for (let i in obj) {
try {
if(typeof obj[i] === 'object'){
this.animation[i](...obj[i])
}else{
this.animation[i](obj[i])
}
} catch (e) {
console.error(`方法 ${i} 不存在`)
}
}
}
} catch (e) {
console.error(`方法 ${i} 不存在`)
}
}
this.animation.step(config)
return this
},
/**
* ref 触发 执行动画
*/
run(fn) {
if (!this.animation) return
this.animation.run(fn)
},
// 开始过度动画
open() {
clearTimeout(this.timer)
this.transform = ''
this.isShow = true
let { opacity, transform } = this.styleInit(false)
if (typeof opacity !== 'undefined') {
this.opacity = opacity
}
this.transform = transform
// 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常
this.$nextTick(() => {
// TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器
this.timer = setTimeout(() => {
this.animation = createAnimation(this.config, this)
this.tranfromInit(false).step()
this.animation.run()
this.$emit('change', {
detail: this.isShow
})
}, 20)
})
},
// 关闭过度动画
close(type) {
if (!this.animation) return
this.tranfromInit(true)
.step()
.run(() => {
this.isShow = false
this.animationData = null
this.animation = null
let { opacity, transform } = this.styleInit(false)
this.opacity = opacity || 1
this.transform = transform
this.$emit('change', {
detail: this.isShow
})
})
},
// 处理动画开始前的默认样式
styleInit(type) {
let styles = {
transform: ''
}
let buildStyle = (type, mode) => {
if (mode === 'fade') {
styles.opacity = this.animationType(type)[mode]
} else {
styles.transform += this.animationType(type)[mode] + ' '
}
}
if (typeof this.modeClass === 'string') {
buildStyle(type, this.modeClass)
} else {
this.modeClass.forEach(mode => {
buildStyle(type, mode)
})
}
return styles
},
// 处理内置组合动画
tranfromInit(type) {
let buildTranfrom = (type, mode) => {
let aniNum = null
if (mode === 'fade') {
aniNum = type ? 0 : 1
} else {
aniNum = type ? '-100%' : '0'
if (mode === 'zoom-in') {
aniNum = type ? 0.8 : 1
}
if (mode === 'zoom-out') {
aniNum = type ? 1.2 : 1
}
if (mode === 'slide-right') {
aniNum = type ? '100%' : '0'
}
if (mode === 'slide-bottom') {
aniNum = type ? '100%' : '0'
}
}
this.animation[this.animationMode()[mode]](aniNum)
}
if (typeof this.modeClass === 'string') {
buildTranfrom(type, this.modeClass)
} else {
this.modeClass.forEach(mode => {
buildTranfrom(type, mode)
})
}
return this.animation
},
animationType(type) {
return {
fade: type ? 1 : 0,
'slide-top': `translateY(${type ? '0' : '-100%'})`,
'slide-right': `translateX(${type ? '0' : '100%'})`,
'slide-bottom': `translateY(${type ? '0' : '100%'})`,
'slide-left': `translateX(${type ? '0' : '-100%'})`,
'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
}
},
// 内置动画类型与实际动画对应字典
animationMode() {
return {
fade: 'opacity',
'slide-top': 'translateY',
'slide-right': 'translateX',
'slide-bottom': 'translateY',
'slide-left': 'translateX',
'zoom-in': 'scale',
'zoom-out': 'scale'
}
},
// 驼峰转中横线
toLine(name) {
return name.replace(/([A-Z])/g, '-$1').toLowerCase()
}
}
}
</script>
return this
},
/**
* ref 触发 执行动画
*/
run(fn) {
if (!this.animation) return
this.animation.run(fn)
},
// 开始过度动画
open() {
clearTimeout(this.timer)
this.transform = ''
this.isShow = true
let { opacity, transform } = this.styleInit(false)
if (typeof opacity !== 'undefined') {
this.opacity = opacity
}
this.transform = transform
// 确保动态样式已经生效后，执行动画，如果不加 nextTick ，会导致 wx 动画执行异常
this.$nextTick(() => {
// TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器
this.timer = setTimeout(() => {
this.animation = createAnimation(this.config, this)
this.tranfromInit(false).step()
this.animation.run()
this.$emit('change', {
detail: this.isShow
})
}, 20)
})
},
// 关闭过度动画
close(type) {
if (!this.animation) return
this.tranfromInit(true)
.step()
.run(() => {
this.isShow = false
this.animationData = null
this.animation = null
let { opacity, transform } = this.styleInit(false)
this.opacity = opacity || 1
this.transform = transform
this.$emit('change', {
detail: this.isShow
})
})
},
// 处理动画开始前的默认样式
styleInit(type) {
let styles = {
transform: ''
}
let buildStyle = (type, mode) => {
if (mode === 'fade') {
styles.opacity = this.animationType(type)[mode]
} else {
styles.transform += this.animationType(type)[mode] + ' '
}
}
if (typeof this.modeClass === 'string') {
buildStyle(type, this.modeClass)
} else {
this.modeClass.forEach(mode => {
buildStyle(type, mode)
})
}
return styles
},
// 处理内置组合动画
tranfromInit(type) {
let buildTranfrom = (type, mode) => {
let aniNum = null
if (mode === 'fade') {
aniNum = type ? 0 : 1
} else {
aniNum = type ? '-100%' : '0'
if (mode === 'zoom-in') {
aniNum = type ? 0.8 : 1
}
if (mode === 'zoom-out') {
aniNum = type ? 1.2 : 1
}
if (mode === 'slide-right') {
aniNum = type ? '100%' : '0'
}
if (mode === 'slide-bottom') {
aniNum = type ? '100%' : '0'
}
}
this.animation[this.animationMode()[mode]](aniNum)
}
if (typeof this.modeClass === 'string') {
buildTranfrom(type, this.modeClass)
} else {
this.modeClass.forEach(mode => {
buildTranfrom(type, mode)
})
}
return this.animation
},
animationType(type) {
return {
fade: type ? 0 : 1,
'slide-top': `translateY(${type ? '0' : '-100%'})`,
'slide-right': `translateX(${type ? '0' : '100%'})`,
'slide-bottom': `translateY(${type ? '0' : '100%'})`,
'slide-left': `translateX(${type ? '0' : '-100%'})`,
'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
}
},
// 内置动画类型与实际动画对应字典
animationMode() {
return {
fade: 'opacity',
'slide-top': 'translateY',
'slide-right': 'translateX',
'slide-bottom': 'translateY',
'slide-left': 'translateX',
'zoom-in': 'scale',
'zoom-out': 'scale'
}
},
// 驼峰转中横线
toLine(name) {
return name.replace(/([A-Z])/g, '-$1').toLowerCase()
}
}
}
</script>
<style></style>
order/unpackage/dist/dev/mp-alipay/common/vendor.js
View file @ 314e0846
......@@ -21147,7 +21147,7 @@ var _default = {
if (_fail) {
_fail(res.data.message);
}
_fun.message.notify(res.data.message);
// message.notify(res.data.message);
break;
}
},
......
order/unpackage/dist/dev/mp-alipay/pages/refund/refund.acss
View file @ 314e0846
......@@ -314,6 +314,10 @@
width: 80%;
text-align: center;
}
.body .pop-wrap .swiper-wrap .swiper-item .image {
width: 100%;
height: 100%;
}
.body .guide-text {
text-align: center;
margin-top: 100rpx;
......@@ -325,4 +329,13 @@
background: #3881F3;
border-radius: 8rpx;
}
.body .success-text {
color: #09bb07;
}
.body .warn-text {
color: #e6a23c;
}
.body .error-text {
color: #f56c6c;
}
order/unpackage/dist/dev/mp-alipay/pages/refund/refund.axml
View file @ 314e0846
<view class="body login" style="{{('padding-bottom:'+bottomSafePadding+'px;')}}"><view class="label-wrap"><view class="str">{{strInfo}}</view><view data-event-opts="{{[['tap',[['open1',['$event']]]]]}}" class="str2 mt-30" onTap="__e">{{strLabel1}}</view><view data-event-opts="{{[['tap',[['open2',['$event']]]]]}}" class="str2 mt-10" onTap="__e">{{strLabel2}}</view><view data-event-opts="{{[['tap',[['callPhone',['$event']]]]]}}" class="str2 mt-10" onTap="__e">{{strLabel3}}</view></view><uni-popup class="popup" vue-id="79877a54-1" type="dialog" ref="__r" data-ref="popup1" onVueInit="__l" vue-slots="{{['default']}}"><view class="pop-wrap"><swiper class="swiper-wrap" duration="{{1000}}" current="{{curGuideIndex}}" data-event-opts="{{[['change',[['changeGuide',['$event']]]]]}}" onChange="__e"><swiper-item a:for="{{guideImgs}}" a:for-item="item" a:for-index="index" a:key="index"><view class="swiper-item"><image src="{{item}}" mode="aspectFill"></image></view></swiper-item></swiper><text data-event-opts="{{[['tap',[['clickGuide',['$event']]]]]}}" class="guide-text" onTap="__e">{{guideText}}</text></view></uni-popup><uni-popup class="popup" vue-id="79877a54-2" type="center" ref="__r" data-ref="popup2" onVueInit="__l" vue-slots="{{['default']}}"><view class="pop-wrap" style="justify-content:flex-start;"><view data-event-opts="{{[['tap',[['closeDialog2',['$event']]]]]}}" style="margin-left:auto;" onTap="__e"><icon size="30" type="clear"></icon></view><view class="refund-wrap flex1 mt-30"><view class="image-wrap"><image class="image" src="{{refundImg}}" mode="aspectFill"></image></view><input class="input mt-30" type="number" placeholder="请输入支付宝订单号" data-event-opts="{{[['input',[['__set_model',['','alipayOrder','$event',[]]]]]]}}" value="{{alipayOrder}}" onInput="__e"/><text data-event-opts="{{[['tap',[['open3',['$event']]]]]}}" class="guide-text" style="margin-top:30rpx;" onTap="__e">立即退款</text></view></view></uni-popup><uni-popup class="popup2" vue-id="79877a54-3" type="center" ref="__r" data-ref="popup3" onVueInit="__l" vue-slots="{{['default']}}"><uni-popup-dialog vue-id="{{('79877a54-4')+','+('79877a54-3')}}" title="\n是否确定要退款?" duration="{{2000}}" before-close="{{true}}" data-event-opts="{{[['^close',[['closeDialog3']]],['^confirm',[['confirm']]]]}}" onClose="__e" onConfirm="__e" onVueInit="__l"></uni-popup-dialog></uni-popup></view>
\ No newline at end of file
<view class="body login" style="{{('padding-bottom:'+bottomSafePadding+'px;')}}"><view class="label-wrap"><view class="str">{{strInfo}}</view><view data-event-opts="{{[['tap',[['openGuide',['$event']]]]]}}" class="str2 mt-30" onTap="__e">{{strLabel1}}</view><view data-event-opts="{{[['tap',[['openRefund',['$event']]]]]}}" class="str2 mt-10" onTap="__e">{{strLabel2}}</view><view data-event-opts="{{[['tap',[['callPhone',['$event']]]]]}}" class="str2 mt-10" onTap="__e">{{strLabel3}}</view></view><uni-popup class="popup" vue-id="79877a54-1" type="dialog" ref="__r" data-ref="popup1" onVueInit="__l" vue-slots="{{['default']}}"><view class="pop-wrap"><swiper class="swiper-wrap" duration="{{1000}}" current="{{curGuideIndex}}" data-event-opts="{{[['change',[['changeGuide',['$event']]]]]}}" onChange="__e"><swiper-item a:for="{{guideImgs}}" a:for-item="item" a:for-index="index" a:key="index"><view class="swiper-item"><image class="image" src="{{item}}" mode="scaleToFill"></image></view></swiper-item></swiper><text data-event-opts="{{[['tap',[['clickGuide',['$event']]]]]}}" class="guide-text" onTap="__e">{{guideText}}</text></view></uni-popup><uni-popup class="popup" vue-id="79877a54-2" type="center" ref="__r" data-ref="popup2" onVueInit="__l" vue-slots="{{['default']}}"><view class="pop-wrap" style="justify-content:flex-start;"><view data-event-opts="{{[['tap',[['closeRefund',['$event']]]]]}}" style="margin-left:auto;" onTap="__e"><icon size="30" type="clear"></icon></view><view class="refund-wrap flex1 mt-30"><view class="image-wrap"><image class="image" src="{{refundImg}}" mode="aspectFill"></image></view><input class="input mt-30" type="number" placeholder="请输入支付宝订单号" data-event-opts="{{[['input',[['__set_model',['','alipayOrder','$event',[]]]]]]}}" value="{{alipayOrder}}" onInput="__e"/><text data-event-opts="{{[['tap',[['openTip',['$event']]]]]}}" class="guide-text" style="margin-top:30rpx;" onTap="__e">立即退款</text></view></view></uni-popup><uni-popup class="popup2" vue-id="79877a54-3" type="center" ref="__r" data-ref="popup3" onVueInit="__l" vue-slots="{{['default']}}"><uni-popup-dialog style="{{'color:'+(refundColor)+';'}}" vue-id="{{('79877a54-4')+','+('79877a54-3')}}" title="{{refundResult}}" duration="{{2000}}" showClose="{{showTipColse}}" data-event-opts="{{[['^close',[['closeTip']]],['^confirm',[['confirm']]]]}}" onClose="__e" onConfirm="__e" onVueInit="__l"></uni-popup-dialog></uni-popup></view>
\ No newline at end of file
order/unpackage/dist/dev/mp-alipay/pages/refund/refund.js
View file @ 314e0846
......@@ -232,16 +232,25 @@ var _default = {
strLabel1: "1.自动续费如何关闭",
strLabel2: "2.一键退款",
strLabel3: "3.客服电话",
guideImgs: ["", "", ""],
guideImgs: ["https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_guide_alipay1.png", "https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_guide_alipay2.png", "https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_guide_alipay3.png", "https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_guide_alipay4.png", "https://mints-pkg.oss-cn-beijing.aliyuncs.com/pkg/img/bg_guide_alipay5.png"],
refundImg: '',
refundResult: '\n是否确定要退款?',
refundColor: "#909399",
showTipColse: true,
guideText: "下一步",
curGuideIndex: 0
};
},
methods: {
handleRefund: function handleRefund() {
var _this = this;
if (!this.alipayOrder) {
_fun.message.notify('请输入支付宝订单号');
setTimeout(function () {
_this.refundResult = '\n请输入支付宝订单号';
_this.showTipColse = false;
_this.refundColor = '#f56c6c';
_this.openTip();
}, 500);
return;
}
var that = this;
......@@ -252,13 +261,19 @@ var _default = {
},
success: function success(_ref) {
var data = _ref.data;
that.closeDialog2();
// message.notify(data.msg)
that.closeRefund();
that.refundResult = data.message;
that.showTipColse = false;
that.refundColor = '#09bb07';
that.openTip();
},
fail: function fail() {
that.closeDialog2();
_fun.message.notify("网络出小差了~");
fail: function fail(e) {
that.closeRefund();
that.refundResult = '\n' + e;
that.showTipColse = false;
that.refundColor = '#f56c6c';
that.openTip();
// message.notify("网络出小差了~")
}
});
},
......@@ -275,8 +290,6 @@ var _default = {
},
changeGuide: function changeGuide(e) {
this.curGuideIndex = e.detail.current;
console.log("sssssss", this.curGuideIndex);
console.log("sssssss-", this.guideImgs.length);
if (this.curGuideIndex >= this.guideImgs.length - 1) {
this.guideText = "我知道了";
} else {
......@@ -285,7 +298,7 @@ var _default = {
},
clickGuide: function clickGuide() {
if (this.curGuideIndex >= this.guideImgs.length - 1) {
this.closeDialog1();
this.closeGuide();
} else {
if (++this.curGuideIndex >= this.guideImgs.length - 1) {
this.guideText = "我知道了";
......@@ -294,31 +307,41 @@ var _default = {
}
}
},
open1: function open1() {
openGuide: function openGuide() {
// APP退款引导
this.$refs.popup1.open();
},
open2: function open2() {
openRefund: function openRefund() {
// 退款
this.$refs.popup2.open();
},
open3: function open3() {
openTip: function openTip() {
this.$refs.popup3.open();
},
closeDialog1: function closeDialog1() {
var _this = this;
closeGuide: function closeGuide() {
var _this2 = this;
setTimeout(function () {
_this.curGuideIndex = 0;
_this.guideText = "下一步";
_this2.curGuideIndex = 0;
_this2.guideText = "下一步";
}, 500);
this.$refs.popup1.close();
},
closeDialog2: function closeDialog2() {
closeRefund: function closeRefund() {
this.$refs.popup2.close();
},
closeDialog3: function closeDialog3() {
closeTip: function closeTip() {
this.$refs.popup3.close();
},
confirm: function confirm() {
this.closeDialog3();
var _this3 = this;
this.closeTip();
if (!this.showTipColse) {
setTimeout(function () {
_this3.refundResult = '\n是否确定要退款?';
_this3.showTipColse = true;
}, 500);
return;
}
this.handleRefund();
}
}
......
order/unpackage/dist/dev/mp-alipay/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.acss
View file @ 314e0846
......@@ -245,6 +245,9 @@
padding-top: 25px;
}
.uni-dialog-title-text {
padding: 0 10px;
line-height: 26px;
text-align: center;
font-size: 16px;
font-weight: 500;
}
......
order/unpackage/dist/dev/mp-alipay/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.axml
View file @ 314e0846
<view class="uni-popup-dialog"><view class="uni-dialog-title"><text class="{{(('uni-dialog-title-text')+' '+('uni-popup__'+dialogType))}}">{{titleText}}</text></view><block a:if="{{mode==='base'}}"><view class="uni-dialog-content"><block a:if="{{$slots.$default}}"><slot></slot></block><block a:else><text class="uni-dialog-content-text">{{content}}</text></block></view></block><block a:else><view class="uni-dialog-content"><block a:if="{{$slots.$default}}"><slot></slot></block><block a:else><input class="uni-dialog-input" type="text" placeholder="{{placeholderText}}" focus="{{focus}}" data-event-opts="{{[['input',[['__set_model',['','val','$event',[]]]]]]}}" value="{{val}}" onInput="__e"/></block></view></block><view class="uni-dialog-button-group"><view data-event-opts="{{[['tap',[['closeDialog',['$event']]]]]}}" class="uni-dialog-button" onTap="__e"><text class="uni-dialog-button-text">{{closeText}}</text></view><view data-event-opts="{{[['tap',[['onOk',['$event']]]]]}}" class="uni-dialog-button uni-border-left" onTap="__e"><text class="uni-dialog-button-text uni-button-color">{{okText}}</text></view></view></view>
\ No newline at end of file
<view class="uni-popup-dialog"><view class="uni-dialog-title"><text class="{{(('uni-dialog-title-text')+' '+('uni-popup__'+dialogType))}}">{{titleText}}</text></view><block a:if="{{mode==='base'}}"><view class="uni-dialog-content"><block a:if="{{$slots.$default}}"><slot></slot></block><block a:else><text class="uni-dialog-content-text">{{content}}</text></block></view></block><block a:else><view class="uni-dialog-content"><block a:if="{{$slots.$default}}"><slot></slot></block><block a:else><input class="uni-dialog-input" maxlength="{{maxlength}}" type="{{inputType}}" placeholder="{{placeholderText}}" focus="{{focus}}" data-event-opts="{{[['input',[['__set_model',['','val','$event',[]]]]]]}}" value="{{val}}" onInput="__e"/></block></view></block><view class="uni-dialog-button-group"><block a:if="{{showClose}}"><view data-event-opts="{{[['tap',[['closeDialog',['$event']]]]]}}" class="uni-dialog-button" onTap="__e"><text class="uni-dialog-button-text">{{closeText}}</text></view></block><view data-event-opts="{{[['tap',[['onOk',['$event']]]]]}}" class="{{(('uni-dialog-button')+' '+(showClose?'uni-border-left':''))}}" onTap="__e"><text class="uni-dialog-button-text uni-button-color">{{okText}}</text></view></view></view>
\ No newline at end of file
order/unpackage/dist/dev/mp-alipay/uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.js
View file @ 314e0846
......@@ -151,6 +151,7 @@ var _index = _interopRequireDefault(__webpack_require__(/*! ../uni-popup/i18n/in
//
//
//
//
var _initVueI18n = (0, _uniI18n.initVueI18n)(_index.default),
t = _initVueI18n.t;
......@@ -160,6 +161,7 @@ var _initVueI18n = (0, _uniI18n.initVueI18n)(_index.default),
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} value input 模式下的默认值
* @property {String} placeholder input 模式下输入提示
* @property {Boolean} focus input模式下是否自动聚焦，默认为true
* @property {String} type = [success|warning|info|error] 主题样式
* @value success 成功
* @value warning 提示
......@@ -168,16 +170,26 @@ var _initVueI18n = (0, _uniI18n.initVueI18n)(_index.default),
* @property {String} mode = [base|input] 模式、
* @value base 基础对话框
* @value input 可输入对话框
* @showClose {Boolean} 是否显示关闭按钮
* @property {String} content 对话框内容
* @property {Boolean} beforeClose 是否拦截取消事件
* @property {Number} maxlength 输入
* @event {Function} confirm 点击确认按钮触发
* @event {Function} close 点击取消按钮触发
*/
var _default = {
name: "uniPopupDialog",
mixins: [_popup.default],
emits: ['confirm', 'close'],
emits: ['confirm', 'close', 'update:modelValue', 'input'],
props: {
inputType: {
type: String,
default: 'text'
},
showClose: {
type: Boolean,
default: true
},
value: {
type: [String, Number],
default: ''
......@@ -213,12 +225,19 @@ var _default = {
confirmText: {
type: String,
default: ''
},
maxlength: {
type: Number,
default: -1
},
focus: {
type: Boolean,
default: true
}
},
data: function data() {
return {
dialogType: 'error',
focus: false,
val: ""
};
},
......@@ -246,7 +265,15 @@ var _default = {
}
},
value: function value(val) {
this.val = val;
if (this.maxlength != -1 && this.mode === 'input') {
this.val = val.slice(0, this.maxlength);
} else {
this.val = val;
}
},
val: function val(_val) {
// TODO 兼容 vue2
this.$emit('input', _val);
}
},
created: function created() {
......@@ -260,9 +287,6 @@ var _default = {
this.dialogType = this.type;
}
},
mounted: function mounted() {
this.focus = true;
},
methods: {
/**
* 点击确认按钮
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment