1.重写h5充值体现页面

components/keyboard-package/keyboard-package.vue

@@ -4,16 +4,19 @@
 			<view class="numkeyboard" v-if="type==='number'">
 				<view class="num-area">
 					<view class="row" v-for="(item,index) in numKeybordList" :key="index">
-						<view :class="['item',ite===0?'z':'',(disableDot && ite==='.')?'disabled':'']" v-for="(ite,idx) in item"
-						 hover-class="active" :hover-start-time="0" :hover-stay-time="5" :key="idx" @tap="input(ite)">{{ite}}</view>
+						<view :class="['item',ite===0?'z':'',(disableDot && ite==='.')?'disabled':'']"
+							v-for="(ite,idx) in item" hover-class="active" :hover-start-time="0" :hover-stay-time="5"
+							:key="idx" @tap="input(ite)">{{ite}}</view>
 					</view>
 				</view>
 				<view class="btn-area">
-					<view :class="['item','del']" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
-						删除
+					<view :class="['item','del']" hover-class="active" :hover-start-time="0" :hover-stay-time="5"
+						@tap="deleteVal">
+						<image src="../../static/img/deleteIcon.png" mode="aspectFit" style="width: 60rpx;height: 35rpx;"></image>
 					</view>
-					<view class="confirem item" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="confirm">
-						完成
+					<view class="confirem item" hover-class="active" :hover-start-time="0" :hover-stay-time="5"
+						@tap="confirm">
+						充值
 					</view>
 				</view>
 			</view>
@@ -21,15 +24,18 @@
 			<view class="numkeyboard" v-if="type==='idCard'">
 				<view class="num-area">
 					<view class="row" v-for="(item,index) in idCardList" :key="index">
-						<view :class="['item',ite===0?'z':'',(disableDot && ite==='.')?'disabled':'']" v-for="(ite,idx) in item"
-						 hover-class="active" :hover-start-time="0" :hover-stay-time="5" :key="idx" @tap="input(ite)">{{ite}}</view>
+						<view :class="['item',ite===0?'z':'',(disableDot && ite==='.')?'disabled':'']"
+							v-for="(ite,idx) in item" hover-class="active" :hover-start-time="0" :hover-stay-time="5"
+							:key="idx" @tap="input(ite)">{{ite}}</view>
 					</view>
 				</view>
 				<view class="btn-area">
-					<view :class="['item','del']" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
-						删除
+					<view :class="['item','del']" hover-class="active" :hover-start-time="0" :hover-stay-time="5"
+						@tap="deleteVal">
+						删
 					</view>
-					<view class="confirem item" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="confirm">
+					<view class="confirem item" hover-class="active" :hover-start-time="0" :hover-stay-time="5"
+						@tap="confirm">
 						完成
 					</view>
 				</view>
@@ -37,26 +43,32 @@
 
 			<view class="platenumber" v-if="type==='plateNumber'">
 				<view class="header">
-					<view @tap="active=active===1?2:1" hover-class="active" :hover-start-time="0" :hover-stay-time="5">{{active===1?'地区':'车牌号'}}</view>
+					<view @tap="active=active===1?2:1" hover-class="active" :hover-start-time="0" :hover-stay-time="5">
+						{{active===1?'地区':'车牌号'}}
+					</view>
 					<view hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="confirm">完成</view>
 				</view>
 				<view class="main">
 					<view class="normal" v-show="active===1">
 						<view class="row" v-for="(item,index) in EngKeyBoardList" :key="index">
-							<view class="item" v-for="(ite,idx) in item" :key="idx" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="input(ite)">
+							<view class="item" v-for="(ite,idx) in item" :key="idx" hover-class="active"
+								:hover-start-time="0" :hover-stay-time="5" @tap="input(ite)">
 								{{ite}}
 							</view>
-							<view class="item img" v-if="index===EngKeyBoardList.length-1" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
+							<view class="item img" v-if="index===EngKeyBoardList.length-1" hover-class="active"
+								:hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
 								<image src="/static/delete.png" mode=""></image>
 							</view>
 						</view>
 					</view>
 					<view class="area" v-show="active===2">
 						<view class="row" v-for="(item,index) in areaList" :key="index">
-							<view class="item" v-for="(ite,idx) in item" :key="idx" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="input(ite)">
+							<view class="item" v-for="(ite,idx) in item" :key="idx" hover-class="active"
+								:hover-start-time="0" :hover-stay-time="5" @tap="input(ite)">
 								{{ite}}
 							</view>
-							<view class="item img" v-if="index===EngKeyBoardList.length-1" hover-class="active" :hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
+							<view class="item img" v-if="index===EngKeyBoardList.length-1" hover-class="active"
+								:hover-start-time="0" :hover-stay-time="5" @tap="deleteVal">
 								<image src="/static/delete.png" mode=""></image>
 							</view>
 						</view>
@@ -69,11 +81,7 @@
 </template>
 
 <script>
