You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
263 lines
6.3 KiB
263 lines
6.3 KiB
<template>
|
|
<view class="flex-col page">
|
|
<view class="flex-col group_4">
|
|
<view class="flex-col">
|
|
<view class="flex-col section_2">
|
|
<view class="justify-between">
|
|
<text class="text_2">订单费用</text>
|
|
<text class="text_3">¥{{ Number.parseFloat(details.total) + details.discount }}</text>
|
|
</view>
|
|
<view class="justify-between group_7">
|
|
<text class="text_4">订单折扣</text>
|
|
<text class="text_5" :class="details.discount && details.discount > 0 ? 'text_5_red':''">{{ details.discount && details.discount > 0 ? '- ¥' : '' }}{{ details.discount && details.discount > 0 ? details.discount +'' : '无' }}</text>
|
|
</view>
|
|
<view class="justify-between group_7">
|
|
<text class="text_2">费用合计</text>
|
|
<text class="text_3">¥{{ details.total }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card">
|
|
<!-- <u-collapse @change="change" @close="close" @open="open" ref="myCollapse" > -->
|
|
<u-collapse :border="false" ref="myCollapse" :value="['Rating fee']">
|
|
<u-collapse-item title="评级费用" :value="ratingFeeTotal" name="Rating fee" >
|
|
<!-- <view class="u-collapse-content lf-row-between collapse-item-content" v-for="(item, index) in details.grading_cost" :key="index">
|
|
<view>{{ item.title }}</view>
|
|
<view>¥{{ item.amount }}</view>
|
|
</view> -->
|
|
<lf-table :Header="header" :Content="details.grading_cost" height="auto" width="100%" :showNumber="false" :border="false" headBgColor="transparent" v-if="$isRight(details.other)"></lf-table>
|
|
|
|
</u-collapse-item>
|
|
</u-collapse>
|
|
</view>
|
|
|
|
<view class="card">
|
|
<u-collapse :border="false" ref="myCollapse2" :value="['other expenses']">
|
|
<u-collapse-item title="其他费用" :value="otherFeeTotal" name="other expenses" >
|
|
<lf-table :Header="header" :Content="details.other" height="auto" width="100%" :showNumber="false" :border="false" headBgColor="transparent" v-if="$isRight(details.other)"></lf-table>
|
|
</u-collapse-item>
|
|
</u-collapse>
|
|
</view>
|
|
<view style="width: 100%; height: 30rpx;"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import lfTable from '@/components/lf-table.vue';
|
|
import { gradingPayment } from '@/service/grading.js';
|
|
import Bigc from '@/common/bigc.js';
|
|
|
|
export default {
|
|
components: {
|
|
lfTable
|
|
},
|
|
data() {
|
|
return {
|
|
header: [{
|
|
text: '费用名称',
|
|
width: 171,
|
|
key: 'title'
|
|
},{
|
|
text: '单价',
|
|
width: 171,
|
|
key: 'amount'
|
|
},{
|
|
text: '数量',
|
|
width: 171,
|
|
key: 'num'
|
|
},{
|
|
text: '合计',
|
|
width: 171,
|
|
key: 'total'
|
|
}],
|
|
id: '',
|
|
details: {}
|
|
};
|
|
},
|
|
computed: {
|
|
ratingFeeTotal(){
|
|
if(this.$valueType(this.details.grading_cost) === 'undefined' || this.details.grading_cost.length === 0){
|
|
return '';
|
|
}else{
|
|
let total = new Bigc(0);
|
|
this.details.grading_cost.map(item => {
|
|
total = total.plus(item.amount);
|
|
});
|
|
let value = '￥'+ total.round(2, 0);
|
|
return value;
|
|
}
|
|
},
|
|
otherFeeTotal(){
|
|
if(this.$valueType(this.details.other) === 'undefined' || this.details.other.length === 0){
|
|
return '';
|
|
}else{
|
|
let total = new Bigc(0);
|
|
this.details.other.map(item => {
|
|
total = total.plus(item.total);
|
|
});
|
|
let value = '￥'+ total.round(2, 0);
|
|
return value;
|
|
}
|
|
}
|
|
},
|
|
onLoad(options){
|
|
this.id = options.id;
|
|
this.getGradingPayment();
|
|
},
|
|
methods: {
|
|
async getGradingPayment(){
|
|
let res = await gradingPayment(this.id);
|
|
let details = res.data.datas;
|
|
details.other.forEach(item => {
|
|
item.total = new Bigc(item.num).times(item.amount).round(2, 0);
|
|
})
|
|
details.grading_cost.forEach(item => {
|
|
item.total = new Bigc(item.num).times(item.amount).round(2, 0);
|
|
})
|
|
this.details = details;
|
|
setTimeout(()=>{
|
|
this.$nextTick(()=>{
|
|
this.$refs.myCollapse.init();
|
|
this.$refs.myCollapse2.init();
|
|
});
|
|
},200)
|
|
|
|
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.center-section {
|
|
margin-top: 30rpx;
|
|
padding: 40rpx 30rpx 40rpx 32rpx;
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
.image_6 {
|
|
margin-left: 8rpx;
|
|
align-self: center;
|
|
width: 26rpx;
|
|
height: 16rpx;
|
|
}
|
|
.text_6 {
|
|
color: rgb(51, 51, 51);
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
line-height: 44rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.right-group {
|
|
color: rgb(231, 162, 63);
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
line-height: 44rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.group_9 {
|
|
margin-top: 40rpx;
|
|
color: rgb(119, 119, 119);
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 40rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.page {
|
|
background-color: #f6f6f6;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
height: 100%;
|
|
}
|
|
.group_4 {
|
|
padding: 2rpx 0 16rpx;
|
|
flex: 1 1 auto;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.section_2 {
|
|
padding: 40rpx 32rpx;
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
.group_7 {
|
|
margin-top: 50rpx;
|
|
}
|
|
.group_10 {
|
|
margin-top: 30rpx;
|
|
color: rgb(119, 119, 119);
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 40rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.group_11 {
|
|
margin-top: 30rpx;
|
|
color: rgb(119, 119, 119);
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 40rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.text_2 {
|
|
color: rgb(51, 51, 51);
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
line-height: 44rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.text_3 {
|
|
color: rgb(231, 162, 63);
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
line-height: 44rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.text_4 {
|
|
color: rgb(51, 51, 51);
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
line-height: 44rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.text_5 {
|
|
color: rgb(51, 51, 51);
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
line-height: 44rpx;
|
|
white-space: nowrap;
|
|
}
|
|
.text_5_red{
|
|
color: red;
|
|
}
|
|
.text_18 {
|
|
margin-left: 116rpx;
|
|
}
|
|
.text_19 {
|
|
margin-left: 118rpx;
|
|
}
|
|
.text_20 {
|
|
margin-left: 116rpx;
|
|
}
|
|
|
|
.card{
|
|
width: 750rpx;
|
|
height: auto;
|
|
background-color: #FFFFFF;
|
|
margin-top: 30rpx;
|
|
}
|
|
.collapse-item-content{
|
|
padding: 12rpx 0;
|
|
&>view:nth-child(1){
|
|
width: 80%;
|
|
}
|
|
&>view:nth-child(2){
|
|
width: 20%;
|
|
text-align: right;
|
|
}
|
|
}
|
|
/deep/.u-cell__value{
|
|
font-size: 32rpx !important;
|
|
color: #E7A23F !important;
|
|
}
|
|
</style>
|