样式修改,引入字体，修改逻辑

qingyiay

2023-05-10 29658de29b2eb5292bf0c2fad7427b374b769ebc

 pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails.vue

@@ -1,53 +1,92 @@
<template>
   <view class="fayunPlan">
      <view class="fayunPlanBody">
         <combined-title title="领取情况"></combined-title>
         <view class="compDetails">
            <uni-table border stripe emptyText="暂无更多数据">
               <uni-tr>
                  <uni-th align="left">领取总量</uni-th>
                  <uni-td align="left">{{ cars2 || 0 }}张</uni-td>
               </uni-tr>
               <uni-tr>
                  <uni-th align="left" width="120">转发总量</uni-th>
                  <uni-td align="left">{{ orderPlanDetail.fowardSum || 0 }}张</uni-td>
               </uni-tr>
               <uni-tr v-for="(item, index) in orderPlanDetail.huodaiList" :key="index">
                  <uni-th align="left">{{ item.huoDaiName }}</uni-th>
                  <uni-td align="left">{{ item.fleetOrHuodaiNub }}张</uni-td>
               </uni-tr>
               <uni-tr v-for="(item, index) in orderPlanDetail.cheduiList" :key="index">
                  <uni-th align="left">{{ item.cheduiName }}</uni-th>
                  <uni-td align="left">{{ item.fleetOrHuodaiNub }}张</uni-td>
               </uni-tr>
               <uni-tr>
                  <uni-th align="left">司机总领取</uni-th>
                  <uni-td align="left">{{ orderPlanDetail.sijiSum || 0 }}张</uni-td>
               </uni-tr>
            </uni-table>
   <view class="">
      <view class="fayunPlan">
         <view class="plan-banner">
            <view class="top-container">
               <view class="back-icon" @click="backPage"><u-icon name="arrow-left" size="50" color="#fff"></u-icon></view>
               <view class="top-title">发运计划详情</view>
            </view>
            <view class="middle-container">
               <view class="dept-name" v-show="deptName">{{ deptName }}({{ coalName }})</view>
               <view class="dept-num">
                  <text
                     style="font-size: 46rpx;
                  font-weight: 400;
                  color: #FFFFFF;
                  text-shadow: 0rpx 4rpx 0rpx #1A66FE;"
                  >
                     {{ orderPlanDetail.fowardSum || 0 }}
                  </text>
                  <text
                     style="font-size: 24rpx;
                  font-weight: 400;
                  color: #F81414;
                  text-shadow: 0rpx 4rpx 0rpx #1A66FE;"
                  >
                     /{{ cars2 || 0 }}
                  </text>
               </view>
            </view>
            <view class="bottom-container">
               <view class="bottom-block">
                  <view class="bottom-content" v-for="(item, index) in orderPlanDetail.huodaiList" :key="index">
                     <view class="forward-name">{{ item.huoDaiName }}</view>
                     <view class="forward-num">
                        {{ item.fleetOrHuodaiNub }}
                        <text>张</text>
                     </view>
                  </view>
                  <view class="bottom-content" v-for="(item, index) in orderPlanDetail.cheduiList" :key="index">
                     <view class="fleet-name">{{ item.cheduiName }}</view>
                     <view class="fleet-num">
                        {{ item.fleetOrHuodaiNub }}
                        <text>张</text>
                     </view>
                  </view>
                  <view class="bottom-content">
                     <view class="fleet-name">司机</view>
                     <view class="fleet-num">
                        {{ orderPlanDetail.sijiSum || 0 }}
                        <text>张</text>
                     </view>
                  </view>
               </view>
            </view>
         </view>
         <combined-title title="提煤单详情"></combined-title>
         <view class="empty-pointer" v-if="!yyDailyList">暂无更多数据</view>
         <view class="compDetails card" v-for="(item, index) in yyDailyList" :key="index">
            <view class="coal-status">
               <view class="label-title">提煤单状态</view>
               <view class="label-value">{{ coalStatus[item.status] }}</view>
         <view class="block-top">
            <combined-title title="提煤单详情"></combined-title>
            <view class="total">
               总净重
               <text>{{ total || 0 }}</text>
            </view>
            <view class="coal-carNo">
               <view class="label-title">车牌号</view>
               <view class="label-value">{{ item.carNo || '' }}</view>
         </view>
         <view class="main-banner">
            <view class="empty-pointer" v-if="!yyDailyList">暂无更多数据</view>
            <view class="main-block">
               <view class="main-container">
                  <view class="main-container_content" v-for="(item, index) in yyDailyList" :key="index" @click="showMore(index)">
                     <view class="arrow-icon"><u-icon name="arrow-right" size="30" color="#999999"></u-icon></view>
                     <view class="divider"><u-divider></u-divider></view>
                     <view class="first-line">
                        <view class="car-num">{{ item.carNo || '' }}</view>
                        <view class="order-type">{{ coalStatus[item.status] }}</view>
                     </view>
                     <view class="second-line">
                        <view class="line-content">
                           <view class="line-content_text">净重</view>
                           <view class="line-content_num">{{ item.clean || 0 }}</view>
                        </view>
                        <view class="line-content">
                           <view class="line-content_text">余量</view>
                           <view class="line-content_num">{{ item.allowance || 0 }}</view>
                        </view>
                     </view>
                  </view>
               </view>
            </view>
            <view class="coal-clean">
               <view class="label-title">净重</view>
               <view class="label-value">{{ item.clean || 0 }}</view>
            </view>
            <view class="coal-allowance">
               <view class="label-title">余量</view>
               <view class="label-value">{{ item.allowance || 0 }}</view>
            </view>
            <view class="more-button"><u-button type="success" text="详情" @click="showMore(index)"></u-button></view>
         </view>
      </view>
      <view class="white-block"></view>
   </view>
