图片地址替换

qingyiay

2023-07-02 f5427eeb16cadd3b0534454ab3c92df6f0ec1536

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

@@ -3,39 +3,71 @@
      <view class="customer-index">
         <view class="customer-index-body">
            <!-- 待领取和转发提煤单 -->
            <view class="wait-collection" style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/customerbanner.png') no-repeat;background-size:contain"></view>
            <view class="wait-collection"
               :style="{ backgroundImage: `url(${onlineurl}/appimg/image/banner/customerbanner.png)`, backgroundSize: 'contain', backgroundRepeat: 'no-repeat' }">
            </view>
            <view style="position: relative;top: -120px;">
               <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" textSize="30" iconSize="1000" v-if="orderPlanData.length == 0"></u-empty>
               <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="collection-form">
               <view class="collection-form-item" v-for="(item, index) in orderPlanData" :key="index" @click="cardBodyClick(item)">
               <view class="collection-form-item"
                  v-for="(item, index) in orderPlanData"
                  :key="index"
                  @click="cardBodyClick(item)">
                  <view class="first-line">
                     <view class="dispatch-receive">
                        <view class="dispatch">{{ item.filedName }}</view>
                        <view class="dispatch">{{ item.filedName||'' }}</view>
                     </view>
                     <view class="point-number">
                        <text class="residue">{{ item.cars2 }}</text>
                        <text>/{{ item.carNum }}</text>
                     <view class="point-number"
                        v-if="roleType == 1">
                        <text class="residue">{{ item.cars2||'' }}</text>
                        <text>/{{ item.carNum ||''}}</text>
                     </view>
                  </view>
                  <view class="second-line">
                     <view class="coal-name">
                        <view class="">{{ item.coalName }}</view>
                        <view class="">{{ item.coalName ||''}}</view>
                        <view class="black-bar"></view>
                        <view class="coal-type" v-if="item.orderType">{{ item.orderType }}</view>
                        <view class="coal-type"
                           v-if="item.orderType">{{ item.orderType||'' }}</view>
                     </view>
                  </view>
                  <view class="third-line">
                     <view class="time-icon">
                        <view
                           style="width: 24rpx;height: 24rpx;li ne-height: 24rpx;background: url('https://mx.jzeg.cn:9095/appimg/image/banner/clock.png') no-repeat;background-size: cover"
                        ></view>
                           :style="{backgroundImage: `url(${onlineurl}/appimg/image/banner/carNO.png)`,backgroundSize: 'cover',backgroundRepeat: 'no-repeat',width:'24rpx',height:'24rpx',lineHeight:'24rpx'}">
                        </view>
                     </view>
                     <view class="car-num">{{ item.carNos||item.carNo||''}}</view>
                  </view>
                  <view class="third-line">
                     <view class="time-icon">
                        <view
                           :style="{backgroundImage: `url(${onlineurl}/appimg/image/banner/clock.png)`,backgroundSize: 'cover',backgroundRepeat: 'no-repeat',width:'24rpx',height:'24rpx',lineHeight:'24rpx'}">
                        </view>
                     </view>
                     <view class="send-date">{{ item.sendDate }}</view>
                  </view>
                  <view class="fourth-line">
                     <view class="receive" @click.stop="receiveClick(item)"><view class="button-image">领取</view></view>
                     <view class="forward" @click.stop="forwardClick(item)"><view class="button-image">转发</view></view>
                     <view class="receive"
                        @click.stop="receiveClick(item)"
                        v-if="item.orderType!=='外购'">
                        <view class="button-image">领取</view>
                     </view>
                     <view class="forward"
                        @click.stop="forwardClick(item)"
                        v-if="item.orderType!=='外购'">
                        <view class="button-image">转发</view>
                     </view>
                     <!-- <view class="forward"
                        @click.stop="validateClick(index)"
                        v-if='roleType===4'>
                        <view class="button-image">验质</view>
                     </view> -->
                  </view>
               </view>
            </view>
@@ -43,12 +75,24 @@
            <!-- 历史提煤单 -->
            <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" v-if="historyCoalData.length == 0"></u-empty>
                  <view class="history-information" v-for="(item, index) in historyCoalData" :key="index" @click="faYundetail(item)">
               <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"
                     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 class=""><u-icon name="arrow-right"
                              color="#999999"
                              size="40"></u-icon></view>
                     </view>
                     <view class="second">
                        <view class="coal-name">{{ item.coalName || '' }}</view>
