qingyiay
2023-05-16 72935b2a35765bcc3622561bb06f2eccd64caf83
pages/public-page/forward/forward.vue
@@ -1,37 +1,62 @@
<template>
   <!-- 转发 -->
   <view class="forward">
      <view v-if="roleType == 1"><u-notice-bar :text="text" :fontSize="30" mode="link"></u-notice-bar></view>
      <view v-else-if="roleType == 2"><u-notice-bar :text="text1" :fontSize="30" mode="link"></u-notice-bar></view>
      <view class="forward-card" v-for="(val, index) in jhOrderPlanForwardList" :key="index">
         <u--form labelPosition="top" :model="forwardForm" ref="form1">
            <u-form-item label="转发对象" labelWidth="20%" ref="item1" @click="forwardObjectClick(index)">
               <u--input v-model="val.name" placeholder="点击选择转发对象" :readonly="true"></u--input>
            </u-form-item>
            <u-form-item label="输入数量" labelWidth="20%" ref="item1">
               <view class="forward-card-amount">
                  <view class="forward-card-amount-input">
                     <u--input
                        v-model="val.carNum"
                        placeholder="请输入转发数量"
                        @input="debouncecarNumInput(index, val.carNum)"
                        @blur="blurInput(index, val.carNum)"
                     ></u--input>
                  </view>
                  <u-checkbox-group v-model="val.checkboxValue1" placement="column" @change="v => checkboxChange(v, index, val)">
                     <u-checkbox :customStyle="{ marginBottom: '8px' }" size="30" labelSize="30" label="全部转发" name="全部转发" :disabled="val.ischecked"></u-checkbox>
                  </u-checkbox-group>
               </view>
            </u-form-item>
            <u-form-item><u-button text="删除本组" :hairline="false" type="error" @click="deleteGroup(index, val)"></u-button></u-form-item>
         </u--form>
      <view class="forward-banner">
         <view class="banner-block">
            <view class="arrow-left" @click="back"><u-icon name="arrow-left" size="40" color="#ffffff"></u-icon></view>
            <view class="forward-text">转发</view>
         </view>
      </view>
      <view v-if="roleType == 1" class="notice-bar">
         <u-notice-bar :text="text" :fontSize="30"></u-notice-bar>
         <view
            class="notice-icon"
            style="background: url('https://mx.jzeg.cn:9095/appimg/image/banner/notice.png') no-repeat;background-size: cover; width: 42rpx;height: 42rpx;"
         ></view>
      </view>
      <view v-else-if="roleType == 2" class="notice-bar"><u-notice-bar :text="text1" :fontSize="30"></u-notice-bar></view>
      <view class="card-main">
         <view class="card-block">
            <view class="forward-card" v-for="(val, index) in jhOrderPlanForwardList" :key="index">
               <u-swipe-action>
                  <u-swipe-action-item :options="options1" @click="deleteGroup(index, val)" :index="index" :name="val.xsUserId || val.fleetId">
                     <view class="card-content">
                        <u--form labelPosition="left" :model="forwardForm" ref="form1">
                           <u-form-item label="转发对象" labelWidth="21%" ref="item1" @click="forwardObjectClick(index)">
                              <u--input v-model="val.name" placeholder="点击选择转发对象" :readonly="true" border="bottom"></u--input>
                           </u-form-item>
                           <u-form-item label="输入数量" ref="item2" labelWidth="21%">
                              <view class="forward-card-amount">
                                 <view class="forward-card-amount-input">
                                    <u--input
                                       v-model="val.carNum"
                                       placeholder="请输入转发数量"
                                       @input="debouncecarNumInput(index, val.carNum)"
                                       @blur="blurInput(index, val.carNum)"
                                       border="bottom"
                                    ></u--input>
                                 </view>
                                 <u-checkbox-group v-model="val.checkboxValue1" placement="column" @change="v => checkboxChange(v, index, val)">
                                    <u-checkbox size="30" shape="circle" labelSize="30" label="全部转发" name="全部转发" :disabled="val.ischecked"></u-checkbox>
                                 </u-checkbox-group>
                              </view>
                           </u-form-item>
                           <!-- <u-form-item><u-button text="删除本组" :hairline="false" type="error" @click="deleteGroup(index, val)"></u-button></u-form-item> -->
                        </u--form>
                     </view>
                  </u-swipe-action-item>
               </u-swipe-action>
            </view>
         </view>
      </view>
      <view class="utils-buttonGroup">
         <!-- 添加按钮 -->
         <view class="AdddBtn"><u-button text="添加" :hairline="false" @click.stop="addForm" :disabled="whetherClick"></u-button></view>
         <!-- 提交按钮 -->
         <view class="forwardBtn"><u-button text="提交" :hairline="false" type="warning" @click.stop="submitForm" :disabled="whetherClick1"></u-button></view>
      </view>
      <!-- 增加按钮 -->
      <view class="AdddBtn">
         <u-button text="添加" :hairline="false" type="primary" :customStyle="{ marginBottom: '8px' }" @click="addForm" :disabled="whetherClick"></u-button>
      </view>
      <!-- 按钮 -->
      <view class="forwardBtn"><u-button text="提交" :hairline="false" type="warning" @click="submitForm" :disabled="whetherClick1"></u-button></view>
      <!-- 选择货代或车队弹出框 -->
      <view class="selectHuoDaiOrFleet-container">
