spark-student/pagesMain/memberCardList.vue

<template>
	<view class="content">
		<view class="card-list" v-for="(item, index) in tableList" :key="index" @click="goToPay(item)">
			<view class="card-label">{{item.typeValue}}</view>
			<view class="card-num">￥{{item.amount}}</view>
			<view class="card-icon iconfont iconzu4931"></view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		computed: {
			...mapGetters([])
		},
		data() {
			return {
				tableList: [],
			}
		},
		onLoad() {
			this.getTableList()
		},
		onReady() {},
		methods: {
			//  获取列表数据
			getTableList() {
				NET.request(API.getMemberCardList, {}, 'POST').then(res => {
					this.tableList = res.data
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
				})
			},
			goToPay(site) {
				uni.navigateTo({
					url: '/pagesMain/openMember?id=' + site.id
				});
			}
		},
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	@import "@/static/css/themes.scss";

	.content {
		width: 100%;
		float: left;
		overflow-y: auto;

		.card-list {
			width: calc(100% - 30px);
			margin: 10px 15px;
			padding: 15px 20px;
			float: left;
			background-color: #FFFFFF;
			border-radius: 15px;
			box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
			position: relative;
			overflow: hidden;

			.card-label {
				width: 100%;
				margin-bottom: 10px;
				float: left;
				font-size: 18px;
				font-weight: bold;
				line-height: 20px;
			}

			.card-num {
				width: 100%;
				float: left;
				font-size: 28px;
				line-height: 28px;
				color: $mainColor;
			}

			.card-icon {
				font-size: 80px;
				color: $mainColor;
				position: absolute;
				right: -15px;
				bottom: -15x;
				opacity: 0.5;
			}
		}
	}
</style>