司机注册增加图片字段 司机首页样式更改

qingyiay

2023-10-23 5c2decc75ac02ba4409375efc4f793b02c505296

 pages/freight-forwarder-page/freightForwarder-index/freightForwarder-index.vue

@@ -1,304 +1,597 @@
<template>
   <view class="freightForwarder-index">
      <view class="freightForwarder-index-body">
         <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" textSize="30" iconSize="1000" v-if="orderPlanData.length == 0"></u-empty>
         <card v-for="(item, index) in orderPlanData" :key="index" :name="item.id" @click="cardBodyClick(item)" backgroundType="1">
            <template v-slot:left>
               <view class="card-left__top">
                  <text>{{ item.carNum }}</text>
                  张
               </view>
               <view class="card-left__utils"><u-button text="转发" type="primary" @tap.stop="forwardClick(item)" shape="circle"></u-button></view>
            </template>
            <template v-slot:right-top>
               <view class="right-top">
                  <view class="card-right-top-row">
                     <view>
                        <text>转发剩余：{{ item.carNumSurplusHuodai || 0 }}</text>
         <view class="wait-collection"
            style="background: url('https://mx.jzeg.cn:9096/appimg/image/banner/customerbanner.png') no-repeat;background-size:contain">
         </view>
         <view style="position: relative;top: -120px;">
            <u-empty mode="data"
               icon="http://cdn.uviewui.com/uview/empty/data.png"
               textSize="30"
               iconSize="1000"
               text="暂无数据"
               v-if="orderPlanData.length == 0"></u-empty>
         </view>
         <view class="collection-form">
            <view class="collection-form-item"
               v-for="(item, index) in orderPlanData"
               :key="index"
               @click="cardBodyClick(item)">
               <view class="first-line">
                  <view class="main-information">
                     <view class="sign">装</view>
                     <view class="filedname exceedHide">
                        <text
                           v-if="item.orderType == '外销' || item.orderType == '内销' || item.orderType == '转出'">{{ item.deptName }}</text>
                        <text
                           v-else-if="item.orderType == '外购' || item.orderType == '内购' || item.orderType == '转入'">{{ item.customerName }}</text>
                     </view>
                     <view>
                        <text>{{ item.coalName || '' }}</text>
                  </view>
                  <view class="main-divider"></view>
                  <view class="point-number">
                     <text class="residue">{{ item.carNumSurplusHuodai || 0 }}</text>
                     <text>/{{ item.carNum }}</text>
                  </view>
               </view>
               <view class="first-extra">
                  <view class="main-information">
                     <view class="sign">卸</view>
                     <view class="filedname exceedHide">
                        <text
                           v-if="item.orderType == '外销' || item.orderType == '内销' || item.orderType == '转出'">{{ item.customerName }}</text>
                        <text
                           v-else-if="item.orderType == '外购' || item.orderType == '内购' || item.orderType == '转入'">{{ item.deptName }}</text>
                     </view>
                  </view>
               </view>
            </template>
            <template v-slot:right-bottom>
               <view class="code">
                  <text>编号：{{ item.orderCode || '' }}</text>
               </view>
            </template>
         </card>
      </view>
      <view class="history-numbers">
         <combined-title title="历史提煤单"></combined-title>
         <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="historyScrolltolower">
            <view class="history-information" v-for="(item, index) in historyCoalData" :key="index" @click="faYundetail(item)">
               <view class="history-sendate">
                  <text>发运日期 {{ item.sendDate || '' }}</text>
                  <view class="view-more">
                     <text style="color: #449cfc;">详情</text>
                     <view class="arrow-right"><u-icon name="arrow-right" size="40" color="#449cfc"></u-icon></view>
               <view class="second-line">
                  <view class="coal-name">
                     <view class="">{{ item.coalName }}</view>
                     <view class="black-bar"></view>
                     <view class="coal-type"
                        v-if="item.orderType">{{ item.orderType }}</view>
                  </view>
               </view>
               <view class="history-main">
                  <view class="main-left">
                     <view class="history-body">
                        <text>所属单位 {{ item.deptName || '' }}</text>
                     </view>
                     <view class="history-body">
                        <text>煤场名称 {{ item.filedName || '' }}</text>
                     </view>
                     <view class="history-body">
                        <text>煤种名称 {{ item.coalName || '' }}</text>
               <view class="third-line">
                  <view class="time-icon">
                     <view
                        style="width: 24rpx;height: 24rpx;line-height: 24rpx;background: url('https://mx.jzeg.cn:9096/appimg/image/banner/clock.png') no-repeat;background-size: cover">
                     </view>
                  </view>
                  <view class="main-right">
                     <view class="history-body">
                        <text style="word-break: break-all;">订单编号 {{ item.orderCode || '' }}</text>
                     </view>
                     <view class="history-body">
                        <text>订单剩余量 {{ item.carNumSurplus || '' }}</text>
                     </view>
                     <view class="history-body">
                        <text>提煤单个数 {{ item.tmCount || '' }}</text>
                     </view>
                  <view class="send-date">{{ item.sendDate }}</view>
               </view>
               <view class="fourth-line">
                  <view class="forward"
                     @click.stop="forwardClick(item)">
                     <view class="button-image">转发</view>
                  </view>
               </view>
            </view>
            <view class="more_text" v-if="showMoreData && historyCoalData.length !== 0">没有数据了...</view>
         </scroll-view>
         </view>
         <!-- <view class="transparent">
            <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" textSize="30" iconSize="1000" v-if="orderPlanData.length == 0"></u-empty>
         </view> -->
         <view class="history-numbers">
            <combined-title title="历史提煤单"></combined-title>
            <scroll-view :scroll-top="scrollTop"
               scroll-y="true"
               class="scroll-Y"
               @scrolltolower="historyScrolltolower">
               <u-empty mode="data"
                  icon="http://cdn.uviewui.com/uview/empty/data.png"
                  textSize="30"
                  iconSize="1000"
                  text="暂无数据"
                  v-if="historyCoalData.length === 0"></u-empty>
               <view class="history-information"
                  v-for="(item, index) in historyCoalData"
                  :key="index"
                  @click="faYundetail(item)">
                  <view class="first">
                     <view class="">{{ item.deptName || '' }}</view>
                     <view class=""><u-icon name="arrow-right"
                           color="#999999"
                           size="40"></u-icon></view>
                  </view>
                  <view class="second">
                     <view class="coal-name">{{ item.coalName || '' }}</view>
                     <view class="order-type"
                        v-if="item.orderType">{{ item.orderType || '' }}</view>
                  </view>
                  <view class="third">
                     <view class="third-line">
                        <view class="third-line_text">领取数：</view>
                        <view class="third-line_num">{{ item.cars2 }}</view>
                     </view>
                     <view class="third-line">
                        <view class="third-line_text">剩余数：</view>
                        <view class="third-line_num">{{ item.carNumSurplus }}</view>
                     </view>
                     <view class="third-line">
                        <view class="third-line_text">提煤单个数：</view>
                        <view class="third-line_num">{{ item.tmCount }}</view>
                     </view>
                  </view>
                  <view class="fourth">
                     <view class="fourth-icon">
                        <view
                           style="width: 24rpx;height: 24rpx;line-height: 24rpx;background: url('https://mx.jzeg.cn:9096/appimg/image/banner/clock.png') no-repeat;background-size: cover">
                        </view>
                     </view>
                     <view class="senddate">{{ item.sendDate }}</view>
                  </view>
                  <view class="fourth">
                     <view class="fourth-icon">
                        <view
                           style="width: 26rpx;height: 26rpx;line-height: 26rpx;background: url('https://mx.jzeg.cn:9096/appimg/image/banner/carnNUm.png') no-repeat;background-size: cover">
                        </view>
                     </view>
                     <view class="senddate">{{ item.orderCode }}</view>
                  </view>
               </view>
               <view class="more_text"
                  v-if="showMoreData && historyCoalData.length !== 0">没有数据了...</view>
               <!-- <view class="white-block"></view> -->
            </scroll-view>
         </view>
      </view>
   </view>
