设置 客户等级 图标

store/src/admin/setting/level.vue

@@ -1,181 +1,194 @@
 <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>
+  <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}`" :vipImg="`${constant.imgUrl}/retail/interest/vip.png`" />
+          </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'
+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'
+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()
-			}
-		}
-	}
-}
+  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;
+	  if(addList.level > 9){
+		  this.$msg("最多9个等级")
+		  return false
+	  }
+      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);
-		}
-	}
+.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>

store/src/components/module/app-vip.vue

@@ -1,40 +1,49 @@
 <template>
-	<div class="app-vip-module">
-		<img class="vip-img" :src="`${this.$constant.imgUrl}/retail/interest/vip.png`" alt mode="widthFix" />
-		<div class="vip-text">{{ text }}</div>
-	</div>
+  <div class="app-vip-module">
+    <img
+      class="vip-img"
+      :src="vipImg"
+      alt
+      mode="widthFix"
+    />
+    <div class="vip-text">{{ text }}</div>
+  </div>
 </template>
 
 <script>
 export default {
-	name: 'app-vip-module',
-	props: {
-		text: {
-			type: String,
-			default: 'VIP'
-		}
-	},
-	data() {
-		return {
-			constant: this.$constant
-		}
+  name: "app-vip-module",
+  props: {
+    text: {
+      type: String,
+      default: "VIP"
+    },
+	vipImg:{
+		type:String,
+		default:''
 	}
-}
+  },
+  data() {
+    return {
+      constant: this.$constant
+    };
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-	.app-vip-module {
-		position: relative;
-        width: 104px;
-		.vip-img {
-            width: 100%;
-		}
-		.vip-text {
-			position: absolute;
-			top: 2px;
-			left: 46px;
-			color: #fff;
-			transform: scale(0.9);
-		}
-	}
+.app-vip-module {
+  position: relative;
+  width: 104px;
+  .vip-img {
+    width: 100%;
+  }
+  .vip-text {
+    position: absolute;
+    top: 2px;
+    left: 46px;
+    color: #fff;
+    transform: scale(0.9);
+  }
+}
 </style>