|
|
@@ -1,89 +1,56 @@
|
|
|
<template>
|
|
|
<view class="page flex-column">
|
|
|
- <view class="head flex-shrink">
|
|
|
- <view>
|
|
|
- <image class="bg" src="/static/wallet-banner.png"></image>
|
|
|
- <view class="fg pt-48 pl-48 pr-48">
|
|
|
- <view class="flex-align-center">
|
|
|
- <uv-icon type="wallet" size="24" color="#ffffff"></uv-icon>
|
|
|
- <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`)">退款
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="price mt-50" v-if="user">
|
|
|
- <text class="color-fff fw-600 fs-48" style="vertical-align: top">¥</text>
|
|
|
- <text
|
|
|
- class="color-fff fw-600 ml-12"
|
|
|
- style="font-size: 46px; line-height: 46px">{{ user?.balance }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
+ <view class="wallet-header">
|
|
|
+ <view class="wallet-header_title">
|
|
|
+ <view class="wallet-header_title-left">
|
|
|
+ <uv-icon name="level" color="white" size="28"></uv-icon>
|
|
|
+ <text class="font16">我的钱包</text>
|
|
|
</view>
|
|
|
+ <text class="wallet-header_title-refund" @click="handleRefund">退款</text>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- <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="{
|
|
|
- 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"></view>
|
|
|
- </view>
|
|
|
+ <view class="wallet-header_balance">
|
|
|
+ <text class="font18 mr10" style="vertical-align: top">¥</text>
|
|
|
+ <text style="font-size: 32px; line-height: 32px;font-weight: 600;">{{ (user?.balance || 0).toFixed(2) }}
|
|
|
+ </text>
|
|
|
</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)">
|
|
|
- <view>
|
|
|
- <view class="fs-30 fw-500" key="title" duration="300">{{
|
|
|
- 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>
|
|
|
- </view>
|
|
|
+ <view class="wallet-header_pounds">
|
|
|
+ <view>
|
|
|
+ <text>充值余额:</text>
|
|
|
+ <text>112.34</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 class="fs-24 ml-6">元</text>
|
|
|
- </view>
|
|
|
- <view class="fs-24" style="color: rgba(0, 0, 0, 0.4)">
|
|
|
- {{ item?.transactionTime }}
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="ml-32" v-if="item.type === 3">
|
|
|
- <uv-icon type="right" size="12" color="rgba(0,0,0,0.4)"></uv-icon>
|
|
|
- </view>
|
|
|
- <view class="ml-32" v-else> </view>
|
|
|
+ <view>
|
|
|
+ <text>赠款余额:</text>
|
|
|
+ <text>20.00</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
|
|
|
- <view style="height: 170rpx"></view>
|
|
|
+ <view class="wallet-body">
|
|
|
+ <uv-tabs :list="tabs" @click="handleTabClick"></uv-tabs>
|
|
|
+ <uv-list>
|
|
|
+ <uv-list-item
|
|
|
+ clickable show-arrow v-for="(item,index) in dataList" :key="index">
|
|
|
+ <template #default>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </uv-list-item>
|
|
|
+ <uv-list-item title="列表文字" note="列表描述信息"></uv-list-item>
|
|
|
+ <uv-list-item title="列表文字" note="列表描述信息"></uv-list-item>
|
|
|
+ <uv-list-item title="列表文字" note="列表描述信息"></uv-list-item>
|
|
|
+ <uv-list-item title="列表文字" note="列表描述信息"></uv-list-item>
|
|
|
+ </uv-list>
|
|
|
</view>
|
|
|
- <view>
|
|
|
- <view class="pl-40 pr-40 pb-30 pt-30">
|
|
|
- <uv-button
|
|
|
- type="primary"
|
|
|
- @click="to(`/pages-user/wallet-recharge/wallet-recharge`)">充值
|
|
|
- </uv-button>
|
|
|
- </view>
|
|
|
+
|
|
|
+ <view class="wallet-bottom">
|
|
|
+ <uv-button
|
|
|
+ shape="circle"
|
|
|
+ type="primary"
|
|
|
+ color="#19A497"
|
|
|
+ @click="to(`/pages-user/wallet/recharge`)">充值
|
|
|
+ </uv-button>
|
|
|
</view>
|
|
|
+
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -99,32 +66,28 @@ const dataList = ref([])
|
|
|
const tab = ref(0);
|
|
|
const tabs = ref([
|
|
|
{
|
|
|
- label: "全部",
|
|
|
+ name: "全部",
|
|
|
value: 0,
|
|
|
},
|
|
|
{
|
|
|
- label: "充值",
|
|
|
+ name: "充值",
|
|
|
value: 1,
|
|
|
},
|
|
|
{
|
|
|
- label: "消费",
|
|
|
+ name: "消费",
|
|
|
value: 3,
|
|
|
},
|
|
|
{
|
|
|
- label: "退款",
|
|
|
+ name: "退款",
|
|
|
value: 2,
|
|
|
},
|
|
|
]);
|
|
|
|
|
|
-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'},
|
|
|
-])
|
|
|
|
|
|
-const typeMap = ref(["充值", "退款", "消费"]);
|
|
|
+const handleRefund = () => {
|
|
|
+ to(`/pages-user/wallet/refund`)
|
|
|
+}
|
|
|
+
|
|
|
/*const infiniteScroller = useInfiniteScroll(10, (page) => {
|
|
|
return fetchWallet(tab.value, page, 10).then((res: any) => {
|
|
|
if (res && res.length) {
|
|
|
@@ -165,79 +128,29 @@ const to = (url: string) => {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-const ready = (e: any) => {
|
|
|
- scrollViewHeight.value =
|
|
|
- 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 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) => {
|
|
|
- if (!hex) {
|
|
|
- hex = "#000000"
|
|
|
- }
|
|
|
- hex = hex.replace("#", "");
|
|
|
- // Convert the hex value to RGB values
|
|
|
- const r = parseInt(hex.substring(0, 2), 16);
|
|
|
- const g = parseInt(hex.substring(2, 4), 16);
|
|
|
- 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})`,*/
|
|
|
- 'color': `rgb(${r},${g},${b})`
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-const changeTab = (index: number) => {
|
|
|
- tab.value = tabs.value[index].value;
|
|
|
+const handleTabClick = (e:any) => {
|
|
|
+ let {name,value,index} = e
|
|
|
+ tab.value = index;
|
|
|
+ console.log(index)
|
|
|
loadData();
|
|
|
}
|
|
|
|
|
|
const loadData = () => {
|
|
|
if (!user) return;
|
|
|
- if (tab.value !== 2) {
|
|
|
- get(`user/wallet`).then((res: any) => {
|
|
|
- if (res && res.length) {
|
|
|
- res.forEach((item: any) => {
|
|
|
- item.amount = (Number(item.amount) / 100).toFixed(2);
|
|
|
- });
|
|
|
- }
|
|
|
- dataList.value = res;
|
|
|
- })
|
|
|
- } else {
|
|
|
- body((`user/refundList`)).then((res: any) => {
|
|
|
- console.log(res)
|
|
|
- let list = (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;
|
|
|
- })
|
|
|
- dataList.value = list;
|
|
|
- })
|
|
|
- }
|
|
|
+ get(`/account/walletDetail`, {type: tab.value}).then((list: any) => {
|
|
|
+ dataList.value = list;
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
const detail = (index: number) => {
|
|
|
if (!dataList.value) {
|
|
|
return;
|
|
|
}
|
|
|
- if (dataList.value[index].type === 3) {
|
|
|
+/* if (dataList.value[index].type === 3) {
|
|
|
uni.navigateTo({
|
|
|
url: `/pages-order/detail/index?id=${dataList.value[index]?.orderNo}`,
|
|
|
});
|
|
|
- }
|
|
|
+ }*/
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
@@ -250,77 +163,68 @@ const detail = (index: number) => {
|
|
|
#e0ebff 0%,
|
|
|
rgba(255, 255, 255, 0) 60.13%
|
|
|
);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .wallet-header {
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background-color: $uni-color-primary;
|
|
|
+ margin: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 20rpx;
|
|
|
+
|
|
|
+ &_title {
|
|
|
+ display: inline-flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: whitesmoke;
|
|
|
+
|
|
|
+ &-left {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ align-content: center;
|
|
|
+ color: whitesmoke;
|
|
|
+ }
|
|
|
|
|
|
- .head {
|
|
|
- padding: 30rpx 40rpx;
|
|
|
-
|
|
|
- & > view {
|
|
|
- position: relative;
|
|
|
- height: 320rpx;
|
|
|
- border-radius: 40rpx;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .bg {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
+ &-refund {
|
|
|
+ color: #127779;
|
|
|
+ padding: 6rpx 28rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ border-radius: 14px;
|
|
|
+ background-color: #65C0B7;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .fg {
|
|
|
- position: absolute;
|
|
|
- left: 0px;
|
|
|
- top: 0px;
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
+ &_balance {
|
|
|
+ display: inline-flex;
|
|
|
+ color: white;
|
|
|
+ align-content: center;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ }
|
|
|
|
|
|
- .btn {
|
|
|
- width: 120rpx;
|
|
|
- height: 64rpx;
|
|
|
- border-radius: 40rpx;
|
|
|
- background: rgba(255, 255, 255, 0.3);
|
|
|
- color: #076370;
|
|
|
- }
|
|
|
- }
|
|
|
+ &_pounds {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ display: inline-flex;
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: white;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .body {
|
|
|
- .tabs {
|
|
|
- padding: 0 40rpx;
|
|
|
+ .wallet-body {
|
|
|
|
|
|
- & > view {
|
|
|
- position: relative;
|
|
|
- height: 72rpx;
|
|
|
+ margin-bottom: 60rpx;
|
|
|
+ }
|
|
|
|
|
|
- .active {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- bottom: 0px;
|
|
|
- transform: translateX(-50%);
|
|
|
- width: 40rpx;
|
|
|
- height: 4rpx;
|
|
|
- border-radius: 4rpx;
|
|
|
- background-color: var(--color-primary);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .wallet-bottom {
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20rpx;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
|
|
|
- .list {
|
|
|
- .item {
|
|
|
- height: 130rpx;
|
|
|
- border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
- &:last-child {
|
|
|
- border-bottom: none;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
-.refund-status {
|
|
|
- display: inline-block;
|
|
|
- //padding: 8rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- font-weight: 500;
|
|
|
-}
|
|
|
</style>
|