pet_uni/pages/UserCoupons/index.vue

<template>
	<HeaderNav title="优惠在这" :is-back="true"></HeaderNav>
	<view class="app-wallpaper" :style="{
		backgroundImage:'url('+staticImage.wallpaperBgImage+')'
		}">

		<view class="capsule-container row" v-if="type === 'lists'">
			<view class="capsule col-6" :class="{active:item.value === couponType}" @click="couponTypeToggle(item)" v-for="item in types">
				{{ item.title }}
			</view>
		</view>
		<view class="coupons-list">
			<view v-for="item in couponsList" class="coupons-item-container" :style="{
					backgroundImage:'url('+(item.status > 0?staticImage.couponsGrayBackground:staticImage.couponsBackground)+')'
					}">
				<view class="coupons-item row">
					<view class="coupons-left ">
						<view class="coupons-big-title-group row">
							<view class="coupons-big-title">{{item.price}}</view>
							<view class="coupons-big-desc">元</view>
						</view>
						<view class="coupons-cause">
							{{item.cause}}
						</view>
					</view>
					<view class="coupons-right col row">
						<view class=" ">
							<view class="coupons-title col-12">{{item.title}}</view>
							<view class="coupons-desc col-12">{{item.time}}</view>
						</view>
						<view class="coupons-gq " v-show="item.status === 2">
							<image class="img" :src="staticImage.couponsGQ" mode="aspectFill" />
						</view>
						<view class="coupons-gq " v-show="item.status === 1">
							<image class="img" :src="staticImage.couponsUse" mode="aspectFill" />
						</view>
						<view class="coupons-bottom col-12 row">
							<view class="coupons-rule row col">查看使用规则 <u-icon class="arrow-right" size="24rpx" color="#999999" name="arrow-right"></u-icon></view>
							<view class="coupons-button">
								<MzButton
                    title="立即使用"
                    @click="clickCoupons(item)"
                    button-width="145rpx"
                    :button-color="item.status > 0 ?'#CACACA':'#4DC3B8'"
                    font-color="#fff"
                    font-size="26rpx"
                    :is-background="false"
                    padding-tb="2rpx"
                    :btn-style="{
                      boxShadow:(item.status > 0?'2rpx -5rpx 0rpx 0rpx rgba(199,199,199,0.35)':'2rpx -5rpx 0rpx 0rpx rgba(77,195,184,0.35)')
                    }"></MzButton>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" fontSize="28"
								color="#ACB4B6"
								line
								line-color="#ACB4B6"
								marginBottom="30" marginTop="30" @loadmore="getCouponsList(++this.page)"/>
	</view>

	<!-- <RightNav></RightNav> -->
</template>

<script>
	import {
		imghost
	} from '@/config/host.js'
	import HeaderNav from '@/components/HeaderNav/Index.vue';
	import FooterNav from '@/components/FooterNav/Index.vue';
	import RightNav from '@/components/RightNav/Index.vue';
	import MzButton from '@/components/MzButton/Index.vue';
  import {userCoupons} from "../../api/user";
	export default {
		components: {
			HeaderNav,
			FooterNav,
			RightNav,
			MzButton
		},
		data() {
			return {
				title: 'Hello',
				loading: true,
				staticImage: {
					screenActiveImg: imghost + '/static/image/order-screen-active.png',
					orderCardBackground: imghost + '/static/image/order-card-background.png',
					wallpaperBgImage: imghost + '/static/image/background.png',
					couponsBackground: imghost + '/static/image/coupons-bg.png',
					couponsGrayBackground: imghost + '/static/image/coupons-gray-bg.png',
					couponsGQ: imghost + '/static/image/coupons-gq.png',
					couponsUse: imghost + '/static/image/coupons-use.png',
				},
				indexBanner: [{
					image: imghost + '/static/image/banner.png',
					url: '',
				}],
				user: {
					avatar: imghost + '/static/image/banner.png',
					nickname: '清晨的风',
					coupons: 221,
					id: 88685
				},
				isTop: false,
				pagePadding: 100,
				petImage: imghost + '/static/image/pet_avatar1.jpeg',
				couponsList: [ ],
        type:'lists',
				couponType:2,
        types:[
					{title:'省点银子', value: 2},
					{title:'豪门大户卡', value: 1},
				],
				page:1,
				status:'loadmore',
			}
		},
		onLoad(option) {
      this.type = option.type||'lists'
      console.log(this.type)
		},
		methods: {
      clickCoupons(item){
        if(item.status === 0){
          uni.setStorageSync('userCoupons',item);
          uni.navigateBack();
        }

      },
      navTo(url){
        uni.navigateTo({
          url:url
        })
      },
      getCouponsList(page = 1){
				if (this.status === 'nomore'){
					return;
				}else{
					this.status = 'loading';
				}
        userCoupons({
          page:page,
					limit:10,
					is_buy:this.couponType
        }).then((res) => {
					let couponsList = res.data.map((row) => {
						return {
							price:parseFloat(row.deduction),
							title:row.title,
							time: '有效期至 '+row.end_time,
							cause:'满'+parseFloat(row.min_price)+'使用',
              status: row.status,
						}
					});
					this.status = couponsList.length < 10 ? 'nomore' : 'loadmore';

					if (page === 1) {
						this.couponsList = couponsList;
						return;
					}
          this.couponsList.push(...couponsList);
        })
      },
			couponTypeToggle(item){
				this.couponType = item.value;
				this.page = 1;
				this.status = 'loadmore';
				this.getCouponsList();
			}
		},
		onPageScroll(res) {
			if (res.scrollTop <= 20) {
				uni.$emit('isTop', true);
			} else {
				uni.$emit('isTop', false);
			}
		},
		onReachBottom() {
			this.getCouponsList(++this.page);
		},
		created() {
			// this.pagePadding = (api.navHeight().navPaddingTop +
			// api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
		},
    mounted() {
      this.getCouponsList();
    }
  }
</script>

<style lang="scss">
	@import './components/index.scss';
</style>