注册 登录
问题哥
问题哥
  • 发布：2025-07-04 11:43
  • 更新：2025-07-04 17:54
  • 阅读：122

subNvue 页面 请求下来了 视图不更新

分类：nvue

<template>
<view id="mapOverlay"> <!-- 必须与配置的id一致 -->
<view class="navBox" :style="{'height':height+'px'}">
<view class="status_bar" :style="{'height':statusBarHeight+'px'}">
</view>
<view class="navName" :style="{height: navBarHeight+'px',lineHeight: navBarHeight+'px'}">
<view class="back" @click="back">
<image class="backIcon" src="@/static/images/role/back.png" mode=""></image>
</view>
<text class="name" :style="{height: navBarHeight+'px',lineHeight: navBarHeight+'px'}">
查看轨迹
</text>
</view>
</view>
<view class="mask">
<view class="mask_inside">
<text class="mask_title_text">
在途车辆总数： 

            </text>  
            <view class="mask_item_box">  
                <view class="mask_item" v-for="(item,index) in maskList" :key="index"  
                    :style="{background:item.Bgolor}">  
                    <text class="mask_item_text1" :style="{color:item.textColor}">{{item.count}}车</text>  
                    <text class="mask_item_text2" :style="{color:item.textColor}">{{item.title}}</text>  
                </view>  
            </view>  

        </view>  
    </view>  
    <bab-Touchbox :minHeight="0.4" :maxHeight="0.8" :touchHeight="32" :show-line="false"  
        @maxtHeight="setScrollViewHeight">  
        <view class="minBox" :style="{'height':minHeight+'px'}">  
            <view class="touchBox">  
                <view class="touchBox_tips">  
                    <image case="touchBox_tips_image" src="/PackagesD/static/tips.png" mode=""  
                        style="width: 32rpx;height: 32rpx;margin-right: 14rpx;"></image>  
                    <text class="touchBox_tips_text">点击车辆标识，进入查轨迹，查定位页面，运云礼包可放心查</text>  
                </view>  
            </view>  
            <view class="touchBox_content">  
                <view class="padding_box">  
                    <view class="shipper_check">  
                        <view class="check_input">  
                            <image style="width: 60rpx;height: 60rpx;" src="/PackagesD/static/zhuang.png"></image>  
                            <view class="input_box">  
                                <input style="flex: 1;color: #4C4D66;" type="text" placeholder="请选择装货地" disabled  
                                    v-model="params.shipper_name" @click="checkLoad" />  
                                <image src="/PackagesD/static/clear.png" style="width: 28rpx;height: 28rpx;"  
                                    @click="clear(1)">  
                                </image>  
                            </view>  
                        </view>  
                        <view class="check_input" style="margin-top: 50rpx; ">  
                            <image style="width: 60rpx;height: 60rpx;" src="/PackagesD/static/xie.png"></image>  
                            <view class="input_box">  
                                <input style="flex: 1;color: #4C4D66;" type="text" placeholder="请选择发货地" disabled  
                                    v-model="params.destination" @click="checkunLoad" />  
                                <image src="/PackagesD/static/clear.png" style="width: 28rpx;height: 28rpx;"  
                                    @click="clear(2)">  
                                </image>  
                            </view>  
                        </view>  
                        <view class="check_button" @click="selectCoal"  
                            :class="{'isCheck':params.out_shipper_users_id&&params.destination}">  
                            <text style="font-size: 32rpx;color: #60708E;line-height: 88rpx;text-align: center;"  
                                :class="{'isCheckText':params.out_shipper_users_id&&params.destination}">选择提煤计划</text>  
                        </view>  
                        <view class="more_car">  
                            <text style="font-size: 24rpx;color: #8D6011;margin-right: 12rpx;">更多推荐车源</text>  
                            <image src="/PackagesD/static/more.png" style="width: 28rpx;height: 28rpx;" mode="">  
                            </image>  
                        </view>  
                    </view>  
                    <view class="capacity_package">  
                        <view class="count">  
                            <text style="font-size: 32rpx;color: #fff;">您的运力包剩余</text><text  
                                style="font-size: 48rpx;color: #fff;">0</text><text  
                                style="font-size: 32rpx;color: #fff;">次</text>  
                        </view>  
                        <view class="buy_btn" @click="test">  
                            <text class="buy_btn_text">去购买</text>  
                        </view>  
                    </view>  
                </view>  
            </view>  
        </view>  
        {{carList.length}}  
        <scroll-view scroll-y="true" :style="{'height':scrollViewHeight - 332 +'px'}" style="background: #F0F5F9;">  
            <view class="car_item" v-for="(item,index) in carList" :key="item.id" @click="toCarDetails()">  
                <view class="car_top_info">  
                    <view class="car_number">  
                        <text class="car_number_text">{{item.car_number}}</text>  
                    </view>  
                    <text style="font-size: 32rpx;line-height: 48rpx;">{{item.drivers.name}}</text>  
                    <view class="car_type">   
                        <text class="car_type_text">{{item.type}}</text>  
                    </view>  
                </view>  
                <view class="car_top_info">  
                    <view class="last_time" style="margin-right: 26rpx;">  
                        <text style="font-size: 24rpx;color: #989CAD;">最后上报：</text><text  
                            style="font-size: 24rpx;">{{item.updated_at}}</text>  
                    </view>  
                    <view class="speed">  
                        <image src="/PackagesD/static/address.png" mode=""  
                            style="width: 28rpx;height: 28rpx;margin-left: 12rpx;"></image>  
                        <text style="font-size: 24rpx;">{{ item.location.speed || '--' }}</text>  
                    </view>  
                </view>  
                <view class="car_top_info">  
                    <image src="/PackagesD/static/address.png" mode=""  
                        style="width: 28rpx;height: 28rpx;margin-left: 12rpx;"></image>  
                    <text style="font-size: 24rpx;">{{item.address}}</text>  
                </view>  
            </view>  
        </scroll-view>  
    </bab-Touchbox>  
    <uni-data-picker style="display: none;opacity: 0;" ref="loadList" :localdata="load_list" popup-title="请选择装货地"  
        @change="loadCheck"></uni-data-picker>  
    <uni-data-picker style="display: none;opacity: 0;" ref="unloadList" :localdata="unload_list"  
        popup-title="请选择卸货地" @change="unloadCheck"></uni-data-picker>  
    <uni-popup ref="popup" type="bottom">  
        <view class="pop_box" :style="{'maxHeight':windowHeight * 0.8}">  
            <view class="pip_title">  
                <text style="text-align: center;font-size: 40rpx;color: #2B2A3B;font-weight: bold;">选择提煤计划</text>  
            </view>  
            <scroll-view class="coalList" scroll-y>  
                <view class="coal_item" v-for="(item,index) in coalList" :key="index" @click="checkCoal(item)">  
                    <view class="coal_top">  
                        <text  
                            style="line-height: 80rpx;font-size: 34rpx;">合同编号：{{item.contract.contract_number}}</text>  
                    </view>  
                    <view class="coal_content">  
                        <view class="coal_shipper">  
                            <image src="/PackagesD/static/shou.png" mode="" class="coal_img"></image>  
                            <text class="coal_text">{{item.out_shipper_users.shipper_name}}</text>  
                        </view>  
                        <view class="coal_shipper" style="margin-bottom: 16rpx;">  
                            <image src="/PackagesD/static/fa.png" mode="" class="coal_img"></image>  
                            <text class="coal_text">{{item.get_shipper_users.shipper_name}}</text>  
                        </view>  
                        <view class="coal_shipper" style="margin-bottom: 10rpx;">  
                            <image src="/PackagesD/static/fa.png" class="coal_img" style="opacity: 0;"></image>  
                            <text class="coal_other_text">提煤信息：{{item.goods.full_name}}</text>  
                        </view>  
                        <view class="coal_shipper" style="margin-bottom: 0;">  
                            <image src="/PackagesD/static/fa.png" class="coal_img" style="opacity: 0;"></image>  
                            <text class="coal_other_text">创建时间：{{item.created_at}}</text>  
                        </view>  
                    </view>  
                </view>  

            </scroll-view>  
        </view>  
    </uni-popup>  
