Browse Source

申请退款

twt 2 months ago
parent
commit
2084de1dd3
2 changed files with 1253 additions and 0 deletions
  1. 769 0
      pages/subPack/refund.vue
  2. 484 0
      pages/subPack/refundDetail.vue

+ 769 - 0
pages/subPack/refund.vue

@@ -0,0 +1,769 @@
+<template>
+<view class="box">
+ <view class="cont">
+	 <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">退款原因 <span class="xinghao">*</span></view>
+	 		 <view class="goodRight ckLine" @click="reasonS">
+				 <span>请至少选择一项</span>
+				 <image src="../../static/timg/icon_arrow_right.png" mode="" class="jtIcon"></image>
+			 </view>
+	 	 </view>
+		 <view class="goodsline flex" >
+		 		 <view class="goodsLeft">退款份数</view>
+		 		 <view class="goodRight" >
+					 <view class="numJsbox">
+					 	<view class="numJj" @click="calculation(1)">-</view>
+					 	<view class="goodsnum">
+					 	 <input type="number" value="" v-model="goodsnum" class="goodsnumInput"/>
+					 	</view>
+					 	<view class="numJj" @click="calculation(2)">+</view>
+					 </view>
+				 </view>
+		 </view>
+		 <view class="goodsline flex" >
+		 		 <view class="goodsLeft">退款份数</view>
+		 		 <view class="goodRight" style="color: #666666;">
+		 				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;font-weight: 500;color: #222222;">原路退回</view>
+	 	 </view>
+	 </view>
+	 <view class="goodsBox">
+		
+		 <view class="goodsline flex" >
+				 <view class="goodsLeft">商品是否已使用 <span class="xinghao">*</span></view>
+				 <view class="goodRight " >
+					 <picker @change="bindPickerChange" :value="index" :range="array">
+						 <view class="ckLine" v-if="index==''">
+							 <span>请选择</span>
+							 <image src="../../static/timg/icon_arrow_right.png" mode="" class="jtIcon"></image>
+						 </view >
+						 <view v-else class="ckLine" ><span>{{array[index]}}</span> 
+						   <image src="../../static/timg/icon_arrow_right.png" mode="" class="jtIcon"></image>
+						 </view>
+						
+					 </picker>
+					
+				 </view>
+		 </view>
+	 	<view class="tkSm" style="padding-top: 8rpx;">退款说明</view>
+		<view>
+			<textarea class="tktextarea" name="" placeholder="请输入退款说明" id="" cols="30" rows="10"></textarea>
+		    <view class="textareaNum">{{textareaNum}}/500</view>
+		</view>
+		<!-- 图片 -->
+		<view class="secondView">
+			<view class="tkSm">退款凭证</view>
+			<view class="imgBox">
+				<view :class="{img4:(imgindex+1)%4==0}" class="imgLine" v-for="(img,imgindex) in imgArr">
+					<image :src="img" mode="aspectFit" class="itemImg"></image>
+					<image src="../../static/img/icon_del_red.png" mode="aspectFit" class="delImg" @click="delimg(imgindex)">
+					</image>
+				</view>
+				<view class="img4" @click="uploadImg">
+					<image src="../../static/img/btn_pic.png" mode="" class="itemImg"></image>
+				</view>
+			</view>
+		</view>
+		
+	 </view>
+	 
+ </view>
+ 
+<view  class="gaodu"></view>
+ <view class="bottomBox">
+	 <view class="bottomMS">申请退款后不可取消,钱款预期1-3个自然</view>
+	 <view class="bottom">
+	 	 <view class="bleft">
+	 		 <span>退款金额</span>
+	 		 <span style="color: #EC0F0A;padding-left: 6rpx;">¥</span>
+	 		 <span style="font-weight: 500;font-size: 34rpx;color: #EC0F0A;">9</span>
+	 	 </view>
+	 	 <view class="Btn commonBtn" @click="submitFn">提交</view>
+	 </view>
+ </view>
+ 
+ <view class="reasonBox" v-if="reasonShow">
+	 <view class="reasonCont">
+		 <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="reasonContLineBox">
+			 <view v-for="(item,index) in 3" class="jiekouLIne">
+				 <view class="reasonContLineTitle">商品相关</view>
+				 <view class="reasonContLine" v-for="(i,ix) in 3">
+					 <view class="reasonContLineTxt">包装/商品破损/污渍</view>
+					 <view class="reasonContLineCk"></view>
+				 				 
+				 </view>
+			 </view>
+		 </view>
+		 <view style="height: 200rpx;"></view>
+		 <view class="reasonBottom">
+			 <view class="reasonBottomBtn">确定</view>
+		 </view>
+	 </view>
+ </view>
+
+ 
+</view>
+</template>
+
+<script>
+	export default {
+		components: {
+			
+		},
+		
+		data() {
+			return {
+				themeColor:'',
+				ext:'',
+				goodsnum:1,
+				itemDefault:'',
+				totalPrice:'',
+				sheetDetail:[],
+				userInfo:'',
+				carInfo:'',
+				customerInfo:'',
+				textareaNum:0,
+				reasonShow:false,
+				imgArr: [],
+				array:['未使用','已使用'],
+				 index: '',
+			}
+		},
+		onLoad(opt) {
+			this.ext = this.$common.getExtStoreId();
+			this.themeColor = uni.getStorageSync("themeColor");
+			this.itemDefault=uni.getStorageSync("itemDefault");
+			this.totalPrice=this.itemDefault.goodsnum*this.itemDefault.money
+			this.totalPrice=this.totalPrice.toFixed(2)
+			var obj={
+				itemId:this.itemDefault.itemId,
+				itemName:this.itemDefault.goodsname,
+				itemQty:this.itemDefault.goodsnum,
+				salePrice:this.itemDefault.money,
+				totalPrice:this.totalPrice,
+				packageItemID:this.itemDefault.id,
+			}
+			this.sheetDetail.push(obj)
+			this.carInfo=this.$store.state.carInfo;
+			
+			this.userInfo=uni.getStorageSync("wxOpenData");
+			this.customerInfo=uni.getStorageSync("customerInfo")
+			console.log(this.userInfo)
+		},
+		onShow() {
+			
+		},
+		methods: {
+			bindPickerChange(e){
+			  console.log(e)	
+			  this.index=e.detail.value
+			},
+			reasonS(){
+				this.reasonShow=true;
+			},
+			qdTkclose(){
+				this.reasonShow=false;
+			},
+			calculation(type){
+				if(type==1){
+					if(this.goodsnum>1){
+						this.goodsnum--
+					}
+				}else{
+					console.log("+++")
+						this.goodsnum++
+				}
+			},
+			submitFn(){
+				uni.navigateTo({
+					url:'refundDetail'
+				})
+				
+				/* var params={
+					
+				}
+				uni.showLoading({
+					title: '加载中'
+				})
+				
+				this.$http('openMallOrder/submitOrder', params,'POST').then(res => {
+					uni.hideLoading();
+					if(res.code==0){
+						this.orderData=res.data
+						this.unifiedPay(res.data)
+					}else{
+						uni.showToast({
+							title: res.msg,
+							icon: 'none',
+							duration: 3000
+						});
+					}
+				
+				}) */
+			},
+			unifiedPay(res){
+				this.$http('openMallOrder/unifiedPay', {
+					sheetId:res.id
+				},'POST').then(res => {
+					this.isgo=true;
+					if(res.code==0){
+						
+						this.requestPayment(res.data)
+					}else{
+						uni.showToast({
+							title: res.msg,
+							icon: 'none',
+							duration: 3000
+						});
+					}
+				 })
+			},
+			uploadImg() {
+			
+				var that = this;
+				var length = this.imgArr.length;
+				var num = 5;
+				if (length > 4) {
+					uni.showToast({
+						title: '最多上传5张',
+						icon: 'none',
+						duration: 2000,
+					});
+					return false;
+				}
+				uni.chooseImage({
+					sourceType: ['album', 'camera'],
+					count: num - length,
+					sizeType:['compressed'],
+					success: (chooseImageRes) => {
+						const tempFilePaths = chooseImageRes.tempFilePaths;
+						/* uni.uploadFile({
+				            url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例,非真实的接口地址
+				            filePath: tempFilePaths[0],
+				            name: 'file',
+				            formData: {
+				                'user': 'test'
+				            },
+				            success: (uploadFileRes) => {
+				                console.log(JSON.parse(uploadFileRes.data).data );
+								that.imgArr=that.imgArr.concat(JSON.parse(uploadFileRes.data).data) ;
+								
+				            }
+				        }); */
+						tempFilePaths.forEach(v => {
+							console.log(that.$request.baseUrl + 'tuhuUploadFile');
+							uni.uploadFile({
+								url: that.$request.baseUrl + 'tuhuUploadFile',
+								filePath: v,
+								name: 'file',
+								formData: {
+									'user': 'test'
+								},
+			
+								success: (uploadFileRes) => {
+			
+									console.log(JSON.parse(uploadFileRes.data).data);
+									that.imgArr = that.imgArr.concat(JSON.parse(
+										uploadFileRes.data).data);
+									console.log('imgArr--',that.imgArr);
+								}
+							});
+						})
+						/* that.$http('accompany/SuperCheckSheet/uploadFile', tempFilePaths[0], 'POST').then(res => {
+							
+						}) */
+					}
+				});
+			},
+			delimg(index) {
+				this.imgArr.splice(index, 1)
+			},
+			requestPayment(res){
+				var payInfo=res;
+				//console.log(payInfo)
+				//console.log(String(Date.now()))
+				var that=this;
+				uni.requestPayment({
+					provider: 'wxpay',
+					//timeStamp: String(Date.now()),
+					timeStamp: payInfo.timeStamp,
+					nonceStr: payInfo.nonceStr,
+					package:payInfo.package,
+					signType: payInfo.signType,
+					paySign: payInfo.paySign,
+					appid:payInfo.appId,	
+				    success: function (res) {
+				        console.log('success:' + JSON.stringify(res));
+						 uni.showToast({
+							 title: '支付成功',
+							 icon:'none',
+							 duration: 2000
+						 });
+						 uni.navigateTo({
+						 	url:'paySuccess?type=1&orderType=1'
+						 })
+						
+						
+				    },
+				    fail: function (err) {
+					  console.log(err)
+				      uni.showToast({
+						 title: '支付失败',
+						 icon:'none',
+						 duration: 2000
+				      });
+					  uni.navigateTo({
+					  	url:'paySuccess?type=2&orderType=1'
+					  })
+					  }
+					 
+				}); 
+			},
+			
+			
+			
+			
+		}
+	}
+</script>
+
+<style scoped lang="less">
+.box {
+	width: 100vw;
+	min-height: 100vh;
+	background: #F4F4F4;
+}
+.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);
+}
+.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: 15rpx 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: 12rpx;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: #EC0F0A;
+	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: 610rpx;padding: 24rpx;
+	margin-bottom: 10rpx;
+	line-height: 40rpx;
+}
+.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;
+}
+.bottom{
+	
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+	padding:30rpx 0 10rpx 0;
+
+}
+.reasonBottom{
+	position: absolute;
+	left: 0;bottom: 0;
+	padding: 30rpx 0;
+	padding-bottom: constant(safe-area-inset-bottom);
+	padding-bottom: env(safe-area-inset-bottom); 
+	width: 100%;
+	background: #FFFFFF;
+	box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(153, 153, 153, 0.2);
+	
+}
+.reasonBottomBtn{
+	width: 661rpx;
+	height: 86rpx;
+	background: #EC0F0A;
+	border-radius: 43rpx;
+	line-height: 86rpx;
+	text-align: center;
+	font-size: 32rpx;
+	color: #FFFFFF;
+	margin: 0 auto;
+}
+.bottomBox{
+	position: fixed;
+	left: 0;bottom: 0;
+	padding-bottom: constant(safe-area-inset-bottom);
+	padding-bottom: env(safe-area-inset-bottom); 
+	width: 100%;
+	background: #FFFFFF;
+	box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(153, 153, 153, 0.2);
+}
+.bottomMS{
+	font-size: 24rpx;
+	color: #706F77;
+	padding-top: 20rpx;padding-left: 32rpx;
+}
+.bleft{
+	font-weight: 500;
+	font-size: 26rpx;
+	color: #222222;
+	line-height: 86rpx;
+	padding-left: 32rpx;
+}
+.Btn{
+	width: 467rpx;
+	height: 86rpx;text-align: center;
+	line-height: 86rpx;
+	background: #FCD903;
+	border-radius: 43rpx;
+	font-size: 32rpx;
+	color: #110B01;
+	margin-right: 36rpx;
+}
+.mealBox img{
+	width: 100%;
+}
+.mealBox image{
+	width: 100%;
+}
+.numJsbox{
+	display: flex;overflow: hidden;
+}
+.buyCont{
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	width: 750rpx;
+	height: 688rpx;
+	background: #FFFFFF;
+	border-radius: 26rpx 26rpx 0px 0px;
+}
+.buyNumBox{
+	padding: 30rpx;
+    padding-top: 10rpx;
+	padding-bottom: 70rpx;
+}
+.buyContCh{
+	position: absolute;
+	top: 53rpx;
+	right: 36rpx;
+	width: 36rpx;
+	height: 36rpx;
+}
+.goodsnum{
+	width: 44rpx;
+	height: 44rpx;
+	background: #F4F5F7;
+	line-height: 44rpx;
+	text-align: center;
+	font-weight: 500;
+	color: #333333;
+	font-size: 24rpx;
+	margin: 0 4rpx;
+	border-left:1px solid #dddddd;
+	border-right:1px solid #dddddd;
+}
+.goodsnumInput{
+	width: 44rpx;
+	height: 44rpx;
+	background: #FFFFFF;
+	line-height: 44rpx;
+	text-align: center;
+	font-weight: 500;
+	color: #333333;
+	font-size: 24rpx;
+}
+.numJj{
+	width: 44rpx;
+	height: 44rpx;
+	background: #ffffff;
+	border-radius: 0px 6rpx 6rpx 0px;	
+	text-align: center;
+	line-height: 44rpx;
+	font-size: 32rpx;
+	color: #999999;
+}
+.numJsbox{
+	border: 1px solid #dddddd;
+	border-radius: 6rpx;
+}
+.imgBox {
+		display: flex;
+		flex-wrap: wrap;
+		padding-top: 15rpx;
+		
+	}
+
+	.imgLine {
+		position: relative;
+		margin-right: 20.6rpx;
+	}
+	.img4{
+		margin-right: 0rpx;
+	}
+
+	.itemImg {
+		width: 150rpx;
+		height: 150rpx;
+		margin-bottom: 20rpx;
+	}
+
+
+	.delImg {
+		width: 32rpx;
+		height: 32rpx;
+		position: absolute;
+		right: 0rpx;
+		top: 0rpx;
+	}
+.gaodu{
+	height: 200rpx;
+	padding-bottom: constant(safe-area-inset-bottom);
+	padding-bottom: env(safe-area-inset-bottom); 
+}
+.jiekouLIne{
+	padding-bottom: 36rpx;
+}
+</style>

