|
|
@@ -1,9 +1,9 @@
|
|
|
<template>
|
|
|
<view class="page flex-column">
|
|
|
<navigation-bar
|
|
|
- autoFixedStyle="background-color:#fff;"
|
|
|
- title="我的钱包"
|
|
|
- @ready="ready"
|
|
|
+ autoFixedStyle="background-color:#fff;"
|
|
|
+ title="我的钱包"
|
|
|
+ @ready="ready"
|
|
|
></navigation-bar>
|
|
|
<view class="head flex-shrink">
|
|
|
<view>
|
|
|
@@ -11,25 +11,28 @@
|
|
|
<view class="fg pt-48 pl-48 pr-48">
|
|
|
<view class="flex-align-center">
|
|
|
<uni-icons
|
|
|
- type="wallet-filled"
|
|
|
- size="24"
|
|
|
- color="#ffffff"
|
|
|
+ type="wallet-filled"
|
|
|
+ size="24"
|
|
|
+ color="#ffffff"
|
|
|
></uni-icons>
|
|
|
<view class="fs-36 color-fff fw-500 ml-16">我的钱包</view>
|
|
|
<view
|
|
|
- class="btn flex-center fs-28 ml-auto"
|
|
|
- @click="to(`/pages-user/wallet-refund/wallet-refund`)"
|
|
|
- >退款</view
|
|
|
+ class="btn flex-center fs-28 ml-auto"
|
|
|
+ @click="to(`/pages-user/wallet-refund/wallet-refund`)"
|
|
|
+ >退款
|
|
|
+ </view
|
|
|
>
|
|
|
</view>
|
|
|
<view class="price mt-50" v-if="user">
|
|
|
<text class="color-fff fw-600 fs-48" style="vertical-align: top"
|
|
|
- >¥</text
|
|
|
+ >¥
|
|
|
+ </text
|
|
|
>
|
|
|
<text
|
|
|
- class="color-fff fw-600 ml-12"
|
|
|
- style="font-size: 46px; line-height: 46px"
|
|
|
- >{{ user.balance }}</text
|
|
|
+ class="color-fff fw-600 ml-12"
|
|
|
+ style="font-size: 46px; line-height: 46px"
|
|
|
+ >{{ user.balance }}
|
|
|
+ </text
|
|
|
>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -38,54 +41,59 @@
|
|
|
<view class="body flex-grow flex-column">
|
|
|
<view class="tabs flex-shrink flex-align-center">
|
|
|
<view
|
|
|
- v-for="(item, index) in tabs"
|
|
|
- :key="index"
|
|
|
- class="flex-align-center fs-30 mr-60"
|
|
|
- :style="{
|
|
|
+ v-for="(item, index) in tabs"
|
|
|
+ :key="index"
|
|
|
+ class="flex-align-center fs-30 mr-60"
|
|
|
+ :style="{
|
|
|
color:
|
|
|
tab === item.value ? 'rgba(0, 0, 0, 1);' : 'rgba(0, 0, 0, 0.6);',
|
|
|
}"
|
|
|
- @click="changeTab(index)"
|
|
|
- >{{ item.label
|
|
|
- }}<view
|
|
|
- :style="{ opacity: tab === item.value ? '1' : '0' }"
|
|
|
- class="active"
|
|
|
+ @click="changeTab(index)"
|
|
|
+ >{{
|
|
|
+ item.label
|
|
|
+ }}
|
|
|
+ <view
|
|
|
+ :style="{ opacity: tab === item.value ? '1' : '0' }"
|
|
|
+ class="active"
|
|
|
></view
|
|
|
- ></view>
|
|
|
+ >
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="list pl-30 pr-30">
|
|
|
<view
|
|
|
- class="item flex-align-center"
|
|
|
- v-for="(item, index) in dataList"
|
|
|
- :key="index"
|
|
|
- @click="detail(index)"
|
|
|
+ class="item flex-align-center"
|
|
|
+ v-for="(item, index) in dataList"
|
|
|
+ :key="index"
|
|
|
+ @click="detail(index)"
|
|
|
>
|
|
|
<view>
|
|
|
<view class="fs-30 fw-500" key="title" duration="300">{{
|
|
|
- typeMap[item.type - 1]
|
|
|
- }}</view>
|
|
|
+ typeMap[item.type - 1]
|
|
|
+ }}
|
|
|
+ </view>
|
|
|
<view v-if="item.type!==2">
|
|
|
<view class="fs-24" style="color: rgba(0, 0, 0, 0.4)">余额</view>
|
|
|
</view>
|
|
|
<view v-else>
|
|
|
- <text class="refund-status" :style="refundStyle(item.status)">{{refundLabel(item.status)}}</text>
|
|
|
+ <text class="refund-status" :style="refundStyle(item.status)">{{ refundLabel(item.status) }}</text>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
<view class="ml-auto" style="text-align: right">
|
|
|
<view class="fs-30 fw-500">
|
|
|
- <text>{{ item.type ==3 ? "- " : "" }}{{ item.amount }}</text>
|
|
|
+ <text>{{ item.type == 3 ? "- " : "" }}{{ item.amount }}</text>
|
|
|
<text class="fs-24 ml-6">元</text>
|
|
|
</view>
|
|
|
<view class="fs-24" style="color: rgba(0, 0, 0, 0.4)">{{
|
|
|
- item.transactionTime
|
|
|
- }}</view>
|
|
|
+ item.transactionTime
|
|
|
+ }}
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="ml-32" v-if="item.type === 3">
|
|
|
<uni-icons
|
|
|
- type="right"
|
|
|
- size="12"
|
|
|
- color="rgba(0,0,0,0.4)"
|
|
|
+ type="right"
|
|
|
+ size="12"
|
|
|
+ color="rgba(0,0,0,0.4)"
|
|
|
></uni-icons>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -95,9 +103,10 @@
|
|
|
<style-bottom-view background="#ffffff">
|
|
|
<view class="pl-40 pr-40 pb-30 pt-30">
|
|
|
<style-button
|
|
|
- type="primary"
|
|
|
- @click="to(`/pages-user/wallet-recharge/wallet-recharge`)"
|
|
|
- >充值</style-button
|
|
|
+ type="primary"
|
|
|
+ @click="to(`/pages-user/wallet-recharge/wallet-recharge`)"
|
|
|
+ >充值
|
|
|
+ </style-button
|
|
|
>
|
|
|
</view>
|
|
|
</style-bottom-view>
|
|
|
@@ -105,16 +114,16 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { useInfiniteScroll } from "../../utils/infinite-scroll";
|
|
|
-import { onReachBottom, onPullDownRefresh, onShow } from "@dcloudio/uni-app";
|
|
|
-import { fetchWallet ,listRefund} from "../../api/user";
|
|
|
-import { to } from "../../utils/navigate";
|
|
|
-import { ref } from "vue";
|
|
|
-import { rpxToPx } from "@/utils/device";
|
|
|
+import {useInfiniteScroll} from "../../utils/infinite-scroll";
|
|
|
+import {onReachBottom, onPullDownRefresh, onShow} from "@dcloudio/uni-app";
|
|
|
+import {fetchWallet, listRefund} from "../../api/user";
|
|
|
+import {to} from "../../utils/navigate";
|
|
|
+import {ref} from "vue";
|
|
|
+import {rpxToPx} from "@/utils/device";
|
|
|
|
|
|
const user = ref();
|
|
|
|
|
|
-const dataList =ref([])
|
|
|
+const dataList = ref([])
|
|
|
const tab = ref(0);
|
|
|
const tabs = ref([
|
|
|
{
|
|
|
@@ -136,11 +145,11 @@ const tabs = ref([
|
|
|
]);
|
|
|
|
|
|
const refundStatusMap = ref([
|
|
|
- {label:'退款成功 ',value:'SUCCESS',color:'#4cd964'},
|
|
|
- {label:'退款关闭 ',value:'CLOSED',color:'#000000'},
|
|
|
- {label:'退款处理中 ',value:'PROCESSING',color:'#007aff'},
|
|
|
- {label:'退款异常 ',value:'ABNORMAL',color:'#dd524d'},
|
|
|
- {label:'退款已申请 ',value:'NEW',color:'#f0ad4e'},
|
|
|
+ {label: '退款成功 ', value: 'SUCCESS', color: '#4cd964'},
|
|
|
+ {label: '退款关闭 ', value: 'CLOSED', color: '#000000'},
|
|
|
+ {label: '退款处理中 ', value: 'PROCESSING', color: '#007aff'},
|
|
|
+ {label: '退款异常 ', value: 'ABNORMAL', color: '#dd524d'},
|
|
|
+ {label: '退款已申请 ', value: 'NEW', color: '#f0ad4e'},
|
|
|
])
|
|
|
|
|
|
const typeMap = ref(["充值", "退款", "消费"]);
|
|
|
@@ -180,20 +189,20 @@ onPullDownRefresh(() => {
|
|
|
|
|
|
const ready = (e: any) => {
|
|
|
scrollViewHeight.value =
|
|
|
- getApp<any>().globalData.device.windowHeight -
|
|
|
- (e.detail.navigationBarHeight + rpxToPx(380));
|
|
|
+ getApp<any>().globalData.device.windowHeight -
|
|
|
+ (e.detail.navigationBarHeight + rpxToPx(380));
|
|
|
};
|
|
|
|
|
|
-const refundLabel = (value:string)=>{
|
|
|
- return refundStatusMap.value.find((item:any)=>item.value===value)?.label
|
|
|
+const refundLabel = (value: string) => {
|
|
|
+ return refundStatusMap.value.find((item: any) => item.value === value)?.label
|
|
|
}
|
|
|
|
|
|
-const refundStyle = (value:string)=>{
|
|
|
- let rf = refundStatusMap.value.find((item:any)=>item.value===value);
|
|
|
+const refundStyle = (value: string) => {
|
|
|
+ let rf = refundStatusMap.value.find((item: any) => item.value === value);
|
|
|
return setupLabelColorStyle(rf?.color)
|
|
|
}
|
|
|
|
|
|
-const setupLabelColorStyle=(hex: string = "#000000", opacity = 0.2)=> {
|
|
|
+const setupLabelColorStyle = (hex: string = "#000000", opacity = 0.2) => {
|
|
|
if (!hex) {
|
|
|
hex = "#000000"
|
|
|
}
|
|
|
@@ -204,8 +213,8 @@ const setupLabelColorStyle=(hex: string = "#000000", opacity = 0.2)=> {
|
|
|
const b = parseInt(hex.substring(4, 6), 16);
|
|
|
|
|
|
return {
|
|
|
-/* 'text-shadow': `2px 2px 3px rgba(${r},${g},${b},${opacity})`,
|
|
|
- 'background-color': `rgba(${r},${g},${b},${opacity})`,*/
|
|
|
+ /* 'text-shadow': `2px 2px 3px rgba(${r},${g},${b},${opacity})`,
|
|
|
+ 'background-color': `rgba(${r},${g},${b},${opacity})`,*/
|
|
|
'color': `rgb(${r},${g},${b})`
|
|
|
}
|
|
|
}
|
|
|
@@ -213,31 +222,31 @@ const setupLabelColorStyle=(hex: string = "#000000", opacity = 0.2)=> {
|
|
|
const changeTab = (index: number) => {
|
|
|
tab.value = tabs.value[index].value;
|
|
|
loadData();
|
|
|
-/* if (tab.value === 2) {
|
|
|
- let user = getApp<any>().globalData.user;
|
|
|
- if (user) {
|
|
|
- listRefund({userId: user.id,pageSize:1000}).then((res: any) => {
|
|
|
- console.log(res)
|
|
|
- let dataList = (res.list || []).map(item => {
|
|
|
- item.amount = (Number(item.refund) / 100).toFixed(2);
|
|
|
- item.type = 2;
|
|
|
- if (item.successTime) {
|
|
|
- item.transactionTime = item.successTime.slice(0, 3).join("-") + " " + item.successTime.slice(3, 6).join(":")
|
|
|
- }
|
|
|
- return item;
|
|
|
+ /* if (tab.value === 2) {
|
|
|
+ let user = getApp<any>().globalData.user;
|
|
|
+ if (user) {
|
|
|
+ listRefund({userId: user.id,pageSize:1000}).then((res: any) => {
|
|
|
+ console.log(res)
|
|
|
+ let dataList = (res.list || []).map(item => {
|
|
|
+ item.amount = (Number(item.refund) / 100).toFixed(2);
|
|
|
+ item.type = 2;
|
|
|
+ if (item.successTime) {
|
|
|
+ item.transactionTime = item.successTime.slice(0, 3).join("-") + " " + item.successTime.slice(3, 6).join(":")
|
|
|
+ }
|
|
|
+ return item;
|
|
|
+ })
|
|
|
+ infiniteScroller.setList(dataList);
|
|
|
})
|
|
|
- infiniteScroller.setList(dataList);
|
|
|
- })
|
|
|
- } else {
|
|
|
- infiniteScroller.refresh();
|
|
|
- }
|
|
|
+ } else {
|
|
|
+ infiniteScroller.refresh();
|
|
|
+ }
|
|
|
|
|
|
- }*/
|
|
|
+ }*/
|
|
|
}
|
|
|
|
|
|
-const loadData = ()=>{
|
|
|
- if(!user)return;
|
|
|
- if(tab.value!==2){
|
|
|
+const loadData = () => {
|
|
|
+ if (!user) return;
|
|
|
+ if (tab.value !== 2) {
|
|
|
fetchWallet(tab.value, 1, 1000).then((res: any) => {
|
|
|
if (res && res.length) {
|
|
|
res.forEach((item: any) => {
|
|
|
@@ -246,10 +255,10 @@ const loadData = ()=>{
|
|
|
}
|
|
|
dataList.value = res;
|
|
|
});
|
|
|
- }else{
|
|
|
- listRefund({userId: user.value.id,pageSize:1000}).then((res: any) => {
|
|
|
+ } else {
|
|
|
+ listRefund({userId: user.value.id, pageSize: 1000}).then((res: any) => {
|
|
|
console.log(res)
|
|
|
- let list = (res.list || []).map(item => {
|
|
|
+ let list = (res.list || []).map(item => {
|
|
|
item.amount = (Number(item.refund) / 100).toFixed(2);
|
|
|
item.type = 2;
|
|
|
if (item.successTime) {
|
|
|
@@ -279,27 +288,32 @@ const detail = (index: number) => {
|
|
|
height: 100vh;
|
|
|
width: 100vw;
|
|
|
background: linear-gradient(
|
|
|
- 180deg,
|
|
|
- #e0ebff 0%,
|
|
|
- rgba(255, 255, 255, 0) 60.13%
|
|
|
+ 180deg,
|
|
|
+ #e0ebff 0%,
|
|
|
+ rgba(255, 255, 255, 0) 60.13%
|
|
|
);
|
|
|
+
|
|
|
.head {
|
|
|
padding: 30rpx 40rpx;
|
|
|
+
|
|
|
& > view {
|
|
|
position: relative;
|
|
|
height: 320rpx;
|
|
|
border-radius: 40rpx;
|
|
|
overflow: hidden;
|
|
|
+
|
|
|
.bg {
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
}
|
|
|
+
|
|
|
.fg {
|
|
|
position: absolute;
|
|
|
left: 0px;
|
|
|
top: 0px;
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
+
|
|
|
.btn {
|
|
|
width: 120rpx;
|
|
|
height: 64rpx;
|
|
|
@@ -310,12 +324,15 @@ const detail = (index: number) => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.body {
|
|
|
.tabs {
|
|
|
padding: 0 40rpx;
|
|
|
+
|
|
|
& > view {
|
|
|
position: relative;
|
|
|
height: 72rpx;
|
|
|
+
|
|
|
.active {
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
@@ -328,10 +345,12 @@ const detail = (index: number) => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.list {
|
|
|
.item {
|
|
|
- height: 170rpx;
|
|
|
+ height: 130rpx;
|
|
|
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
&:last-child {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
@@ -340,9 +359,9 @@ const detail = (index: number) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.refund-status{
|
|
|
+.refund-status {
|
|
|
display: inline-block;
|
|
|
- padding: 8rpx;
|
|
|
+ //padding: 8rpx;
|
|
|
font-size: 22rpx;
|
|
|
font-weight: 500;
|
|
|
}
|
skyline
