140 lines
3.1 KiB
Vue
140 lines
3.1 KiB
Vue
|
<template>
|
||
|
|
<view :style="{ backgroundPositionY: -44 + safeAreaInsets.top + 'px'}" class="index-page">
|
||
|
|
<!-- 自定义导航 -->
|
||
|
|
<view :style="{ paddingTop: safeAreaInsets.top + 'px' }" class="page-navbar">足球状元榜</view>
|
||
|
|
</view>
|
||
|
|
<view style="background-color: #ddd;">
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<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: 87.9vh;
|
||
|
|
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>
|