139 lines
3.2 KiB
Vue
139 lines
3.2 KiB
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>
|
|
</view>
|
|
<u-line></u-line>
|
|
<view class="VIPBox">
|
|
<u-swiper style="width: 94%;" :list="list3" indicatorMode="line" interval="3000" circular autoplay indicator />
|
|
<view class="content">
|
|
<span style="font-size: 14px;">{{'所需成长值200 当前成长值为0'}}</span>
|
|
<u-icon name="question-circle" color="#646668" size="18" style="position: absolute; right: 0;"
|
|
@click="gotoBack" />
|
|
</view>
|
|
<view class="process">
|
|
<uni-section padding>
|
|
<uni-steps :options="list1" :active="-1" />
|
|
</uni-section>
|
|
</view>
|
|
<view class="setMeal">
|
|
<view v-for="(item,index) in 5" :key="index" class="grid-item">
|
|
<view class="content1">
|
|
<view class="integralImg">
|
|
<u-avatar shape="shape" size="55" :src="src" customStyle="margin: -3px 5px -3px 0" />
|
|
</view>
|
|
<view class="contentText">
|
|
<span style="font-size: 10px;">{{'vip1(7天9折卷*1)'}}</span>
|
|
<u-button text="兑换(100积分)" @click="convert(index)" size="mini" color="#969799" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref
|
|
} from 'vue'
|
|
const {
|
|
safeAreaInsets
|
|
} = uni.getSystemInfoSync();
|
|
const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');
|
|
// 使用 ref 创建响应式引用
|
|
const list3 = ref([
|
|
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
|
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
|
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
|
]);
|
|
const list1 = ref([
|
|
{title: 'VIP1'},
|
|
{title: 'VIP2'},
|
|
{title: 'VIP3'},
|
|
{title: 'VIP4'},
|
|
{title: 'VIP5'},
|
|
{title: 'VIP6'},
|
|
{title: 'VIP7'},
|
|
{title: 'VIP8'},
|
|
{title: 'VIP9'},
|
|
{title: 'VIP10'},
|
|
])
|
|
const gotoBack = () => {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.VIPBox {
|
|
width: 100%;
|
|
min-height: 91.5vh;
|
|
background-color: #f2f2f2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 3% 0;
|
|
|
|
.content {
|
|
margin-top: 3%;
|
|
width: 94%;
|
|
height: 10vh;
|
|
border-radius: 10px;
|
|
background-color: #FFF;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.process {
|
|
margin-top: 3%;
|
|
width: 94%;
|
|
height: 10vh;
|
|
background-color: #FFF;
|
|
}
|
|
.setMeal {
|
|
margin: 3%;
|
|
padding: 3%;
|
|
width: 88%;
|
|
min-height: 40vh;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
/* 创建两列 */
|
|
grid-gap: 15px;
|
|
|
|
/* 列间隔 */
|
|
.grid-item {
|
|
height: 15vh;
|
|
border-radius: 5px;
|
|
}
|
|
.content1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
.integralImg{
|
|
width: 100%;
|
|
height: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.contentText{
|
|
text-align: center;
|
|
padding: 3%;
|
|
height: 8vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
}
|
|
}
|
|
:deep(.uni-steps__row-title){
|
|
font-size: 10px;
|
|
}
|
|
</style> |