Ci2Order.vue/App/components/z-form-item/z-form-item.vue

<template>
	<view class="z-form-item" :style="{background:bgcolor}">
		<view class="plr-30" :class="labelPos=='left'?'flex-n fac':''" :style="{height:labelPos=='left'?height:''}">
			<view v-if="icon" class="z-form-item_icon mr-30 iconfont"></view>
			<slot name="icon"></slot>
			<view class="z-form-item_label mr-20" :style="{height:height,'line-height':height}">
				<view class="z-form-item_label_text nowarp" :class="isError&&appear?'error':''" :style="labelStyle">{{label}}</view>
				<view class="z-form-item_label_require" v-if="isrequired"></view>
				
			</view>
			<view id="slot_part" class="flex-1  line-1" :class="labelPos=='left'?'fje':''" :style="{'text-align':labelPos=='left'?'right':'left'}">
				<slot></slot>
			</view>
			<view class="z-form-item_right ml-20  iconfont iconjuxing11kaobei" v-if="arrow"></view>
		</view>
		<view class="plr-30">
			<view class="line" v-if="showline" :class="icon?'ml-88':''"></view>
		</view>
		<view class="z-form-item_toast plr-30 ptb-10" :class="showmessage?'toast_show':'toast_hide'" v-if="showmessage&&appear">
			{{showmessage}}
		</view>
	</view>
</template>

<script>
	import bus from '../../utils/bus.js'
	export default {
		name: "z-form-item",
		props: {
			required: Boolean, //动态绑定时需要
			prop: String,
			height: {
				type: String,
				default: '87rpx'
			},
			icon: String,
			bgcolor: {
				type: String,
				default: 'white'
			},
			label: String,
			labelStyle: Object,
			labelPos: {
				type: String,
				default: 'left'
			},
			arrow: {
				type: Boolean,
				default: false
			},
			showline: {
				type: Boolean,
				default: false
			},
			dynamic: Boolean
		},
		data() {
			return {
				isrules: {},
				fit: false,
				showmessage: '',
				isError: false,
				isrequired: false,
				appear: false, //第一次进来不校验

				value: {},
				rules: [],
			}
		},
		watch: {
			required(newval, oldval) {

				this.checked(this.value, this.rules);
			}
		},
		mounted() {
			this.valiate();
		},
		methods: {
			checked(value, rules) {
				if(this.dynamic){
						this.isrequired = this.required;
				}
				//是否有必填
				for (var i in rules) {
					for (var key in rules[i]) {
						if (key == 'required') {
							this.isrequired = true;
							break;
						}
					}
				}
				for (var i in rules) {
					for (var key in rules[i]) {

						if (this.dynamic) {
							if (this.required) {
								if (value=='') {
									
									this.showmessage = rules[i].message;
									this.isError = true;
									break;
								} else {
								
									this.showmessage = '';
									this.isError = false;
								}
							} else {
								this.showmessage = '';
								this.isError = false;
							}
						
						} else {
							if (this.isrequired) {
								if (value==''||value<0) {
									this.showmessage = rules[i].message;
									this.isError = true;
									break;
								} else {
									this.showmessage = '';
									this.isError = false;
								}
							} else {
								this.showmessage = '';
								this.isError = false;
							}
						}



						//自定义验证
						if (key == 'validator') {
							if (rules[i][key]() == true) {
								this.showmessage = '';
								this.isError = false;
							} else {
								this.showmessage = rules[i][key]().message;
								this.isError = true;
							}
						}
						//小于
						if (key == 'min') {
							if (value <= rules[i][key]) {
								this.showmessage = rules[i].message;
								this.isError = true;
								break;
							} else {
								this.showmessage = '';
								this.isError = false;
							}
						}
						//大于
						if (key == 'max') {
							if (value >= rules[i][key]) {
								this.showmessage = rules[i].message;
								this.isError = true;
								break;
							} else {
								this.isError = false;
								this.showmessage = '';
							}
						}
						//length
						if (key == 'length') {
							if (value.length != rules[i][key]) {
								this.showmessage = rules[i].message;
								this.isError = true;
								break;
							} else {
								this.showmessage = '';
								this.isError = false;
							}
						}
						//大于length
						if (key == 'minlength') {
							if (value.length <= rules[i][key]) {
								this.showmessage = rules[i].message;
								this.isError = true;
								break;
							} else {
								this.showmessage = '';
								this.isError = false;
							}
						}
						//大于length
						if (key == 'maxlength') {
							if (value.length >= rules[i][key]) {
								this.showmessage = rules[i].message;
								this.isError = true;
								break;
							} else {
								this.showmessage = '';
								this.isError = false;
							}
						}
					}
					if (this.showmessage) {
						break;
					}
				}
			},
			valiate() {
				bus.$on('valiate', (data) => {
					this.value = data.model[this.prop] || '';
					this.rules = data.rules[this.prop] || [];
					this.checked(this.value, this.rules);
				})
			}
		}

	}
</script>

<style scoped lang="scss">
	.z-form-item {
		.z-form-item_icon {
			font-size: 58rpx;
			width: 58rpx;
			min-width: 58rpx;
			height: 58rpx;
			color: #efefef;
		}

		.z-form-item_label {
			position: relative;
			width: fit-content;

			.z-form-item_label_text {
				font-size: 32rpx;
				color: #333333;
				font-weight: 500;
			}

			.z-form-item_label_text.error {
				color: #ff0000 !important;
			}

			.z-form-item_label_require {
				position: absolute;
				right: -12rpx;
				top: 26rpx;
				width: 10rpx;
				height: 10rpx;
				background: red;
				border-radius: 50%;
			}
		}

		.z-form-item_right {

			font-size: 20rpx;
			color: #8E9399;
		}

		.z-form-item_toast {
			font-size: 24rpx;
			color: white;
			border-radius: 5rpx;
			background: #878c94;
			text-align: right;

		}
	}

	.toast_show {
		animation: showtoast .5s;
		transform-origin: 0 0;
	}

	.toast_hide {
		animation: hidetoast .5s;

	}

	@keyframes showtoast {
		0% {
			opacity: 0;
			transform: scaleY(0);
		}

		100% {
			opacity: 1;
			transform: scaleY(1);
		}
	}

	@keyframes hidetoast {
		0% {
			opacity: 1;
			transform: scaleY(1);
		}

		100% {
			opacity: 0;
			transform: scaleY(0);
		}
	}
</style>