websoft-uniapp/package/user/coupon.vue

<template>
	<view>
		<view class="segmented">
			<uni-segmented-control :current="current" :values="items" :styleType="styleType" :activeColor="activeColor"
				inActiveColor="#808080" @clickItem="onClickItem" />
		</view>
		<view class="coupon">
			<block v-for="(item,index) in list" :key="index">
				<view class="coupon-item web-cell">
					<view class="coupon-bg">
						<view class="title"><span class="price">8</span><span class="unit">元</span></view>
						<view class="desc">满减劵</view>
					</view>
					<view class="coupon-info web-cell web-cell-content">
						<view class="coupon-content">
							<view class="title">优惠券名称</view>
							<view class="desc web-text-secondary">有效期至：2024-05-29</view>
						</view>
						<uv-button class="save-btn" size="mini"
							:customStyle="{background: 'linear-gradient(to right, #70b915, #008e04)',color: '#ffffff', border: 'none'}"
							text="去使用" @click="save"></uv-button>
					</view>
				</view>
			</block>
			<!-- <uv-empty mode="order" v-if="list.length == 0"
				icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty> -->
			<uni-load-more v-if="list.length > 0" :status="loadMore"></uni-load-more>
			<!-- 登录组件 -->
			<ws-login ref="login" :logo="logo" @done="reload" />
		</view>
	</view>
</template>

<script>
	import * as CouponApi from '@/api/booking/userCoupon'
	import {
		pageWechatDeposit
	} from '@/api/shop/wechatDeposit'
	import {
		getWeek,
		getKey
	} from '@/utils/common';

	export default {
		components: {},
		data() {
			return {
				isRefresh: false,
				isLogin: false,
				userId: 0,
				where: {
					page: 1,
					status: 0
				},
				canReset: false,
				loadMore: 'more',
				logo: '',
				items: ['待使用(0)', '已使用(0)', '已失效(0)'],
				list: [],
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				colors: ['#333333', '#4cd964', '#dd524d'],
				current: 0,
				colorIndex: 0,
				activeColor: '#108001',
				styleType: 'text',
				getWeek
			}
		},
		onLoad(option) {
			// 判断是否登录
			this.openLogin()
			// 加载数据
			this.reload()
			// if(option.isRefresh){
			// 	this.isRefresh = true
			// }
		},
		onShow(e) {
			// 判断是否登录
			this.openLogin()
			this.reload()
		},
		// 触底函数
		onReachBottom() {
			const app = this
			const {
				where
			} = this
			if (app.canReset) {
				app.where.page = ++where.page;
				app.reload()
			}
		},
		methods: {
			reload() {
				const app = this
				const {
					where,
					userId
				} = this
				if (userId == 0) {
					app.openLogin()
					return;
				}
				// where.userId = userId;
				uni.showLoading({
					title: '数据读取中.'
				})
				app.loadMore = 'loading'
				CouponApi.data().then(res => {
					console.log('res: ',res);
					app.items[0] = `待使用(${res.toBeUsed})`;
					app.items[1] = `已使用(${res.used})`;
					app.items[2] = `已失效(${res.invalid})`;
				})
				CouponApi.pageUserCoupon(where).then(res => {
					const list = res.list.map(d => {
						console.log(d);
						return d;
					});
					if (app.list.length < res.count) {
						console.log('11111: ', 11111);
						app.list = app.list.concat(list)
						app.canReset = true
						app.loadMore = 'no-more'
					} else {
						app.canReset = false;
						app.loadMore = 'no-more'
						console.log('22222: ', 22222);
					}
					uni.hideLoading()
					app.isRefresh = false
				}).catch(() => {
					uni.showToast({
						title: '请检查您的网络.',
						icon: 'none'
					})
					uni.hideLoading()
					app.isRefresh = false
				})
			},
			onClickItem(e) {
				const app = this
				const {
					where,
					userId
				} = this
				const index = e.currentIndex
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
				if (userId == 0) {
					app.openLogin()
					return;
				}
				// 全部
				app.where.status = index;
				this.where.page = 1;
				this.list = [];
				this.reload()
			},
			openUrl(url) {
				uni.navigateTo({
					url
				})
			},
			toPay(orderId) {
				uni.navigateTo({
					url: '/package/booking/confirm?id=' + orderId
				})
			},
			closeOrder(item) {
				uni.showModal({
					title: '确定取消此订单?',
					success(o) {
						if (o.confirm) {
							OrderApi.updateOrder({
								orderStatus: 2,
								orderId: item.orderId
							}).then(msg => {
								uni.showToast({
									title: msg,
									icon: 'none'
								})
								item.orderStatus = 2;
							}).catch(() => {
								uni.showToast({
									title: '请检查您的网络.',
									icon: 'none'
								})
								uni.hideLoading()
							})
						}
					}
				});
			},
			// 弹出登录提示框
			async openLogin() {
				this.userId = uni.getStorageSync('user_id');
				if (!this.userId) {
					this.$refs.login.open('bottom')
					return false;
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		height: 150px;
		text-align: center;
	}

	.segmented {
		padding: 0 12rpx;
	}

	.content-text {
		font-size: 14px;
		color: #666;
	}

	.color-tag {
		width: 25px;
		height: 25px;
	}

	.uni-list {
		flex: 1;
	}

	.coupon {
		.coupon-item {
			width: 700rpx;
			margin: 20rpx auto;
			border-radius: 12rpx;
			border-bottom: 1px #eee solid;
			background: #fff;

			.coupon-bg {
				width: 140rpx;
				height: 140rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: #fff;
				border-radius: 12rpx 0 0 12rpx;
				background: linear-gradient(to right, #70b915, #008e04);

				.price {
					font-size: 50rpx;
				}
			}

			.coupon-info {
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				.title{
					line-height: 2rem;
				}
			}
			
			.save-btn{
				// margin-right: 20rpx;
			}

			.merchant-avatar {
				margin-right: 12rpx;
			}

			.merchant-name {
				// padding-left: 12rpx;
			}

			.btn-status {
				font-size: 30rpx;
				display: flex;
			}
		}

		.order-body {
			padding: 16px 0;
		}
	}

	.ele-flex {
		display: flex;
		justify-content: space-between;
	}

	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}

	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}

	.close {
		top: 60rpx !important;
	}

	.total-price {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		font-size: 30rpx;
		align-items: flex-start;
		padding-left: 6rpx;
		margin-left: 450rpx;

		.web-text-heading {
			font-size: 30rpx !important;
		}
	}
</style>