flying-monkey/pagesB/my-account/my-account.vue

<template>
	<view>
		<status-nav navBarTitle="我的账户" returnColor="#c2c2c2"></status-nav>
		<container-subgroup>
			<view slot="content" style="margin: -30rpx;">
				<!-- #ifdef APP-PLUS || MP-WEIXIN -->
				<view class="disja tcenter bbot fon32 position-sticky pad-s30" :style="{top: newTop +'px'}" style="background-color: #F5F5F5;">
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="disja tcenter bbot fon32 position-sticky pad-s30" :style="{top: newTop +'px'}" style="background-color: #F5F5F5;">
				<!-- #endif -->
					<view @tap="switchStatus(true)" class="width50 pad-x30" :class="current ? 'account-active' : ''">我的账户</view>
					<view @tap="switchStatus(false)" class="width50 pad-x30" :class="!current ? 'account-active' : ''">未结算工单</view>
				</view>
				<!-- 我的账户 -->
				<view v-if="current">
					<view class="bacf pad-sx30 mar-s30 mar-zy20 radius10" style="box-shadow: 0 5rpx 20rpx rgba(0,0,0,.2);">
						<view class="bbot mar-zy20 pad-x30 disjbac">
							<view class="disjcac fc">
								<view class="fon22 col9">账户总额(元)</view>
								<view class="fon42 bold mar-s20">￥{{capitalDetail.totalPrice}}</view>
							</view>
							<view class="disjcac fc">
								<view class="fon22 col9" @tap="callPhone">联系客服?</view>
								<view @tap="checkDetailedEv" class="fon26 mar-s10 account-btn">查看明细</view>
							</view>
						</view>
						<view class=" mar-zy20 disjbac pad-s30">
							<view class="disjcac fc">
								<view class="fon22 col9">工单费用(元)</view>
								<view class="fon42 bold mar-s20">￥{{capitalDetail.workOrderCost}}</view>
							</view>
							<view style="width: 2rpx;height: 120rpx;background-color: #dddddd;margin-top: -10rpx;margin-bottom: -10rpx;"></view>
							<view class="disjcac fc">
								<view class="fon22 col9">技术佣金(元)</view>
								<view class="fon42 bold mar-s20">￥{{capitalDetail.technicalCommission}}</view>
							</view>
						</view>
					</view>
					<!-- 收支明细 -->
					<view class="pad-zy30">
						<view class="account-detailed mar-s50 mar-x30" :style="{color: ifDetail ? '#00a2e9' : '#000000'}">收支明细</view>
						<view class="fon28 disjbac bold account-detailed-item" style="color: #222222;">
							<view>金额</view>
							<view>工单编号</view>
							<view>方式</view>
							<view>工单日期</view>
						</view>
						<view class="fon24 disjbac account-detailed-item mar-s20" v-for="(item,index) in incomeExpensesList" :key="index" style="color: #4c4c4c;">
							<view class="clips1">{{item.amount}}</view> 
							<view class="clips1">{{item.order_number}}</view>
							<view>{{item.amount_type}}</view>
							<view class="clips1">{{item.order_time}}</view>
						</view>
						<view class="mar-s180">
							<pitera v-if="incomeExpensesList.length==0" textStr="暂无更多收支明细"></pitera>
						</view>
					</view>
				</view>
				<!-- 未结算工单 -->
				<view v-else>
					<view class="pad-sx30 pad-zy10">
						<view class="bacf pad-sx20 pad-zy30 radius10 mar-x10 animated fadeIn" v-for="(item,index) in unsettledList" :key="index">
							<view class="fon28 disjbac">
								<view class="col3">{{item.title}}</view>
								<view class="col9">{{item.name}}</view>
							</view>
							<view class="fon24 disjbac mar-sx10">
								<view class="col9">工单编号：{{item.number}}</view>
								<view style="color: #00a2e9;">维保类型：{{item.type}}</view>
							</view>
							<view class="fon24">
								<view class="col9 disac width100">
									<image src="/static/public/icon-account-time.png" mode="scaleToFill" style="width: 23rpx;height: 23rpx;" lazy-load class="pad-y10 flexs"></image>
									{{item.date}}
								</view>
							</view>
							<view class="fon26 disjbac mar-s10">
								<view class="" style="color: #ff0000;">{{item.status}}</view>
								<view class="fon36"><text style="font-size: 24rpx;">￥</text>{{item.priceo}}</view>
							</view>
							<view class="bbot" style="margin: 20rpx -30rpx;"></view>
							<view class="fon24 col9 disac">
								<image src="/static/public/icon-account-address.png" mode="scaleToFill" style="width: 19rpx;height: 25rpx;" class="flexs mar-y10"></image>
								{{item.address}}
							</view>
							<view class="dis fe">
								<view class="unsettled-btn" @tap="goSettlementEv(item.id)">查看详情</view>
							</view>
						</view>
						<nothing-page v-if="!total && !ifLoading" content="暂无更多未结算工单数据"></nothing-page>
						<pitera v-if="total==unsettledList.length && unsettledList.length" textStr="暂无更多未结算工单数据"></pitera>
					</view>
				</view>
			</view>
		</container-subgroup>
	</view>
