shanxian-work-app/pages/manage/orderDetail.vue

<template>
	<view class="box">
			<map id="map" :longitude="longitude" :latitude="latitude" scale="14" :markers="markers" :polyline="polyline"></map>
		<view class="list1">
			<view style="display:flex;align-items:center;">
				<view class="order">
					<text>订单总计：{{detail.pay_money}}</text>
					<text>调度费用：{{detail.dispatch_money}}</text>
				</view>
				<view class="order">
					<text>订单状态：{{detail.order_status}}</text>
					<text>骑行费用：{{detail.time_money}}</text>
				</view>
			</view>
			<view @click=""  hover-stop-propagation class="user">
				<text style="width:270rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;">用户：{{detail.nickname}}</text>
				<text @click="phoneCall(detail.mobile)">{{detail.mobile}}（点击可拨打）</text>
			</view>
		</view>
		<view class="discounts">
			<view>总优惠金额：{{detail.preferential_money}}</view>
			<view style="margin-top:10rpx;">优惠方式：{{detail.preferential_type_name}}</view>
			<!-- <view>
				<view>骑行卡优惠：{{detail.card_preferential_money!="0.00"?detail.card_preferential_money:'无优惠'}}</view>
				<view style="margin-top:10rpx;">优惠券优惠：{{detail.coupon_preferential_money!="0.00"?detail.coupon_preferential_money:'无优惠'}}</view>
			</view> -->
		</view>
		<view class="list2">
			<view>车辆编码：{{detail.bike_no}}</view>
		</view>
		<view class="list2">
			<view>开始时间：{{detail.start_use_bike_time}}</view>
		</view>
		<view class="list2">
			<view>结束时间：{{detail.end_use_bike_time}}</view>
		</view>
		<view class="list2">
			<view>备注：{{detail.remark?detail.remark:'无'}}</view>
		</view>
		<view class="table">
			<view class="tr">
				<view class="time">时间</view>
				<view class="operate">操作</view>
			</view>
			<block  v-for="(item,index) in detail.walletLogs" :key='index'>
				<view class="tr">
					<view class="time">{{item.created_at}}</view>
					<view class="operate">{{item.name}}</view>
				</view>
	
			</block>
			<view class="noOperate flexC" v-if='detail.walletLogs==0'>暂无数据</view>
		</view>
		<view class="table">
			<view class="tr">
				<view class="time">时间</view>
				<view class="operate">操作</view>
			</view>
			<block  v-for="(item,index1) in detail.order_bike_operates" :key='index1'>
				<view class="tr">
					<view class="time">{{item.created_at}}</view>
					<view class="operate">{{item.name}}</view>
				</view>
			
			</block>
			<view class="noOperate flexC" v-if='detail.order_bike_operates==0'>暂无数据</view>
		</view>
	</view>
</template>

<script>
	var app=getApp()
	export default{
		data(){
			return{
				    detail: [], //订单详情
				    polyline: [], //折线
				    longitude: 113.3245211,
				    latitude: 23.10229,
				    markers: [] //标记点
			}
		},
		onLoad(options) {
			 uni.showLoading({
			      title: '加载中...',
			    })
				
				    var url = '';
				    if(options.index==1){
				      url = 'order/detail'
				    }
				    if(options.index==2){
				      url = 'orderRent/detail'
				    }
				    app.request(url+'?order_id=' + options.id, '', 'GET').then(res => {  //普通订单和日租订单
				      uni.hideLoading();
				      console.log(res, '订单详情');
				   
				        this.detail=res.data
				     
				      if (
				        res.data.orderLocations.length == 0 &&
				        res.data.start_location.length == 0 &&
				        res.data.end_location.length == 0
				      ) {
				        uni.showToast({
				          title: '暂无骑行轨迹~',
				          icon: 'none'
				        })
				      } else {
				        let points = res.data.wx_orderLocations;
				        let center = parseInt(points.length / 2);
				        let obj = {};
				        obj.points = points;
				        obj.width = 4;
				        obj.color = '#d56a23';
				        obj.borderWidth = 3;
				        obj.borderColor = '#d56a23';
				          this.polyline=this.polyline.concat(obj)
				       
				        // console.log(self.data.polyline, '折线')
				        //添加开始结束点
				        if (points.length > 0) {
				          var maker = [];
				          maker = maker.concat(points[0]);
				          maker = maker.concat(points[points.length - 1])
				          for (var i = 0; i < maker.length; i++) {
				            maker[i].width = 32;
				            maker[i].height = 32;
				            maker[i].zIndex = 1111;
				          }
				          //在地图上显示两个坐标
				          // maker[0].iconPath = 'http://resource.bike.hanyiyun.com/weapp/start1.png'
				          // maker[1].iconPath = 'http://resource.bike.hanyiyun.com/weapp/end1.png'
						  maker[0].iconPath = '../../static/img/start1.png'
						  maker[1].iconPath = '../../static/img/end1.png'
				             
				           this.markers=maker,
				            this.longitude=points[center].longitude,
				            this.latitude=points[center].latitude
				         
				        }
				      }
				    })
		},
		methods:{
			phoneCall:function(e){
				console.log(e,"这是电话号码")
						   uni.makePhoneCall({
						        phoneNumber: e
						      })
			},
		}
	}
