sange-bridge/pages/index/index.vue

<template>
	<app-layout>
		<app-math-card v-for="(item,index) in mathLists"
					   :key="index"
					   :cover-image="item.coverImage"
					   :title="item.title"
					   :index="index"
					   :custom-style="{marginLeft:index % 2 === 1 ? '20rpx' : 0}"
					   @open="handleOpen"
		>
		</app-math-card>
		<u-modal v-model="modal.show"
				 :show-cancel-button="true"
				 cancel-text="放弃机会"
				 cancel-color="#CCCCCC"
				 confirm-text="购买"
				 confirm-color="#046E64"
				 @confirm="handleConfirmBuy"
		>
			<view class="slot-content">
				<view class="title">{{modal.title}}</view>
				<view class="sub-title">{{modal.subTitle}}</view>
			</view>
		</u-modal>
	</app-layout>
</template>

<script>
	import appLayout from "@/components/app-layout"
	import appMathCard from "@/components/index/app-math-card"
	import mathLists from "@/core/math-lists.js"
	export default {
		components:{
			appLayout,
			appMathCard
		},
		data() {
			return {
				mathLists: mathLists,
				modal:{
					show: false,
					title: '该功能需付费永久使用',
					subTitle: '做桥架不求人，让你秒变大师',
				}
			}
		},
		methods: {
			handleOpen(index){
				//this.modal.show = true
				this.$jump({url: mathLists[index].url,type:'to'})
			},
			handleConfirmBuy(){
				this.$jump({url:'/pages/my/member',type:'to'})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.slot-content{
		text-align: center;
		padding: 36rpx 0;
		.title{
			font-size: 36rpx;
			font-weight: 600;
			color: #333333;
			padding: 12rpx 0;
		}
		.sub-title{
			font-size: 28rpx;
			color: #999999;
		}
	}
</style>