</template>

<script>
	import pitera from '@/components/nothing/pitera.vue';
	export default {
		components:{
			pitera
		},
		data() {
			return {
				newTop: uni.getSystemInfoSync().statusBarHeight + 40,
				current:true,
				detailedList:[],
				capitalDetail:{
					totalPrice:'0.00', // 账户总额
					workOrderCost:'0.00', // 工单费用
					technicalCommission:'0.00' // 技术佣金
				},
				// 收支明细列表
				incomeExpensesList:[],
				// 未结算工单
				unsettledList:[],
				ifDetail:false,
				size:10,
				page:1,
				total:0,
				ifLoading:true
			}
		},
		onReachBottom() {
			if(!this.current) {
				if(this.total!=this.unsettledList.length) {
					this.page++;
					// 调用查询未结算工单列表事件
					this.workWordEv();
				}
			}
		},
		onLoad(op) {
			op.index*1 ? this.current = false : this.current = true;
			if(this.current) {
				// 调用查询我的账户信息
				this.getMyAccountInfo();
				// 调用查询收支明细
				this.checkSZDetail();
			} else {
				// 查询未结算工单列表事件
				this.workWordEv();
			}
		},
		methods: {
			// 查询收支明显
			checkSZDetail(){
				let params = {
					list_rows:this.size,
					page:this.page
				}
				this.$requst.get('/universal/api.account/income_expenditure_info',params).then(res=>{
					if(res.code){
						this.incomeExpensesList = res.data.data;
					}
				})
			},
			// 查询未结算工单列表事件
			workWordEv(){
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				this.$requst.get('/universal/api.account/not_order',{list_rows:this.size,page:this.page}).then(res=>{
					if(res.code) {
						this.total = res.data.total;
						if(this.page==1) this.unsettledList = [];
						if(res.data.data.length) {
							res.data.data.forEach(item=>{
								let obj = {
									id:item.order_id,//项目id
									title:item.project_name,//项目名称
									name:item.username,//负责人
									number:item.order_number,//工单编号
									date:item.completion_time,//完工时间
									type:item.fault_type,//维保类型
									status:'维保已完成',
									address:item.address,//项目详细地址
									priceo:item.pay_price//实际支付金额
								}
								this.unsettledList.push(obj);
							})
						}
					}
					uni.hideLoading();
					this.ifLoading = false;
				})
			},
			// 去结算事件
			goSettlementEv(id) {
				uni.navigateTo({
					url:`/pagesA/workOrder/details?orderId=${id}`
				})
			},
			// 查询我的账户信息
			getMyAccountInfo(){
				this.$requst.get('/universal/api.account/my_account').then(res=>{
					if(res.code) {
						this.capitalDetail.totalPrice = this.$toolAll.tools.addXiaoShu(res.data.total_amount) // 账户总额
						this.capitalDetail.workOrderCost = this.$toolAll.tools.addXiaoShu(res.data.order_price) // 工单费用
						this.capitalDetail.technicalCommission = this.$toolAll.tools.addXiaoShu(res.data.money) // 技术佣金
					} else {
						this.$toolAll.tools.showToast(res.msg);
					}
				})
			},
			// 切换状态
			switchStatus(status){
				this.current = status;
				this.page = 1;
				this.size = 10;
				uni.pageScrollTo({
					scrollTop: 0,
					duration:0
				})
				status ? this.getMyAccountInfo() : this.workWordEv();
			},
			// 查看明细事件
			checkDetailedEv(){
				this.ifDetail = true;
				setTimeout(()=>{
					this.ifDetail = false;
				},2000)
				const query = uni.createSelectorQuery().in(this);
				query.select('.account-detailed').boundingClientRect(data => {
					// console.log(data)
					let targetLocation = data.top*1 - 102;
					uni.pageScrollTo({
						scrollTop: targetLocation,
						duration:100
					})
				}).exec();
			},
			// 联系客服事件
			callPhone() {
				this.$toolAll.tools.countCustomer('15616330510');
			}
		}
	}
</script>

<style>

</style>