distribution-uni/package2/other/newLogisticsIndex.vue

<template>
	<view>
		<cmd-nav-bar iconOne="menu" @iconOne="goToInfo" :title="shopName" background-color="#fff"></cmd-nav-bar>
		<view class="IndexContent">
			<view class="contentPadding">
				<view style="width: 95%;display: flex;margin: 0 auto;">
					<view class="top-btn" style="width: 100%;" @tap="gokaidan">开单</view>
				</view>
				<view class="title">
					<i class="iconfont icon-xiaoshouyuce"> 今日营收详情
						<view class="btn" @tap="gotoSearchData">
							数据统计 >
						</view>
					</i>
				</view>
				<view style="display: flex;text-align: center;font-size: 30rpx;">
					<view class="title-four" @tap='shijiPrice = true'>
						<view style="line-height:80rpx;font-size:34rpx;">{{orderStatistics.totalFreight!=null?orderStatistics.totalFreight:0}}</view>
						<view>客户运费</view>
					</view>
					<view class="title-four">
						<view style="line-height:80rpx;font-size:34rpx;">{{orderStatistics.totalOrder!=null?orderStatistics.totalOrder:0}}</view>
						<view>总单数</view>
					</view>
					<view class="title-four">
						<view style="line-height:80rpx;font-size:34rpx;">{{orderStatistics.totalWeight!=null?orderStatistics.totalWeight:0}}</view>
						<view>总重量</view>
					</view>
					<view class="title-four">
						<view style="line-height:80rpx;font-size:34rpx;">{{orderStatistics.totalCount!=null?orderStatistics.totalCount:0}}</view>
						<view>总件数</view>
					</view>
				</view>
			</view>
			<view class="contentPadding" style="margin-top: 20rpx;">
				<view>
					<uni-datetime-picker style="margin-bottom:10px;" v-model="range" @change="searchList" type="daterange" />
					<uni-search-bar class="uni-mt-10" radius="5" placeholder="输入线路/物流公司/收发货人搜索" cancelButton="none"
						@confirm="searchList" @clear="searchList" />
				</view>
				<view style="display: flex;width: 95%;margin: 0 auto;">
					<uni-data-select v-model="lineValue" :localdata="lineList" @change="lineChange" placeholder="线路" style="width: 49%;margin: 0 1.5%;"></uni-data-select>
					<!-- <uni-data-select v-model="companyValue" :localdata="comPanyList" @change="companyChange" placeholder="物流公司" style="width: 32%;margin: 0 1.5%;"></uni-data-select> -->
					<uni-data-select v-model="stationName" :localdata="arrivalStationList" @change="stationChange" placeholder="到达站" style="width: 49%;"></uni-data-select>
				</view>
				<view class="title">
					<i class="iconfont icon-wenjianliebiao">订单列表</i>
				</view>
				<ul class="inventoryList" v-if="orderList.length > 0">
					<li v-for="(item,index) in orderList" :key="index">
						<uni-card :title="item.companyName == null ?'暂无':item.companyName"
							:sub-title="item.createTime" :extra="'￥'+(item.allCost == null ?'暂无':item.allCost)"
							@tap="gotoDetail(item)">
							<view class="uni-body"> 
								<text class="cardText">单号:</text>
								{{item.orderNumber}}
							</view>
							<view class="uni-body">
								{{item.goStationName}}
								<text class="cardText">→</text>
								{{item.arrivalStationName}}
							</view>
							<view class="uni-body">
								(发){{ item.shipperName == null ?'暂无':item.shipperName}} -
								(收){{ item.receiverName == null ?'暂无':item.receiverName }}
							</view>
							<view class="uni-body"> 
								<text class="cardText">重量:{{item.weight}}</text>
								<text class="cardText" style="padding-left: 20rpx;">件数:{{item.count}}</text>
							</view>
							<view class="uni-body">
								<text class="cardText">接站人:{{item.receivingUserName}}</text>
							</view>
							<view @tap.stop="goAddOrderPage(item)" style="position: absolute;bottom: 20rpx;right:  20rpx;color: #00B5FF;">
								修改订单
							</view>
							<view @tap.stop="delOrder(item)" style="position: absolute;bottom: 100rpx;right:  20rpx;color: #00B5FF;">
								删除订单
							</view>
							<view v-if="item.changeCount != '0'" style="position: absolute;top: 140rpx;right: 20rpx;color: #00B5FF;">
								修改次数:{{item.changeCount}}
							</view>
						</uni-card>
					</li>
				</ul>
				<u-empty v-else mode="order" text="暂无物流订单"></u-empty>
			</view>
		</view>
		<u-popup :show="settingShow1" @close="settingShow1 = false" closeOnClickOverlay mode="left" safeAreaInsetTop>
			<view class="popup-content">
				<view style="z-index:999">
					<u-cell-group>
						<u-cell icon="grid-fill" url="/package2/other/logisticsPeopleList" title="人员管理" clickable isLink
							arrow-direction="left"></u-cell>
						<u-cell v-if="companyId == '1782981706819702784' || companyId == '1751796589518786560' || companyId == '1899370468356526080' || companyId == '1898907758179258368' || companyId == '1899371352842964992'" icon="grid-fill" url="/package2/other/stationList" title="到达站管理" clickable isLink
							arrow-direction="left"></u-cell>
						<u-cell icon="grid-fill" url="/package2/other/upCarRecord" title="装车记录" clickable isLink
							arrow-direction="left"></u-cell>
						<u-cell icon="setting-fill" url="/package2/other/logisticsSystemSet" title="系统配置" clickable isLink
							arrow-direction="left"></u-cell>
						<u-cell icon="setting-fill" v-if="shopName == '测试勿选'" url="/package2/other/internationalLogistics" title="国际物流" clickable isLink
							arrow-direction="left"></u-cell>
						<view class="border-line"></view>
						<u-cell icon="rewind-left-fill" @click="goBack" title="退出登录" clickable isLink
							arrow-direction="left"></u-cell>
					</u-cell-group>
				</view>
			</view>
		</u-popup>
		<view v-if="shijiPrice" style="width:100%;height:100%;position: fixed;top: 0;background: rgba(0,0,0,0.7);">
			<view 
				style="position: fixed;margin:auto;height:340rpx;left:0;right:0;top:0;bottom:0;width:600rpx;background:#fff;border-radius: 10px;color: #000;">
				<view style="width:100%;height:80rpx;font-size: 30rpx;text-align: center;line-height: 80rpx;font-weight: bold;">
					运费明细
				</view>
				<view style="width: 95%;height:160rpx;margin: 0 auto;border-top: 1px solid #eee;">
					<view class="tan-lirun">
						<text style="font-weight: bold;margin-top: 20rpx;">1000</text>
						<text>提付</text>
					</view>
					
					<view class="tan-lirun" style="margin: 10px 2% 0 2%;" >
						<text style="font-weight: bold;margin-top: 20rpx;">520</text>
						<text>月付</text>
					</view>
					<view class="tan-lirun">
						<text style="font-weight: bold;margin-top: 20rpx;">1000</text>
						<text>现金</text>
					</view>
				</view>
				
				<view @tap="shijiPrice = false" style="height: 100rpx;width: 100%;line-height: 100rpx;text-align: center;border-top: 1px solid #eee;font-size: 40rpx;">
					确定
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				arrivalStationList:[],
				shopName:'',
				pageNum:1,
				searchStr:'',
				allCount:0,
				shijiPrice: false,
				settingShow1: false,
				orderList:[],
				lineList:[],
				range:[],
				lineValue:'',
				comPanyList:[],
				companyValue:'',
				stationName:'',
				stationValue:{
					stationName:'',
					id:''
				},
				companyId:"",
				itemData:{},
				circuitId:'',
				arrivalStationId:'',
				lineRange:[],
				companyRange:[],
				orderStatistics:{},
				stationRange:[]
			}
		},
		onShareAppMessage() {
			return {
				title: '查看我的物流单',
				imageUrl: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/b28b3d46c21d4f60a334b25f56175cf3.jpg',
				path: '/package2/other/logisticsOrderDetail?item='+ JSON.stringify(this.itemData)
			}
		},
		onShow() {
			this.pageNum = 1
			this.orderList = []
			this.getOrderList()
			this.getStation()
			this.getLine()
			this.getLineByCompany('')
			this.getAllNum()
		},
		onLoad() {
			let that = this;
			this.getMonth();
			this.companyId = uni.getStorageSync('transCompany');
			this.shopName = uni.getStorageSync('companyName');
			uni.setNavigationBarTitle({
				title: this.shopName
			});
		},
		onReachBottom() {
			if (this.pageNum >= this.pages) return;
			this.status = 'loading';
			this.pageNum ++;
			this.getOrderList();
		},
		methods: {
			getLineByCompany(id){
				if(id == ''){
					let data = {
						text:uni.getStorageSync('companyName'),
						value:uni.getStorageSync('transCompany')
					}
					this.comPanyList.push(data)
					return
				}
				uni.request({
					url: this.tui.interfaceUrl() + '/app/logisticsCompanyRoute/getLogisticsCompanyRoutePageList',
					data:{
						pageNum:1,
						pageSize:100,
						companyId:this.companyId,
						companyName:"",
						circuitId:id,
						circuitName:""
					},
					header: {
						'content-type': 'application/json',
						'appWLToken': this.tui.getToken()
					},
					method: 'POST', //'GET','POST'
					dataType: 'json',
					success: (res) => {
						if(res.data.code == 401){
							uni.clearStorage()
							uni.navigateTo({
								url: '/package2/login/login'
							})
						}
						if (res.data.code == 200){
							for (let i = 0; i < res.data.result.records.length; i++) {
								res.data.result.records[i].value = res.data.result.records[i].companyId
								res.data.result.records[i].text = res.data.result.records[i].companyName
							}
							setTimeout(res1=>{
								this.comPanyList = res.data.result.records
							},500)
						}
					},
					fail: (res) => {
						this.tui.toast("网络不给力，请稍后再试~")
					}
				})
			},
			getAllNum(){
				let currentTime = new Date();
				let year = currentTime.getFullYear();
				let month = currentTime.getMonth() + 1; // 月份从0开始，因此需要加1
				let day = currentTime.getDate();
				uni.request({
					url: this.tui.interfaceUrl() + '/app/logisticsOrder/getLogisticsOrderStatistics',
					data:{
						companyId:this.companyId,
						startDate:year+'-'+month+'-'+day,
						endDate:year+'-'+month+'-'+day
					},
					header: {
						'content-type': 'application/json',
						'appWLToken': this.tui.getToken()
					},
					method: 'POST', //'GET','POST'
					dataType: 'json',
					success: (res) => {
						if(res.data.code == 401){
							uni.clearStorage()
							uni.navigateTo({
								url: '/package2/login/login'
							})
						}
						if (res.data.code == 200){
							this.orderStatistics = res.data.result
						}
					},
					fail: (res) => {
						this.tui.toast("网络不给力，请稍后再试~")
					}
				})
			},
			getLine(){
				uni.request({
					url: this.tui.interfaceUrl() + '/app/logisticsCompanyRoute/getLogisticsCompanyRoutePageList',
					data:{
						pageNum:1,
						pageSize:100,
						companyId:uni.getStorageSync('transCompany'),
						companyName:"",
						circuitId:"",
						circuitName:""
					},
					header: {
						'content-type': 'application/json',
						'appWLToken': this.tui.getToken()
					},
					method: 'POST', //'GET','POST'
					dataType: 'json',
					success: (res) => {
						if(res.data.code == 401){
							uni.clearStorage()
							uni.navigateTo({
								url: '/package2/login/login'
							})
						}
						if (res.data.code == 200){
							for (let i = 0; i < res.data.result.records.length; i++) {
								res.data.result.records[i].value = res.data.result.records[i].circuitId
								res.data.result.records[i].text = res.data.result.records[i].circuitName
							}
							setTimeout(res1=>{
								this.lineList = res.data.result.records
							},500)
						}
					},
					fail: (res) => {
						this.tui.toast("网络不给力，请稍后再试~")
					}
				})
			},
			//数据统计
			gotoSearchData() {
				uni.navigateTo({
					url: '/package2/other/logisticsDataStatistics'
				})
			},
			goAddOrderPage(data){
				uni.navigateTo({
					url:'/package2/other/newLogisticsBill?editData='+JSON.stringify(data)
				})
			},
			goToInfo() {
				this.settingShow1 = true
			},
			gotoDetail(item){
				uni.navigateTo({
					url:'/package2/other/logisticsOrderDetail?item='+ JSON.stringify(item)
				})
			},
			getOrderList(){
				let that = this
				uni.request({
					url: this.tui.interfaceUrl() + '/app/logisticsOrder/getLogisticsOrderPageList',
					data:{ //stationId
						pageNum:this.pageNum,
						pageSize:"10",
						companyName:"",
						companyId:this.companyId,
						circuitName:"",
						circuitId:this.circuitId,
						arrivalStationId:this.arrivalStationId,
						shipperName:"",
						shipperMobile:"",
						shipperAddress:"",
						receiverName:"",
						startDate:that.range[0],
						endDate:that.range[1],
						searchStr:this.searchStr
					},
					header: {
						'content-type': 'application/json',
						'appWLToken': this.tui.getToken()
					},
					method: 'POST', //'GET','POST'
					dataType: 'json',
					success: (res) => {
						this.status = 'nomore';
						if(res.data.code == 401){
							uni.clearStorage()
							uni.navigateTo({
								url: '/package2/login/login'
							})
						}
						if (res.data.code == 200){
							if (this.pages == 1) {
								this.orderList = res.data.result.records
							} else {
								this.orderList = [...this.orderList, ...res.data.result.records]
							}
							this.pages = res.data.result.pages
							this.allCount = 0
						}
					},
					fail: (res) => {
						this.tui.toast("网络不给力，请稍后再试~")
					}
				})
			},
			delOrder(item){
				let that = this;
				uni.showModal({
					title: "提示",
					content: "确定删除此条商品吗？",
					success: function(res) {
						uni.showLoading({
							title: '加载中...'
						})
						if (res.confirm) {
							uni.request({
								url: that.tui.interfaceUrl() + '/app/logisticsOrder/deleteLogisticsOrder',
								data:{
									id:item.id
								},
								header: {
									'content-type': 'application/x-www-form-urlencoded',
									'appWLToken': that.tui.getToken()
								},
								method: 'POST', //'GET','POST'
								dataType: 'json',
								success: (res) => {
									if(res.data.code == 401){
										uni.clearStorage()
										uni.navigateTo({
											url: '/package2/login/login'
										})
									}
									if(res.data.code == 200){
										uni.showToast({
											title:'删除成功'
										})
										setTimeout(res1=>{
											that.pageNum = 1
											that.orderList = []
											that.getOrderList()
											that.getAllNum()
										},500)
									}
								},
								fail: (res) => {
									that.tui.toast("网络不给力，请稍后再试~")
								}
							})
						}
						setTimeout(res => {
							uni.hideLoading();
						}, 500)
					}
				})
			},
			//到达站列表
			getStation(){
				uni.request({
					url: this.tui.interfaceUrl() + '/app/logisticsStation/getLogisticsStationListByCompanyId',
					data:{
						companyId:uni.getStorageSync('transCompany')
					},
					header: {
						'content-type': 'application/json',
						'appWLToken': this.tui.getToken()
					},
					method: 'POST', //'GET','POST'
					dataType: 'json',
					success: (res) => {
						if(res.data.code == 401){
							uni.clearStorage()
							uni.navigateTo({
								url: '/package2/login/login'
							})
						}
						if(res.data.code == 200){
							for (let i = 0; i < res.data.result.length; i++) {
								res.data.result[i].value = res.data.result[i].id
								res.data.result[i].text = res.data.result[i].stationName
							}
							setTimeout(res1=>{
								this.arrivalStationList = res.data.result
							},200)
						}
						
					},
					fail: (res) => {
						this.tui.toast("网络不给力，请稍后再试~")
					}
				})
			},
			searchList(res) {
				
				this.searchStr = res.value
				this.pageNum = 1;
				this.orderList = [];
				this.getOrderList()
			},
			goBack(){
				uni.showModal({
					title:'提示',
					content:'确定要退出登录吗？',
					success(res) {
						if(res.confirm){
							uni.clearStorageSync();
							uni.reLaunch({
								url:'/package2/login/login'
							})
						}
					}
				})
				
			},
			gokaidan(){
				uni.navigateTo({
					url:'/package2/other/newLogisticsBill'
				})
			},
			cancelSale(item,type){
				this.tui.request('/app/sale/cancelSale', "POST", {
					id:item.id
				}, true, true).then((res1) => {
					if (res1.code == 200) {
						if (type == 'goPay') {
							this.goSaleGoods(item)
						} else {
							this.getSaleInfo()
						}
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res1) => {})
			},
			//获取当月1日到当前时间
			getMonth() {
				let date = new Date()
				let year = date.getFullYear().toString()   //'年'
				let month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1).toString():(date.getMonth()+1).toString()  //'月'
				let da = date.getDate() < 10 ? '0'+date.getDate().toString():date.getDate().toString()  //'日'
				let end = year + '-' + month + '-' + da  //当天
				this.range = [end,end]
			},
			lineChange(e){
				
				if(e == ''){
					this.comPanyList = []
				}
				this.circuitId = e
				this.getOrderList()
				this.getLineByCompany(e)
			},
			stationChange(e){
				
				if(e == ''){
					this.arrivalStationId = ""
					this.getOrderList()
				}else{
					for(let i=0;i<this.arrivalStationList.length;i++){
						if(this.arrivalStationList[i].id == e){
							this.arrivalStationId = this.arrivalStationList[i].id
							this.getOrderList()
						}
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.top-btn{
		height: 80rpx;
		border-radius: 20rpx;
		background: #00B5FF;
		margin: 0 auto;
		font-size: 35rpx;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		margin-bottom: 20rpx;
	}
	.IndexContent {
		margin-top:180rpx;
		.contentPadding {
			padding: 28upx 20upx;
			background-color: #fff;
			color: #909399;
			.title {
				padding-left: 20rpx;
				font-size: 32rpx;
				color: #303133;
				margin-bottom: 26rpx;
				line-height: 66rpx;

				.btn {
					text-align: right;
					width: 24%;
					float: right;
					font-size: 26rpx;
					color: $u-primary;
				}
			}

			.grid-text {
				font-size: 28rpx;
				margin-bottom: 26rpx;
			}
		}
	}

	.u-grid-item {
		width: 30% !important;
		height: 160rpx;
		background-image: linear-gradient(#84C1FF, #C4E1FF) !important;
		margin-left: 3%;
		border-radius: 30rpx;
		margin-top: 20rpx !important;
		color: #fff !important;

	}
	.u-count-num {
		color: #FFF !important
	}
	.floatRight {
		float: right;
		padding: 14rpx;
		color: $u-primary;
		font-size: 26upx;
	}
	.border-line {
		width: 100%;
		height: 15rpx;
		background: #eee;
	}
	.uni-date {
	    width: 95% !important;
	    margin: 0 auto;
	}
	.tan-lirun{
		margin-top: 20rpx;
		width: 32%;
		height: 60px;
		display: flex;
		flex-direction: column;
		text-align: center;
		float: left;
		background-image: linear-gradient(#84C1FF, #C4E1FF) !important;
		color: #fff;
		border-radius: 10px;
	}
	.title-four{
		width: 23% !important;
		height: 160rpx;
		background-image: linear-gradient(#84C1FF, #C4E1FF) !important;
		margin-left: 2%;
		border-radius: 30rpx;
		margin-top: 20rpx !important;
		color: #fff !important;
	}
</style>