227 lines
8.0 KiB
Vue
227 lines
8.0 KiB
Vue
<route lang="jsonc" type="page">{
|
|
"needLogin": true,
|
|
"layout": "default",
|
|
"style": {
|
|
"navigationStyle": "custom"
|
|
}
|
|
}</route>
|
|
|
|
<template>
|
|
<view class="pb-30rpx">
|
|
<view class="order-list">
|
|
<navbar layoutLeft custom-class='!bg-[#F6F7F8]'>
|
|
<template #left>
|
|
<view class="ml-24rpx flex items-center">
|
|
<view class="text-36rpx leading-50rpx text-[#303133] mr-24rpx">我的钱包</view>
|
|
<view class="text-24rpx leading-34rpx text-[#606266]">简单·便捷·安全</view>
|
|
</view>
|
|
</template>
|
|
</navbar>
|
|
</view>
|
|
|
|
<!-- 背景图 -->
|
|
<view class="mt-20rpx mx-30rpx">
|
|
<view class="wallet-bg">
|
|
<view class="flex items-center ml-72rpx pt-10rpx">
|
|
<view class="mr-30rpx">平台余额</view>
|
|
<view class="flex items-center">
|
|
<view class="flex items-center mr-12rpx">
|
|
<wd-img width="32rpx" height="32rpx" :src="`${OSS}icon/icon_safe.png`"></wd-img>
|
|
</view>
|
|
<view class="font-400 text-24rpx leading-20rpx text-[#B6843C]">保障中</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="mt-70rpx ml-68rpx mr-60rpx">
|
|
<view class="font-400 text-28rpx leading-40rpx text-[#303133]">余额</view>
|
|
<view class="flex justify-between items-center mt-24rpx">
|
|
<view>
|
|
<price-format color="#000" :first-size="48" :second-size="48" :subscript-size="28" :price="userMoney"></price-format>
|
|
</view>
|
|
<view class="w-200rpx h-80rpx bg-[#4C9F44] rounded-8rpx font-bold text-28rpx leading-80rpx text-center text-[#fff]" @click="Wallet.handleToRecharge">
|
|
充值
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 流水明细 -->
|
|
<view class="bg-white rounded-16rpx px-30rpx py-40rpx mt-20rpx mx-30rpx">
|
|
<view class="flex justify-between items-center">
|
|
<view class="text-32rpx leading-44rpx text-[#303133] mb-20rpx">流水明细</view>
|
|
<view class="border-2rpx border-solid border-[#E5E5E5] w-196rpx h-56rpx flex justify-center items-center rounded-8rpx">
|
|
<view class="text-24rpx leading-34rpx text-[#606266] wall-date">
|
|
<!-- 2019年5月 -->
|
|
<wd-datetime-picker v-model="value" :maxDate="Date.now()" type="year-month" @confirm="Wallet.handleConfirmDate"></wd-datetime-picker>
|
|
</view>
|
|
<view>
|
|
<wd-icon name="fill-arrow-down" size="32rpx" color="#BFC2CC"></wd-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view>
|
|
<!-- 最后一个元素不显示border -->
|
|
<mescroll-body @init="mescrollInit" @down="downCallback" @up="Wallet.upCallback" :up="upOption">
|
|
<view
|
|
v-for="item in list" :key="item.id"
|
|
class="h-144rpx leading-144rpx mt-18rpx border-b border-b-solid border-b-[#E5E5E5] flex flex-col justify-center"
|
|
@click="Wallet.handleToBillDetail(item)">
|
|
<view class="text-28rpx leading-40rpx text-[#303133] flex justify-between items-center">
|
|
<view>{{ item.remark }}</view>
|
|
<view>{{ item.action == 1 ? '+' : '-' }}{{ item.amount }}</view>
|
|
</view>
|
|
<view class="text-24rpx leading-34rpx text-[#909399] flex justify-between items-center mt-10rpx">
|
|
<view>{{ item.create_time }}</view>
|
|
<view>余额{{ item.after_amount }}</view>
|
|
</view>
|
|
</view>
|
|
</mescroll-body>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
|
import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
|
|
import { useUserStore } from '@/store'
|
|
import { getUserInfo, getUserMoneyLog } from '@/api/user'
|
|
import { router } from '@/utils/tools'
|
|
|
|
const OSS = inject('OSS')
|
|
const userStore = useUserStore()
|
|
|
|
/* mescroll */
|
|
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
|
|
const downOption = {
|
|
auto: true
|
|
}
|
|
const upOption = {
|
|
auto: true,
|
|
textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
|
|
}
|
|
const list = ref<Array<any>>([]) // 茶室列表
|
|
const userMoney = ref<number>(0) // 用户余额
|
|
const canReset = ref<boolean>(false) // 避免onShow重复加载
|
|
|
|
// 日期过滤
|
|
const value = ref<number>(Date.now())
|
|
const selectTime = ref<string>('')
|
|
|
|
onShow(() => {
|
|
if (canReset.value) {
|
|
list.value = []
|
|
getMescroll().resetUpScroll();
|
|
}
|
|
canReset.value = true
|
|
|
|
getUserInfo().then(res => {
|
|
userMoney.value = Number(res.user_money)
|
|
})
|
|
})
|
|
|
|
const Wallet = {
|
|
/**
|
|
* 上拉加载
|
|
* @param mescroll
|
|
*/
|
|
upCallback: (mescroll) => {
|
|
const filter = {
|
|
page: mescroll.num,
|
|
size: mescroll.size,
|
|
month: selectTime.value
|
|
}
|
|
|
|
getUserMoneyLog(filter).then((res) => {
|
|
const curPageData = res.list || [] // 当前页数据
|
|
if(mescroll.num == 1) list.value = [] // 第一页需手动制空列表
|
|
list.value = list.value.concat(curPageData) //追加新数据
|
|
mescroll.endSuccess(curPageData.length, Boolean(res.more))
|
|
}).catch(() => {
|
|
mescroll.endErr() // 请求失败, 结束加载
|
|
})
|
|
},
|
|
|
|
/**
|
|
* 日期筛选
|
|
* @param date
|
|
*/
|
|
handleConfirmDate: (date: {value: number}) => {
|
|
const d = new Date(date.value)
|
|
const year = d.getFullYear()
|
|
const month = d.getMonth() + 1
|
|
selectTime.value = `${year}-${month < 10 ? '0' + month : month}`
|
|
|
|
// 切换tab时,重置当前的mescroll
|
|
list.value = []
|
|
getMescroll().resetUpScroll();
|
|
},
|
|
|
|
/**
|
|
* 去充值
|
|
*/
|
|
handleToRecharge: () => {
|
|
router.navigateTo('/bundle/wallet/recharge')
|
|
},
|
|
|
|
/**
|
|
* 跳转对应账单详情
|
|
*/
|
|
handleToBillDetail: (item: any) => {
|
|
switch (item.change_type) {
|
|
case 1: // 包间预定
|
|
case 2: // 包间续订
|
|
case 3: // 套餐购买
|
|
case 4: // 开通会员
|
|
router.navigateTo(`/bundle/wallet/bill?id=${item.id}`)
|
|
break
|
|
case 5: // 退款
|
|
case 6: // 充值
|
|
router.navigateTo(`/bundle/wallet/pay-bill?id=${item.id}`)
|
|
break
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: $cz-page-background;
|
|
}
|
|
|
|
.wallet-bg {
|
|
width: 690rpx;
|
|
height: 316rpx;
|
|
background-image: url(#{$OSS}images/wallet/wallet_image1.png);
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.wall-date {
|
|
:deep() {
|
|
.wd-cell {
|
|
padding-left: 0 !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.wd-cell__wrapper {
|
|
padding: 0 !important
|
|
}
|
|
|
|
.wd-datetime-picker__arrow {
|
|
display: none !important;
|
|
}
|
|
|
|
.wd-datetime-picker__action--cancel {
|
|
color: #606266 !important;
|
|
}
|
|
|
|
.wd-datetime-picker__action {
|
|
color: #4C9F44;
|
|
}
|
|
}
|
|
}
|
|
</style>
|