dykj-football/pages/user/compontents/integralShop.vue

<template>
	<view style="background-color: #fff;">
		<u-icon name="arrow-left" color="#646668" size="28" style="float: left;margin-top:2%;" @click="gotoBack" />
		<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">积分商城</view>
		<span style="float: right;margin-top: -8%; font-size: 10px; margin-right: 2%;">{{'我的积分: 20'}}</span>
	</view>
	<u-line></u-line>
	<view class="scheme">
		<view class="integralRoll">
			<view v-for="(item,index) in List" :key="index" class="grid-item">
				<view class="content">
					<view class="rollimg">
						<u-avatar shape="circle" size="85" :src="src" customStyle="margin: -3px 5px -3px 0" />
					</view>
					<view class="contentText">
						<span style="font-size: 14px; color: #deb887;">{{item.integral}}</span>
						<span style="font-size: 14px; font-weight: 600;">{{item.roll}}</span>
						<u-button text="立即兑换" @click="convert(index)" size="mini" color="#deb887" />
					</view>
				</view>
			</view>
		</view>
		<view class="listBottom">没有更多了</view>
		<u-modal :show="show" :content='content' style="text-align: center;" confirmColor="red" @confirm="confirm" @cancel="cancel" ref="uModal"
		 :asyncClose="true" :showCancelButton="true" />
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const {
		safeAreaInsets
	} = uni.getSystemInfoSync();
	const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
	const show = ref(false)
	const content = ref('是否兑换该商品!!!')
	const gotoBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	const List = ref([
		{
			integral: '7888积分',
			roll: '6折卷',
		},
		{
			integral: '5888积分',
			roll: '7折卷',
		},
		{
			integral: '3888积分',
			roll: '8折卷',
		},
		{
			integral: '1888积分',
			roll: '9折卷',
		},
		{
			integral: '2000积分',
			roll: '100个奖门令',
		},
	])
	const convert = ()=>{
		show.value = true
	}
	// 取消按钮
	const cancel = ()=>{
		show.value = false
	}
	// 确认按钮
	const confirm = ()=>{
		show.value = false
	}
</script>

<style lang="scss" scoped>
	
.scheme{
	width: 100%;
	min-height: 94.5vh;
	background-color: #f2f2f2;
	display: flex;
	flex-direction: column;
	align-items: center;
	.integralRoll {
		margin: 5% 0;
		width: 90%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		/* 创建两列 */
		grid-gap: 10px;
	
		/* 列间隔 */
		.grid-item {
			height: 20vh;
			background-color: #fff;
			border-radius: 5px;
		}
	
		.content {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			.rollimg{
				width: 100%;
				height: 11vh;
				background-color: #f7f7f9;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.contentText{
			padding: 3%;
			height: 8vh;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
	}
}
	.listBottom {
		margin: 4%;
		text-align: center;
		width: 100%;
		font-size: 14px;
		font-weight: 600;
		color: #c4c4c4;
	}
	
	
</style>