2023-11-113

src/pages/user/user_discount/index.vue

@@ -0,0 +1,320 @@
+<template>
+	<div :style="bgcolors">
+		<div class="i-layout-page-header header-title">
+			<span class="ivu-page-header-title mr20">{{ $route.meta.title }}</span>
+			<div>
+				<div style="float: right">
+					<el-button class="bnt" type="primary" @click="save">保存</el-button>
+				</div>
+			</div>
+		</div>
+		<div class="box-wrapper">
+			<div class="content">
+				<div class="right-box">
+					<div class="hot_imgs">
+						<div class="list-box">
+							<div class="item" v-for="(item, index) in tabList.list" :key="index">
+								<div class="info">
+									<div class="info-item">
+										<span>礼包倍数：</span>
+										<div class="input-box">
+											<el-input v-model="item.award_ratio" placeholder="请设置礼包倍数" />
+										</div>
+									</div>
+									<div class="info-item">
+										<span>折扣：</span>
+										<div class="input-box">
+											<el-input v-model="item.discount" placeholder="请设置折扣" />
+										</div>
+									</div>
+								</div>
+								<div class="delect-btn" @click.stop="bindDelete(item, index)">
+									<i class="el-icon-circle-close" style="font-size: 24px" />
+								</div>
+							</div>
+						</div>
+						<template>
+							<div class="add-btn">
+								<el-button type="primary" ghost
+									style="width: 100px; height: 35px; background-color: var(--prev-color-primary); color: #ffffff"
+									@click="addBox">添加
+								</el-button>
+							</div>
+						</template>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex';
+	import {
+		groupDataListApi,
+		groupSaveApi
+	} from '@/api/system';
+	import draggable from 'vuedraggable';
+	import {
+		getCookies
+	} from '@/libs/util';
+
+	export default {
+		name: 'cash_exchange',
+		components: {
+			draggable,
+		},
+		computed: {
+			bgcolors() {
+				return {
+					'--color-theme': this.bgCol,
+				};
+			},
+		},
+		data() {
+			return {
+				bgCol: '',
+				bgimg:0,
+				name: 'user_discount',
+				loading: false,
+				url: '',
+				pageId: 0,
+				theme3: 'light',
+				tabList: [],
+				lastObj: {
+					add_time: '',
+					recommend_speed: '',
+					exchange_ratio: '',
+					gid: '',
+					id: '',
+					img: '',
+					link: '',
+					sort: '',
+					status: 1,
+				},
+				loadingExist: false,
+				header: {}
+			};
+		},
+		mounted() {
+			this.info();
+
+		},
+		methods: {
+			color() {
+				getColorChange('color_change').then((res) => {
+					switch (res.data.status) {
+						case 1:
+							this.bgCol = '#3875EA';
+							this.bgimg = 1;
+							break;
+						case 2:
+							this.bgCol = '#00C050';
+							this.bgimg = 2;
+							break;
+						case 3:
+							this.bgCol = '#E93323';
+							this.bgimg = 3;
+							break;
+						case 4:
+							this.bgCol = '#FF448F';
+							this.bgimg = 4;
+							break;
+						case 5:
+							this.bgCol = '#FE5C2D';
+							this.bgimg = 5;
+							break;
+					}
+				});
+			},
+			// 添加表单
+			info() {
+				groupDataListApi({
+						config_name: this.name
+					}, 'setting/group_data')
+					.then(async (res) => {
+						this.tabList = res.data;
+					})
+					.catch((res) => {
+						console.log(res,'res');
+						this.loading = false;
+						this.$message.error(res.msg);
+					});
+			},
+			addBox() {
+				if (this.tabList.list.length == 0) {
+					this.tabList.list.push(this.lastObj);
+					this.lastObj = {
+						add_time: '',
+						recommend_speed: '',
+						exchange_ratio: '',
+						gid: '',
+						id: '',
+						img: '',
+						link: '',
+						sort: '',
+						status: 1,
+					};
+				} else {
+					console.log(this.tabList.list.length);
+					if (this.tabList.list.length == 5) {
+						this.$message.warning('最多添加五张呦');
+					} else {
+						let obj = JSON.parse(JSON.stringify(this.lastObj));
+						this.tabList.list.push(obj);
+					}
+				}
+			},
+			// 删除
+			bindDelete(item, index) {
+				this.tabList.list.splice(index, 1);
+			},
+			save() {
+				groupSaveApi({
+						gid: this.pageId,
+						config_name: this.name,
+						data: this.tabList.list,
+					})
+					.then((res) => {
+						this.loadingExist = false;
+						this.$message.success(res.msg);
+					})
+					.catch((err) => {
+						this.loadingExist = false;
+						this.$message.error(err.msg);
+					});
+			},
+			// 删除
+			del(row, tit, num) {
+				let delfromData = {
+					title: tit,
+					num: num,
+					url: 'setting/group_data/' + row.id,
+					method: 'DELETE',
+					ids: '',
+				};
+				this.$modalSure(delfromData)
+					.then((res) => {
+						this.info();
+						this.$message.success(res.msg);
+					})
+					.catch((res) => {
+						this.$message.error(res.msg);
+					});
+			},
+		},
+	};
+</script>
+
+<style scoped lang="scss">
+	.save {
+		width: 100%;
+		margin: 0 auto;
+		text-align: center;
+		background-color: #fff;
+		bottom: 0;
+		padding: 16px;
+		border-top: 3px solid #f5f7f9;
+	}
+
+	.item {
+		margin-right: 15px;
+		border: 1px dashed #dbdbdb;
+		padding-bottom: 10px;
+		padding-right: 15px;
+		padding-top: 20px;
+	}
+
+	.content {
+		// width 510px;
+		.right-box {
+			margin-left: 40px;
+		}
+	}
+
+	.hot_imgs {
+		margin-bottom: 20px;
+
+		.list-box {
+			margin-top: 14px;
+
+			.item {
+				position: relative;
+				display: flex;
+				margin-top: 14px;
+
+				.move-icon {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					width: 30px;
+					height: 80px;
+					cursor: move;
+					color: #d8d8d8;
+				}
+
+
+				.info {
+					flex: 1;
+					margin-left: 22px;
+
+					.info-item {
+						display: flex;
+						align-items: center;
+						margin-bottom: 10px;
+						min-width: 150px;
+						flex-shrink: 0;
+						span {
+							// width 40px
+							font-size: 13px;
+						}
+
+						.input-box {
+							flex: 1;
+						}
+					}
+				}
+
+				.delect-btn {
+					position: absolute;
+					right: -12px;
+					top: -12px;
+					color: #999999;
+				}
+			}
+		}
+
+		.add-btn {
+			margin-top: 14px;
+		}
+	}
+
+
+	.bnt {
+		// width 80px!important
+	}
+
+	/deep/.ivu-page-header {
+		border-bottom: unset;
+		position: fixed;
+		z-index: 9;
+		width: 100%;
+	}
+
+	/deep/.i-layout-page-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.box-wrapper {
+		display: flex;
+		flex-wrap: nowrap;
+		padding: 20px;
+		background-color: #fff;
+		border-radius: 5px;
+		min-height: 600px;
+	}
+</style>

src/router/modules/user.js

@@ -156,5 +156,14 @@ export default {
       },
       component: () => import('@/pages/user/grade/agreement/index'),
     },
+	{
+	  path: 'user_discount/index',
+	  name: `${pre}user_discount`,
+	  meta: {
+	    auth: ['user-discount'],
+	    title: '报单用户折扣',
+	  },
+	  component: () => import('@/pages/user/user_discount/index')
+	}
   ],
 };