上传文件至 'pages/mine/coupon'

pages/mine/coupon/list.vue

@@ -0,0 +1,476 @@
+<template>
+	<view class="app-container">
+		<view class="tab-container">
+			<view class="item" :class="tabCurrent == 0 ? 'current':''" @tap="changeTab(0)">未使用({{count.wsy ? count.wsy : 0}})</view>
+			<view class="item" :class="tabCurrent == 1 ? 'current':''" @tap="changeTab(1)">已使用({{count.ysy ? count.ysy : 0}})</view>
+			<view class="item" :class="tabCurrent == 2 ? 'current':''" @tap="changeTab(2)">已过期({{count.ygq ? count.ygq : 0}})</view>
+		</view>
+		
+		<view class="list-container">
+			<block v-for="(item, index) in couponList" :key='index'>
+				<view class="item">
+					<view class="bg">
+						<image src="@/static/mine/coupon/bg_1.png" v-if="tabCurrent == 0"></image>
+						<image src="@/static/mine/coupon/bg_0.png" v-if="tabCurrent != 0"></image>
+					</view>
+					<view class="content">
+						<view class="left">
+							<view class="price">{{item.couponValue}}<text>元</text></view>
+							<view class="text" v-if="item.couponType == 'SATISFY'">满{{item.orderAmount}}可用</view>
+						</view>
+						<view class="right">
+							<view class="main">
+								<view class="row1 ellipsis-2" :class="tabCurrent == 0 ? '':'width'">{{item.couponName}}</view>
+								<view class="row2">
+									<view>使用时间：</view>
+									<view>{{item.activeStartTime | dateToYYmmdd2}}-{{item.activeEndTime | dateToYYmmdd2}}</view>
+								</view>
+							</view>
+							<view class="btn-group" v-if="tabCurrent == 0">
+								<view class="button white" @tap="toUseCoupon">去使用</view>
+								<!-- <view class="button red" @tap="shareCoupon(item.id)" v-if="userInfo.type == 'SERVICE'"><image src="@/static/icon/code.png"></image>分享</view> -->
+							</view>
+							<view class="tag" v-if="tabCurrent != 0">
+								<image src="@/static/mine/coupon/status_1.png" v-if="tabCurrent == 1"></image>
+								<image src="@/static/mine/coupon/status_2.png" v-if="tabCurrent == 2"></image>
+							</view>
+						</view>
+					</view>
+				</view>
+			</block>
+		</view>
+		<no-data v-if="!couponList.length" :showText="'空空如也'"></no-data>
+		<loading-text v-if="couponList.length"  :loading="loading" :noMore="noMore" ></loading-text>
+		
+		<!-- <view class="bottom-container">
+			<view class="button">兑换优惠码</view>
+		</view> -->
+		
+		<view class="global-mask" v-show="isShareDialog"></view>
+		<view class="share-dialog" v-show="isShareDialog">
+			<view class="content">
+				<image src="@/static/icon/close3.png" class="close" @tap="isShareDialog = false"></image>
+				<image src="@/static/mine/coupon/share.png" class="bg"></image>
+				<image :src="shareDetail.qrcode" class="code" @longpress="handleLongpress"></image>
+				<view class="logo">
+					<image :src="configInfo.minLogo2" mode="heightFix"></image>
+				</view>
+				<view class="tips" v-if="shareDetail.leftShareTimes > 0 && shareDetail.qrcode">长按二维码保存到手机</view>
+				<view class="noData" v-if="shareDetail.leftShareTimes <= 0">
+					<image src="@/static/mine/coupon/noData.png"></image>
+					<view>已超过可分享次数</view>
+					<view>该优惠券不可再分享</view>
+				</view>
+				<view class="text">可分享次数：{{shareDetail.leftShareTimes}}/{{shareDetail.shareTimes}}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {mapState} from 'vuex';
+	
+	export default {
+		data() {
+			return {
+				configInfo: uni.getStorageSync('configInfo'),
+				count: {}, // 优惠券数量统计
+				tabCurrent: 0, // 当前选择值
+				couponList: [], // 优惠券列表
+				pageNum: 1,
+				pageSize: 8,
+				noMore: false,
+				loading: false,
+				
+				isShareDialog: false,
+				shareDetail: {},
+			}
+		},
+		
+		computed:{
+			...mapState(['userInfo', 'isLogin', 'userId'])
+		},
+		
+		onLoad() {
+			this.getCount();
+			this.getCouponList();
+		},
+		
+		// 下拉刷新
+		onPullDownRefresh() {
+			this.pageNum = 1;
+			this.getCouponList();
+		},
+		
+		// 上拉加载
+		onReachBottom() {
+			this.getCouponList(1);
+		},
+		
+		methods: {
+			getCount() {
+				this.$axios({
+					url: '/coupon/count',
+					method: 'get',
+					params: {
+						userId: this.userId
+					},
+				}).then(res => {
+					this.count = res.data;
+				})
+			},
+			
+			getCouponList(loadMore) {
+				if(this.noMore && loadMore)return;
+				this.noMore = false
+				if(!loadMore){
+					this.pageNum = 1;
+				}else{
+					this.loading = true;
+				}
+				this.$axios({
+					url: '/coupon/list/page',
+					method: 'get',
+					params: {
+						pageNum: this.pageNum,
+						pageSize: this.pageSize,
+						type: this.tabCurrent,
+						userId: this.userId
+					},
+					isLoading: !loadMore
+				}).then(res => {
+					let _list = res.data.records;
+					let pageTotal = res.data.pages;
+					if(this.pageNum >= pageTotal){
+						this.noMore = true;
+					}
+					if (_list.length) {
+						this.pageNum += 1
+					}
+					if (loadMore) {
+						this.couponList = this.couponList.concat(_list);
+						this.loading = false;
+					} else {
+						this.couponList = _list;
+					}
+					
+					uni.stopPullDownRefresh();
+				})
+			},
+			
+			changeTab(tab) {
+				this.tabCurrent = tab;
+				this.getCouponList();
+			},
+			
+			// 去使用优惠券
+			toUseCoupon() {
+				uni.switchTab({
+				    url: '/pages/goods/classify'
+				});
+			},
+			
+			// 分享优惠券
+			shareCoupon(id) {
+				this.$axios({
+					url: '/coupon/transfer/qrcode',
+					method: 'get',
+					params: {
+						userId: this.userId,
+						userCouponId: id
+					},
+				}).then(res => {
+					this.shareDetail = res.data;
+					this.isShareDialog = true;
+				})
+			},
+			
+			handleLongpress() {
+				let that = this;
+				uni.showActionSheet({
+				    itemList: ['保存二维码'],
+				    success: function (res) {
+						if(res.tapIndex == 0) {
+							uni.downloadFile({
+							    url: that.shareDetail.qrcode,
+							    success: (res) => {
+							        if (res.statusCode === 200) {
+							            uni.saveImageToPhotosAlbum({
+											filePath: res.tempFilePath,
+											success: function () {
+												that.$successToast('保存成功');
+											}
+										});
+							        }
+							    }
+							});
+						}
+				    },
+				    fail: function (res) {
+				        console.log(res.errMsg);
+				    }
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.app-container {
+		background: #F4F2F2;
+		padding: 108rpx 20rpx 120rpx;
+		box-sizing: border-box;
+	}
+	
+	.tab-container {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		display: flex;
+		background: #FFFFFF;
+		.item {
+			flex: 1;
+			height: 88rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			position: relative;
+			&.current {
+				color: #FF3F42;
+				&::after {
+					content: '';
+					display: block;
+					width: 80rpx;
+					height: 6rpx;
+					background: #FF3F42;
+					position: absolute;
+					bottom: 0;
+					left: 50%;
+					margin-left: -40rpx;
+				}
+			}
+		}
+	}
+	.list-container {
+		.item {
+			position: relative;
+			margin-bottom: 20rpx;
+			.bg {
+				image {
+					width: 710rpx;
+					height: 160rpx;
+					display: block;
+				}
+			}
+			.content {
+				position: absolute;
+				left: 0;
+				top: 0;
+				width: 710rpx;
+				height: 160rpx;
+				display: flex;
+				align-items: center;
+				.left {
+					width: 240rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					flex-direction: column;
+					.price {
+						font-size: 60rpx;
+						color: #FFFFFF;
+						text {
+							font-size: 28rpx;
+							margin-top: 20rpx;
+						}
+					}
+					.text {
+						color: #FFFFFF;
+						font-size: 28rpx;
+					}
+				}
+				.right {
+					display: flex;
+					justify-content: space-between;
+					padding: 15rpx 20rpx;
+					width: 470rpx;
+					height: 160rpx;
+					box-sizing: border-box;
+					.main {
+						width: 300rpx;
+						height: 130rpx;
+						box-sizing: border-box;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+						.row1 {
+							font-size: 28rpx;
+							line-height: 32rpx;
+							&.width{
+								width: 330rpx;
+							} 
+						}
+						.row2 {
+							font-size: 24rpx;
+							color: #999999;
+							line-height: 28rpx;
+						}
+					}
+					.btn-group {
+						display: flex;
+						flex-direction: column;
+						justify-content: center;
+						padding-right: 8rpx;
+						.button {
+							width: 100rpx;
+							height: 40rpx;
+							border-radius: 40rpx;
+							font-size: 24rpx;
+							flex-shrink: 0;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							image {
+								width: 22rpx;
+								height: 22rpx;
+								display: block;
+								margin-right: 6rpx;
+							}
+							&.white {
+								color: #FF3F42;
+								border: 1px solid #FF3F42;
+							}
+							&.red {
+								color: #FFFFFF;
+								border: 1px solid #FE781F;
+								background: #FE781F;
+							}
+							&:last-child {
+								margin-top: 20rpx;
+							}
+						}
+					}
+					.tag {
+						image {
+							width: 80rpx;
+							height: 80rpx;
+							display: block;
+						}
+					}
+				}
+			}
+		}
+	}
+	.bottom-container {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		padding: 0 20rpx;
+		box-sizing: border-box;
+		background: #FFFFFF;
+		display: flex;
+		align-items: center;
+		height: 100rpx;
+		.button {
+			width: 100%;
+			height: 68rpx;
+			line-height: 68rpx;
+			border-radius: 68rpx;
+			text-align: center;
+			font-size: 28rpx;
+			color: #666666;
+			border: 1px solid #B0B0B0;
+		}
+	}
+	.share-dialog {
+		position: fixed;
+		top: calc(50vh - 500rpx);
+		left: 55rpx;
+		z-index: 999;
+		.content {
+			position: relative;
+			.bg {
+				width: 640rpx;
+				height: 1000rpx;
+				display: block;
+			}
+			.close {
+				position: absolute;
+				right: 20rpx;
+				top: 20rpx;
+				width: 30rpx;
+				height: 30rpx;
+				display: block;
+			}
+			.code {
+				position: absolute;
+				top: 300rpx;
+				left: 120rpx;
+				width: 400rpx;
+				height: 400rpx;
+				display: block;
+				z-index: 9;
+			}
+			.logo {
+				width: 100%;
+				position: absolute;
+				bottom: 60rpx;
+				left: 0;
+				display: flex;
+				justify-content: center;
+				image {
+					height: 60rpx;
+					display: block;
+				}
+			}
+			.tips {
+				position: absolute;
+				left: 0;
+				top: 700rpx;
+				line-height: 50rpx;
+				font-size: 24rpx;
+				color: #f5f5f5;
+				width: 640rpx;
+				text-align: center;
+			}
+			.text {
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				line-height: 60rpx;
+				font-size: 24rpx;
+				color: #666666;
+				width: 640rpx;
+				text-align: center;
+			}
+			.noData {
+				position: absolute;
+				top: 300rpx;
+				left: 120rpx;
+				width: 400rpx;
+				height: 400rpx;
+				display: block;
+				z-index: 10;
+				background: #FFFFFF;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				image {
+					width: 197rpx;
+					height: 146rpx;
+					display: block;
+					margin-bottom: 20rpx;
+				}
+				view {
+					font-size: 28rpx;
+					color: #333333;
+					line-height: 48rpx;
+				}
+			}
+		}
+		
+	}
+</style>