MP_XOIL_company_new/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="cardList[cardCur].historyList.length>0">
					<view class="cu-item" v-for="detail in cardList[cardCur].historyList" :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 class="text-gray text-sm" v-if="detail.distributeOilRemark">
								备注: {{detail.distributeOilRemark}}
							</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 {
				hideCard: [],
				loadStatus: 'load',
				userTotal: {},
				historyList: [],
				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: [{
					historyList: [],
					currentPage: 1,
					loadStatus: 'more'
				}],
				currentPage: 1
			};
		},
		onShow() {
			this.getCards()
			this.getTotalOilCardInfo()
			this.TowerSwiper('swiperList');
		},
		onLoad(option) {
			// this.getCards()
			// this.getTotalOilCardInfo()
			// this.TowerSwiper('swiperList');
			// 初始化towerSwiper 传已有的数组名即可
		},
		onReachBottom() {
			if (this.cardList[this.cardCur].loadStatus == 'more') {
				setTimeout(() => {
					this.getMoneyDetail(this.cardList[this.cardCur], this.cardCur)
				}, 100)
			} else {
				uni.showToast({
					title: '到底啦',
					icon: 'none'
				})
			}
		},
		methods: {
			getTotalOilCardInfo() {
				accountApi.getTotalOilCardInfo().then(res => {
					if (res.code == 20000) {
						this.userTotal = res.data
					}
				})
			},
			getMoneyDetail(card, index) {
				let data2 = {
					currentPage: this.cardList[index].currentPage,
					index: this.cardList[index].historyList.length ? this.cardList[index].historyList.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.cardList[index].loadStatus = 'nomore'
						} else {
							this.cardList[index].loadStatus = 'more'
							this.cardList[index].currentPage++
						}
						// this.cardList[index].historyList = []
						if (this.cardList[index].currentPage !== 1) {
							this.cardList[index].historyList = this.cardList[index].historyList.concat(res.data
								.list)
						} else {
							this.cardList[index].historyList = res.data.list
						}

					}
				})
			},
			async getCards() {
				await accountApi.getSyncDeductions().then(res => {
					if (res.code == 20000) {
						this.hideCard = res.data.companyIds
					}
				})
				await accountApi.getUserAccount().then(res => {
					if (res.code == 20000) {
						if (res.data.length > 0) {

							let staging = res.data.filter(item => item.companyType != 5).filter(item => !this.hideCard.includes(item
								.companyId))
							staging.forEach(item => {
								this.$set(item, 'currentPage', 1)
								this.$set(item, 'loadStatus', 'more')
								this.$set(item, 'historyList', [])
							})
							let target = this.sortHandler(staging)
							this.cardList = target

							setTimeout(() => {
								this.getMoneyDetail(this.cardList[0], 0)
							}, 100)
						}
					}
				})
			},
			sortHandler(arr) {
				let internalArr = arr.filter(item => item.oilCardType == 2)
				let externalArr = arr.filter(item => item.oilCardType == 3)
				// let internalTarget = this.sortParticulars(internalArr, 'shareCompanyQuota')
				let externalTarget = this.sortParticulars(externalArr, 'balance')
				if (internalArr.length || externalTarget.length) return [...internalArr, ...externalTarget]
				else return arr
			},
			sortParticulars(arr, field) {
				let target = []
				let map = new Map()
				let keys = [],
					values = []
				arr.forEach(item => {
					map.set(item, item[field])
				})
				for (let key of map.keys()) {
					keys.push(key)
				}
				for (let value of map.values()) {
					values.push(value)
				}
				values.sort((a,b)=>{return a - b})
				values.reverse()
				values.forEach(value => {
					keys.forEach(key => {
						if (map.get(key) == value) {
							target.push(key)
							map.set(key, new Date().getTime())
						}
					})
				})
				return target
			},

			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
				this.getMoneyDetail(this.cardList[this.cardCur], 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>
	.boxsingForCard {
		position: relative;
	}

	.inCard {
		position: absolute;
		right: 11%;
		bottom: 17%;
		width: 140rpx;
		height: 55rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		color: red;
		display: flex;
		justify-content: center;
		align-items: center;
	}

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