diff --git a/components/uni-popup/message.js b/components/uni-popup/message.js
new file mode 100644
index 0000000..0ff9a02
--- /dev/null
+++ b/components/uni-popup/message.js
@@ -0,0 +1,22 @@
+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()
+			}
+		}
+	}
+}
diff --git a/components/uni-popup/popup.js b/components/uni-popup/popup.js
new file mode 100644
index 0000000..2a7f22f
--- /dev/null
+++ b/components/uni-popup/popup.js
@@ -0,0 +1,25 @@
+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],
+}
diff --git a/components/uni-popup/uni-popup-dialog.vue b/components/uni-popup/uni-popup-dialog.vue
new file mode 100644
index 0000000..c91123c
--- /dev/null
+++ b/components/uni-popup/uni-popup-dialog.vue
@@ -0,0 +1,243 @@
+<template>
+	<view class="uni-popup-dialog">
+		<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>
+		<view class="uni-dialog-button-group">
+			<view class="uni-dialog-button" @click="close">
+				<text class="uni-dialog-button-text">取消</text>
+			</view>
+			<view class="uni-dialog-button uni-border-left" @click="onOk">
+				<text class="uni-dialog-button-text uni-button-color">确定</text>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	/**
+	 * PopUp 弹出层-对话框样式
+	 * @description 弹出层-对话框样式
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
+	 * @property {String} value input 模式下的默认值
+	 * @property {String} placeholder input 模式下输入提示
+	 * @property {String} type = [success|warning|info|error] 主题样式
+	 *  @value success 成功
+	 * 	@value warning 提示
+	 * 	@value info 消息
+	 * 	@value error 错误
+	 * @property {String} mode = [base|input] 模式、
+	 * 	@value base 基础对话框
+	 * 	@value input 可输入对话框
+	 * @property {String} content 对话框内容
+	 * @property {Boolean} beforeClose 是否拦截取消事件
+	 * @event {Function} confirm 点击确认按钮触发
+	 * @event {Function} close 点击取消按钮触发
+	 */
+
+	export default {
+		name: "uniPopupDialog",
+		props: {
+			value: {
+				type: [String, Number],
+				default: ''
+			},
+			placeholder: {
+				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
+			}
+		},
+		data() {
+			return {
+				dialogType: 'error',
+				focus: false,
+				val: ""
+			}
+		},
+		inject: ['popup'],
+		watch: {
+			type(val) {
+				this.dialogType = val
+			},
+			mode(val) {
+				if (val === 'input') {
+					this.dialogType = 'info'
+				}
+			},
+			value(val) {
+				this.val = val
+			}
+		},
+		created() {
+			// 对话框遮罩不可点击
+			this.popup.mkclick = false
+			if (this.mode === 'input') {
+				this.dialogType = 'info'
+				this.val = this.value
+			} else {
+				this.dialogType = this.type
+			}
+		},
+		mounted() {
+			this.focus = true
+		},
+		methods: {
+			/**
+			 * 点击确认按钮
+			 */
+			onOk() {
+				this.$emit('confirm', () => {
+					this.popup.close()
+					if (this.mode === 'input') this.val = this.value
+				}, this.mode === 'input' ? this.val : '')
+			},
+			/**
+			 * 点击取消按钮
+			 */
+			close() {
+				if (this.beforeClose) {
+					this.$emit('close', () => {
+						this.popup.close()
+					})
+					return
+				}
+				this.popup.close()
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.uni-popup-dialog {
+		width: 300px;
+		border-radius: 15px;
+		background-color: #fff;
+	}
+
+	.uni-dialog-title {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+		padding-top: 15px;
+		padding-bottom: 5px;
+	}
+
+	.uni-dialog-title-text {
+		font-size: 16px;
+		font-weight: 500;
+	}
+
+	.uni-dialog-content {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		padding: 5px 15px 15px 15px;
+	}
+
+	.uni-dialog-content-text {
+		font-size: 14px;
+		color: #6e6e6e;
+	}
+
+	.uni-dialog-button-group {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		border-top-color: #f5f5f5;
+		border-top-style: solid;
+		border-top-width: 1px;
+	}
+
+	.uni-dialog-button {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+
+		flex: 1;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		height: 45px;
+	}
+
+	.uni-border-left {
+		border-left-color: #f0f0f0;
+		border-left-style: solid;
+		border-left-width: 1px;
+	}
+
+	.uni-dialog-button-text {
+		font-size: 14px;
+	}
+
+	.uni-button-color {
+		color: $uni-color-primary;
+	}
+
+	.uni-dialog-input {
+		flex: 1;
+		font-size: 14px;
+	}
+
+	.uni-popup__success {
+		color: $uni-color-success;
+	}
+
+	.uni-popup__warn {
+		color: $uni-color-warning;
+	}
+
+	.uni-popup__error {
+		color: $uni-color-error;
+	}
+
+	.uni-popup__info {
+		color: #909399;
+	}
+</style>
diff --git a/components/uni-popup/uni-popup-message.vue b/components/uni-popup/uni-popup-message.vue
new file mode 100644
index 0000000..a32bd00
--- /dev/null
+++ b/components/uni-popup/uni-popup-message.vue
@@ -0,0 +1,116 @@
+<template>
+	<view class="uni-popup-message" :class="'uni-popup__'+[type]">
+		<text class="uni-popup-message-text" :class="'uni-popup__'+[type]+'-text'">{{message}}</text>
+	</view>
+</template>
+
+<script>
+	
+	/**
+	 * PopUp 弹出层-消息提示
+	 * @description 弹出层-消息提示
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
+	 * @property {String} type = [success|warning|info|error] 主题样式
+	 *  @value success 成功
+	 * 	@value warning 提示
+	 * 	@value info 消息
+	 * 	@value error 错误
+	 * @property {String} message 消息提示文字
+	 * @property {String} duration 显示时间，设置为 0 则不会自动关闭
+	 */
+	
+	export default {
+		name: 'UniPopupMessage',
+		props: {
+			/**
+			 * 主题 success/warning/info/error	  默认 success
+			 */
+			type: {
+				type: String,
+				default: 'success'
+			},
+			/**
+			 * 消息文字
+			 */
+			message: {
+				type: String,
+				default: ''
+			},
+			/**
+			 * 显示时间，设置为 0 则不会自动关闭
+			 */
+			duration: {
+				type: Number,
+				default: 3000
+			}
+		},
+		inject: ['popup'],
+		data() {
+			return {}
+		},
+		created() {
+			this.popup.childrenMsg = this
+		},
+		methods: {
+			open() {
+				if (this.duration === 0) return
+				clearTimeout(this.popuptimer)
+				this.popuptimer = setTimeout(() => {
+					this.popup.close()
+				}, this.duration)
+			},
+			close() {
+				clearTimeout(this.popuptimer)
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	.uni-popup-message {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		background-color: #e1f3d8;
+		padding: 10px 15px;
+		border-color: #eee;
+		border-style: solid;
+		border-width: 1px;
+	}
+	.uni-popup-message-text {
+		font-size: 14px;
+		padding: 0;
+	}
+
+	.uni-popup__success {
+		background-color: #e1f3d8;
+	}
+
+	.uni-popup__success-text {
+		color: #67C23A;
+	}
+
+	.uni-popup__warn {
+		background-color: #faecd8;
+	}
+
+	.uni-popup__warn-text {
+		color: #E6A23C;
+	}
+
+	.uni-popup__error {
+		background-color: #fde2e2;
+	}
+
+	.uni-popup__error-text {
+		color: #F56C6C;
+	}
+
+	.uni-popup__info {
+		background-color: #F2F6FC;
+	}
+
+	.uni-popup__info-text {
+		color: #909399;
+	}
+</style>
diff --git a/components/uni-popup/uni-popup-share.vue b/components/uni-popup/uni-popup-share.vue
new file mode 100644
index 0000000..4c11a13
--- /dev/null
+++ b/components/uni-popup/uni-popup-share.vue
@@ -0,0 +1,165 @@
+<template>
+	<view class="uni-popup-share">
+		<view class="uni-share-title"><text class="uni-share-title-text">{{title}}</text></view>
+		<view class="uni-share-content">
+			<view class="uni-share-content-box">
+				<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
+					<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
+					<text class="uni-share-text">{{item.text}}</text>
+				</view>
+
+			</view>
+		</view>
+		<view class="uni-share-button-box">
+			<button class="uni-share-button" @click="close">取消</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'UniPopupShare',
+		props: {
+			title: {
+				type: String,
+				default: '分享到'
+			}
+		},
+		inject: ['popup'],
+		data() {
+			return {
+				bottomData: [{
+						text: '微信',
+						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-2.png',
+						name: 'wx'
+					},
+					{
+						text: '支付宝',
+						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-8.png',
+						name: 'wx'
+					},
+					{
+						text: 'QQ',
+						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/gird-3.png',
+						name: 'qq'
+					},
+					{
+						text: '新浪',
+						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-1.png',
+						name: 'sina'
+					},
+					{
+						text: '百度',
+						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-7.png',
+						name: 'copy'
+					},
+					{
+						text: '其他',
+						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-5.png',
+						name: 'more'
+					}
+				]
+			}
+		},
+		created() {},
+		methods: {
+			/**
+			 * 选择内容
+			 */
+			select(item, index) {
+				this.$emit('select', {
+					item,
+					index
+				}, () => {
+					this.popup.close()
+				})
+			},
+			/**
+			 * 关闭窗口
+			 */
+			close() {
+				this.popup.close()
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	.uni-popup-share {
+		background-color: #fff;
+	}
+	.uni-share-title {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		height: 40px;
+	}
+	.uni-share-title-text {
+		font-size: 14px;
+		color: #666;
+	}
+	.uni-share-content {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: center;
+		padding-top: 10px;
+	}
+	
+	.uni-share-content-box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		flex-wrap: wrap;
+		width: 360px;
+	}
+	
+	.uni-share-content-item {
+		width: 90px;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		padding: 10px 0;
+		align-items: center;
+	}
+	
+	.uni-share-content-item:active {
+		background-color: #f5f5f5;
+	}
+	
+	.uni-share-image {
+		width: 30px;
+		height: 30px;
+	}
+	
+	.uni-share-text {
+		margin-top: 10px;
+		font-size: 14px;
+		color: #3B4144;
+	}
+	
+	.uni-share-button-box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		padding: 10px 15px;
+	}
+	
+	.uni-share-button {
+		flex: 1;
+		border-radius: 50px;
+		color: #666;
+		font-size: 16px;
+	}
+	
+	.uni-share-button::after {
+		border-radius: 50px;
+	}
+</style>
diff --git a/components/uni-popup/uni-popup.vue b/components/uni-popup/uni-popup.vue
new file mode 100644
index 0000000..2d15d5f
--- /dev/null
+++ b/components/uni-popup/uni-popup.vue
@@ -0,0 +1,294 @@
+<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>
diff --git a/components/uni-transition/uni-transition.vue b/components/uni-transition/uni-transition.vue
new file mode 100644
index 0000000..908a939
--- /dev/null
+++ b/components/uni-transition/uni-transition.vue
@@ -0,0 +1,279 @@
+<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>
diff --git a/pages/stampingRecordList/index.scss b/pages/stampingRecordList/index.scss
index bf8b2ac..281531a 100644
--- a/pages/stampingRecordList/index.scss
+++ b/pages/stampingRecordList/index.scss
@@ -89,4 +89,44 @@
 		}
 	}
 	
+}
+
+.card-pop{
+	@include wh(600upx,auto);
+	padding: 30upx;
+	margin: auto;
+	background: white;
+	
+	border-radius: 10upx;
+	margin: auto;
+	.pop-list{
+		@include flex(center,space-between);
+		margin-top: 30upx;
+		text{
+			@include fonts(26upx,#333)
+		}
+		input{
+			font-size: 26upx;
+			text-align: right;
+		}
+		.right-pic{
+			@include flex(center,flex-start);
+			text{
+				@include fonts(26upx,#333)
+			}
+			image{
+				@include wh(22upx,33upx);
+			}
+		}
+	}
+	.submit{
+		@include wh(300upx,60upx);
+		line-height: 60upx;
+		border-radius: 10upx;
+		background: #007AFF;
+		@include fonts(26upx,#fff);
+		text-align: center;
+		margin: auto;
+		margin-top: 50upx;
+	}
 }
\ No newline at end of file
diff --git a/pages/stampingRecordList/stampingRecordList.vue b/pages/stampingRecordList/stampingRecordList.vue
index 2de9061..2fee383 100644
--- a/pages/stampingRecordList/stampingRecordList.vue
+++ b/pages/stampingRecordList/stampingRecordList.vue
@@ -6,7 +6,7 @@
 					<view class="card-up-list-list">
 						<view>物料名称:</view><text>{{item.product_name}}</text>
 					</view>
-					<view class="card-right">
+					<view class="card-right" @tap="open(item.plan_id)">
 						人员统计
 					</view>
 				</view>
@@ -25,20 +25,52 @@
 				</view>
 			</view>
 			<view class="btn-grounp">
-				<view v-if="item.status==0||item.status==0" @tap="openLine(item.plan_id)">开线</view>
+				<view v-if="item.status==0||item.status==2" @tap="openLine(item.plan_id)">开线</view>
 				<view v-if="item.status==1" class="btn-tx"  @tap="stopLine(item)">停线</view>
 				<view v-if="item.status==0" class="btn-xx" @tap="offLine()">下线</view>
 				<view  class="btn-blp" @tap="badProduct()">不良品统计</view>
 				<view  class="btn-back" @tap="rework()">返修</view>
 			</view>
 		</view>
+		<uni-popup ref="popup" type="center">
+			<view class="card-pop">
+				<picker @change="bindline" :value="froms.frequency" :range="frequency">
+				<view class="pop-list">
+					<text>班次:</text>
+					<view class="right-pic">
+						<text>{{frequency[froms.frequency]}}</text>
+						<image src="../../static/next.png"></image>
+					</view>
+				</view>
+				</picker>
+				<view class="pop-list">
+					<text>上线人数:</text>
+					<input type="number" v-model="froms.in_line" placeholder="请输入上线人数" />
+				</view>
+				<view class="pop-list">
+					<text>工时投入:</text>
+					<input type="number" v-model="froms.peoples"  placeholder="请输入工时投入" />
+				</view>
+				<picker @change="bindStatus" :value="froms.status" :range="status">
+				<view class="pop-list">
+					<text>状态:</text>
+					<view class="right-pic">
+						<text>{{status[froms.frequency]}}</text>
+						<image src="../../static/next.png"></image>
+					</view>
+				</view>
+				</picker>
+				<view class="submit" @tap="tjrsBtn()">提交</view>
+			</view>
+		</uni-popup>
 	</view>
 </template>
 
 <script>
 	import {
 		firstCheckLists,
-		openLine
+		openLine,
+		trtj
 	} from "../../api/user.js";
 	export default {
 		onLoad() {
@@ -46,9 +78,24 @@
 		},
 		data() {
 			return {
-				list:[]
+				list:[],
+				status:["冲压","喷涂"],
+				frequency:["夜班", "白班"],
+				froms:{
+					plan_id:'',
+					in_line:'',
+					peoples:'',
+					status:'',
+					frequency:''
+				}
 			};
 		},methods:{
+			bindline: function(e) {
+				this.froms.frequency = e.target.value
+			},
+			bindStatus: function(e) {
+				this.froms.status = e.target.value+1
+			},
 			openLine(plan_id){
 				openLine({id:plan_id}).then(res=>{
 					this.$functions.sucess("操作成功").then({
@@ -82,6 +129,19 @@
 				uni.navigateTo({
 					url: '../rework/rework'				
 				});
+			},
+			open(e){
+				
+				this.froms.plan_id=e;
+				console.log("id",this.froms)
+			        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
+			        this.$refs.popup.open('center')
+			},
+			tjrsBtn(){
+				
+				trtj(this.froms).then(res=>{
+					 this.$refs.popup.close('center')
+				})
 			}
 		}
 	}
diff --git a/pages/stopLine/stopLine.vue b/pages/stopLine/stopLine.vue
index cdce463..5d7e5b7 100644
--- a/pages/stopLine/stopLine.vue
+++ b/pages/stopLine/stopLine.vue
@@ -19,13 +19,13 @@
 					<text>{{CyInfo.line_title}}</text>
 					<!-- <image class="next" src="../../static/next.png"></image> -->
 				</view>
-			</view>
-			<picker @change="bindfrequencyIds" :value="frequencyIds" :range="frequency">
+			</view>	
+			<picker @change="bindline" :value="froms.frequency" :range="line">
 			<view class="list-list">
 				<view class="list-title">班次</view>
 				<view class="list-right">
-					<text>{{frequency[frequencyIds]}}</text>
-					<image class="next" src="../../static/next.png"></image>
+					<text>{{line[froms.frequency]}}</text>
+					<image class="next" src="../../static/xiala.png"></image>
 				</view>
 			</view>
 			</picker>
@@ -43,11 +43,11 @@
 		</view>
 		<view class="big-titlt">模具维修</view>
 		<view class="white-card">
-			<picker @change="bindmouldIds" :value="mouldIds" :range="mould">
+			<picker @change="bindmouldIds" :value="froms.device[0].device_id" :range="deviceNo">
 			<view class="list-list">
-				<view class="list-title">模具编号</view>
+				<view class="list-title">设备编号</view>
 				<view class="list-right">
-					<text>{{mould[mouldIds]}}</text>
+					<text>{{deviceNo[froms.device[0].device_id-1]}}</text>
 					<image class="next" src="../../static/next.png"></image>
 				</view>
 			</view>
@@ -55,41 +55,44 @@
 			<view class="list-list">
 				<view class="list-title">异常现象</view>
 				<view class="list-right">
-					<input placeholder="请输入异常现象" />
+					<input placeholder="请输入异常现象" v-model="froms.device[0].unusual_phenomenon" />
 				</view>
 			</view>
 			<view class="list-list">
 				<view class="list-title">原因分析</view>
 				<view class="list-right">
-					<input placeholder="请输入原因分析" />
+					<input placeholder="请输入原因分析" v-model="froms.device[0].cause_analysis" />
 				</view>
 			</view>
 			<view class="list-list">
 				<view class="list-title">维修描述</view>
 				<view class="list-right">
-					<input placeholder="请输入维修描述" />
+					<input placeholder="请输入维修描述"  v-model="froms.device[0].repair_description"  />
 				</view>
 			</view>
 			<view class="list-list">
 				<view class="list-title">维修时长</view>
 				<view class="list-right">
-					<input placeholder="请输入维修时长" />
+					<input placeholder="请输入维修时长" v-model="froms.device[0].repair_time"  />
 				</view>
 			</view>
 			<view class="list-list">
 				<view class="list-title">维修人员</view>
 				<view class="list-right">
-					<input placeholder="请输入维修人员" />
+					<input placeholder="请输入维修人员" v-model="froms.device[0].repair_staff"  />
 				</view>
 			</view>
+			<view class="bzqk-card">
+				<textarea value=""  v-model="froms.device[0].remark"  placeholder="备注情况说明" />
+			</view>
 		</view>
 		<view class="big-titlt">设备维修</view>
 		<view class="white-card">
-			<picker @change="bindmouldIds" :value="mouldIds" :range="mould">
+			<picker @change="bindmodeIds" :value="froms.mode[0].mode_id" :range="mould">
 			<view class="list-list">
 				<view class="list-title">模具编号</view>
 				<view class="list-right">
-					<text>{{mould[mouldIds]}}</text>
+					<text>{{mould[froms.mode[0].mode_id-1]}}</text>
 					<image class="next" src="../../static/next.png"></image>
 				</view>
 			</view>
@@ -97,46 +100,46 @@
 			<view class="list-list">
 				<view class="list-title">异常现象</view>
 				<view class="list-right">
-					<input placeholder="请输入异常现象" />
+					<input placeholder="请输入异常现象" v-model="froms.mode[0].unusual_phenomenon" />
 				</view>
 			</view>
 			<view class="list-list">
 				<view class="list-title">原因分析</view>
 				<view class="list-right">
-					<input placeholder="请输入原因分析" />
+					<input placeholder="请输入原因分析" v-model="froms.mode[0].cause_analysis" />
 				</view>
 			</view>
 			<view class="list-list">
 				<view class="list-title">维修描述</view>
 				<view class="list-right">
-					<input placeholder="请输入维修描述" />
+					<input placeholder="请输入维修描述"  v-model="froms.mode[0].repair_description"  />
 				</view>
 			</view>
 			<view class="list-list">
 				<view class="list-title">维修时长</view>
 				<view class="list-right">
-					<input placeholder="请输入维修时长" />
+					<input placeholder="请输入维修时长" v-model="froms.mode[0].repair_time"  />
 				</view>
 			</view>
 			<view class="list-list">
 				<view class="list-title">维修人员</view>
 				<view class="list-right">
-					<input placeholder="请输入维修人员" />
+					<input placeholder="请输入维修人员" v-model="froms.mode[0].repair_staff"  />
 				</view>
 			</view>
 			<view class="bzqk-card">
-				<textarea value="" placeholder="备注情况说明" />
+				<textarea value="" placeholder="备注情况说明" v-model="froms.mode[0].remark" />
 			</view>
 			
 		</view>
 		<view class="submit-btn">
-			<button type="primary">提交并发起审核</button>
+			<button type="primary" @tap="stopLine()">提交并发起审核</button>
 		</view>
 	</view>
 </template>
 
 <script>
-	import {stopLineReason} from "../../api/user.js"
+	import {stopLineReason,device,mode,stopRecord} from "../../api/user.js"
 	export default {
 		data() {
 			return {
@@ -148,26 +151,50 @@
 				reasonIds:0,
 				mould:["1","2","3"],
 				mouldIds:0,
+				deviList:[],
 				CyInfo:{},
 				resonList:[],
-				
-				forms:{
-					plan_id:'',
-					frequency:'',
+				deviceNo:[],
+				froms:{
+					plan_id:"",
+					frequency:'1',
 					reason_id:'',
 					remake:'',
-					device:[],
-					mode:[],
-					
-				}
+					device:[
+						{device_id:'1',unusual_phenomenon:'',cause_analysis:'',repair_description:'',repair_time:'',repair_staff:'',remark:''}
+					],
+					mode:[
+						{mode_id:'',unusual_phenomenon:'',cause_analysis:'',repair_description:'',repair_time:'',repair_staff:'',remark:''}
+					],	
+				},
 			};
 		},
 		onLoad(e) {
-			this.getReson()
+			this.getReson();
+			 this.getDevice();
+			this.getMode()
 			this.CyInfo = JSON.parse(decodeURIComponent(e.planInfo));
+			this.froms.plan_id=this.CyInfo.plan_id;
 			console.log('picker发送选择改变，携带值为',this.CyInfo)
 		},
 		methods:{
+		 getDevice(){
+			device().then(res=>{
+			let newArr= []
+			newArr=res.map(item=>item.name)
+				this.deviceNo=newArr
+				console.log("设备编号11",this.deviceNo)
+			})
+		 },
+		 getMode(){
+		 	mode().then(res=>{
+				
+				let newArr=[]
+				newArr=res.map(item=>item.title)
+				this.mould=newArr
+		 		console.log("mode",this.mould)
+		 	})
+			},
 			getReson(){
 				stopLineReason().then(res=>{
 					let arr = [];
@@ -175,21 +202,39 @@
 					     arr.push(res[i])
 					}
 					this.reason=arr
-					console.log("停线原因",this.reason)
+					
 				})
 			},
 			bindline: function(e) {
-				this.lineIndex = e.target.value
-			},
-			bindfrequencyIds(e){
-				this.frequencyIds = e.target.value
+				this.froms.frequency = e.target.value;
+				console.log("forms",this.froms)
 			},
+			// bindfrequencyIds(e){
+			// 	this.froms.frequency = e.target.value
+			// 	console.log("forms",this.froms)
+			// },
 			bindReason(e){
-				console.log("原因",this.reasonIds)
-				this.reasonIds = e.target.value
+				
+				this.reasonIds = e.target.value;
+				this.froms.reason_id=e.target.value+1;
+				
 			},
 			bindmouldIds(e){
-				this.mouldIds = e.target.value
+				
+				this.froms.device[0].device_id = e.target.value+1
+				console.log("设备id",this.froms.device[0].device_id)
+			}
+			,bindmodeIds(e){
+				this.froms.mode[0].mode_id = e.target.value+1
+			},
+			stopLine(){
+				stopRecord(this.froms).then(res=>{
+					uni.navigateBack({
+						delta: -1
+					});
+					console.log("提交表单",res)
+					//return false;
+				})
 			}
 		}
 	}