d第一次提交
This commit is contained in:
dt_2916866708
99
Order/pages/created/index.scss
Normal file
99
Order/pages/created/index.scss
Normal file
@@ -0,0 +1,99 @@
|
||||
.created-body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #f1f2f7;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx;
|
||||
.created-footer {
|
||||
margin-bottom: 20rpx;
|
||||
.cancel {
|
||||
width: 194rpx;
|
||||
height: 88rpx;
|
||||
background: rgba(0, 125, 255, 0.5);
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
opacity: 1;
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
.submit {
|
||||
width: 194rpx;
|
||||
height: 88rpx;
|
||||
background: #007dff;
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
opacity: 1;
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.upload-container {
|
||||
.upload-tip {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 5rpx 5rpx 5rpx 5rpx;
|
||||
opacity: 1;
|
||||
// border: 1rpx solid #999999;
|
||||
text {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
.upload-item {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-right: 20rpx;
|
||||
position: relative;
|
||||
.colse {
|
||||
position: absolute;
|
||||
background-color: #e0e0e0;
|
||||
top: -15rpx;
|
||||
right: -15rpx;
|
||||
height: 35rpx;
|
||||
width: 35rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.created-form {
|
||||
width: 690rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(132, 132, 132, 0.05);
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
opacity: 1;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
.created-form-item {
|
||||
padding-bottom: 30rpx;
|
||||
border-bottom: solid 1rpx #f3f5f7;
|
||||
margin-top: 40rpx;
|
||||
.created-form-item-value {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
.selectPlaceholder {
|
||||
color: #999999;
|
||||
}
|
||||
font-size: 28rpx;
|
||||
textarea {
|
||||
background: #f1f2f7;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
.created-form-item-label {
|
||||
width: 249rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.created-form-title {
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
291
Order/pages/created/index.vue
Normal file
291
Order/pages/created/index.vue
Normal file
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<view class="created-body flex column">
|
||||
<order-item v-if="orderData" :order-data='orderData' type="card"></order-item>
|
||||
<view class="oneflex">
|
||||
<view class="created-form">
|
||||
<view class="created-form-item flex ac">
|
||||
<view class="created-form-item-label"><text style="color: red;">*</text>选择车牌：</view>
|
||||
<view @click="showSelect('plate')" class="created-form-item-value flex oneflex flex-end">
|
||||
<view :class="submitData.plateNumber?'':'selectPlaceholder'" class="oneflex textov">
|
||||
{{ submitData.plateNumber ||'请选择车牌'}}
|
||||
</view>
|
||||
<uni-icons type="right" size="20" color="#999999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="created-form-item flex ac">
|
||||
<view class="created-form-item-label">
|
||||
<text style="color: red;">*</text>
|
||||
选择同城司机：
|
||||
</view>
|
||||
<view @click="showSelect('drivers')" class="created-form-item-value oneflex">
|
||||
<view class="created-form-item-value flex oneflex flex-end">
|
||||
<view :class="submitData.driverNames?'':'selectPlaceholder'" class="oneflex textov">
|
||||
{{ submitData.driverNames ||'请选择同城司机'}}
|
||||
</view>
|
||||
<uni-icons type="right" size="20" color="#999999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="created-form-item flex ac">
|
||||
<view class="created-form-item-label"><text style="color: red;">*</text>运费金额：</view>
|
||||
<view class="created-form-item-value oneflex">
|
||||
<input type="digit" v-model="submitData.freight" placeholder="请输入运费金额" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="created-form-item flex ac">
|
||||
<view class="created-form-item-label"><text style="color: red;">*</text>货物类型：</view>
|
||||
<view @click="showSelect('cargoType')" class="created-form-item-value oneflex">
|
||||
<view class="created-form-item-value flex oneflex flex-end">
|
||||
<view :class="submitData.cargoType?'':'selectPlaceholder'" class="oneflex textov">
|
||||
{{ dataMark.CARGO_TYPE[submitData.cargoType]||'请选择货物类型'}}
|
||||
</view>
|
||||
<uni-icons type="right" size="20" color="#999999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="created-form-item flex ac">
|
||||
<view class="created-form-item-label"><text style="color: red;">*</text>发货日期：</view>
|
||||
<view class="created-form-item-value oneflex">
|
||||
<uni-datetime-picker v-model="submitData.departureDate">
|
||||
{{submitData.departureDate||'选择发货日期'}}
|
||||
</uni-datetime-picker>
|
||||
</view>
|
||||
</view>
|
||||
<view class="created-form-item flex jc column">
|
||||
<view class="created-form-item-label">
|
||||
备注：
|
||||
</view>
|
||||
<view class="created-form-item-value oneflex">
|
||||
<textarea v-model="submitData.remark" placeholder="请输入备注" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="created-footer flex around">
|
||||
<view @click="back" class="cancel flex jc ac">返回</view>
|
||||
<view @click="submit" class="submit flex jc ac">提交</view>
|
||||
</view>
|
||||
<!-- 选择货物类型 -->
|
||||
<selectPopup @settle='cargoTypeSettle' :isMultiple="false" :options='cargoTypes' v-model="isCargoType">
|
||||
<template #title>请选择货物类型</template>
|
||||
</selectPopup>
|
||||
<!-- 选择车牌号 -->
|
||||
<selectPopup @settle='platesSettle' :isMultiple="false" label='plateNumber' selectValue='plateNumber'
|
||||
:options='plates' v-model="isPlateSelect">
|
||||
<template #title>请选择车牌号</template>
|
||||
</selectPopup>
|
||||
<!-- 选择司机 -->
|
||||
<selectPopup ref='selectDrivers' @settle='settle' label='customerName' selectValue='id' :options='drivers'
|
||||
v-model="isDriversSelect">
|
||||
<template #title>请选择司机 </template>
|
||||
<template #search>
|
||||
<uni-easyinput @confirm='searchDrivers' suffixIcon="search" v-model="customerName"
|
||||
placeholder="输入司机名字搜索"></uni-easyinput>
|
||||
</template>
|
||||
</selectPopup>
|
||||
<u-toast ref="uToast"></u-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import orderApi from '@/api/order.js'
|
||||
import orderItem from "@/components/orderItem/orderItem.vue";
|
||||
import selectPopup from '../../../components/selectPopup/selectPopup.vue';
|
||||
export default {
|
||||
components: {
|
||||
orderItem,
|
||||
selectPopup
|
||||
},
|
||||
options: {
|
||||
styleIsolation: 'shared'
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
user: uni.getStorageSync('user'),
|
||||
dataMark: uni.getStorageSync('dataMark') || null,
|
||||
cargoTypes: [],
|
||||
isCargoType: false,
|
||||
customerName: '',
|
||||
isDriversSelect: false,
|
||||
drivers: [],
|
||||
isPlateSelect: false,
|
||||
plates: [],
|
||||
checkPage: {
|
||||
plateNumber: {
|
||||
tacitly: '',
|
||||
WrongText: '车牌不能为空'
|
||||
},
|
||||
freight: {
|
||||
tacitly: '',
|
||||
custom:/^\d+(?=\.{0,1}\d+$|$)/,
|
||||
WrongText: '运费金额不能为空且必须为数字'
|
||||
},
|
||||
cargoType: {
|
||||
tacitly: '',
|
||||
WrongText: '货物类型不能为空'
|
||||
},
|
||||
departureDate: {
|
||||
tacitly: '',
|
||||
WrongText: '发货日期不能为空'
|
||||
}
|
||||
},
|
||||
submitData: {
|
||||
"remark": "",
|
||||
"freight": "",
|
||||
"status": "1",
|
||||
"cargoType": "",
|
||||
"drivers": "",
|
||||
"driverNames": "",
|
||||
"departureDate": "",
|
||||
"orderType": "2",
|
||||
"plateNumber": ""
|
||||
},
|
||||
orderData: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
onLoad() {},
|
||||
methods: {
|
||||
back() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
init() {
|
||||
this.getDrivers();
|
||||
this.getPlates();
|
||||
this.getCargoTypes();
|
||||
this.settle()
|
||||
},
|
||||
getCargoTypes() {
|
||||
let dataMark = this.dataMark;
|
||||
if (dataMark && dataMark.CARGO_TYPE) {
|
||||
this.cargoTypes = Object.keys(dataMark.CARGO_TYPE).map(item => {
|
||||
return {
|
||||
label: dataMark.CARGO_TYPE[item],
|
||||
value: item
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.cargoTypes = []
|
||||
}
|
||||
},
|
||||
cargoTypeSettle(e) {
|
||||
if (e) {
|
||||
this.submitData.cargoType = e.value;
|
||||
} else {
|
||||
this.submitData.cargoType = "";
|
||||
}
|
||||
},
|
||||
platesSettle(e) {
|
||||
this.submitData.plateNumber = e ? e.plateNumber : '';
|
||||
},
|
||||
settle(drivers = []) {
|
||||
drivers = [{
|
||||
customerName: this.user.name,
|
||||
id: this.user.driverId
|
||||
},
|
||||
...drivers
|
||||
]
|
||||
this.submitData.driverNames = drivers.map(item => item.customerName).join(',');
|
||||
this.submitData.drivers = drivers.map(item => item.id).join(',');
|
||||
},
|
||||
searchDrivers() {
|
||||
this.getDrivers()
|
||||
},
|
||||
getDrivers() {
|
||||
orderApi.getCustomersByName({
|
||||
customerName: this.customerName
|
||||
}).then(res => {
|
||||
this.drivers = res.data.filter(item => item.id !== this.user.driverId);
|
||||
})
|
||||
},
|
||||
getPlates() {
|
||||
orderApi.findByPlateNumber({
|
||||
companyId:this.user.userCompany,
|
||||
"plateNumber": ""
|
||||
}).then(res => {
|
||||
this.plates = res.data;
|
||||
})
|
||||
},
|
||||
showSelect(e) {
|
||||
switch (e) {
|
||||
case 'plate':
|
||||
this.isPlateSelect = true;
|
||||
break;
|
||||
case 'drivers':
|
||||
this.isDriversSelect = true;
|
||||
break;
|
||||
case 'cargoType':
|
||||
this.isCargoType = true;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
whenChanged(e) {
|
||||
console.log(JSON.stringify(e))
|
||||
this.options = e
|
||||
},
|
||||
change(e) {
|
||||
console.log("e:", e);
|
||||
},
|
||||
submit() {
|
||||
let chenkResult = this.tool.checkFn(this.submitData, [], this.checkPage);
|
||||
if (chenkResult.result) {
|
||||
orderApi.createOrder(this.submitData).then(res => {
|
||||
if (res.code == 20000) {
|
||||
uni.showToast({
|
||||
icon: "success",
|
||||
title: "操作成功"
|
||||
})
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 1000)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$refs.uToast.show({
|
||||
type: 'error',
|
||||
icon: false,
|
||||
title: 'error',
|
||||
message: chenkResult.WrongText,
|
||||
})
|
||||
}
|
||||
},
|
||||
imageRemove(uploadImages = this.submitData.proofsList, index) {
|
||||
this.submitData.proofsList.splice(index, 1);
|
||||
},
|
||||
previewImage(uploadImages = this.submitData.proofsList, index = undefined) {
|
||||
if (index !== undefined && uploadImages[index] !== undefined) {
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: uploadImages.map(item => item.imageUrl),
|
||||
longPressActions: {
|
||||
success: function(data) {},
|
||||
fail: function(err) {}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log('数据错误=>', ...arguments)
|
||||
}
|
||||
},
|
||||
uploadImagesFn() {
|
||||
this.tool.chooseImage((imageUrl) => {
|
||||
this.submitData.proofsList.push({
|
||||
imageUrl
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .uni-select {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
@import 'index.scss';
|
||||
</style>
|
||||
77
Order/pages/details/index.scss
Normal file
77
Order/pages/details/index.scss
Normal file
@@ -0,0 +1,77 @@
|
||||
.details-body{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #F1F2F7;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
.details-top{
|
||||
margin-top: 35rpx;
|
||||
}
|
||||
.details-goods-information{
|
||||
position: relative;
|
||||
}
|
||||
.details-form {
|
||||
position: relative;
|
||||
width: 690rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(132, 132, 132, 0.05);
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
opacity: 1;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 27rpx;
|
||||
.details-form-item {
|
||||
padding-bottom: 30rpx;
|
||||
border-bottom: solid 1rpx #f3f5f7;
|
||||
margin-top: 40rpx;
|
||||
.details-form-item-value {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.details-form-item-label {
|
||||
width: 249rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.details-form-title {
|
||||
font-size: 28rpx;
|
||||
color: #000000;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.upload-container {
|
||||
.upload-tip {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 5rpx 5rpx 5rpx 5rpx;
|
||||
opacity: 1;
|
||||
border: 1rpx solid #999999;
|
||||
text {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
.upload-item {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
margin-right: 20rpx;
|
||||
position: relative;
|
||||
.colse {
|
||||
position: absolute;
|
||||
background-color: #e0e0e0;
|
||||
top: -15rpx;
|
||||
right: -15rpx;
|
||||
height: 35rpx;
|
||||
width: 35rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.noFormBorder{
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
155
Order/pages/details/index.vue
Normal file
155
Order/pages/details/index.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<view v-if="isLoad" class="details-body flex column">
|
||||
<!-- 第一个卡片 -->
|
||||
<view class="details-top">
|
||||
<order-item :order-data='orderData' type="card"></order-item>
|
||||
</view>
|
||||
<view class="details-form">
|
||||
<view class="details-form-title">货物信息：</view>
|
||||
<view class="details-form-item flex ac noFormBorder">
|
||||
<view class="details-form-item-label"> 货物信息：</view>
|
||||
<view class="details-form-item-value oneflex">
|
||||
{{ dataMark.CARGO_TYPE[orderData.cargoType] }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="details-form-item flex ac noFormBorder">
|
||||
<view class="details-form-item-label"> 货物重量：</view>
|
||||
<view class="details-form-item-value oneflex">
|
||||
{{Number(orderData.weight||0).toFixed(2)}}吨
|
||||
</view>
|
||||
</view>
|
||||
<view class="details-form-item flex ac noFormBorder">
|
||||
<view class="details-form-item-label">
|
||||
发货单：
|
||||
</view>
|
||||
<view class="details-form-item-value oneflex">
|
||||
<view v-if="orderData.otherData.departureImges&&orderData.otherData.departureImges.length" class="upload-container flex warp ">
|
||||
<view v-for="(item,index) in orderData.otherData.departureImges" class="upload-item" :key='index' >
|
||||
<image style="width: 100%; height: 100%;" @click="previewImage(orderData.otherData.departureImges.map(item=>item.imageUrl),index)"
|
||||
:src="item.imageUrl"> </image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
暂无单据信息
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="details-form-item flex ac noFormBorder">
|
||||
<view class="details-form-item-label">
|
||||
卸货单：
|
||||
</view>
|
||||
<view class="details-form-item-value oneflex">
|
||||
<view v-if="orderData.otherData.unloadingImges&&orderData.otherData.unloadingImges.length" class="upload-container flex warp ">
|
||||
<view v-for="(item,index) in orderData.otherData.unloadingImges" class="upload-item" :key='index' >
|
||||
<image style="width: 100%; height: 100%;" @click="previewImage(orderData.otherData.unloadingImges.map(item=>item.imageUrl),index)"
|
||||
:src="item.imageUrl"> </image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
暂无单据信息
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="orderData.otherData.outlayImagesList.length&&Number(orderData.outlay)" class="details-goods-information">
|
||||
<view class="details-form">
|
||||
<view class="details-form-title">支出费用：￥{{Number(orderData.outlay).toFixed(2)}}</view>
|
||||
<view v-for="(item,index) in orderData.otherData.outlayImagesList">
|
||||
<view class="details-form-item flex ac noFormBorder">
|
||||
<view class="details-form-item-label">
|
||||
{{dataMark.ORDER_EXPENSES[item.outlayType]}}
|
||||
</view>
|
||||
<view class="details-form-item-value oneflex">
|
||||
￥{{Number(item.expense).toFixed(2)}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="details-form-item flex ac noFormBorder">
|
||||
<view class="details-form-item-label">
|
||||
单据图片：
|
||||
</view>
|
||||
<view class="details-form-item-value oneflex">
|
||||
<view v-if="item.images&&item.images.length" class="upload-container flex warp ">
|
||||
<view class="upload-item" :key='index' v-for="(url,urlIndex) in item.images">
|
||||
<image style="width: 100%; height: 100%;"
|
||||
@click="previewImage(item.images,urlIndex)" :src="url"> </image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
暂无单据信息
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import orderItem from "@/components/orderItem/orderItem.vue";
|
||||
import orderApi from '@/api/order.js'
|
||||
export default {
|
||||
components: {
|
||||
orderItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoad:false,
|
||||
dataMark: uni.getStorageSync('dataMark') || null,
|
||||
orderData: {
|
||||
"otherData": {
|
||||
outlayImagesList: [],
|
||||
unloadingImges:[],
|
||||
departureImges:[]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
if (e.orderData) {
|
||||
Object.assign(this.orderData, JSON.parse(decodeURIComponent(e.orderData)));
|
||||
let {
|
||||
orderNumber = ""
|
||||
} = this.orderData;
|
||||
this.isLoad = true
|
||||
this.getDetails(orderNumber);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
dataMarkHandle(dataMark = this.dataMark, type = 'ORDER_EXPENSES') {
|
||||
return this.tool.dataMarkHandle(dataMark, type);
|
||||
},
|
||||
previewImage(uploadImages = [], index = undefined) {
|
||||
if (index !== undefined && uploadImages[index] !== undefined) {
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: uploadImages,
|
||||
longPressActions: {
|
||||
success: function(data) {},
|
||||
fail: function(err) {}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log('数据错误=>', ...arguments)
|
||||
}
|
||||
},
|
||||
getDetails(id) {
|
||||
orderApi.getOrderInfo(id).then(res => {
|
||||
if (res.code == 20000) {
|
||||
let {
|
||||
data: otherData = null
|
||||
} = res;
|
||||
Object.assign(this.orderData, {
|
||||
otherData
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'index.scss';
|
||||
</style>
|
||||
78
Order/pages/index/index.scss
Normal file
78
Order/pages/index/index.scss
Normal file
@@ -0,0 +1,78 @@
|
||||
.order-body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 5rpx;
|
||||
background-color: #f1f2f7;
|
||||
.order-other-search {
|
||||
padding: 0 40rpx;
|
||||
margin-bottom: 20rpx;
|
||||
.order-other-search-right {
|
||||
font-size: 30rpx;
|
||||
text {
|
||||
color: #007dff;
|
||||
}
|
||||
}
|
||||
.order-other-search-left {
|
||||
width: 220rpx;
|
||||
background: #ffffff;
|
||||
box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(132, 132, 132, 0.05);
|
||||
border-radius: 10rpx 10rpx 10rpx 10rpx;
|
||||
margin-right: 41rpx;
|
||||
}
|
||||
}
|
||||
.order-list {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
border-radius: 10rpx;
|
||||
margin: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.order-search-container {
|
||||
background-color: #ffffff;
|
||||
padding: 20rpx;
|
||||
padding-bottom: 0;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.order-filterGroups-container {
|
||||
padding: 20rpx;
|
||||
padding-bottom: 0;
|
||||
justify-content: space-between;
|
||||
.order-filter-item {
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
padding-bottom: 20rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
.order-filter-item-is {
|
||||
font-size: 28rpx;
|
||||
color: #007dff;
|
||||
border-bottom: solid 1px #007dff;
|
||||
padding-bottom: 20rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .home-seach-container {
|
||||
background-color: #f7f7f7 !important;
|
||||
}
|
||||
::v-deep .uni-easyinput__content {
|
||||
background-color: #f7f7f7 !important;
|
||||
}
|
||||
/deep/ ::-webkit-scrollbar {
|
||||
/*滚动条整体样式*/
|
||||
width: 1rpx !important;
|
||||
}
|
||||
.order-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.order-item:last-child::after {
|
||||
content: '到底喽';
|
||||
height: 20rpx;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
visibility: hidden;
|
||||
}
|
||||
144
Order/pages/index/index.vue
Normal file
144
Order/pages/index/index.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<view class="order-body flex column">
|
||||
<!-- 顶部筛选 -->
|
||||
<view class="order-search-container">
|
||||
<view class="order-filterGroups-container flex">
|
||||
<view @click="select(item)" v-for=" (item,index) in filterGroups" :key="index"
|
||||
:class=" searchParams.params.status==item.value? 'order-filter-item-is' : 'order-filter-item'">
|
||||
{{item.label}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 是否上传/共计 -->
|
||||
<view class="order-other-search flex ac">
|
||||
<view class="order-other-search-left ">
|
||||
<uni-data-select placeholder='是否上传费用' v-model="searchParams.params.uploadFlag" :localdata="range"
|
||||
@change="change"></uni-data-select>
|
||||
</view>
|
||||
<view class="order-other-search-right">共计： <text>{{currentCount}}单</text> </view>
|
||||
</view>
|
||||
<!-- 列表 -->
|
||||
<view class="order-list oneflex">
|
||||
<scroll-view v-if="orderList.length" class="scroll" @refresherrefresh='refresherrefresh'
|
||||
:refresher-enabled='true' :refresher-triggered='refresherTriggered'
|
||||
style="height: 100%;padding-bottom: 50px;" scroll-y="true" @scrolltolower='scrolltolower'>
|
||||
<order-item @orderItemCenterClick='orderItemCenterClick' @orderItemFooterClick='orderItemFooterClick'
|
||||
:order-data="item" :key="index" v-for="(item,index) in orderList"></order-item>
|
||||
</scroll-view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import orderApi from '@/api/order.js'
|
||||
import orderItem from "@/components/orderItem/orderItem.vue"
|
||||
export default {
|
||||
components: {
|
||||
orderItem
|
||||
},
|
||||
options: {
|
||||
styleIsolation: 'shared'
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentCount:0,
|
||||
range: [{
|
||||
value: 1,
|
||||
text: "未上传"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: "已上传"
|
||||
}
|
||||
],
|
||||
orderList: [],
|
||||
searchParams: {
|
||||
"pageSize": 10,
|
||||
"currentPage": 1,
|
||||
"params": {
|
||||
"driverId": uni.getStorageSync('user')?.driverId || "",
|
||||
"status": "", //1 ：已下单 2：已发货； 3：已卸货； 4已取消；
|
||||
"uploadFlag": "" //上传费用标识：1：未上传；2：已上传；
|
||||
}
|
||||
},
|
||||
refresherTriggered: false,
|
||||
filterGroups: [{
|
||||
label: "全部",
|
||||
value: ""
|
||||
},
|
||||
{
|
||||
label: "待发货",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "待卸货",
|
||||
value: "2"
|
||||
},
|
||||
{
|
||||
label: "已卸货",
|
||||
value: "3"
|
||||
},
|
||||
{
|
||||
label: "已取消",
|
||||
value: "4"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
onShow() {},
|
||||
methods: {
|
||||
change() {
|
||||
this.refresherrefresh(false)
|
||||
},
|
||||
orderItemFooterClick(e) {
|
||||
if (e.status == '4') return
|
||||
uni.navigateTo({
|
||||
url: `/Enter/pages/${this.tool.orderStatus(e.status).router}/index?orderData=${encodeURIComponent(JSON.stringify(e))}`
|
||||
})
|
||||
},
|
||||
orderItemCenterClick(e) {
|
||||
uni.navigateTo({
|
||||
url:`/Order/pages/details/index?orderData=${encodeURIComponent(JSON.stringify(e))}`
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
orderApi.getOwnFleetOrders(this.searchParams).then(res => {
|
||||
({currentCount:this.currentCount=0} = res.data);
|
||||
if (res.code == 20000) {
|
||||
if (this.searchParams.currentPage !== 1) {
|
||||
this.orderList = this.orderList.concat(res.data.list)
|
||||
} else {
|
||||
this.orderList = res.data.list
|
||||
}
|
||||
}
|
||||
this.refresherTriggered = false
|
||||
})
|
||||
},
|
||||
scrolltolower() {
|
||||
this.searchParams.currentPage += 1;
|
||||
this.getList()
|
||||
},
|
||||
refresherrefresh(isRefresherTriggered=true) {
|
||||
if(isRefresherTriggered) this.refresherTriggered = true;
|
||||
this.searchParams.currentPage = 1;
|
||||
this.getList()
|
||||
},
|
||||
select(e) {
|
||||
this.searchParams.params.status = e.value;
|
||||
this.searchParams.currentPage = 1;
|
||||
this.getList();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .uni-select{
|
||||
border: none !important;
|
||||
}
|
||||
@import 'index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user