feat:图片替换线上地址

yangan

2024-03-05 e3d1f9bfba4b8f18b7a4ac9dde377ded204c2fe9

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

@@ -1,6 +1,8 @@
<template>
    <div class="warp">
        <div class="warp-box">
    <div class="warp" :style="{ backgroundImage: `url(${onlineurl}/appimg/image/banner/diverbanner.png)`, backgroundSize: 'contain', backgroundRepeat: 'no-repeat' }">
        <scroll-view 
        scroll-y class="page"  @scroll="onScroll">
            <div class="warp-box">
               <!-- 当前的订单 -->
                <!-- 占位 -->
                <div v-if="loading" class="ingOrderBox"></div>
@@ -52,12 +54,20 @@
                  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="25"></u-icon></view>
                     <view class="send-date">{{ item.yuYueSection }}</view>
                     <view class="send-date">{{ item.yuYueTime }}</view>
                    </div>
                    <div class="twoRight">
                        <u-tag :text="item.coalName" plain> </u-tag>
@@ -68,9 +78,11 @@
                    <span class="more" @click="todoHistory">MORE>></span>
                </div>
            </div>
           
             <!-- 蒙层 -->
  
            <!-- 九宫格 -->
             <view class="gridBox" >
            <view class="gridBoxBg no-right no-left">
                <view class="gridBox" >
                <u-grid
                :border="false"
                col="4"
@@ -82,10 +94,12 @@
                    
                 >
                 <u--image :showLoading="true" :src="listItem.src" width="50px" height="50px"   @click="gridClick(listItem)"></u--image>
                 <text class="grid-text">{{listItem.title}}</text>
                 <text class="grid-text" >{{listItem.title}}</text>
            </u-grid-item>
        </u-grid>
            </view>
            </view>
            
            <!-- 立即抢单 -->
            <div class="orderGrabbing" v-for="item,i in driverBillOfLoadingData.list1" :key="i">
                <!-- 第一行 -->
@@ -210,10 +224,10 @@
                    </span>
                </div>
            </div>
            <div v-if="!driverBillOfLoadingData.list3.length"><u-empty
            <!-- <div v-if="!driverBillOfLoadingData.list3.length"><u-empty
            mode="data"
            icon="http://cdn.uviewui.com/uview/empty/data.png"
            textSize="30"></u-empty></div>
            textSize="30"></u-empty></div> -->
            <!-- 通知通告 -->
            <combined-title title="通知公告"></combined-title>
            <div class="tongzhi">
@@ -268,7 +282,11 @@
                  </u-cell>
               </u-cell-group>
            </view>
        </div>
       
    </div>
        </scroll-view>
        <view class="mark"  ref="mark" :style="{  display:markFlag ,top: markFlag ? 0 : '100vh'}">
            </view>
           <!-- 抢单提示模态框 -->
            <view class="qianDanModel">
               <u-modal :show="qiangDanShow"
@@ -291,15 +309,12 @@
    </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,
