<template>
	<!-- 商家查看自己店铺的订单详情 -->
	<!-- 订单 order -->
	<view class="shoporderdetale xiangq yocode">
		
		<view class="beijingimg" style="height:80px">
			<!-- <view class="onetitle">{{detail.orderstatus}}</view>
			<view class="twotitle">{{detail.statusdesc}}</view> -->
		</view>
		<view class="boxs">
		  <view class="topbox_20  addresone" v-if="detail.delivery_type>=1">
		    <view class="ali-c">
		      <view class="weizhiimg">
		        <image class="imgs" src="/static/news/address.png"></image>
		      </view>
		      <view class="flex1 ml-20 addrnamesv">
		        <view class="sz_30 bt_hei">{{detail.addr.name}} {{detail.addr.mobile}}</view>
		        <view class="sz_30 bt_hei mt-10">{{detail.addr.addr}}</view>
		      </view>
		    </view>
		  </view>
		  <view class="topbox_20 mt-60 addresone" v-else>
		    <view class="ali-c">
		      <view class="weizhiimg">
		        <image class="imgs" src="/static/news/storeicon.png"></image>
		      </view>
		      <view class="flex1 ml-20">
		        <view class="sz_30 bt_hei">到店支付</view>
		      </view>
		    </view>
		  </view>
		  <view class="topbox_20 mt-20">
		    <view class="ali-c">
		      <view class="tubiimg mr-20">
		        <image class="imgs" src="/static/news/storeicon.png"></image>
		      </view>
		      <view class="bt_min flex1">{{detail.shop_name}}</view>
		    </view>
		    <view class="flex mt-30" v-for='(item,index) in detail.products' :key='index' >
		      <view class="tuimg br_10 ov">
		        <image class="imgs" :src="staticUrl+item.photo" v-if="item.photo"></image> 
		        <image class="imgs" :src="staticUrl+detail.photo" v-else ></image>
		      </view>
		      <view class="flex1 ml-25 goodsboxs">
		        <view class="sz_30 bt_hei twoline names" style="height:65upx">{{item.goods_name}}</view>
		        <view class="sz_26 bt_hei mt-10 prices">价格{{item.fprice}}元
		          <!-- <text class="ml-20 prices" v-if="detail.buytype==0 && item.recprice >0">充值价{{item.recprice}}元</text> -->
				  </view>
		        <view class="sz_26 inp_hui mt-10 skunames">规格:{{item.sku_name}}<text class="ml-20"></text>
		        </view>
		        <view class="sz_26 inp_hui mt-10 sumns">数量: x {{item.goodsnum}}</view>
		      </view>
		    </view>
		  </view>
		
		  <view class="topbox_20 mt-20  ">
			  
		    <view class="ali-z sz_30 bt_hei flex ali-c jus-b">
		      <view>已优惠:</view>
		      <view style="color: red;font-size: 20upx;">-¥{{detail.cprice}}</view>
		    </view>
		  </view>
		  <view class="topbox_20 mt-20  ">		  
		    <view class="ali-z sz_30 bt_hei flex ali-c jus-b">
		      <view>总计:</view>
		      <view style="color: red;">¥{{detail.total}}</view>
		    </view>
		  </view>
		

		  <!-- 第二排 -->
		  <view class="cellboxs cellboxstow" v-if='logs'>
		  	<view class="subsbox cellitems flex ali-c jus-b">
		  		<view class="name">订单信息</view>
		  		
		  	</view>
		  	<view class="cellitems flex ali-c jus-b">
		  		<view class="name">订单编号</view>
		  		<view class="vlas">{{logs.order_sn}}</view>
		  	</view>
		  	<view class="cellitems flex ali-c jus-b">
		  		<view class="name">创建时间</view>
		  		<view class="vlas">{{logs.createtime}}</view>
		  	</view>
			<view class="cellitems flex ali-c jus-b" v-if="detail.status==4">
				<view class="name">退款原因</view>
				<view class="vlas">{{detail.refund_details}}</view>
			</view>

		  	
		  </view>
		  <!-- 订单信息 -->
		  
		  <!-- 联系客服 -->
		  <view class="ordertelbox flex ">
		  	<view class="itemboxss flex1 flex flexc" @tap="xlsj"  :data-tel='detail.addr.mobile'>
		  		<image class="img" src="/static/news/telicon1.png" mode=""></image>
		  		<view class="name">联系客户</view>
		  	</view>
		  	<view class="itemboxss flex1 flex flexc" @tap="lxpt">
		  		<image class="img" src="/static/news/kefuicon.png" mode=""></image>
		  		<view class="name">联系平台</view>
		  	</view>
		  </view>
		  
		  <!-- 猜你会买 -->
		</view>
		

	</view>
