123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130 |
- <template>
- <view class="content flex flex_column">
- <view class="b_head">
- <view class="head_list">
- <text>分享时间</text>
- <text>2022-11-29 10:02:54</text>
- </view>
- <view class="head_list">
- <text>客户名称</text>
- <text>东莞市寮步车正汽车服务中心</text>
- </view>
- <view class="head_list">
- <text>对账周期</text>
- <text>2022年11月29日~2022年12月31日</text>
- </view>
- <view class="head_list">
- <text>付款状态</text>
- <text>已付款(支付宝)</text>
- </view>
- </view>
- <view class="b_detail">
- <view class="detail_list u-flex">
- <view class="detail_box">
- <text>总单数:</text>
- <text>34</text>
- </view>
- <view class="detail_box">
- <text>待收金额合计:</text>
- <text>34.00</text>
- </view>
- </view>
- <view class="detail_list u-flex">
- <view class="detail_box">
- <text>折让金额:</text>
- <text>34</text>
- </view>
- <view class="detail_box">
- <text>折让待收金额:</text>
- <text>34.00</text>
- </view>
- </view>
- </view>
- <view class="detail_con">
- <billList></billList>
- </view>
- <view class="footer">
- <u-button type="primary" :custom-style="customStyle" shape="circle">再次发送对账单</u-button>
- </view>
- </view>
- </template>
- <script>
- import billList from './billListComponent.vue'
- export default {
- components: { billList },
- data() {
- return {
- customStyle:{
- backgroundColor: this.$config('primaryColor'),
- color: '#fff',
- },
- };
- },
- onReady() {
- uni.setNavigationBarColor({
- frontColor: '#ffffff',
- backgroundColor: this.$config('primaryColor')
- });
- }
- };
- </script>
- <style lang="scss" scoped>
- .content {
- height: 100vh;
- width: 100%;
- .b_head {
- background-color: #fff;
- .head_list {
- padding:14rpx 20rpx;
- border-bottom: 1rpx solid #f8f8f8;
- text {
- &:first-child {
- color: $uni-text-color-grey;
- display: inline-block;
- width: 160rpx;
- }
- }
- }
- }
- .b_detail{
- margin:6rpx 0;
- background-color: #fff;
- padding:20rpx;
- box-sizing: border-box;
- .detail_list{
- margin-bottom: 10rpx;
- &:last-child{
- margin-bottom: 0rpx;
- }
- .detail_box::after{
- content:';';
- color:$uni-text-color-grey;
- }
- .detail_box{
- text{
- &:first-child{
- color:$uni-text-color-grey;
- }
- &:last-child{
- color:$uni-color-warning;
- font-weight: 600;
- }
- }
-
- }
- }
- }
- .detail_con{
- flex-grow: 1;
- overflow: auto;
- background-color: #fff;
- }
- .footer{
- padding:10rpx 20rpx;
- background:#fff;
- margin-top:20rpx;
- }
- }
- </style>
|