|
|
<template>
|
|
|
<view class="content">
|
|
|
<headerTopsTips></headerTopsTips>
|
|
|
<uni-nav-bar left-icon="left" title="余额明细" backgroundColor="#e6eafa" @clickLeft="handlegoback" />
|
|
|
<view style="border-top: 1px solid #787878;"></view>
|
|
|
<!-- -->
|
|
|
<view class="segmented">
|
|
|
<view :class="index == current? 'segmenteditems isactive': 'segmenteditems' "
|
|
|
v-for="(item,index) in segmenteditems_list" :key="index" @click="onClickItem(index)">
|
|
|
{{item}}
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- -->
|
|
|
<view class="current_content">
|
|
|
<view class="item_con" v-for="(item,index) in 13" :key="index">
|
|
|
<view class="left_data">
|
|
|
<text>行程消费</text>
|
|
|
<text>2017-05-23 22:16:58</text>
|
|
|
</view>
|
|
|
<view class="right_data">
|
|
|
1元
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="pagination">
|
|
|
<view class="btn-view">
|
|
|
<view>
|
|
|
<text
|
|
|
class="example-info">当前页:{{ current_page.pageNo }},数据总量:{{ current_page.total }}条,每页数据:{{ current_page.pageSize }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<uni-pagination :current="current_page.pageNo" :total="current_page.total" title="标题文字" :show-icon="true"
|
|
|
@change="change_page" />
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
// type 类型 0 消费 1 充值
|
|
|
import headerTopsTips from '@/pages/components/header_tops_tips.vue'
|
|
|
// import detailApi from '@/sheep/api/home/detail';
|
|
|
import {
|
|
|
ref,
|
|
|
} from 'vue'
|
|
|
import {
|
|
|
onLoad
|
|
|
} from '@dcloudio/uni-app';
|
|
|
onLoad(() => {
|
|
|
getlist()
|
|
|
})
|
|
|
const current = ref(0)
|
|
|
const current_page = ref({
|
|
|
pageNo: 1,
|
|
|
pageSize: 6,
|
|
|
total: 20
|
|
|
})
|
|
|
const segmenteditems_list = ref([
|
|
|
'消费明细', '充值明细'
|
|
|
])
|
|
|
const activeColor = '#000'
|
|
|
|
|
|
function onClickItem(data) {
|
|
|
if (current.value !== data) {
|
|
|
current.value = data
|
|
|
}
|
|
|
}
|
|
|
|
|
|
function handlegoback() {
|
|
|
uni.navigateBack()
|
|
|
}
|
|
|
async function getlist() {
|
|
|
const response = await detailApi.searchCart({
|
|
|
pageNo: 1,
|
|
|
pageSize: 6,
|
|
|
type: 0
|
|
|
})
|
|
|
console.log(response, 'response')
|
|
|
current_page.value.total = response.data.total
|
|
|
}
|
|
|
|
|
|
function change_page(e) {
|
|
|
console.log(e, 'e')
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.content {
|
|
|
background: #fff;
|
|
|
height: 100vh;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
.segmented {
|
|
|
padding: 0 30rpx;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
border-bottom: 1px solid #ccc;
|
|
|
|
|
|
.segmenteditems {
|
|
|
flex: 1;
|
|
|
line-height: 90rpx;
|
|
|
text-align: center;
|
|
|
color: #6b6b6b;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.isactive {
|
|
|
color: #000;
|
|
|
font-weight: 600;
|
|
|
border-bottom: 2px solid #000;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.current_content {
|
|
|
height: calc(100% - 500rpx);
|
|
|
// background: skyblue;
|
|
|
width: 100%;
|
|
|
// background: #000;
|
|
|
padding: 10rpx 30rpx;
|
|
|
box-sizing: border-box;
|
|
|
overflow: hidden;
|
|
|
overflow-y: scroll;
|
|
|
|
|
|
.item_con {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
border-bottom: 1px solid #6b6b6b;
|
|
|
|
|
|
// align-items: center;
|
|
|
>view {
|
|
|
flex: 1;
|
|
|
height: 120rpx;
|
|
|
}
|
|
|
|
|
|
.left_data {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-evenly;
|
|
|
align-items: flex-start;
|
|
|
|
|
|
text {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
>text:last-child {
|
|
|
font-size: 12px;
|
|
|
color: #6b6b6b;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.right_data {
|
|
|
font-size: 16px;
|
|
|
font-weight: 600;
|
|
|
line-height: 120rpx;
|
|
|
text-align: end;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.pagination {
|
|
|
padding: 10rpx 30rpx;
|
|
|
text-align: center;
|
|
|
.example-info {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
</style> |