diff --git a/components/toast/index.js b/components/toast/index.js new file mode 100644 index 0000000..c4c2ed9 --- /dev/null +++ b/components/toast/index.js @@ -0,0 +1,29 @@ +import { VantComponent } from '../common/component'; +VantComponent({ + props: { + show: Boolean, + mask: Boolean, + message: String, + forbidClick: Boolean, + zIndex: { + type: Number, + value: 1000, + }, + type: { + type: String, + value: 'text', + }, + loadingType: { + type: String, + value: 'circular', + }, + position: { + type: String, + value: 'middle', + }, + }, + methods: { + // for prevent touchmove + noop() {}, + }, +}); diff --git a/components/toast/index.json b/components/toast/index.json new file mode 100644 index 0000000..9b1b78c --- /dev/null +++ b/components/toast/index.json @@ -0,0 +1,9 @@ +{ + "component": true, + "usingComponents": { + "van-icon": "../icon/index", + "van-loading": "../loading/index", + "van-overlay": "../overlay/index", + "van-transition": "../transition/index" + } +} diff --git a/components/toast/index.wxml b/components/toast/index.wxml new file mode 100644 index 0000000..635e7d6 --- /dev/null +++ b/components/toast/index.wxml @@ -0,0 +1,33 @@ + + + + + {{ message }} + + + + + + {{ message }} + + + + + diff --git a/components/toast/index.wxss b/components/toast/index.wxss new file mode 100644 index 0000000..85dc7a8 --- /dev/null +++ b/components/toast/index.wxss @@ -0,0 +1 @@ +@import '../common/index.wxss';.van-toast{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:initial;color:#fff;color:var(--toast-text-color,#fff);font-size:14px;font-size:var(--toast-font-size,14px);line-height:20px;line-height:var(--toast-line-height,20px);white-space:pre-wrap;word-wrap:break-word;background-color:rgba(0,0,0,.7);background-color:var(--toast-background-color,rgba(0,0,0,.7));border-radius:8px;border-radius:var(--toast-border-radius,8px)}.van-toast__container{position:fixed;top:50%;left:50%;width:-webkit-fit-content;width:fit-content;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);max-width:70%;max-width:var(--toast-max-width,70%)}.van-toast--text{min-width:96px;min-width:var(--toast-text-min-width,96px);padding:8px 12px;padding:var(--toast-text-padding,8px 12px)}.van-toast--icon{width:88px;width:var(--toast-default-width,88px);min-height:88px;min-height:var(--toast-default-min-height,88px);padding:16px;padding:var(--toast-default-padding,16px)}.van-toast--icon .van-toast__icon{font-size:36px;font-size:var(--toast-icon-size,36px)}.van-toast--icon .van-toast__text{padding-top:8px}.van-toast__loading{margin:10px 0}.van-toast--top{-webkit-transform:translateY(-30vh);transform:translateY(-30vh)}.van-toast--bottom{-webkit-transform:translateY(30vh);transform:translateY(30vh)} \ No newline at end of file diff --git a/components/toast/toast.js b/components/toast/toast.js new file mode 100644 index 0000000..4a1b63a --- /dev/null +++ b/components/toast/toast.js @@ -0,0 +1,70 @@ +import { isObj } from '../common/validator'; +const defaultOptions = { + type: 'text', + mask: false, + message: '', + show: true, + zIndex: 1000, + duration: 2000, + position: 'middle', + forbidClick: false, + loadingType: 'circular', + selector: '#van-toast', +}; +let queue = []; +let currentOptions = Object.assign({}, defaultOptions); +function parseOptions(message) { + return isObj(message) ? message : { message }; +} +function getContext() { + const pages = getCurrentPages(); + return pages[pages.length - 1]; +} +function Toast(toastOptions) { + const options = Object.assign( + Object.assign({}, currentOptions), + parseOptions(toastOptions) + ); + const context = options.context || getContext(); + const toast = context.selectComponent(options.selector); + if (!toast) { + console.warn('未找到 van-toast 节点,请确认 selector 及 context 是否正确'); + return; + } + delete options.context; + delete options.selector; + toast.clear = () => { + toast.setData({ show: false }); + if (options.onClose) { + options.onClose(); + } + }; + queue.push(toast); + toast.setData(options); + clearTimeout(toast.timer); + if (options.duration != null && options.duration > 0) { + toast.timer = setTimeout(() => { + toast.clear(); + queue = queue.filter((item) => item !== toast); + }, options.duration); + } + return toast; +} +const createMethod = (type) => (options) => + Toast(Object.assign({ type }, parseOptions(options))); +Toast.loading = createMethod('loading'); +Toast.success = createMethod('success'); +Toast.fail = createMethod('fail'); +Toast.clear = () => { + queue.forEach((toast) => { + toast.clear(); + }); + queue = []; +}; +Toast.setDefaultOptions = (options) => { + Object.assign(currentOptions, options); +}; +Toast.resetDefaultOptions = () => { + currentOptions = Object.assign({}, defaultOptions); +}; +export default Toast; diff --git a/pages/home/employee-info/index.js b/pages/home/employee-info/index.js index 46f785e..f1a046e 100644 --- a/pages/home/employee-info/index.js +++ b/pages/home/employee-info/index.js @@ -1,6 +1,7 @@ // pages/home/customer-info/index.js import Scene from '../../index/scene' import Dialog from '../../../components/dialog/dialog' +import Toast from '../../../components/toast/toast' import { getRoleList} from "../../../api/saas" import { editEmploye, auditEmploye } from "../../../api/user" import { deleteEmploye } from "../../../api/saas" @@ -85,7 +86,8 @@ Scene({ } editEmploye(this.data.form).then(result => { wx.hideLoading() - util.showBackToast('修改成功') + Toast('保存成功') + util.showBackToast() event.emit('EventMessage', { what: 120, detail: '' }) const channel = this.getOpenerEventChannel() channel.emit('onCallback', { what: 120 }) @@ -103,7 +105,8 @@ Scene({ this.data.form.status = 1 auditEmploye(this.data.form).then(result => { wx.hideLoading() - util.showBackToast('员工已经加入') + Toast('审核已通过') + util.showBackToast() const channel = this.getOpenerEventChannel() channel.emit('onCallback', { what: 120 }) }).catch(err => { @@ -117,7 +120,8 @@ Scene({ var enterpriseDepartmentId = this.data.form.enterpriseDepartmentId deleteEmploye({idList: [this.data.form.enterpriseMemberId], enterpriseDepartmentId }).then(result => { wx.hideLoading() - util.showBackToast('员工已经删除') + Toast('员工已经删除') + util.showBackToast() const channel = this.getOpenerEventChannel() channel.emit('onCallback', { what: 120 }) }).catch(err => { diff --git a/pages/home/employee-info/index.json b/pages/home/employee-info/index.json index 034d091..9570622 100644 --- a/pages/home/employee-info/index.json +++ b/pages/home/employee-info/index.json @@ -10,6 +10,7 @@ "van-popup": "/components/popup/index", "van-radio": "/components/radio/index", "van-radio-group": "/components/radio-group/index", + "van-toast": "/components/toast/index", "van-dialog": "/components/dialog/index", "notification": "/pages/message/notification/index" } diff --git a/pages/home/employee-info/index.wxml b/pages/home/employee-info/index.wxml index d2d878a..6456ce9 100644 --- a/pages/home/employee-info/index.wxml +++ b/pages/home/employee-info/index.wxml @@ -35,6 +35,7 @@ 同意 +