6 changed files with 439 additions and 153 deletions
@ -0,0 +1,63 @@
|
||||
.app-wallpaper{ |
||||
padding:16rpx 26rpx; |
||||
} |
||||
.top-container{ |
||||
padding:50rpx 26rpx 66rpx; |
||||
.top-price{ |
||||
font-size: 72rpx; |
||||
font-family: ShiShangZhongHeiJianTi-Regular, ShiShangZhongHeiJianTi; |
||||
font-weight: 400; |
||||
color: #020B18; |
||||
line-height: 50rpx; |
||||
margin-bottom:26rpx; |
||||
} |
||||
.top-desc{ |
||||
font-size: 32rpx; |
||||
font-family: PingFang SC-Medium, PingFang SC; |
||||
font-weight: 400; |
||||
color: #3D3D3D; |
||||
line-height: 50rpx; |
||||
} |
||||
} |
||||
.body-background{ |
||||
background: { |
||||
color:#F5F5F6; |
||||
}; |
||||
height:100vh; |
||||
} |
||||
::v-deep .u-tabs__wrapper__nav__line{ |
||||
left:24rpx; |
||||
} |
||||
.cell-value-add{ |
||||
font-size: 32rpx; |
||||
font-weight: 400; |
||||
color: #FF9545; |
||||
} |
||||
.cell-value-dec{ |
||||
font-size: 32rpx; |
||||
font-weight: 400; |
||||
color: #0EAF4E; |
||||
} |
||||
.cell-label{ |
||||
font-size: 28rpx; |
||||
font-weight: 400; |
||||
color: #AFB5BE; |
||||
line-height:50rpx; |
||||
} |
||||
.cell-image{ |
||||
margin-right:20rpx; |
||||
} |
||||
.foot-button{ |
||||
padding:10rpx 26rpx 40rpx 26rpx; |
||||
position: fixed; |
||||
bottom:0; |
||||
left:0; |
||||
z-index: 9999; |
||||
width: 100%; |
||||
background: { |
||||
color:#FFFFFF; |
||||
}; |
||||
} |
||||
::v-deep .u-text__price{ |
||||
display:none; |
||||
} |
||||
@ -0,0 +1,225 @@
|
||||
<template> |
||||
<view class="body-background"> |
||||
<u-image |
||||
:show-loading="true" |
||||
:src="staticImage.bg" |
||||
width="100%" |
||||
height="420" |
||||
radius="10" |
||||
mode="widthFix" |
||||
class="img" |
||||
></u-image> |
||||
</view> |
||||
<u-navbar |
||||
:title="title" |
||||
:auto-back="true" |
||||
left-icon-size="40rpx" |
||||
:safe-area-inset-top="true" |
||||
:placeholder="true" |
||||
bgColor="transparent" |
||||
></u-navbar> |
||||
<view class="top-container"> |
||||
<view class="top-price"> |
||||
<u-text size="72" color="#020B18" :text="integral"></u-text> |
||||
</view> |
||||
<view class="top-desc"> |
||||
积分余额 |
||||
</view> |
||||
</view> |
||||
<view class="app-wallpaper"> |
||||
<!-- <u-tabs--> |
||||
<!-- :list="list"--> |
||||
<!-- u-sticky--> |
||||
<!-- lineWidth="64"--> |
||||
<!-- lineHeight="8"--> |
||||
<!-- :inactiveStyle="{color:'#AFB5BE'}"--> |
||||
<!-- :activeStyle="{color:'#F47210'}"--> |
||||
<!-- lineColor="#F47210"--> |
||||
<!-- @change="tabChange"--> |
||||
<!-- ></u-tabs>--> |
||||
</view> |
||||
<u-list |
||||
@scrolltolower="getIntegral(true)" |
||||
:height="(size.height)+'px'" |
||||
:custom-style="{padding:'0 26rpx',boxSizing:'border-box'}" |
||||
> |
||||
<u-list-item |
||||
v-for="(item, index) in lists[this.current]" |
||||
:key="index" |
||||
> |
||||
<u-cell |
||||
:title="item.describe" |
||||
:label="item.create_time" |
||||
:icon="staticImage.bg" |
||||
:icon-style="{width:'64rpx',height:'64rpx',marginRight:'22rpx'}" |
||||
:border="false" |
||||
:custom-style="{backgroundColor:'#ffffff',borderRadius:'20rpx',marginBottom:'16rpx'}" |
||||
:title-style="{fontSize: '28rpx',fontWeight: '400',color: '#020B18',marginBottom:'20rpx'}" |
||||
> |
||||
<template #value v-if="item.type === (current+1)"> |
||||
<view class="cell-value-add" v-if="item.type === 1"> |
||||
+{{ item.number }} |
||||
</view> |
||||
<view class="cell-value-dec" v-else> |
||||
{{ item.number }} |
||||
</view> |
||||
</template> |
||||
<template #label> |
||||
<view class="cell-label"> |
||||
{{item.create_time}} |
||||
</view> |
||||
</template> |
||||
<template #icon> |
||||
<view class="cell-image"> |
||||
<u-image mode="widthFix" width="64" height="64" :src="staticImage.cronAdd" v-if="item.type === 1"></u-image> |
||||
<u-image mode="widthFix" width="50" height="50" :src="staticImage.cronDec" v-else></u-image> |
||||
</view> |
||||
</template> |
||||
</u-cell> |
||||
</u-list-item> |
||||
</u-list> |
||||
</template> |
||||
|
||||
<script> |
||||
import { |
||||
imghost |
||||
} from '@/config/host.js' |
||||
import MzSubsection from '@/components/MzSubsection/Index.vue'; |
||||
import api from '@/utils/functions.js'; |
||||
import {cronBalance, cronList} from "@/api/user"; |
||||
import {integralList} from "../../api/user"; |
||||
|
||||
export default { |
||||
components: { |
||||
MzSubsection |
||||
}, |
||||
data() { |
||||
return { |
||||
list: [{ |
||||
name: '积分获得' |
||||
}, { |
||||
name: '积分兑换' |
||||
},], |
||||
current: 0, |
||||
title: '积分明细', |
||||
loading: true, |
||||
staticImage: { |
||||
bg: imghost + '/cron-bg.png', |
||||
newIcon: imghost + '/new-icon.png', |
||||
cronAdd: imghost + '/cron-add.png', |
||||
cronDec: imghost + '/cron-dec.png', |
||||
}, |
||||
balance: 0, |
||||
isTop: false, |
||||
lists: [[],[]], |
||||
end: [false, false], |
||||
listsAdd: [], |
||||
listsDec: [], |
||||
page: [1, 1], |
||||
size: { |
||||
height: 0, |
||||
}, |
||||
integral:0, |
||||
} |
||||
}, |
||||
onLoad() { |
||||
let userinfo = uni.getStorageSync('user'); |
||||
if(userinfo){ |
||||
this.integral = userinfo.integral; |
||||
} |
||||
}, |
||||
onReady() { |
||||
let that = this; |
||||
let height = api.wxSystemInfo().system.windowHeight |
||||
let headerHeight = uni.$u.getPx(44) + uni.$u.sys().statusBarHeight |
||||
|
||||
let info = uni.createSelectorQuery().in(this); |
||||
info.select('.top-container').boundingClientRect(function (data) { |
||||
|
||||
}).exec(function (res) { |
||||
}); |
||||
info.select('.app-wallpaper').boundingClientRect(function (data) { |
||||
|
||||
}).exec(function (res) { |
||||
let otherHeight = 0; |
||||
res.forEach((item, index) => { |
||||
otherHeight += item.height; |
||||
}); |
||||
that.size.height = that.size.height = height - headerHeight - otherHeight - uni.$u.getPx('40rpx'); |
||||
}); |
||||
}, |
||||
computed: { |
||||
api() { |
||||
return api |
||||
}, |
||||
sectionStyle() { |
||||
const style = {}; |
||||
style.padding = '0 26rpx'; |
||||
style.position = 'sticky'; |
||||
style.zIndex = '9999'; |
||||
style.top = api.navHeight().systemBarHeight + 'px' |
||||
return style; |
||||
}, |
||||
}, |
||||
methods: { |
||||
chatDetail(item) { |
||||
wx.navigateTo({ |
||||
url: '/pages/ChatDetail/index?id=' + item.id |
||||
}); |
||||
}, |
||||
getBalance() { |
||||
cronBalance().then((res) => { |
||||
this.balance = res.data.balance; |
||||
}) |
||||
}, |
||||
getIntegral(nextPage = false) { |
||||
if (this.end[this.current]) { |
||||
return false; |
||||
} |
||||
|
||||
integralList({ |
||||
type: (this.current+1), |
||||
limit: 10, |
||||
page: this.page[this.current], |
||||
}).then((res) => { |
||||
this.lists[this.current] = this.lists[this.current].concat(res.data) |
||||
if (res.data.length === 0) { |
||||
this.end[this.current] = true; |
||||
} |
||||
}) |
||||
if (nextPage) { |
||||
this.page[this.current]++; |
||||
} |
||||
}, |
||||
tabChange(e) { |
||||
this.page[e.index] = 1; |
||||
this.end[e.index] = false; |
||||
this.lists = [[],[]]; |
||||
this.current = e.index; |
||||
this.getIntegral(true); |
||||
} |
||||
}, |
||||
options: { |
||||
styleIsolation: 'shared' |
||||
}, |
||||
onPageScroll(res) { |
||||
if (res.scrollTop <= 20) { |
||||
uni.$emit('isTop', true); |
||||
} else { |
||||
uni.$emit('isTop', false); |
||||
} |
||||
}, |
||||
created() { |
||||
// this.pagePadding = (api.navHeight().navPaddingTop + |
||||
// api.navHeight().navHeight + (api.navHeight().headerPadding * 2)) |
||||
}, |
||||
mounted() { |
||||
this.getBalance(); |
||||
this.getIntegral(true); |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
@import './components/detail.scss'; |
||||
</style> |
||||
Loading…
Reference in new issue