@@ -61,8 +105,10 @@
                        </view>
                        <view class="third-line">
                           <view class="third-line_text">剩余数:</view>
                           <view class="third-line_num" v-if="roleType == 1">{{ item.carNumSurplus1 }}</view>
                           <view class="third-line_num" v-else-if="roleType == 2">{{ item.carNumSurplus }}</view>
                           <view class="third-line_num"
                              v-if="roleType == 1">{{ item.carNumSurplus1 }}</view>
                           <view class="third-line_num"
                              v-else-if="roleType == 2">{{ item.carNumSurplus }}</view>
                        </view>
                        <view class="third-line">
                           <view class="third-line_text">提煤单个数:</view>
@@ -72,31 +118,43 @@
                     <view class="fourth">
                        <view class="fourth-icon">
                           <view
                              style="width: 24rpx;height: 24rpx;line-height: 24rpx;background: url('https://mx.jzeg.cn:9095/appimg/image/banner/clock.png') no-repeat;background-size: cover"
                           ></view>
                              :style="{backgroundImage: `url(${onlineurl}/appimg/image/banner/clock.png)`,backgroundSize: 'cover',backgroundRepeat: 'no-repeat',width:'24rpx',height:'24rpx',lineHeight:'24rpx'}">
                           </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:9095/appimg/image/banner/carnNUm.png') no-repeat;background-size: cover;"
                           ></view>
                              :style="{backgroundImage: `url(${onlineurl}/appimg/image/banner/carnNUm.png)`,backgroundSize: 'cover',backgroundRepeat: 'no-repeat',width:'26rpx',height:'26rpx',lineHeight:'26rpx'}">
                           </view>
                        </view>
                        <view class="senddate">{{ item.orderCode }}</view>
                     </view>
                  </view>
                  <view class="more_text" v-if="showMoreData && historyCoalData.length !== 0">没有数据了...</view>
                  <view class="more_text"
                     v-if="showMoreData && historyCoalData.length !== 0">没有数据了...</view>
                  <view class="white-block"></view>
               </scroll-view>
            </view>
         </view>
         <!-- 领取弹出框 -->
         <u-popup :show="show" @close="close" @open="open" mode="center" round="10">
         <u-popup :show="show"
            @close="close"
            @open="open"
            mode="center"
            round="10">
            <view class="receiverPopup">
               <view class="receiverPopup__title"><text>确认领取数量</text></view>
               <view class="receiverPopup__input"><u--input v-model="receiveNum" @change="change" placeholder="请输入内容" type="number" border="surround"></u--input></view>
               <view class="receiverPopup__btn"><u-button text="确定" type="primary" @click="popupDetermineClick"></u-button></view>
               <view class="receiverPopup__input"><u--input v-model="receiveNum"
                     @change="change"
                     placeholder="请输入内容"
                     type="number"
                     border="surround"></u--input></view>
               <view class="receiverPopup__btn"><u-button text="确定"
                     type="primary"
                     @click="popupDetermineClick"
                     :disabled="canClick"></u-button></view>
            </view>
         </u-popup>
      </view>
@@ -104,463 +162,535 @@
</template>

