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

248 lines
8.7 KiB
Vue
Raw Normal View History

<template>
<view>
<status-nav navBarTitle="我的账户" returnColor="#c2c2c2"></status-nav>
<container-subgroup>
<view slot="content" style="margin: -30rpx;">
2022-05-13 09:39:50 +00:00
<!-- #ifdef APP-PLUS || MP-WEIXIN -->
2022-04-01 08:56:35 +00:00
<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.prices}}</view>
<view class="clips1">{{item.workOrderNum}}</view>
<view>{{item.way}}</view>
<view class="clips1">{{item.date}}</view>
</view>
2022-05-13 09:39:50 +00:00
<view class="mar-s180">
<pitera v-if="incomeExpensesList.length==0" textStr="暂无更多收支明细"></pitera>
</view>
</view>
</view>
<!-- 未结算工单 -->
2022-05-13 09:39:50 +00:00
<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>
2022-05-13 09:39:50 +00:00
<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>
2022-05-13 09:39:50 +00:00
import pitera from '@/components/nothing/pitera.vue';
export default {
2022-05-13 09:39:50 +00:00
components:{
pitera
},
data() {
return {
2022-04-01 08:56:35 +00:00
newTop: uni.getSystemInfoSync().statusBarHeight + 40,
current:true,
detailedList:[],
capitalDetail:{
totalPrice:'0.00', // 账户总额
workOrderCost:'0.00', // 工单费用
technicalCommission:'0.00' // 技术佣金
},
// 收支明细列表
incomeExpensesList:[
2022-05-13 09:39:50 +00:00
// {prices:'1088',workOrderNum:'GD20220112-1001',way:'现金',date:'2019-7-24'},
],
unsettledList:[
2022-05-13 09:39:50 +00:00
// {id:1,title:'株洲市XXX项目名称',name:'林小雨',number:'GD20220112-1001',date:'2022-01-12 13:25:16',type:'模组维保',status:'维保已完成',address:'湖南省长沙市xx区1001栋6-12',priceo:'260.0'},
],
2022-05-13 09:39:50 +00:00
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;
2022-05-13 09:39:50 +00:00
if(this.current) {
// 调用查询我的账户信息
this.getMyAccountInfo();
} else {
// 查询未结算工单列表事件
this.workWordEv();
}
},
methods: {
2022-05-13 09:39:50 +00:00
// 查询未结算工单列表事件
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.project_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/workOrderThree?id=${id}`
})
},
2022-05-13 09:39:50 +00:00
// 查询我的账户信息
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) // 技术佣金
// if(res.data.amount_record.length) {
// res.data.amount_record.forEach(item=>{
// let obj = {
// prices:'1088',//金额
// workOrderNum:'GD20220112-1001',//工单编号
// way:'现金',//方式
// date:'2019-7-24',//工单日期
// }
// this.incomeExpensesList.push(obj);
// })
// }
} else {
this.$toolAll.tools.showToast(res.msg);
}
})
},
// 切换状态
switchStatus(status){
this.current = status;
2022-05-13 09:39:50 +00:00
this.page = 1;
this.size = 10;
uni.pageScrollTo({
scrollTop: 0,
duration:0
})
2022-05-13 09:39:50 +00:00
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>