佰川加油
This commit is contained in:
caolc
328
BagMoney/pages/oilCards/oilCards.vue
Normal file
328
BagMoney/pages/oilCards/oilCards.vue
Normal file
@@ -0,0 +1,328 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user