329 lines
8.3 KiB
Vue
329 lines
8.3 KiB
Vue
<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>
|