distribution-uni/package2/other/logistics.vue

<template>
	<view>
		<view>
			<button size="default" type="default" @tap="upOrDown" hover-class="is-hover">{{type == 0?'上线':'下线'}}</button>
		</view>
		<view class="contentPadding">
			<view class="title">
				<i class="iconfont icon-huaban"> 
					今日订单
					<!-- <text @tap="toggle" style="color:red;text-decoration-line: underline;padding-left:30rpx;">（{{waitUpDoorNum}}个待上门取货）</text> -->
					<!-- <view class="btn" @tap="gotoSearchData">
						历史订单 >
					</view> -->
					<view style="text-align: right;width: 44%;float: right;font-size: 26rpx;padding-right: 20rpx;">
						<text v-if="type == 0">您现在是“<text>离线</text>”状态</text>
						<text v-if="type == 1">您现在是“<text style="color: chartreuse;">在线</text>”状态</text>
					</view>
				</i>
			</view>
		</view>
		<view class="item-wrapper">
			<u-subsection :list="list" :current="current" @change="sectionChange"></u-subsection>
			<view class="ulList" v-if="bList.length > 0">
				<ul>
					<li v-for="(item,index ) in bList" :key="index">
						<uni-card :title="item.shopName" :sub-title="item.getOrderAddress+'（'+item.mobile+'）'">
							<view v-if="this.current != 3 && item.workerMobile" @tap="daCall(item.workerMobile)" style="width: 150rpx;font-size: 26rpx;text-decoration-line: underline;color: blue;position: absolute;top: 20rpx;right: 10rpx;">
								联系拉包工
							</view>
							<view v-if="this.current == 3 && item.createByPhone"  @tap="daCall(item.createByPhone)" style="width: 125rpx;font-size: 26rpx;text-decoration-line: underline;color: blue;position: absolute;top: 20rpx;right: 0;">
								联系店铺
							</view>
							<view @tap="toggle('zhuan',item.orderId)" style="width: 110rpx;font-size: 26rpx;text-decoration-line: underline;color: blue;position: absolute;top: 20rpx;right: 160rpx;">
								转单
							</view>
							<view class="uni-body">
								<text class="cardText">{{item.orderAddress}}</text>
							</view>
							<view class="uni-body">
								<text class="cardText"> 下单时间：</text>
								<text class="priceText"> {{item.createTime}}</text>
							</view>
							<view class="uni-body" v-if="current != 3">
								<text class="cardText"> 订单编号：</text>
								<text class="priceText"> {{item.orderId}}</text>
							</view>
							<view style="display: flex;height: 80rpx;line-height: 80rpx;">
								<view class="copy-text" @tap="copyAddress(item,'fa')">复制发货人地址</view>
								<view class="copy-text" @tap="copyAddress(item,'shou')">复制收货人地址</view>
							</view>	
						</uni-card>
					</li>
				</ul>
			</view>
		</view>
		<u-loadmore :status="status" />
		<u-modal :show="modalShow" title="详细地址" :content='content' @confirm="modalShow = false"></u-modal>
		<uni-fab ref="fab" :content="content" :horizontal="horizontal"
			@trigger="trigger" />
		<!-- 待上门订单弹窗 -->
		<uni-popup ref="popup" background-color="#fff" :is-mask-click="true">
			<view class="type-popup" style="margin-bottom: 0;border-radius: 0;">
				<view style="height: 80rpx;font-size: 36rpx;font-weight: bold;line-height: 80rpx;text-align: center;">
					待上门订单
				</view>
					<view class="ulList">
						<ul>
							<li v-for="(item,index) in upDoorList" :key="index">
								<uni-card :title="'店铺名称:'+item.shopName" :sub-title="item.shopAddress+'（'+item.createByPhone+'）'">
									<view class="uni-body">
										<text class="cardText">{{item.province + item.city + item.area}}</text>
									</view>
									<view class="uni-body">
										<text class="cardText"> 下单时间：</text>
										<text class="priceText"> {{item.createTime}}</text>
									</view>
									<view class="uni-body" v-if="current != 3">
										<text class="cardText"> 客户姓名：</text>
										<text class="priceText"> {{item.userName}}</text>
									</view>
									<view style="display: flex;height: 80rpx;line-height: 80rpx;">
										<view class="copy-text" @tap="upDoorCopyAddress(item,'fa')">复制发货人地址</view>
										<view class="copy-text" @tap="upDoorCopyAddress(item,'shou')">复制收货人地址</view>
									</view>
									<view class="popup-btn" @tap="getSale(item)">确认取件</view>
								</uni-card>
							</li>
						</ul>
					</view>
			</view>
		</uni-popup>
		<!-- 复制地址选择弹窗 -->
		<uni-popup ref="copyPopup" background-color="#fff" :is-mask-click="true">
			<view class="type-popup" style="height:600rpx;margin-bottom: 0;border-radius: 0;">
				<view style="height: 80rpx;font-size: 36rpx;font-weight: bold;line-height: 80rpx;text-align: center;">
					长按以下内容复制
				</view>
				<view class="copy-box" v-if="copyType == 'fa'">
					<view @longpress="copyText(copyItem.shopName)" style="margin-top:40rpx;">
						<view>店铺名：{{copyItem.shopName}}</view>
					</view>
					<view @longpress="copyText(copyItem.createBy || copyItem.createByPhone)">
						<view>电话：{{copyItem.createBy || copyItem.createByPhone}}</view>
					</view>
					<view @longpress="copyText('河北省沧州市运河区')">
						<view>地区：河北省沧州市运河区</view>
					</view>
					<view @longpress="copyText(copyItem.getOrderAddress)">
						<view>详细地址：{{copyItem.getOrderAddress}}</view>
					</view>
				</view>
				<view class="copy-box" v-if="copyType == 'shou'">
					<view @longpress="copyText(copyItem.userName)" style="margin-top:40rpx;">
						<view>客户名：{{copyItem.userName}}</view>
					</view>
					<view @longpress="copyText(copyItem.userPhone || copyItem.userMobile)">
						<view>电话：{{copyItem.userPhone || copyItem.userMobile}}</view>
					</view>
					<view @longpress="copyText(copyItem.province + copyItem.city + copyItem.area,'orderAddress')">
						<view>地区：{{copyItem.province + copyItem.city + copyItem.area}}</view>
					</view>
					<view @longpress="copyText(copyItem.receiveAddress || copyItem.orderAddress,'orderAddress')">
						<view>详细地址：{{copyItem.receiveAddress || (copyItem.orderAddress.indexOf("-") == -1?copyItem.orderAddress:copyItem.orderAddress.split(' ')[3])}}</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 转单弹窗 -->
		<uni-popup ref="zhuanPopup" background-color="#fff" :is-mask-click="true">
			<view class="type-popup" style="margin-bottom: 0;border-radius: 0;">
				<view style="height: 80rpx;font-size: 36rpx;font-weight: bold;line-height: 80rpx;text-align: center;">
					请选择要转单的公司
				</view>
				<view class="title-box">
					<uni-search-bar class="uni-mt-10" radius="5" placeholder="请输入物流名称" cancelButton="none"
						@confirm="search" @clear="clearSearch" />
				</view>
				<u-subsection :list="logistics" :current="logisticsCurrent" @change="logisticsChange"></u-subsection>
				<view class="ulList">
					<ul>
						<li v-for="(item,index) in logisticsList" :key="index" style="height: 120rpx;display: flex;flex-direction: column;line-height: 60rpx;padding-left: 20rpx;border-bottom: 1px solid #eee;position: relative;">
							<view>
								公司名称：{{item.companyName}}
							</view>
							<view>
								公司电话：{{item.mobile}}
							</view>
							<view @tap="zhuandan(item)" style="position: absolute;top: 30rpx;right: 10px;height: 30px;font-size: 15px;width: 40px;background: #5fd9ee;color: #fff;text-align: center;border-radius: 5px;">转单</view>
						</li>
					</ul>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import tui from '../../common/httpRequest.js'

	export default {
		data() {
			return {
				list: ['待接单', '待取货', '待送达','店铺自送'],
				logistics:['长途物流','短途物流'],
				modalShow: false,
				content:'地址',
				orderStatus:0,
				status: 'loadmore',
				endDate: '',
				saleId:'',
				startDate: '',
				transCompany: '',
				totalPages:0,
				pages:1,
				bList: [],
				logisticsList:[],
				horizontal: 'right',
				content: [{
					iconPath: '/static/images/tabbar/home.png',
					selectedIconPath: '/static/images/tabbar/home-sel.png',
					text: '线路配置',
					active: false
				},{
					iconPath: '/static/images/tabbar/home.png',
					selectedIconPath: '/static/images/tabbar/home-sel.png',
					text: '扣减记录',
					active: false
				},{
					iconPath: '/static/images/tabbar/home.png',
					selectedIconPath: '/static/images/tabbar/home-sel.png',
					text: '切换物流',
					active: false
				},{
					iconPath: '/static/images/tabbar/home.png',
					selectedIconPath: '/static/images/tabbar/home-sel.png',
					text: '退出登录',
					active: false
				}],
				id:'',
				type:'',
				companyName:'',
				current:0,
				logisticsCurrent:0,
				waitUpDoorNum:0,
				upDoorList:[],
				copyType:'',
				copyItem:[],
				searchName:''
			}
		},
		created() {
			uni.hideHomeButton() //左上角HOME按钮
			
		},
		filters:{
			orderSplit(str){
				return str.slice(-4);
			}
		},
		onReachBottom() {
			if (this.pages >= this.totalPages) return;
			this.status = 'loading';
			this.pages = ++this.pages;
			if(this.current == 3){
				this.getZTList();
			}else{
				this.getList();
			}
		},
		onShow(){
			this.id = uni.getStorageSync('transCompany')
			this.companyName = uni.getStorageSync('companyName')
			this.type = uni.getStorageSync('isOnLine')
			const date = this.formatDate(new Date(), 'YYYY-MM-DD')
			this.startDate = date
			this.endDate = date
			this.transCompany = this.id
			this.getList()
			this.waitPickUp()
		},
		methods: {
			//查询上门取件数量
			waitPickUp(){
				uni.request({
					url: this.tui.interfaceUrl() + '/app/sale/getSaleByCompanyId',
					data: {
						companyId:this.id,
						modeOfService:2,
						status:8,
						endDate:this.endDate,
						startDate:this.startDate,
						pageNum:this.pages,
						pageSize:10
					},
					header: {
						'content-type': 'application/json',
						'appWLToken': this.tui.getToken()
					},
					method: 'POST', //'GET','POST'
					dataType: 'json',
					success: (res) => {
						if (res.data.code == 200){
							this.upDoorList = res.data.result.records
							this.waitUpDoorNum = res.data.result.total
						}
					},
					fail: (res) => {
						this.tui.toast("网络不给力，请稍后再试~")
					}
				})
			},
			toggle(type,saleId){
				if(type=='zhuan'){
					this.logisticsChange(0)
					this.saleId = saleId
					this.$refs.zhuanPopup.open()
				}else{
					this.$refs.popup.open()
				}
			},
			getSale(item){
				uni.request({
					url: this.tui.interfaceUrl() + '/app/sale/companyGetSale',
					data: {
						saleId:item.saleId
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'appWLToken': this.tui.getToken()
					},
					method: 'POST', //'GET','POST'
					dataType: 'json',
					success: (res) => {
						if (res.data.code == 200){
							this.tui.toast("确认取货成功")
							setTimeout(res => {
								this.waitPickUp()
							}, 1000)
							
						}
					},
					fail: (res) => {
						this.tui.toast("网络不给力，请稍后再试~")
					}
				})
			},
			upOrDown(){
				var url
				if(this.type == 1){ //上线状态
					url = '/app/logitics/offLine'
				}else{ //离线状态
					url = '/app/logitics/onLine'
				}
				uni.request({
					url: this.tui.interfaceUrl() + url,
					data: {
						id:this.id
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'appWLToken': this.tui.getToken()
					},
					method: 'POST', //'GET','POST'
					dataType: 'json',
					success: (res) => {
						if (res.data.code == 200){
							if(this.type == 1){
								tui.toast("下线成功")
								uni.setStorageSync('isOnLine', 0)
								this.type = 0
							}else{
								tui.toast("上线成功")
								uni.setStorageSync('isOnLine', 1)
								this.type = 1
							}
							uni.reLaunch({
								url: '/package2/other/logistics'
							});
						}
					},
					fail: (res) => {
						this.tui.toast("网络不给力，请稍后再试~")
					}
				})
			},
			copyText(text,type){
				
				if(type == 'orderAddress'){
					let data = ""
					if(text.indexOf("-") == -1){ 
						data = text
					}else{
						data = text.split(" ")[3]
					}
					uni.setClipboardData({
						data: data,
						success: function () {
							
						}
					});
				}else{
					uni.setClipboardData({
						data: text,
						success: function () {
							
						}
					});
				}
				
			},
			//复制地址
			copyAddress(item,type){
				
				this.copyType = type
				this.copyItem = item
				this.$refs.copyPopup.open()
			},
			//复制地址
			upDoorCopyAddress(item,type){
				
				this.copeType = type
				this.copeItem = item
				this.$refs.copyPopup.open()
			},
			daCall(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			logisticsChange(index){
				let that = this
				this.logisticsCurrent = index
				this.logisticsList = []
				this.pages = 1
				let data = {}
				if(index == 0){
					data = {
						pageNumber: 1,
						pageSize: 100,
						signCompany: 0,
						companyName: this.searchName
					}
				}else if(index == 1){
					data = {
						pageNumber: 1,
						pageSize: 100,
						signCompany: 4,
						companyName: this.searchName
					}
				}
				uni.request({
					url: that.tui.interfaceUrl() + '/app/logitics/getByCondition',
					data: data,
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'appWLToken': that.tui.getToken()
					},
					method: 'GET', //'GET','POST'
					dataType: 'json',
					success: (res) => {
						if (res.data.code == 200){
							that.logisticsList = res.data.result.content
						}
					},
					fail: (res) => {
						that.tui.toast("网络不给力，请稍后再试~")
					}
				})
			},
			sectionChange(index) {
				this.current = index
				this.bList = []
				this.pages = 1
				if(index == 2){
					this.orderStatus = 3
					this.getList()
				}else if(index == 3){
					this.getZTList()
				}else{
					this.orderStatus = index
					this.getList()
				}	
			},
			zhuandan(item){
				let that = this;
				uni.request({
					url: that.tui.interfaceUrl() + '/app/sale/changeCompany',
					data: {
						saleId:that.saleId,
						companyId: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 == 200){
							that.$refs.zhuanPopup.close()
							that.getList()
							setTimeout(res=>{
								that.tui.toast("转单成功")
							},500)
							
						}
					},
					fail: (res) => {
						that.tui.toast("网络不给力，请稍后再试~")
					}
				})
			},
			//顶部搜索框
			search(res) {
				this.searchName = res.value
				this.logisticsChange(this.logisticsCurrent)
			},
			clearSearch(){
				this.searchName = ''
				this.logisticsChange(this.logisticsCurrent)
			},
			trigger(e) {
				let that = this;
				if(e.index == 0){
					uni.navigateTo({
						url: `/package2/other/logisticsAddress`
					})
				}else if(e.index == 1){
					uni.navigateTo({
						url: `/package2/other/companyLog`
					})
				}else if(e.index == 2){
					uni.navigateTo({
						url: `/package2/index/checkShop?type=wuliu`
					})
				}else{
					uni.showModal({
						title: "提示",
						content: "确定退出登录吗？",
						success: function(res) {
							if (res.confirm) {
								uni.request({
									url: that.tui.interfaceUrl() + '/auth/loginOutOfCompany',
									data: {
										companyId:that.id,
										companyName:that.companyName
									},
									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){
											that.tui.toast("退出登录成功")
											uni.clearStorage();
											uni.navigateTo({
												url: '/package2/login/login'
											})
										}
									},
									fail: (res) => {
										that.tui.toast("网络不给力，请稍后再试~")
									}
								})
							}
						}
					})
				}
				
			},
			
			getZTList() {
				this.status = 'loading';
				uni.request({
					url: this.tui.interfaceUrl() + '/app/sale/getSaleByCompanyId',
					data: {
						endDate:this.endDate,
						startDate:this.startDate,
						companyId:this.transCompany,
						pageNum:this.pages,
						pageSize:10,
						transportType:2
					},
					header: {
						'content-type': 'application/json',
						'appWLToken': this.tui.getToken()
					},
					method: 'POST', //'GET','POST'
					dataType: 'json',
					success: (res) => {
						this.status = 'nomore';
						if (res.data.code == 200){
							for(var i=0;i<res.data.result.records.length;i++){
								res.data.result.records[i].getOrderAddress = res.data.result.records[i].shopAddress
								res.data.result.records[i].mobile = res.data.result.records[i].createByPhone
								res.data.result.records[i].orderAddress = res.data.result.records[i].province + res.data.result.records[i].city + res.data.result.records[i].area + res.data.result.records[i].receiveAddress
							}
							if (this.pages == 1) {
								this.bList = res.data.result.records
							} else {
								this.bList = [...this.bList, ...res.data.result.records]
							}
							this.totalPages = res.data.result.totalPages
						}
						
					},
					fail: (res) => {
						this.tui.toast("网络不给力，请稍后再试~")
					}
				})
			},
			getList() {
				this.status = 'loading';
				uni.request({
					url: this.tui.interfaceUrl() + '/order/getByCondition',
					data: {
						orderStatus:this.orderStatus,
						endDate: this.endDate,
						startDate: this.startDate,
						transCompany: this.transCompany,
						pageNumber:this.pages,
						pageSize:10
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'appWLToken': this.tui.getToken()
					},
					method: 'GET', //'GET','POST'
					dataType: 'json',
					success: (res) => {
						this.status = 'nomore';
						if (res.data.code == 200){
							this.bList = res.data.result.content
							if (this.pages == 1) {
								this.bList = res.data.result.content
							} else {
								this.bList = [...this.bList, ...res.data.result.content]
							}
							this.totalPages = res.data.result.totalPages
						}
					},
					fail: (res) => {
						this.tui.toast("网络不给力，请稍后再试~")
					}
				})
			},
			gotoInfo() {
				uni.navigateTo({
					url: `/package2/index/shopInfo`
				})
			},
			gotoSearchData() {
				uni.navigateTo({
					url: '/package2/other/logisticsDetail'
				})
			},
			formatDate(date, fmt) {
				var o = {
					'M+': date.getMonth() + 1, //月份
					'D+': date.getDate(), //日
					'H+': date.getHours(), //小时
					'm+': date.getMinutes(), //分
					's+': date.getSeconds(), //秒
					'q+': Math.floor((date.getMonth() + 3) / 3), //季度
					'S': date.getMilliseconds() //毫秒
				};
				if (/(Y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
				for (var k in o)
					if (new RegExp('(' + k + ')').test(fmt))
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k])
							.length)));
				return fmt;
			}
		}
	}