</view>

</template>

<script>
import {
mapGetters
} from "vuex"
export default {
data() {
return {
list: {},
windowHeight: 0,
minHeight: 0,
loadData: {},
showload: false,
showunload: false,
load_list: [],
unload_list: [],
coalList: [],
scrollViewHeight: 0, //用于计算滚动区域高度
params: {
out_shipper_users_id: '',
shipper_name: '',
destination: '',
page: 1,
page_size: 999
},
maskList: [{
title: '已领单',
count: 0,
Bgolor: '#F1F5FF',
textColor: '#4E82FF',
status: 1
},
{
title: '排队中',
count: 0,
Bgolor: '#EDFFFC',
textColor: '#3BCAB5',
status: 2
},
{
title: '已入矿',
count: 0,
Bgolor: '#FFF4F6',
textColor: '#EF3360',
status: 3
},
{
title: '已出场',
count: 0,
Bgolor: '#FFF8F4',
textColor: '#FF7618',
status: 4
}
],
carList: []
}
},
components: {},
computed: {
...mapGetters('nav', ['height', 'menuButtonRect', 'statusBarHeight', 'navBarHeight']),
},
onReady() {
this.minHeight = uni.getSystemInfoSync().windowHeight * 0.4
this.windowHeight = uni.getSystemInfoSync().windowHeight
console.log(this.minHeight)
// this.initListener()
this.getLoadAndUnloadList()
},
beforeDestroy() {
uni.$off('initCarList');
},
methods: { 

        getLoadAndUnloadList() {  
            getApp().tui.request('/coalmine/sassApp/underwayManage/getLoadAndUnloadList').then(res => {  
                console.log(res, res.data.load_list.length)  
                if (res.status == 200) {  
                    if (res.data.load_list.length > 0) {  
                        this.load_list = res.data.load_list.map(curr => {  
                            console.log(curr)  
                            let obj = {  
                                value: curr.id,  
                                text: curr.shipper_name,  
                            }  
                            return obj  
                        })  
                        console.log(this.load_list)  
                    }  
                    if (res.data.unload_list.length > 0) {  
                        this.unload_list = res.data.unload_list.map(curr => {  
                            console.log(curr)  
                            let obj = {  
                                value: curr,  
                                text: curr  
                            }  
                            return obj  
                        })  
                        console.log(this.unload_list)  
                    }  
                } else {  
                    uni.showToast({  
                        icon: 'none',  
                        title: res.message  
                    })  
                }  
            })  
        },  
        // 选择提煤计划  
        selectCoal() {  
            if (!this.params.out_shipper_users_id) {  
                uni.showToast({  
                    icon: 'none',  
                    title: '请选择装货地'  
                })  
                return  
            }  
            if (!this.params.destination) {  
                uni.showToast({  
                    icon: 'none',  
                    title: '请选择发货地'  
                })  
                return  
            }  
            // 这里可以添加选择提煤计划的逻辑  
            console.log('选择提煤计划', this.params)  

            getApp().tui.request('/coalmine/sassApp/underwayManage/billOfLoadingList', this.params).then(res => {  
                console.log(res)  
                if (res.data.items && res.data.items.length > 0) {  
                    this.coalList = res.data.items  
                    this.$refs.popup.open()  
                } else {  
                    uni.showToast({  
                        icon: 'none',  
                        title: '暂无提煤计划'  
                    })  
                }  
            })  
        },  
        clear(i) {  
            if (i == 1) {  
                this.$refs.loadList.clear() // `picker` 为组件的 ref 名称  
                this.params.out_shipper_users_id = ''  
                this.params.shipper_name = ''  
            } else {  
                this.$refs.unloadList.clear() // `picker` 为组件的 ref 名称  
                this.params.destination = ''  
            }  
        },  
        mapData() {  
            console.log(this.loadData, '12341234')  
        },  
        checkLoad() {  
            this.$refs.loadList.show() // `picker` 为组件的 ref 名称  
        },  
        checkunLoad() {  
            this.$refs.unloadList.show() // `picker` 为组件的 ref 名称  
        },  
        loadCheck(e) {  
            console.log(e)  
            this.params.out_shipper_users_id = e.detail.value[0].value  
            this.params.shipper_name = e.detail.value[0].text  
            console.log(this.params)  
        },  
        unloadCheck(e) {  
            console.log(e)  
            this.params.destination = e.detail.value[0].value  
        },  
        naveBarTap() {  
            uni.navigateBack()  
        },  
        setScrollViewHeight(val) { //最大高度  
            this.scrollViewHeight = val  
        },  
        naveBarTap() {  
            uni.navigateBack()  
        },  
        toCarDetails() {  
            uni.navigateTo({  
                url: '/PackagesD/inTransitManagement/inTransitManagementCar/inTransitManagementCar'  
            })  
        },  
        async checkCoal(i) {  
            try {  
                const res = await getApp().tui.request('/coalmine/sassApp/underwayManage/underwayCarsList', {  
                    bill_of_loading_id: i.id,  
                    page: 1,  
                    page_size: 999  
                });  
                this.carList=res.data.items  

                this.maskList.forEach(curr => {  
                    switch (curr.status) {  
                        case 1:  
                            curr.count = res.data.get_order_count  
                            break  
                        case 2:  
                            curr.count = res.data.queuing_count  
                            break  
                        case 3:  
                            curr.count = res.data.enter_count  
                            break  
                        case 4:  
                            curr.count = res.data.out_count  
                            break  
                    }  
                })  

                this.$nextTick(() => {  
                      this.$forceUpdate()  

                    console.log('carList updated:', this.carList.length)  
                })  
                if (res.data.items.length > 0) {  
                    uni.$emit('carListF', res.data)  
                    this.$refs.popup.close()  
                } else {  
                    uni.showToast({  
                        icon: 'none',  
                        title: '目前没有在途车辆～'  
                    })  
                    this.$refs.popup.close()  
                }  
            } catch (err) {  
                console.error(err);  
            }  
        }  

    }  
}