-	import uniPopup from "@/components/uni-popup/uni-popup.vue"
 	export default {
-		components: {
-			uniPopup
-		},
 		props: {
 			type: {
 				type: String,
@@ -131,7 +139,7 @@
 			input(val) {
 				if (val === '.' && this.disableDot) return;
 				this.$emit('onInput', val);
-				if(this.active === 2){
+				if (this.active === 2) {
 					this.active = 1;
 				}
 			},
@@ -147,15 +155,15 @@
 		background-color: #FFFFFF;
 
 		.numkeyboard {
-			height: 432rpx;
+			height: 440rpx;
 			display: flex;
-			background-color: #ebedf0;
+			background: #F7F7F7;
 
 			.btn-area {
-				width: 180rpx;
-				height: 100%;
 				display: flex;
-				flex-direction: column;
+				// flex-direction: column;
+				flex-wrap: wrap;
+				align-items: center;
 
 				.item {
 					width: 100%;
@@ -166,8 +174,13 @@
 				}
 
 				.del {
-					background-color: #ebedf0;
-					color: #333;
+					width: 170rpx;
+					height: 90rpx;
+					background: #FFFFFF;
+					border-radius: 8rpx;
+					margin: 0 auto;
+					text-align: center;
+
 
 					&.active {
 						background-color: #f1f3f5;
@@ -175,7 +188,10 @@
 				}
 
 				.confirem {
-					background-color: #1989fa;
+					width: 170rpx;
+					height: 302rpx;
+					background: #04BA73;
+					border-radius: 8rpx;
 					color: #FFFFFF;
 
 					&.active {
@@ -188,30 +204,40 @@
 				flex-grow: 1;
 				display: flex;
 				flex-wrap: wrap;
+				height: 100%;
 
 				.row {
 					width: 100%;
-					height: 25%;
+					// height: 25%;
 					display: flex;
 					margin-top: 1px;
+					justify-content: space-around;
+					align-items: center;
 
 					.item {
-						flex-grow: 1;
-						height: 100%;
+						// flex-grow: 1;
+						// height: 100%;
 						display: flex;
 						justify-content: center;
 						align-items: center;
-						background-color: #FFFFFF;
-						border-right: 1px solid #ebedf0;
-						width: 33.33%;
+						width: 170rpx;
+						height: 90rpx;
+						background: #FFFFFF;
+						border-radius: 8rpx;
+
 
 						&.active {
-							background-color: #ebedf0;
+							background-color: #04BA73;
+							color: #FFFFFF;
 						}
 
 						&.z {
-							flex-grow: 2;
-							width: 66.66%;
+							// flex-grow: 1.5;
+							width: 62%;
+							font-size: 36rpx;
+							font-family: PingFangSC-Medium, PingFang SC;
+							font-weight: 500;
+							color: #303030;
 						}
 
 						&.disabled {
@@ -249,6 +275,7 @@
 				height: 100%;
 				display: flex;
 				align-items: center;
+
 				&.active {
 					background-color: #ebedf0;
 				}
@@ -274,6 +301,7 @@
 					border-radius: 6rpx;
 					margin: 0 7rpx;
 					font-size: 24rpx;
+
 					&.active {
 						background-color: #ebedf0;
 					}

components/uni-popup/message.js

-export default {
-	created() {
-		if (this.type === 'message') {
-			// 不显示遮罩
-			this.maskShow = false 
-			// 获取子组件对象
-			this.childrenMsg = null
-		}
-	},
-	methods: {
-		customOpen() {
-			if (this.childrenMsg) {
-				this.childrenMsg.open()
-			}
-		},
-		customClose() {
-			if (this.childrenMsg) {
-				this.childrenMsg.close()
-			}
-		}
-	}
-}

components/uni-popup/popup.js

-import message from './message.js';
-// 定义 type 类型:弹出类型：top/bottom/center
-const config = {
-	// 顶部弹出
-	top:'top',
-	// 底部弹出
-	bottom:'bottom',
-	// 居中弹出
-	center:'center',
-	// 消息提示
-	message:'top',
-	// 对话框
-	dialog:'center',
-	// 分享
-	share:'bottom',
-}
-
-export default {
-	data(){
-		return {
-			config:config
-		}
-	},
-	mixins: [message],
-}

components/uni-popup/uni-popup.vue

-<template>
-	<view v-if="showPopup" class="uni-popup" :class="[popupstyle]" @touchmove.stop.prevent="clear">
-		<uni-transition v-if="maskShow" :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="showTrans"
-		 @click="onTap" />
-		<uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
-			<view class="uni-popup__wrapper-box" @click.stop="clear">
-				<slot />
-			</view>
-		</uni-transition>
-	</view>
-</template>
-
-<script>
-	import uniTransition from '../uni-transition/uni-transition.vue'
-	import popup from './popup.js'
-	/**
-	 * PopUp 弹出层
-	 * @description 弹出层组件，为了解决遮罩弹层的问题
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
-	 * @property {String} type = [top|center|bottom] 弹出方式
-	 * 	@value top 顶部弹出
-	 * 	@value center 中间弹出
-	 * 	@value bottom 底部弹出
-	 * 	@value message 消息提示
-	 * 	@value dialog 对话框
-	 * 	@value share 底部分享示例
-	 * @property {Boolean} animation = [ture|false] 是否开启动画
-	 * @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
-	 * @event {Function} change 打开关闭弹窗触发，e={show: false}
-	 */
-
-	export default {
-		name: 'UniPopup',
-		components: {
-			uniTransition
-		},
-		props: {
-			// 开启动画
-			animation: {
-				type: Boolean,
-				default: true
-			},
-			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
-			// message: 消息提示 ; dialog : 对话框
-			type: {
-				type: String,
-				default: 'center'
-			},
-			// maskClick
-			maskClick: {
-				type: Boolean,
-				default: true
-			}
-		},
-		provide() {
-			return {
-				popup: this
-			}
-		},
-		mixins: [popup],
-		watch: {
-			/**
-			 * 监听type类型
-			 */
-			type: {
-				handler: function(newVal) {
-					this[this.config[newVal]]()
-				},
-				immediate: true
-			},
-			/**
-			 * 监听遮罩是否可点击
-			 * @param {Object} val
-			 */
-			maskClick(val) {
-				this.mkclick = val
-			}
-		},
-		data() {
-			return {
-				duration: 300,
-				ani: [],
-				showPopup: false,
-				showTrans: false,
-				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: 'top'
-			}
-		},
-		created() {
-			this.mkclick = this.maskClick
-			if (this.animation) {
-				this.duration = 300
-			} else {
-				this.duration = 0
-			}
-		},
-		methods: {
-			clear(e) {
-				// TODO nvue 取消冒泡
-				e.stopPropagation()
-			},
-			open() {
-				this.showPopup = true
-				this.$nextTick(() => {
-					new Promise(resolve => {
-						clearTimeout(this.timer)
-						this.timer = setTimeout(() => {
-							this.showTrans = true
-							// fixed by mehaotian 兼容 app 端
-							this.$nextTick(() => {
-								resolve();
-							})
-						}, 50);
-					}).then(res => {
-						// 自定义打开事件
-						clearTimeout(this.msgtimer)
-						this.msgtimer = setTimeout(() => {
-							this.customOpen && this.customOpen()
-						}, 100)
-						this.$emit('change', {
-							show: true,
-							type: this.type
-						})
-					})
-				})
-			},
-			close(type) {
-				this.showTrans = false
-				this.$nextTick(() => {
-					this.$emit('change', {
-						show: false,
-						type: this.type
-					})
-					clearTimeout(this.timer)
-					// 自定义关闭事件
-					this.customOpen && this.customClose()
-					this.timer = setTimeout(() => {
-						this.showPopup = false
-					}, 300)
-				})
-			},
-			onTap() {
-				if (!this.mkclick) return
-				this.close()
-			},
-			/**
-			 * 顶部弹出样式处理
-			 */
-			top() {
-				this.popupstyle = 'top'
-				this.ani = ['slide-top']
-				this.transClass = {
-					'position': 'fixed',
-					'left': 0,
-					'right': 0,
-				}
-			},
-			/**
-			 * 底部弹出样式处理
-			 */
-			bottom() {
-				this.popupstyle = 'bottom'
-				this.ani = ['slide-bottom']
-				this.transClass = {
-					'position': 'fixed',
-					'left': 0,
-					'right': 0,
-					'bottom': 0
-				}
-			},
-			/**
-			 * 中间弹出样式处理
-			 */
-			center() {
-				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'
-				}
-			}
-		}
-	}
-</script>
-<style lang="scss" scoped>
-	.uni-popup {
-		position: fixed;
-		/* #ifndef APP-NVUE */
-		z-index: 99;
-		/* #endif */
-	}
-
-	.uni-popup__mask {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		background-color: $uni-bg-color-mask;
-		opacity: 0;
-	}
-
-	.mask-ani {
-		transition-property: opacity;
-		transition-duration: 0.2s;
-	}
-
-	.uni-top-mask {
-		opacity: 1;
-	}
-
-	.uni-bottom-mask {
-		opacity: 1;
-	}
-
-	.uni-center-mask {
-		opacity: 1;
-	}
-
-	.uni-popup__wrapper {
-		/* #ifndef APP-NVUE */
-		display: block;
-		/* #endif */
-		position: absolute;
-	}
-
-	.top {
-		/* #ifdef H5 */
-		top: var(--window-top);
-		/* #endif */
-		/* #ifndef H5 */
-		top: 0;
-		/* #endif */
-	}
-
-	.bottom {
-		bottom: 0;
-	}
-
-	.uni-popup__wrapper-box {
-		/* #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 */
-	}
-
-	.content-ani {
-		// transition: transform 0.3s;
-		transition-property: transform, opacity;
-		transition-duration: 0.2s;
-	}
-
-
-	.uni-top-content {
-		transform: translateY(0);
-	}
-
-	.uni-bottom-content {
-		transform: translateY(0);
-	}
-
-	.uni-center-content {
-		transform: scale(1);
-		opacity: 1;
-	}
-</style>

components/uni-transition/uni-transition.vue

-<template>
-	<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"
-	 @click="change">
-		 <slot></slot>
-	</view>
-</template>
-
-<script>
-	// #ifdef APP-NVUE
-	const animation = uni.requireNativePlugin('animation');
-	// #endif
-	/**
-	 * Transition 过渡动画
-	 * @description 简单过渡动画组件
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=985
-	 * @property {Boolean} show = [false|true] 控制组件显示或隐藏
-     * @property {Array} 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',
-		props: {
-			show: {
-				type: Boolean,
-				default: false
-			},
-			modeClass: {
-				type: Array,
-				default () {
-					return []
-				}
-			},
-			duration: {
-				type: Number,
-				default: 300
-			},
-			styles: {
-				type: Object,
-				default () {
-					return {}
-				}
-			}
-		},
-		data() {
-			return {
-				isShow: false,
-				transform: '',
-				ani: { in: '',
-					active: ''
-				}
-			};
-		},
-		watch: {
-			show: {
-				handler(newVal) {
-					if (newVal) {
-						this.open()
-					} else {
-						this.close()
-					}
-				},
-				immediate: true
-			}
-		},
-		computed: {
-			stylesObject() {
-				let styles = {
-					...this.styles,
-					'transition-duration': this.duration / 1000 + 's'
-				}
-				let transfrom = ''
-				for (let i in styles) {
-					let line = this.toLine(i)
-					transfrom += line + ':' + styles[i] + ';'
-				}
-				return transfrom
-			}
-		},
-		created() {
-			// this.timer = null
-			// this.nextTick = (time = 50) => new Promise(resolve => {
-			// 	clearTimeout(this.timer)
-			// 	this.timer = setTimeout(resolve, time)
-			// 	return this.timer
-			// });
-		},
-		methods: {
-			change() {
-				this.$emit('click', {
-					detail: this.isShow
-				})
-			},
-			open() {
-				clearTimeout(this.timer)
-				this.isShow = true
-				this.transform = ''
-				this.ani.in = ''
-				for (let i in this.getTranfrom(false)) {
-					if (i === 'opacity') {
-						this.ani.in = 'fade-in'
-					} else {
-						this.transform += `${this.getTranfrom(false)[i]} `
-					}
-				}
-				this.$nextTick(() => {
-					setTimeout(() => {
-						this._animation(true)
-					}, 50)
-				})
-
-			},
-			close(type) {
-				clearTimeout(this.timer)
-				this._animation(false)
-			},
-			_animation(type) {
-				let styles = this.getTranfrom(type)
-				// #ifdef APP-NVUE
-				if(!this.$refs['ani']) return
-				animation.transition(this.$refs['ani'].ref, {
-					styles,
-					duration: this.duration, //ms
-					timingFunction: 'ease',
-					needLayout: false,
-					delay: 0 //ms
-				}, () => {
-					if (!type) {
-						this.isShow = false
-					}
-					this.$emit('change', {
-						detail: this.isShow
-					})
-				})
-				// #endif
-				// #ifndef APP-NVUE
-				this.transform = ''
-				for (let i in styles) {
-					if (i === 'opacity') {
-						this.ani.in = `fade-${type?'out':'in'}`
-					} else {
-						this.transform += `${styles[i]} `
-					}
-				}
-				this.timer = setTimeout(() => {
-					if (!type) {
-						this.isShow = false
-					}
-					this.$emit('change', {
-						detail: this.isShow
-					})
-
-				}, this.duration)
-				// #endif
-
-			},
-			getTranfrom(type) {
-				let styles = {
-					transform: ''
-				}
-				this.modeClass.forEach((mode) => {
-					switch (mode) {
-						case 'fade':
-							styles.opacity = type ? 1 : 0
-							break;
-						case 'slide-top':
-							styles.transform += `translateY(${type?'0':'-100%'}) `
-							break;
-						case 'slide-right':
-							styles.transform += `translateX(${type?'0':'100%'}) `
-							break;
-						case 'slide-bottom':
-							styles.transform += `translateY(${type?'0':'100%'}) `
-							break;
-						case 'slide-left':
-							styles.transform += `translateX(${type?'0':'-100%'}) `
-							break;
-						case 'zoom-in':
-							styles.transform += `scale(${type?1:0.8}) `
-							break;
-						case 'zoom-out':
-							styles.transform += `scale(${type?1:1.2}) `
-							break;
-					}
-				})
-				return styles
-			},
-			_modeClassArr(type) {
-				let mode = this.modeClass
-				if (typeof(mode) !== "string") {
-					let modestr = ''
-					mode.forEach((item) => {
-						modestr += (item + '-' + type + ',')
-					})
-					return modestr.substr(0, modestr.length - 1)
-				} else {
-					return mode + '-' + type
-				}
-			},
-			// getEl(el) {
-			// 	console.log(el || el.ref || null);
-			// 	return el || el.ref || null
-			// },
-			toLine(name) {
-				return name.replace(/([A-Z])/g, "-$1").toLowerCase();
-			}
-		}
-	}
-</script>
-
-<style>
-	.uni-transition {
-		transition-timing-function: ease;
-		transition-duration: 0.3s;
-		transition-property: transform, opacity;
-	}
-
-	.fade-in {
-		opacity: 0;
-	}
-
-	.fade-active {
-		opacity: 1;
-	}
-
-	.slide-top-in {
-		/* transition-property: transform, opacity; */
-		transform: translateY(-100%);
-	}
-
-	.slide-top-active {
-		transform: translateY(0);
-		/* opacity: 1; */
-	}
-
-	.slide-right-in {
-		transform: translateX(100%);
-	}
-
-	.slide-right-active {
-		transform: translateX(0);
-	}
-
-	.slide-bottom-in {
-		transform: translateY(100%);
-	}
-
-	.slide-bottom-active {
-		transform: translateY(0);
-	}
-
-	.slide-left-in {
-		transform: translateX(-100%);
-	}
-
-	.slide-left-active {
-		transform: translateX(0);
-		opacity: 1;
-	}
-
-	.zoom-in-in {
-		transform: scale(0.8);
-	}
-
-	.zoom-out-active {
-		transform: scale(1);
-	}
-
-	.zoom-out-in {
-		transform: scale(1.2);
-	}
-</style>

pages/NoticeInfo/NoticeInfo.vue

@@ -104,7 +104,9 @@
 </script>
 
 <style scoped>
-
+.NoticeInfo{
+	 padding: 15rpx;
+}
 
 
 

pages/assignDeposit/assignDeposit.vue

 <template>
 	<view class="container">
-		<view class="contentBox">
+		<view class="contentBox" v-if="!depotMoneyother">
 			<!-- <image mode='widthFix' src="https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/images/xiaopaycard (31).png"></image> -->
 			<view class="contentDiv">
 				<view class="headview">
@@ -24,12 +24,14 @@
 			<view class="Recharge">
 				<view class="leftdiv">账户充值</view>
 				<view class="rightdiv">
-					<span>账户明细 ></span>
+					<span>账户明细 <span class="arrow"></span></span>
 				</view>
 			</view>
 			<!--  -->
 			<view class="MoneyBox">
-				<view class="depotMoney" :data-money="item.value" v-for="(item,index) in MoneyList" :key="index">
+				<view class="depotMoney" @click="depotMoney(item.value,index)"
+					v-bind:class="(Money!=''&&MoneyIndex==index)?'choiceClass':''" :data-money="item.value"
+					v-for="(item,index) in MoneyList" :key="index">
 					<span class="value">
 						{{item.value}}
 					</span>
@@ -40,16 +42,127 @@
 				</view>
 			</view>
 			<!--  -->
-			<view class="OtherMoney">
+			<view class="OtherMoney" @click="OtherMoney">
 				<view>其他充值金额</view>
-				<view>></view>
+				<view>></span></view>
 			</view>
 			<!-- 支付方式 -->
-			<view class="payType">
+			<view class="payType" @click="queryBindCardList">
 				<view>付款方式</view>
-				<view>招商银行(5947)</view>
+				<view>招商银行(5947) <span class="arrow"></span></view>
 			</view>
 			<view class="" style="height: 1rpx;background-color: #DFDFDF;"></view>
+			<!--  -->
+			<view class="switchbankCard" @click="BackToMini('AssignAddCard')">我要换银行卡支付 <span class="arrow"
+					style="transform: rotate(45deg);left: 15rpx;top: -8rpx;"></span></view>
+			<!-- 充值生活费 -->
+			<view class="DepositID" @click="toDeposit(0)" v-bind:style="Money!=''?'':'background: #e6e6e6 !important;'">
+				<span>充值生活费</span>
+			</view>
+		</view>
+		<!-- 其他充值金额 -->
+		<view class="contentBox" v-if="depotMoneyother">
+			<view class="OtherTitle">充值金额</view>
+			<view class="inputOtherM">
+				<span>￥</span>
+				<input @focus="openKeyBoard('number')" v-model="inputOtherM" @input="inputControl"
+					placeholder-class="placeholderinputOtherM" type="text" maxlength="6" />
+			</view>
+			<view class="OtherLine"></view>
+			<!-- 充值范围 -->
+			<view class="Recharge_">
+				<!-- <image mode="widthFix" class="depositImg" src="../../static/img/depositIcon.png"></image> -->
+				<span>最大可充值金额：</span>
+				<span>￥<span>3.00 ~ 2000.00</span></span>
+			</view>
+		</view>
+		<!-- 短信发送 -->
+		<uni-popup ref="popup" :mask-click="false">
+			<!-- 手机号验证 -->
+			<view class="PhoneConfirmBox MyPhoneCls">
+				<view class="closePhoneBox" @click="close()">
+					<span>x</span>
+				</view>
+				<p style='text-align:center;font-size:18px;font-weight:bold;margin-bottom:30px;'>验证开卡手机号</p>
+				<view class="PhoneNum">
+					<input type="number" disabled placeholder-class="placeholderInput" maxlength="11"
+						placeholder="请输入手机号" />
+				</view>
+				<view class="VerifyCode">
+					<input v-model="VerifyCode" placeholder-class="placeholderInput" type="number" maxlength="6"
+						placeholder="请输入验证码" />
+					<view class="CodeMsg" @click="SendMsg">获取验证码</view>
+				</view>
+				<button class="doBtnTx" @click="DoNextStep">充值</button>
+			</view>
+		</uni-popup>
+		<!-- 数字键盘 -->
+		<keyboard-package ref="number" @onInput="onInput" @onDelete="onDelete" @onConfirm="onConfirm"
+			:disableDot="false" />
+		<!-- 体现 -->
+		<view class="TxWalletBox">
+
+		</view>
+		<!-- 体现异常处理 -->
+		<view class="RechargeException" v-if="RechargeException">
+			<view class="tiptext">您在银行预留的身份信息已过期，请更新身份信息后再继续交易</view>
+			<view class="weui-form">
+				<view class="weui-form__control-area">
+					<view class="weui-cells__group weui-cells__group_form">
+						<view
+							class="weui-cell weui-cell_active weui-cell_access weui-cell_select weui-cell_select-after">
+							<view class="weui-cell__hd"><label class="weui-label">所属职业</label></view>
+							<view class="weui-cell__bd" id="showPicker"
+								style="color: #A1A4A8;text-align: center;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;padding-right: 30px;">
+								请选择职业类型</view>
+						</view>
+						<view
+							class="weui-cell weui-cell_active weui-cell_access weui-cell_select weui-cell_select-after"
+							id="showCityPicker3">
+							<view class="weui-cell__hd"><label class="weui-label" id="city3-label">家庭地址</label></view>
+							<view class="weui-cell__bd" id="homeAddress"
+								style="color: #A1A4A8;text-align: center;overflow: hidden;text-overflow: ellipsis; white-space: nowrap; padding-right: 30px;">
+								请选择家庭地址</view>
+						</view>
+						<view class="weui-cell weui-cell_active weui-cell_access ">
+							<view class="weui-cell__hd"><label class="weui-label">所在街道</label></view>
+							<view class="weui-cell__bd weui-flex">
+								<input class="weui-input" maxlength="30" style="text-align: right;padding-right: 17px;"
+									type="text" oninput="StreetInformation(this)" placeholder="请输入具体街道和门牌号">
+							</view>
+						</view>
+						<view class="weui-cell__hd">
+							<label class="weui-label">身份证照片</label>
+							<view class="idCardPhoto1" @click="idCardUpload('1')">
+								<image :src="tempFiles1" mode="aspectFill">
+								</image>
+								<view class="positionCam">
+									【点击可上传】
+								</view>
+							</view>
+							<view class="idCardPhoto2" @click="idCardUpload('2')">
+								<image :src="tempFiles2" mode="aspectFill">
+								</image>
+								<view class="positionCam">
+									【点击可上传】
+								</view>
+							</view>
+						</view>
+						<view class="bottomDetail" @click="UpdateRechargeException">
+							立即更新</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 充值异常弹框 -->
+		<view class="js_dialog" id="iosDialog2" style="display: none;">
+			<view class="weui-mask"></view>
+			<view class="weui-dialog">
+				<view class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</view>
+				<view class="weui-dialog__ft">
+					<a href="javascript:" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
+				</view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -57,8 +170,6 @@
 <script>
 	import keyboardPackage from "@/components/keyboard-package/keyboard-package.vue"
 	import cityData from "@/common/js/city.js"
-	console.log(cityData);
-
 	var gHost = "https://" + window.location.host;
 	if (window.location.protocol != "https:") {
 		gHost = "https://fpdev.xiaopay.net";
@@ -112,7 +223,11 @@
 		name: "assignDeposit",
 		data() {
 			return {
+				inputOtherM: '',
+				RechargeException: false,
+				depotMoneyother: false, //其他充值
 				Money: '', //选择金额
+				MoneyIndex: '',
 				RechargeMax: '2000', //最大充值限制
 				ReflectMoney: '', //提现金额
 				VerifyCode: '', //验证码
@@ -129,9 +244,12 @@
 					return {
 						lable: '元',
 						value: 50 * (index + 1),
-						tips: ""
+						tips: index == 1 ? "推荐充值" : null
 					}
-				})
+				}),
+				numberList: [],
+				tempFiles1: '../../static/img/idCardBg1.png', //上传身份证临时选择文件
+				tempFiles2: '../../static/img/idCardBg0.png'
 			}
 		},
 		created: function() {
@@ -142,14 +260,7 @@
 			this.$nextTick(function() {
 				// $(".RechargeException").siblings().hide()
 				// $(".RechargeException").show()
-				//快捷充值按钮
-				$('.depotMoney').click(function() {
-					console.log(this);
-					$(this).addClass('choiceClass');
-					$(this).siblings().removeClass('choiceClass');
-					$('.depositTx')[0].value = $(this)[0].innerHTML;
-					$('.DepositID').removeClass('DisaBledBtn');
-				})
+
 				// 家庭住址
 				$('#homeAddress').on('click', function() {
 					weui.picker(cityData, {
@@ -231,12 +342,54 @@
 			})
 		},
 		methods: {
+			// 身份证上传
+			async idCardUpload(type) {
+				let this_ = this
+				uni.chooseImage({
+					count: 6, //默认9
+					sizeType: ['original', 'compressed'],
+					sourceType: ['album', 'camera'], //从相册选择
+					success: function(res) {
+						this_['tempFiles' + type] = res.tempFilePaths[0]
+						this_.uploaderInput(res.tempFiles, type)
+					}
+				});
+			},
+			// 验证码弹出框开启
+			open() {
+				this.$refs.popup.open('top')
+			},
+			// 验证码弹出框关闭
+			close() {
+				this.$refs.popup.close()
+			},
+			//键盘谈起
 			openKeyBoard(key) {
 				this.type = key;
 				this.$refs[key].open();
 			},
-			async depotMoney(value) {
+			onInput(val) {
+				this.numberList.push(val);
+				this.inputOtherM = this.inputOtherM + val
+				console.log(val);
+			},
+			onDelete() {
+				this.numberList.pop()
+				this.inputOtherM = this.numberList.join("")
+			},
+			onConfirm() {
+				// 充值提现输入验证码确认框
+				this.open()
+			},
+			//选择输入其他金额
+			OtherMoney() {
+				this.depotMoneyother = true
+			},
+			// 快捷选择金额
+			async depotMoney(value, MoneyIndex) {
+				console.log(value)
 				this.Money = parseInt(value)
+				this.MoneyIndex = MoneyIndex
 			},
 			//定时器
 			IntervalFun() {
@@ -446,8 +599,8 @@
 						businessNo: businessNo,
 						otpOrderNo: otpOrderNo,
 						fromAccNo: payCardNumber, //付款账户
-						otpValue: $('.VerifyCode')[0].value, //验证码
-						transAmt: $('.depositTx')[0].value * 1, //交易金额
+						otpValue: this.VerifyCode, //验证码
+						transAmt: this.inputOtherM * 1, //交易金额
 						schoolId: bankInfo.schoolId,
 						userId: userID,
 						sessionid: sessionID,
@@ -555,7 +708,6 @@
 				otpOrderNo = '';
 				opeType = type;
 				if (type == 0) {
-					if ($('.DepositID').hasClass('DisaBledBtn'));
 					if (this.Money * 1 < 3) {
 						weui.topTips('充值金额必须大于3元');
 						return
@@ -564,7 +716,6 @@
 						weui.topTips(`充值金额不能大于${this.RechargeMax*1}元`);
 						return
 					}
-
 				} else {
 					if ($('.TxClsTx')[0].value * 1 < 0.01) {
 						weui.topTips('提现金额须大于等于0.01元');
@@ -576,7 +727,7 @@
 						return
 					}
 				}
-				$('.PhoneConfirmBox').css('display', 'block');
+				this.open()
 			},
 			//发送验证码
 			SendMsg() {
@@ -586,7 +737,7 @@
 				if (opeType == 0) { //充值
 					let params = {
 						fromAccNo: payCardNumber, //付款账户,
-						transAmt: $('.depositTx')[0].value * 1, //交易金额
+						transAmt: this.Money * 1, //交易金额
 						schoolId: bankInfo.schoolId,
 						userId: userID,
 						sessionid: sessionID,
@@ -911,20 +1062,13 @@
 			},
 			//点击上传文件
 			uploaderInput(e, CredType) {
-				let fileInfo = e.files[0];
+				let fileInfo = e[0];
 				let fileTypeList = fileInfo.name.split(".");
 				let fileType = fileTypeList[fileTypeList.length - 1];
 				if (!(fileType == "jpg" || fileType == "png")) {
 					weui.topTips("不符合的文件格式,请重新选择");
 					return;
 				}
-				let reads = new FileReader();
-				reads.readAsDataURL(fileInfo);
-				reads.onload = function(e) {
-					$(`.idCardPhoto${CredType}`).attr('src', this.result)
-				};
-				// console.log(fileInfo, fileType)
-				// console.log(wefileId);
 				let formData = new FormData();
 				formData.append("project", wefileId.project)
 				formData.append("file", fileInfo)
@@ -940,6 +1084,7 @@
 			// 【获取上传影像token接口】中已经返回了请求地址
 			UploadIDCardInfo(url, formData, type) {
 				let loading = weui.loading('请稍后,正在上传');
+				return new Promise((resolve, reject) => {
 					return new Promise((resolve, reject) => {
 						$.ajax({
 							url: gHost +
@@ -968,10 +1113,6 @@
 									loading.hide();
 									reject(res.message)
 								}
-							// setTimeout(function() {
-							// 	loading.hide();
-							// 	resolve(res)
-							// }, 3000)
 							},
 							error: function(err) {
 								loading.hide();
@@ -980,6 +1121,7 @@
 							},
 						})
 					})
+				})
 			},
 			getWefileId(fileType = 'jpg/png/jpeg') {
 				let loading = weui.loading('请稍后');
@@ -1068,9 +1210,10 @@
 </script>
 
 <style scoped lang="scss">
+	html,
+	body,
 	page {
 		width: 750rpx;
-		height: 1470rpx;
 		background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
 	}
 
@@ -1212,12 +1355,10 @@
 		font-weight: 500;
 		padding: 4rpx;
 		text-align: center;
-		z-index: 99999;
 		float: right;
 		position: absolute;
-		right: 10rpx;
-
-
+		right: 0rpx;
+		line-height: 33rpx;
 	}
 
 	.OtherMoney {
@@ -1258,7 +1399,7 @@
 		font-family: PingFangSC-Regular, PingFang SC;
 		font-weight: 400;
 		color: #666666;
-		line-height: 42rpx;
+		line-height: 98rpx;
 	}
 
 	.payType view::nth-child(2) {
@@ -1270,4 +1411,293 @@
 		color: #333333;
 		line-height: 45rpx;
 	}
+
+	.switchbankCard {
+		width: 224px;
+		height: 40rpx;
+		font-size: 28rpx;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #999999;
+		line-height: 40rpx;
+		margin-top: 12rpx;
+	}
+
+	.arrow {
+		transform: rotate(-45deg);
+		top: -1rpx;
+		border: solid #999999;
+		border-width: 0 1rpx 1rpx 0;
+		display: inline-block;
+		padding: 8rpx;
+		position: relative;
+
+	}
+
+	.DepositID {
+		width: 630rpx;
+		height: 92rpx;
+		background: #04BA73;
+		border-radius: 8rpx;
+		margin: 0 auto;
+		text-align: center;
+
+		bottom: 30rpx;
+		position: fixed;
+		left: 0;
+		right: 0;
+	}
+
+	.DepositID span {
+		height: 50rpx;
+		font-size: 36rpx;
+		font-family: PingFangSC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #FFFFFF;
+		line-height: 92rpx;
+	}
+
+	.MyPhoneCls {
+		position: fixed;
+		width: 562rpx;
+		height: 497rpx;
+		left: 0;
+		right: 0;
+		top: 460rpx;
+		margin: 0 auto;
+		font-size: 30rpx;
+		background: #fff;
+		border-radius: 8rpx;
+	}
+
+	.closePhoneBox {
+		width: 35rpx;
+		height: 35rpx;
+		background: #7E7E7E;
+		position: relative;
+		left: 522rpx;
+		top: -52rpx;
+		line-height: 30rpx;
+		text-align: center;
+		color: #BEBEBE;
+		border-radius: 100%;
+		border: 2px solid #BEBEBE;
+	}
+
+	.doBtnTx {
+		width: 506rpx;
+		height: 92rpx;
+		background: #04BA73;
+		border-radius: 8rpx;
+		color: #FFFFFF;
+
+		position: absolute;
+		left: 0;
+		right: 0;
+		margin: 0 auto;
+		bottom: 38rpx;
+	}
+
+	.MyPhoneCls input {
+		border: none;
+		outline: none;
+		height: 80rpx;
+		line-height: 80rpx;
+		padding-left: 50rpx;
+	}
+
+	.PhoneNum,
+	.VerifyCode {
+		width: 506rpx;
+		height: 80rpx;
+		line-height: 60rpx;
+		background: #F7F6FB;
+		margin: 0 auto;
+		margin-top: 20rpx;
+	}
+
+	.VerifyCode {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.VerifyCode input {
+		width: 200rpx;
+	}
+
+	.CodeMsg {
+		color: #01BC73;
+		background: #F7F6FB;
+		font-size: 32rpx;
+		font-weight: 600;
+		line-height: 80rpx;
+		letter-spacing: 3rpx;
+	}
+
+	.placeholderInput {
+		color: #AAAAAA;
+		font-size: 32rpx;
+		font-weight: 500;
+		letter-spacing: 3rpx;
+		// padding-left: 50rpx;
+		height: 80rpx;
+	}
+
+	.OtherTitle {
+		height: 67rpx;
+		font-size: 48rpx;
+		font-family: PingFangSC-Semibold, PingFang SC;
+		font-weight: 600;
+		color: #010101;
+		line-height: 67rpx;
+
+		padding-top: 60rpx;
+	}
+
+	.inputOtherM {
+		display: flex;
+		height: 100rpx;
+		margin-top: 40rpx;
+	}
+
+	.inputOtherM input {
+		border: none;
+		outline: none;
+		height: 50rpx;
+		padding-left: 16rpx;
+		font-size: 72rpx;
+		font-weight: 600;
+	}
+
+	.inputOtherM span:nth-child(1) {
+		width: 72rpx;
+		font-size: 80rpx;
+		font-family: PingFangSC-Semibold, PingFang SC;
+		font-weight: 600;
+		color: #010101;
+		line-height: 100rpx;
+	}
+
+	.OtherLine {
+		width: 631rpx;
+		height: 1rpx;
+		background-color: #CCCCCC;
+		margin-top: 19rpx;
+	}
+
+	.depositImg {
+		width: 14rpx;
+		vertical-align: middle;
+		margin-right: 8rpx;
+	}
+
+	.Recharge_ {
+		height: 40rpx;
+		font-size: 28rpx;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #333333;
+		line-height: 40rpx;
+		margin-top: 40rpx;
+	}
+
+	.Recharge_ span:nth-child(2) {
+		font-size: 28rpx;
+		font-family: PingFangSC-Semibold, PingFang SC;
+		font-weight: 600;
+		color: #FA6400;
+	}
+
+	.placeholderinputOtherM {
+		height: 50rpx;
+		font-family: PingFangSC-Semibold, PingFang SC;
+		font-weight: 600;
+		color: #010101;
+		line-height: 50rpx;
+	}
+
+	// 异常处理
+	.RechargeException {
+		padding-top: 20rpx;
+	}
+
+	.weui-label {
+		// width: 118rpx;
+		height: 42rpx;
+		font-size: 30rpx;
+		font-family: PingFangSC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #3D3D3D;
+		line-height: 42rpx;
+		font-weight: bold;
+		margin-left: 30rpx;
+	}
+
+	.tiptext {
+		height: 1.06rem;
+		font-size: 0.75rem;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #03BC73;
+		line-height: 1.06rem;
+		margin-bottom: 0.625rem;
+		text-align: center;
+	}
+
+	.bottomDetail {
+		width: 628rpx;
+		height: 88rpx;
+		color: white;
+		// position: fixed;
+		// left: 0;
+		// right: 0;
+		margin: 0 auto;
+		background-color: #03BC73;
+		text-align: center;
+		line-height: 88rpx;
+
+
+		margin-top: 84rpx;
+	}
+
+
+	.RechargeException input::placeholder {
+		color: #A1A4A8;
+	}
+
+	.RechargeException .weui-cell {
+		height: 4rem;
+		padding: 0 !important;
+	}
+
+	.idCardPhoto1,
+	.idCardPhoto2 {
+		width: 388rpx;
+		height: 224rpx;
+		margin: 0 auto;
+		margin-top: 20rpx;
+	}
+
+	.idCardPhoto1 image,
+	.idCardPhoto2 image {
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+
+	.weui-toptips_success {
+		background-color: #03BC73 !important
+	}
+
+	.positionCam {
+		height: 32rpx;
+		font-size: 22rpx;
+		font-family: PingFang-SC-Medium, PingFang-SC;
+		font-weight: 500;
+		color: #6D7278;
+		line-height: 32rpx;
+		text-align: center;
+		position: relative;
+		top: -29px;
+	}
 </style>

uni_modules/uni-popup/changelog.md

+## 1.4.2（2021-05-12）
+- 新增 组件示例地址
+## 1.4.1（2021-04-29）
+- 修复 组件内放置 input 、textarea 组件，无法聚焦的问题
+## 1.4.0 （2021-04-29）
+- 新增 type 属性的 left\right 值，支持左右弹出
+- 新增 open(String:type) 方法参数 ，可以省略 type 属性 ，直接传入类型打开指定弹窗
+- 新增 backgroundColor 属性，可定义主窗口背景色,默认不显示背景色
+- 新增 safeArea 属性，是否适配底部安全区
+- 修复 App\h5\微信小程序底部安全区占位不对的Bug
+- 修复 App 端弹出等待的Bug
+- 优化 提升低配设备性能，优化动画卡顿问题
+- 优化 更简单的组件自定义方式
+## 1.4.0 
+- 新增 type 属性的 left\right 值，支持左右弹出
+- 新增 open(String:type) 方法参数 ，可以省略 type 属性 ，直接传入类型打开指定弹窗
+- 新增 backgroundColor 属性，可定义主窗口背景色,默认不显示背景色
+- 新增 safeArea 属性，是否适配底部安全区
+- 修复 App\h5\微信小程序底部安全区占位不对的Bug
+- 修复 App 端弹出等待的Bug
+- 优化 提升低配设备性能，优化动画卡顿问题
+- 优化 更简单的组件自定义方式
+
+## 1.2.9（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+## 1.2.8（2021-02-05）
+- 调整为uni_modules目录规范
+## 1.2.7（2021-02-05）
+- 调整为uni_modules目录规范
+- 新增 支持 PC 端
+- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端

uni_modules/uni-popup/components/uni-popup-dialog/keypress.js

+// #ifdef H5
+export default {
+  name: 'Keypress',
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    const keyNames = {
+      esc: ['Esc', 'Escape'],
+      tab: 'Tab',
+      enter: 'Enter',
+      space: [' ', 'Spacebar'],
+      up: ['Up', 'ArrowUp'],
+      left: ['Left', 'ArrowLeft'],
+      right: ['Right', 'ArrowRight'],
+      down: ['Down', 'ArrowDown'],
+      delete: ['Backspace', 'Delete', 'Del']
+    }
+    const listener = ($event) => {
+      if (this.disable) {
+        return
+      }
+      const keyName = Object.keys(keyNames).find(key => {
+        const keyName = $event.key
+        const value = keyNames[key]
+        return value === keyName || (Array.isArray(value) && value.includes(keyName))
+      })
+      if (keyName) {
+        // 避免和其他按键事件冲突
+        setTimeout(() => {
+          this.$emit(keyName, {})
+        }, 0)
+      }
+    }
+    document.addEventListener('keyup', listener)
+    this.$once('hook:beforeDestroy', () => {
+      document.removeEventListener('keyup', listener)
+    })
+  },
+	render: () => {}
+}
+// #endif

components/uni-popup/uni-popup-dialog.vue → uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue

@@ -3,12 +3,18 @@
 		<view class="uni-dialog-title">
 			<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{title}}</text>
 		</view>
-		<view class="uni-dialog-content">
-			<text class="uni-dialog-content-text" v-if="mode === 'base'">{{content}}</text>
-			<input v-else class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholder" :focus="focus" >
+		<view v-if="mode === 'base'" class="uni-dialog-content">
+			<slot>
+				<text class="uni-dialog-content-text">{{content}}</text>
+			</slot>
+		</view>
+		<view v-else class="uni-dialog-content">
+			<slot>
+				<input class="uni-dialog-input" v-model="val" type="text" :placeholder="placeholder" :focus="focus" >
+			</slot>
 		</view>
 		<view class="uni-dialog-button-group">
-			<view class="uni-dialog-button" @click="close">
+			<view class="uni-dialog-button" @click="closeDialog">
 				<text class="uni-dialog-button-text">取消</text>
 			</view>
 			<view class="uni-dialog-button uni-border-left" @click="onOk">
@@ -20,6 +26,7 @@
 </template>
 
 <script>
+	import popup from '../uni-popup/popup.js'
 	/**
 	 * PopUp 弹出层-对话框样式
 	 * @description 弹出层-对话框样式
@@ -42,6 +49,7 @@
 
 	export default {
 		name: "uniPopupDialog",
+		mixins: [popup],
 		props: {
 			value: {
 				type: [String, Number],
@@ -51,37 +59,22 @@
 				type: [String, Number],
 				default: '请输入内容'
 			},
-			/**
-			 * 对话框主题 success/warning/info/error	  默认 success
-			 */
 			type: {
 				type: String,
 				default: 'error'
 			},
-			/**
-			 * 对话框模式 base/input
-			 */
 			mode: {
 				type: String,
 				default: 'base'
 			},
-			/**
-			 * 对话框标题
-			 */
 			title: {
 				type: String,
 				default: '提示'
 			},
-			/**
-			 * 对话框内容
-			 */
 			content: {
 				type: String,
 				default: ''
 			},
-			/**
-			 * 拦截取消事件 ，如果拦截取消事件，必须监听close事件，执行 done()
-			 */
 			beforeClose: {
 				type: Boolean,
 				default: false
@@ -94,7 +87,6 @@
 				val: ""
 			}
 		},
-		inject: ['popup'],
 		watch: {
 			type(val) {
 				this.dialogType = val
@@ -110,7 +102,8 @@
 		},
 		created() {
 			// 对话框遮罩不可点击
-			this.popup.mkclick = false
+			this.popup.disableMask()
+			// this.popup.closeMask()
 			if (this.mode === 'input') {
 				this.dialogType = 'info'
 				this.val = this.value
@@ -126,21 +119,23 @@
 			 * 点击确认按钮
 			 */
 			onOk() {
-				this.$emit('confirm', () => {
+				if (this.mode === 'input'){
+					this.$emit('confirm', this.val)
+				}else{
+					this.$emit('confirm')
+				}
+				if(this.beforeClose) return
 				this.popup.close()
-					if (this.mode === 'input') this.val = this.value
-				}, this.mode === 'input' ? this.val : '')
 			},
 			/**
 			 * 点击取消按钮
 			 */
-			close() {
-				if (this.beforeClose) {
-					this.$emit('close', () => {
+			closeDialog() {
+				this.$emit('close')
+				if(this.beforeClose) return
 				this.popup.close()
-					})
-					return
-				}
+			},
+			close(){
 				this.popup.close()
 			}
 		}
@@ -217,24 +212,29 @@
 	}
 
 	.uni-button-color {
-		color: $uni-color-primary;
+		color: #007aff;
 	}
 
 	.uni-dialog-input {
 		flex: 1;
 		font-size: 14px;
+		border: 1px #eee solid;
+		height: 40px;
+		padding: 0 10px;
+		border-radius: 5px;
+		color: #555;
 	}
 
 	.uni-popup__success {
-		color: $uni-color-success;
+		color: #4cd964;
 	}
 
 	.uni-popup__warn {
-		color: $uni-color-warning;
+		color: #f0ad4e;
 	}
 
 	.uni-popup__error {
-		color: $uni-color-error;
+		color: #dd524d;
 	}
 
 	.uni-popup__info {

components/uni-popup/uni-popup-message.vue → uni_modules/uni-popup/components/uni-popup-message/uni-popup-message.vue

 <template>
-	<view class="uni-popup-message" :class="'uni-popup__'+[type]">
-		<text class="uni-popup-message-text" :class="'uni-popup__'+[type]+'-text'">{{message}}</text>
+	<view class="uni-popup-message">
+		<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
+			<slot>
+				<text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
+			</slot>
+		</view>
 	</view>
 </template>
 
 <script>
-	
+	import popup from '../uni-popup/popup.js'
 	/**
 	 * PopUp 弹出层-消息提示
 	 * @description 弹出层-消息提示
@@ -20,7 +24,8 @@
 	 */
 
 	export default {
-		name: 'UniPopupMessage',
+		name: 'uniPopupMessage',
+		mixins:[popup],
 		props: {
 			/**
 			 * 主题 success/warning/info/error	  默认 success
@@ -42,25 +47,26 @@
 			duration: {
 				type: Number,
 				default: 3000
+			},
+			maskShow:{
+				type:Boolean,
+				default:false
 			}
 		},
-		inject: ['popup'],
 		data() {
 			return {}
 		},
 		created() {
-			this.popup.childrenMsg = this
+			this.popup.maskShow = this.maskShow
+			this.popup.messageChild = this
 		},
 		methods: {
-			open() {
-				if (this.duration === 0) return
-				clearTimeout(this.popuptimer)
-				this.popuptimer = setTimeout(() => {
+			timerClose(){
+				if(this.duration === 0) return
+				clearTimeout(this.timer) 
+				this.timer = setTimeout(()=>{
 					this.popup.close()
-				}, this.duration)
-			},
-			close() {
-				clearTimeout(this.popuptimer)
+				},this.duration)
 			}
 		}
 	}
@@ -71,12 +77,33 @@
 		display: flex;
 		/* #endif */
 		flex-direction: row;
+		justify-content: center;
+	}
+
+	.uni-popup-message__box {
 		background-color: #e1f3d8;
 		padding: 10px 15px;
 		border-color: #eee;
 		border-style: solid;
 		border-width: 1px;
+		flex: 1;
 	}
+
+	@media screen and (min-width: 500px) {
+		.fixforpc-width {
+			margin-top: 20px;
+			border-radius: 4px;
+			flex: none;
+			min-width: 380px;
+			/* #ifndef APP-NVUE */
+			max-width: 50%;
+			/* #endif */
+			/* #ifdef APP-NVUE */
+			max-width: 500px;
+			/* #endif */
+		}
+	}
+
 	.uni-popup-message-text {
 		font-size: 14px;
 		padding: 0;

components/uni-popup/uni-popup-share.vue → uni_modules/uni-popup/components/uni-popup-share/uni-popup-share.vue

@@ -17,45 +17,50 @@
 </template>
 
 <script>
+	import popup from '../uni-popup/popup.js'
 	export default {
 		name: 'UniPopupShare',
+		mixins:[popup],
 		props: {
 			title: {
 				type: String,
 				default: '分享到'
+			},
+			beforeClose: {
+				type: Boolean,
+				default: false
 			}
 		},
-		inject: ['popup'],
 		data() {
 			return {
 				bottomData: [{
 						text: '微信',
-						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-2.png',
+						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
 						name: 'wx'
 					},
 					{
 						text: '支付宝',
-						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-8.png',
+						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
 						name: 'wx'
 					},
 					{
 						text: 'QQ',
-						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/gird-3.png',
+						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
 						name: 'qq'
 					},
 					{
 						text: '新浪',
-						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-1.png',
+						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
 						name: 'sina'
 					},
 					{
 						text: '百度',
-						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-7.png',
+						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
 						name: 'copy'
 					},
 					{
 						text: '其他',
-						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-5.png',
+						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
 						name: 'more'
 					}
 				]
@@ -70,14 +75,15 @@
 				this.$emit('select', {
 					item,
 					index
-				}, () => {
-					this.popup.close()
 				})
+				this.close()
+				
 			},
 			/**
 			 * 关闭窗口
 			 */
 			close() {
+				if(this.beforeClose) return
 				this.popup.close()
 			}
 		}

uni_modules/uni-popup/components/uni-popup/keypress.js

+// #ifdef H5
+export default {
+  name: 'Keypress',
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    const keyNames = {
+      esc: ['Esc', 'Escape'],
+      tab: 'Tab',
+      enter: 'Enter',
+      space: [' ', 'Spacebar'],
+      up: ['Up', 'ArrowUp'],
+      left: ['Left', 'ArrowLeft'],
+      right: ['Right', 'ArrowRight'],
+      down: ['Down', 'ArrowDown'],
+      delete: ['Backspace', 'Delete', 'Del']
+    }
+    const listener = ($event) => {
+      if (this.disable) {
+        return
+      }
+      const keyName = Object.keys(keyNames).find(key => {
+        const keyName = $event.key
+        const value = keyNames[key]
+        return value === keyName || (Array.isArray(value) && value.includes(keyName))
+      })
+      if (keyName) {
+        // 避免和其他按键事件冲突
+        setTimeout(() => {
+          this.$emit(keyName, {})
+        }, 0)
+      }
+    }
+    document.addEventListener('keyup', listener)
+    this.$once('hook:beforeDestroy', () => {
+      document.removeEventListener('keyup', listener)
+    })
+  },
+	render: () => {}
+}
+// #endif

uni_modules/uni-popup/components/uni-popup/popup.js

+
+export default {
+	data() {
+		return {
+			
+		}
+	},
+	created(){
+		this.popup = this.getParent()
+	},
+	methods:{
+		/**
+		 * 获取父元素实例
+		 */
+		getParent(name = 'uniPopup') {
+			let parent = this.$parent;
+			let parentName = parent.$options.name;
+			while (parentName !== name) {
+				parent = parent.$parent;
+				if (!parent) return false
+				parentName = parent.$options.name;
+			}
+			return parent;
+		},
+	}
+}

uni_modules/uni-popup/components/uni-popup/uni-popup.vue

+<template>
+	<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']" @touchmove.stop.prevent="clear">
+		<view @touchstart="touchstart" >
+				<uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass" :duration="duration" :show="showTrans" @click="onTap" />
+		</view>
+	
+		<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>
+		<!-- #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 = [ture|false] 是否开启动画
+ * @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
+ * @property {String}  backgroundColor 					主窗口背景色
+ * @property {Boolean} safeArea									是否适配底部安全区
+ * @event {Function} change 打开关闭弹窗触发，e={show: false}
+ */
+
+export default {
+	name: 'uniPopup',
+	components: {
+		// #ifdef H5
+		keypress
+		// #endif
+	},
+	props: {
+		// 开启动画
+		animation: {
+			type: Boolean,
+			default: true
+		},
+		// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
+		// message: 消息提示 ; dialog : 对话框
+		type: {
+			type: String,
+			default: 'center'
+		},
+		// maskClick
+		maskClick: {
+			type: Boolean,
+			default: true
+		},
+		backgroundColor: {
+			type: String,
+			default: 'none'
+		},
+		safeArea:{
+			type: Boolean,
+			default: true
+		}
+	},
+
+	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
+		},
+		safeArea: {
+			type: Boolean,
+			default: true
+		}
+	},
+	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, safeAreaInsets } = uni.getSystemInfoSync()
+			this.popupWidth = windowWidth
+			this.popupHeight = windowHeight + windowTop
+			// 是否适配底部安全区
+			if(this.safeArea){
+				this.safeAreaInsets = safeAreaInsets
+			}else{
+				this.safeAreaInsets = 0
+			}
+		}
+		fixSize()
+		// #ifdef H5
+		window.addEventListener('resize', fixSize)
+		this.$once('hook:beforeDestroy', () => {
+			window.removeEventListener('resize', fixSize)
+		})
+		// #endif
+	},
+	created() {
+		this.mkclick = this.maskClick
+		if (this.animation) {
+			this.duration = 300
+		} else {
+			this.duration = 0
+		}
+		// TODO 处理 message 组件生命周期异常的问题
+		this.messageChild = null
+		// TODO 解决头条冒泡的问题
+		this.clearPropagation = false
+	},
+	methods: {
+		/**
+		 * 公用方法，不显示遮罩层
+		 */
+		closeMask() {
+			this.maskShow = false
+		},
+		/**
+		 * 公用方法，遮罩层禁止点击
+		 */
+		disableMask() {
+			this.mkclick = false
+		},
+		// TODO nvue 取消冒泡
+		clear(e) {
+			// #ifndef APP-NVUE
+			e.stopPropagation()
+			// #endif
+			this.clearPropagation = true
+		},
+		
+		open(direction) {
+			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) return
+			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 && this.safeAreaInsets.bottom) || 0,
+				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" scoped>
+.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>

uni_modules/uni-popup/package.json

+{
+  "id": "uni-popup",
+  "displayName": "uni-popup 弹出层",
+  "version": "1.4.2",
+  "description": " Popup 组件，提供常用的弹层",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "弹出层"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+      "uni-transition"
+    ],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

uni_modules/uni-popup/readme.md

+
+
+## Popup 弹出层
+> **组件名：uni-popup**
+> 代码块： `uPopup`
+> 关联组件：`uni-popup-dialog`,`uni-popup-message`,`uni-popup-share`,`uni-transition`
+
+
+弹出层组件，在应用中弹出一个消息提示窗口、提示框等
+
+
+> **注意事项**
+> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
+> - 组件需要依赖 `sass` 插件 ，请自行手动安装
+> - `uni-popup-message` 、 `uni-popup-dialog` 等扩展ui组件，需要和 `uni-popup` 配套使用，暂不支持单独使用
+> - `nvue` 中使用 `uni-popup` 时，尽量将组件置于其他元素后面，避免出现层级问题
+> - `uni-popup` 并不能完全阻止页面滚动，可在打开 `uni-popup` 的时候手动去做一些处理，禁止页面滚动
+> - 如果想在页面渲染完毕后就打开 `uni-popup` ，请在 `onReady` 或 `mounted` 生命周期内调用，确保组件渲染完毕
+> - 在微信小程序开发者工具中，启用真机调试，popup 会延时出现，是因为 setTimeout 在真机调试中的延时问题导致的，预览和发布小程序不会出现此问题
+> - 使用 `npm` 方式引入组件，如果确认引用正确，但是提示未注册组件或显示不正常，请尝试重新编译项目
+> - `uni-popup` 中尽量不要使用 `scroll-view` 嵌套过多的内容，可能会影响组件的性能，导致组件无法打开或者打开卡顿
+> - `uni-popup` 不会覆盖原生 tabbar 和原生导航栏
+> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
+
+
+
+### 安装方式
+
+本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
+
+如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
+
+
+### 基本用法 
+
+**示例**
+
+```html
+<button @click="open">打开弹窗</button>
+<uni-popup ref="popup" type="bottom">底部弹出 Popup</uni-popup>
+```
+
+```javascript
+export default {
+   methods:{
+      open(){
+        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
+        this.$refs.popup.open('top')
+      }
+   }
+}
+
+```
+
+### 设置主窗口背景色
+
+在大多数场景下，并不需要设置 `background-color` 属性，因为`uni-popup`的主窗口默认是透明的，在向里面插入内容的时候 ，样式完全交由用户定制，如果设置了背景色 ，例如 `uni-popup-dialog` 中的圆角就很难去实现，不设置背景色，更适合用户去自由发挥。
+
+而也有特例，需要我们主动去设置背景色，例如 `type = 'bottom'` 的时候 ，在异型屏中遇到了底部安全区问题（如 iphone 11），因为 `uni-popup`的主要内容避开了安全区（设置`safe-area:true`），导致底部的颜色我们无法自定义，这时候使用 `background-color` 就可以解决这个问题。 
+
+**示例**
+
+```html
+<button @click="open">打开弹窗</button>
+<uni-popup ref="popup" type="bottom" background-color="#fff">底部弹出 Popup</uni-popup>
+```
+
+### 禁用打开动画
+在某些场景 ，可能不希望弹层有动画效果 ，只需要将 `animation` 属性设置为 `false` 即可以关闭动画。
+
+**示例**
+
+```html
+<button @click="open">打开弹窗</button>
+<uni-popup ref="popup" type="center" :animation="false">中间弹出 Popup</uni-popup>
+```
+
+### 禁用点击遮罩关闭
+默认情况下，点击遮罩会自动关闭`uni-popup`，如不想点击关闭，只需将`mask-click`设置为`false`，这时候要关闭`uni-popup`，只能手动调用 `close` 方法。
+
+**示例**
+
+```html
+<button @click="open">打开弹窗</button>
+<uni-popup ref="popup" :mask-click="false">
+	<text>Popup</text>
+	<button @click="close">关闭</button>
+</uni-popup>
+```
+
+```javascript
+export default {
+	data() {
+		return {}
+	},
+	onReady() {},
+	methods: {
+		open() {
+			this.$refs.popup.open('top')
+		},
+		close() {
+			this.$refs.popup.close()
+		}
+	}
+}
+
+```
+
+## API
+
+### Popup Props 
+
+|属性名|类型|默认值|说明|
+|:-:|:-:|:-:|:-:|
+|animation|Boolean|true|是否开启动画|
+|type|String|'center'|弹出方式|
+|mask-click|Boolean|true|蒙版点击是否关闭弹窗|
+|background-color|String|'none'|主窗口背景色|
+|safe-area|Boolean|true|是否适配底部安全区|
+
+#### Type Options
+
+|属性名|说明|
+|:-:| :-:|
+|top|顶部弹出	|
+|center|居中弹出|
+|bottom|底部弹出|
+|left|左侧弹出|
+|right|右侧弹出|
+|message|预置样式 ：消息提示|
+|dialog|预置样式 ：对话框|
+|share|预置样式 ：底部弹出分享示例	|
+
+
+### Popup Methods
+
+|方法称名	|说明|参数|
+|:-:|:-:|:-:|
+|open|打开弹出层|open(String:type) ，如果参数可代替 type 属性|
+|close|关闭弹出层	|-|
+
+
+### Popup Events
+
+|事件称名|说明|返回值|
+|:-:|:-:|:-:|
+|change|组件状态发生变化触发|e={show: true｜false,type:当前模式}|
+
+
+## 扩展组件说明
+`uni-popup` 其实并没有任何样式，只提供基础的动画效果，给用户一个弹出层解决方案，仅仅是这样并不能满足开发需求，所以我们提供了三种基础扩展样式
+
+### uni-popup-message 提示信息
+
+将 `uni-popup` 的`type`属性改为 `message`，并引入对应组件即可使用消息提示 ，*该组件不支持单独使用*
+
+**示例**
+
+```html
+<uni-popup ref="popup" type="message">
+	<uni-popup-message type="success" message="成功消息" :duration="2000"></uni-popup-message>
+</uni-popup>
+```
+
+### PopupMessage Props
+
+|属性名|类型|默认值|说明|
+|:-:|:-:|:-:|:-:|
+|type|String|success|消息提示主题|
+|message|String|-|消息提示文字|
+|duration|Number|3000|消息显示时间，超过显示时间组件自动关闭，设置为0 将不会关闭，需手动调用 close 方法关闭|
+
+#### Type Options
+
+|属性名|说明|
+|:-:| :-:|
+|success|成功	|
+|warn|警告|
+|error|失败|
+|info|消息|
+
+### PopupMessage Slots
+
+|名称|说明|					
+|:-:|:-:|						
+|default|消息内容，会覆盖 message 属性|
+
+### uni-popup-dialog 对话框
+
+将 `uni-popup` 的`type`属性改为 `dialog`，并引入对应组件即可使用对话框 ，*该组件不支持单独使用*
+
+**示例**
+
+```html
+<button @click="open">打开弹窗</button>
+<uni-popup ref="popup" type="dialog">
+	<uni-popup-dialog mode="input" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
+</uni-popup>
+```
+
+```javascript
+export default {
+	methods: {
+		open() {
+			this.$refs.popup.open()
+		},
+		/**
+		 * 点击取消按钮触发
+		 * @param {Object} done
+		 */
+		close() {
+			// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
+			// ...
+			this.$refs.popup.close()
+		},
+		/**
+		 * 点击确认按钮触发
+		 * @param {Object} done
+		 * @param {Object} value
+		 */
+		confirm(value) {
+			// 输入框的值
+			console.log(value)
+			// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
+			// ...
+			this.$refs.popup.close()
+		}
+	}
+}
+```
+
+### PopupDialog Props
+
+|属性名|类型|默认值|说明|
+|:-:|:-:|:-:|:-:|
+|type|String|success|对话框标题主题，可选值： success/warn/info/error|
+|mode|String|base| 对话框模式，可选值：base（提示对话框）/input（可输入对话框）|
+|title|String|-|对话框标题|
+|content|String|-|对话框内容，base模式下生效|
+|value| String\Number|-|输入框默认值，input模式下生效|
+|placeholder|String|-|输入框提示文字，input模式下生效|
+|before-close|Boolean|false	| 是否拦截按钮事件，如为true，则不会关闭对话框，关闭需要手动执行 uni-popup 的 close 方法|
+
+#### PopupDialog Events
+
+|事件称名	|说明|返回值|
+|:-:|:-:|:-:|
+|close|点击dialog取消按钮触发|-|
+|confirm|点击dialog确定按钮触发|e={value:input模式下输入框的值}|
+
+### PopupDialog Slots
+
+|名称|说明|					
+|:-:|:-:|						
+|default|自定义内容，回覆盖原有的内容显示|
+
+### uni-popup-share 分享示例
+
+分享示例，不作为最终可使用的组件，只做为样式组件，供用户自行修改，`后续的开发计划是实现实际的分享逻辑，参数可配置`。
+
+将 `uni-popup` 的 `type` 属性改为 `share`，并引入对应组件即可使用 ，*该组件不支持单独使用*
+
+**示例**
+
+```html
+<uni-popup ref="popup" type="share">
+	<uni-popup-share title="分享到" @select="select"></uni-popup-share>
+</uni-popup>
+```
+
+### PopupShare Props
+
+|属性名|类型|默认值|说明|
+|:-:|:-:|:-:| :-:			|
+|title|String|-|分享弹窗标题|
+|before-close|Boolean|false	| 是否拦截按钮事件，如为true，则不会关闭对话框，关闭需要手动执行 uni-popup 的 close 方法|
+
+### PopupShare Events
+
+|事件称名|说明|返回值|
+|:-:|:-:|:-:|
+|select|选择触发|e = {item,index}：所选参数|
+
+**Tips**
+- share 分享组件，只是作为一个扩展示例，如果需要修改数据源，请到组件内修改
+
+## 帮助
+在使用中如遇到无法解决的问题，请提 [Issues](https://github.com/dcloudio/uni-ui/issues) 给我们。
+
+
+
+## 组件示例
+
+点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/popup/popup](https://hellouniapp.dcloud.net.cn/pages/extUI/popup/popup)
\ No newline at end of file

uni_modules/uni-transition/changelog.md

+## 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目录规范

uni_modules/uni-transition/components/uni-transition/createAnimation.js

+// 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 = ''
+			}
+			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
+		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
+		}
+	}
+
+	step(config = {}) {
+		// #ifndef 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) {
+		// #ifndef APP-NVUE
+		this.$.animationData = this.animation.export()
+		this.$.timer = setTimeout(() => {
+			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) {
+		// #ifndef APP-NVUE
+		this.animation[type](...args)
+		// #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)
+}

uni_modules/uni-transition/components/uni-transition/uni-transition.vue

+<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',
+	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))
+		},
+		/**
+		 * 点击组件触发回调
+		 */
+		onClick() {
+			this.$emit('click', {
+				detail: this.isShow
+			})
+		},
+		/**
+		 * ref 触发 动画分组
+		 * @param {Object} obj
+		 */
+		step(obj, config = {}) {
+			if (!this.animation) return
+			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} 不存在`)
+				}
+			}
+			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>
+
+<style></style>

uni_modules/uni-transition/package.json

+{
+  "id": "uni-transition",
+  "displayName": "uni-transition 过渡动画",
+  "version": "1.1.1",
+  "description": "元素的简单过渡动画",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "动画",
+    "过渡",
+    "过渡动画"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

uni_modules/uni-transition/readme.md

+
+
+## Transition 过渡动画
+> **组件名：uni-transition**
+> 代码块： `uTransition`
+
+
+元素过渡动画
+
+> **注意事项**
+> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
+> - 组件需要依赖 `sass` 插件 ，请自行手动安装
+> - rotate 旋转动画不需要填写 deg 单位，在小程序上填写单位动画不会执行
+> - NVUE 下修改宽高动画，不能定位到中心点
+> - 百度小程序下修改宽高 ，可能会影响其他动画，需注意
+> - nvue 不支持 costom-class , 请使用 styles
+> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
+
+
+### 安装方式
+
+本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。
+
+如需通过`npm`方式使用`uni-ui`组件，另见文档：[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)
+
+### 基本用法
+
+在 ``template`` 中使用组件
+
+```html
+<template>
+	<view>
+		<button type="primary" @click="open">fade</button>
+		<uni-transition mode-class="fade" :styles="{'width':'100px','height':'100px','backgroundColor':'red'}" :show="show" @change="change" />
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			show: false,
+		}
+	},
+	onLoad() {},
+	methods: {
+		open(mode) {
+			this.show = !this.show
+		},
+		change() {
+			console.log('触发动画')
+		}
+	}
+}
+</script>
+```
+
+### 样式覆盖
+
+**注意：`nvue` 不支持 `custom-class` 属性 ，需要使用 `styles` 属性进行兼容**
+
+使用 `custom-class` 属性绑定样式，可以自定义 `uni-transition` 的样式
+
+```html
+<template>
+	<view class="content">
+		<uni-transition custom-class="custom-transition" mode-class="fade" :duration="0" :show="true" />
+	</view>
+</template>
+
+<style>
+/* 常规样式覆盖  */
+.content >>> .custom-transition {
+	width:100px;
+	height:100px;
+	background-color:red;
+}
+</style>
+<style lang="scss">
+/* 如果使用 scss 需要使用 /deep/  */
+.content /deep/ .custom-transition {
+	width:100px;
+	height:100px;
+	background-color:red;
+}
+</style>
+```
+
+
+如果使用 `styles` 注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
+
+```html
+<template>
+	<view class="content">
+		<uni-transition :styles="styles" mode-class="fade" :duration="0" :show="true" />
+	</view>
+</template>
+<script>
+export default {
+	data() {
+		return {
+			styles:{
+				'width':'100px',
+				'height':'100px',
+				'backgroundColor':'red'
+			}
+		}
+	}
+}
+</script>
+```
+
+### 自定义动画
+当内置动画类型不能满足需求的时候 ，可以使用 `step()` 和 `run()` 自定义动画,入参以及具体用法参考下方属性说明
+
+`init()` 方法可以覆盖默认配置
+
+
+```html
+<template>
+	<view>
+		<button type="primary" @click="run">执行动画</button>
+		<uni-transition ref="ani" :styles="{'width':'100px','height':'100px','backgroundColor':'red'}" :show="show"  />
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			show: true,
+		}
+	},
+	onReady() {
+		this.$refs.ani.init({
+			duration: 1000,
+			timingFunction: 'linear',
+			transformOrigin: '50% 50%',
+			delay: 500
+		})
+	},
+	methods: {
+		run() {
+			// 同时右平移到 100px,旋转 360 读
+			this.$refs.ani.step({
+				translateX: '100px',
+				rotate: '360'
+			})
+			// 上面的动画执行完成后，等待200毫秒平移到 0px,旋转到 0 读
+			this.$refs.ani.step({
+				translateX: '0px',
+				rotate: '0'
+			},
+			{
+				timingFunction: 'ease-in',
+				duration: 200
+			})
+			// 开始执行动画
+			this.$refs.ani.run(()=>{
+				console.log('动画支持完毕')
+			})
+		}
+	}
+}
+</script>
+```
+
+
+## API
+
+### Transition Props
+
+|属性名		|类型	|默认值	|说明					|
+|:-:	|:-:	|:-:					|:-:|
+|show				|Boolean|false	|控制组件显示或隐藏	|
+|mode-class |Array/String	|-		|内置过渡动画类型			|
+|custom-class |String	|-		|自定义类名	|
+|duration	 |Number	|300	|过渡动画持续时间		|
+|styles		 |Object	|-		|组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`	|
+
+#### mode-class 内置过渡动画类型说明
+**格式为** ：`'fade'` 或者 `['fade','slide-top']`
+
+|属性名			|说明			|
+|:-:			|:-:			|
+|fade			|渐隐渐出过渡	|
+|slide-top		|由上至下过渡	|
+|slide-right	|由右至左过渡	|
+|slide-bottom	|由下至上过渡	|
+|slide-left		|由左至右过渡	|
+|zoom-in		|由小到大过渡	|
+|zoom-out		|由大到小过渡	|
+
+**注意** 
+
+组合使用时，同一种类型相反的过渡动画如（slide-top、slide-bottom）同时使用时，只有最后一个生效
+
+### Transition Events
+
+|事件名		|说明				|返回值			|
+|:-:			|:-:				|:-:			|
+|click		|点击组件触发		|-				|
+|change		|过渡动画结束时触发	| e = {detail:true}	|
+
+### Transition Methons
+
+|方法名|说明|参数|
+|:-:|:-:|:-:|
+|init()|手动初始化配置|Function(OBJECT:config)|
+|step()|动画队列|Function(OBJECT:type,OBJECT:config)|
+|run()|执行动画|Function(FUNCTION:callback)	|
+
+### init(OBJECT:config)
+**通过 ref 调用方法**
+
+手动设置动画配置，需要在页面渲染完毕后调用
+
+```javascript
+this.$refs.ani.init({
+	duration: 1000,
+	timingFunction:'ease',
+	delay:500,
+	transformOrigin:'left center'
+})
+```
+
+### step(OBJECT:type,OBJECT:config) 动画队列
+**通过 ref 调用方法**
+
+调用 `step()` 来表示一组动画完成，`step` 第一个参数可以传入任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。`step` 第二个参数可以传入一个跟 `uni.createAnimation()` 一样的配置参数用于指定当前组动画的配置。
+
+Tips
+- 第一个参数支持的动画参考下面的 `支持的动画`
+- 第二个参数参考下面的 `动画配置`，可省略，如果省略继承`init`的配置
+
+
+```javascript
+this.$refs.ani.step({
+	translateX: '100px'
+},{
+	duration: 1000,
+	timingFunction:'ease',
+	delay:500,
+	transformOrigin:'left center'
+})
+```
+
+### run(FUNCTION:callback) 执行动画
+**通过 ref 调用方法**
+
+在执行 `step()` 后，需要调用 `run()` 来运行动画 ，否则动画会一直等待
+
+`run()` 方法可以传入一个 `callback` 函数 ，会在所有动画执行完毕后回调
+
+```javascript
+this.$refs.ani.step({
+	translateX: '100px'
+})
+this.$refs.ani.run(()=>{
+	console.log('动画执行完毕')
+})
+
+```
+
+### 动画配置
+动画配置 ， `init()` 与 `step()` 第二个参数配置相同 ，如果配置`step() `第二个参数，将会覆盖 `init()` 的配置
+
+|属性名|值|必填|默认值|说明|平台差异|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|duration|Number|否|400|动画持续时间，单位ms|-|
+|timingFunction|String|否|"linear"|定义动画的效果|-|
+|delay|Number|否|0|动画延迟时间，单位 ms|-|
+|needLayout|Boolean|否|false	|动画执行是否影响布局|仅 nvue 支持|
+|transformOrigin|String	|否|"center center"|设置	[transform-origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin)|-|
+
+
+### timingFunction 属性说明
+
+|值|说明|平台差异|
+|:-:|:-:|:-:|
+|linear|动画从头到尾的速度是相同的|-|
+|ease|动画以低速开始，然后加快，在结束前变慢|-|
+|ease-in|	动画以低速开始|-|
+|ease-in-out|	动画以低速开始和结束|-|
+|ease-out|动画以低速结束|-|
+|step-start|动画第一帧就跳至结束状态直到结束|nvue不支持|
+|step-end|动画一直保持开始状态，最后一帧跳到结束状态|nvue不支持|
+
+```javascript
+// init 配置
+this.$refs.ani.init({
+	duration: 1000,
+	timingFunction:'ease',
+	delay:500,
+	transformOrigin:'left center'
+})
+// step 配置
+this.$refs.ani.step({
+	translateX: '100px'
+},{
+	duration: 1000,
+	timingFunction:'ease',
+	delay:500,
+	transformOrigin:'left center'
+})
+```
+
+### 支持的动画
+动画方法 
+
+如果同一个动画方法有多个值，多个值使用数组分隔
+
+```javascript
+this.$refs.ani.step({
+	width:'100px',
+	scale: [1.2,0.8],
+})
+```
+
+**样式：**
+
+|属性名|值|说明|平台差异|
+|:-:|:-:|:-:|:-:|
+|opacity|value|透明度，参数范围 0~1|-|
+|backgroundColor|color|颜色值|-|
+|width|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|-|
+|height|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|-|
+|top|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|nvue 不支持|
+|left|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|nvue 不支持|
+|bottom|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|nvue 不支持|
+|right|length|长度值，如果传入 Number 则默认使用 px，可传入其他自定义单位的长度值|nvue 不支持|
+
+```javascript
+this.$refs.ani.step({
+	opacity: 1,
+	backgroundColor: '#ff5a5f',
+	widht:'100px',
+	height:'50rpx',
+})
+```
+
+**旋转：**
+
+旋转属性的值不需要填写单位
+
+|属性名|值|说明|平台差异	|
+|:-:|:-:|:-:|:-:|
+|rotate|deg|deg的范围-180~180，从原点顺时针旋转一个deg角度	|-|
+|rotateX|deg|deg的范围-180~180，在X轴旋转一个deg角度				|-|
+|rotateY|deg|deg的范围-180~180，在Y轴旋转一个deg角度				|-|
+|rotateZ|deg|deg的范围-180~180，在Z轴旋转一个deg角度				|nvue不支持|
+|rotate3d|x,y,z,deg| 同	[transform-function rotate3d](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d())		|nvue不支持|
+
+```javascript
+this.$refs.ani.step({
+	rotateX: 45,
+	rotateY: 45
+})
+```
+
+**缩放：**
+
+|属性名|值|说明|平台差异|
+|:-:|:-:|:-:	|:-:|
+|scale|sx,[sy]|一个参数时，表示在X轴、Y轴同时缩放sx倍数；两个参数时表示在X轴缩放sx倍数，在Y轴缩放sy倍数|-|
+|scaleX|sx|在X轴缩放sx倍数|-|
+|scaleY|sy|在Y轴缩放sy倍数|-|
+|scaleZ|sz|在Z轴缩放sy倍数|nvue不支持|
+|scale3d|sx,sy,sz|在X轴缩放sx倍数，在Y轴缩放sy倍数，在Z轴缩放sz倍数|nvue不支持|
+
+```javascript
+this.$refs.ani.step({
+	scale: [1.2,0.8]
+})
+```
+
+**偏移：**
+
+|属性名|值|说明|平台差异|
+|:-:|:-:|:-:|:-:|
+|translate|tx,[ty]|一个参数时，表示在X轴偏移tx，单位px；两个参数时，表示在X轴偏移tx，在Y轴偏移ty，单位px。|-|
+|translateX|tx|	在X轴偏移tx，单位px|-|
+|translateY|ty|	在Y轴偏移tx，单位px|-|
+|translateZ|tz|	在Z轴偏移tx，单位px|nvue不支持|
+|translate3d|tx,ty,tz|	在X轴偏移tx，在Y轴偏移ty，在Z轴偏移tz，单位px|nvue不支持|
+
+```javascript
+this.$refs.ani.step({
+	translateX: '100px'
+})
+```
+
+
+
+## 组件示例
+
+点击查看：[https://hellouniapp.dcloud.net.cn/pages/extUI/transition/transition](https://hellouniapp.dcloud.net.cn/pages/extUI/transition/transition)
\ No newline at end of file