</script>

<style lang="scss" scoped>
	button {
		color: #ffffff;
		background: #5fd9ee;
		width: 90%;
		margin: 20rpx auto;
	}

	.example-body {}

	.shop-choose {
		padding: 25upx 15upx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.shop-name {
			flex-basis: 150upx;
		}
	}

	.item-wrapper {
		background-color: #fff;
		overflow: hidden;
	}

	.text {
		width: 600upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.copy-text{
		text-align:center;
		flex:1;
		color: blue;
		text-decoration-line: underline;
	}
	.contentPadding {
		padding: 0 20upx;
		background-color: #fff;
		color: #909399;

		.title {
			padding-left: 20rpx;
			font-size: 32rpx;
			color: #303133;
			line-height: 66rpx;

			image {
				display: inline-block;
				width: 40rpx;
				vertical-align: middle;
			}

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

		.grid-text {
			font-size: 28rpx;
			margin-bottom: 26rpx;
		}
	}
	.type-popup{
		width: 600rpx;
		height: 1200rpx;
		overflow: scroll;
		background: #fff;
		border-radius: 10px;
		position: relative;
		margin-bottom: 40rpx;
	}
	.popup-btn{
		width: 120rpx;
		height: 60rpx;
		border-radius: 10px;
		color: #fff;
		font-size: 24rpx;
		line-height: 60rpx;
		text-align: center;
		background: linear-gradient(90deg, #60F3FF, #088FEB);
		float: right;
		margin: 0 10rpx 20rpx 0;
	}
	.copy-box{
		width: 95%;
		margin:0 auto;
		view{
			height: 100rpx;
			line-height: 100rpx;
			font-size: 30rpx;
			text-align: center;
		}
	}
</style>