feat:换肤代码提交

yangan

2024-01-31 adc14180ebdc6b3a5251034a0693289dfa015161

 pages/driver-page/driver-index/test-index.vue

@@ -1,8 +1,12 @@
<template>
    <div class="warp">
        <div class="warp-box">
            <!-- 当前的订单 -->
            <div class="ingOrder">
               <!-- 当前的订单 -->
                <!-- 占位 -->
                <div v-if="loading" class="ingOrderBox"></div>
                <div class="ingOrder" v-for="item,i in driverBillOfLoadingData.list2" :key="i" v-if="i == 0"
                @click="list3CardIconClick(item)"
                >
                <!-- 第一行 -->
                <div class="firstLine">
                    <div class="leftIcon">
@@ -15,52 +19,83 @@
                        </div>
                    </div>
                    <div class="centerTitle">
                        <p>无人值守仓库</p>
                        <view class="filedname exceedHide">
                  <text
                     v-if="item.orderType == '外销' || item.orderType == '内销' ">{{ item.deptName }}</text>
                     <text
                     v-else-if="item.orderType == '外购' || item.orderType == '内购' ">{{ item.customerName }}</text>
                     <text v-else-if="item.orderType == '转出'||item.orderType == '转入'">
                     {{item.filedName}}
                  </text>
                  </view>
                        <p class="centerLine"></p>
                        <p>极易净水科技(上海)有限公司</p>
                        <view class="filedname exceedHide">
                     <text
                  v-if="item.orderType == '外销' || item.orderType == '内销' ">{{ item.customerName }}</text>
                  <text
                  v-else-if="item.orderType == '外购' || item.orderType == '内购'">{{ item.deptName }}</text>
                  <text v-else-if="item.orderType == '转出'||item.orderType == '转入'">
                  {{item.toFiledName}}
               </text>
               </view>
                    </div>
                    <div class="rightIcon">
                        <u-icon name="map"
                   color="#4978F0"
                  size="40"></u-icon>
                        <u-icon name="map"
                         @click.stop="skipMap(item)"
                  size="40"></u-icon
                        >
                        <u-icon 
                        @click.stop="skipMap(item)"
                        name="map"
                   color="#4978F0"
                  size="40"></u-icon>
                    </div>
                </div>
                <div class="statusBox">
                    <view class="status">
            <u-tag :text="coalStatus[item.statusWeigh] || ''"
            plain>
            </u-tag>
          </view>
                </div>
                
                <div class="twoLine">
                    <div class="twoleft">
                     <view class="time-icon"><u-icon name="clock"
                           color="#515151"
                           size="30"></u-icon></view>
                     <view class="send-date">2023-4-24</view>
                           size="25"></u-icon></view>
                     <view class="send-date">{{ item.yuYueSection }}</view>
                    </div>
                    <div class="twoRight">
                        <u-tag text="煤泥" plain> </u-tag>
                        <u-tag text="外销" plain> </u-tag>
                        <u-tag :text="item.coalName" plain> </u-tag>
                        <u-tag :text="item.orderType" plain> </u-tag>
                    </div>
                </div>
                <div class="threeLine">
                    <span class="more">MORE>></span>
                    <span class="more" @click="todoHistory">MORE>></span>
                </div>
            </div>
           
            <!-- 九宫格 -->
             <view class="gridBox">
             <view class="gridBox" >
                <u-grid
                :border="false"
                col="4"
                v-if="!loading"
                 >
              <u-grid-item
                    v-for="(listItem,listIndex) in list"
                    :key="listIndex"
                    
                 >
                 <u--image :showLoading="true" :src="listItem.src" width="50px" height="50px" @click="click"></u--image>
                 <u--image :showLoading="true" :src="listItem.src" width="50px" height="50px"   @click="gridClick(listItem)"></u--image>
                 <text class="grid-text">{{listItem.title}}</text>
            </u-grid-item>
        </u-grid>
            </view>
            <!-- 立即抢单 -->
            <div class="orderGrabbing">
            <div class="orderGrabbing" v-for="item,i in driverBillOfLoadingData.list1" :key="i">
                <!-- 第一行 -->
                <div class="firstLine">
                    <div class="leftIcon">
