128 lines
2.5 KiB
Vue
128 lines
2.5 KiB
Vue
<template>
|
|
<u-popup v-model="innerVisible" mode="bottom" border-radius="24" safe-area-inset-bottom>
|
|
<view class="price-popup">
|
|
<view class="price-popup-head">
|
|
<text class="price-popup-title">费用明细</text>
|
|
<view class="price-popup-close" hover-class="app-tap-hover" @click="innerVisible = false">
|
|
<u-icon name="close" color="#9AA7B8" size="32"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="price-popup-body">
|
|
<view class="price-row">
|
|
<view class="price-label">押金</view>
|
|
<view class="price-value">{{ priceInfo && priceInfo.depositPrice != null ? priceInfo.depositPrice + ' 元' : '--' }}</view>
|
|
</view>
|
|
<view class="price-row" v-if="priceInfo && priceInfo.insureFee">
|
|
<view class="price-label">保险费</view>
|
|
<view class="price-value">{{ priceInfo.insureFee }} 元</view>
|
|
</view>
|
|
<view class="price-row total">
|
|
<view class="price-label">合计应收</view>
|
|
<view class="price-value total-value"><text class="amt-symbol">¥</text>{{ displayDeposit }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'PriceDetailPopup',
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
priceInfo: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
displayDeposit: {
|
|
type: [String, Number],
|
|
default: '--'
|
|
}
|
|
},
|
|
computed: {
|
|
innerVisible: {
|
|
get() {
|
|
return this.visible
|
|
},
|
|
set(val) {
|
|
this.$emit('update:visible', val)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import './agent-order-theme.scss';
|
|
|
|
.price-popup {
|
|
@include ao-popup-panel;
|
|
}
|
|
|
|
.price-popup-head {
|
|
@include ao-popup-head;
|
|
}
|
|
|
|
.price-popup-title {
|
|
@include ao-section-title;
|
|
}
|
|
|
|
.price-popup-close {
|
|
padding: 8rpx;
|
|
}
|
|
|
|
.price-popup-body {
|
|
padding-top: 8rpx;
|
|
}
|
|
|
|
.price-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 22rpx 0;
|
|
border-bottom: 1rpx solid #F0F3F8;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.price-label {
|
|
font-size: 28rpx;
|
|
color: $ao-text-secondary;
|
|
}
|
|
|
|
.price-value {
|
|
font-size: 30rpx;
|
|
color: $ao-text;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.total {
|
|
margin-top: 8rpx;
|
|
padding-top: 28rpx;
|
|
border-top: 1rpx solid $ao-border;
|
|
border-bottom: none;
|
|
|
|
.price-label {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: $ao-ink;
|
|
}
|
|
}
|
|
|
|
.total-value {
|
|
font-size: 40rpx;
|
|
font-weight: 700;
|
|
color: $ao-accent;
|
|
}
|
|
|
|
.amt-symbol {
|
|
font-size: 28rpx;
|
|
margin-right: 2rpx;
|
|
}
|
|
</style>
|