第一次提交

oilAccount/page/accountRecharge/index.vue

@@ -0,0 +1,592 @@
+<template>
+	<view @click="ejectOpen=false" style="height: 100vh;display: flex;flex-direction: column;">
+		<topBar height="343rpx" title="油站账户充值">
+			<view slot="coment">
+				<view class="header_seach">
+					<view class="header_seach_seach">
+						<view class="seach_input">
+							<uni-easyinput 
+							   :candidate='candidate' 
+							   :ejectOpen='ejectOpen' 
+							   @ejectFn='ejectFn'
+							   :letfText='letfText' 
+							   confirmType='search' 
+							    @confirm='seachFn'
+								placeholder-style="color:#bbbbbb;font-weight: 100;" 
+								v-model="seachValue"
+							    :placeholder="`请输入${letfText}查找`" @iconClick="onClick">
+							</uni-easyinput>
+						</view>
+						<button @tap='jump(1)' class="header_seach_butten">
+							<uni-icons type="plusempty" size="20" color="#bbbbbb"></uni-icons>
+							<view>新增</view>
+						</button>
+					</view>
+					<view class="Navigation">
+						<view @tap="seleFn(item);seleindex=index"
+							:class="seleindex==index?'navigation_seleitem':'navigation_item'"
+							v-for="(item,index) in navigation">
+							{{item.text}}
+							<uni-icons :animation="animationData" class="icoon" v-if="index==0" type="refreshempty"
+								style="margin-left: 10rpx;" size="15" color="#bbbbbb"></uni-icons>
+						</view>
+					</view>
+				</view>
+			</view>
+		</topBar>
+		<view   class="Suboption">
+			<view @click="subFn(item)" :class=" getData.params.transactionType  == item.value?'seleSuboptionItem': 'SuboptionItem' " :key='index' v-for="(item,index) in SuboptionData" >{{item.label}}</view>
+		</view>
+		<view style="flex: 1;overflow: hidden;">
+			<scroll-view :refresher-triggered='isShow.refresherTriggered' @refresherrefresh='refresherrefresh'
+				:refresher-enabled='true' v-if="listData.length!=0" style="height: 100%;" scroll-y="true"
+				@scrolltolower='scrolltolower'>
+				<listItem @tap='jump(2,item)' :item="item" v-for="(item,index) in listData"></listItem>
+			</scroll-view>
+			<view v-if="listData.length==0"
+				style="width: 100vw; height: 100%; display: flex;align-items: center;justify-content: center;">
+				<image src="@/static/qx.png" style="width: 536rpx; height: 399rpx;"></image>
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	import oilAccount from '@/api/oilAccount'
+	import oilDistribution from '@/api/oilDistribution'
+	import topBar from '@/components/topbar'
+	import listItem from '../../components/accountListItem.vue'
+	export default {
+		components: {topBar,listItem},
+		data() {
+			return {
+				SuboptionData:[
+					{
+						value:'',
+						label:'全部类型'
+					},
+					{
+						value:'DISPATCH',
+						label:'调拨'
+					},
+					{
+						value:'CALLBACK',
+						label:'回拨'
+					},
+					{
+						value:'TURN',
+						label:'圈回'
+					}
+				],
+				animationData: null,
+				seledata: {},
+				seachValue: '',
+				butten: {
+					colse: '不通过',
+					confirm: '通过',
+					coloseBg: '#EC4645',
+					coloseColor: '#FFFFFF',
+					confirmBg: '',
+					confirmColor: ''
+				},
+				isShow: {
+					examine: false,
+					refresherTriggered:false
+				},
+				companyName: '',
+				ejectOpen: false,
+				letfText: '账户',
+				candidate: ['账户', '公司'],
+				getData: {
+					pageSize: 15,
+					currentPage: 1,
+					params: {
+						auditMark:'',
+						transactionType:'',
+						companyName:'',
+						accountName:''
+					},
+					sorted: {
+						createTime: "desc"
+					},
+					columns: [],
+					totalCount: 1,
+					totalPage: 1
+				},
+				styles: {},
+				seleindex: '',
+				navigation: [{
+						text: '全部',
+						index: ''
+					},
+					{
+						text: '待审核',
+						index: '0'
+					},
+					{
+						text: '已审核',
+						index: '1'
+					}
+				],
+				listData: []
+			}
+		},
+		onPullDownRefresh() {
+			//下拉的生命周期
+			this.getData.currentPage = 1
+			this.getList()
+			console.log('下拉的生命周期')
+		},
+		onLoad() {
+			let that = this
+			this.styles = uni.getMenuButtonBoundingClientRect()
+			uni.$on('company', function(e) {
+				let routes = getCurrentPages();
+				let routerIndex = routes[(routes.length - 2)].$page.fullPath.indexOf('?') != -1 ?
+					routes[(routes.length - 2)].$page.fullPath.split('?')[0].split('/')[routes[(routes.length - 2)]
+						.$page.fullPath.split('?')[0].split('/').length - 1] :
+					routes[(routes.length - 2)].$page.fullPath.split('/')[routes[(routes.length - 2)].$page
+						.fullPath.split('/').length - 1]
+				console.log(routes, routerIndex, '获取当前打开过的页面路由数组')
+			})
+		},
+		onShow() {
+			this.getList();
+		},
+		methods: {
+			subFn(item){
+				this.getData.currentPage = 1
+				this.getData.params.transactionType = item.value; 
+				this.getList();
+			},
+		refresherrefresh(){
+			this.getData.currentPage = 1
+			this.isShow.refresherTriggered = true
+			this.getList()
+		},
+			animationFns() {
+				console.log('恢复动画')
+				var animation = uni.createAnimation({
+					duration: 0,
+					timingFunction: 'ease',
+				})
+				this.animation = animation
+				this.animation.rotate(0).step()
+				this.animationData = this.animation.export()
+			},
+			rotateFn() {
+				var animation = uni.createAnimation({
+					duration: 1000,
+					timingFunction: 'ease',
+				})
+				this.animation = animation
+				this.animation.rotate(360).step()
+				this.animationData = this.animation.export()
+				setTimeout(() => {
+					this.animationFns()
+				}, 1000)
+			},
+			confirmFn() {
+				let data = {
+					id: this.seledata.id,
+					auditMark: 1,
+					auditSource: 'OMS-MINIAPP'
+				}
+				oilDistribution.auditOms(data).then(res => {
+					if (res.code !== 20000) return
+					uni.showToast({
+						title: '审核成功',
+						icon: 'none'
+					})
+					this.iShow.examine = false
+					this.seledata.auditMark = 1
+				})
+				console.log('确定回掉')
+			},
+			ejectFn(e) {
+				this.letfText = e
+			},
+			scrolltolower() {
+				this.getData.currentPage += 1
+				console.log('触底了')
+				this.getList()
+			},
+			seachFn() {
+				switch(this.letfText ){
+					case '账户':
+					this.getData.params.companyName = ''
+					this.getData.params.accountName = this.seachValue
+					break
+					case '公司':
+					this.getData.params.accountName = ''
+					this.getData.params.companyName = this.seachValue 
+					break
+				}
+				this.getData.currentPage = 1
+				this.getList()
+			},
+			getList() {
+				oilAccount.getByReversePage(this.getData).then(res => {
+					this.isShow.refresherTriggered = false
+					if (res.code !== 20000) return
+					if(res.data.list.length==0){
+						uni.showToast({
+							title:'没有数据了哦',
+							icon:'none'
+						})
+					}
+					if (this.getData.currentPage !== 1) {
+						this.listData = this.listData.concat(res.data.list);
+						return
+					}
+					this.listData = res.data.list
+				})
+			},
+			jump(e, item) {
+				switch (e) {
+					case 1:
+					uni.navigateTo({
+						url:'./add'
+					})
+					break
+					case 2:
+					oilAccount.detailsTheQuery(item.id).then(res=>{
+						(res.code==20000)&&uni.navigateTo({
+							url:'./details?data=' + JSON.stringify(res.data)
+						});
+					})
+					break
+				}
+			},
+			seleFn(e) {
+				this.getData.currentPage = 1
+				this.rotateFn()
+				this.getData.params.auditMark = e.index
+				this.getList()
+			},
+			onClick() {
+				this.ejectOpen = !this.ejectOpen
+				console.log('点击图标事件')
+			}
+		}
+	}
+</script>
+
+<style>
+	.SuboptionItem{
+		background-color: #FFFFFF;
+		border-radius: 20rpx;
+		padding: 10rpx 30rpx;
+		color: #BBBBBB;
+		margin-left: 15rpx;
+		font-size: 28rpx;
+		margin-top: 20rpx;
+	}
+	.Suboption{
+		display: flex;
+		padding: 0rpx 20rpx 0 20rpx;
+		transition:  all 1s; 
+		overflow: hidden;
+		max-height: 500rpx;
+		box-sizing: border-box;
+		margin-bottom: 10rpx;
+	}
+	.SuboptionItem:first-child{
+		margin-left: 0rpx;
+	}
+	.seleSuboptionItem:first-child{
+		margin-left: 0rpx;
+	}
+	.seleSuboptionItem{
+		background-color: #ADCEFF;
+		border-radius: 20rpx;
+		padding: 10rpx 30rpx;
+		color: #FFFFFF;
+		margin-left: 15rpx;
+		font-size: 28rpx;
+		margin-top: 20rpx;
+	}
+	.icoon :active {
+		color: #007AFF;
+	}
+
+	.yuan {
+		width: 13rpx;
+		height: 13rpx;
+		background: #E9CF31;
+		border-radius: 50%;
+		margin-right: 5rpx;
+	}
+
+	.large_text {
+		font-size: 32rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #333333;
+	}
+
+	.company_msg_content {
+		max-width: 330rpx;
+		font-size: 28rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #333333;
+		text-align: end;
+	}
+
+	.examine_popup_body {
+		padding: 0 47rpx;
+		margin: 33rpx 0;
+	}
+
+	.company_msg {
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+	}
+
+	.item_price {
+		font-size: 24rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #333333;
+	}
+
+	.form_body_item_body_content_right {
+		/* max-width: 215rpx; */
+		text-align: -webkit-right;
+		font-size: 26rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #333333;
+		flex: 1;
+	}
+
+	.form_body_item_body_content_left {
+		/* max-width: 215rpx; */
+		text-align: left;
+		font-size: 26rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #333333;
+		flex: 1;
+	}
+
+	.form_body_item_img {
+		width: 80rpx;
+		height: 70rpx;
+	}
+
+	.form_body_item_body_content {
+		display: flex;
+		justify-content: space-between;
+		width: 100%;
+		margin-top: 15rpx;
+		padding-bottom: 14rpx;
+	}
+
+	.form_body_item_body_header {
+		display: flex;
+		justify-content: space-between;
+		width: 100%;
+	}
+
+	.samll_txext {
+		font-size: 24rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #999999;
+		display: flex;
+		align-items: center;
+
+	}
+
+	.leftTip {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		background-color: #E9CF31;
+		width: 10rpx;
+	}
+
+	.compay_tip {
+		/* width: 94rpx; */
+		/* height: 36rpx; */
+		background: #F1F1F1;
+		margin-top: 18rpx;
+		color: #BBBBBB;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 24rpx;
+		/* margin-bottom: 14rpx; */
+		width: 130rpx;
+		padding: 10rpx;
+
+	}
+
+	.seach_input {
+		background-color: #FFFFFF;
+		border-radius: 12rpx;
+		flex: 1;
+	}
+
+	.typeyuan {
+		background-color: #17A00E;
+		width: 14rpx;
+		height: 14rpx;
+		border-radius: 50px;
+		margin-right: 6rpx;
+	}
+
+	.seletypeyuan {
+		background-color: red;
+		width: 14rpx;
+		height: 14rpx;
+		border-radius: 50px;
+		margin-right: 6rpx;
+	}
+
+	.is-input-border {
+		border: 0px !important;
+	}
+
+	page {
+		background-color: #F0F2FF;
+	}
+
+	.form_body_item_footer {
+		display: flex;
+		color: #BBBBBB;
+		font-size: 22rpx;
+		justify-content: space-between;
+		/* margin-top: 15rpx; */
+		align-items: center;
+		flex: 1;
+		padding: 26rpx 0;
+	}
+
+	.form_body_item_body {
+		display: flex;
+		border-bottom: 1rpx solid #F0F0F0;
+		/* padding-bottom: 14rpx; */
+		flex-wrap: wrap;
+	}
+
+	.form_body_item {
+		min-height: 267rpx;
+		background: #FFFFFF;
+		box-shadow: 0px 3px 9px 0px rgba(88, 88, 88, 0.2);
+		border-radius: 12rpx;
+		font-size: 28rpx;
+		padding: 20rpx;
+		display: flex;
+		flex-direction: column;
+		padding-bottom: 0;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.form_body {
+		width: 100vw;
+		padding: 0 10px;
+		margin-top: 40rpx;
+		box-sizing: border-box;
+	}
+
+	.navigation_seleitem {
+		width: 150rpx;
+		height: 59rpx;
+		background: #F0F2FF;
+		border-top-left-radius: 11rpx;
+		border-top-right-radius: 11rpx;
+		font-size: 26rpx;
+		color: #333333;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		transition: all 0.3s;
+		position: relative;
+		bottom: -2px;
+	}
+
+	.navigation_item {
+		width: 150rpx;
+		height: 59rpx;
+		border-top-left-radius: 11rpx;
+		border-top-right-radius: 11rpx;
+		font-size: 26rpx;
+		color: #F0F2FF;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		transition: all 0.3s;
+		bottom: -2px;
+	}
+
+	.Navigation {
+		display: flex;
+		position: absolute;
+		bottom: 0px;
+		transition: all .5s;
+	}
+
+	.header_seach_butten {
+		font-size: 24rpx !important;
+		display: flex !important;
+		align-items: center !important;
+		margin: 0 !important;
+		flex-shrink: 1;
+		margin-left: 9rpx !important;
+		background: #FFFFFF !important;
+		justify-content: center;
+	}
+
+	.uni-easyinput__content {
+		height: 80rpx;
+	}
+
+	.uni-easyinput {
+		height: 80rpx;
+	}
+
+	.header_seach_seach {
+		display: flex;
+		height: 80rpx;
+		margin-top: 23rpx;
+	}
+
+	.header_seach_title {
+		display: flex;
+		align-items: center;
+	}
+
+	.header_seach {
+		font-size: 26rpx;
+		padding: 0 10px;
+	}
+
+	.uni-navbar--border {
+		border: 0px !important;
+	}
+
+	/* 	.header {
+		background-color: #007AFF;
+		color: white;
+		min-height: 403rpx;
+		background-image: url('https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油admin小程序/sjbj.png');
+		background-size: 100% 100%;
+		position: relative;
+	} */
+
+	.uni-navbar__header-btns-right {
+		padding-right: 0 !important;
+		width: 120rpx !important;
+	}
+
+	.top {
+		height: var(--status-bar-height);
+	}
+</style>