<script>
import card from '@/components/card/card.vue';
import combinedTitle from '@/components/combined-title/combined-title.vue';
import { customerId } from '@/utils/status';
export default {
   props: {
      orderPlanDataStore: {
         type: Array,
         default: []
      }
   },
   components: {
      card,
      combinedTitle
   },
   watch: {
      orderPlanDataStore: {
         handler(v) {
            this.orderPlanData = v;
         },
         deep: true,
         immediate: true
      }
   },
   computed: {
      roleType() {
         return uni.getStorageSync('roleType');
      }
   },
   data() {
      return {
         orderPlanData: [],
         show: false, // 领取提煤单弹出框
         receiveNum: null,
         getOrderNum: {
            num: '',
            id: null
         },
         historyCoalData: [],
         // 表格加载状态
         loading: false,
         scrollTop: 0,
         // 每页数据量
         pageSize: 10,
         // 当前页
         pageCurrent: 1,
         // 数据总量
         total: 0,
         // 是否显示更多数据
         showMoreData: false
      };
   },
   onLoad() {},
   onShow() {
      this.init();
   },
   methods: {
      init() {
         this.GetOrderPlan();
         this.getJhOrderPlanDataPage();
      },
      // 获取发运计划列表
      GetOrderPlan() {
         uni.showLoading({ title: '加载中...' });
         this.$reqGet('GetOrderPlan').then(res => {
            if (res.data) {
               this.orderPlanData = res.data;
               uni.hideLoading();
            }
         });
      },
      // 获取历史提煤单
      getJhOrderPlanDataPage() {
         uni.showLoading({
            title: '加载中'
         });
         this.$reqGet('getJhOrderPlanDataPage', { current: this.pageCurrent, size: this.pageSize }).then(res => {
            if (res.data.records) {
               this.total = res.data.total;
               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;
      },
      popupDetermineClick() {
         if (this.receiveNum > 0) {
            this.getOrderNum.num = this.receiveNum;
            uni.showLoading({ title: '加载中...' });
            this.$reqPost('customerGet', this.getOrderNum, 'params').then(res => {
               uni.hideLoading();
               if (res.code == 0) {
                  this.getOrderNum.num = '';
                  this.GetOrderPlan();
                  this.show = false;
                  uni.showToast({
                     title: '领取成功！',
                     icon: 'none',
                     duration: 1000
                  });
               } else {
                  this.$u.toast(res.msg ? res.msg : '领取失败');
               }
            });
         } else if (Number(this.receiveNum) <= 0) {
            uni.showToast({
               title: '请输入合法的数字',
               icon: 'none'
            });
            this.show = true;
         } else {
            uni.showToast({
               title: '请输入领取数量',
               icon: 'none'
            });
            this.show = true;
   import { onlineurl } from '@/api/request.js'
   import card from '@/components/card/card.vue';
   import combinedTitle from '@/components/combined-title/combined-title.vue';
   import { customerId } from '@/utils/status';
   export default {
      props: {
         orderPlanDataStore: {
            type: Array,
            default: []
         }
      },
      /**
       * @客户领取
       * 领取弹框
       */
      receiveClick(item) {
         this.show = true;
         this.getOrderNum.id = item.id; // 获取领取提煤单的id
      components: {
         card,
         combinedTitle
      },
      open() {},
      close() {
         this.show = false;
         this.receiveNum = null;
      watch: {
         orderPlanDataStore: {
            handler(v) {
               this.orderPlanData = v;
            },
            deep: true,
            immediate: true
         }
      },
      change(e) {
         console.log('输入框', e);
      computed: {
         roleType() {
            return uni.getStorageSync('roleType');
         },
      },
      // 提煤单详情
      cardBodyClick(v) {
         uni.navigateTo({ url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${v.id}&code=${v.code}&cars2=${v.cars2}` });
      data() {
         return {
            orderPlanData: [],
            show: false, // 领取提煤单弹出框
            receiveNum: null,
            getOrderNum: {
               num: '',
               id: null
            },
            historyCoalData: [],
            // 表格加载状态
            loading: false,
            scrollTop: 0,
            // 每页数据量
            pageSize: 10,
            // 当前页
            pageCurrent: 1,
            // 数据总量
            total: 0,
            // 是否显示更多数据
            showMoreData: false,
            cars2: "",
            carNum: "",
            // 剩余的提煤单数量
            carNumSurplus: '',
            canClick: false,
            onlineurl: ''
         };
      },
      // 点击历史提煤单获取详情
      faYundetail(v) {
         uni.navigateTo({
            url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${v.id}&cars2=${v.cars2}&coalName=${v.coalName}&deptName=${v.deptName}`
         });
      onLoad() {},
      onShow() {
         this.init();
      },
      // 转发
      forwardClick(obj) {
         if (obj.cars2 == 0) return this.$u.toast('请先领取后再转发');
         uni.navigateTo({ url: `/pages/public-page/forward/forward?orderPlanId=${obj.id}&carNumSurplus1=${obj.carNumSurplus1}&carNum=${obj.carNum}&cars2=${obj.cars2}` });
      methods: {
         init() {
            this.GetOrderPlan();
            this.getJhOrderPlanDataPage();
            this.onlineurl = onlineurl;
         },
         // 获取发运计划列表
         GetOrderPlan() {
            uni.showLoading({ title: '加载中...' });
            this.$reqGet('GetOrderPlan').then(res => {
               if (res.data) {
                  this.orderPlanData = res.data;
                  uni.hideLoading();
               }
            });
         },
         // 获取历史提煤单
         getJhOrderPlanDataPage() {
            uni.showLoading({
               title: '加载中'
            });
            this.$reqGet('getJhOrderPlanDataPage', { current: this.pageCurrent, size: this.pageSize }).then(res => {
               if (res.data.records) {
                  this.total = res.data.total;
                  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;
         },
         popupDetermineClick() {
            if (this.receiveNum > 0) {
               this.getOrderNum.num = this.receiveNum;
               uni.showLoading({ title: '加载中...' });
               this.$reqPost('customerGet', this.getOrderNum, 'params').then(res => {
                  uni.hideLoading();
                  if (res.code == 0) {
                     this.getOrderNum.num = '';
                     this.GetOrderPlan();
                     this.show = false;
                     uni.showToast({
                        title: '领取成功！',
                        icon: 'none',
                        duration: 1000
                     });
                  } else {
                     this.$u.toast(res.msg ? res.msg : '领取失败');
                  }
               });
            } else if (Number(this.receiveNum) <= 0) {
               uni.showToast({
                  title: '请输入合法的数字',
                  icon: 'none'
               });
               this.show = true;
            } else {
               uni.showToast({
                  title: '请输入领取数量',
                  icon: 'none'
               });
               this.show = true;
            }
         },
         /**
          * @客户领取
          * 领取弹框
          */
         receiveClick(item) {
            this.show = true;
            this.getOrderNum.id = item.id; // 获取领取提煤单的id
            this.cars2 = item.cars2
            this.carNum = item.carNum
         },
         open() {},
         close() {
            this.show = false;
            this.receiveNum = null;
         },
         change(e) {
            console.log('输入框', e);
            this.canClick = e > (this.carNum - this.cars2)
            if (this.canClick) {
               this.$u.toast('已超过当前日计划提煤单数量,请重新输入')
            }
         },
         // 提煤单详情
         cardBodyClick(v) {
            uni
               .navigateTo({ url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${v.id}&code=${v.code}&cars2=${v.cars2?v.cars2:""}` });
         },
         // 点击历史提煤单获取详情
         faYundetail(v) {
            uni.navigateTo({
               url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${v.id}&cars2=${v.cars2}&coalName=${v.coalName}&deptName=${v.deptName}`
            });
         },
         // 转发
         forwardClick(obj) {
            if (obj.cars2 == 0) return this.$u.toast('请先领取后再转发');
            uni
               .navigateTo({ url: `/pages/public-page/forward/forward?orderPlanId=${obj.id}&carNumSurplus1=${obj.carNumSurplus1}&carNum=${obj.carNum}&cars2=${obj.cars2}` });
         },
         // 验质
         validateClick(index) {
            uni
               .navigateTo({ url: `/pages/driver-page/driver-index/bill-of-lading-details/selectOrderPlan/selectOrderPlan?index=${index}` });
         },
      }
   }
};
   };
</script>

<style lang="scss" scoped>
@mixin flex {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.wait-collection {
   width: 100%;
   height: 600rpx;
   position: relative;
   top: vww(-10);
   z-index: 0;
}
.white-block {
   width: 100%;
   height: vww(50);
   margin-top: vww(10);
}
.scroll-Y {
   height: 900rpx;
   .more_text {
      color: #333;
      font-size: 24rpx;
      text-align: center;
<style lang="scss"
   scoped>
   @mixin flex {
      display: flex;
      justify-content: space-between;
      align-items: 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: 100%;
         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;
         }
      }
   }
}

::v-deep.customer-index {
   width: 100%;
   margin: 0 auto;
   // 主体
   .customer-index-body {
      .collection-form {
         width: vww(345);
         margin: 0 vww(15);
         position: relative;
         top: vww(-144);
         .collection-form-item {
            width: 690rpx;
            height: 300rpx;
            background: #ffffff;
            box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15);
            border-radius: 20rpx;
            overflow: hidden;
            @include flex flex-direction: column;
   .wait-collection {
      width: 100%;
      height: 600rpx;
      position: relative;
      top: vww(-10);
      z-index: 0;
   }

   .white-block {
      width: 100%;
      height: vww(50);
      margin-top: vww(10);
   }

   .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: 100%;
            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;
            }
         }
      }
   }

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

      // 主体
      .customer-index-body {
         .collection-form {
            width: vww(345);
            margin: 0 vww(15);
            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;
               .dispatch-receive {
                  width: 70%;
            top: vww(-144);

            .collection-form-item {
               width: 690rpx;
               height: 300rpx;
               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;
                  align-items: center;
               }
               .point-number {
                  width: 15%;
                  text {
                     font-size: 24rpx;
                     font-weight: 400;
                     color: #c78a64;

                  .dispatch-receive {
                     width: 70%;
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
                  }
                  .residue {
                     font-size: 40rpx;
                     font-weight: 400;
                     color: #f81414;

                  .point-number {
                     width: 15%;

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

                     .residue {
                        font-size: 40rpx;
                        font-weight: 400;
                        color: #f81414;
                     }
                  }
               }
            }
            .second-line {
               width: 100%;
               height: vww(30);
               margin-left: vww(16);
               display: flex;
               align-items: center;
               justify-content: flex-start;
               .coal-name {
                  flex-grow: 1;
                  height: 30rpx;
                  font-size: 30rpx;
                  font-weight: 300;
                  color: #515151;
                  position: relative;

               .second-line {
                  width: 100%;
                  height: vww(30);
                  margin-left: vww(16);
                  display: flex;
                  align-items: center;
                  .black-bar {
                     width: 2rpx;
                  justify-content: flex-start;

                  .coal-name {
                     flex-grow: 1;
                     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;
                     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(30);
               margin-left: vww(15);
               display: flex;
               justify-content: flex-start;
               align-items: center;
               .send-date {
                  margin-left: vww(14);
                  width: 148rpx;
                  height: 24rpx;
                  line-height: 24rpx;
                  font-size: 28rpx;
                  font-weight: 300;
                  color: #515151;

               .third-line {
                  width: 80%;
                  height: vww(30);
                  margin-left: vww(15);
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;

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

                  .car-num {
                     color: #515151;
                     white-space: nowrap;
                     overflow: hidden;
                     text-overflow: ellipsis;
                  }

                  .time-icon {
                     width: 24rpx;
                     height: 24rpx;
                     line-height: 24rpx;
                  }
               }
            }
            .fourth-line {
               width: 100%;
               height: vww(30);
               @include flex;
               justify-content: flex-start;
               position: relative;
               bottom: vww(10);
               left: 25%;
               .receive,
               .forward {
                  width: vww(123);
                  height: vww(48);

               .fourth-line {
                  width: 100%;
                  height: vww(30);
                  @include flex;
                  justify-content: center;
                  color: #ffffff;
                  font-size: 28rpx;
                  position: absolute;
                  .button-image {
                     width: 100%;
                     height: 100%;
                     background: url('../../../static/image/banner/button.png') no-repeat;
                     background-size: cover;
                     font-size: 28rpx;
                     font-weight: 300;
                  justify-content: flex-end;
                  position: relative;
                  bottom: vww(10);
                  left: 25%;

                  .receive,
                  .forward {
                     width: vww(123);
                     height: vww(48);
                     @include flex;
                     justify-content: center;
                     color: #ffffff;
                     text-align: center;
                     line-height: vww(45);
                  }
               }
               .receive {
                  left: vww(20);
               }
               .forward {
                  width: vww(106);
                  left: vww(140);
                  .button-image {
                     width: 100%;
                     height: 100%;
                     background: url('../../../static/image/banner/transpartent.png') no-repeat;
                     background-size: cover;
                     font-size: 28rpx;
                     font-weight: 300;
                     color: #3b56eb;
                     text-align: center;
                     line-height: vww(45);
                     position: absolute;

                     .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: #ffffff;
                        text-align: center;
                        line-height: vww(45);
                     }
                  }

                  .receive {
                     left: vww(20);
                  }

                  .forward {
                     width: vww(106);
                     left: vww(140);

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

   // 领取弹出框
   .receiverPopup {
      height: vww(110);
      // 领取弹出框
      .receiverPopup {
         height: vww(110);

      .receiverPopup__title {
         margin: vww(10) auto 0;
         width: 80%;
         text-align: center;
      }

      .receiverPopup__input {
         width: 80%;
         margin: vww(10) auto 0;

         .u-input {
            border: 1px solid #dddddd;
         .receiverPopup__title {
            margin: vww(10) auto 0;
            width: 80%;
            text-align: center;
         }
      }

      &__btn {
         margin: vww(10) auto;
         width: 50%;
         .u-button {
            height: vww(20);
         .receiverPopup__input {
            width: 80%;
            margin: vww(10) auto 0;

            .u-input {
               border: 1px solid #dddddd;
            }
         }

         &__btn {
            margin: vww(10) auto;
            width: 50%;

            .u-button {
               height: vww(20);
            }
         }
      }
   }
}
</style>
</style>