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>
			<u-button type="warning" shape="circle" :ripple="true" :custom-style="{...handleCustomStyle, float: 'left', marginLeft: ''}"
			 size="mini" @click="goToPay(item)">点击开通</u-button>
			<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([
				'handleCustomStyle'
			])
		},
		data() {
			return {
				memberInfo: {
					studentId: '',
					studentName: '',
					venueId: '',
					venueName: ''
				},
				tableList: [],
			}
		},
		onLoad(options) {
			this.memberInfo = options
			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?memberCardType=' + site.type + '&typeValue=' + site.typeValue + (this.memberInfo.studentId ?
						'&studentId=' + this.memberInfo.studentId + '&studentName=' + this.memberInfo.studentName : '') + (this.memberInfo
						.venueName ? '&venueId=' + this.memberInfo.venueId + '&venueName=' + this.memberInfo.venueName : '')
				});
			}
		},
	}
</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>