kxmall-ui/kxmall-rider-ui/pages/order/order.vue

<template>
	<view class="app">
		<view class="header">
			<view class="header_inner">
				<image src="../../static/order/clock.png"></image>
				<text class="txt1">配送剩余时间<text class="txt2">{{preTime}}</text></text>
			</view>
			<view class="tip">你需要在{{sdTime=='aN:aN'?'':sdTime}}前送达</view>
		</view>
		<view class="goods">
			<view class="goods_tit">商品信息</view>
			<view class="goods_details">
				<view class="detials_l">
					<scroll-view scroll-x="true">
						<image mode="aspectFit" v-for="(item,index) in details.riderItemVoList" :key="index" :src="JSON.parse(item.url)[0].url" class="details_img"></image>
					</scroll-view>
				</view>
				<view class="detials_r">
					<view class="detials_r_inner">
						<text style="margin-left: 20rpx;">共{{count}}件</text>
						<image @click="open()" src="../../static/order/dian.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="count">
			<view class="count_item">
				<text class="txt3">配送费</text>
				<text class="txt4">{{details.freightPrice}}元</text>
			</view>
			<view class="count_item nobor">
				<text class="txt3">商品费用</text>
				<text class="txt4 txt5">￥{{details.totalPrice}}</text>
			</view>
			<view class="count_item nobor">
				<text class="txt3">合计</text>
				<text class="txt4 txt5">￥{{ (parseFloat(details.totalPrice) + parseFloat(details.freightPrice)).toFixed(2)}}</text>
			</view>
		</view>
		<view class="count">
			<view class="count_item">
				<text class="txt3">配送信息</text>
				<text class="txt4"></text>
			</view>
			<view class="count_item">
				<text class="txt3 txt6">收货人</text>
				<text class="txt4 txt5 txt7">{{details.consignee}}</text>
			</view>
			<view class="count_item">
				<text class="txt3 txt6">联系电话</text>
				<text class="txt4 txt5 txt7">{{details.phone}}</text>
			</view>
			<view class="count_item nobor">
				<text class="txt3 txt6">收货地址</text>
				<text class="txt4 txt5 txt7">{{details.province}}{{details.city}}{{details.county}}{{details.address}}</text>
			</view>
		</view>
		<view class="count">
			<view class="count_item">
				<text class="txt3">订单信息</text>
				<text class="txt4"></text>
			</view>
			<view class="count_item">
				<text class="txt3 txt6">订单编号</text>
				<text class="txt4 txt5 txt7">{{details.orderNo}}<text style="padding-left: 20rpx;color: #3662DD;" @click="copy(details.orderNo)">复制</text> </text>
			</view>
			<view class="count_item">
				<text class="txt3 txt6">备注信息</text>
				<text class="txt4 txt5 txt7">{{details.mono || ''}}</text>
			</view>
			<view class="count_item">
				<text class="txt3 txt6">支付方式</text>
				<text class="txt4 txt5 txt7">{{details.payChannel}}</text>
			</view>
			<view class="count_item">
				<text class="txt3 txt6">下单时间</text>
				<text class="txt4 txt5 txt7">{{orderCreateTime}}</text>
			</view>
			<view class="count_item nobor">
				<text class="txt3 txt6">支付时间</text>
				<text class="txt4 txt5 txt7">{{payTime}}</text>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup_mask">
				<view class="popup_mask_tit">
					<text class="pop_t1">配送清单</text>
					<text class="pop_t2">共{{count}}件</text>
					<image @click="closePop()" src="../../static/order/mask_close.png"></image>
				</view>
				<view class="pop_item" v-for="(item,index) in details.riderItemVoList" :key="'dt'+index">
					<view class="pop_item_l">
						<view class="item_l_l">
							<image mode="aspectFit" class="pil_img" :src="JSON.parse(item.url)[0].url"></image>
						</view>
						<view class="item_l_r">
							<view>{{item.spuName}}</view>
							<view style="padding-top: 10rpx;">x{{item.amount}}</view>
						</view>
						<!-- <image class="pil_img" src="../../static/login/logo.png"></image>
						<text>上海小白菜\n<text>x2</text> </text> -->
					</view>
					<view class="pop_item_r">
						￥{{item.unitPrice*item.amount}}
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniPopup
		},
		computed: {
			...mapState(['token', 'userInfo'])
		},
		data() {
			return {
				goods: [1, 2, 3, 4, 5],
				id: '',
				details: '',
				preTime: '',
				count:0,
				sdTime:'',
				orderCreateTime:'',
				payTime:'',
				interval:'',
				flag:false,
			}
		},
		onLoad(e) {
			this.getDetails(e.id)
		},
		onHide() {
			clearInterval(this.interval)
		},
		methods: {
			closePop(){
				this.$refs.popup.close()
			},
			open() {
				this.$refs.popup.open()
			},
			copy(msg){
			  uni.setClipboardData({
			      data: msg,
			      success: function () {
			          uni.showToast({
			          	title:'复制成功',
						icon:'none',
						duration:1500
			          })
			      }
			  });
			},
			getDetails(id) {
				let that = this
				let user=uni.getStorageSync("userInfo")
				let params = {
					riderOrderId: id
				}
				that.request("get","rider/task/detail",that.token,params).then(res => {
					if (res.code == 200) {
						let num=0
						for(let i=0;i<res.data.riderItemVoList.length;i++){
							res.data.riderItemVoList[i].amount=parseInt(res.data.riderItemVoList[i].amount)
							num=num+parseInt(res.data.riderItemVoList[i].amount)
						}
						that.details = res.data
						// console.log(that.details)
						that.count=num
						that.orderCreateTime=that.dateFtt("yyyy-MM-dd hh:mm:ss", new Date(that.details.orderCreateTime))
						that.payTime=that.dateFtt("yyyy-MM-dd hh:mm:ss", new Date(that.details.payTime))
						that.sdTime=that.dateFtt("hh:mm", new Date(that.details.predictTime))
						// console.log(that.dateFtt("yyyy-MM-dd hh:mm:ss", new Date(that.details.predictTime)))
						that.preTime = new Date(that.details.predictTime).getTime()>=new Date().getTime()?that.dateFtt("hh:mm:ss", new Date(that.details.predictTime)):0
					    if(new Date(that.details.predictTime).getTime()>=new Date().getTime()){
							that.preTime=true
						}
					}
				})

				that.interval = setInterval(function() {
					// console.log(new Date(that.details.predictTime).getTime()>=new Date().getTime())
					if (new Date(that.details.predictTime).getTime()>new Date().getTime()) {

						let d = new Date(that.details.predictTime).getTime() - new Date().getTime()
						// that.preTime = that.dateFtt("hh:mm:ss", d)
						//计算出相差天数
						var days=Math.floor(d/(24*3600*1000))

						//计算出小时数

						var leave1=d%(24*3600*1000)    //计算天数后剩余的毫秒数
						var hours=Math.floor(leave1/(3600*1000))
						//计算相差分钟数
						var leave2=leave1%(3600*1000)        //计算小时数后剩余的毫秒数
						var minutes=Math.floor(leave2/(60*1000))


						//计算相差秒数
						var leave3=leave2%(60*1000)      //计算分钟数后剩余的毫秒数
						var seconds=Math.round(leave3/1000)
						 that.preTime=days>0?(days+":"+hours+":"+minutes+":"+seconds):(hours>0?(hours+":"+minutes+":"+seconds):(minutes+":"+seconds))
						//alert(" 相差 "+days+"天 "+hours+"小时 "+minutes+" 分钟"+seconds+" 秒")
					} else {
						that.preTime=0
						//console.log(that.flag)
						if(that.flag==true){
						let nav_index=2
							uni.redirectTo({
								url:'../task/task?nav_index='+nav_index
							})
						}

						clearInterval(that.interval)
					}
				}, 1000)
			}
		}
	}