</script>

<style>
/ 使用 Flex 布局（nvue 仅支持 Flex） /

mapOverlay {

    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
}  

.navBox {  
    padding-right: 94px;  
    width: 750px;  
    display: flex;  
    flex-direction: row;  
    align-items: center;  
    background: linear-gradient(180deg, rgba(47, 46, 65, 0.4) 0%, rgba(114, 118, 150, 0) 100%);  
    padding-top: 40px;  

}  

.navName {  
    display: flex;  
    flex-direction: row;  
    align-items: center;  

}  

.name {  
    font-size: 34rpx;  
    color: #FFFFFF;  
    text-align: center;  
    margin-left: 12px;  
    color: #000000;  
}  

.back {  
    margin-left: 30rpx;  
    padding: 5rpx 10rpx;  
    display: flex;  
    align-items: center;  
}  

.backIcon {  
    width: 38rpx;  
    height: 44rpx;  
}  

.mask {  
    width: 750rpx;  
    height: 196rpx;  
    display: flex;  
    flex-direction: row;  
    justify-content: center;  
    align-items: center;  

}  

.mask_inside {  
    width: 690rpx;  
    height: 196rpx;  
    border-radius: 16rpx;  
    background: #FFFFFF;  
    box-shadow: 0px 4px 4px 0px rgba(232, 232, 232, 0.3);  
    padding: 20rpx;  
    box-sizing: border-box;  
    display: flex;  
    justify-content: space-between;  

}  

