synthesize-upkeep-app/src/components/dj-modal.vue

<template>
	<view>
		<u-modal
			v-model="show"
			:show-title="false"
			:show-confirm-button="false"
			:show-cancel-button="false"
			:zoom="false">
			<view slot="default" class="u-p-b-20" v-if="modalType === 1">
				<u-row class="d-flex j-sb a-center w-100 u-font-xl u-m-t-20 u-m-b-20">
					<u-col span="2"></u-col>
					<u-col span="8" text-align="center">
						<text>选择新建方式</text>
					</u-col>
					<u-col span="2" style="display: flex;justify-content: flex-end;">
						<view @click="cancle"><u-icon name="close-circle-fill" color="#A9A3D2" size="60"></u-icon></view>
					</u-col>
				</u-row>
				<u-row>
					<dj-button class="u-m-t-18" width="398" height="88" content="手动新增" borderRadius="0" imgType="1" @click.native="hand_add" />
					<dj-button class="u-m-t-18 u-m-b-40" width="398" height="88" content="扫码新增" borderRadius="0" imgType="2" @click.native="sao_add" />
				</u-row>
			</view>
			<view slot="default" class="u-p-b-20" v-else>
				<u-row class="d-flex j-sb a-center w-100 u-font-xl u-m-t-20 u-m-b-20">
					<u-col span="4"></u-col>
					<u-col span="4" text-align="center">
						<text v-if="modelTitle === 1">主保养人</text>
						<text v-if="modelTitle === 2">跟线人员</text>
						<text v-if="modelTitle === 3">班长确认</text>
					</u-col>
					<u-col span="4" style="display: flex;justify-content: flex-end;">
						<view @click="cancle"><u-icon name="close-circle-fill" color="#A9A3D2" size="60"></u-icon></view>
					</u-col>
				</u-row>
				<u-row>
					<u-form :model="submitInfor" class="u-p-l-40 u-p-r-40 w-100">
						<u-form-item label="用户名" :border-bottom="false" label-width="120" class="u-p-t-0">
							<u-input v-model="submitInfor.username" 
									 type="text" 
									 border
									 :clearable="false"
									 placeholder="请输入..." />
						</u-form-item>
						<u-form-item label="密码" :border-bottom="false" label-width="120" class="u-p-t-0">
							<u-input v-model="submitInfor.password" 
									 type="password" 
									 border
									 :clearable="false"
									 placeholder="请输入..." />
						</u-form-item>
						<u-form-item label="备注" :border-bottom="false" label-width="120" class="u-p-t-0">
							<u-input v-model="submitInfor.remark" 
									 type="textarea" 
									 border
									 :clearable="false"
									 placeholder="请输入..." />
						</u-form-item>
					</u-form>
					<dj-button width="180" height="70" @click.native="confirm_manage"/>
				</u-row>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import djButton from '@/components/dj-button.vue'
 	export default {
		components: {
			djButton
		},
		props: {
			// 是否显示模态框
			show: {
				type: Boolean,
				default: false
			},
			// 弹窗 1新增 2提交
		    modalType: {
				type: Number,
				default: 1
			},
			// 当前任务
			taskId: {
				type: Number,
				default: 0
			},
			// modalType 为4 是的标题
			modelTitle: {
				type: Number,
				default: 1
			},
		},
		data() {
			return {
				submitInfor: {
					'username': '',
					'password': '',
					'remark': ''
				}
			}
		},
		methods: {
			// 关闭弹窗
			cancle() {
				this.$emit('cancle')
			},
			// 班长或主管确认
			confirm_manage() {
				let data = this.submitInfor
				this.$emit('cancle',{'type':this.modelTitle,'data':data})
				this.submitInfor = Object.assign(this.$data.submitInfor,this.$options.data().submitInfor)
			},
			hand_add() {
				this.cancle()
				uni.navigateTo({
					url: `/pages/index/addUpkeep`
				})
			},
			// 扫码新增
			sao_add() {
				this.cancle()
				scanCode().then(res=>{
					uni.navigateTo({
						url: `/pages/index/addUpkeep?number=${res}`
					})
				}).catch(res=> {
					this.$refs.uToast.show({
						title: '扫码失败',
						type: 'error'
					}) 
				})
			}
		}
	}
</script>

<style>
</style>