@@ -73,23 +108,39 @@
                        </div>
                    </div>
                    <div class="centerTitle">
                        <p>无人值守仓库</p>
                        <view class="filedname exceedHide">
                     <text
                     v-if="item.orderType == '外销' || item.orderType == '内销'  ">{{ item.deptName|| ''  }}</text>
                     <text
                     v-else-if="item.orderType == '外购' || item.orderType == '内购' ">{{ item.customerId?item.customerName:item.customerNameCopy|| ''  }}</text>
                     <text v-else-if="item.orderType == '转出'|| item.orderType == '转入'">{{item.filedName}}
                     </text>
                  </view>
                        <p class="centerLine"></p>
                        <p>极易净水科技(上海)有限公司</p>
                        <view class="filedname exceedHide">
               <text v-if="item.orderType == '外销' || item.orderType == '内销' ">
               {{ item.customerNameCopy ? item.customerNameCopy : item.customerName|| ''  }}
               </text>
               <text
               v-else-if="item.orderType == '外购' || item.orderType == '内购' ">{{ item.deptName|| ''  }}</text>
               <text
               v-else-if="item.orderType == '转出'|| item.orderType == '转入'">{{item.toFiledName}}
               </text>
               </view>
                    </div>
                    <div class="rightIcon">
                     <div>
                        <span style="color: #F81414;font-size: 40rpx;font-weight: 400">3</span>
                        <span style="color: #F81414;font-size: 40rpx;font-weight: 400">{{ item.carNum - item.taskNum }}</span>
                        <span style="font-size: 24rpx;color: #C78A64;font-weight: 400;">/</span>
                        <span style="font-size: 24rpx;color: #C78A64;font-weight: 400;">18</span>
                        <span style="font-size: 24rpx;color: #C78A64;font-weight: 400;">{{ item.carNum }}</span>
                     </div>
                    </div>
                </div>
                <div class="twoLine">
                    <div class="twoleft">
                  <span>煤泥</span>
                  <span>{{ item.coalName }}</span>
                        <span>|</span>
                        <span>外销</span>
                        <span>{{ item.orderType }}</span>
                    </div>
                </div>
                <div class="threeLine">
@@ -97,16 +148,18 @@
                        <view class="time-icon"><u-icon name="clock"
                           color="#515151"
                           size="30"></u-icon></view>
                     <view class="send-date">2023-4-24</view>
                     <view class="send-date">{{ item.createTime }}</view>
                    </div>
                    <span class="more">
                        <div class="qiangdanBtn">立即抢单</div>
                        <div     @click.stop="toAppointmentClick(item)" class="qiangdanBtn">立即预约</div>
                    </span>
                </div>
            </div>
            <!-- 待预约提煤单 -->
            <combined-title title="待预约通知单"></combined-title>
            <div class="pendingAppointment">
            <div class="pendingAppointment" v-for="item,i in driverBillOfLoadingData.list3 " :key="i"
            @click.stop="list3CardIconClick(item)"
            >
                <div class="firstLine">
                    <div class="leftIcon">
                        <div class="leftOneDiv">
@@ -118,23 +171,39 @@
                        </div>
                    </div>
                    <div class="centerTitle">
                        <p>无人值守仓库</p>
                        <view class="filedname exceedHide">
                     <text
                     v-if="item.orderType == '外销' || item.orderType == '内销'  ">{{ item.deptName|| ''  }}</text>
                     <text
                     v-else-if="item.orderType == '外购' || item.orderType == '内购' ">{{ item.customerId?item.customerName:item.customerNameCopy|| ''  }}</text>
                     <text v-else-if="item.orderType == '转出'|| item.orderType == '转入'">{{item.filedName}}
                     </text>
                  </view>
                        <p class="centerLine"></p>
                        <p>极易净水科技(上海)有限公司</p>
                        <view class="filedname exceedHide">
               <text v-if="item.orderType == '外销' || item.orderType == '内销' ">
               {{ item.customerNameCopy ? item.customerNameCopy : item.customerName|| ''  }}
               </text>
               <text
               v-else-if="item.orderType == '外购' || item.orderType == '内购' ">{{ item.deptName|| ''  }}</text>
               <text
               v-else-if="item.orderType == '转出'|| item.orderType == '转入'">{{item.toFiledName}}
               </text>
               </view>
                    </div>
                    <div class="rightIcon">
                     <div>
                     <!-- <div>
                        <span style="color: #F81414;font-size: 40rpx;font-weight: 400">3</span>
                        <span style="font-size: 24rpx;color: #C78A64;font-weight: 400;">/</span>
                        <span style="font-size: 24rpx;color: #C78A64;font-weight: 400;">18</span>
                     </div>
                     </div> -->
                    </div>
                </div>
                <div class="twoLine">
                    <div class="twoleft">
                  <span>煤泥</span>
                  <span>{{ item.coalName }}</span>
                        <span>|</span>
                        <span>外销</span>
                        <span>{{ item.orderType }}</span>
                    </div>
                </div>
                <div class="threeLine">
