<template>
<view class="content">
<view class="header">
<uni-easyinput class="uni-mt-5" suffixIcon="search" v-model="value" placeholder="请输入司机姓名"
@input="iptChange"></uni-easyinput>
<view class="zpcl">
<text @click="cancel">一键取消</text>
<text @click="openPopup">指派车辆 {{car_num}}</text>
</view>
<text style="color:red;font-size: 24upx;">注意：列表中蓝色字体为有订单的司机</text>
</view>
<view class="main">
<scroll-view style="height: 100vh;" scroll-y="true" :refresher-enabled="true"
:refresher-triggered="triggered" :refresher-threshold="200" refresher-background="#FFF"
@refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
@refresherabort="onAbort" ref="scrollView">
<view class="list" v-if="isShow">
<view class="list_item" v-for="(item,index) in listData" :key="index">
<view class="list_item_left">
<view :class="{'active':item.jdsl>0}">
<text class="name">{{item.name}}</text>
<text class="plate">{{item.cph}}</text>
<text >{{item._cylx}}</text>
</view>
</view>
<view class="list_item_right">
<checkbox-group @change="checkChange($event,item)">
<label>
<checkbox :value="item.sjid+'-'+item.clid" :checked="item.selected"
:id="item.sjid" />
</label>
</checkbox-group>
</view>
</view>
<uni-load-more :status="status" :content-text="contentText" />
</view>
<view class="empty" v-else>
<image src="../../static/images/nodata.png" mode=""></image>
<text v-if="isText">暂无数据</text>
</view>
</scroll-view>
<view class="popupBox">
<uni-popup ref="popup" background-color="rgba(0,0,0,0)" :mask-click="false">
<view class="popup-content">
<view class="title">
<text>确认指派</text>
</view>
<view class="function_button">
<button @click="canel">取消</button>
<button @click="$noMultipleClicks(sendCarSubmit)">确定</button>
</view>
</view>
</uni-popup>
</view>
<view class="popupBox2">
<uni-popup ref="popup2" background-color="rgba(0,0,0,0)" style="padding: 0;" :mask-click="false">
<scroll-view :scroll-y="true">
<view class="popup-content">
<text class="title">司机已有订单，是否继续派车？</text>
<text class="title" style="font-size: 24upx;">(蓝色字体为当前线路)</text>
<view class="popupMain" v-for="(item,index) in sjOrderInfo" :key="index" >
<view class="popupMain_top">
<view class="name">
<text>姓名：</text>
<text>{{item._yssjid}}</text>
</view>
<view class="date">
<text>日期：</text>
<text>{{item.cdate}}</text>
</view>
</view>
<view class="popupMain_bottom">
<view :class=" [item.xlid == jxid? 'active' :''], xlName" >
<text>线路名称：</text>
<text>{{item.jxid}}</text>
</view>
</view>
</view>
<view class="function_button">
<button @click="orderCanel">取消</button>
<!-- $noMultipleClicks 防止多次点击 -->
<button @click="$noMultipleClicks(orderSubmit)">确定</button>
</view>
</view>
</scroll-view>
</uni-popup>
</view>
</view>
</view>
</template>
<script>
import request from "@/http/request.js"
export default {
data() {
return {
status: 'no-more',
car_num: 0,
contentText: {
contentdown: '查看更多',
contentrefresh: '加载中',
contentnomore: '没有更多了'
},
isShow: true,
isText: true,
value: '',
qyid: "",
pageNum: 1,
pageRow: 30,
listData: [],
jxid: "",
jxjhid: "",
sjid: "",
carid: "",
sjName: "", // 模糊搜素
xlmc: "", // 传过来的线路名称 指派车辆弹窗用
name: "", // 司机姓名 指派车辆弹窗用
plate: "", // 车牌号 指派车辆弹窗用
carid_arr: [],
sjid_arr: [],
cph_arr:[],
noClick: true, // 防抖
triggered:false,
_freshing:false,
sjOrderInfo:[],
changeSjid:"", // 选择的司机id
changeClid:"", // 选择的车辆id
changeCph:"", // 选中的车牌号
changeItem:false, // 点击勾选时的值
color:"1px solid red",
num:0,
acceptance:"",
}
},
onLoad(options) {
console.log(options)
this.jxid = options.jxid;
this.jxjhid = options.jxjhId;
this.num = options.num;
this.xlmc = options.xlmc;
this.acceptance = options.acceptance
this.qyid = uni.getStorageSync("zcxx").qyid;
uni.showLoading({
title: "加载中..."
});
setTimeout(() => {
uni.hideLoading();
this.getData(this.sjName);
}, 1000)
},
// onReachBottom() {
// this.status = "loading";
// this.pageNum++;
// this.getData(this.sjName, this.pageNum, this.pageRow)
// console.log("page++")
// },
methods: {
timestampToTime(timestamp) {
// 时间戳为10位需*1000，时间戳为13位不需乘1000
var date = new Date(timestamp);
var Y = date.getFullYear() + "-";
var M =
(date.getMonth() + 1 < 10
? "0" + (date.getMonth() + 1)
: date.getMonth() + 1) + "-";
var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
var h = date.getHours()<10? "0" + date.getHours() + ":" :date.getHours()+":";
var m = date.getMinutes()<10? "0" + date.getMinutes() + ":" :date.getMinutes()+":";
var s = (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()) + " ";
return Y + M + D + h + m + s;
},
onPulling(e) {
console.log("onpulling", e);
if (e.detail.deltaY < 0) return // 防止上滑页面也触发下拉
this.triggered = true;
},
onRefresh() {
console.log("9999")
if (this._freshing) return;
this._freshing = true;
setTimeout(() => {
this.getData(this.sjName);
this.carid_arr = [];
this.sjid_arr = [];
this.cph_arr = [];
this.car_num = 0;
uni.showToast({
title: "刷新成功！",
icon: "success"
})
}, 3000)
},
// 自定义下拉刷新被复位
onRestore() {
// this.triggered = 'restore'; // 需要重置
this.triggered = false;
console.log("onRestore");
},
onAbort() {
console.log("onAbort");
},
clickLoadMore(e) {
uni.showToast({
icon: 'none',
title: "当前状态：" + e.detail.status
})
},
// 模糊查询
iptChange(value) {
this.sjName = value
this.pageNum = 1
this.listData = []
this.getData(this.sjName)
},
// 获取派车列表数据
getData(sjName) {
let cdzid = uni.getStorageSync("zcxx").id;
let cylx = uni.getStorageSync("user")[0].cylx;
request.vsportal('XcxCdzAction.zpCarList', {
qyid: this.qyid,
sj:"",
cdzid:cdzid,
jxid:this.jxid,
cph:"",
cylx:cylx,
value:sjName
}).then((res) => {
if(res.status){
this.triggered = false;
this.listData = res.data;
this.listData.forEach((item,index) =>{
this.$set(item,'selected',false)
})
}else{
this.isShow = false;
uni.showToast({
title:"数据请求失败！",
icon:"error"
})
}
})
},
// 确定派车
sendCarSubmit() {
var that = this;
console.log(this.num)
console.log(this.car_num)
if (this.num < this.car_num) {
uni.showToast({
title: "最多允许指派"+this.num+"车!",
icon: "none"
})
} else {
that.$refs.popup.close();
uni.showLoading({
title: "正在派车！"
})
setTimeout(() => {
request.vsportal('XcxCdzAction.zpcl', {
qyid: this.qyid,
jxid: this.jxid,
jxjhid: this.jxjhid,
clids: this.carid_arr,
sjids: this.sjid_arr,
cphs:this.cph_arr
}).then((res) => {
if (res.status) {
uni.hideLoading()
if(res.status && res.data == true){
uni.showToast({
title: "派车成功！",
icon: "success",
success() {
// 派车成功则取消所有已选择的车辆 且 清空 车辆id 司机id数组
for (let i = 0; i < that.listData.length; i++) {
that.listData[i].selected = false
}
that.carid_arr = [];
that.sjid_arr = [];
that.cph_arr = [];
that.car_num = 0;
setTimeout(() =>{
uni.navigateBack({
delta: 1, // 返回的页面数
success() {
uni.$emit('update', { msg: '页面更新' });
}
});
},300)
}
})
}
} else {
uni.showToast({
title: "派车失败！",
icon: "error"
})
}
})
}, 1500)
}
},
// 弹窗取消按钮
canel() {
this.$refs.popup.close()
},
// 选择
checkChange(e, data) {
let that = this;
if(that.acceptance.includes('新能源车')){
if(data.energy == '2EECACJ5'){
uni.showModal({
title: '提示',
content: '该线路只允许新能源车辆',
showCancel: false,
success: function (res) {
if (res.confirm) {
data.selected = false
that.$forceUpdate()
} else if (res.cancel) {
}
}
});
console.log(data,'----')
return
}
}
that.changeItem = !data.selected;
data.selected = !data.selected;
that.changeSjid = data.sjid;
that.changeClid = data.clid;
that.changeCph = data.cph;
if (e.detail.value.length > 0) {
// 选中 且 当前选择的车辆是第一次选择 即不在 carid_arr 和 sjid_arr中
if (data.selected && !this.carid_arr.includes(data.clid) && !this.sjid_arr.includes(data.sjid)) {
request.vsportal('XcxCdzAction.sjwwc', {
sjids: data.sjid,
jxjhid:this.jxjhid,
clid:data.clid,
cph:data.cph
}).then((res) => {
console.log(res)
if (res.status && res.data.length>0) {
for(let i=0;i<res.data.length;i++){
res.data[i].cdate = this.timestampToTime(res.data[i].cdate);
}
this.$refs.popup2.open('center');
this.sjOrderInfo = res.data;
}else if(res.status && res.data.zt == false){
console.log("000")
uni.showToast({
title: res.data.message,
icon: "error",
duration: 2000 // 增加显示时间
})
data.selected = false;
this.$set(data,'selected',false)
}else if(res.status && res.data.length == 0){
that.carid_arr.push(data.clid);
that.sjid_arr.push(data.sjid);
that.cph_arr.push(data.cph)
this.car_num = this.carid_arr.length
}
// {
// // uni.showToast({
// // title: "司机有订单！",
// // icon: "error"
// // })
// // that.carid_arr = that.carid_arr.filter(item => item !== data.clid);
// // that.sjid_arr = that.sjid_arr.filter(item => item !== data.sjid);
// // data.selected = false;
// // this.car_num = this.carid_arr.length
// }
})
} else {
console.log("错误")
}
}
else {
// console.log("0000")
if (!data.selected && this.carid_arr.includes(data.clid) && this.sjid_arr.includes(data.sjid)) {
this.carid_arr.push(data.clid);
this.sjid_arr.push(data.sjid)
this.carid_arr = this.carid_arr.filter(item => item !== data.clid);
this.sjid_arr = this.sjid_arr.filter(item => item !== data.sjid);
console.log("车辆id" + this.carid_arr)
console.log("司机id" + this.carid_arr)
} else {
console.log("错误")
}
this.car_num = this.carid_arr.length
}
},
// 司机订单信息弹窗 取消按钮
orderCanel(){
this.$refs.popup2.close();
for (let i = 0; i < this.listData.length; i++) {
if(this.listData[i].sjid == this.changeSjid){
console.log("09")
// this.listData[i].selected = false;
this.$set(this.listData[i],'selected',false)
}
}
},
// 司机订单信息弹窗 确定按钮
orderSubmit(){
this.$refs.popup2.close();
this.carid_arr.push(this.changeClid);
this.sjid_arr.push(this.changeSjid);
this.cph_arr.push(this.changeCph);
this.car_num = this.carid_arr.length
},
// 一键取消
cancel() {
for (let i = 0; i < this.listData.length; i++) {
this.listData[i].selected = false
}
this.carid_arr = [];
this.sjid_arr = [];
this.cph_arr = [];
this.car_num = 0
},
// 指派车辆
openPopup() {
if (this.carid_arr.length > 0) {
this.$refs.popup.open('center');
} else {
uni.showToast({
title: "请至少选择一辆",
icon: "error"
})
}
},
// change(e) {
// console.log('当前模式：' + e.type + ',状态：' + e.show);
// },
}
}
</script>
<style lang="scss">
.active{
color:blue;
}
.active2{
color:red;
font-weight: bold;
}
.content {
padding: 32upx;
.header {
padding: 20upx 32upx;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
background-color: #fff;
.zpcl {
width: 100%;
margin-top: 20upx;
box-sizing: border-box;
// padding-right: 62upx;
display: flex;
justify-content: space-between;
z-index: 99;
text {
display: block;
text-align: center;
font-size: 30upx;
width: 280upx;
height: 60upx;
line-height: 60upx;
border-radius: 12upx;
background-color: #2257FF;
color: #FFFFFF;
// border-radius: 50upx;
}
text:nth-child(1) {
border: 1px solid #2257FF;
color: #2257FF;
background-color: #fff;
}
}
}
.main {
margin-top: 200upx;
height: 100%;
.list{
position: relative;
}
.list_item {
display: flex;
justify-content: space-between;
line-height: 70upx;
border-bottom: 1px solid #ddd;
.list_item_left {
position: relative;
display: flex;
align-items: center;
text {
display: inline-block;
width: 150upx;
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
margin-right: 30upx;
font-size: 28upx;
// color: #333333;
}
.plate::after {
content: '';
width: 1px;
height: 30upx;
background-color: #ddd;
position: absolute;
top: 25upx;
right: 39%;
}
text:nth-child(3) {
font-size: 28upx;
// color: #666666;
}
.name {
width: 120upx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.list_item_right {
text {
font-size: 24upx;
color: #2257FF;
}
}
}
.empty {
display: block;
width: 518upx;
height: 518upx;
margin-left: 50%;
margin-top: 80%;
transform: translate(-50%, -50%);
image {
display: block;
width: 100%;
height: 518upx;
}
text {
display: block;
width: 400upx;
text-align: center;
margin: 0 auto;
font-size: 24upx;
color: #666666;
}
}
.popupBox{
.popup-content {
width: 586upx;
height: 300upx;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: space-evenly;
border-radius: 28upx;
padding: 52upx;
box-sizing: border-box;
.title {
text-align: center;
text {
font-size: 34upx;
color: #333333;
font-weight: bold;
}
}
.sendCarInfo {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
text {
font-size: 34upx;
font-weight: bold;
color: #333333;
}
text:nth-child(2) {
font-weight: normal;
}
text:nth-child(3) {
font-weight: normal;
display: inline-block;
margin-left: 10upx;
}
}
.function_button {
margin-top: 60upx;
display: flex;
// justify-content: space-between;
// border: 1px solid red;
button {
display: block;
width: 200upx;
height: 60upx;
line-height: 60upx;
border: 1px solid #2257FF;
background-color: #fff;
color: #2257FF;
outline: none;
font-size: 28upx;
}
:nth-child(2) {
background-color: #2257FF;
color: #fff;
}
}
}
}
.popupBox2{
.popup-content {
width: 586upx;
height: 900upx;
background-color: #fff;
overflow: auto;
// display: flex;
// flex-direction: column;
// justify-content: space-evenly;
border-radius: 28upx;
padding:30upx ;
// box-sizing: border-box;
.title{
display: inline-block;
width: 100%;
text-align: center;
font-size: 34upx;
margin-bottom: 30upx;
color: #ff4120;
}
.popupMain{
border: 1px solid #ddd;
padding: 30upx;
border-radius: 16upx;
margin-bottom: 15upx;
}
.popupMain_top{
// display: flex;
// justify-content: space-between;
}
.title {
text-align: center;
text {
font-size: 34upx;
color: #333333;
font-weight: bold;
}
}
.sendCarInfo {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
text {
font-size: 34upx;
font-weight: bold;
color: #333333;
}
text:nth-child(2) {
font-weight: normal;
}
text:nth-child(3) {
font-weight: normal;
display: inline-block;
margin-left: 10upx;
}
}
.function_button {
margin-top: 60upx;
display: flex;
// justify-content: space-between;
// border: 1px solid red;
button {
display: block;
width: 200upx;
height: 60upx;
line-height: 60upx;
border: 1px solid #2257FF;
background-color: #fff;
color: #2257FF;
outline: none;
font-size: 28upx;
}
:nth-child(2) {
background-color: #2257FF;
color: #fff;
}
}
}
}
}
}
</style>整体代码优化重新写一下
博客提到原本使用 white-space: break-spaces; 控制文本换行，但该样式对部分手机不起作用，随后更换了样式，主要围绕 CSS 文本换行样式在不同设备的适配问题展开。
扫一扫
2407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
