jiuyiUniapp/jiuyi2/pages/index/wallet/wallet.vue

293 lines
6.7 KiB
Vue

<script setup>
/**
* 我的钱包
*/
import {
onMounted,
computed,
reactive,
ref,
getCurrentInstance,
} from 'vue'
import {
onLoad,
onReady,
onReachBottom,
onPullDownRefresh
} from '@dcloudio/uni-app'
import {
useStore,
} from 'vuex'
// api
import api from "@/api/index.js"
// 工具库
import util from '@/common/js/util.js'
// 代理
const {
proxy
} = getCurrentInstance()
const store = useStore()
// 待入帐列表
const releasedList = ref([])
// 积分变动记录
const scrollLog = reactive({
data: [],
pageNum: 1,
pageSize: 30,
total: 0,
})
// 收益明细列表
const getLog = reactive({
data: [],
pageNum: 1,
pageSize: 30,
total: 0,
})
// 收益类型列表
const getTypeList = reactive([{
type: 0,
name: '待结算',
}, {
type: 1,
name: '待入账',
}, {
type: 2,
name: '已入账',
}])
// 收益类型列表索引
const getTypeListIndex = ref(0)
// 待释放列表
const releasedLst = ref([])
// 用户信息
const userinfo = computed(() => store.state.userinfo || {})
// 我的钱包
const wallet = computed(() => store.state.purse || {})
onLoad(() => {
// 获取待释放
getReleased()
// 获取收益列表
getGetList()
// 获取钱包
util.getPurse()
})
// 重载收益列表
function refreshMoreGetList() {
getLog.pageNum = 1
// 获取收益列表
getGetList()
}
// 获取更多收益列表
function getMoreGetList() {
if (getLog.total <= getLog.data.length) return
getLog.pageNum++
// 获取收益列表
getGetList()
}
// 获取收益列表
function getGetList() {
api.mine.getGetList({
query: {
pageSize: getLog.pageSize,
pageNum: getLog.pageNum,
},
data: {
status: getTypeList[getTypeListIndex.value].type,
},
}).then(rs => {
if (rs.code == 200) {
if (getLog.pageNum === 1) getLog.data.length = 0
//
getLog.data.push(...rs.rows)
//
getLog.total = rs.total
return
}
util.alert({
content: rs.msg,
showCancel: false,
})
})
}
// 获取待释放
function getReleased() {
api.mine.releasedList({}).then(rs => {
if (rs.code == 200) {
releasedList.value = rs.data
return
}
util.alert({
content: rs.msg,
showCancel: false,
})
})
}
/**
* 收益类型下标
* @param {Object} index
*/
function handleGetTypeIndex(index) {
if (getTypeListIndex.value === index) return
getTypeListIndex.value = index
getLog.data.length = 0
// 重载收益列表
refreshMoreGetList()
}
/**
* 跳转
* @param {Object} url 路径
*/
function link(url) {
uni.navigateTo({
url: url
});
}
</script>
<template>
<view class="app plr60">
<!-- 我的钱包 -->
<view class="board mt60 ptb25 plr30 c111 f28 br25">
<view class="">总资产(余额)</view>
<view class="balance rows">
<view class="price dib mtb10 ptb10 plr15 c333 f48 bfff br15">
<text>{{wallet.balance || 0}}</text>
</view>
<view class="">
<navigator url="/pages/index/wallet/topUp" hover-class="none">
<view class="btn sm bar black plr20">充值</view>
</navigator>
<navigator url="/pages/index/wallet/get" hover-class="none">
<view class="btn sm bar black mt20 plr20">提现</view>
</navigator>
</view>
</view>
<template v-if="util.config.showVivo">
<view class="mtb10">可用积分 {{wallet.score || 0}}</view>
</template>
</view>
<view class="rows mtb30 ptb20 plr30 cfff f34 b000 br10" @click="link('/pages/index/wallet/bill')">
<text>我的账单</text>
<uni-icons type="right" color="" />
</view>
<template v-if="util.config.showVivo">
<view class="rows mtb30 ptb20 plr30 cfff f34 b000 br10" @click="$refs.released.open()">
<text>待入账列表</text>
<uni-icons type="right" color="" />
</view>
<view class="rows mtb30 ptb20 plr30 cfff f34 b000 br10" v-if="userinfo.isShop == 1">
<text>商家明细</text>
<uni-icons type="right" c1olor="" />
</view>
<view class="rows mtb30 ptb20 plr30 cfff f34 b000 br10" @click="$refs.get.open()">
<text>我的收益</text>
<uni-icons type="right" color="" />
</view>
</template>
<!-- 待释放 -->
<uni-popup ref="released" type="center">
<view class="releasedAlt alertContainer oh popMid bfff br20">
<view class="header rows ptb20 plr20 c333 f34 b">
<view class="title">待入账列表</view>
<uni-icons type="closeempty" @click="$refs.released.close()" />
</view>
<view class="main mtb20 plr30">
<scroll-view scroll-y="true" class="scroll">
<view class="list c333 f30" v-for="(item,index) in releasedList" :key="index">
<view class="item mtb30">
<text>待释放{{item.mount}}</text>
<text v-if="item.type === 0">积分</text>
<text v-else-if="item.type === 1">榴莲果</text>
<text v-else-if="item.type === 2">积分</text>
</view>
</view>
<view class="nomore" v-if="releasedList[0]">暂无更多~</view>
<view class="nomore" v-if="!releasedList[0]">暂无内容~</view>
</scroll-view>
</view>
</view>
</uni-popup>
<!-- 收益 -->
<uni-popup ref="get" type="center">
<view class="getAlt alertContainer oh popMid bfff br20">
<view class="header rows ptb20 plr20 c333 f34 b">
<view class="title">我的收益</view>
<uni-icons type="closeempty" @click="$refs.get.close()" />
</view>
<view class="tab">
<view class="item fmid fdc ptb10" :class="{'active':index === getTypeListIndex}"
v-for="(item,index) in getTypeList" :key="index" @click="handleGetTypeIndex(index)">
<view>{{item.name}}</view>
</view>
</view>
<view class="main mtb20 plr30">
<scroll-view scroll-y="true" class="scroll" @scrolltolower="getMoreGetList">
<view class="list c333 f30">
<view class="item mtb30 f32" v-for="(item,index) in getLog.data" :key="index">
<view class="rows">
<view class="f1 f32">{{item.typeName}}</view>
<view class="f28">{{item.amount}}积分</view>
</view>
<view class="time mt10 c999 f28 ">{{item.createTime}}</view>
</view>
</view>
<view class="nomore" v-if="!getLog.data[0]">暂无内容~</view>
<view class="nomore" v-else-if="getLog.data.length === getLog.total">暂无更多~</view>
</scroll-view>
</view>
</view>
</uni-popup>
</view>
</template>
<style lang="scss" scoped>
// 板子
.board {
background-image: linear-gradient(130deg, rgb(233, 170, 80) 0%, rgb(249, 217, 89) 50%, rgb(233, 170, 80) 100%);
}
// 待释放弹窗
.alertContainer {
.header {
border-bottom: 2rpx solid #ddd;
}
// tab
.tab {
display: flex;
// 单项
.item {
flex: 1;
color: #999;
&.active {
font-weight: 600;
color: #333;
}
}
}
.scroll {
height: 50vh;
}
}
</style>