</script>

<style scoped>
	scroll-view {
		white-space: nowrap;
		height: 110rpx;
		width: 100%;
		margin-top: 42rpx;
		box-sizing: border-box;
	}
    .popup_mask{
		width: 690rpx;
		padding: 0 30rpx;
		height: 500rpx;
		background-color: #FFFFFF;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		padding-bottom: 6rpx;
	}
	.popup_mask_tit{
		height: 104rpx;
		line-height: 104rpx;
		position: relative;
	}
	.pop_t1{
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
	}
	.pop_t2{
		font-size: 28rpx;
		color: #1B1C33;
		margin-left: 40rpx;
	}
	.popup_mask_tit image{
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		right: 20rpx;
		top: 38rpx;
	}
	.pop_item{
		height: 184rpx;
		border-bottom: 2rpx solid #F1F1F1;
		display: flex;
		flex-direction: row;
	}
	.pop_item_l{
		width: 520rpx;
		height: 184rpx;
		display: flex;
		flex-direction: row;
	}
	.item_l_l{
		width: 168rpx;
		height: 148rpx;
		padding-top: 36rpx;
	}
	.item_l_r{
		width: 452rpx;
		height: 148rpx;
		padding-top: 36rpx;
	}
	.pop_item_r{
		width: 150rpx;
		height: 148rpx;
		padding-top: 36rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		text-align: right;
	}
	.pil_img{
		width: 118rpx;
		height: 110rpx;
	}
	.item_l_r view{
		font-size: 32rpx;
		color: #333333;
	}
	.test {
		width: 220upx;
		height: 220upx;
		display: inline-block;
		background-color: red;
	}

	.app {
		background-color: #F6F6F6;
	}

	.header {
		text-align: center;
		background-color: #FFFFFF;
	}

	.header_inner {
		display: inline-block;
		padding-top: 90rpx;

	}

	.header_inner image {
		width: 48rpx;
		height: 48rpx;
		position: relative;
		top: 8rpx;
	}

	.txt1 {
		font-size: 40rpx;
		color: #000000;
		font-weight: bold;
		margin-left: 24rpx;
	}

	.txt2 {
		color: #3662DD;
		padding-left: 20rpx;
	}

	.tip {
		text-align: center;
		font-size: 32rpx;
		color: #717171;
		padding-top: 24rpx;
		padding-bottom: 70rpx;
	}

	.goods {
		height: 282rpx;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		padding: 0 30rpx;
	}

	.goods_tit {
		height: 86rpx;
		line-height: 86rpx;
		border-bottom: 2rpx solid #F1F1F1;
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
	}

	.goods_details {
		height: 194rpx;
		display: flex;
		flex-direction: row;
	}

	.detials_l {
		width: 496rpx;
		height: 194rpx;
	}

	.detials_r {
		width: 174rpx;
		height: 194rpx;
	}

	.details_img {
		display: inline-block;
		width: 118rpx;
		height: 110rpx;
		margin-right: 36rpx;
	}

	.detials_r_inner {
		height: 110rpx;
		margin-top: 42rpx;
		line-height: 110rpx;
		font-size: 28rpx;
		color: #1B1C33;
		position: relative;
	}

	.detials_r_inner image {
		width: 44rpx;
		height: 10rpx;
		position: absolute;
		right: 0;
		top: 48rpx;
	}

	.count {
		margin-top: 20rpx;
		padding: 0 30rpx;
		background-color: #FFFFFF;
	}

	.count_item {
		height: 99rpx;
		line-height: 99rpx;
		border-bottom: 2rpx solid #F1F1F1;
		font-size: 28rpx;

	}

	.txt3,
	.txt5 {
		font-weight: bold;
		color: #333333;
	}

	.txt4 {

		color: #666666;
		float: right;
	}

	.nobor {
		border: none;
	}

	.txt6 {
		color: #999999;
		font-weight: normal;
	}

	.txt7 {
		font-weight: normal;
		color: #333333;
	}
</style>