LocalLivingServicesUniapp/pages/coupon/coupon.vue

<template>
	<view class="coupon-page">
		<view class="fix">
			<view class="top"></view>
			<view class="handle">
				<view class="head_left">
					<span class="cuIcon-back" @click="back"></span>
				</view>
				<span class="center">商家优惠券</span>
				<view class="head_right">
					<!-- <span class="cuIcon-search" @click="goSearch"></span> -->
					<view class="manage" @click="manage">
						添加
					</view>
				</view>
			</view>
			<!-- 顶部标签页 -->
			<view class="tab-container ">
				<view class="tab-bar flex justify-between items-center">
					<view v-for="(item, index) in tabList" :key="index" class="tab-item" :class="{ active: currentTab === index }"
						@click="onTabChange(index)">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
		<mescroll-uni class="list" :fixed="false" ref="mescrollRef" @up="getList" @init="mescrollInit" :use="false">

			<!-- 代金券列表 -->
			<view class="coupon-card" v-for="(item, index) in dataList[`couponList${currentTab}`]" :key="item.id"
				@click="handleDetail(item.id)" :class="{ 'disabled': item.status === 'expired' }">
				<!-- 顶部标题栏 -->
				<view class="card-header"
					:style="currentTab == 0 ? 'background: #EFFFFE' : currentTab == 1 ? 'background: #F4FAFF ' : 'background: #FFF7F3'">
					<image style=" vertical-align: top" :src="`/static/coupon/titlebg${currentTab + 1}.png`" mode="">
					</image>
					<view class="status" v-if="item.delFlag == '1'"
						:style="currentTab == 0 ? 'color: #2DAC9F' : currentTab == 1 ? 'color: #4183BC' : 'color: #DB6332'">
						销售中
					</view>
					<view class="status" v-else>{{ item.delFlag == '0' ? '待上架' : item.delFlag == '3' ? '已失效' : '' }}
					</view>
				</view>
				<view class="flex" style="padding: 14rpx 18rpx;">
					<!-- 优惠券金额 -->
					<view class="amount-section">
						<text class="amount" v-if="currentTab == 0">{{ item.parValue }}</text>
						<text class="amount" v-else :style="currentTab == 1 ? 'color: #278BE5' : 'color: #FB5308'">{{
                            item.contentInfo }}</text>
						<text class="unit" v-if="currentTab == 2">折</text>
						<text class="unit" v-else>元</text>
						<view class="use-condition" v-if="currentTab == 0 && item.voucherWay == '1'">售价{{
                            item.voucherWayInfo
                            }}元</view>
						<view class="use-condition" v-if="currentTab == 1 && item.contentConditions !== '0'">满{{
                            item.contentConditions }}元可抵扣</view>
						<view class="use-condition" v-if="currentTab == 2 && item.contentConditions !== '0'">满{{
                            item.contentConditions }}元可使用</view>
						<view class="use-condition" v-if="currentTab !== 0 && item.contentConditions == '0'">不限制条件使用
						</view>
					</view>

					<!-- 优惠券信息 -->
					<view class="info-section">
						<view class="info-item">
							<text class="dot">•</text>
							<text class="label" v-if="currentTab == 0">获取方式：</text>
							<text class="label" v-else>领取限制：</text>
							<text class="value" v-if="currentTab == 0">{{ item.voucherWay == '1' ? '购买' : '消费满' +
                                item.voucherWayInfo + '元可领取' }}</text>
							<text class="value" v-else>{{ item.couponWay == '1' ? '所有人可领取' : '本店消费可领' }}</text>
						</view>
						<view class="info-item">
							<text class="dot">•</text>
							<text class="label" v-if="currentTab == 0">使用条件：</text>
							<text class="label" v-else>适用范围：</text>
							<text class="value" v-if="currentTab == 0">{{ item.conditions == '0' ? '不限制' : '最低消费' +
                                item.conditions + '元' }}</text>
							<text class="value" v-else>{{
                                item.couponRange == '1' ? '本店可用' : item.couponRange == '2' ? '部分分类商品可用' : '部分分类商品不可用'
                                }}</text>
						</view>
						<view class="info-item">
							<text class="dot">•</text>
							<text class="label">有效期：</text>
							<text class="value">{{ item.beginTime + '/' + item.endTime }}</text>
						</view>
					</view>
				</view>

				<!-- 数量统计 -->
				<view class="stats-section flex"
					:class="currentTab == 0 ? 'backg-color1' : currentTab == 1 ? 'backg-color2' : 'backg-color3'">
					<text class="stat-item" v-if="currentTab == 0 && item.voucherWay == '1'">已购买：{{ item.payNumber }}</text>
					<text class="stat-item" v-else>已领取：{{ item.payNumber }}</text>
					<text class="stat-item">已使用：{{ item.useNumber }}</text>
					<text class="stat-item">总库存：{{ item.number }}</text>
				</view>

				<!-- 操作按钮 -->
				<view class="action-section">
					<text class="action-btn" v-if="item.delFlag == '0' || item.delFlag == '3'"
						@click.stop="handleAction('up', item)">上架</text>
					<text class="action-btn" v-if="item.delFlag == '1'" @click.stop="handleAction('down', item)">下架</text>
					<text class="action-btn" v-if="item.delFlag == '1' && item.voucherWay !== 1"
						@click.stop="handleAction('grant', item)">发放</text>
					<text class="action-btn" v-if="item.delFlag == '0' || item.delFlag == '3'"
						@click.stop="handleEdit(item.id)">编辑</text>
				</view>
			</view>
		</mescroll-uni>

		<u-select mode="single-column" :list="grantoptions" label-name="label" value-name="value" v-model="show"
			@confirm="confirm($event)"></u-select>
		<!-- 底部支付弹框 -->
		<u-popup v-model="showPaymentPopup" mode="center" :round="10">
			<view class="payment-popup">
				<view class="popup-header">
					<text class="popup-title">上架优惠券</text>
					<view class="popup-icon">
						<u-icon name="close" size="20" @click="closePaymentPopup"></u-icon>
					</view>
				</view>
				<view class="popup-concant flex align-center justify-center">
					<view>当前优惠券上架</view>
					<view>需重新设置有效时间</view>
				</view>

				<view class="action-buttons">
					<view class="cancel-btn" @click="closePaymentPopup">取消</view>
					<view class="confirm-btn" @click="handleEdit(selectRow.id)">去设置</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		USER_INFO
	} from "@/common/util/constants"

	export default {
		data() {
			return {
				showPaymentPopup: false,
				show: false,
				grantoptions: [{
						value: '1',
						label: '本店消费用户'
					},
					{
						value: '2',
						label: '本店特定商品消费用户'
					}
				],
				currentTab: 0,
				tabList: [{
						name: '代金券'
					},
					{
						name: '满减券'
					},
					{
						name: '折扣券'
					}
				],
				activeItemStyle: {
					backgroundColor: 'rgba(41, 121, 255, 0.1)',
					borderRadius: '32rpx',
					transition: 'all 0.3s'
				},
				dataList: {
					couponList0: [],
					couponList1: [],
					couponList2: [],
				},
				reductionList: [],
				discountList: [],
				selectRow: {},
				upOption: {
					page: {
						num: 0,
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
			}
		},
		methods: {
			closePaymentPopup() {
				this.showPaymentPopup = false
			},
			getList(page) {
				this.$http.post('/merchant/localVoucherInfo/list', {
					merchantId: uni.getStorageSync(USER_INFO).merchantId,
					pageSize: page.size,
					pageNo: page.num
				}).then(res => {
					if (res.data.success) {
						if (res.data.result.records == null && page.num == 1) {
							this.dataList.couponList0 = []
						} else {
							this.dataList.couponList0 = res.data.result.pages ? this.dataList.couponList0.concat(res.data.result
								.records) : this.dataList.couponList0
						}

						this.mescroll.endSuccess(res.data.result.records.length, res.data.result.total);
						uni.showTabBar()
					} else {
						this.dataList.couponList0 = []
						this.mescroll.endErr()
					}
				}).catch(() => {
					this.mescroll.endErr()
				})
			},
			getList1(page) {
				this.$http.post('/merchant/localCouponInfo/list', {
					merchantId: uni.getStorageSync(USER_INFO).merchantId,
					type: this.currentTab,
					pageSize: page.size,
					pageNo: page.num
				}).then(res => {
					if (res.data.success) {
						this.dataList['couponList' + this.currentTab] = res.data.result.pages ? this.dataList['couponList' + this
							.currentTab].concat(res.data.result.records) : this.dataList['couponList' + this.currentTab]
					} else {
						this.$tip.error(res.data.message);
					}
				})
			},
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			handleAction(type, item) {
				this.selectRow = item
				if (type == 'grant') {
					this.show = true
				}
				if (type == 'up' || type == 'down') {
					uni.showModal({
						title: type == 'up' ? '上架优惠券' : '下架优惠券',
						content: type == 'up' ? '当前优惠券确定上架？' : '当前优惠券确定下架？',
						success: (res) => {
							if (res.confirm) {
								let upDown = ['/merchant/localVoucherInfo/editUpper', '/merchant/localCouponInfo/editUpper',
									'/merchant/localCouponInfo/editUpper'
								]
								this.$http.get(upDown[this.currentTab], {
									params: {
										id: item.id,
										delFlag: type == 'up' ? '1' : '0'
									}
								}).then(res => {
									if (res.data.success) {
										let page = {
											num: 1,
											size: 10
										}
										if (this.currentTab == 0) {
											this.dataList.couponList0 = []
											this.getList(page)
										} else {
											this.dataList['couponList' + this.currentTab] = []
											this.getList1(page)
										}
									} else {
										if (res.data.message == "当前优惠卷上架需重新设置有效时间") {
											this.showPaymentPopup = true
											// uni.showModal({
											//     title: '上架优惠券' ,
											//     content:`当前优惠卷上架}`,
											//     success: (res) => {
											//     }
											// })
										} else {
											this.$tip.error(res.data.message);
										}
									}
								})
							}
						}
					})
				}

			},
			confirm(e) {
				let data = {
					beginTime: this.selectRow.beginTime,
					endTime: this.selectRow.endTime,
					consumerId: this.selectRow.id,
					type: this.currentTab == '0' ? '3' : this.currentTab
				}
				if (e[0].value == 1) {
					uni.navigateTo({
						url: '/pages/coupon/storeUsers?params=' + encodeURIComponent(JSON.stringify(data))
					})
				} else {
					uni.navigateTo({
						url: '/pages/coupon/activity?row=' + encodeURIComponent(JSON.stringify(data))
					})
				}

			},
			manage() {
				
				if (this.currentTab == '0') {
					uni.navigateTo({
						url: '/pages/coupon/creatcoupon'
					})
				}
				if (this.currentTab == '1') {
					uni.navigateTo({
						url: '/pages/coupon/creatReduction'
					})
				}
				if (this.currentTab == '2') {
					uni.navigateTo({
						url: '/pages/coupon/creatDiscount'
					})
				}
				this.$store.state.shopSelectedIds = []

			},
			onTabChange(index) {
				this.dataList={
					couponList0: [],
					couponList1: [],
					couponList2: [],
				}
				let page = {
					num: 1,
					size: 10
				}
				this.currentTab = index
				if (index == 0) {
					this.getList(page)
				} else {
					this.getList1(page)

				}
			},
			// 详情
			handleDetail(id) {
				uni.navigateTo({
					url: `/pages/coupon/couponDetail?id=${id}&tab=${this.currentTab}`
				})
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			handleEdit(id) {
				// TODO: 实现编辑逻辑
				if (this.currentTab == '0') {
					uni.navigateTo({
						url: `/pages/coupon/creatcoupon?id=${id}`
					})
				}
				if (this.currentTab == '1') {
					uni.navigateTo({
						url: `/pages/coupon/creatReduction?id=${id}`
					})
				}
				if (this.currentTab == '2') {
					uni.navigateTo({
						url: `/pages/coupon/creatDiscount?id=${id}`
					})
				}
				this.$store.state.shopSelectedIds = []
			}
		},
		onLoad(options) {
			if (options && options.tab) {
				this.currentTab = options.tab
			} else {
				this.currentTab = 0
			}
		},
		onShow() {
			let page = {
				num: 1,
				size: 10
			}
			this.showPaymentPopup = false
			// if (this.currentTab == 1 || this.currentTab == 2) {
			// 	this.getList1(page)
			// }
		},
	}
</script>

<style lang="scss" scoped>
	.coupon-page {
		width: 100%;
		height: 100vh;
		background: #F7F8FC;
		display: flex;
		flex-direction: column;
		position: fixed;

	}

	.tab-container {
		padding: 16rpx 32rpx;
		background-color: #ffffff;
	}

	.tab-bar {
		position: relative;

		.tab-item {
			// padding: 12rpx 40rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			width: 33.33%;
			font-size: 28rpx;
			color: #666;
			position: relative;
			border-radius: 8px;
			// margin-right: 20rpx;
			transition: all 0.3s;

			&.active {
				color: #449AFF;
				background: rgba(68, 154, 255, 0.05);
				font-weight: 500;
				border: 1px solid #449AFF;
			}

			&:last-child {
				margin-right: 0;
			}
		}
	}


	.coupon-card {
		background: linear-gradient(to right, #ffffff, #f8fbff);
		border-radius: 12rpx;
		// padding: 30rpx;
		margin: 26rpx 32rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			// margin-bottom: 20rpx;
			padding: 10rpx 18rpx;


			image {
				width: 230rpx;
				height: 50rpx;
			}

			.status {
				font-size: 26rpx;
				color: #999;
			}
		}

		.amount-section {
			width: 40%;
			text-align: center;

			.amount {
				font-size: 80rpx;
				font-weight: bold;
				color: #02C1AB
			}

			.unit {
				font-size: 22rpx;
				color: #999999;
				margin-left: 4rpx;
			}

			.use-condition {
				margin-top: 10rpx;
				font-size: 22rpx;
				color: #888888;
			}
		}

		.info-section {
			.info-item {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				font-size: 26rpx;
				color: #666;

				.dot {
					color: #999;
					margin-right: 8rpx;
				}

				.label {
					color: #999;
				}

				.value {
					color: #333;
				}
			}
		}

		.backg-color1 {
			color: #2BC0AE;
			background: linear-gradient(90deg, #EFFFFE 0%, #F8FFFF 100%);
		}

		.backg-color2 {
			color: #5399D6;
			background: linear-gradient(90deg, #F4FAFF 0%, #FAFDFF 100%);
		}

		.backg-color3 {
			color: #E97C4F;
			background: linear-gradient(90deg, #FFF7F3 0%, #FFFBF8 100%);
		}

		.stats-section {
			display: flex;
			margin: 0 16rpx 13rpx 16rpx;
			padding: 13rpx 0;
			font-size: 24rpx;


			.stat-item {
				// margin-right: 40rpx;
				width: 33.33%;
				border-right: 1px solid #D4ECEA;
				text-align: center;

				&:last-child {
					margin-right: 0;
				}
			}

			.stat-item:last-child {
				border-right: none;
			}
		}

		.action-section {
			display: flex;
			justify-content: flex-end;
			// margin-top: 30rpx;
			border-top: 1px solid #EEEEEE;
			padding: 16rpx;

			.action-btn {
				border-radius: 4px 4px 4px 4px;
				margin-left: 27rpx;
				width: 190rpx;
				height: 43rpx;
				line-height: 43rpx;
				font-size: 24rpx;
				color: #333333;
				text-align: center;
				border: 1px solid #CCCCCC;
			}
		}
	}

	.handle {
		// height: 112rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 78rpx 24rpx 32rpx 24rpx;
		position: relative;
		background: linear-gradient(90deg, #D8EAFF 4%, #E6F8F8 67%, #DDF1FA 100%), linear-gradient(#FFFFFF 0%, rgba(247, 248, 252, 0) 100%);

		.head_left {
			font-size: 40rpx;
		}

		.center {
			position: absolute;
			left: 50%;
			top: 65%;
			transform: translate(-50%, -50%);
			font-size: 36rpx;
			font-weight: 600;
		}

		.head_right {
			display: flex;
			justify-content: space-between;
			align-items: center;

			span {
				width: 40rpx;
				height: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.manage {
				// width: 150rpx;
				margin-left: 28rpx;
			}
		}
	}

	.payment-popup {
		padding: 30rpx;
		width: 570rpx;
		background: #FFFFFF;
		border-radius: 16rpx;

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #EEEEEE;

			.popup-title {
				font-size: 34rpx;
				color: #333;
				font-weight: 500;
				transform: translateX(180rpx);
			}

			.popup-icon {
				background: #DEDEDE;
				width: 39rpx;
				height: 39rpx;
				text-align: center;
				border-radius: 50%
			}
		}

		.popup-concant {
			height: 180rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			flex-direction: column;

			view {
				margin: 16rpx;
			}
		}

		.payment-title {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 20rpx;
		}


		.action-buttons {
			display: flex;
			margin-top: 20rpx;
			gap: 20rpx;
			padding-top: 20rpx;
			border-top: 1rpx solid #EEEEEE;

			.cancel-btn,
			.confirm-btn {
				flex: 1;
				height: 78rpx;
				line-height: 78rpx;
				text-align: center;
				border-radius: 44rpx;
				font-size: 28rpx;
			}

			.cancel-btn {
				background: #F5F6FA;
				color: #666;
			}

			.confirm-btn {
				background: #5B9CF9;
				color: #FFFFFF;
			}
		}
	}

	.fix {
		width: 100%;
		height: auto;
		background: #F7F8FC;
		position: sticky;
		top: 0px;

		/*#ifdef APP-PLUS*/
		.top {
			width: 100%;
			height: var(--status-bar-height);
			background: linear-gradient(87deg, #E2F4F8 0%, #A3CDFF 100%), linear-gradient(to bottom, #FFFFFF, #FFFFFF);
		}

		/*  #endif  */
	}

	.list {
		flex: 1;
		width: 100%;
		overflow-y: auto;
		background: #FFFFFF;

	}
</style>