pet_uni/pages/Card/index.vue

<template>
	<HeaderNav title="付款权益卡" :is-back="true"></HeaderNav>
	<view class="body-background" :style="{
		backgroundImage:'url('+staticImage.wallpaperBgImage+')'
		}"></view>
	<view class="app-wallpaper">

		<view class="screen-container row">

			<view class="list-container">
				<view class="list-item" v-for="item in orderCardList">
					<view class="card-container row">
						<view class="card-container-background col-12"></view>
						<view class="card-container-background-main row">
							<view class="card-col row" :style="{backgroundImage:'url('+staticImage.cardBackground+')'}">

								<view class="card-right">
									<view class="card-title">{{item.title}}</view>
									<view class="card-desc-container">
										<view class="card-desc">
											<view class="card-desc-text">{{item.profile}}</view>
											<view class="card-desc-background"></view>
										</view>
									</view>
									<view class="card-content-container row">
										<view class="card-avatar">
											<image class="img" mode="aspectFit" :src="staticImage.dogImage"/>
										</view>
										<view class="card-content">
											<view class="card-content-top">
												{{item.illustrate}}
											</view>
											<view class="card-content-bottom">
                        抵扣券有效期：{{item.que_illustrate}}
											</view>
										</view>
										<view class="card-btn" @click="navTo('/pages/CardDetail/index?id='+item.id)">
											<MzButton
													title="开始预约"
													font-color="#FFFFFF"
													button-color="#4DC3B8"
													button-width="255rpx"
													padding-tb="10rpx"
													font-size="28rpx"
													class="card-button"
                      ></MzButton>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="item-end row">
					— 没有更多内容了 —
				</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 api from '@/utils/functions.js';
  import {cardList} from "../../api/card";
	export default {
		components: {
			HeaderNav,
			FooterNav,
			RightNav,
			MzButton
		},
		data() {
			return {
				title: 'Hello',
				loading: true,
				staticImage: {
					screenActiveImg: imghost + '/static/image/screen-active.png',
					cardBackground: imghost + '/static/image/order-card-background.png',
					wallpaperBgImage:imghost +'/static/image/card-background.png',
					dogImage:imghost+'/static/image/index-user-title-dog.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',
				orderCardList:[],
			}
		},
		onLoad() {

		},
		methods: {
      navTo(url){
        wx.navigateTo({
          url:url
        })
      },
      getCardList(){
        cardList().then((res) => {
          console.log(res)
          this.orderCardList = res.data
        })
      }
		},
		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.getCardList();
    }
  }
</script>

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