@@ -328,9 +343,12 @@
      },
      data() {
         return {
                labaIcon,
                newIcon,
                labaIcon:`${onlineurl}/appimg/image/司机端首页/组 27 拷贝 3.jpg`,
                newIcon:`${onlineurl}/appimg/image/司机端首页/组 27.jpg`,
                markFlag:'none',
                noticeModelShow:false,
                garidInitTop:'', //元素初始距离顶部的高度
                screenHeight:'',
                notice:{
                    title:'',
                    content:"",
@@ -356,14 +374,14 @@
                        src: '/static/image/无人值守/司机端首页/组 15(1).jpg',
                        title: '历史订单'
                    },
                    {
                        src: '/static/image/无人值守/司机端首页/组 15(2).jpg',
                        title: '质检'
                    },
                    {
                        src: '/static/image/无人值守/司机端首页/组 15(3).jpg',
                        title: '车队管理'
                    },
                    // {
                    //     src: '/static/image/无人值守/司机端首页/组 15(2).jpg',
                    //     title: '质检'
                    // },
                    // {
                    //     src: '/static/image/无人值守/司机端首页/组 15(3).jpg',
                    //     title: '车队管理'
                    // },
                    {
                        src: '/static/image/无人值守/司机端首页/组 15(4).jpg',
                        title: '关于我们',
@@ -410,6 +428,7 @@
         // this.TourImgList = TourImgList
         this.getLogOn()
          this.getNoticeList();
            this.watchScrollFun();
      },
      onShow() {
         this.init();
@@ -441,7 +460,7 @@

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

@@ -453,11 +472,33 @@
               url: '/pages/public-page/message/message'
            });
                        break;

                        case '合作基地':
                        uni.navigateTo({
               url: '/pages/public-page/cooperationBase/index'
            });
                        break;
                
                    default:
                        break;
                }

            },
            onScroll(e){
                // 监听页面向上滚动事件
                let query = uni.createSelectorQuery().in(this);
                query.select('.gridBox').boundingClientRect(data => {
                    if(this.garidInitTop  && (this.garidInitTop > data.top)){
                        // console.log(data,data.top,   query.select('.mark'));
                        this.$nextTick(() => {
                           this.markFlag = 'block'; //显示
                            });
                    }else{
                        this.$nextTick(() => {
                           this.markFlag = 'none'; //隐藏
                            });
                    }
                }).exec();
            },
         init() {
            this.qiangDanList();
@@ -468,6 +509,16 @@
            loadmore(){
                this.noticePage.current ++;
                this.getNoticeList();

            },
            watchScrollFun(){
                //初始化获取屏幕高度
                const res = uni.getSystemInfoSync();
                let query = uni.createSelectorQuery().in(this);
                query.select('.gridBox').boundingClientRect(data => {
                    this.garidInitTop = data.top;
                }).exec();
                this.screenHeight = res.screenHeight;

            },
            getNoticeList(){
@@ -600,7 +651,7 @@
         },
            todoHistory(){
                uni.navigateTo({
                url: `/pages/driver-page/driver-index/bill-of-lading-details/historicalOrders/index`
                url: `/pages/public-page/historicalOrders/index?historyData=${JSON.stringify( this.driverBillOfLoadingData.list2)}`
                });
            },
            todoNotice(item){
@@ -620,6 +671,9 @@
</script>
<style lang="scss" scoped>
.warp{
    .page{
        z-index: 999;
    }
    width: 100%;
    height:100%;
    display: flex;
@@ -627,25 +681,27 @@
    flex: 1;
    flex-direction: column;
    padding-top: calc(var(--window-top) + 20px);
    background:url('https://mx.jzeg.cn:9095/appimg/image/banner/diverbanner.png')   no-repeat fixed center; 
    background-position: 0rpx 0rpx;
    background-size: 100% 600rpx;
    .warp-box{
     width: 100%;
    height:calc(100vh - 45px);
    height:calc(100vh - 73px);
    z-index: 9;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    // overflow-y: auto;
    margin:  0 auto;
    padding-bottom: 100rpx;
    background-color: unset;
    // 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);
@@ -654,6 +710,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%;
@@ -729,11 +794,11 @@
        .twoLine{
            flex:  0 1 25%;
            width: 92%;
            margin:  35rpx auto;
            margin:   20rpx auto;
            display: flex;
            justify-content: space-between;
            .twoleft{
                width: 325rpx;
              
                display: flex;
                justify-content: space-around;
                align-items: center;
@@ -750,7 +815,6 @@
                }
            }
            .twoRight{
                width: 210rpx;
                display: flex;
                justify-content: space-around;
            }
@@ -761,6 +825,7 @@
            justify-content: flex-end;
            height: 100rpx;
            margin-bottom: 20rpx;
            transform: translateY(-20rpx);
            .more{
                width: 106rpx;
                height: 20rpx;
@@ -778,6 +843,7 @@
        height: 270rpx;
        margin: 0 auto;
        margin-top: 30rpx;
        margin-bottom: 30rpx;
        .grid-text{
            font-size: 28rpx;
            font-family: Microsoft YaHei;
@@ -872,7 +938,7 @@
            display: flex;
            justify-content: space-between;
            .twoleft{
                width: 200rpx;
                
                display: flex;
                justify-content: space-around;
                align-items: center;
@@ -914,6 +980,7 @@
                font-family: Microsoft YaHei;
                font-weight: 300;
                margin-right: 20rpx;
               
                .qiangdanBtn{
                    width: 230rpx;
                    height:60rpx;
@@ -1018,7 +1085,7 @@
            display: flex;
            justify-content: space-between;
            .twoleft{
                width: 200rpx;
               
                display: flex;
                justify-content: space-around;
                align-items: center;
@@ -1027,6 +1094,10 @@
                    font-family: Microsoft YaHei;
                    font-weight: 300;
                    color: #515151;
                }
                span{
                    font-size: 28rpx;
                    margin-left: 10rpx;
                }
            }
            .twoRight{
@@ -1116,6 +1187,29 @@
    }
 
}
.gridBoxBg{
    // box-shadow:0 0 10px 10px #9fb1c5;
    width: 92%;
    margin:  10rpx auto;


}
.mark{
    height: calc(100vh - 60vh);
    background-color: #ccc;
    position: absolute;
    bottom: 0;
    width: 100%;
    left :0;
    z-index: 1;
    opacity: 0.6;
    transition:  2.5s all ;
}
// .no-right {
//     /* .left-top, .left-bottom 组合 */
//     box-shadow: -5px -5px 10px -4px #fff, -5px 5px 10px -4px #fff;
//   }
//   .no-left {
//     /* .right-bottom, .right-top 组合 */
//     box-shadow: 5px 5px 10px -4px #fff, 5px -5px 10px -4px #fff;
//   }
</style>