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

102 lines
3.8 KiB
Vue
Raw Normal View History

<template>
<view>
<status-nav navBarTitle="我的账户" returnColor="#c2c2c2"></status-nav>
<container-subgroup>
<view slot="content" style="margin: 0 -30rpx;">
<view class="disja tcenter bbot fon32">
<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-s20 mar-zy20 radius10" style="box-shadow: 0 5rpx 20rpx rgba(0,0,0,.2);">
<view class="bbot mar-zy20 disjbac pad-x30">
<view class="disjcac fc">
<view class="fon22 col9">账户总额()</view>
<view class="fon42 bold mar-s20">266.00</view>
</view>
<view class="disjcac fc">
<view class="fon22 col9">联系客服?</view>
<view 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">266.00</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">266.00</view>
</view>
</view>
</view>
<!-- 收支明细 -->
<view class="pad-zy30">
<view class="account-detailed mar-s50 mar-x30">收支明细</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 20" :key="index" style="color: #4c4c4c;">
<view class="clips1">-¥1088</view>
<view class="clips1">GD20220112-1001</view>
<view>现金</view>
<view class="clips1">2019-7-24</view>
</view>
</view>
</view>
<!-- 未结算工单 -->
<view v-else class="mar-s20 pad-zy10">
<view class="bacf pad-sx20 pad-zy30 radius10 mar-x10" v-for="(item,index) in 10" :key="index">
<view class="fon28 disjbac">
<view class="col3">株洲市XXX项目名称</view>
<view class="col9">林小雨</view>
</view>
<view class="fon24 disjbac mar-sx10">
<view class="col9">工单编号GD20220112-1001</view>
<view style="color: #00a2e9;">故障类型模组故障</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>2022-01-12 13:25:16</view>
</view>
<view class="fon26 disjbac mar-s10">
<view class="" style="color: #ff0000;">维保已完成</view>
<view class="fon36"><text style="font-size: 24rpx;"></text>260.0</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>湖南省长沙市xx区1001栋6-12</view>
<view class="dis fe">
<view class="unsettled-btn">去结算</view>
</view>
</view>
</view>
</view>
</container-subgroup>
</view>
</template>
<script>
export default {
data() {
return {
current:true,
detailedList:[]
}
},
methods: {
// 切换状态
switchStatus(status){
this.current = status;
}
}
}
</script>
<style>
</style>