Skip to content

梁建民 / wmsMin

Go to a project
Commit aa427f92 by LJM
Options

add

parent c9f608e9
Inline Side-by-side
Showing with 708 additions and 498 deletions
pages/tally/index.vue
...@@ -192,7 +192,7 @@ ...@@ -192,7 +192,7 @@
</uni-popup> </uni-popup>
<!-- 关单封箱弹窗 --> <!-- 关单封箱弹窗 -->
<uni-popup ref="inputDialog" type="dialog" :mask-click="true"> <uni-popup ref="inputDialog" type="dialog" :mask-click="true">
<uni-popup-dialog ref="inputClose" mode="input" :title="title" value="" confirmText="新箱子" cancelText="不需要换箱" placeholder="请输入毛重" @close="dialogInputClose" @confirm="dialogInputConfirm" :before-close="true"></uni-popup-dialog> <uni-popup-dialog ref="inputClose" mode="input" :title="title" v-model="gross_weight" value="" confirmText="新箱子" cancelText="不需要换箱" placeholder="请输入毛重" @close="dialogInputClose" @confirm="dialogInputConfirm" :before-close="true"></uni-popup-dialog>
</uni-popup> </uni-popup>
</view> </view>
</template> </template>
...@@ -225,7 +225,8 @@ ...@@ -225,7 +225,8 @@
origin: '', //搜索国家携带的参数 origin: '', //搜索国家携带的参数
form: {}, form: {},
isRequestSent: false, isRequestSent: false,
isStopRequest: false isStopRequest: false,
gross_weight: ''
}; };
}, },
watch: { watch: {
...@@ -677,11 +678,18 @@ ...@@ -677,11 +678,18 @@
} }
this.request(API.closeBox, 'POST', { wsty_id: this.wsty_id, gross_weight: val }, true).then(res => { this.request(API.closeBox, 'POST', { wsty_id: this.wsty_id, gross_weight: val }, true).then(res => {
if (res.err_code === 0) { if (res.err_code === 0) {
this.box_sn = ''; uni.showToast({
this.wsty_id = ''; title: '操作成功',
this.tallyData = []; icon: 'success',
this.erp_order_sn = ''; duration: 2000
this.$refs.inputDialog.close() });
setTimeout(() => {
this.box_sn = '';
this.wsty_id = '';
this.tallyData = [];
this.erp_order_sn = '';
this.$refs.inputDialog.close()
}, 2000);
} else { } else {
uni.showToast({ uni.showToast({
title: res.err_msg, title: res.err_msg,
...@@ -694,11 +702,25 @@ ...@@ -694,11 +702,25 @@
* 不需要换箱 * 不需要换箱
*/ */
dialogInputClose() { dialogInputClose() {
this.request(API.closeBox, 'POST', { wsty_id: this.wsty_id, gross_weight: '' }, true).then(res => { if (!this.gross_weight) {
uni.showToast({
title: '请输入毛重',
icon: 'error'
});
return false;
}
this.request(API.closeBox, 'POST', { wsty_id: this.wsty_id, gross_weight: this.gross_weight }, true).then(res => {
if (res.err_code === 0) { if (res.err_code === 0) {
this.$refs.inputDialog.close(); uni.showToast({
this.tallyData = []; title: '操作成功',
this.erp_order_sn = ''; icon: 'success',
duration: 2000
});
setTimeout(() => {
this.$refs.inputDialog.close();
this.tallyData = [];
this.erp_order_sn = '';
}, 2000);
} else { } else {
uni.showToast({ uni.showToast({
title: res.err_msg, title: res.err_msg,
......
pages/tally/unboxing.vue
...@@ -2,7 +2,12 @@ ...@@ -2,7 +2,12 @@
<view class="unboxing"> <view class="unboxing">
<view class="input-box row bothSide verCenter"> <view class="input-box row bothSide verCenter">
<input class="uni-input" placeholder="输入或扫描入箱号" placeholder-style="color:#000;font-weight: bold;" v-model="box_sn" @input="handleInput($event)" /> <input class="uni-input" placeholder="输入或扫描入箱号" placeholder-style="color:#000;font-weight: bold;" v-model="box_sn" @input="handleInput($event)" />
<view class="btn row rowCenter verCenter" @click="unboxing()">开 箱</view> <template v-if="tallyData.detail && tallyData.detail.length > 0">
<view class="btn1 row rowCenter verCenter" @click="closeBox()">重新封箱</view>
</template>
<template v-else>
<view class="btn row rowCenter verCenter" @click="unboxing()">开 箱</view>
</template>
</view> </view>
<!-- 列表 --> <!-- 列表 -->
<view class="list" v-if="tallyData && tallyData.detail"> <view class="list" v-if="tallyData && tallyData.detail">
...@@ -108,7 +113,7 @@ ...@@ -108,7 +113,7 @@
</uni-popup> </uni-popup>
<!-- 关单封箱弹窗 --> <!-- 关单封箱弹窗 -->
<uni-popup ref="inputDialog" type="dialog" :mask-click="true"> <uni-popup ref="inputDialog" type="dialog" :mask-click="true">
<uni-popup-dialog ref="inputClose" mode="input" :title="title" value="" confirmText="新箱子" cancelText="不需要换箱" placeholder="请输入毛重" @close="dialogInputClose" @confirm="dialogInputConfirm" :before-close="true"></uni-popup-dialog> <uni-popup-dialog ref="inputClose" mode="input" :title="title" v-model="gross_weight" confirmText="新箱子" cancelText="不需要换箱" placeholder="请输入毛重" @close="dialogInputClose" @confirm="dialogInputConfirm" :before-close="true"></uni-popup-dialog>
</uni-popup> </uni-popup>
</view> </view>
</template> </template>
...@@ -128,7 +133,10 @@ ...@@ -128,7 +133,10 @@
origin_list: [], //产地 origin_list: [], //产地
curr: -1, //当前打开的是哪个产地 curr: -1, //当前打开的是哪个产地
origin: '', //搜索国家携带的参数 origin: '', //搜索国家携带的参数
form: {} form: {},
title: '',
gross_weight: ''
}; };
}, },
watch: { watch: {
...@@ -314,7 +322,7 @@ ...@@ -314,7 +322,7 @@
goods_check_pic: item.goods_check_pic, // 商检的必须上传图片 goods_check_pic: item.goods_check_pic, // 商检的必须上传图片
wstydl_id: item.wstydl_id, // 理货明细ID wstydl_id: item.wstydl_id, // 理货明细ID
erp_order_sn: this.erp_order_sn, // 入仓号 erp_order_sn: this.erp_order_sn, // 入仓号
wsty_id: this.wsty_id, // 箱子id box_sn: this.box_sn, // 箱子
is_goods_check: item.is_goods_check //是否商检 is_goods_check: item.is_goods_check //是否商检
})); }));
...@@ -395,7 +403,7 @@ ...@@ -395,7 +403,7 @@
content: '确定取消该商品理货吗？', content: '确定取消该商品理货吗？',
success: (res) => { success: (res) => {
if (res.confirm) { if (res.confirm) {
this.request(API.cancelTallyDetail, 'POST', { wstydl_id: this.form[index].wstydl_id, wsty_id: this.form[index].wsty_id }, true).then(res => { this.request(API.cancelTallyDetail, 'POST', { wstydl_id: this.form[index].wstydl_id, box_sn: box_sn }, true).then(res => {
if (res.err_code === 0) { if (res.err_code === 0) {
this.getTallyData(1); this.getTallyData(1);
} else { } else {
...@@ -410,6 +418,74 @@ ...@@ -410,6 +418,74 @@
} }
} }
}); });
},
/**
* 关单封箱
*/
closeBox() {
this.title = `箱号${this.box_sn}已经全部验货完毕是否更换新的箱子？`;
this.$refs.inputDialog.open();
},
/**
* 新箱子
*/
dialogInputConfirm(val) {
if (!val) {
uni.showToast({
title: '请输入毛重',
icon: 'error'
});
return false;
}
this.request(API.closeBox, 'POST', { box_sn: this.box_sn, gross_weight: val }, true).then(res => {
if (res.err_code === 0) {
uni.showToast({
title: '操作成功',
icon: 'success',
duration: 2000
});
setTimeout(() => {
this.box_sn = '';
this.tallyData = [];
this.$refs.inputDialog.close()
}, 2000);
} else {
uni.showToast({
title: res.err_msg,
icon: 'none'
});
}
});
},
/**
* 不需要换箱
*/
dialogInputClose() {
if (!this.gross_weight) {
uni.showToast({
title: '请输入毛重',
icon: 'error'
});
return false;
}
this.request(API.closeBox, 'POST', { box_sn: this.box_sn, gross_weight: this.gross_weight }, true).then(res => {
if (res.err_code === 0) {
uni.showToast({
title: '操作成功',
icon: 'success',
duration: 2000
});
setTimeout(() => {
this.$refs.inputDialog.close();
this.tallyData = [];
}, 2000);
} else {
uni.showToast({
title: res.err_msg,
icon: 'none'
});
}
});
} }
} }
}; };
......
uni_modules/uni-popup/changelog.md
## 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） ## 1.8.2（2023-02-02）
- uni-popup-dialog 组件新增 inputType 属性 - uni-popup-dialog 组件新增 inputType 属性
## 1.8.1（2022-12-01） ## 1.8.1（2022-12-01）
......
uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue
...@@ -10,14 +10,15 @@ ...@@ -10,14 +10,15 @@
</view> </view>
<view v-else class="uni-dialog-content"> <view v-else class="uni-dialog-content">
<slot> <slot>
<input class="uni-dialog-input" v-model="val" :type="inputType" :placeholder="placeholderText" :focus="focus" > <input class="uni-dialog-input" :maxlength="maxlength" v-model="val" :type="inputType"
:placeholder="placeholderText" :focus="focus">
</slot> </slot>
</view> </view>
<view class="uni-dialog-button-group"> <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> <text class="uni-dialog-button-text">{{closeText}}</text>
</view> </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> <text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
</view> </view>
</view> </view>
...@@ -28,16 +29,19 @@ ...@@ -28,16 +29,19 @@
<script> <script>
import popup from '../uni-popup/popup.js' import popup from '../uni-popup/popup.js'
import { import {
initVueI18n initVueI18n
} from '@dcloudio/uni-i18n' } from '@dcloudio/uni-i18n'
import messages from '../uni-popup/i18n/index.js' import messages from '../uni-popup/i18n/index.js'
const { t } = initVueI18n(messages) const {
t
} = initVueI18n(messages)
/** /**
* PopUp 弹出层-对话框样式 * PopUp 弹出层-对话框样式
* @description 弹出层-对话框样式 * @description 弹出层-对话框样式
* @tutorial https://ext.dcloud.net.cn/plugin?id=329 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} value input 模式下的默认值 * @property {String} value input 模式下的默认值
* @property {String} placeholder input 模式下输入提示 * @property {String} placeholder input 模式下输入提示
* @property {Boolean} focus input模式下是否自动聚焦，默认为true
* @property {String} type = [success|warning|info|error] 主题样式 * @property {String} type = [success|warning|info|error] 主题样式
* @value success 成功 * @value success 成功
* @value warning 提示 * @value warning 提示
...@@ -46,8 +50,10 @@ ...@@ -46,8 +50,10 @@
* @property {String} mode = [base|input] 模式、 * @property {String} mode = [base|input] 模式、
* @value base 基础对话框 * @value base 基础对话框
* @value input 可输入对话框 * @value input 可输入对话框
* @showClose {Boolean} 是否显示关闭按钮
* @property {String} content 对话框内容 * @property {String} content 对话框内容
* @property {Boolean} beforeClose 是否拦截取消事件 * @property {Boolean} beforeClose 是否拦截取消事件
* @property {Number} maxlength 输入
* @event {Function} confirm 点击确认按钮触发 * @event {Function} confirm 点击确认按钮触发
* @event {Function} close 点击取消按钮触发 * @event {Function} close 点击取消按钮触发
*/ */
...@@ -55,16 +61,30 @@ ...@@ -55,16 +61,30 @@
export default { export default {
name: "uniPopupDialog", name: "uniPopupDialog",
mixins: [popup], mixins: [popup],
emits:['confirm','close'], emits: ['confirm', 'close', 'update:modelValue', 'input'],
props: { props: {
inputType:{ inputType: {
type: String, type: String,
default: 'text' default: 'text'
}, },
showClose: {
type: Boolean,
default: true
},
// #ifdef VUE2
value: { value: {
type: [String, Number], type: [String, Number],
default: '' default: ''
}, },
// #endif
// #ifdef VUE3
modelValue: {
type: [Number, String],
default: ''
},
// #endif
placeholder: { placeholder: {
type: [String, Number], type: [String, Number],
default: '' default: ''
...@@ -89,19 +109,26 @@ ...@@ -89,19 +109,26 @@
type: Boolean, type: Boolean,
default: false default: false
}, },
cancelText:{ cancelText: {
type: String, type: String,
default: '' default: ''
}, },
confirmText:{ confirmText: {
type: String, type: String,
default: '' default: ''
},
maxlength: {
type: Number,
default: -1,
},
focus: {
type: Boolean,
default: true,
} }
}, },
data() { data() {
return { return {
dialogType: 'error', dialogType: 'error',
focus: false,
val: "" val: ""
} }
}, },
...@@ -129,7 +156,21 @@ ...@@ -129,7 +156,21 @@
} }
}, },
value(val) { 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() { created() {
...@@ -138,25 +179,25 @@ ...@@ -138,25 +179,25 @@
// this.popup.closeMask() // this.popup.closeMask()
if (this.mode === 'input') { if (this.mode === 'input') {
this.dialogType = 'info' this.dialogType = 'info'
this.val = this.value this.val = this.value;
// #ifdef VUE3
this.val = this.modelValue;
// #endif
} else { } else {
this.dialogType = this.type this.dialogType = this.type
} }
}, },
mounted() {
this.focus = true
},
methods: { methods: {
/** /**
* 点击确认按钮 * 点击确认按钮
*/ */
onOk() { onOk() {
if (this.mode === 'input'){ if (this.mode === 'input') {
this.$emit('confirm', this.val) this.$emit('confirm', this.val)
}else{ } else {
this.$emit('confirm') this.$emit('confirm')
} }
if(this.beforeClose) return if (this.beforeClose) return
this.popup.close() this.popup.close()
}, },
/** /**
...@@ -164,17 +205,17 @@ ...@@ -164,17 +205,17 @@
*/ */
closeDialog() { closeDialog() {
this.$emit('close') this.$emit('close')
if(this.beforeClose) return if (this.beforeClose) return
this.popup.close() this.popup.close()
}, },
close(){ close() {
this.popup.close() this.popup.close()
} }
} }
} }
</script> </script>
<style lang="scss" > <style lang="scss">
.uni-popup-dialog { .uni-popup-dialog {
width: 300px; width: 300px;
border-radius: 11px; border-radius: 11px;
......
uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
{ {
text: '支付宝', text: '支付宝',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png', icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
name: 'wx' name: 'ali'
}, },
{ {
text: 'QQ', text: 'QQ',
......
uni_modules/uni-popup/components/uni-popup/uni-popup.vue
<template> <template>
<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']"> <view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']">
<view @touchstart="touchstart"> <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="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass"
<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap"> :duration="duration" :show="showTrans" @click="onTap" />
<view class="uni-popup__wrapper" :style="{ backgroundColor: bg }" :class="[popupstyle]" @click="clear"><slot /></view> <uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration"
</uni-transition> :show="showTrans" @click="onTap">
</view> <view class="uni-popup__wrapper" :style="getStyles" :class="[popupstyle]" @click="clear">
<!-- #ifdef H5 --> <slot />
<keypress v-if="maskShow" @esc="onTap" /> </view>
<!-- #endif --> </uni-transition>
</view> </view>
<!-- #ifdef H5 -->
<keypress v-if="maskShow" @esc="onTap" />
<!-- #endif -->
</view>
</template> </template>
<script> <script>
// #ifdef H5 // #ifdef H5
import keypress from './keypress.js'; import keypress from './keypress.js'
// #endif // #endif
/** /**
* PopUp 弹出层 * PopUp 弹出层
* @description 弹出层组件，为了解决遮罩弹层的问题 * @description 弹出层组件，为了解决遮罩弹层的问题
* @tutorial https://ext.dcloud.net.cn/plugin?id=329 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
* @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式 * @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
* @value top 顶部弹出 * @value top 顶部弹出
* @value center 中间弹出 * @value center 中间弹出
* @value bottom 底部弹出 * @value bottom 底部弹出
* @value left 左侧弹出 * @value left 左侧弹出
* @value right 右侧弹出 * @value right 右侧弹出
* @value message 消息提示 * @value message 消息提示
* @value dialog 对话框 * @value dialog 对话框
* @value share 底部分享示例 * @value share 底部分享示例
* @property {Boolean} animation = [true|false] 是否开启动画 * @property {Boolean} animation = [true|false] 是否开启动画
* @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃) * @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
* @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗 * @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
* @property {String} backgroundColor 主窗口背景色 * @property {String} backgroundColor 主窗口背景色
* @property {String} maskBackgroundColor 蒙版颜色 * @property {String} maskBackgroundColor 蒙版颜色
* @property {Boolean} safeArea 是否适配底部安全区 * @property {String} borderRadius 设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px"
* @event {Function} change 打开关闭弹窗触发，e={show: false} * @property {Boolean} safeArea 是否适配底部安全区
* @event {Function} maskClick 点击遮罩触发 * @event {Function} change 打开关闭弹窗触发，e={show: false}
*/ * @event {Function} maskClick 点击遮罩触发
*/
export default { export default {
name: 'uniPopup', name: 'uniPopup',
components: { components: {
// #ifdef H5 // #ifdef H5
keypress keypress
// #endif // #endif
}, },
emits: ['change', 'maskClick'], emits: ['change', 'maskClick'],
props: { props: {
// 开启动画 // 开启动画
animation: { animation: {
type: Boolean, type: Boolean,
default: true default: true
}, },
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层 // 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
// message: 消息提示 ; dialog : 对话框 // message: 消息提示 ; dialog : 对话框
type: { type: {
type: String, type: String,
default: 'center' default: 'center'
}, },
// maskClick // maskClick
isMaskClick: { isMaskClick: {
type: Boolean, type: Boolean,
default: null default: null
}, },
// TODO 2 个版本后废弃属性 ，使用 isMaskClick // TODO 2 个版本后废弃属性 ，使用 isMaskClick
maskClick: { maskClick: {
type: Boolean, type: Boolean,
default: null default: null
}, },
backgroundColor: { backgroundColor: {
type: String, type: String,
default: 'none' default: 'none'
}, },
safeArea: { safeArea: {
type: Boolean, type: Boolean,
default: true default: true
}, },
maskBackgroundColor: { maskBackgroundColor: {
type: String, type: String,
default: 'rgba(0, 0, 0, 0.4)' default: 'rgba(0, 0, 0, 0.4)'
} },
}, borderRadius:{
type: String,
}
},
watch: { watch: {
/** /**
* 监听type类型 * 监听type类型
*/ */
type: { type: {
handler: function(type) { handler: function(type) {
if (!this.config[type]) return; if (!this.config[type]) return
this[this.config[type]](true); this[this.config[type]](true)
}, },
immediate: true immediate: true
}, },
isDesktop: { isDesktop: {
handler: function(newVal) { handler: function(newVal) {
if (!this.config[newVal]) return; if (!this.config[newVal]) return
this[this.config[this.type]](true); this[this.config[this.type]](true)
}, },
immediate: true immediate: true
}, },
/** /**
* 监听遮罩是否可点击 * 监听遮罩是否可点击
* @param {Object} val * @param {Object} val
*/ */
maskClick: { maskClick: {
handler: function(val) { handler: function(val) {
this.mkclick = val; this.mkclick = val
}, },
immediate: true immediate: true
}, },
isMaskClick: { isMaskClick: {
handler: function(val) { handler: function(val) {
this.mkclick = val; this.mkclick = val
}, },
immediate: true immediate: true
}, },
// H5 下禁止底部滚动 // H5 下禁止底部滚动
showPopup(show) { showPopup(show) {
// #ifdef H5 // #ifdef H5
// fix by mehaotian 处理 h5 滚动穿透的问题 // fix by mehaotian 处理 h5 滚动穿透的问题
document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible'; document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible'
// #endif // #endif
} }
}, },
data() { data() {
return { return {
duration: 300, duration: 300,
ani: [], ani: [],
showPopup: false, showPopup: false,
showTrans: false, showTrans: false,
popupWidth: 0, popupWidth: 0,
popupHeight: 0, popupHeight: 0,
config: { config: {
top: 'top', top: 'top',
bottom: 'bottom', bottom: 'bottom',
center: 'center', center: 'center',
left: 'left', left: 'left',
right: 'right', right: 'right',
message: 'top', message: 'top',
dialog: 'center', dialog: 'center',
share: 'bottom' share: 'bottom'
}, },
maskClass: { maskClass: {
position: 'fixed', position: 'fixed',
bottom: 0, bottom: 0,
top: 0, top: 0,
left: 0, left: 0,
right: 0, right: 0,
backgroundColor: 'rgba(0, 0, 0, 0.4)' backgroundColor: 'rgba(0, 0, 0, 0.4)'
}, },
transClass: { transClass: {
position: 'fixed', backgroundColor: 'transparent',
left: 0, borderRadius: this.borderRadius || "0",
right: 0 position: 'fixed',
}, left: 0,
maskShow: true, right: 0
mkclick: true, },
popupstyle: this.isDesktop ? 'fixforpc-top' : 'top' maskShow: true,
}; mkclick: true,
}, popupstyle: 'top'
computed: { }
isDesktop() { },
return this.popupWidth >= 500 && this.popupHeight >= 500; computed: {
}, getStyles() {
bg() { let res = { backgroundColor: this.bg };
if (this.backgroundColor === '' || this.backgroundColor === 'none') { if (this.borderRadius || "0") {
return 'transparent'; res = Object.assign(res, { borderRadius: this.borderRadius })
} }
return this.backgroundColor; return res;
} },
}, isDesktop() {
mounted() { return this.popupWidth >= 500 && this.popupHeight >= 500
const fixSize = () => { },
const { windowWidth, windowHeight, windowTop, safeArea, screenHeight, safeAreaInsets } = uni.getSystemInfoSync(); bg() {
this.popupWidth = windowWidth; if (this.backgroundColor === '' || this.backgroundColor === 'none') {
this.popupHeight = windowHeight + (windowTop || 0); return 'transparent'
// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复 }
if (safeArea && this.safeArea) { return this.backgroundColor
// #ifdef MP-WEIXIN }
this.safeAreaInsets = screenHeight - safeArea.bottom; },
// #endif mounted() {
// #ifndef MP-WEIXIN const fixSize = () => {
this.safeAreaInsets = safeAreaInsets.bottom; const {
// #endif windowWidth,
} else { windowHeight,
this.safeAreaInsets = 0; windowTop,
} safeArea,
}; screenHeight,
fixSize(); safeAreaInsets
// #ifdef H5 } = uni.getSystemInfoSync()
// window.addEventListener('resize', fixSize) this.popupWidth = windowWidth
// this.$once('hook:beforeDestroy', () => { this.popupHeight = windowHeight + (windowTop || 0)
// window.removeEventListener('resize', fixSize) // TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
// }) if (safeArea && this.safeArea) {
// #endif // #ifdef MP-WEIXIN
}, this.safeAreaInsets = screenHeight - safeArea.bottom
// #ifndef VUE3 // #endif
// TODO vue2 // #ifndef MP-WEIXIN
destroyed() { this.safeAreaInsets = safeAreaInsets.bottom
this.setH5Visible(); // #endif
}, } else {
// #endif this.safeAreaInsets = 0
// #ifdef VUE3 }
// TODO vue3 }
unmounted() { fixSize()
this.setH5Visible(); // #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);
}, },
// #endif deactivated() {
created() { this.setH5Visible(true);
// 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: { created() {
setH5Visible() { // this.mkclick = this.isMaskClick || this.maskClick
// #ifdef H5 if (this.isMaskClick === null && this.maskClick === null) {
// fix by mehaotian 处理 h5 滚动穿透的问题 this.mkclick = true
document.getElementsByTagName('body')[0].style.overflow = 'visible'; } else {
// #endif this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick
}, }
/** if (this.animation) {
* 公用方法，不显示遮罩层 this.duration = 300
*/ } else {
closeMask() { this.duration = 0
this.maskShow = false; }
}, // TODO 处理 message 组件生命周期异常的问题
/** this.messageChild = null
* 公用方法，遮罩层禁止点击 // TODO 解决头条冒泡的问题
*/ this.clearPropagation = false
disableMask() { this.maskClass.backgroundColor = this.maskBackgroundColor
this.mkclick = false; },
}, methods: {
// TODO nvue 取消冒泡 setH5Visible(visible = true) {
clear(e) { // #ifdef H5
// #ifndef APP-NVUE // fix by mehaotian 处理 h5 滚动穿透的问题
e.stopPropagation(); document.getElementsByTagName('body')[0].style.overflow = visible ? "visible" : "hidden";
// #endif // #endif
this.clearPropagation = true; },
}, /**
* 公用方法，不显示遮罩层
*/
closeMask() {
this.maskShow = false
},
/**
* 公用方法，遮罩层禁止点击
*/
disableMask() {
this.mkclick = false
},
// TODO nvue 取消冒泡
clear(e) {
// #ifndef APP-NVUE
e.stopPropagation()
// #endif
this.clearPropagation = true
},
open(direction) { open(direction) {
// fix by mehaotian 处理快速打开关闭的情况 // fix by mehaotian 处理快速打开关闭的情况
if (this.showPopup) { if (this.showPopup) {
clearTimeout(this.timer); return
this.showPopup = false; }
} let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']; if (!(direction && innerType.indexOf(direction) !== -1)) {
if (!(direction && innerType.indexOf(direction) !== -1)) { direction = this.type
direction = this.type; }
} if (!this.config[direction]) {
if (!this.config[direction]) { console.error('缺少类型：', direction)
console.error('缺少类型：', direction); return
return; }
} this[this.config[direction]]()
this[this.config[direction]](); this.$emit('change', {
this.$emit('change', { show: true,
show: true, type: direction
type: direction })
}); },
}, close(type) {
close(type) { this.showTrans = false
this.showTrans = false; this.$emit('change', {
this.$emit('change', { show: false,
show: false, type: this.type
type: this.type })
}); clearTimeout(this.timer)
clearTimeout(this.timer); // // 自定义关闭事件
// // 自定义关闭事件 // this.customOpen && this.customClose()
// this.customOpen && this.customClose() this.timer = setTimeout(() => {
this.timer = setTimeout(() => { this.showPopup = false
this.showPopup = false; }, 300)
}, 300); },
}, // TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
// TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容 touchstart() {
touchstart() { this.clearPropagation = false
this.clearPropagation = false; },
},
onTap() { onTap() {
if (this.clearPropagation) { if (this.clearPropagation) {
// fix by mehaotian 兼容 nvue // fix by mehaotian 兼容 nvue
this.clearPropagation = false; this.clearPropagation = false
return; return
} }
this.$emit('maskClick'); this.$emit('maskClick')
if (!this.mkclick) return; if (!this.mkclick) return
this.close(); this.close()
}, },
/** /**
* 顶部弹出样式处理 * 顶部弹出样式处理
*/ */
top(type) { top(type) {
this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'; this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
this.ani = ['slide-top']; this.ani = ['slide-top']
this.transClass = { this.transClass = {
position: 'fixed', position: 'fixed',
left: 0, left: 0,
right: 0, right: 0,
backgroundColor: this.bg backgroundColor: this.bg,
}; borderRadius:this.borderRadius || "0"
// TODO 兼容 type 属性 ，后续会废弃 }
if (type) return; // TODO 兼容 type 属性 ，后续会废弃
this.showPopup = true; if (type) return
this.showTrans = true; this.showPopup = true
this.$nextTick(() => { this.showTrans = true
if (this.messageChild && this.type === 'message') { this.$nextTick(() => {
this.messageChild.timerClose(); if (this.messageChild && this.type === 'message') {
} this.messageChild.timerClose()
}); }
}, })
/** },
* 底部弹出样式处理 /**
*/ * 底部弹出样式处理
bottom(type) { */
this.popupstyle = 'bottom'; bottom(type) {
this.ani = ['slide-bottom']; this.popupstyle = 'bottom'
this.transClass = { this.ani = ['slide-bottom']
position: 'fixed', this.transClass = {
left: 0, position: 'fixed',
right: 0, left: 0,
bottom: 0, right: 0,
paddingBottom: this.safeAreaInsets + 'px', bottom: 0,
backgroundColor: this.bg, paddingBottom: this.safeAreaInsets + 'px',
borderRadius: '20rpx' backgroundColor: this.bg,
}; borderRadius:this.borderRadius || "0",
// TODO 兼容 type 属性 ，后续会废弃 }
if (type) return; // TODO 兼容 type 属性 ，后续会废弃
this.showPopup = true; if (type) return
this.showTrans = true; this.showPopup = true
}, this.showTrans = true
/** },
* 中间弹出样式处理 /**
*/ * 中间弹出样式处理
center(type) { */
this.popupstyle = 'center'; center(type) {
this.ani = ['zoom-out', 'fade']; this.popupstyle = 'center'
this.transClass = { //微信小程序下，组合动画会出现文字向上闪动问题，再此做特殊处理
position: 'fixed', // #ifdef MP-WEIXIN
/* #ifndef APP-NVUE */ this.ani = ['fade']
display: 'flex', // #endif
flexDirection: 'column', // #ifndef MP-WEIXIN
/* #endif */ this.ani = ['zoom-out', 'fade']
bottom: 0, // #endif
left: 0, this.transClass = {
right: 0, position: 'fixed',
top: 0, /* #ifndef APP-NVUE */
justifyContent: 'center', display: 'flex',
alignItems: 'center' flexDirection: 'column',
}; /* #endif */
// TODO 兼容 type 属性 ，后续会废弃 bottom: 0,
if (type) return; left: 0,
this.showPopup = true; right: 0,
this.showTrans = true; top: 0,
}, justifyContent: 'center',
left(type) { alignItems: 'center',
this.popupstyle = 'left'; borderRadius:this.borderRadius || "0"
this.ani = ['slide-left']; }
this.transClass = { // TODO 兼容 type 属性 ，后续会废弃
position: 'fixed', if (type) return
left: 0, this.showPopup = true
bottom: 0, this.showTrans = true
top: 0, },
backgroundColor: this.bg, left(type) {
/* #ifndef APP-NVUE */ this.popupstyle = 'left'
display: 'flex', this.ani = ['slide-left']
flexDirection: 'column' this.transClass = {
/* #endif */ position: 'fixed',
}; left: 0,
// TODO 兼容 type 属性 ，后续会废弃 bottom: 0,
if (type) return; top: 0,
this.showPopup = true; backgroundColor: this.bg,
this.showTrans = true; borderRadius:this.borderRadius || "0",
}, /* #ifndef APP-NVUE */
right(type) { display: 'flex',
this.popupstyle = 'right'; flexDirection: 'column'
this.ani = ['slide-right']; /* #endif */
this.transClass = { }
position: 'fixed', // TODO 兼容 type 属性 ，后续会废弃
bottom: 0, if (type) return
right: 0, this.showPopup = true
top: 0, this.showTrans = true
backgroundColor: this.bg, },
/* #ifndef APP-NVUE */ right(type) {
display: 'flex', this.popupstyle = 'right'
flexDirection: 'column' this.ani = ['slide-right']
/* #endif */ this.transClass = {
}; position: 'fixed',
// TODO 兼容 type 属性 ，后续会废弃 bottom: 0,
if (type) return; right: 0,
this.showPopup = true; top: 0,
this.showTrans = true; backgroundColor: this.bg,
} borderRadius:this.borderRadius || "0",
} /* #ifndef APP-NVUE */
}; display: 'flex',
flexDirection: 'column'
/* #endif */
}
// TODO 兼容 type 属性 ，后续会废弃
if (type) return
this.showPopup = true
this.showTrans = true
}
}
}
</script> </script>
<style lang="scss"> <style lang="scss">
.uni-popup { .uni-popup {
position: fixed; position: fixed;
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
z-index: 99; z-index: 99;
/* #endif */ /* #endif */
&.top, &.top,
&.left, &.left,
&.right { &.right {
/* #ifdef H5 */ /* #ifdef H5 */
top: var(--window-top); top: var(--window-top);
/* #endif */ /* #endif */
/* #ifndef H5 */ /* #ifndef H5 */
top: 0; top: 0;
/* #endif */ /* #endif */
} }
.uni-popup__wrapper { .uni-popup__wrapper {
border-radius: 20rpx 20rpx 0rpx 0rpx; /* #ifndef APP-NVUE */
/* #ifndef APP-NVUE */ display: block;
display: block; /* #endif */
/* #endif */ position: relative;
position: relative;
/* iphonex 等安全区设置，底部安全区适配 */ /* iphonex 等安全区设置，底部安全区适配 */
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
// padding-bottom: constant(safe-area-inset-bottom); // padding-bottom: constant(safe-area-inset-bottom);
// padding-bottom: env(safe-area-inset-bottom); // padding-bottom: env(safe-area-inset-bottom);
/* #endif */ /* #endif */
&.left, &.left,
&.right { &.right {
/* #ifdef H5 */ /* #ifdef H5 */
padding-top: var(--window-top); padding-top: var(--window-top);
/* #endif */ /* #endif */
/* #ifndef H5 */ /* #ifndef H5 */
padding-top: 0; padding-top: 0;
/* #endif */ /* #endif */
flex: 1; flex: 1;
} }
} }
} }
.fixforpc-z-index { .fixforpc-z-index {
/* #ifndef APP-NVUE */ /* #ifndef APP-NVUE */
z-index: 999; z-index: 999;
/* #endif */ /* #endif */
} }
.fixforpc-top { .fixforpc-top {
top: 0; top: 0;
} }
</style> </style>
uni_modules/uni-popup/package.json
{ {
"id": "uni-popup", "id": "uni-popup",
"displayName": "uni-popup 弹出层", "displayName": "uni-popup 弹出层",
"version": "1.8.2", "version": "1.9.1",
"description": " Popup 组件，提供常用的弹层", "description": " Popup 组件，提供常用的弹层",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -46,7 +46,8 @@ ...@@ -46,7 +46,8 @@
"platforms": { "platforms": {
"cloud": { "cloud": {
"tcb": "y", "tcb": "y",
"aliyun": "y" "aliyun": "y",
"alipay": "n"
}, },
"client": { "client": {
"App": { "App": {
......
uni_modules/uni-transition/changelog.md
## 1.3.3（2024-04-23）
- 修复 当元素会受变量影响自动隐藏的bug
## 1.3.2（2023-05-04）
- 修复 NVUE 平台报错的问题
## 1.3.1（2021-11-23） ## 1.3.1（2021-11-23）
- 修复 init 方法初始化问题 - 修复 init 方法初始化问题
## 1.3.0（2021-11-19） ## 1.3.0（2021-11-19）
......
uni_modules/uni-transition/components/uni-transition/createAnimation.js
...@@ -10,7 +10,10 @@ const nvueAnimation = uni.requireNativePlugin('animation') ...@@ -10,7 +10,10 @@ const nvueAnimation = uni.requireNativePlugin('animation')
class MPAnimation { class MPAnimation {
constructor(options, _this) { constructor(options, _this) {
this.options = options this.options = options
this.animation = uni.createAnimation(options) // 在iOS10+QQ小程序平台下，传给原生的对象一定是个普通对象而不是Proxy对象，否则会报parameter should be Object instead of ProxyObject的错误
this.animation = uni.createAnimation({
...options
})
this.currentStepAnimates = {} this.currentStepAnimates = {}
this.next = 0 this.next = 0
this.$ = _this this.$ = _this
......
uni_modules/uni-transition/components/uni-transition/uni-transition.vue
<template> <template>
<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view> <!-- #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> </template>
<script> <script>
...@@ -48,7 +53,11 @@ export default { ...@@ -48,7 +53,11 @@ export default {
customClass:{ customClass:{
type: String, type: String,
default: '' default: ''
} },
onceRender:{
type:Boolean,
default:false
},
}, },
data() { data() {
return { return {
...@@ -245,7 +254,7 @@ export default { ...@@ -245,7 +254,7 @@ export default {
}, },
animationType(type) { animationType(type) {
return { return {
fade: type ? 1 : 0, fade: type ? 0 : 1,
'slide-top': `translateY(${type ? '0' : '-100%'})`, 'slide-top': `translateY(${type ? '0' : '-100%'})`,
'slide-right': `translateX(${type ? '0' : '100%'})`, 'slide-right': `translateX(${type ? '0' : '100%'})`,
'slide-bottom': `translateY(${type ? '0' : '100%'})`, 'slide-bottom': `translateY(${type ? '0' : '100%'})`,
......
uni_modules/uni-transition/package.json
{ {
"id": "uni-transition", "id": "uni-transition",
"displayName": "uni-transition 过渡动画", "displayName": "uni-transition 过渡动画",
"version": "1.3.1", "version": "1.3.3",
"description": "元素的简单过渡动画", "description": "元素的简单过渡动画",
"keywords": [ "keywords": [
"uni-ui", "uni-ui",
...@@ -17,11 +17,7 @@ ...@@ -17,11 +17,7 @@
"directories": { "directories": {
"example": "../../temps/example_temps" "example": "../../temps/example_temps"
}, },
"dcloudext": { "dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": { "sale": {
"regular": { "regular": {
"price": "0.00" "price": "0.00"
...@@ -38,7 +34,8 @@ ...@@ -38,7 +34,8 @@
"data": "无", "data": "无",
"permissions": "无" "permissions": "无"
}, },
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui" "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
"type": "component-vue"
}, },
"uni_modules": { "uni_modules": {
"dependencies": ["uni-scss"], "dependencies": ["uni-scss"],
...@@ -46,7 +43,8 @@ ...@@ -46,7 +43,8 @@
"platforms": { "platforms": {
"cloud": { "cloud": {
"tcb": "y", "tcb": "y",
"aliyun": "y" "aliyun": "y",
"alipay": "n"
}, },
"client": { "client": {
"App": { "App": {
......
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 sign in to comment