</template>

<script>
	import { orderDetails } from "@/utils/api/api.js";
	export default {
		data(){
			return {
				order_id:"",
				detail:{addr:{mobile:""}},
				logs:{},
			}
		},
		computed: {
			staticUrl () {//静态资源地址
				return this.$store.state.staticUrl;
			}
		},
		onLoad(options) {
			this.order_id = options.order_id;
			this.initializedata();
		},
		methods:{
			xlsj(){//联系客户
				uni.makePhoneCall({
				    phoneNumber: this.detail.addr.mobile //仅为示例
				});
			},
			//联系平台
			lxpt(){
				uni.makePhoneCall({
				    phoneNumber: '15907083784' //仅为示例
				});
			},
			initializedata() {
			    var that = this;
			    let params = {
			      order_id: that.order_id,
			    };
			    orderDetails(params).then(res => {
			      console.log(res);
			        if(res.code<0){
			          // app.showToast({title: res.msg});
					  this.$api.msg(res.msg);
			        }else{
			          // that.setData({
			          //   detail: res.data.detail,
			          //   logs:res.data.logs,
			          //   CONFIG: app.globalData.CONFIG
			          // })
					  
					  this.detail = res.data.detail;
					  this.logs = res.data.logs;
					  //this.CONFIG = 
			        }
			    })
			},
			callTel: function (e) {
			    uni.makePhoneCall({
			      phoneNumber: e.currentTarget.dataset.tel // 仅为示例，并非真实的电话号码
			    })
			},
			
		},
		
		
	}
</script>

