zhangjing/ysdH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[本时生活H5]

Browse Source
This commit is contained in:
张慢慢
2023-09-28 14:35:28 +08:00
parent f74b177f6d
commit 69824dedea
48 changed files with 9224 additions and 6635 deletions
Download Patch File Download Diff File Expand all files Collapse all files

498
pages/giftPack/logs.vue
View File

@@ -1,187 +1,325 @@
<template>
<view class="content">
<view class="title">
积分记录
</view>
<view class="list" v-if="accounts.length > 0">
<view class="item" v-for="(item, index) in accounts" :key="index">
<image class="item-img" src="@/static/img/giftPack-img09.png" mode="widthFix"></image>
<view class="item-cont">
<view class="item-cont-top">
<div class="item-cont-name">{{item.title}}</div>
<div class="item-cont-number">{{item.variable}}</div>
</view>
<view class="item-cont-bottom">
<div class="item-cont-total" v-if="userData.gold">余额：{{userData.gold.balance}}</div>
<div class="item-cont-time">{{item.created_at}}</div>
</view>
</view>
</view>
<view class="pagesLoding" v-if="lodingStats">
<block v-if="page.has_more">
<image class="pagesLoding-icon" src="/static/icon/refresh_loding.gif" mode="widthFix"></image>加载中...
</block>
<block v-else>
没有更多了~
</block>
</view>
</view>
<!-- 暂无内容 -->
<view class="campusTips" v-else>
<view class="campusTips-cont">
<image src="/static/img/giftPack-null.png" mode="aspectFill"></image>
<view>抱歉，目前暂无内容~</view>
</view>
</view>
<template>
<view class="content">
<view class="title">
<view class="title-name">消费金账户余额</view>
</view>
<view class="redBack">
<view class="list">
<view class="label">
<view class="label-title">可用余额<image src="/static/icon/giftPack-show.png" mode="widthFix"></image></view>
<view class="label-number">{{account.gold}}</view>
<view class="label-go">可用余额，入账记录 </view>
</view>
<view class="label">
<view class="label-title">待发放</view>
<view class="label-number">{{blockeds}}</view>
<navigator hover-class="none" :url="'/pages/giftPack/logsFrozen?type=gold' + '&blockeds=' + blockeds" class="label-go">立即查询 > </navigator>
</view>
</view>
</view>
<view class="integra-cont">
<view class="integra-title">
<view class="integra-title-name">明细记录</view>
<view class="integra-title-picker">
<picker @change="screenBind" :value="screenIndex" :range-key="'name'" :range="screenArray">
{{screenArray[screenIndex].name}}
</picker>
<image class="integra-title-icon" src="/static/icon/arrow_down.png"></image>
</view>
</view>
<view class="integra-cont-list" v-if="accounts.length > 0">
<view class="integra-cont-label" v-for="(item, index) in accounts" :key="index">
<view class="integra-cont-title">
<view class="integra-cont-name">{{item.title}}</view>
<view class="integra-cont-tips">消费金余额</view>
</view>
<view class="integra-cont-time">扣除时间：{{item.created_at}}</view>
<view class="integra-cont-number">{{item.variable}}</view>
</view>
</view>
<!-- 暂无内容 -->
<view class="recommend-hint" v-else>
<image src="/static/img/legal_tips.png"></image>
<view>抱歉，目前暂无内容~</view>
</view>
</view>
</view>
</template>
<script>
import { logs } from '@/apis/interfaces/giftPack'
import { index } from '@/apis/interfaces/user'
export default {
data() {
return {
userData : '', //用户
accounts : '', // 账户列表
page: {
has_more: false
}, // 下一页
lodingStats: false // 数据加载完渲染
}
},
// 生命周期函数--监听页面显示
onShow() {
// 存储环境-月兑活动
getApp().globalData.envType = 'giftPEnv'
// 获取账变记录
this.accountInfo();
// 获取用户接口
this.userInfo();
},
methods: {
// 用户接口
userInfo() {
// 获取用户信息
index().then(res => {
this.userData = res
}).catch(err => {
if (!err.login) {
uni.showModal({
title: '用户登录已过期',
content: '请重新登录',
showCancel: false,
success: res => {
if (res.confirm) {
uni.redirectTo({
url: '/pages/giftPack/signin'
});
}
}
});
}
});
},
// 账变记录
accountInfo(page) {
logs({
type : 'gold',
page : page,
channel : 'all'
}).then(res=>{
let newStores = this.accounts,
newData = []
if(page == 1 || page == undefined) newStores = []
newData = newStores.concat(res.data)
this.accounts = newData
this.page = res.page
this.lodingStats = false
uni.stopPullDownRefresh()
})
},
}
<script>
import { logs } from '@/apis/interfaces/giftPack'
import { index } from '@/apis/interfaces/user'
export default {
data() {
return {
blockeds : '',
account : '',
accounts : '', // 账户列表
screenArray : [
{
channel: 'all',
name: '全部'
},
{
channel: 'in',
name: '入账'
},
{
channel: 'out',
name: '出账'
}
], //账变记录筛选数组
screenChannel: '', //账变记录筛选数组标识
screenIndex : 0 , //账变记录筛选index
page : 1, //分页
lodingStats : false //加载状态
}
},
// 生命周期函数--监听页面显示
onShow() {
// 存储环境-月兑活动
getApp().globalData.envType = 'giftPEnv'
// 获取账变记录
this.accountInfo();
},
methods: {
// 账变记录
accountInfo(page) {
logs({
type : 'gold',
page : page || '',
channel : this.screenChannel
}).then(res=>{
let newStores = this.accounts,
newData = []
if(page == 1 || page == undefined) newStores = []
newData = newStores.concat(res.data)
this.accounts = newData
this.blockeds = res.blockeds
this.account = res.account
this.page = res.page
this.lodingStats = false
uni.stopPullDownRefresh()
})
},
// 筛选账变记录-条件
screenBind(e) {
this.screenIndex = e.detail.value,
this.screenChannel= this.screenArray[e.detail.value].channel
// 获取账变记录
this.accountInfo();
},
// 页面相关事件处理函数--监听用户下拉动作
onPullDownRefresh() {
// 获取账变记录
this.accountInfo();
},
// 上拉加载
onReachBottom(){
this.lodingStats = true
let pageNumber = this.page.current
if(this.page.has_more){
pageNumber++
// 获取账变记录
this.accountInfo(pageNumber);
}
}
}
}
</script>
<style lang="scss" scoped>
.content {
padding: 30rpx;
box-sizing: border-box;
}
.title {
font-size: 36rpx;
font-weight: 600;
}
.list {
margin-top: 30rpx;
.item {
background-color: #fff;
border-radius: 10rpx;
padding: 30rpx;
box-sizing: border-box;
display: flex;
.item-img {
width: 54rpx;
margin-top: 25rpx;
}
.item-cont {
width: calc(100% - 54rpx);
padding-left: 30rpx;
box-sizing: border-box;
.item-cont-top {
display: flex;
font-size: 32rpx;
font-weight: 600;
margin-bottom: 20rpx;
.item-cont-name {
flex: 1;
}
}
.item-cont-bottom {
font-size: 28rpx;
color: #a4a4a4;
display: flex;
.item-cont-total {
flex: 1;
}
}
}
}
}
.campusTips {
margin-top: 40rpx;
padding: 30rpx;
box-sizing: border-box;
.campusTips-cont {
background-color: #fff;
border-radius: 20rpx;
text-align: center;
padding: 80rpx;
box-sizing: border-box;
color: #9c7557;
image {
width: 340rpx;
height: 280rpx;
margin-bottom: 30rpx;
}
.campusTips-cont-go {
display: inline-block;
border: #9c7557 2rpx solid;
line-height: 66rpx;
padding: 0 40rpx;
margin-top: 30rpx;
font-size: 28rpx;
border-radius: 90rpx;
}
}
}
<style lang="scss" scoped>
.content {
padding: 30rpx;
box-sizing: border-box;
background-color: #fff9f9;
height: 100vh;
overflow-y: scroll;
}
.title {
font-size: 34rpx;
font-weight: 600;
text-align: center;
.title-name {
text-align: center;
position: relative;
width: 440rpx;
margin: 0 auto;
color: #f25448;
line-height: 60rpx;
&::after,
&::before {
position: absolute;
content: '';
top: calc(50% - 14rpx);
background-image: url('/static/img/giftPackArrow.png');
background-size: 100%;
background-position: center;
width: 80rpx;
height: 28rpx;
display: block;
}
&::after {
left: 0;
transform: rotate(180deg);
}
&::before {
right: 0;
}
}
}
.redBack {
background-image: linear-gradient(to top, #fe796f, #f25549);
border-radius: 30rpx;
padding: 30rpx 0 40rpx;
box-sizing: border-box;
margin: 30rpx 0;
position: relative;
}
.redBack::after,
.redBack::before {
position: absolute;
content: '';
left: 20rpx;
border-radius: 0 0 20rpx 20rpx;
}
.redBack::after {
background-color: rgba(243, 85, 73, .4);
z-index: 2;
width: calc(100% - 40rpx);
left: 20rpx;
bottom: -14px;
height: 14px;
}
.redBack::before {
background-color: rgba(243, 85, 73, .2);
z-index: 1;
width: calc(100% - 80rpx);
left: 40rpx;
bottom: -50rpx;
height: 50rpx;
}
.list {
display: flex;
.label {
flex: 2;
color: #ffffff;
box-sizing: border-box;
&:last-child {
padding-left: 60rpx;
position: relative;
}
&:first-child {
padding-left: 40rpx;
padding-right: 20rpx;
}
&:last-child::after {
position: absolute;
content: '';
left: 0;
top: 15%;
width: 2rpx;
height: 70%;
background-color: #ffffff;
opacity: .6;
}
}
.label-title {
line-height: 54rpx;
display: flex;
image {
width: 32rpx;
margin: 14rpx 0 0 15rpx;
}
}
.label-number {
margin: 10rpx 0 30rpx;
font-size: 48rpx;
font-weight: 600;
}
.label-go {
font-size: 26rpx;
opacity: .9;
}
}
.integra-cont {
margin-top: 100rpx;
.integra-title {
display: flex;
margin-bottom: 30rpx;
.integra-title-name {
font-size: 36rpx;
font-weight: 600;
flex: 1;
}
.integra-title-picker {
display: flex;
color: #797979;
font-size: 32rpx;
.integra-title-icon {
width: 28rpx;
height: 28rpx;
margin: 6rpx 0 0 10rpx;
}
}
}
.integra-cont-label {
background-color: #ffffff;
padding: 30rpx;
box-sizing: border-box;
border-radius: 20rpx;
margin-bottom: 30rpx;
position: relative;
.integra-cont-title {
display: flex;
line-height: 40rpx;
.integra-cont-tips {
margin-left: 20rpx;
color: #ff9833;
border: 2rpx solid #ff9833;
border-radius: 80rpx;
font-size: 26rpx;
padding: 0 15rpx;
}
}
.integra-cont-time {
font-size: 26rpx;
color: #666666;
margin-top: 20rpx;
}
.integra-cont-number {
position: absolute;
top: 50rpx;
right: 30rpx;
color: #f25448;
font-size: 38rpx;
}
}
}
/* 暂无内容 */
.recommend-hint {
text-align: center;
color: #999;
padding: 100rpx 0;
}
.recommend-hint image {
width: 200rpx;
height: 200rpx;
}
</style>