中品加油
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

<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>