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">
			<view class="capsule col-6 active">
				省点银子
			</view>
			<view class="capsule col-6" @click="navTo('/pages/Card/index')">
				豪门大户卡
			</view>
		</view>
		<view class="coupons-list">
			<view v-for="item in couponsList" class="coupons-item-container" :style="{
					backgroundImage:'url('+(item.is_timeout?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.is_timeout">
							<image class="img" :src="staticImage.couponsGQ" 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="立即使用"
								button-width="145rpx" 
								:button-color="item.is_timeout?'#CACACA':'#4DC3B8'" 
								font-color="#fff"
								font-size="26rpx" 
								:is-background="false" 
								padding-tb="2rpx" 
								:btn-style="{
									boxShadow:(item.is_timeout?'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>

	</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',
				},
				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: [{
					price: '57',
					title: '满0.11减57元优惠券',
					cause: '满0.11使用',
					time: '有效期至2023.08.09',
					is_timeout: false,
				}, {
					price: '58',
					title: '满0.02减58元优惠券',
					cause: '满0.02使用',
					time: '有效期至2023.08.01',
					is_timeout: true,
				}, {
					price: '580',
					title: '满0.01减580元优惠券',
					cause: '满0.01使用',
					time: '有效期至2023.08.02',
					is_timeout: false,
				}, ]
			}
		},
		onLoad() {

		},
		methods: {
      navTo(url){
        uni.navigateTo({
          url:url
        })
      },
      getCouponsList(page = 1){
        userCoupons({
          page:page
        }).then((res) => {
          this.couponsList = res.data.map((row) => {
            return {
              price:parseFloat(row.deduction),
              title:row.title,
              time: '有效期至 '+row.end_time,
              cause:'满'+parseFloat(row.min_price)+'使用',
              is_timeout: (row.status == 2),
            }
          })
        })
      }
		},
		onPageScroll(res) {
			if (res.scrollTop <= 20) {
				uni.$emit('isTop', true);
			} else {
				uni.$emit('isTop', false);
			}
		},
		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>