wxThird/pages/subPack/refundDetail.vue

<template>
<view class="box">
 <view class="cont">
	 <view class="topBox goodsBox">
		 <view class="topState">
			 <view class="tsTop">
				 <view class="tsYd"></view>
				 <view class="tsHx"></view>
				 <view class="tsYd"></view>
				 <view class="tsHx tsHx2"></view>
				 <view class="tsYd tsYd2"></view>
				 <view class="tsHx tsHx2"></view>
				 <view class="tsYd tsYd2"></view>
			 </view>
			 <view class="tsM">
				 <view class="tsMline">发起退款</view>
				 <view class="tsMline">商家处理</view>
				 <view class="tsMline tsMline2">商家退款</view>
				 <view class="tsMline tsMline2">退款结束</view>
			 </view>
			 <view class="txTxt">
				 <span>请等待</span><span style="color: #EC0F0A;">商家处理</span>
			 </view>
			 <view class="txTxt2">已发起退款申请</view>
		 </view>
	 </view>
	 <view class="goodsBox topBox">
		 <view class="tkTopTitle">退款成功</view>
		 <view class="tksuccess">
			 <view class="tksuccessYx">
				 <view class="tksuccessTxt">原路退回</view>
				 <view class="tksuccessPrice">¥<span style="font-size: 36rpx;">9</span> </view>
			 </view>
			 <view class="tksuccessTime">12-14 22:34</view>
		 </view>
	 </view>
	 <!-- 退款关闭-->
	 <view class="goodsBox topBox">
	 	<view class="tkTopTitle">退款关闭</view>
	 	<view class="tkErr">您的退款申请已被商家拒绝</view>	 
	 </view>
	 <!-- 退款关闭-->
	 <view class="itemBox flex">
		 </image>
		 <image class="itemIMg"  src="../../static/timg/noimg.png" mode=""></image>
		 <view class="itemRight">
		 	<view class="itemName">普调洗车</view>
			<view class="priceBox">
				<view class="price">¥9</view>
			</view>
		 </view>
	 </view>

	 <view class="goodsBox">
	 	 <view class="goodsline flex" >
	 	 		 <view class="goodsLeft">退款券号</view>
	 	 		 <view class="goodRight" style="display: flex;">
	 	 				<image src="../../static/img2/copy.png" mode="" class="copyIcon"></image>
						<span>102899992200992</span>
	 	 		 </view>
	 	 </view>
		 <view class="goodsline flex" >
		 		 <view class="goodsLeft">退款券号</view>
		 		 <view class="goodRight" style="display: flex;" @click="codeFn">
		 				<span>共两份券号</span>
		 				<image src="../../static/img2/hjt.png" mode="" class="jtIcon"></image>
		 		 </view>
		 </view>
		 <view class="goodsline flex" >
		 		 <view class="goodsLeft">退款份数</view>
		 		 <view class="goodRight" >
		 				10份	 
		 		 </view>
		 </view>
		 
		  <view class="goodsline flex" >
			  <view class="tkPrice">
				  <view class="tkPrice1">退款金额</view>
				  <view class="tkPrice2">实际退款金额以到账金额为准</view>
			  </view>
			  <view class="tkPriceNum">¥9</view>
		  </view>
	 	 <view class="goodsline flex" >
	 	 		 <view class="goodsLeft">退款方式</view>
	 	 		 <view class="goodRight" style="font-size: 26rpx;color: #222222;">原路退回</view>
	 	 </view>
		 <view class="goodsline flex" >
		 		 <view class="goodsLeft">商品是否已使用</view>
		 		 <view class="goodRight" >未使用</view>
		 </view>
		 <view class="goodsline flex" >
		 		 <view class="goodsLeft">退款原因</view>
		 		 <view class="goodRight" >实际与宣传/描述不一样</view>
		 </view>
		 <view class="goodsline flex" >
		 		 <view class="goodsLeft">退款说明</view>
		 		 <view class="goodRight" >实际与宣传/描述不一样</view>
		 </view>
		 <view class="goodsline flex" >
		 		 <view class="goodsLeft">退款凭证</view>
		 		 <view class="goodRight tkImgBox" >
					 <image class="tkImg" src="http://dmsphoto.66km.com.cn/thFiles/EE19D1B2-5E5F-46DE-965A-BA2A8913F5BB.jpg" mode="aspectFit"></image>
					  <image class="tkImg" src="http://dmsphoto.66km.com.cn/thFiles/EE19D1B2-5E5F-46DE-965A-BA2A8913F5BB.jpg" mode=""></image>
					   <image class="tkImg" src="http://dmsphoto.66km.com.cn/thFiles/EE19D1B2-5E5F-46DE-965A-BA2A8913F5BB.jpg" mode=""></image>
					    <image class="tkImg" src="http://dmsphoto.66km.com.cn/thFiles/EE19D1B2-5E5F-46DE-965A-BA2A8913F5BB.jpg" mode=""></image>
						 <image class="tkImg" src="http://dmsphoto.66km.com.cn/thFiles/EE19D1B2-5E5F-46DE-965A-BA2A8913F5BB.jpg" mode=""></image>
				 </view>
		 </view>
	 </view>
	 <view class="goodsBox">
		<view class="goodsline flex" >
				 <view class="goodsLeft">订单编号</view>
				 <view class="goodRight" style="display: flex;">
						<image src="../../static/img2/copy.png" mode="" class="copyIcon"></image>
								<span>102899992200992</span>
				 </view>
		</view>
	 </view>
	 
 </view>
 
 <view class="reasonBox" v-if="codeShow">
 	 <view class="codeCont">
 		 <view class="reasonTop">
 			 <view  class="chahao"></view>
 			 <view class="tkTitle">退款券号</view>	
 			 <image @click="qdTkclose" class="chahao" src="../../static/img2/chahao.png" mode=""></image>
 		 </view>
 		 <view class="codeLineBox">
 			<view class="codeLine" v-for="(v,i) in 3">
				<span style="padding-right: 10rpx;">102899992200992</span>
				<image src="../../static/img2/copy.png" mode="" class="copyIcon"></image>
					
			</view>
 		 </view>
 		
 	 </view>
 </view>
 
 <view style="height: 40rpx;"></view>

