168 lines
2.9 KiB
Vue
168 lines
2.9 KiB
Vue
<!-- 充值中心 -->
|
|
<template>
|
|
<view class="container">
|
|
<up-navbar bgColor="transparent" title="明细" @leftClick="back"></up-navbar>
|
|
<view class="header-wrap">
|
|
<image class="bg" src="/static/czzx_header_bg.png" mode="aspectFill"></image>
|
|
|
|
<view class="u-flex info text-center">
|
|
<view class="u-flex-1">
|
|
<view class="color-333 font-14">我的余额</view>
|
|
<view class="u-m-t-30 font-700 color-333" style="font-size: 40rpx;">200.00</view>
|
|
</view>
|
|
<view class="u-flex-1">
|
|
<view class="color-333 font-14">我的积分</view>
|
|
<view class="u-m-t-30 font-700 color-333" style="font-size: 40rpx;">200.00</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="u-flex tabs">
|
|
<view class="color-333 font-16 tabs-item" v-for="(item,index) in tabs.list" :key="index"
|
|
@click="tabs.sel=index" :class="{active:tabs.sel==index}">
|
|
<view>
|
|
{{item.name}}
|
|
</view>
|
|
<view class="u-flex u-flex-center u-m-t-10">
|
|
<view class="block">
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="u-m-t-32">
|
|
<view class="color-333 font-16 font-700">订单消费</view>
|
|
<view v-for="(item,index) in lists" :key="index">
|
|
<view>森食界创意轻食(未央店)</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import * as vipApi from '@/common/api/market/recharge.js'
|
|
import {
|
|
joinMember
|
|
} from '@/common/api/order/index.js'
|
|
import {
|
|
ref,
|
|
onMounted,
|
|
computed,
|
|
reactive
|
|
} from 'vue'
|
|
import {
|
|
onLoad,onReachBottom
|
|
} from '@dcloudio/uni-app'
|
|
|
|
|
|
async function buy() {
|
|
const res = await joinMember()
|
|
}
|
|
|
|
function back() {
|
|
uni.navigateBack();
|
|
}
|
|
const list = ref([])
|
|
async function init() {
|
|
const res = await vipApi.config()
|
|
if (res) {
|
|
list.value = res
|
|
}
|
|
}
|
|
onMounted(init)
|
|
|
|
const tabs = reactive({
|
|
list: [{
|
|
name: '余额明细'
|
|
},
|
|
{
|
|
name: '积分明细'
|
|
},
|
|
],
|
|
sel: 0
|
|
})
|
|
|
|
onLoad(() => {
|
|
|
|
})
|
|
|
|
onReachBottom(()=>{
|
|
console.log('onReachBottom');
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.tabs {
|
|
justify-content: center;
|
|
gap: 138rpx;
|
|
|
|
.tabs-item {
|
|
.block {
|
|
width: 58rpx;
|
|
height: 6rpx;
|
|
background-color: transparent;
|
|
border-radius: 6rpx;
|
|
transition: all .3s ease-in-out;
|
|
}
|
|
|
|
&.active {
|
|
.block {
|
|
background-color: #FFAA62;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.color1 {
|
|
color: #5F2E0F;
|
|
}
|
|
|
|
.color2 {
|
|
color: #FF6300;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.header-wrap {
|
|
width: 100%;
|
|
height: 530rpx;
|
|
box-sizing: border-box;
|
|
padding: calc(var(--status-bar-height) + 180upx) 28upx 28upx;
|
|
position: relative;
|
|
|
|
.bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.info {
|
|
position: relative;
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
.bottom {
|
|
background-color: rgba(255, 255, 255, .3);
|
|
padding: 40rpx 28rpx 0 28rpx;
|
|
transform: translateY(-140rpx);
|
|
border-radius: 74rpx 74rpx 0 0;
|
|
}
|
|
</style> |