pz/pages/user/coupon.vue

<template>
	<view class="content">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<!-- 空白页 -->
				<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData()">
					<view v-for="(item, index) in tabItem.orderList" :key="index" class="main-item">
						<view class="main-item-top flex">
							<view class="main-item-top-bg">
								<image src="../../static/img/cardTop.png" mode=""></image>
							</view>
							<view class="main-item-top-left">
								<view class="main-item-title">{{ item.name }}</view>
								<view class="main-item-time">购买时间{{ item.create_time }}</view>
							</view>
							<view class="main-item-type">{{ item.type == 1 ? '时效卡' : '次卡' }}</view>
						</view>
						<view class="main-item-bottom">
							<view class="main-item-bottom-bg">
								<image src="../../static/img/cardbottom.png" mode=""></image>
							</view>
							<view class="flex">
								<view class="main-item-price">
									<text class="fh">卡券码:</text>
									{{ item.card }}
									<text class="time" @click="copy(item.card)">复制</text>
								</view>
								<view class="main-item-bottom-type" v-if="tabCurrentIndex == 2">已过期</view>
								<view class="main-item-info-right" v-if="tabCurrentIndex == 0">
									<view class="main-item-info-font"
										@click="navTo('/pages/user/mycardDetail?id=' + item.id)">查看详情</view>
									<view class="main-item-info-icon">
										<image src="../../static/img/img39.png" mode=""></image>
									</view>
								</view>
							</view>
							<view class="main-item-info flex">
								<view class="main-item-info-left" v-if="tabCurrentIndex == 1 && item.type == 1">
									{{ item.end_time }}后失效</view>
								<view class="main-item-info-left" v-if="tabCurrentIndex == 1 && item.type == 2">
									总使用次数{{ item.number }}</view>
								<view class="flex" v-if="tabCurrentIndex == 0 && !item.show">
									<view class="info">
										激活密码：
										<text v-for="l in item.pwd.length">*</text>
									</view>
									<image class="image" src="../../static/img/img43.png" @click="showPick(item)">
									</image>
									<!-- <view class="copy">复制</view> -->
								</view>
								<view class="flex" v-if="tabCurrentIndex == 0 && item.show">
									<view class="info">激活密码：{{ item.pwd }}</view>
									<image class="image" src="../../static/img/img29.png" @click="showPick(item)">
									</image>
									<view class="copy" @click="copy(item.pwd)">复制</view>
								</view>
								<view class="main-item-info-left" v-if="tabCurrentIndex == 2">卡券已被激活</view>
								<view class="main-item-info-btn" @click="jihuo(item)" v-if="tabCurrentIndex == 0">一键激活
								</view>
								<view class="main-item-info-right" v-if="tabCurrentIndex != 0">
									<view class="main-item-info-font"
										@click="navTo('/pages/user/mycardDetail?id=' + item.id)">查看详情</view>
									<view class="main-item-info-icon">
										<image src="../../static/img/img39.png" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</view>

					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="btn" @click="openPopup()">卡券激活</view>
		<uni-popup ref="popup" type="center">
			<view class="img1">
				<image src="../../static/img/jh3.png" mode=""></image>
			</view>
			<view class="popup-box">
				<view class="img">
					<image src="../../static/img/jh1.png" mode=""></image>
				</view>
				<view class="mian">
					<view class="delivery">
						<view class="title">卡券激活</view>
					</view>
					<view class="comfirm-box">
						<view class="input"><input type="text" v-model="card" placeholder="请输入卡号" /></view>
						<view class="input"><input type="text" v-model="pwd" placeholder="请输入密码" /></view>
					</view>
					<view class="popup-btn" @click="jihuo()">立即激活</view>
				</view>
			</view>
			<view class="x" @click="cancel()">
				<image src="../../static/img/jh2.png" mode=""></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import empty from '@/components/empty';
	import {
		getCouponsList,
		use_card
	} from '@/api/jdr.js';
	import uniCopy from '@/utils/uni-copy.js';
	import {
		getTime
	} from '@/utils/rocessor.js';
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				tabCurrentIndex: 0,
				pwd: '',
				card: '',
				navList: [{
						state: 1,
						text: '未使用',
						loadingType: 'more',
						orderList: [],
						page: 1, //当前页数
						limit: 10 //每次信息条数
					},
					{
						state: 2,
						text: '使用中',
						loadingType: 'more',
						orderList: [],
						page: 1, //当前页数
						limit: 10 //每次信息条数
					},
					{
						state: 3,
						text: '已失效',
						loadingType: 'more',
						orderList: [],
						page: 1, //当前页数
						limit: 10 //每次信息条数
					}
				]
			};
		},
		onLoad(options) {
			this.loadData();
		},
		methods: {
			//返回首页
			navTo(url) {
				uni.navigateTo({
					url
				});
			},
			showPick(item) {
				item.show = !item.show;
			},
			//获取订单列表
			loadData(source) {
				//将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let state = navItem.state;
				if (source === 'shua') {
					navItem.loaded = false;
					navItem.page = 1;
					navItem.limit = 10;
					navItem.loadingType = 'more';
					navItem.orderList = [];
				}
				if (source === 'tabChange' && navItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					return;
				}
				if (navItem.loadingType === 'loading' || navItem.loadingType === 'noMore') {
					//防止重复加载
					return;
				}
				console.log(navItem.loadingType, '状态');
				//修改当前对象状态为加载中
				navItem.loadingType = 'loading';
				getCouponsList({
						page: navItem.page,
						limit: navItem.limit,
						status: state
					})
					.then(({
						data
					}) => {
						data.forEach(e => {
							e.show = false;
							e.end_time = getTime(e.end_time);
						});
						navItem.orderList = navItem.orderList.concat(data);
						console.log(navItem.orderList);
						navItem.page++;
						if (navItem.limit == data.length) {
							// 判断是否还有数据，有改为more，没有改为noMore
							navItem.loadingType = 'more';
							return;
						} else {
							navItem.loadingType = 'noMore';
						}
						uni.hideLoading();
						this.$set(navItem, 'loaded', true);
					})
					.catch(e => {
						console.log(e);
					});
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			copy(value) {
				let content = value; //需要复制的内容
				console.log('复制的内容:', content);
				// content = typeof content === 'string' ? content : content.toString(); // 复制内容，必须字符串，数字需要转换为字符串
				const result = uniCopy({
					content
				});
				if (result === false) {
					uni.showToast({
						title: '不支持'
					});
				} else {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				}
			},
			openPopup() {
				this.$refs.popup.open();
			},
			// 弹窗 - 取消
			cancel() {
				this.card = '';
				this.pwd = '';
				this.$refs.popup.close();
			},
			jihuo(item) {
				const obj = this;
				let card = '';
				let pwd = '';
				if (item) {
					card = item.card;
					pwd = item.pwd;
				} else {
					card = this.card;
					pwd = this.pwd;
				}
				if (card == '') {
					return this.$api.msg('请填写卡号');
				}
				if (pwd == '') {
					return this.$api.msg('请填写密码');
				}
				uni.showModal({
					title: '提示',
					content: '是否激活该卡?',
					success: function(res) {
						if (res.confirm) {
							use_card({
								card: card,
								pwd: pwd
							}).then(e => {
								uni.showModal({
									title: '提示',
									content: '激活卡片成功'
								});
								obj.loadData('shua');
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	// 卡卷可用时颜色
	$card-color-action: #fc4141;

	page,
	.content {
		background: $page-color-base;
		height: 100%;
	}

	.navbar {
		display: flex;
		height: 40px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item:first-child {
			border-left: none;
		}

		.nav-item {
			border-left: 1px solid #e7e7e7;
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: #24a17d;
			}
		}
	}

	.swiper-box {
		height: calc(100% - 100px);

		.tab-content {
			padding: 25rpx;
		}
	}

	// uni-load-more
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80rpx;
		align-items: center;
		justify-content: center;
	}

	.main-item {
		.main-item-top {
			align-items: flex-start;
			width: 702rpx;
			height: 150rpx;
			position: relative;

			.main-item-top-bg {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				width: 702rpx;
				height: 150rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.main-item-top-left {
				position: relative;
				z-index: 2;
				padding: 40rpx 0 0 30rpx;
				line-height: 1;

				.main-item-title {
					font-size: 42rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #c99f62;
				}

				.main-item-time {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #d6d1d1;
				}
			}

			.main-item-type {
				padding: 56rpx 24rpx 0 0;
				position: relative;
				z-index: 2;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #d6d1d1;
			}
		}

		.main-item-bottom {
			width: 702rpx;
			height: 176rpx;
			position: relative;
			padding: 30rpx 30rpx 0;
			line-height: 1;

			.main-item-bottom-bg {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				width: 702rpx;
				height: 176rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.main-item-price {
				width: 100%;
				position: relative;
				z-index: 2;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ff6f0f;

				.fh {
					color: #333333;
				}

				.time {
					display: inline-block;
					margin-left: 4rpx;
					color: #333333;
					text-decoration: underline;
				}
			}

			.main-item-bottom-type {
				position: relative;
				z-index: 2;
				flex-shrink: 0;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.main-item-info-right {
				position: relative;
				z-index: 2;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				line-height: 1;

				.main-item-info-font {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					margin-right: 10rpx;
				}

				.main-item-info-icon {
					position: relative;
					top: -10rpx;
					width: 19rpx;
					height: 19rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.main-item-info {
				position: relative;
				z-index: 2;
				margin-top: 20rpx;

				.main-item-info-left {
					width: 100%;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}

				.main-item-info-btn {
					width: 127rpx;
					height: 44rpx;
					background: #ff6f0f;
					border-radius: 22rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
					line-height: 44rpx;
					text-align: center;
				}
			}
		}
	}

	.image {
		width: 44rpx;
		height: 30rpx;
	}

	.info {
		width: 350rpx;
		margin-right: 10rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #666666;
	}

	.copy {
		margin-left: 10rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-decoration: underline;
		color: #333333;
	}

	.list-scroll-content {
		height: 100%;
	}

	.btn {
		margin: 10rpx auto 0;
		width: 622rpx;
		height: 85rpx;
		background: #ff6f0f;
		border-radius: 15rpx;
		line-height: 85rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
	}

	.img1 {
		width: 560rpx;
		height: 182rpx;
		display: flex;
		justify-content: center;

		image {
			width: 462rpx;
			height: 182rpx;
		}
	}

	.popup-box {
		margin-top: -50rpx;
		width: 560rpx;
		background: #ffffff;
		border-radius: 30rpx;
		position: relative;
		padding-bottom: 50rpx;

		.img {
			position: relative;
			top: -80rpx;
			left: 0;
			width: 560rpx;
			height: 186rpx;
			display: flex;
			justify-content: center;

			image {
				width: 177rpx;
				height: 186rpx;
			}
		}

		.mian {
			margin-top: -44rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			// padding: 32rpx 32rpx;
			background-color: #ffffff;
			border-radius: 0 0 20rpx 20rpx;
			text-align: center;

			.delivery {
				font-size: 40rpx;
				color: #333333;
				display: flex;
				align-items: center;
				flex-direction: column;

				.title {}

				image {
					margin-top: 48rpx;
					width: 172rpx;
					height: 160rpx;
				}
			}

			.comfirm-box {
				margin-top: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.input {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					text-align: left;
					width: 439rpx;
					background: #f5f5f5;
					border-radius: 10rpx;
					margin-top: 20rpx;
					padding: 20rpx 26rpx;
				}
			}

			.popup-btn {
				width: 403rpx;
				height: 83rpx;
				background: #24a17d;
				border-radius: 42rpx;
				margin: 45rpx auto 0;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
				line-height: 83rpx;
				text-align: center;
			}
		}
	}

	.x {
		margin: 35rpx auto 0;
		width: 80rpx;
		height: 80rpx;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}
</style>