front-end/ghs/src/views/setting/level.vue

<template>
	<div class="app-content">
		<!-- list -->
		<div class="list-wrap">
			<div class="list-tit">
				<div>客户等级</div>
				<div :class="[isModify ? 'list-tit-inp' : '']">成长值</div>
				<div :class="[isModify ? 'list-tit-inp' : '']">折扣</div>
				<div v-if="isModify">操作</div>
			</div>
			<!-- <block v-if="!$util.isEmpty(list)"> -->
			<div class="list" v-for="(item, index) in list" :key="index">
				<div class="list-vip">
					<span>{{ index + 1 }}</span>
					<!-- <app-vip-module class="level-img" :text="`VIP${index + 1}`" /> -->
				</div>
				<div class="list-growth">
					<input v-if="isModify" type="text" class="setting-inp" v-model="item.growth" />
					<span v-else class="setting-span">{{ item.growth }}</span>
				</div>
				<div class="list-discount">
					<input
						v-if="isModify"
						type="text"
						class="setting-inp"
						v-model="item.discount"
					/>
					<span v-else class="setting-span">{{ item.discount }}</span>
				</div>
				<div class="list-option" v-if="isModify" @click="delFn(index)">
					<i class="iconfont iconshanchu1"></i>
				</div>
			</div>
			<!-- </block>
			<block v-else>
				<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list)" />
			</block> -->
		</div>
		<!-- 提示 -->
		<div v-if="isModify" class="prompt-text">
			提交后不能再修改，请确认后提交。
		</div>
		<!-- 按钮 -->
		<div v-if="isModify" class="btn-wrap">
			<el-button @click="addFn">添加</el-button>
			<el-button class="primary-btn" type="primary" @click="showPromptFn">提交</el-button>
		</div>
	</div>
</template>

<script>
import { bubbleSort } from '@/utils/common';
export default {
	name: 'level-setting',
	data() {
		return {
			isModify: false,
			list: [],
			addList: {
				level: 0,
				growth: 0,
				discount: 0
			}
		};
	},
	created() {
		this.init();
	},
	methods: {
		init() {
			this._list();
		},
		_list() {
			this.$service.level.list().then(res => {
				if (this.$util.isEmpty(res)) return false;
				this.isModify = res.gradeSwitch != 0;
				this.list = bubbleSort(res.list);
			});
		},
		delFn(index) {
			this.list.splice(index, 1);
			this.$message.success('删除成功!');
		},
		addFn() {
			let addList = JSON.parse(JSON.stringify(this.addList));
			addList.level = this.list.length + 1;
			this.list.push(addList);
		},
		confirmFn() {
			for (let i in this.list) {
				this.list[i].level = parseInt(i) + 1;
			}
			let arr = [];
			for (let i in this.list) {
				let { level, growth, discount } = this.list[i];
				arr.push([level, growth, discount]);
			}
			this.$service.level.updateLevel({ list: arr }).then(res => {
				this.isModify = false;
				this.$message.success('设置成功!');
				this.showPrompt = false;
			});
		},
		showPromptFn() {
			this.$confirm('提交后不能再修改，请谨慎操作。 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.confirmFn();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.list-wrap {
	width: 600px;
	background-color: #fff;
	margin: 10px;
	border: 1px solid $borderColor;
	border-bottom: 0;
	.list-tit {
		@include disFlex(center, space-between);
		color: $fontColor3;
		background-color: $backColor;
		padding: 14px;
		.list-tit-inp {
			width: 116px;
			text-align: center;
		}
	}
	.list {
		@include disFlex(center, space-between);
		height: 50px;
		padding: 0 16px;
		border-bottom: 1px solid $borderColor;
		.list-vip {
			width: 64px;
			text-align: center;
		}
		.level-img {
			/deep/.vip-text {
				left: 22px;
			}
		}
		.setting-inp {
			width: 116px;
			height: 36px;
			border: 1px solid $borderColor;
			border-radius: 2px;
			text-align: center;
		}
		.setting-span {
			font-size: 16px;
		}
		.list-option {
			.iconfont {
				color: $fontColor3;
				font-size: 18px;
			}
		}
	}
}
.prompt-text {
	padding: 16px 16px 30px 16px;
	color: $fontColor3;
}
.btn-wrap {
	margin-left: 160px;
	.primary-btn {
		margin-left: 100px;
	}
}
</style>