157 lines
6.1 KiB
Vue
157 lines
6.1 KiB
Vue
<template>
|
||
<view>
|
||
<status-nav navBarTitle="我的账户" returnColor="#c2c2c2"></status-nav>
|
||
<container-subgroup>
|
||
<view slot="content" style="margin: -30rpx;">
|
||
<view class="disja tcenter bbot fon32 position-sticky pad-s30" style="background-color: #F5F5F5;">
|
||
<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>
|
||
</view>
|
||
<!-- 未结算工单 -->
|
||
<view v-else class="mar-s30 pad-zy10">
|
||
<view class="bacf pad-sx20 pad-zy30 radius10 mar-x10" 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>
|
||
</view>
|
||
</view>
|
||
</container-subgroup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
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'},
|
||
{id:2,title:'株洲市XXX项目名称',name:'林小雨',number:'GD20220112-1001',date:'2022-01-12 13:25:16',type:'模组故障',status:'维保已完成',address:'湖南省长沙市xx区1001栋6-12',priceo:'260.0'},
|
||
{id:3,title:'株洲市XXX项目名称',name:'林小雨',number:'GD20220112-1001',date:'2022-01-12 13:25:16',type:'模组故障',status:'维保已完成',address:'湖南省长沙市xx区1001栋6-12',priceo:'260.0'},
|
||
{id:4,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
|
||
}
|
||
},
|
||
onLoad(op) {
|
||
op.index*1 ? this.current = false : this.current = true;
|
||
},
|
||
methods: {
|
||
// 去结算事件
|
||
goSettlementEv(id) {
|
||
uni.navigateTo({
|
||
url:`/pages/workOrder/workOrderThree?id=${id}`
|
||
})
|
||
},
|
||
// 切换状态
|
||
switchStatus(status){
|
||
this.current = status;
|
||
uni.pageScrollTo({
|
||
scrollTop: 0,
|
||
duration:0
|
||
})
|
||
},
|
||
// 查看明细事件
|
||
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>
|