</view>
</template>

<script>
	export default {
		components: {
			
		},
		
		data() {
			return {
				themeColor:'',
				ext:'',
				userInfo:'',
				carInfo:'',
				customerInfo:'',
				codeShow:false,
			}
		},
		onLoad(opt) {
			
		},
		onShow() {
			
		},
		methods: {
			qdTkclose(){
			  this.codeShow=false;	
			},
			codeFn(){
				this.codeShow=true;	
			}
			
			
		}
	}
</script>

<style scoped lang="less">
.box {
	width: 100vw;
	min-height: 100vh;
	background: #F4F4F4;
}
.tkTopTitle{
	font-weight: 500;
	font-size: 32rpx;
	color: #222222;
	line-height: 50rpx;
	padding-top: 20rpx;
}
.tksuccess{
	background: #F7F7F7;
	border-radius: 16rpx;
	padding: 20rpx;
	margin-top: 20rpx;
}
.tksuccessYx{
	display: flex;justify-content: space-between;
}
.tksuccessTxt{
	font-weight: 500;
	font-size: 28rpx;
	color: #222222;
	line-height: 40rpx;
}
.tksuccessPrice{
	font-weight: 500;
	font-size: 26rpx;
	color: #EC0F0A;
}
.tksuccessTime{
	font-size: 26rpx;
	color: #9A9A9A;
	
}
.tsTop{
	display: flex;justify-content: center;
}
.tsM{
	display: flex;justify-content: center;
}
.tsMline{
	font-size: 24rpx;
	color: #666666;
	line-height: 33rpx;
	    text-align: center;
	    width: 210rpx;
		padding-top: 8rpx;
}
.txTxt{
	font-weight: 500;
	font-size: 36rpx;
	color: #222222;
	line-height: 50rpx;
	padding-top: 50rpx;
}
.txTxt2{
	font-size: 24rpx;
	color: #9A9A9A;
	line-height: 33rpx;
	padding-top: 8rpx;
	padding-bottom: 20rpx;
}
.tsYd{
	width: 12rpx;
	height: 12rpx;
	border: 3rpx solid #88888A;
	border-radius: 50%;
}
.tsHx{
	width: 135rpx;
	height: 4rpx;
	background: #5B5B5C;
	border-radius: 2rpx;
	margin-left: 9rpx;
	margin-right: 9rpx;
	margin-top: 6rpx;
}
.tsYd2{
	border: 3rpx solid #eeeeee;
}
.tsHx2{
	background: #eeeeee;
}
.tsMline2{
	color: #9A9A9A;
}
.topState{
	padding-top: 20rpx;
}
.topBox{
	margin-bottom: 20rpx;
}
.copyIcon{
	width: 30rpx;height: 30rpx;
	margin-top: 4rpx;margin-right: 6rpx;
}
.tkImg{
	width: 148rpx;height: 148rpx;
	margin-left: 10rpx;
	margin-bottom: 10rpx;
}
.tkImgBox{
	display: flex;flex-wrap: wrap;
	width: 484rpx;
}
.reasonTop{
	display: flex;justify-content: space-between;
	padding: 32rpx 42rpx;
}
.chahao{
	width: 21rpx;height: 21rpx;
	padding-top: 10rpx;
}
.tkTitle{
	font-weight: 500;
	font-size: 28rpx;
	color: #222222;
	line-height: 40rpx;
}
.reasonBox{
	position: fixed;
	left: 0;
	top: 0;
	height: 100vh;
	width: 750rpx;
	background: rgba(0, 0, 0, 0.5);
}
.codeCont{
	width: 750rpx;
	background: #FFFFFF;
	border-radius: 28rpx 28rpx 0rpx 0rpx;
	position: absolute;
	left: 0;
	bottom: 0;
	height: 383rpx;
}
.reasonCont{
	height: 70vh;
	width: 750rpx;
	background: #FFFFFF;
	border-radius: 28rpx 28rpx 0rpx 0rpx;
	position: absolute;
	left: 0;
	bottom: 0;
}
.reasonContLine{
	display: flex;justify-content: space-between;
		padding: 20rpx 0;
}
.reasonContLineTitle{
	font-weight: 500;
	font-size: 28rpx;
	color: #222222;
}
.reasonContLineTxt{
	font-weight: 400;
	font-size: 28rpx;
	color: #222222;
	line-height: 40rpx;

}
.reasonContLineCk{
	width: 28rpx;
	height: 28rpx;
	border: 2rpx solid #9A9A9A;
	border-radius: 16rpx;
	margin-top: 6rpx;
}
.reasonContLineBox{
	padding: 0 33rpx;
	height: calc(70vh - 270rpx);
	overflow-y: scroll;
}
.ckLine{
	display: flex;color: #9A9A9A;
	font-size: 26rpx;
}
.xinghao{
	color: #EC0F0A;
}
.jtIcon{
	width: 10rpx;height: 20rpx;
	margin-top: 8rpx;
	margin-left: 10rpx;
}
.tkPrice1{
	font-size: 26rpx;
	color: #222222;
}
.tkPrice2{
	font-size: 24rpx;
	color: #9A9A9A;
	padding-top: 8rpx;
}
.tkPriceNum{
	font-size: 26rpx;
	color: #222222;
	line-height: 50rpx;
}
.textareaNum{
	padding-bottom: 18rpx;
}
.tkSm{
	font-size: 26rpx;
	color: #222222;
	padding-top: 18rpx;
}
.tktextarea{
	font-size: 26rpx;
	background: #F7F7F7;
	border-radius: 14rpx;
	margin-top: 20rpx;
	width: 600rpx;padding: 20rpx 30rpx;
	margin-bottom: 10rpx;
}
.textareaNum{
	font-size: 24rpx;
	color: #9A9A9A;
	display: flex;justify-content: flex-end;
}
.cont{
	padding: 20rpx 24rpx;
}
.itemBox{
	background: #FFFFFF;
	border-radius: 16rpx;padding: 24rpx;
}
.itemIMg{
	width: 128rpx;
	height: 128rpx;border-radius: 10rpx;
}
.flex{
	display: flex;
}
.itemRight{
	width: 450rpx;padding-left: 24rpx;
}
.itemName{
	font-weight: 500;
	font-size: 28rpx;
	color: #222222;
	line-height: 40rpx;
}
.buyType{
	padding: 0 8rpx;text-align: center;
	height: 32rpx;line-height: 34rpx;
	border-radius: 5rpx;
	border: 1px solid #FF0035;font-size: 22rpx;
color: #FF0035;
margin-top: 10rpx;
}
.priceBox{
	display: flex;justify-content: space-between;padding-top: 40rpx;
}
.price{

	font-size: 28rpx;
	color: #222222;
	line-height: 50rpx;
}
.itemNum{
	font-size: 34rpx;line-height: 50rpx;
	color: #686868;
}
.itemnotes{
	font-size: 24rpx;padding-top: 12rpx;
	color: #FFC107;
}
.mealBox{
	background: #FFFFFF;
	padding: 20rpx 24rpx;
	margin-top: 20rpx;
	font-size: 26rpx;
	color: #666666;
	    border-radius: 16rpx;
}
.fwlcTitle{
	color: #333333;font-size: 30rpx;font-weight: 500;
	padding-bottom: 20rpx;
}
.mealTop{
	display: flex;
	justify-content: space-between;
	height: 72rpx;
	line-height: 72rpx;
	font-weight: 500;
	font-size: 26rpx;
	color: #222222;
	font-size: 26rpx;
	padding: 0 20rpx;
}
.mealNum{
	text-align: center;
	width: 120rpx;
}
.mealexpire{
	text-align: center;	width: 120rpx;
}
.mealName{
	width: 460rpx;
}
.mealTop2{
	display: flex;
	justify-content: space-between;
	height: 72rpx;
	line-height: 72rpx;
	font-weight: 500;
	font-size: 26rpx;
	color: #222222;
	font-size: 26rpx;
	padding: 0 20rpx;
	background: #FFF6DB;
}
.mealXj{
	background: #FFFCF3;
}
.xjLine{
	display: flex;
	font-weight: 500;
	font-size: 26rpx;
	color: #222222;
	padding: 20rpx 20rpx;
}
.xjyd{
	width: 8rpx;
	height: 8rpx;
	background: #FABF1B;
	border-radius: 50rpx;
	margin-top: 12rpx;
	margin-right: 10rpx;
}
.mealMs{
	background: #FFFFFF;
	padding: 20rpx;
	font-weight: 400;
	font-size: 24rpx;
	color: #9A9A9A;
	line-height: 38rpx;
}
.goodsBox{
	padding:18rpx 24rpx;font-size: 26rpx;
color: #222222;background: #FFFFFF;margin-top: 20rpx;
border-radius: 16rpx;
}
.goodsline{
	justify-content: space-between;
	padding: 18rpx 0;
}


.mealBox img{
	width: 100%;
}
.mealBox image{
	width: 100%;
}
.tkErr{
	font-size: 26rpx;
	color: #9A9A9A;
	padding-bottom: 10rpx;
	padding-bottom: 20rpx;
}
.codeLine{
	font-size: 26rpx;
	color: #222222;
	display: flex;
	justify-content: center;
	padding-bottom: 30rpx;
}

</style>