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

248 lines
8.7 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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.prices}}</view>
<view class="clips1">{{item.workOrderNum}}</view>
<view>{{item.way}}</view>
<view class="clips1">{{item.date}}</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:[
// {prices:'1088',workOrderNum:'GD20220112-1001',way:'现金',date:'2019-7-24'},
],
unsettledList:[
// {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'},
],
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();
} else {
// 查询未结算工单列表事件
this.workWordEv();
}
},
methods: {
// 查询未结算工单列表事件
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}`
})
},
// 查询我的账户信息
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;
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>