</script>

<style>
	@import url("/static/css/base.css");
	.map{
		width: 100%;
		height: 490rpx;
		margin-bottom: 24rpx;
		background-color: #0EE7FE;

	}
	page {
	  width: 100%;
	  background: #eee;
	}
	
	.box {
	  width: 100%;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  padding-bottom: 30rpx;
	}
	
	.box map {
	  width: 100%;
	  height: 490rpx;
	  margin-bottom: 24rpx;
	}
	
	.box .list1 {
	  height: 159rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	}
	
	.discounts {
	  /* height: 104rpx; */
	  margin-top: 10rpx;
	  padding: 15rpx 0 15rpx 30rpx;
	  /* display: flex;
	  align-items: center; */
	}
	
	/* .discounts>view {
	  margin-top: 10rpx;
	  width: 50%;
	} */
	
	.user {
	  display: flex;
	  align-items: center;
	  margin-top: 10rpx;
	}
	
	.list1 {
	  padding: 0 0 15rpx 30rpx;
	}
	
	.discounts,
	.list1 {
	  width: 690rpx;
	  background: rgba(255, 255, 255, 1);
	  box-shadow: 0px 0px 13rpx 0px rgba(216, 216, 216, 1);
	  border-radius: 10rpx;
	  font-size: 26rpx;
	  color: rgba(77, 77, 77, 1);
	  opacity: 0.8;
	
	  box-sizing: border-box;
	}
	
	.box .list2 {
	  width: 690rpx;
	  height: 88rpx;
	  background: rgba(255, 255, 255, 1);
	  box-shadow: 0px 0px 13rpx 0px rgba(216, 216, 216, 1);
	  border-radius: 10rpx;
	  margin-top: 10rpx;
	  display: flex;
	  align-items: center;
	  font-size: 26rpx;
	  color: rgba(77, 77, 77, 1);
	}
	
	.box .list2 view {
	  padding-left: 30rpx;
	}
	
	.order {
	  display: flex;
	  flex-direction: column;
	  width: 50%;
	}
	
	.order text {
	  margin-top: 10rpx;
	}
	
	
	
	
	.table {
	  margin-top: 10rpx;
	}
	
	.tr {
	  padding: 5rpx 0;
	}
	
	.tr,
	.noOperate {
	  background: #fff;
	  display: flex;
	  width: 690rpx;
	  align-items: center;
	  border-bottom: 1rpx solid #EBEEF5;
	}
	
	.tr:first-child {
	  border-top-left-radius: 10rpx;
	  border-top-right-radius: 10rpx;
	}
	
	.tr:last-child {
	  border-bottom-left-radius: 10rpx;
	  border-bottom-right-radius: 10rpx;
	}
	
	.time {
	  width: 42%;
	  text-align: center;
	  border-right: 1rpx solid #EBEEF5;
	  height: 100%;
	}
	
	.operate {
	  width: 58%;
	  line-height: 1.5;
	}
	
	.time,
	.operate {
	  font-size: 24rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex-wrap: wrap;
	  padding: 13rpx 0;
	}
	
	.th {
	  width: 50%;
	  text-align: center;
	  font-size: 28rpx;
	}
	
	.noOperate {
	  font-size: 26rpx;
	  height: 66rpx;
	}
</style>