jianbing/bundle/pages/coupon/coupon.vue

<template>
	<view class="coupon">
		<view>
			<u-tabs :list="tab" :is-scroll="false" :current="current" @change="change" :active-color="themeColor" height="96"></u-tabs>
		</view>
		
		<mescroll-body ref="mescroll" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">

			<view class="u-relative" v-if="current === 0">
				<view class="package u-text-center u-p-t-22 u-p-b-28">
					<view class="bold-500">超级省钱券包</view>
					<view>超值权益一单回本</view>
				</view>
				
				<view class="list u-absolute left-0 right-0">
					<view class="block br20">
						<view class="row-between">
							<view>
								<view class="row">
									<u-image :src="cloudPath + 'img/icon_package1.png'" width="34" height="28"></u-image>
									<view class="text-333 u-m-l-10 nr">券包</view>
								</view>
								<view class="text-755023 xs u-m-t-10">
									<text>2元最低可抵111元/共<text class="primary">1</text>张券</text>
								</view>
							</view>
							<view class="u-relative">
								<u-image :src="cloudPath + 'img/icon_package2.png'" width="220" height="60"></u-image>
								<view class="text-755023 u-absolute price xs">￥2.00</view>
							</view>
						</view>
						<view class="coupon-bg u-m-t-32">
							<view class="xxs u-text-center u-p-t-4 text-845F2E">满减券x1</view>
							<view class="bold-600 u-text-center u-p-t-26">
								<price-format color="#FF0000" :price="121.99" :subscriptSize="32" :firstSize="52" :secondSize="52"></price-format>
							</view>
							<view class="text-D8A658 u-text-center u-p-t-32">满11元可用</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="coupon-list u-m-t-12" v-if="current === 1">
				<view class="coupon-list-bg row-between" v-for="(item, index) in list" :key="index">
					<view class="row-start row-column u-row-center u-text-center">
						<view>
							<price-format :color="themeColor" :price="item.money" :subscriptSize="40" :firstSize="72" :secondSize="72"></price-format>
						</view>
						<view class="full">{{ item.use_condition }}</view>
					</view>
					<view class="flex1 u-m-l-80 row-between">
						<view>
							<view class="coupon-text bold-600">优惠券</view>
							<view class="xs u-m-t-20 date">有效期 {{ item.use_time_tips }}天</view>
						</view>
						<view>
							<u-button @click="mpLogin" hover-class="none" :customStyle="{width: '160rpx', height: '56rpx', backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx', fontSize: '24rpx'}" :hair-line="false">立即兑换</u-button>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	import { getCoupon } from "@/api/user"
	import { getCouponList } from '@/api/activity';


	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				tab: [
					{
						name: '购买'
					}, 
					{
						name: '兑换'
					}
				],
				current: 1,
				upOption:{
					noMoreSize: 4,
					empty:{
						tip: '~ 空空如也 ~', // 提示
						btnText: ''
					},
					textNoMore: '没有更多了'
				},
				list: []
			}
		},
		methods: {
			change(index) {
				this.current = index
			},

			// 初始化数据
			upCallback(page) {
				getCouponList({
					page: page.num,
					current: this.current,
				}).then(res => {
					const {data} = res
					this.mescroll.endSuccess(data.length, data.totalPages);
					//设置列表数据
					if(page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(data); //追加新数据
				}).catch(()=>{
					this.mescroll.endErr();
				})
			},
		}
	}
</script>

<style lang="scss">
	.text-755023 {color: #755023;}
	.text-845F2E {color: #845F2E;}
	.text-D8A658 {color: #D8A658;}
	
	.coupon {
		.package {
			background-color: #2D2622;
			height: 180rpx;

			& > view:first-child {
				font-size: 64rpx;
				background: linear-gradient(90deg, #FDE0B4 0%, #FFC07F 100%);
				letter-spacing: 1px;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			
			& > view:last-child {
				font-size: 30rpx;
				background: linear-gradient(270deg, #FDE0B4 0%, #FFC07F 100%);
				letter-spacing: 1px;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
		
		.list {
			background-color: #F6F6F6;
			border-top-left-radius: 24rpx;
			border-top-right-radius: 24rpx;
			top: 160rpx;
			padding: 30rpx 24rpx;
			
			.block {
				height: 386rpx;
				background: #FBE9CC;
				border: 2rpx solid #E0B66C;
				padding: 24rpx 36rpx 24rpx;
				
				.price {
					left: 22rpx;
					top: 50%;
					transform: translateY(-50%);
				}
				
				.coupon-bg {
					width: 207rpx;
					height: 196rpx;
					background: url(#{$cloudPath}img/icon_package3.png) no-repeat;
					background-size: cover; 
				}
			}
		}
		
		.coupon-list {
			.coupon-list-bg {
				height: 176rpx;
				background: url(#{$cloudPath}img/icon_coupon2.png) no-repeat;
				background-size: cover; 
				margin: 0 32rpx 32rpx;
				padding: 0 32rpx;
				
				.full {
					font-size: 20rpx;
					color: rgba(0, 0, 0, .4);
				}
				
				.coupon-text {
					color: #1D2129;
					font-size: 40rpx;
				}
				
				.date {
					color: rgba(0, 0, 0, .4);
				}
			}
		}
	}
</style>