.mask_title_text {  
    color: #2B2A3B;  
    font-size: 30rpx;  
    font-weight: bold;  
}  

.mask_item_box {  
    display: flex;  
    flex-direction: row;  
    align-items: center;  
    justify-content: space-between;  
}  

.mask_item {  
    width: 114rpx;  
    height: 88rpx;  
    border-radius: 20rpx;  
    display: flex;  
    /* flex-direction: row; */  
    align-items: center;  
    justify-content: space-between;  
    padding: 12rpx;  
    box-sizing: border-box;  
}  

.mask_item_text1 {  
    font-size: 30rpx;  
}  

.mask_item_text2 {  
    font-size: 22rpx;  
}  

.minBox {  
    height: 40%;  
    /* background: #000000; */  
    position: relative;  
    z-index: 99999;  
}  

.touchBox {  
    width: 750px;  
    position: relative;  
}  

.touchBox_tips {  
    width: 750rpx;  
    height: 114rpx;  
    border-radius: 32rpx 32rpx 0rpx 0rpx;  
    display: flex;  
    flex-direction: row;  
    padding: 30rpx 30rpx 0 30rpx;  
    background: #FFE6D4;  
    z-index: 99;  
}  

.touchBox_tips_text {  
    font-size: 22rpx;  
    color: #503A11;  
}  

.touchBox_content {  
    width: 750rpx;  
    border-radius: 32rpx;  
    min-height: 200rpx;  
    position: relative;  
    z-index: 999;  
    margin-top: -30rpx;  
    background: #fff;  
    box-sizing: border-box;  
}  

.padding_box {  
    padding: 46rpx 32rpx 0 32rpx;  
}  

.shipper_check {  
    display: flex;  
}  

.check_input {  
    display: flex;  
    flex-direction: row;  
    align-items: center;  
}  

.input_box {  
    flex: 1;  
    border-bottom: 1px solid #D9D9D9;  
    display: flex;  
    flex-direction: row;  
    align-items: center;  
    justify-content: space-between;  
    height: 88rpx;  

}  

.check_button {  
    width: 690rpx;  
    height: 88rpx;  
    border-radius: 378rpx;  
    background: rgba(152, 156, 173, 0.2);  
    margin-top: 30rpx;  

}  

