front-end/mobile-code/src/admin/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">
						<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">
			<div class="admin-button-com big" @click="addFn">添加</div>
			<div class="admin-button-com blue big" @click="showPromptFn">提交</div>
		</div>
		<!-- 删除提示 -->
		<modal-module :show="showPrompt" @cancel="modalCancel" @click="promptModalClick" title="确认无误提交？" content="提交后将不能再次修改" color="#333" :size="32" padding="30rpx 30rpx"></modal-module>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import appVipModule from '@/components/module/app-vip'
import AppWrapperEmpty from '@/components/app-wrapper-empty'
import ModalModule from '@/components/plugin/modal'
// api
import { bubbleSort } from '@/utils/common'
import { getList, updateLevel } from '@/api/level'
export default {
	name: 'level-setting',
	components: {
		appVipModule,
		AppWrapperEmpty,
		ModalModule
	},
	data() {
		return {
			isModify: false,
			list: [],
			addList: {
				level: 0,
				growth: 0,
				discount: 0
			},
			showPrompt: false
		}
	},
	onLoad() {
		this.init()
	},
	methods: {
		init() {
			this._getList()
		},
		_getList() {
			return getList().then(res => {
				let data = res.data
				if (!data) return false
				this.isModify = res.data.gradeSwitch != 0
				data = bubbleSort(data.list)
				this.list = data
			})
		},
		delFn(index) {
			this.list.splice(index, 1)
			this.$msg('删除成功!')
		},
		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])
			}
			updateLevel({ list: arr }).then(res => {
				this.isModify = false
				this.$msg('设置成功!')
				this.showPrompt = false
			})
		},
		showPromptFn() {
			this.showPrompt = true
		},
		promptModalClick(e) {
			let index = e.index
			if (index === 0) {
				this.showPrompt = false
			} else {
				this.confirmFn()
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.list-wrap {
		background-color: #fff;
		.list-tit {
			@include disFlex(center, space-between);
			color: $fontColor3;
			background-color: $backColor;
			padding: 30px 30px 20px 30px;
			.list-tit-inp {
				width: 230px;
				text-align: center;
			}
		}
		.list {
			@include disFlex(center, space-between);
			height: 100px;
			padding: 0 30px;
			border-bottom: 2px solid $borderColor;
			.level-img {
				/deep/.vip-text {
					left: 42px;
				}
			}
			.setting-inp {
				width: 230px;
				height: 70px;
				border: 2px solid $borderColor;
				border-radius: 4px;
				text-align: center;
			}
			.setting-span {
				font-size: 32px;
			}
			.list-option {
				.iconfont {
					color: $fontColor3;
					font-size: 36px;
				}
			}
		}
	}
	.prompt-text {
		padding: 30px 30px 60px 30px;
		color: $fontColor3;
	}
	// 按钮
	.btn-wrap {
		width: calc(100% - 60px);
		margin: 0 30px;
		@include disFlex(center, space-between);
		.admin-button-com {
			width: calc(48% - 40px);
		}
	}
</style>