MP-XiaoXing/BagMoney/pages/oilCards/oilCards.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>