JiangNingUmale-h5/subEnterprise/activity/activity - 副本.vue

<template>
	<view class="app-container">
		<u-navbar leftText="返回" title="店铺活动管理" :autoBack="true" :placeholder="true" />
		<view class="list-item active view-global" v-for="(item, index) in applyList" :key="index">
			<view class="" @click="goactivitydetails(item)">
				<view class="item-header" :class="bgmImg(item.activeState)">
					<view class="item-header-font" >
						{{ item.activeState | activeState }}
					</view>
				</view>

				<view class="item-cell">
					<view class="cell-lable">活动名称：</view>
					<view class="cell-value">{{ item.activeName }}</view>
				</view>
				<view class="item-cell">
					<view class="cell-lable">活动时间：</view>
					<view class="cell-value">{{ item.activeStart }}至{{ item.activeEnd }}</view>
				</view>
				<view class="item-cell">
					<view class="cell-lable">活动内容：</view>
					<view class="cell-value">{{ item.activeContent }}</view>
				</view>
				<view class="item-cell" style="align-items: flex-start">
					<view class="cell-lable">活动地点：</view>
					<view class="cell-value">{{ item.activePoint }}</view>
				</view>
			<!-- 	<view class="item-cell" style="align-items: flex-start">
					<view class="cell-lable">参与条件：</view>
					<view class="cell-value">{{ item.joinRequire }}</view>
				</view> -->
				<!-- <view class="item-cell" style="align-items: flex-start">
					<view class="cell-lable">活动状态：</view>
					<view class="cell-value" :style="{ color: activeStateColor(item.activeState) }">
						{{ item.activeState | activeState }}
					</view>
				</view> -->
			</view>
			<!-- 			<view class="cell-btn">
				<u-button v-show="item.activeState == 2" text="终止活动" size="small"
					color="linear-gradient(90deg, #FF4B4B 0%, #FA4D4D 100%)" :custom-style="{
            width: '130rpx',
            height: '65rpx',
            margin: '0',
          }" @click="handleUpdate(item)"></u-button>
				<u-button v-show="item.activeState == 1" text="取消活动" size="small"
					color="linear-gradient(90deg, #F18939 0%, #F6A53C 100%)" :custom-style="{
            width: '130rpx',
            height: '65rpx',
            margin: '0',
          }" @click="handleUpdate(item)"></u-button>
			</view> -->
		</view>
		<fixed-buttom title="新增活动" @click="handleAdd()"></fixed-buttom>
	</view>
</template>

<script>
	import {
		listActivity,
		updateActivity
	} from "../../api/jn/apply";

	export default {
		data() {
			return {
				// 表单参数
				form: {},

				applyList: [
				// 	{
				// 	activeName: "商铺活动",
				// 	activeStart: "2024-1-17",
				// 	activeEnd: "2024-1-19",
				// 	activeContent: "欢庆商铺活动",
				// 	activePoint: "南京",
				// 	joinRequire: "良好资质",
				// 	activeState: 1,
				// },{
				// 	activeName: "商铺活动",
				// 	activeStart: "2024-1-17",
				// 	activeEnd: "2024-1-19",
				// 	activeContent: "欢庆商铺活动",
				// 	activePoint: "南京",
				// 	joinRequire: "良好资质",
				// 	activeState: 2,
				// },{
				// 	activeName: "商铺活动",
				// 	activeStart: "2024-1-17",
				// 	activeEnd: "2024-1-19",
				// 	activeContent: "欢庆商铺活动",
				// 	activePoint: "南京",
				// 	joinRequire: "良好资质",
				// 	activeState: 3,
				// },
				],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					activeName: null,
					activeStart: null,
					activeEnd: null,
					activeContent: null,
					activePoint: null,
					joinRequire: null,
					activeState: null,
					createId: null,
					updateId: null,
					gridId: null,
					gridName: null,
					partId: null,
					partName: null,
				},
			};
		},
		onLoad() {
			this.getList();
		},
		onShow() {
			this.getList();
		},
		methods: {
			getList() {
				listActivity(this.queryParams).then((res) => {
					console.log(res);
					this.applyList = res.rows;
				});
			},
			//新增
			handleAdd() {
				uni.$u.route({
					url: "/subEnterprise/activity/add",
				});
			},
			//更新
			handleUpdate(item) {
				this.reset();
				item["activeState"] =
					item.activeState == 1 ?
					3 :
					item.activeState == 2 ?
					4 :
					item.activeState;
				this.form = item;
				console.log(this.form);
				updateActivity(this.form).then((response) => {
					this.$modal.msgSuccess("修改成功");
				});
			},
			activeStateColor: function(value) {
				switch (value) {
					case "1":
						return "#F75D23";
					case "2":
						return "#32B78B";
					case "3":
						return "#FF0000";
			
				}
			},
			bgmImg(value){
				switch (value) {
					case "1":
						return "item-headerorng";
					case "2":
						return "item-headergreen";
					case "3":
						return "item-headerred";
							
				}
			},
			// 店铺管理活动详情
			goactivitydetails(item) {
				uni.navigateTo({
					url: `/subEnterprise/activity/activitydetails?item=${JSON.stringify(item)}`,
				})
			},
			// 表单重置
			reset() {
				this.form = {
					id: null,
					activeName: null,
					activeStart: null,
					activeEnd: null,
					activeContent: null,
					activePoint: null,
					joinRequire: null,
					activeState: null,
					createId: null,
					createBy: null,
					createTime: null,
					updateId: null,
					updateBy: null,
					updateTime: null,
					remark: null,
					gridId: null,
					gridName: null,
					partId: null,
					partName: null,
				};
			},
		},
		filters: {
			activeState: function(value) {
				// console.log(value);
				switch (value) {
					case "1":
						return "审核中";
					case "2":
						return "审核通过";
					case "3":
						return "审核驳回";
					case" 4":
						return "已终止";
					case "5":
						return "已结束";
					default:
						return "";
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.app-container {
		.list-item {
			background-color: #fff;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 25rpx;
			margin-bottom: 30rpx;
			position: relative;

			.item-header {
				width: 200rpx;
				height: 200rpx;
				position: absolute;
				top: -30rpx;
				right: -30rpx;
				z-index: 2;
				
				background-size: 100% 100%;
				background-repeat: no-repeat;
					
				.item-header-font{
					color: #ffffff;
					font-size: 25rpx;
					transform: translate(25rpx, 60rpx) rotate(45deg);
					text-align: center;
				}
				
			}
			.item-headergreen{
				background-image: url("@/static/images/banner/green.png");
			}
			.item-headerred{
				background-image: url("@/static/images/banner/red.png");
			}
			.item-headerorng{
				background-image: url("@/static/images/banner/orng.png");
			}

			.item-cell {
				display: flex;
				align-items: center;
				margin: 20rpx 0;

				.cell-lable {
					width: 200rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #9da2ab;
				}

				.cell-value {
					flex: 1;
					font-size: 28rpx;
					font-weight: 400;
					color: #2e2f31;
				}
			}

			.cell-btn {
				display: flex;
				flex-direction: row-reverse;
			}

			&>view:not(.cell-btn) {
				margin-bottom: 20rpx;
			}
		}

		&>.list-item:last-child {
			margin-bottom: 0;
		}
	}
</style>