@@ -142,24 +211,102 @@
                        <view class="time-icon"><u-icon name="clock"
                           color="#515151"
                           size="30"></u-icon></view>
                     <view class="send-date">2023-4-24</view>
                     <view class="send-date"> {{ item.createTime }}</view>
                    </div>
                    <span class="more">
                        <div class="qiangdanBtn">立即抢单</div>
                        <div class="qiangdanBtn"    @click.stop="toAppointmentClick(item)">立即预约</div>
                    </span>
                </div>
            </div>
            <div v-if="!driverBillOfLoadingData.list3.length"><u-empty
            mode="data"
            icon="http://cdn.uviewui.com/uview/empty/data.png"
            textSize="30"></u-empty></div>
            <!-- 通知通告 -->
            <combined-title title="通知公告"></combined-title>
            <div class="tongzhi">
            <u-list
            v-if="noticeList && noticeList.length"
            height="280rpx"
            @scrolltolower="scrolltolower"
            pagingEnabled
          >
         <u-list-item
            v-for="(item, index) in noticeList"
            :key="index"
             >
                    <div class="listItem"  @click="todoNotice(item)">
                     
                    <div class="listItemTop">  
                         <u-avatar
                  slot="icon"
                  shape="square"
                  size="35"
                  :src="item.url"
                  customStyle="margin: -3px 5px -3px 0"
               ></u-avatar>
                     <div v-html="item.title"></div></div>
                 
                    <span class="listDate">{{ item.createTime }}</span>
                    </div>
         </u-list-item>
          </u-list>
            <u-empty
            v-if="!noticeList.length"
             mode="data"
             icon="http://cdn.uviewui.com/uview/empty/data.png"
             textSize="30"></u-empty>
            </div>
              <!-- 引导页 -->
            <view class="noob-tour"
               v-if="roleType===3&&isFirstLogin">
               <combined-title title="操作指引"></combined-title>
               <u-cell-group>
                  <u-cell title="新手指引"
                     name='1'
                     :clickable="true"
                     @click="noobTour">
                     <u-badge type="primary"
                        value="01"
                        slot='icon'></u-badge>
                     <u-icon slot="value"
                        name="arrow-right"
                        size="30"
                        color="#b8b8b8"></u-icon>
                  </u-cell>
               </u-cell-group>
            </view>
        </div>
           <!-- 抢单提示模态框 -->
            <view class="qianDanModel">
               <u-modal :show="qiangDanShow"
                  :title="qiangDanTitle"
                  showCancelButton
                  :content="qiangDanContent"
                  @confirm="qiangDanConfirm"
                  @cancel="qiangDanCancel"></u-modal>
            </view>
                <!-- 图片预览弹出框 -->
            <view class="previewImage-container">
               <previewImage ref="previewImage"
                  :imgs="driverTourImgList"
                  :saveBtn='false'></previewImage>
            </view>
                <!-- 通知公告 -->
                <u-modal :show="noticeModelShow" :title="notice.title" @confirm="noticConfirm" >
                <div v-html="notice.content"></div>
                </u-modal>
    </div>
