186 lines
3.7 KiB
Vue
186 lines
3.7 KiB
Vue
<template>
|
|
<view class="content">
|
|
<uni-nav-bar left-icon="left" title="消费记录" color="#000000" backgroundColor="transparent" :fixed="true"
|
|
:statusBar="true" :border="false" @clickLeft="back"></uni-nav-bar>
|
|
<!-- 内容 -->
|
|
<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
|
|
<view class="coupon">
|
|
<view v-for="(item, index) in listData" :key="index" class="coupon_item"
|
|
:style="'border:' + (index == listData.length - 1 ? 'none' : '')">
|
|
<view class="coupon_item_1">
|
|
<view>{{ item.content }}</view>
|
|
<view>{{ item.addtime }}</view>
|
|
</view>
|
|
<view class="coupon_r">{{ item.change_money }}</view>
|
|
</view>
|
|
</view>
|
|
</mescroll-body>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getProfitPay } from '@/common/server/user.js';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
z_imgPath: this.$z_img2 + 'mine/',
|
|
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
|
arr: ['全部', '充值', '消费'],
|
|
show: 1,
|
|
listData: [],
|
|
|
|
// 是否显示参与
|
|
downOption: {
|
|
auto: false
|
|
}
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
// setTimeout(() => {
|
|
// this.listData=[
|
|
// {
|
|
// content:'哈哈哈哈哈哈哈哈哈',
|
|
// addtime:'2333-23-23 23:23:23',
|
|
// change_money:233
|
|
// }
|
|
// ]
|
|
// }, 1000);
|
|
},
|
|
methods: {
|
|
back() {
|
|
uni.navigateBack()
|
|
},
|
|
getlist(v) {
|
|
this.show = v
|
|
this.loadData(1)
|
|
},
|
|
|
|
/*下拉刷新的回调 */
|
|
downCallback() {
|
|
//联网加载数据
|
|
this.loadData(1)
|
|
},
|
|
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
|
|
upCallback(page) {
|
|
//联网加载数据
|
|
this.loadData(page.num)
|
|
},
|
|
async loadData(pageNo) {
|
|
// 模拟接口
|
|
const res = await getProfitPay(pageNo, 10);
|
|
console.log(res)
|
|
this.mescroll.endByPage(res.data.data.length, res.data.last_page)
|
|
if (pageNo == 1) {
|
|
this.listData = res.data.data
|
|
} else {
|
|
this.listData = this.listData.concat(res.data.data)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.coupon_r>image {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.coupon_r {
|
|
font-size: 24rpx;
|
|
/* font-family: 'zcq'; */
|
|
color: #333333;
|
|
}
|
|
|
|
.coupon_item_1>view:nth-of-type(2) {
|
|
font-size: 20rpx;
|
|
color: #676767;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.coupon_item_1>view:nth-of-type(1) {
|
|
font-size: 24rpx;
|
|
// font-weight: bold;
|
|
color: #333333;
|
|
}
|
|
|
|
.coupon_item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 30rpx 0;
|
|
box-sizing: border-box;
|
|
// background-color: rgba(255, 255, 255, 0.08);
|
|
// margin-top: 20rpx;
|
|
// border-radius: 10rpx;
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 2rpx;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
}
|
|
|
|
.coupon {
|
|
width: 690rpx;
|
|
margin: 20rpx auto;
|
|
background-color: #FFFFFF;
|
|
padding: 0 32rpx;
|
|
border-radius: 16rpx;
|
|
/* background: #11141D;
|
|
box-shadow: 0px 0px 10rpx 0px rgba(150, 255, 254, 0.7);
|
|
*/
|
|
box-sizing: border-box;
|
|
/* border-radius: 20rpx; */
|
|
}
|
|
|
|
.content {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
box-sizing: border-box;
|
|
color: #fff;
|
|
background: linear-gradient(180deg, #5FCDFF 0%, #F5F5F5 100%);
|
|
|
|
.head {
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 20;
|
|
|
|
.header_title {
|
|
height: 70rpx;
|
|
line-height: 70rpx;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 30rpx;
|
|
box-sizing: border-box;
|
|
|
|
>view:nth-of-type(1) {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
>view:nth-of-type(2) {
|
|
width: 520rpx;
|
|
text-align: center;
|
|
/* margin: auto; */
|
|
}
|
|
|
|
image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |