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') {
				//防止重复加载
				return;
			}
			//修改当前对象状态为加载中
			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>