</template>

@@ -61,6 +100,8 @@
      this.orderPlanId = value.orderPlanId;
      this.orderCode = value.code;
      this.cars2 = value.cars2;
      this.deptName = value.deptName;
      this.coalName = value.coalName;
      console.log(value, '发运计划参数');
   },
   data() {
@@ -68,16 +109,24 @@
         orderPlanId: null,
         orderCode: null,
         orderPlanDetail: {},
         coalStatus: ['领取', '预约', '签到', '入场', '称皮', '称毛', '离场', '入磅房', '出磅房', '入煤场', '出煤仓'],
         coalStatus: ['领取', '预约', '签到', '入场', '称皮', '称毛', '离场', '入磅房', '出磅房', '入煤仓', '出煤仓', '放空', '作废', '入场申请', '进入场院'],
         yyDailyList: [],
         // 领取数量
         cars2: ''
         cars2: '',
         coalName: '',
         deptName: '',
         total: 0
      };
   },
   onShow() {
      this.init();
   },
   methods: {
      backPage() {
         uni.navigateBack({
            delta: 1
         });
      },
      showMore(index) {
         uni.navigateTo({
            url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanMore/fayunPlanMore?orderPlanId=${this.orderPlanId}&index=${index}`
@@ -95,6 +144,13 @@
            if (res.code == 0) {
               this.orderPlanDetail = res.data;
               this.yyDailyList = res.data.yyDailyList;
               if (res.data.yyDailyList) {
                  this.total = this.yyDailyList.reduce((prev, cur) => {
                     return prev + cur.clean;
                  }, 0);
               } else {
                  this.total = 0;
               }
               uni.hideLoading();
            } else {
               this.$u.toast('加载失败，请稍后重试');
@@ -107,11 +163,21 @@
</script>

<style lang="scss" scoped>
@mixin flex {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.empty-pointer {
   position: absolute;
   top: 50%;
   left: 38%;
   color: #909399;
}
.white-block {
   width: 100%;
   height: vww(50);
   margin-top: vww(10);
}
::v-deep.fayunPlan {
   width: 100%;
@@ -119,6 +185,188 @@
   background-color: #f4f4f4;
   display: flex;
   flex-direction: column;
   .plan-banner {
      width: 100%;
      background: linear-gradient(0deg, #ffffff 0%, #0055fe 100%);
      background-size: contain;
      position: relative;
      top: 0;
      .top-container {
         width: 468rpx;
         height: 38rpx;
         position: relative;
         top: vww(48);
         @include flex margin-left: vww(10);
         .top-title {
            width: 226rpx;
            height: 36rpx;
            font-size: 38rpx;
            font-weight: normal;
            color: #fff;
            line-height: 69rpx;
         }
      }
      .middle-container {
         width: 626rpx;
         height: 34rpx;
         margin: vww(27) vww(31) 0 vww(31);
         @include flex;
         position: relative;
         top: vww(54);
         .dept-name {
            font-size: 32rpx;
            font-weight: normal;
            color: #ffffff;
            line-height: 69rpx;
            text-shadow: 0rpx 4rpx 0rpx #1a66fe;
         }
      }
      .bottom-container {
         width: 100%;
         @include flex;
         justify-content: center;
         margin-top: vww(80);
         .bottom-block {
            width: 690rpx;
            min-height: 185rpx;
            background: #ffffff;
            box-shadow: 4rpx 6rpx 51rpx 0rpx rgba(73, 120, 240, 0.11);
            border-radius: 20rpx;
            @include flex;
            justify-content: space-around;
            flex-wrap: wrap;
            padding: 0 vww(8);
            .bottom-content {
               @include flex;
               flex-direction: column;
               height: vww(56);
               margin-right: vww(5);
               .forward-name,
               .fleet-name {
                  font-size: 28rpx;
                  font-weight: normal;
                  color: #757575;
                  line-height: 69rpx;
               }
               .forward-num,
               .fleet-num {
                  font-size: 40rpx;
                  font-weight: 400;
                  color: #303030;
                  line-height: 69rpx;
                  text {
                     font-size: 30rpx;
                  }
               }
            }
         }
      }
   }
   .block-top {
      width: 94%;
      margin: vww(15);
      @include flex;
      .total {
         height: 30rpx;
         line-height: vww(15);
         font-size: 28rpx;
         font-weight: normal;
         color: #757575;
         text {
            width: 118rpx;
            height: 30rpx;
            line-height: vww(15);
            font-size: 40rpx;
            font-weight: 400;
            color: #f81414;
         }
      }
   }
   .main-banner {
      width: 100%;
      @include flex;
      justify-content: center;
      .main-block {
         width: 690rpx;
         background: #ffffff;
         box-shadow: 4rpx 6rpx 51rpx 0rpx rgba(73, 120, 240, 0.11);
         border-radius: 20rpx;
         .main-container {
            width: 100%;
            @include flex;
            justify-content: center;
            flex-direction: column;
            background-color: #fff;
            &_content {
               width: 96%;
               height: 194rpx;
               @include flex;
               flex-direction: column;
               justify-content: space-around;
               align-items: flex-start;
               margin-top: vww(8);
               position: relative;
               .arrow-icon {
                  position: absolute;
                  right: vww(10);
                  top: vww(17);
               }
               .divider {
                  position: absolute;
                  width: 94%;
                  height: vww(1);
                  margin: 0 auto;
                  border-bottom: 1px soild #d6d6d6;
                  left: vww(15);
                  bottom: vww(18);
               }
               .first-line {
                  width: 50%;
                  @include flex;
                  margin: 0 vww(15);
                  .car-num {
                     height: 31rpx;
                     font-size: 30rpx;
                     font-weight: 300;
                     color: #303030;
                  }
                  .order-type {
                     border: 2px solid #035cfb;
                     border-radius: 4rpx;
                     color: #035cfb;
                     padding: vww(2) vww(4);
                     text-align: center;
                  }
               }
               .second-line {
                  width: 94%;
                  height: vww(14);
                  margin: 0 vww(15);
                  @include flex;
                  justify-content: space-between;
                  .line-content {
                     width: 40%;
                     @include flex &_text {
                        width: 69rpx;
                        height: 29rpx;
                        line-height: 29rpx;
                        font-size: 28rpx;
                        font-weight: 400;
                        color: #919090;
                     }
                     &_num {
                        height: 29rpx;
                        line-height: 29rpx;
                        font-size: 38rpx;
                        font-weight: 400;
                        color: #035cfb;
                     }
                  }
               }
            }
         }
      }
   }
   .fayunPlanBody {
      width: 94%;
      margin: 0 auto;