<style lang="scss">
	/* pages/shop//order/weidianorder/weidianLine_item/weidianLine_item.wxss */
	.ml-20{
		margin-left: 20upx;
	}
	.mt-20{
		margin-top: 20upx;
	}
	.mr-20{
		margin-right: 20upx;
	}
	.mt-30{
		margin-top: 30upx;
	}
	.ml-25{
		margin-left: 25upx;
	}
	.sz_30{
		font-size: 30upx;
	}
	.beijingimg {
	background: linear-gradient(#FF5A03,#FF4216);
	width: 100%;
	height: 300upx;
	position: absolute;
	top: 0;
	z-index: 1;
	padding-left: 20upx;
	padding-top: 25px;
		.onetitle{
			color:#FFFFFF;
			font-size: 30upx;
			
		}
		.twotitle{
			color:#FFFFFF;
			font-size: 28upx;
		}
	}
	
	.addresone{
		margin-top: 20px;
	}
	.boxs {
	position: relative;
	z-index:2;
	width: 100%;
	padding: 24upx;
	box-sizing: border-box;
	
	}
	.bt_min{
		font-size: 30upx;
	}
	.addrnamesv{
		font-size: 30upx;
	}
	.topbox_20 {
	width: 100%;
	background: rgba(255,255,255,1);
	border-radius: 14rpx;
	padding: 20upx;
	box-sizing: border-box;
	font-size: 30upx;
	}

	.skunames{
		font-size: 24upx;
	}

	page{
	  position: relative;
	  padding-bottom: 100upx;
	  background: #F5F5F5;
	}
	.weizhiimg{
	width: 30upx;
	height: 46upx;
	.imgs{
		width: 30upx;
		height: 46upx;
	}
	}
	.shuwuimg{
	width:67upx;
	height:67upx;
	border-radius:4upx;
	overflow: hidden;
	}
	.btbox{
	width:190upx;
	height:77upx;
	background:rgba(255,255,255,1);
	border-radius:4upx;
	}
	.xiangyouimg{
	width:14upx;
	height:24upx;
	}
	.dianhuimg{
	width:42upx;
	height:42upx;
	}
	.kuai{
	width:40upx;
	height:40upx;
	text-align: center;
	line-height: 40upx;
	font-size:24upx;
	font-weight:500;
	color:rgba(255,255,255,1);
	}
	
	.dibu_qr{
	  position: fixed;
	  bottom: 0;
	  width:100%;
	background:rgba(255,255,255,1);
	padding: 10upx 24upx;
	box-sizing: border-box;
	}
	.beizhu{
	width: 150upx;
	text-align: right;
	}
	.tubiimg{
	width:27upx;
	height:24upx;
	.imgs{
		width:27upx;
		height:24upx;
	}
	}
	.tuimg{
	width:183upx;
	height:183upx;
	.imgs{
		width:183upx;
		height:183upx;
	}
	}
	view{
	  line-height: 112%;
	  letter-spacing:3upx
	}
	.dianhuimg{
	width:43upx;
	height:43upx;
	}
	.shuxian{
	width:1px;
	height:100upx;
	background:rgba(242,242,242,1);
	}
	.duanxian{
	width:45upx;
	height:1px;
	background: rgba(181,181,181,1);
	}
	.cptjimg{
	width:100%;
	height:310upx;
	}
	/* 取消弹窗 */
	.zan-dialog__mask {
	 position: fixed;
	 top: 0;
	 left: 0;
	 right: 0;
	 bottom: 0;
	 z-index: 10;
	 background: rgba(0, 0, 0, .5);
	 display: none;
	}
	 
	.zan-dialog__container {
	 position: fixed;
	 bottom: 400upx;
	 width: 650upx;
	 height: 350upx;
	 margin-left: 50upx;
	 background: #f8f8f8;
	 transform: translateY(300%);
	 transition: all 0.4s ease;
	 z-index: 12;
	 border-radius: 20upx;
	 /* box-shadow: 0px 3px 3px 2px gainsboro; */
	}
	 
	.zan-dialog--show .zan-dialog__container {
	 transform: translateY(0);
	}
	 
	.zan-dialog--show .zan-dialog__mask {
	 display: block;
	}
	
	.goodsboxs{
		font-size: 30upx;
		.names{
			font-size: 30upx;
		}
		.prices{
			font-size: 30upx;
		}
		.sumns{
			color:rgb(192, 190, 190);
		}
	}
	
	
	//联系kefu 客服
	.ordertelbox{
		margin: 0 24upx;
		margin-top: 20upx;
		height:89upx;
		background:rgba(255,255,255,1);
		border-radius:0px 0px 14upx 14upx;
		.itemboxss{
			position: relative;
			height: 89upx;
			line-height: 89upx;
			.img{
				width:43upx;
				height:43upx;
				margin-right: 20upx;
			}
			.name{
				font-size:30upx;
				color:rgba(0,0,0,1);
			}
		}
		
		.itemboxss:nth-child(1):after{
			content: "";
			width:1px;
			height:89px;
			background:rgba(242,242,242,1);
			position: absolute;
			top:0;
			right: 0;
		}
	}
	//客服end
	
	//价格明细列表
	.cellboxs{
		margin: 20upx 0;
		margin-top: 20upx;
		.cellitems{
			padding: 0 20upx;
			height: 88upx;
			line-height: 88upx;
			border-bottom: 1px solid #F5F1F1;
			background: #FFFFFF;
			.name{
				font-size:30upx;
				color:rgba(0,0,0,1);
			}
			.vlas{
				font-size:30upx;
				color:rgba(0,0,0,1);
			}
		}
		.cellitems:nth-last-child(1){
			border:0;
		}
		.subsbox{
			.name{
				font-size:30upx;
				font-family:PingFang SC;
				font-weight:bold;
				color:rgba(0,0,0,1);
			}
			.vlas{
				color:#FF6900;
				.fuhao{
					font-size: 30upx;
				}
				.shuzi{
					font-family:PingFang SC;
					font-weight:bold;
					font-size: 36upx;
				}
			}
		}
	}
	
	// .cellboxstow{
	// 	margin-top: 0;
	// 	margin-bottom: 0;
	// }
</style>
