qimall/addons/RealAuth/backend/views/setting/index.php

<div id="app" v-cloak>
	<el-card class="box-card" v-loading="loading" shadow="never" style="border:0;min-width: 1200px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
		<div class="form_box">
			<template>
				<el-card>
					<el-form :model="basic" size="small" ref="ruleForm" :rules="rules" label-width="150px">
						<el-row>
							<el-col :span="24">
								<div class="title paddingTop">
									<span class="title-line"></span>
									<span>随机减条件</span>
								</div>
								<div class="form-body condition">
									<el-form-item label="订单满" v-for="(item, key) in basic.condition">
										<el-col :span="8">
											<el-form-item
												:key="item.key"
												:prop="'condition.' + key + '.total_price'"
												>
												<el-input oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入内容" v-model="item.total_price">
													<template slot="append">元</template>
												</el-input>
											</el-form-item>
										</el-col>
										<el-col :span="1">减</el-col>
										<el-col :span="6">
											<el-form-item
												:key="item.key"
												:prop="'condition.' + key + '.rand_min'"
												>
												<el-input oninput="value=value.replace(/[^0-9.]/g,'')" type="text" v-model="item.rand_min" placeholder="">
													<template slot="append">元</template>
												</el-input>
											</el-form-item>
										</el-col>
										<el-col :span="1">~</el-col>
										<el-col :span="6">
											<el-form-item
												:key="item.key"
												:prop="'condition.' + key + '.rand_max'"
												>
												<el-input oninput="value=value.replace(/[^0-9.]/g,'')" type="text" v-model="item.rand_max" placeholder="">
													<template slot="append">元</template>
												</el-input>
											</el-form-item>
										</el-col>
										<el-col :span="2">
											<span @click="delCondition(key)" class="del-condition">删除</span>
										</el-col>
									</el-form-item>
									<el-form-item label="">
										<el-button class="button-item" type="primary" @click="addCondition" size="small" v-if="addBtn">添加条件</el-button>
									</el-form-item>
								</div>
							</el-col>
							<!-- 参与权限 -->
							<el-col :span="24">
								<div class="title paddingTop">
									<span class="title-line"></span>
									<span>参与权限</span>
								</div>
								<div class="form-body root">
									<el-form-item label="" prop="member">
										<el-col :span="24">
											<el-checkbox-group v-model="basic.member">
												<el-checkbox
													v-for="item in member"
													:label="item.level"
													>{{ item.name }}</el-checkbox>
											</el-checkbox-group>
										</el-col>
									</el-form-item>
								</div>
							</el-col>
							<!-- 应用场景 -->
							<el-col :span="24">
								<div class="title paddingTop">
									<span class="title-line"></span>
									<span>应用场景</span>
								</div>
								<div class="form-body root">
									<el-form-item label="" prop="order">
										<el-col :span="24">
											<el-checkbox-group v-model="basic.order">
												<el-checkbox
													v-for="item in order"
													:label="item.value"
													>{{ item.name }}</el-checkbox>
											</el-checkbox-group>
										</el-col>
									</el-form-item>
								</div>
							</el-col>
						</el-row>
					</el-form>
				</el-card>
			</template>
			<div style="border-top: 1px solid #dad9d9;">
				<el-button :loading="btnLoading" class="button-item" type="primary" style="margin-top: 10px;" @click="store('ruleForm')" size="small">保存
				</el-button>
			</div>
		</div>
	</el-card>
</div>