.isCheck {  
    background: #D19222;  
}  

.isCheckText {  
    color: #FFFFFF;  
}  

.more_car {  
    margin-top: 24rpx;  
    width: 686rpx;  
    display: flex;  
    flex-direction: row;  
    justify-content: flex-end;  

}  

.capacity_package {  
    width: 690rpx;  
    height: 88rpx;  
    border-radius: 32rpx 32rpx 0rpx 0rpx;  
    background: #2F2E41;  
    margin-top: 34rpx;  
    display: flex;  
    flex-direction: row;  
    align-items: center;  
    justify-content: space-between;  
    padding: 20rpx 30rpx;  
    box-sizing: border-box;  
}  

.count {  
    display: flex;  
    flex-direction: row;  
    align-items: center;  
}  

.buy_btn {  
    width: 142rpx;  
    height: 48rpx;  
    border-radius: 378rpx;  
    background: #D19222;  
}  

.buy_btn_text {  
    font-size: 28rpx;  
    color: #FFFFFF;  
    text-align: center;  
    line-height: 48rpx;  
}  

.car_item {  
    width: 750rpx;  
    height: 196rpx;  
    border-radius: 0rpx 0rpx 20rpx 20rpx;  
    background: #FFFFFF;  
    margin-bottom: 20rpx;  
    padding: 20rpx 30rpx;  
    box-sizing: border-box;  
    display: flex;  
    align-items: flex-start;  
    justify-content: space-between;  
}  

.car_top_info {  
    display: flex;  
    flex-direction: row;  
    align-content: center;  
}  

.car_number {  
    width: 164rpx;  
    height: 46rpx;  
    border-radius: 384rpx;  
    background: #CDE1FD;  
    margin-right: 12rpx;  
}  

.car_number_text {  
    font-size: 28rpx;  
    color: #3662EC;  
    text-align: center;  
    line-height: 46rpx;  
}  

.car_type {  
    width: 122rpx;  
    height: 46rpx;  
    border-radius: 384rpx;  
    background: #FF7618;  
    margin-left: 12rpx;  
}  

.car_type_text {  
    font-size: 28rpx;  
    color: #FFFFFF;  
    text-align: center;  
    line-height: 46rpx;  

}  

.last_time {  
    display: flex;  
    flex-direction: row;  
}  

.speed {  
    display: flex;  
    flex-direction: row;  
    align-items: center;  
}  

.pop_box {  
    width: 750rpx;  
    background: #FFFFFF;  
    border-radius: 32rpx 32rpx 0px 0px;  
    padding: 32rpx 0 0 0;  
    box-sizing: border-box;  
    display: flex;  
    /* flex-direction: row; */  

}  

.coalList {  
    padding: 32rpx;  
    box-sizing: border-box;  
    background: #F0F5F9;  
    margin-top: 32rpx;  
    flex: 1;  
}  

.coal_item {  
    width: 686rpx;  
    /* height: 328rpx; */  
    border-radius: 32rpx;  
    background: #FFFFFF;  
    overflow: hidden;  
    display: flex;  

}  

.coal_top {  
    width: 686rpx;  
    height: 80rpx;  
    background: #FAEDE1;  
    line-height: 80rpx;  
    padding-left: 32rpx;  
    box-sizing: border-box;  
    border-radius: 32rpx 32rpx 0px 0px;  
}  

.coal_content {  
    padding: 20rpx 32rpx;  
    background: #fff;  
    flex: 1;  
    border-radius: 0px 0px 32rpx 32rpx;  
}  

.coal_shipper {  
    display: flex;  
    flex-direction: row;  
    align-items: center;  
    margin-bottom: 12rpx;  

}  

.coal_img {  
    width: 40rpx;  
    height: 40rpx;  
    margin-right: 16rpx;  
}  

.coal_text {  
    font-size: 28rpx;  
    color: #4C4D66;  
}  

.coal_other_text {  
    font-size: 28rpx;  
    color: #989CAD  
}

</style> ```

2025-07-04 11:43 负责人:无 分享

没有找到相关结果

    已邀请:
    爱豆豆

    爱豆豆 - 办法总比困难多

    你好 可以提供一个直接运行的复现项目吗？帮你看下原因

    2025-07-04 17:54 分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    退出全屏模式 全屏模式 回复
    友情链接
    优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 艾普阳科技 申请友链

    DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

    京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

    | | 违法违规信息举报