<template>
	<view class="order-wrap">
		<view class="top">
			订单信息
		</view>
		
		<view class="middle">
			<view>
				<text class="grey">
					订单编号
				</text>
				<text style="flex: 1;">
					z0016784191206689a18e27162f293ef
				</text>
				<image @click="copyText(orderInfo.id)" src="@/static/img/my/icon01.png" class="copy-image">
					
				</image>
			</view>
			<view>
				<text class="grey">
					产品名称
				</text>
				长江索道-我的相片
			</view>
			<view>
				<text class="grey">
					订单金额
				</text>
				￥10
			</view>
			<view>
				<text class="grey">
					订单数量
				</text>
				1
			</view>
			<view>
				<text class="grey">
					订单时间
				</text>
				2023-07-07 10:49:49
			</view>
			<view>
				<text class="grey">
					支付单号
				</text>
				2023070722001181651456467459
			</view>
			<view>
				<text class="grey">
					支付时间
				</text>
				2023-07-07 10:50:11
			</view>
			<view>
				<text class="grey">
					咨询电话
				</text>
				023-68567748
			</view>
		</view>
		
		<view class="bottom">
			<view class="bottom-rule">
				<text class="grey">退改规则</text>
				<text>不可退</text>
			</view>
			<view class="bottom-btn">
				<text class="button-empty">我的影集</text>
				<text class="button">下载</text>
				<text class="button" @click="showPop=true">打印</text>
			</view>
		</view>
		
		<!-- 打印弹窗 -->
		<u-popup  v-model="showPop" mode="bottom" border-radius="14" closeable height="70%">
			<view class="pop-head">
				<text style="font-size: 32rpx;font-weight: bold;">
					打印
				</text>
				<text>
					（现场自取）
				</text>
			</view>
			
			<view class="pop-middle">
				<view>
					<text class="middle-tip">
						取片电话：
					</text>
					<input />
				</view>
				
				<view>
					<text class="middle-tip">
						取片地址：
					</text>
					<text>
						重庆市渝中区新华路151号长江索道南站观景台旁
					</text>
				</view>
				
				<view>
					<text class="middle-tip">
						运营时间：
					</text>
					<text>
						09:00-22:00
					</text>
				</view>
				
				<view>
					<text class="middle-tip">
						咨询电话：
					</text>
					<text>
						023-68567748
					</text>
				</view>
				<view>
					<text class="middle-tip">
						温馨提示：
					</text>
					<text style="color: #999999;">
						每个订单仅限免费打印一次取片时请向现场工作人员出示订单号或支付单号
					</text>
				</view>
			</view>
			
			<view class="pop-bottom">
				<text class="pop-btn">
					提交
				</text>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
export default {
  data() {
    return {
      showPop:false,//弹窗显示隐藏
    }
  },
  methods: {
    //---复制内容
    copyText(value){
      uni.setClipboardData({
        data:value,
        success:function(){
          uni.showToast({
            title: '复制成功',
            icon: 'none'
          })
        }
      })
    },	
  }
}
</script>

<style scoped lang="scss">
.order-wrap{
	background: #FFFFFF;
	box-shadow: 0px 0px 12rpx 2rpx rgba(0,0,0,0.08);
	border-radius: 16rpx;
	margin: 24rpx;
}
.top{
	height: 92rpx;
	line-height: 92rpx;
	border-bottom: 1px solid #ececec;
	padding: 0 24rpx;
	font-size: 32rpx;
	color: #191919;
	font-weight: bold;
}
.middle{
	padding: 0 24rpx 48rpx 24rpx;
	border-bottom: 1px solid #ececec;
	>view{
		display: flex;
		margin-top: 32rpx;
	}
}
.copy-image{
	width: 32rpx;
	height: 32rpx;
	flex-shrink: 0;
}
.grey{
	color: #999999;
	flex-shrink: 0;
	margin-right: 20rpx;
}
.bottom{
	padding: 48rpx 24rpx;
}
.bottom-rule{
	display: flex;
	justify-content: space-between;
}
.bottom-btn{
	display: flex;
	justify-content: space-between;
	margin-top: 48rpx;
}
.button{
	width: 144rpx;
	height: 64rpx;
	background: $blue;
	border-radius:8rpx;
	display: inline-block;
	color:#ffffff;
	text-align: center;
	line-height: 64rpx;
}
.button-empty{
	width: 144rpx;
	height: 64rpx;
	border-radius:8rpx;
	display: inline-block;
	border: 1px solid #999999;
	text-align: center;
	line-height: 64rpx;
}
// 打印弹窗
.pop-head{
	text-align: center;
	margin-top: 20rpx;
}
.pop-middle{
	padding:0 48rpx 32rpx 48rpx;
	view{
		display: flex;
		margin-top: 32rpx;
	}
}
.middle-tip{
	font-weight: bold;
	flex-shrink: 0;
}
.pop-bottom{
	margin-top: 60rpx;
	text-align: center;
}
.pop-btn{
	display: inline-block;
	width: 212rpx;
	height: 80rpx;
	background:$blue;
	border-radius: 44rpx;
	text-align: center;
	line-height: 80rpx;
	color: #ffffff;
	font-size: 32rpx;
}
</style>
