You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
328 lines
8.3 KiB
328 lines
8.3 KiB
<template> |
|
<view> |
|
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil"> |
|
<block slot="backText">返回</block> |
|
<block slot="content">油豆中心</block> |
|
</cu-custom> |
|
<view class="" v-show="accountStatus"> |
|
<view class="placeholder bg-main-oil"> |
|
|
|
</view> |
|
<view class="move-top"> |
|
<view class="flex radius margin my-shadow position-re"> |
|
<view class="basis-sm text-center padding bg-gradual-black"> |
|
我的油豆 |
|
</view> |
|
<view class="basis-lg padding bg-white"> |
|
总余额：<text class="text-red">{{userTotal.oilCardTotalPrice|moneyFormat}}元</text> |
|
<text class="cu-tag yu-tag-right position-ab sm">{{cardList.length>0?cardList.length:1}} |
|
个</text> |
|
</view> |
|
</view> |
|
<!-- <view class="flex radius margin my-shadow position-re"> |
|
<view class="basis-sm text-center padding bg-gradual-black"> |
|
自营公司油卡 |
|
</view> |
|
<view class="basis-lg padding bg-white"> |
|
余额：400.00 元 |
|
<text class="cu-tag yu-tag-right position-ab sm">1张</text> |
|
</view> |
|
</view> |
|
<view class="flex radius margin my-shadow position-re"> |
|
<view class="basis-sm text-center padding bg-gradual-black"> |
|
三方公司油卡 |
|
</view> |
|
<view class="basis-lg padding bg-white"> |
|
总余额：<text class="text-red">{{userTotal.oilCardTotalPrice|moneyFormat}}元</text> |
|
<text class="cu-tag yu-tag-right position-ab sm">{{cardList.length-1>0?cardList.length-1:1}}张</text> |
|
</view> |
|
</view> --> |
|
</view> |
|
|
|
</view> |
|
|
|
<view class=" margin-bottom-lg"> |
|
<swiper class="screen-swiper square-dot" @change="cardSwiper" :indicator-dots="true" :circular="true" |
|
:autoplay="false" interval="5000" duration="500"> |
|
<swiper-item v-for="(item,index) in cardList" :key="index" :class="cardCur==index?'cur':''"> |
|
<!-- <image :src="imgURL+ (item.type=='zs'?'card-zs.png':'card-other.png')" mode="aspectFill"> |
|
</image> --> |
|
<oil-card :card="item"></oil-card> |
|
</swiper-item> |
|
</swiper> |
|
</view> |
|
|
|
<view class="transactions padding-top solid-top margin my-shadow radius margin-top"> |
|
<view class="" v-if="cardList[cardCur].shareCompanyQuota==1"> |
|
<view class="text-center "> |
|
<view class="text-red padding-bottom-sm text-bold text-lg"> |
|
共享企业余额 |
|
</view> |
|
|
|
<text |
|
class="text-grey">单日加油额度：{{cardList[cardCur].orderAmountToplimit}}元；单日加油升数额度：{{cardList[cardCur].orderVolumeToplimit}}L</text> |
|
</view> |
|
|
|
|
|
<view class="text-center padding"> |
|
<!-- <view class="text-red text-bold text-lg"> |
|
{{userTotal.oilCardTotalPrice|moneyFormat}}元 |
|
</view> --> |
|
|
|
<text class="">交易记录</text> |
|
</view> |
|
</view> |
|
<view> |
|
<view class="cu-list menu" v-if="historyLsit.length>0"> |
|
<view class="cu-item" v-for="detail in historyLsit" :key="detail.id"> |
|
<view class="content padding-tb-sm"> |
|
|
|
<view class="text-gray text-sm"> |
|
{{detail.createTime}} |
|
</view> |
|
<view> |
|
{{detail.billTypeName + ' '}}{{ detail.occurAmount|moneyFormat}}个 |
|
</view> |
|
</view> |
|
<view class="action"> |
|
<text class="text-black">{{detail.occurAmount|moneyFormat}}</text> |
|
</view> |
|
</view> |
|
</view> |
|
<my-empty v-else :marginTopExtra="false"></my-empty> |
|
</view> |
|
</view> |
|
<view class="bg-white"> |
|
<uni-load-more :status="loadStatus"></uni-load-more> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import oilCard from '../../components/oil-card/oil-card.vue' |
|
import accountApi from '@/api/account.js' |
|
export default { |
|
components: { |
|
oilCard |
|
}, |
|
data() { |
|
return { |
|
loadStatus: 'load', |
|
userTotal: {}, |
|
historyLsit: [], |
|
accountStatus: uni.getStorageSync('accountStatus'), |
|
imgURL: this.global.imgURL, |
|
cardCur: 0, |
|
swiperList: [{ |
|
id: 0, |
|
bgColor: 'bg-gradual-blue', |
|
text: '油卡卡10086', |
|
type: 'zs' |
|
}, |
|
{ |
|
id: 1, |
|
bgColor: 'bg-gradual-purple', |
|
text: '油卡卡123454', |
|
type: 'other' |
|
}, |
|
{ |
|
id: 2, |
|
bgColor: 'bg-gradual-green', |
|
text: '油卡卡896671', |
|
type: 'other' |
|
}, |
|
{ |
|
id: 3, |
|
bgColor: 'bg-gradual-orange', |
|
text: '油卡卡567651', |
|
type: 'other' |
|
}, |
|
{ |
|
id: 4, |
|
bgColor: 'bg-gradual-pink', |
|
text: '油卡卡454565651', |
|
type: 'other' |
|
}, |
|
{ |
|
id: 5, |
|
bgColor: 'bg-gradual-red', |
|
text: '油卡卡154645645', |
|
type: 'other' |
|
}, |
|
], |
|
dotStyle: false, |
|
towerStart: 0, |
|
direction: '', |
|
cardList: [], |
|
currentPage: 1 |
|
}; |
|
}, |
|
onLoad() { |
|
this.getCards() |
|
this.getTotalOilCardInfo() |
|
this.TowerSwiper('swiperList'); |
|
// 初始化towerSwiper 传已有的数组名即可 |
|
}, |
|
onReachBottom() { |
|
if (this.loadStatus == 'more') { |
|
setTimeout(() => { |
|
this.getMoneyDetail(this.cardList[0]) |
|
}, 100) |
|
} else { |
|
uni.showToast({ |
|
title: '到底啦', |
|
icon: 'none' |
|
}) |
|
} |
|
}, |
|
methods: { |
|
|
|
getAmount() { |
|
accountApi.getTotalOilCardInfo().then(res => { |
|
if (res.code == 20000) { |
|
this.userTotal = res.data |
|
} |
|
}) |
|
}, |
|
getTotalOilCardInfo() { |
|
accountApi.getTotalOilCardInfo().then(res => { |
|
if (res.code == 20000) { |
|
this.userTotal = res.data |
|
} |
|
}) |
|
}, |
|
getMoneyDetail(card) { |
|
let data2 = { |
|
currentPage: this.currentPage, |
|
index: this.historyLsit.length?this.historyLsit.length:0, |
|
pageSize: 20, |
|
params: { |
|
id: card.id, |
|
oilCardType: card.oilCardType |
|
} |
|
|
|
} |
|
accountApi.getOilCardRecordByPage(data2).then(res => { |
|
if (res.code == 20000) { |
|
if (res.data.list.length < 20) { |
|
this.loadStatus = 'nomore' |
|
} else { |
|
this.loadStatus = 'more' |
|
this.currentPage++ |
|
} |
|
this.historyLsit = this.historyLsit.concat(res.data.list) |
|
} |
|
}) |
|
}, |
|
getCards() { |
|
accountApi.getUserAccount().then(res => { |
|
if (res.code == 20000) { |
|
this.cardList = res.data |
|
if (this.cardList.length > 0) { |
|
this.getMoneyDetail(this.cardList[0]) |
|
} |
|
} |
|
}) |
|
}, |
|
DotStyle(e) { |
|
this.dotStyle = e.detail.value |
|
}, |
|
// cardSwiper |
|
cardSwiper(e) { |
|
this.cardCur = e.detail.current |
|
this.getMoneyDetail(this.cardList[this.cardCur]) |
|
}, |
|
// towerSwiper |
|
// 初始化towerSwiper |
|
TowerSwiper(name) { |
|
let list = this[name]; |
|
for (let i = 0; i < list.length; i++) { |
|
list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2)) |
|
list[i].mLeft = i - parseInt(list.length / 2) |
|
} |
|
this.swiperList = list |
|
}, |
|
|
|
// towerSwiper触摸开始 |
|
TowerStart(e) { |
|
this.towerStart = e.touches[0].pageX |
|
|
|
}, |
|
|
|
// towerSwiper计算方向 |
|
TowerMove(e) { |
|
this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left' |
|
}, |
|
|
|
// towerSwiper计算滚动 |
|
TowerEnd(e) { |
|
let direction = this.direction; |
|
let list = this.swiperList; |
|
if (direction == 'right') { |
|
let mLeft = list[0].mLeft; |
|
let zIndex = list[0].zIndex; |
|
for (let i = 1; i < this.swiperList.length; i++) { |
|
this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft |
|
this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex |
|
} |
|
this.swiperList[list.length - 1].mLeft = mLeft; |
|
this.swiperList[list.length - 1].zIndex = zIndex; |
|
} else { |
|
let mLeft = list[list.length - 1].mLeft; |
|
let zIndex = list[list.length - 1].zIndex; |
|
for (let i = this.swiperList.length - 1; i > 0; i--) { |
|
this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft |
|
this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex |
|
} |
|
this.swiperList[0].mLeft = mLeft; |
|
this.swiperList[0].zIndex = zIndex; |
|
} |
|
this.direction = "" |
|
this.swiperList = this.swiperList |
|
}, |
|
}, |
|
filters: { |
|
moneyFormat(value) { |
|
if (value) { |
|
return value.toFixed(2) |
|
} else { |
|
return '0.00' |
|
} |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped> |
|
.tower-swiper .tower-item { |
|
transform: scale(calc(0.5 + var(--index) / 10)); |
|
margin-left: calc(var(--left) * 100upx - 150upx); |
|
z-index: var(--index); |
|
} |
|
|
|
.placeholder { |
|
width: 750upx; |
|
min-height: 115rpx; |
|
} |
|
|
|
.move-top { |
|
margin-top: -110rpx; |
|
} |
|
|
|
.yu-tag-right { |
|
top: 0; |
|
right: 0; |
|
border-radius: 0 0 0 12px; |
|
background-color: #FF6D6E !important; |
|
color: #fff; |
|
padding: 0 10px; |
|
} |
|
|
|
.inner-card { |
|
height: 100%; |
|
} |
|
|
|
.opacity-half { |
|
opacity: 0.2; |
|
} |
|
</style>
|
|
|