样式修改

qingyiay

2023-05-09 01e96c8855927df67ac8a6831e345b6cb33140d1

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

@@ -19,17 +19,23 @@
                     </view>
                  </view>
                  <view class="second-line">
                     <view class="coal-name">{{ item.coalName }}</view>
                     <view class="black-block"></view>
                     <view class="coal-type" v-if="item.orderType">{{ item.orderType }}</view>
                     <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="third-line">
                     <view class="time-icon"><u-icon name="clock" color="#515151" size="40"></u-icon></view>
                     <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>
                     </view>
                     <view class="send-date">{{ item.sendDate }}</view>
                  </view>
                  <view class="fourth-line">
                     <u-button @tap.stop="receiveClick(item)" text="领取" type="primary" v-if="item.carNum - item.cars2 != 0" shape="circle"></u-button>
                     <u-button text="转发" type="primary" @tap.stop="forwardClick(item)" shape="circle"></u-button>
                     <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>
               </view>
            </view>
@@ -45,30 +51,38 @@
                        <view class=""><u-icon name="arrow-right" color="#999999" size="40"></u-icon></view>
                     </view>
                     <view class="second">
                        <view class="">{{ item.coalName || '' }}</view>
                        <view class="coal-name">{{ item.coalName || '' }}</view>
                        <view class="order-type">{{ item.orderType || '' }}</view>
                     </view>
                     <view class="third">
                        <view class="third-line">
                           <view class="third-line_text">领取数：</view>
                           <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_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>
                        <view class="third-line">
                           <view class="third-line_text">提煤单个数：：</view>
                           <view class="third-line_text">提煤单个数:</view>
                           <view class="third-line_num">{{ item.tmCount }}</view>
                        </view>
                     </view>
                     <view class="fourth">
                        <view class="fourth-icon"><u-icon name="clock" color="#999999" size="40"></u-icon></view>
                        <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>
                        </view>
                        <view class="senddate">{{ item.sendDate }}</view>
                     </view>
                     <view class="fourth">
                        <view class="fourth-icon"><u-icon name="clock" color="#999999" size="40"></u-icon></view>
                        <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>
                        </view>
                        <view class="senddate">{{ item.orderCode }}</view>
                     </view>
                  </view>
@@ -162,17 +176,19 @@
      },
      // 获取历史提煤单
      getJhOrderPlanDataPage() {
         this.loading = true;
         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');
                  this.loading = false;
                  uni.hideLoading();
               } else {
                  this.historyCoalData = res.data.records;
                  this.loading = false;
                  uni.hideLoading();
               }
            }
         });
@@ -236,15 +252,6 @@
      },
      // 提煤单详情
      cardBodyClick(v) {
         // console.log(name, 'name');
         // let code = null;
         // let cars2 = null;
         // this.orderPlanData.forEach(item => {
         //    if (item.id == name) {
         //       code = item.code;
         //       cars2 = item.cars2;
         //    }
         // });
         uni.navigateTo({ url: `/pages/customer-page/customer-index/fayunPlanDetails/fayunPlanDetails?orderPlanId=${v.id}&code=${v.code}&cars2=${v.cars2}` });
      },
      // 点击历史提煤单获取详情
@@ -314,7 +321,7 @@
         margin: vww(10) vww(10) 0;
      }
      .second {
         width: 50%;
         width: 100%;
         height: 31rpx;
         font-size: 30rpx;
         font-family: Microsoft YaHei;
@@ -322,6 +329,12 @@
         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;
@@ -350,7 +363,7 @@
         }
      }
      .fourth {
         width: 50%;
         width: 100%;
         height: 31rpx;
         font-size: 30rpx;
         font-family: Microsoft YaHei;
@@ -358,6 +371,14 @@
         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;
         }
      }
   }
}
@@ -412,13 +433,14 @@
               }
            }
            .second-line {
               width: 60%;
               width: 100%;
               height: vww(30);
               margin-left: vww(12);
               display: flex;
               justify-content: space-evenly;
               align-items: center;
               justify-content: flex-start;
               .coal-name {
                  width: 30%;
                  flex-grow: 1;
                  height: 30rpx;
                  font-size: 30rpx;
                  font-family: Microsoft YaHei;
@@ -426,20 +448,23 @@
                  color: #515151;
                  position: relative;
                  display: flex;
                  justify-content: space-between;
               }
               .black-block {
                  width: 2rpx;
                  height: 30rpx;
                  background: #515151;
               }
               .coal-type {
                  width: 24%;
                  height: 30rpx;
                  font-size: 30rpx;
                  font-family: Microsoft YaHei;
                  font-weight: 300;
                  color: #515151;
                  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-family: Microsoft YaHei;
                     font-weight: 300;
                     color: #515151;
                  }
               }
            }
            .third-line {
@@ -447,9 +472,10 @@
               height: vww(30);
               margin-left: vww(15);
               display: flex;
               justify-content: space-between;
               justify-content: flex-start;
               align-items: center;
               .send-date {
                  margin-left: vww(14);
                  width: 148rpx;
                  height: 24rpx;
                  line-height: 24rpx;
@@ -460,15 +486,50 @@
               }
            }
            .fourth-line {
               width: 40%;
               width: 100%;
               height: vww(30);
               @include flex;
               justify-content: flex-start;
               position: relative;
               left: 60%;
               bottom: vww(10);
               .u-button {
                  width: vww(50);
                  height: vww(30);
               left: 25%;
               .receive,
               .forward {
                  width: vww(123);
                  height: vww(48);
                  @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-family: Microsoft YaHei;
                     font-weight: 300;
                     color: #ffffff;
                     text-align: center;
                     line-height: vww(45);
                  }
               }
               .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-family: Microsoft YaHei;
                     font-weight: 300;
                     color: #3b56eb;
                     text-align: center;
                     line-height: vww(45);
                  }
               }
            }
         }