</template>

<script>
import combinedTitle from '@/components/combined-title/combined-title.vue';
export default {
   props: {
      indexHistoryCoalData: {
         type: Array,
         default: []
      },
      indexHuoDaiOrderPlanData: {
         type: Array,
         default: []
      }
   },
   watch: {
      indexHistoryCoalData: {
         handler(v) {
            this.historyCoalData = v;
   import combinedTitle from '@/components/combined-title/combined-title.vue';
   export default {
      props: {
         indexHistoryCoalData: {
            type: Array,
            default: []
         },
         deep: true,
         immediate: true
         indexHuoDaiOrderPlanData: {
            type: Array,
            default: []
         }
      },
      indexHuoDaiOrderPlanData: {
         handler(v) {
            this.orderPlanData = v;
      watch: {
         indexHistoryCoalData: {
            handler(v) {
               this.historyCoalData = v;
            },
            deep: true,
            immediate: true
         },
         deep: true,
         immediate: true
      }
   },
   components: {
      combinedTitle
   },
   data() {
      return {
         orderPlanData: [],
         historyCoalData: [],
         // 表格加载状态
         loading: false,
         scrollTop: 0,
         // 每页数据量
         pageSize: 10,
         // 当前页
         pageCurrent: 1,
         // 数据总量
         total: 0,
         // 是否显示更多数据
         showMoreData: false
      };
   },
   onShow() {
      this.init();
   },
   computed: {
      huoDaiId() {
         return uni.getStorageSync('userInfo').id;
      }
   },
   methods: {
      // 获取历史提煤单
      getJhOrderPlanDataPage() {
         this.loading = true;
         this.$reqGet('getJhOrderPlanDataPage', { current: this.pageCurrent, size: this.pageSize }).then(res => {
            if (res.data.records) {
               if (this.pageCurrent > 1) {
                  this.historyCoalData = this.historyCoalData.concat(res.data.records);
                  this.historyCoalData = this.ArrSet(this.historyCoalData, 'id');
                  this.loading = false;
               } else {
                  this.historyCoalData = res.data.records;
                  this.loading = false;
         indexHuoDaiOrderPlanData: {
            handler(v) {
               this.orderPlanData = v;
            },
            deep: true,
            immediate: true
         }
      },
      components: {
         combinedTitle
      },
      data() {
         return {
            orderPlanData: [],
            historyCoalData: [],
            // 表格加载状态
            loading: false,
            scrollTop: 0,
            // 每页数据量
            pageSize: 10,
            // 当前页
            pageCurrent: 1,
            // 数据总量
            total: 0,
            // 是否显示更多数据
            showMoreData: false
         };
      },
      onShow() {
         this.init();
      },
      computed: {
         huoDaiId() {
            return uni.getStorageSync('userInfo').id;
         }
      },
      methods: {
         // 获取历史提煤单
         getJhOrderPlanDataPage() {
            uni.showLoading({
               title: '加载中'
            });
            this.$reqGet('getJhOrderPlanDataPage', { current: this.pageCurrent, size: this.pageSize }).then(res => {
               if (res.data.records) {
                  if (this.pageCurrent > 1) {
                     this.historyCoalData = this.historyCoalData.concat(res.data.records);
                     this.historyCoalData = this.ArrSet(this.historyCoalData, 'id');
                     uni.hideLoading();
                  } else {
                     this.historyCoalData = res.data.records;
                     uni.hideLoading();
                  }
               }
            }
         });
      },
      // 上拉加载
      historyScrolltolower() {
         if (this.pageCurrent * this.pageSize >= this.total) return (this.showMoreData = true);
         this.pageCurrent++;
         this.getJhOrderPlanDataPage();
      },
      //fix 点击提煤单返回会增加重复数据
      ArrSet(Arr, id) {
         var obj = {};
         const arrays = Arr.reduce((setArr, item) => {
            obj[item[id]] ? '' : (obj[item[id]] = true && setArr.push(item));
            return setArr;
         }, []);
         return arrays;
      },
      init() {
         this.huoDaiList();
         this.getJhOrderPlanDataPage();
      },
      huoDaiList() {
         this.$reqGet('huoDaiList').then(res => {
            this.orderPlanData = res.data;
         });
      },
      cardBodyClick(item) {
         // let code = null;
         // this.orderPlanData.forEach(item => {
         //    if (item.orderPlanId == id) {
         //       code = item.code;
         //       id = item.orderPlanId;
         //    }
         // });
         uni.navigateTo({
            url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${item.orderPlanId}&code=${item.code}`
         });
      },
      // 转发
      forwardClick(value) {
         uni.navigateTo({
            url: `/pages/public-page/forward/forward?orderPlanId=${value.orderPlanId}&carNumSurplusHuodai=${value.carNumSurplusHuodai}&carNum=${value.carNum}`
         });
      },
      // 点击历史提煤单一行获取详情
      faYundetail(v) {
         uni.navigateTo({
            url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${v.id}&cars2=${v.cars2}`
         });
            });
         },
         // 上拉加载
         historyScrolltolower() {
            if (this.pageCurrent * this.pageSize >= this.total) return (this.showMoreData = true);
            this.pageCurrent++;
            this.getJhOrderPlanDataPage();
         },
         //fix 点击提煤单返回会增加重复数据
         ArrSet(Arr, id) {
            var obj = {};
            const arrays = Arr.reduce((setArr, item) => {
               obj[item[id]] ? '' : (obj[item[id]] = true && setArr.push(item));
               return setArr;
            }, []);
            return arrays;
         },
         init() {
            this.huoDaiList();
            this.getJhOrderPlanDataPage();
         },
         huoDaiList() {
            this.$reqGet('huoDaiList').then(res => {
               this.orderPlanData = res.data;
            });
         },
         cardBodyClick(item) {
            // let code = null;
            // this.orderPlanData.forEach(item => {
            //    if (item.orderPlanId == id) {
            //       code = item.code;
            //       id = item.orderPlanId;
            //    }
            // });
            uni.navigateTo({
               url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${item.orderPlanId}&carNum=${item.carNum}`
            });
         },
         // 转发
         forwardClick(value) {
            uni.navigateTo({
               url: `/pages/public-page/forward/forward?orderPlanId=${value.orderPlanId}&carNumSurplusHuodai=${value.carNumSurplusHuodai}&carNum=${value.carNum}`
            });
         },
         // 点击历史提煤单一行获取详情
         faYundetail(v) {
            uni.navigateTo({
               url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${v.id}&cars2=${v.cars2}`
            });
         }
      }
   }
};
   };
</script>

<style lang="scss" scoped>
.scroll-Y {
   height: 900rpx;
   background-color: #e2e2e2;
   border-radius: vww(10);
   margin-bottom: vww(55);
   .history-information {
      width: 94%;
<style lang="scss"
   scoped>
   @mixin flex {
      display: flex;
      flex-direction: column;
      border: 1px solid #e2e2e2;
      background-color: #fff;
      border-radius: vww(10);
      margin: vww(10);
      .history-sendate {
         height: vww(40);
         border-bottom: 1px solid #e2e2e2;
         line-height: vww(40);
         padding-left: vww(8);
         position: relative;
         .view-more {
            display: flex;
            width: vww(80);
            position: absolute;
            right: vww(10);
            top: vww(-1);
            .arrow-right {
               position: absolute;
               right: vww(27);
               top: vww(12);
      justify-content: space-between;
      align-items: center;
   }

   @mixin firstLine {
      width: 94%;
      height: vww(68);
      margin: vww(18) vww(16) 0 vww(16);
      display: flex;
      justify-content: space-between;
   }

   .scroll-Y {
      height: 900rpx;

      .more_text {
         color: #333;
         font-size: 24rpx;
         text-align: center;
      }
   }

   .history-numbers {
      width: 100%;
      position: relative;
      top: vww(-110);

      .history-information {
         width: 690rpx;
         height: 398rpx;
         margin: vww(10) vww(15);
         background: #ffffff;
         box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
         border-radius: 20rpx;
         @include flex flex-direction: column;
         align-items: flex-start;
         justify-content: space-evenly;
         overflow: hidden;

         .first {
            width: 96%;
            height: 34rpx;
            font-size: 32rpx;
            font-weight: 300;
            color: #303030;
            @include flex;
            margin: vww(10) vww(10) 0;
         }

         .second {
            width: 100%;
            height: 31rpx;
            font-size: 30rpx;
            font-weight: 300;
            color: #515151;
            margin: vww(10) vww(10) 0;
            @include flex;
            justify-content: flex-start;

            .coal-name {
               min-width: vww(30);
               height: vww(20);
               margin-right: vww(21);
            }

            .order-type {
               color: #035cfb;
               border: 2px solid #035cfb;
               border-radius: 4rpx;
               padding: vww(2) vww(4);
               text-align: center;
            }
         }

         .third {
            width: 96%;
            height: 31rpx;
            font-size: 30rpx;
            font-weight: 300;
            color: #515151;
            margin: vww(10) vww(10) 0;
            @include flex;

            .third-line {
               @include flex;

               &_text {
                  color: #919090;
               }

               &_num {
                  color: #035cfb;
               }
            }
         }

         .fourth {
            width: 50%;
            height: 31rpx;
            font-size: 30rpx;
            font-weight: 300;
            color: #515151;
            margin: vww(10) vww(10) 0;
            @include flex;

            .fourth-icon {
               width: vww(13);
               height: vww(13);
               margin-right: vww(14);
            }

            .senddate {
               flex: 1;
            }
         }
      }
      .history-main {
         min-height: vww(120);
         display: flex;
         justify-content: space-between;
         .main-left,
         .main-right {
            width: 45%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: vww(4) vww(4);
         }
      }
   }
   .more_text {
      color: #333;
      font-size: 24rpx;
      text-align: center;
   }
}
::v-deep.freightForwarder-index {
   width: 94%;
   margin: 0 auto;
   // 主体
   .freightForwarder-index-body {
      margin-bottom: vww(10);

      // 卡片样式
      .card-left__top {
         margin-top: vww(26);
         text-align: center;
         color: #ffffff;
         text {
            font-size: vww(48);
            font-weight: 800;
   .exceedHide {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
   }

   ::v-deep.freightForwarder-index {
      width: 100%;
      margin: 0 auto;

      // 主体
      .freightForwarder-index-body {
         .wait-collection {
            width: 100%;
            height: 600rpx;
            position: relative;
            top: vww(-10);
            z-index: 0;
         }
      }
      .card-left__utils {
         display: flex;
         padding: 0 vww(15) 0 vww(15);
         .u-button {
            width: vww(55);
            height: vww(24);
            background-color: #fff;
            color: #1987ff;
         }
      }
      .right-top {
         display: flex;
         flex-flow: column nowrap;
         align-content: space-around;
         .card-right-top-row {
            margin-top: vww(26);
            text-align: center;
            &:nth-child(1) {
               display: flex;
               justify-content: space-between;
               view {
                  text-align: center;
                  width: 50%;

         .collection-form {
            width: vww(345);
            margin: 0 vww(15);
            position: relative;
            top: vww(-144);

            .collection-form-item {
               width: 690rpx;
               height: 340rpx;
               background: #ffffff;
               box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15);
               border-radius: 20rpx;
               overflow: hidden;
               @include flex;
               flex-direction: column;
               position: relative;
               align-items: flex-start;
               margin-top: vww(10);

               .first-line {
                  width: 94%;
                  height: vww(30);
                  margin: vww(10) vww(16) 0 vww(16);
                  display: flex;
                  justify-content: space-between;

                  .main-information {
                     width: 88%;
                     height: vww(28);
                     display: flex;
                     justify-content: flex-start;
                     align-items: center;

                     .sign {
                        width: vww(28);
                        height: vww(28);
                        line-height: vww(28);
                        text-align: center;
                        background: url('https://mx.jzeg.cn:9096/appimg/image/banner/blueblock.png') no-repeat;
                        background-size: contain;
                        font-size: 30rpx;
                        font-weight: 400;
                        color: #ffffff;
                        margin-right: vww(20);
                     }
                  }

                  .main-divider {
                     width: 560rpx;
                     height: 1rpx;
                     background: #e3e3e3;
                     position: absolute;
                     top: 98rpx;
                     left: 122rpx;
                  }

                  .point-number {
                     position: absolute;
                     right: 0;
                     width: 15%;

                     text {
                        font-size: 24rpx;
                        font-weight: 400;
                        color: #c78a64;
                     }

                     .residue {
                        font-size: 40rpx;
                        font-weight: 400;
                        color: #f81414;
                     }
                  }
               }

               .first-extra {
                  @include firstLine;

                  .main-information {
                     width: 100%;
                     height: vww(28);
                     display: flex;
                     justify-content: flex-start;
                     align-items: center;

                     .sign {
                        width: vww(28);
                        height: vww(28);
                        line-height: vww(28);
                        text-align: center;
                        background: url('https://mx.jzeg.cn:9096/appimg/image/banner/redblock.png') no-repeat;
                        background-size: contain;
                        font-size: 30rpx;
                        font-weight: 400;
                        color: #ffffff;
                        margin-right: vww(20);
                     }
                  }
               }

               .second-line {
                  width: 100%;
                  height: vww(40);
                  margin-left: vww(18);
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;

                  .coal-name {
                     flex-grow: 1;
                     height: 30rpx;
                     font-size: 30rpx;
                     font-weight: 300;
                     color: #515151;
                     position: relative;
                     display: flex;
                     align-items: center;

                     .black-bar {
                        width: 2rpx;
                        height: 30rpx;
                        background: #515151;
                        margin-left: vww(12);
                     }

                     .coal-type {
                        margin-left: vww(12);
                        min-width: vww(50);
                        height: 30rpx;
                        line-height: 30rpx;
                        font-size: 30rpx;
                        font-weight: 300;
                        color: #515151;
                     }
                  }
               }

               .third-line {
                  width: 40%;
                  height: vww(50);
                  margin-left: vww(18);
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;

                  .send-date {
                     width: 148rpx;
                     height: 24rpx;
                     margin-left: vww(14);
                     line-height: 24rpx;
                     font-size: 28rpx;
                     font-weight: 300;
                     color: #515151;
                  }
               }

               .fourth-line {
                  width: 40%;
                  height: vww(30);
                  @include flex;
                  position: relative;
                  left: 60%;
                  bottom: vww(10);

                  .forward {
                     width: vww(123);
                     height: vww(48);
                     left: vww(140);

                     .button-image {
                        width: 100%;
                        height: 100%;
                        background: url('../../../static/image/banner/button.png') no-repeat;
                        background-size: cover;
                        font-size: 28rpx;
                        font-weight: 300;
                        color: #fff;
                        text-align: center;
                        line-height: vww(45);
                     }
                  }
               }
            }
         }
      }

      .code {
         margin-top: vww(2);
         text-align: center;
      }
   }
}
</style>
</style>