hyshop/user/page/couponList.vue

<template>
	<view class="content">
		<view class="top-wrap">
			<image src="https://hy.liuniu946.com/app/img/yhq-mbg.png" mode="widthFix" style="width: 750rpx;"></image>
			<view class="my-yhq" @click="navTo('/user/page/myCoupon')">
				我的卡券
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{'height': height}" class="scroll-wrap">
			<!-- 空白页 -->
			<empty v-if="loaded === true && list.length === 0"></empty>
			<view class="kq-wrap flex" v-for="item in list" :class="{'qw':item == 9}">
				<!-- 普通背景 -->
				<image src="https://hy.liuniu946.com/app/img/kq-bg.png" mode="" class="kq-bg" v-if="item != 9"></image>
				<!-- 抢完背景 -->
				<image src="https://hy.liuniu946.com/app/img/kp-bg-1.png" mode="" class="kq-bg" v-if="item == 9"></image>
				<view class="kq-left flex">
					<view class="left-val">
						{{item.coupon_price}}
					</view>
					<view class="left-tit" v-if="item.use_min_price*1 > 0">
						满{{item.use_min_price*1}}元使用
					</view>
					<view class="left-tit" v-else>
						无门槛
					</view>
				</view>
				<view class="kp-center flex">
					<view class="center-tit clamp2">
						{{item.title}}
					</view>
					<view class="center-time">
						有效期至2020-0-10 23:59
					</view>
				</view>
				<view class="kp-right flex">
					<!-- 在抢 -->
					<view class="right-loading flex" v-if="!item.used">
						<image src="../../static/icon/kp-loading.png" mode=""></image>
						<view class="loading-tit">
							待领取
						</view>
						<!-- 	<view class="loading-val">
							88%
						</view> -->
					</view>
					<!-- 已领取 -->
					<view class="right-more" v-if="item.used">
						<image src="../../static/icon/kp-nomore.png" mode=""></image>
					</view>
					<!-- 已抢完 -->
					<view class="right-nomore" v-if="item == 9">
						<image src="../../static/icon/kp-more.png" mode=""></image>
					</view>
					<view class="right-btn" @click="lq(item)">
						{{item.used ?'已领取':'立即领取'}}
					</view>
				</view>
				
			</view>
	<uni-load-more :status="loadingType" v-if="!(list.length == 0 && loaded)">
			</uni-load-more>
		</scroll-view>

	</view>
</template>

<script>
	import uniLoadMore from '@/uview-ui/components/u-loadmore/u-loadmore.vue';
	import empty from '@/uview-ui/components/u-empty/u-empty.vue';
	import {
		getCouponList,
		setCoupons
	} from '@/api/functionalUnit.js';
	import {
		spread,
		orderData,
		userinfo
	} from '@/api/user.js';
	export default {
		data() {
			return {
				height: '',
				loadingType: 'more',
				list: [],
				loaded: false,
				iconColor: 'red',
				color: 'red',
				page: 1,
				limit: 10,
				
			}
		},
		components: {
			empty,
			uniLoadMore
		},
		onLoad() {
			let obj = this;
			userinfo({})
				.then(({
					data
				}) => {

					console.log(data, "123456")
				})
			this.getCouponList()
		},
		onShow() {

		},
		onReachBottom() {
			this.getCouponList()
		},
		onReady() {
			var obj = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.scroll-wrap').boundingClientRect();
					query.exec(function(res) {
						obj.height = resu.windowHeight - res[0].top + 'px';
					});
					console.log(obj.height)
				},
				fail: res => {}
			});
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url,
					fail() {
						uni.switchTab({
							url
						})
					}
				})
			},
			getCouponList() {
				let obj = this
				if (obj.loadingType == 'noMore' || obj.loadingType == 'loading') {
					return
				}
				obj.loadingType = 'loading'
				getCouponList({
					page: obj.page,
					limit: obj.limit
				}).then(res => {
					console.log(res)
					obj.list = obj.list.concat(res.data)
					obj.page++
					if (obj.limit == res.data.length) {
						obj.loadingType = 'more'
					} else {
						obj.loadingType = 'noMore'
					}
					obj.loaded = true
				})
			},
			lq(item) {
				if (item.used) {
					return
				}
				setCoupons({
					couponId: item.id
				}).then(res => {
					console.log(res)
					uni.showToast({
						title: '领取成功',
						duration: 2000
					});
					// let s = this.list.indexOf(item);
					// this.list;
					item.used = 1
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #ff4802;
		height: auto;
		min-height: 100%;
	}

	.top-wrap {
		width: 750rpx;
		height: 574rpx;
		position: relative;

		image {
			position: absolute;
			top: 0;
			left: 0;
		}

		.my-yhq {
			width: 174rpx;
			line-height: 54rpx;
			background: #F4DE01;
			border-radius: 27rpx 0px 0px 27rpx;
			position: absolute;
			top: 43rpx;
			right: 0;
			font-size: 28rpx;
			font-weight: bold;
			color: #FF4701;
			text-align: center;
		}
	}


	.kq-wrap {
		width: 663rpx;
		height: 176rpx;
		margin: 0 auto 20rpx;
		position: relative;

		// padding: 20rpx;
		.kq-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 663rpx;
			height: 176rpx;
		}

		.kq-left {
			width: 180rpx;
			height: 176rpx;
			position: relative;
			// background-color: #bfa;
			flex-direction: column;
			justify-content: center;
			flex-shrink: 0;
			color: #FEB100;

			.left-val {
				font-size: 60rpx;
				font-weight: bold;

				&::before {
					content: '￥';
					font-size: 38rpx;
					font-weight: bold;
				}
			}

			.left-tit {
				font-size: 24rpx;
				font-weight: 500;

			}
		}

		.kp-center {
			position: relative;
			flex-direction: column;
			height: 176rpx;
			padding: 35rpx 20rpx 35rpx 0;
			justify-content: space-between;
			align-items: flex-start;
			flex-grow: 1;

			.center-tit {
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
			}

			.center-time {
				font-size: 22rpx;
				font-weight: 500;
				color: #666666;
			}
		}

		.kp-right {
			width: 155rpx;
			height: 176rpx;
			position: relative;
			flex-direction: column;
			justify-content: center;
			flex-shrink: 0;

			.right-loading {
				width: 105rpx;
				height: 105rpx;
				position: relative;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 105rpx;
					height: 105rpx;
					position: absolute;
					top: 0;
					left: 0;
				}

				.loading-tit {
					font-size: 22rpx;
					font-weight: 400;
					color: #FFFFFF;
				}

				.loading-val {
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.right-more,
			.right-nomore {
				width: 116rpx;
				height: 87rpx;

				image {
					width: 116rpx;
					height: 87rpx;
				}
			}

			.right-btn {
				width: 122rpx;
				height: 31rpx;
				background: #FFFFFF;
				border-radius: 15rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: #E27A01;
				line-height: 31rpx;
				text-align: center;
				margin-top: 10rpx;
			}
		}
	}

	// 抢完样式
	.qw {
		.kq-left {
			color: #CDCBCE;
		}

		.kp-center {
			.center-time {
				color: #CDCBCE;
			}

			.center-tit {
				color: #CDCBCE;
			}
		}

		.kp-right {
			.right-btn {
				background: #B5B5B5;
				color: #fff;
			}
		}
	}

	.scroll-wrap {
		padding-bottom: 20rpx;
		width: 663rpx;
		margin: auto;
	}
</style>