+ 484 - 0
pages/subPack/refundDetail.vue

@@ -0,0 +1,484 @@
+<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"></view>
+				 <view class="tsYd"></view>
+				 <view class="tsHx"></view>
+				 <view class="tsYd"></view>
+			 </view>
+			 <view class="tsM">
+				 <view class="tsMline">发起退款</view>
+				 <view class="tsMline">商家处理</view>
+				 <view class="tsMline">商家退款</view>
+				 <view class="tsMline">退款结束</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="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" >
+		 				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>
+</template>
+
+<script>
+	export default {
+		components: {
+			
+		},
+		
+		data() {
+			return {
+				themeColor:'',
+				ext:'',
+				userInfo:'',
+				carInfo:'',
+				customerInfo:'',
+				
+			}
+		},
+		onLoad(opt) {
+			
+		},
+		onShow() {
+			
+		},
+		methods: {
+			
+			
+			
+		}
+	}
+</script>
+
+<style scoped lang="less">
+.box {
+	width: 100vw;
+	min-height: 100vh;
+	background: #F4F4F4;
+}
+.tkTopTitle{
+	font-weight: 500;
+	font-size: 36rpx;
+	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;
+	padding-top: 10rpx;
+}
+.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;
+}
+.topBox{
+	margin-bottom: 20rpx;
+}
+.copyIcon{
+	width: 30rpx;height: 30rpx;
+	margin-top: 4rpx;margin-right: 6rpx;
+}
+.tkImg{
+	width: 158rpx;height: 158rpx;
+	margin-left: 10rpx;
+	margin-bottom: 10rpx;
+}
+.tkImgBox{
+	display: flex;flex-wrap: wrap;
+	width: 504rpx;
+}
+.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);
+}
+.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: 12rpx;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%;
+}
+
+
+</style>