263 lines
10 KiB
Vue
263 lines
10 KiB
Vue
<route lang="jsonc" type="page">{
|
||
"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="userStore.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">
|
||
<!-- TODO 这里除了提现其余的要跳转到账单明细（/bundle/wallet/wallet）提现（/bundle/parten/pages/withdraw/withdraw）-->
|
||
<view class="h-144rpx leading-144rpx mt-18rpx border-b border-b-solid border-b-[#E5E5E5] flex items-center justify-between pb-14rpx" @click="Wallet.handleToBillDetail(item)" v-for="item in list" :key="item.id">
|
||
<view>
|
||
<view class="font-bold text-30rpx leading-42rpx text-[#303133]">
|
||
<view class="flex items-center">
|
||
<view>{{ Wallet.handleMapTransactionType(item.change_type) }}</view>
|
||
<view
|
||
v-if="item.change_type == 3 && item.reflect_status == 0"
|
||
class="w-86rpx h-32rpx leading-32rpx text-center ml-30rpx text-[#40AE36] text-22rpx rounded-4rpx border-2rpx border-solid border-[#40AE36]">
|
||
申请中
|
||
</view>
|
||
|
||
<view
|
||
v-if="item.change_type == 3 && item.reflect_status == 2"
|
||
class="w-86rpx h-32rpx leading-32rpx text-center ml-30rpx text-[#E64545] text-22rpx rounded-4rpx border-2rpx border-solid border-[#E64545]">
|
||
已拒绝
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="text-24rpx text-[#606266] leading-34rpx mt-16rpx">
|
||
<text v-if="item.change_type <= 2">预定账号：{{ item.mobile }}</text>
|
||
</view>
|
||
<view class="mt-12rpx text-24rpx text-[#606266] leading-34rpx">
|
||
{{ item.create_time }}
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<view class="flex items-center h-50rpx">
|
||
<view class="mr-16rpx">
|
||
<text> {{ item.change_type == 3 ? '-' : '+' }}</text>
|
||
<price-format color="#000" :first-size="36" :second-size="36" :showSubscript="false" :price="item.amount"></price-format>
|
||
</view>
|
||
<view>
|
||
<wd-icon name="arrow-right" size="32rpx" color="#9496A5"></wd-icon>
|
||
</view>
|
||
</view>
|
||
<view class="text-24rpx text-[#909399] leading-34rpx">
|
||
余额 {{ 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 type { IUserResult } from '@/api/types/user'
|
||
import { getUserInfo, getUserTransactionDetails } 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 value = ref<number>(Date.now())
|
||
const selectTime = ref<string>('')
|
||
|
||
onShow(() => {
|
||
|
||
})
|
||
|
||
const Wallet = {
|
||
/**
|
||
* 上拉加载
|
||
* @param mescroll
|
||
*/
|
||
upCallback: (mescroll) => {
|
||
const filter = {
|
||
page: mescroll.num,
|
||
size: mescroll.size,
|
||
end_time: selectTime.value
|
||
}
|
||
|
||
getUserTransactionDetails(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: () => {
|
||
uni.$on('refreshWalletPage', () => {
|
||
uni.$off('refreshWalletPage')
|
||
// 切换tab时,重置当前的mescroll
|
||
list.value = []
|
||
getMescroll().resetUpScroll();
|
||
})
|
||
uni.navigateTo({
|
||
url: '/bundle/parten/pages/withdraw/withdraw'
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 跳转对应账单详情
|
||
* @param id
|
||
*/
|
||
handleToBillDetail: (item: {id: number, change_type: number}) => {
|
||
// change_type: 1包间预定 2包间续订 3提现 4团购核销
|
||
if (item.change_type === 3) {
|
||
router.navigateTo(`/bundle/parten/pages/withdraw/progress?id=${item.id}`)
|
||
return
|
||
} else {
|
||
router.navigateTo(`/bundle/wallet/bill?id=${item.id}`)
|
||
return
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 映射流水明细类型
|
||
*/
|
||
handleMapTransactionType: (type: number) => {
|
||
const typeMap: Record<number, string> = {
|
||
1: '包间预定',
|
||
2: '包间续费',
|
||
3: '提现',
|
||
4: '团购核销'
|
||
}
|
||
return typeMap[type] || '其他'
|
||
}
|
||
}
|
||
</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>
|