</template>
<script>
   import { customerId } from '@/utils/status';
   import { onlineurl } from '@/api/request.js'
   import { BaseUrl } from '@/api/publicInterface.js'
    import combinedTitle from '@/components/combined-title/combined-title.vue';
   import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue';
   import { mapState } from 'vuex';
   import { Debounce } from '../../../utils/util';
    import labaIcon from '@/static/image/无人值守/司机端首页/组 27 拷贝 3.jpg'
    import newIcon from '@/static/image/无人值守/司机端首页/组 27.jpg'
   export default {
      components: {
         combinedTitle,
@@ -188,6 +335,26 @@
      },
      data() {
         return {
                labaIcon,
                newIcon,
                noticeModelShow:false,
                notice:{
                    title:'',
                    content:"",
                },
                noticeList: [],
                urls: [
               'https://cdn.uviewui.com/uview/album/1.jpg',
               'https://cdn.uviewui.com/uview/album/2.jpg',
               'https://cdn.uviewui.com/uview/album/3.jpg',
               'https://cdn.uviewui.com/uview/album/4.jpg',
               'https://cdn.uviewui.com/uview/album/5.jpg',
               'https://cdn.uviewui.com/uview/album/6.jpg',
               'https://cdn.uviewui.com/uview/album/7.jpg',
               'https://cdn.uviewui.com/uview/album/8.jpg',
               'https://cdn.uviewui.com/uview/album/9.jpg',
               'https://cdn.uviewui.com/uview/album/10.jpg',
            ],
                list: [{
                        src: '/static/image/无人值守/司机端首页/组 15.jpg',
                        title: '合作基地'
@@ -196,17 +363,17 @@
                        src: '/static/image/无人值守/司机端首页/组 15(1).jpg',
                        title: '历史订单'
                    },
                    {
                        src: '/static/image/无人值守/司机端首页/组 15(2).jpg',
                        title: '质检'
                    },
                    // {
                    //     src: '/static/image/无人值守/司机端首页/组 15(2).jpg',
                    //     title: '质检'
                    // },
                    {
                        src: '/static/image/无人值守/司机端首页/组 15(3).jpg',
                        title: '车队管理'
                    },
                    {
                        src: '/static/image/无人值守/司机端首页/组 15(4).jpg',
                        title: '关于我们'
                        title: '关于我们',
                    },
                    {
                        src: '/static/image/无人值守/司机端首页/组 14.jpg',
@@ -228,6 +395,11 @@
            },
            // 抢单模态框
            qiangDanShow: false,
                noticePage:{
                current:1,
                page:10,
                },
                
            qiangDanTitle: '抢单提示',
            qiangDanContent: '',
            qiangDanOrderPlanId: null,
@@ -237,16 +409,18 @@
            coalStatus: ['未称重', '称重中', '验质中', '称重完成', '处理完成'],
            onlineurl,
            phone: "",
                loading:true,
            isFirstLogin: true //是否是第一次登录
         };
      },
      mounted() {
         // this.TourImgList = TourImgList
         this.getLogOn()
			
          this.getNoticeList();
      },
      onShow() {
         this.init();
        
      },
      methods: {
         // 跳转地图
@@ -257,9 +431,82 @@
            }`
            });
         },
            gridClick(item){
                console.log(item,'1231')
                switch (item.title) {
                    case '关于我们':
                    uni.navigateTo({
               url: `/pages/public-page/aboutus/index`
                });
                        break;

                     case '数据统计':
                    uni.navigateTo({
               url: `/pages/public-page/dataStatistics/index`
                });
                    break;

                     case '历史订单':
                    uni.navigateTo({
                url: `/pages/driver-page/driver-index/bill-of-lading-details/historicalOrders/index?historyData=${JSON.stringify(this.driverBillOfLoadingData.list2)}`
                });
                        break;  

                        case '操作指南':
                     this.noobTour();
                        break; 
                        case '消息':
                        uni.navigateTo({
               url: '/pages/public-page/message/message'
            });
                        break;
                
                    default:
                        break;
                }

            },
         init() {
            this.qiangDanList();
         },
            scrolltolower() {
            this.loadmore()
         },
            loadmore(){
                this.noticePage.current ++;
                this.getNoticeList();

            },
            getNoticeList(){
                this.$reqGet('noticeList',{...this.noticePage,isNotice:'1'}).then(res => {
               console.log(res,'resresres')
                    if(res.code == 0){
                        let result =  res.data.records;
                        if(result.length){
                            this.noticeList =   this.noticeList.concat(result)
                        }else{
                            //否则就是空
                            
                        }

                      let arr =  this.noticeList.sort((a,b)=>{
                        return new Date(a) - new Date(b);
                       })
                       console.log(arr)
                       this.noticeList = arr.map((item,i)=>{
                        if(i == 0){
                            item.url = this.newIcon

                        }else{
                            item.url = this.labaIcon
                        }
                        return item
                       });
                    
                    }
            })

            },
         // 司机首页列表
         qiangDanList() {
            uni.showLoading({
@@ -268,7 +515,10 @@
            this.$reqGet('qiangDanList').then(res => {
               uni.hideLoading();
               this.driverBillOfLoadingData = res.data;
            });
                    this.loading = false;
            }).finally(() => {
                    this.loading = false;
                })
         },
         // 抢单按钮
         qiangDanBtn:Debounce(function(value){
@@ -355,6 +605,23 @@
               });
            })
         },
            todoHistory(){
                uni.navigateTo({
                url: `/pages/driver-page/driver-index/bill-of-lading-details/historicalOrders/index`
                });
            },
            todoNotice(item){
                console.log(item,'item')
                if(item){
                    this.noticeModelShow = true;
                    this.notice = item;
                }

            },
            noticConfirm(){
                this.noticeModelShow = false;
            }
            
      }
   };
</script>
@@ -377,9 +644,15 @@
    flex-direction: column;
    overflow-y: auto;
    margin:  0 auto;
    padding-bottom: 100rpx;
    .ingOrderBox{
        width: 94%;
        height: 30%;
        transform: translateY(20%);
    }
    .ingOrder{
        width: 94%;
        height: 330rpx;
        height: 380rpx;
        margin:  0 auto;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73,120,240,0.14), 0rpx 7rpx 45rpx 0rpx rgba(73,120,240,0.12);
@@ -388,6 +661,15 @@
        display: flex;
        flex-direction: column;
        padding-top: 20rpx;
        .statusBox{
            width: 94%;
            margin: 0 auto;
            margin-top: 20rpx;
        }
        .status{
            display: flex;
            width: 150rpx;
        }
       
        .firstLine{
            flex:  0 1 60%;
@@ -463,16 +745,16 @@
        .twoLine{
            flex:  0 1 25%;
            width: 92%;
            margin:  35rpx auto;
            margin:   20rpx auto;
            display: flex;
            justify-content: space-between;
            .twoleft{
                width: 200rpx;
                width: 325rpx;
                display: flex;
                justify-content: space-around;
                align-items: center;
                .send-date{
                    font-size: 28rpx;
                    font-size: 25rpx;
                    font-family: Microsoft YaHei;
                    font-weight: 300;
                    color: #515151;
@@ -495,6 +777,7 @@
            justify-content: flex-end;
            height: 100rpx;
            margin-bottom: 20rpx;
            transform: translateY(-20rpx);
            .more{
                width: 106rpx;
                height: 20rpx;
@@ -648,6 +931,7 @@
                font-family: Microsoft YaHei;
                font-weight: 300;
                margin-right: 20rpx;
               
                .qiangdanBtn{
                    width: 230rpx;
                    height:60rpx;
@@ -778,12 +1062,13 @@
            justify-content: space-between;
            align-items: center;
            .date{
              width: 200rpx;
              width: 300rpx;
              display: flex;
              align-items: center;
              justify-content: space-around;
              .send-date{
                     font-size: 28rpx;
                width: 260rpx;
                     font-size: 25rpx;
                    font-family: Microsoft YaHei;
                    font-weight: 300;
                    color: #515151;
@@ -811,6 +1096,41 @@
            }
        }
    }
    .tongzhi{
        width: 94%;
        margin: 0 auto;
        height: 280rpx;
        // background-color: #fff;
        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;
        transform: translateY(-10rpx);
    }
    .listItem{
        display: flex;
        align-items: center;
        height: 80rpx;
        width: 94%;
        justify-content: space-between;
        border-bottom: solid 1px #E3E3E3;
        margin:  0 auto;
        margin-top: 20rpx;
        .listDate{
            font-size: 24rpx;
            font-family: Microsoft YaHei;
            font-weight: 300;
            color: #6E6E6E;
        }
        .listItemTop{
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 28rpx;
            white-space: nowrap; 
            text-overflow:ellipsis; 
            overflow:hidden; 
        }

    }
    }
 
}