<script>
	const validateMoney = (rule, value, callback) => {
		if(!value){
			callback(new Error('价格不能为空'))
		} else if (Number(value) == 0) {
			callback(new Error('价格不能小于或等于0'))
		} else if (String(value).indexOf(".") != -1 && String(value).split('.').length > 2) {
			callback(new Error('请输入正确格式的金额')) //防止输入多个小数点
		} else if (String(value).indexOf(".") != -1 && String(value).split('.')[1].length > 2) {
			callback(new Error('请输入正确的小数位数')) //小数点后两位
		} else {
			callback();
		}
	};

	const app = new Vue({
		el: '#app',
		data() {
		return {
			addBtn: true,
			activeName: 'basic',
			loading: false,
			btnLoading: false,
			dialogVisible: false,
			basic: {
				condition: [{}],
				member: [],
				order: [],
			},
			// member
			member: [
				{
					level: 0,
					name: '全部会员',
				},
			],
			// order
			order: [],
			rules: {
				member: {required: true, message: '选择会员权限不能为空'},
				// order: {required: true, message: '选择会员权限不能为空'},
			},
			// :rules="{required: true, validator: validateMoney, trigger: 'blur', message: '金额有误'}"
		}
	},
	mounted: function() {
		this.changeRules(this.basic.condition)
		this.loadData();
	},
	methods: {
		// 获取基础设置详情
		loadData() {
			this.loading = true;
			request({
				params: {
					r: 'rand-fee/setting/index',
				},
				method: 'get'
			}).then(e => {
				this.loading = false;
			if (e.data.code == 0) {
				if (e.data.data) {
					if (JSON.stringify(e.data.data.conf) != "[]") {
						this.basic = e.data.data.conf
					}
					this.member = this.member.concat(e.data.data.level)
					this.order = e.data.data.order
				}
			} else {
				this.$message.error(e.data.msg)
			}
		}).catch(e => {
			this.loading = false;
	})
	},
	// 添加条件
	addCondition() {
		if (this.basic.condition.length >= 10) {
			return
		}
		this.basic.condition.push({})
	},
	// 删除条件
	delCondition(key) {
		let condition = this.basic.condition.filter((item, index) => {
				return index != key
			})
		this.basic.condition = condition
	},
	// 保存
	store(formName) {
		this.$refs[formName].validate((valid) => {
			if (valid) {
			if (this.basic.condition.length <= 0) {
				this.$message.error('请至少设置一个条件');
				return
			}
			var self = this
			self.btnLoading = true;
			request({
				params: {
					r: 'rand-fee/setting/submit',
				},
				method: 'post',
				data: self.basic
			}).then(e => {
				self.btnLoading = false;
			if (e.data.code == 0) {
				self.$message.success(e.data.msg);
			} else {
				self.$message.error(e.data.msg);
			}
		}).catch(e => {
			self.$message.error(e);
		self.btnLoading = false;
	})
	} else {
		console.log(valid)
	}
	})
	},
	changeRules (val) {
		let self = this

		let validateRepeat = (rule, value, callback) => {
			var ary = []
			this.basic.condition.forEach((val) => {
				ary.push(val.total_price)
		});
		var nary = ary.sort();
		for(var i = 0; i < nary.length - 1; i++) {
			if(nary[i] == nary[i + 1]) {
				callback(new Error('请勿输入重复金额')) //
			}
		}
		callback();
	}

	let validateMin = (rule, value, callback) => {
		let key = rule.field.substr(rule.field.indexOf(".") + 1, 1)
		if (parseFloat(value) >= parseFloat(this.basic.condition[key].rand_max)) {
			callback(new Error('请勿输入大于结束金额'))
		} else {
			callback();
		}
	}

	let validateMax = (rule, value, callback) => {
		let key = rule.field.substr(rule.field.indexOf(".") + 1, 1)
		if (parseFloat(value) <= parseFloat(this.basic.condition[key].rand_min)) {
			callback(new Error('请勿输入小于开始金额'))
		} else {
			callback();
		}
	}

	let validateIsMax = (rule, value, callback) => {
		let key = rule.field.substr(rule.field.indexOf(".") + 1, 1)
		if (parseFloat(value) >= parseFloat(this.basic.condition[key].total_price)) {
			callback(new Error('请勿输入大于订单最大金额'))
		} else {
			callback();
		}
	}

	if (val && val.length > 0) {
		val.forEach((item, key) => {
			let condition = 'condition.' + key + '.total_price'
			let rand_min = 'condition.' + key + '.rand_min'
			let rand_max = 'condition.' + key + '.rand_max'
			self.rules[condition] = [
			{required: true, validator: validateMoney, trigger: 'blur', message: '金额有误'},
			{required: true, validator: validateRepeat, trigger: 'blur', message: '金额重复'}
		]
		self.rules[rand_min] = [
			{required: true, validator: validateMoney, trigger: 'blur', message: '金额有误'},
			{required: true, validator: validateMin, trigger: 'blur', message: '请勿输入大于结束金额'},
			{required: true, validator: validateIsMax, trigger: 'blur', message: '请勿输入大于订单最大金额'},
		]
		self.rules[rand_max] = [
			{required: true, validator: validateMoney, trigger: 'blur', message: '金额有误'},
			{required: true, validator: validateMax, trigger: 'blur', message: '请勿输入小于开始金额'},
			{required: true, validator: validateIsMax, trigger: 'blur', message: '请勿输入大于订单最大金额'}
		]
	})
	}
	this.addBtn = (val && val.length >= 10) ? false : true
	}
	},
	watch: {
		'basic.condition': function (val) {
			this.changeRules(val)
		},
	}
	});
</script>
<style>
	.form_box {
		background-color: #f3f3f3;
		padding: 0 0 20px;
	}

	.button-item {
		margin-top: 12px;
		padding: 9px 25px;
	}

	.el-input-group__append {
		background-color: #fff;
		color: #353535;
	}

	.el-form-item {
		margin-bottom: 25px !important;
	}

	.title {
		display: flex;
		align-items: center;
		padding: 18px 20px;
		/* border-top: 1px solid #F3F3F3; */
		border-bottom: 1px solid #F3F3F3;
		background-color: #fff;
	}

	.title-line {
		width: 4px;
		height: 20px;
		background-color: #1479F0;
		margin-right: 10px;
	}

	.paddingTop {
		margin-top: 10px;
	}

	.condition .el-col-1 {
		text-align: center;
		/* margin-left: 50px !important; */
	}

	.condition .el-col-2 {
		text-align: center;
		/* margin-left: 50px !important; */
	}

	.del-condition {
		cursor: pointer;
	}

	.condition .el-form-item {
		margin-bottom: 8px !important;
	}
</style>