@@ -146,7 +171,16 @@
         // 个人转发数据
         personalForward: {},
         whetherClick: false,
         whetherClick1: false
         whetherClick1: false,
         // 滑动单元格配置
         options1: [
            {
               text: '删除',
               style: {
                  backgroundColor: '#FB0101'
               }
            }
         ]
      };
   },
   onShow() {
@@ -168,6 +202,12 @@
      }
   },
   methods: {
      // 返回上一页
      back() {
         uni.navigateBack({
            delta: 1
         });
      },
      init() {
         switch (this.roleType) {
            case 1:
@@ -235,7 +275,7 @@
               this.calculate(this.jhOrderPlanForwardList);
            }
            if (this.roleType == 2) {
               this.jhOrderPlanForwardList[index].carNum = this.allrelay(this.forwardSurplus, this.jhOrderPlanForwardList[index].carNum);
               this.jhOrderPlanForwardList[index].carNum = this.allrelay(this.carNumSurplusHuodai, this.jhOrderPlanForwardList[index].carNum);
               this.calculate(this.jhOrderPlanForwardList);
            }
            // 选择一个后其余禁止复选
@@ -319,15 +359,26 @@
               this.whetherClick1 = true;
            }
         }
         return total;
         if (this.roleType == 2) {
            if (this.carNum >= total) {
               this.carNumSurplusHuodai = this.carNum - total;
               this.whetherClick = false;
               this.whetherClick1 = false;
            } else {
               this.carNumSurplusHuodai = 0;
               this.$u.toast('剩余提煤单数量不足');
               this.whetherClick = true;
               this.whetherClick1 = true;
            }
         }
      },
      debouncecarNumInput(index, value) {
         let time;
         let that = this;
         that.$set(that.jhOrderPlanForwardList[index], 'carNum', Number(value));
         return (function() {
            if (!time) {
               time = setTimeout(() => {
                  that.$set(that.jhOrderPlanForwardList[index], 'carNum', Number(value));
                  that.calculate(that.jhOrderPlanForwardList);
                  time = null;
               }, 800);
@@ -368,7 +419,7 @@
      // 删除一组表单
      deleteGroup(index, v) {
         let tempcarNum = v.carNum;
         if (v.id && this.jhOrderPlanForwardList[index].carNum !== tempcarNum) {
         if (v.id) {
            this.$reqPost('deleteForward', { id: v.id }, 'params').then(res => {
               if (res.code === 0) {
                  this.jhOrderPlanForwardList.splice(index, 1);
@@ -433,33 +484,127 @@
</script>
<style lang="scss" scoped>
::v-deep.forward {
   width: 90%;
   margin: 0 auto;
   // 卡片
   .forward-card {
      margin-top: vww(10);
      .notice-bar {
         width: 100%;
         height: vww(24);
@mixin flex {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
/deep/ .u-notice-bar {
   background: rgba(255, 255, 255, 0.3) !important;
   box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(27, 103, 255, 0);
   border-radius: 28rpx;
   .u-notice__content {
      text {
         text-shadow: 3rpx 3rpx 8rpx #4784fe;
         font-size: 24rpx;
         color: #fd1446 !important;
         font-weight: 400;
      }
      .u-form {
         .u-form-item {
            .u-form-item__body {
               .u-form-item__body__right {
                  .u-form-item__body__right__content {
                     .u-form-item__body__right__content__slot {
                        .forward-card-amount {
                           display: flex;
                           justify-content: space-between;
                           align-items: flex-end;
                           .forward-card-amount-input {
                              width: vww(245);
   }
}
/deep/ .u-input {
   border-bottom: 1px solid #c4c4c4;
   width: 458rpx;
}
::v-deep.forward {
   width: 100%;
   margin: 0 auto;
   .forward-banner {
      width: 100%;
      height: 430rpx;
      background: linear-gradient(0deg, #ffffff 0%, #0055fe 100%);
      @include flex;
      justify-content: flex-start;
      overflow: hidden;
      .banner-block {
         width: 50%;
         @include flex;
         position: relative;
         top: -75rpx;
         left: 32rpx;
         .forward-text {
            width: 80rpx;
            font-size: 40rpx;
            font-weight: 400;
            color: #ffffff;
            line-height: 69rpx;
         }
      }
   }
   .notice-bar {
      width: 688rpx;
      height: 56rpx;
      margin: 0 auto;
      position: relative;
      top: -200rpx;
      background: transparent;
      .notice-icon {
         position: absolute;
         top: 21rpx;
         left: 7rpx;
      }
   }
   .card-main {
      width: 100%;
      @include flex;
      justify-content: center;
      position: relative;
      top: -100rpx;
      z-index: 1;
      margin-bottom: vww(40);
      .card-block {
         width: 690rpx;
         @include flex;
         flex-direction: column;
         .forward-card {
            margin-top: vww(10);
            width: 690rpx;
            height: 275rpx;
            background: #ffffff;
            box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15);
            border-radius: 20rpx;
            .card-content {
               width: 612rpx;
               margin-left: 48rpx;
               margin-top: 24rpx;
               // margin: 56rpx 30rpx 70rpx 48rpx;
               .u-form {
                  .u-form-item {
                     .u-form-item__body {
                        .u-form-item__body__left {
                           .u-form-item__body__left__content {
                              .u-form-item__body__left__content__label {
                                 font-weight: 400 !important;
                                 color: #898989 !important;
                                 font-size: 30rpx !important;
                              }
                           }
                        }
                        .u-input {
                           border: 1px solid #dddddd;
                        .u-form-item__body__right {
                           .u-form-item__body__right__content {
                              .u-form-item__body__right__content__slot {
                                 .forward-card-amount {
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: flex-end;
                                    .forward-card-amount-input {
                                       .u-input {
                                          width: 263rpx;
                                       }
                                    }
                                    .u-checkbox-group {
                                       position: relative;
                                       top: vww(8);
                                       left: vww(4);
                                       .u-checkbox {
                                          .u-checkbox__icon-wrap {
                                             border-color: rgba(42, 97, 255, 1) !important;
                                          }
                                       }
                                    }
                                 }
                              }
                           }
                        }
                     }
                  }
@@ -467,21 +612,41 @@
            }
         }
      }
      .forward-card-amount {
         display: flex;
   }
   .utils-buttonGroup {
      width: 610rpx;
      @include flex;
      position: fixed;
      bottom: vww(30);
      left: vww(30);
      z-index: 3;
      .AdddBtn,
      .forwardBtn {
         width: 290rpx;
      }
      .AdddBtn {
         .u-button {
            height: 74rpx;
            border: 1px solid #3b56eb;
            border-radius: 37rpx 37rpx 37rpx 37rpx;
            background: transparent;
            color: #3b56eb;
         }
      }
      .forwardBtn {
         .u-button {
            height: 74rpx;
            color: #ffffff;
            background: rgba(73, 123, 251, 1);
            border: 0;
            border-radius: 37rpx 37rpx 37rpx 37rpx;
         }
      }
   }
   .forwardBtn {
      width: 100%;
      // position: fixed;
      bottom: vww(50);
   }
   .selectHuoDaiOrFleet-container {
      .u-popup {
         .u-transition {
            height: 95%;
            height: 80%;
            .u-popup__content {
               overflow: scroll !important;