From acc4e2a4d26e18823a36c45f80bc8661ae2314cb Mon Sep 17 00:00:00 2001
From: syt <854400391@qq.com>
Date: Sun, 21 Jan 2024 22:52:59 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=B3=E8=AF=B7=E9=80=80=E6=AC=BE=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=BB=98=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                           |  38 +++
 pages/order/refund/freight.vue       | 143 +++++++++
 pages/order/refund/index.vue         |  12 +-
 pages/order/refund/refund.vue        |   4 +-
 pages/order/refund/refund1.vue       | 428 +++++++++++++++++++++++++++
 pages/order/refund/refundDetail.vue  | 265 +++++++++++++++++
 pages/order/refund/refundDetail1.vue | 165 +++++++++++
 static/news/icon-success.png         | Bin 0 -> 475 bytes
 static/news/refund-01.png            | Bin 0 -> 3238 bytes
 9 files changed, 1051 insertions(+), 4 deletions(-)
 create mode 100644 pages/order/refund/freight.vue
 create mode 100644 pages/order/refund/refund1.vue
 create mode 100644 pages/order/refund/refundDetail.vue
 create mode 100644 pages/order/refund/refundDetail1.vue
 create mode 100644 static/news/icon-success.png
 create mode 100644 static/news/refund-01.png

diff --git a/pages.json b/pages.json
index 39a97ce..c318b77 100644
--- a/pages.json
+++ b/pages.json
@@ -433,6 +433,44 @@
             }
             
         }
+        ,{
+            "path" : "pages/order/refund/freight",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "退货运费",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/order/refund/refund1",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "申请退款",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/order/refund/refundDetail",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "退货退款详情",
+				"navigationStyle": "custom",
+                "enablePullDownRefresh": false
+            }
+            
+        }
+        ,{
+            "path" : "pages/order/refund/refundDetail1",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "退货退款详情",
+				"navigationStyle": "custom",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
   "globalStyle": {
     // #ifdef H5
diff --git a/pages/order/refund/freight.vue b/pages/order/refund/freight.vue
new file mode 100644
index 0000000..5fb9ca7
--- /dev/null
+++ b/pages/order/refund/freight.vue
@@ -0,0 +1,143 @@
+<template>
+	<view class="fright">
+		<view class="fright-hd">
+			<view class="a">
+				<view class="title">退货运费</view>
+				<view class="desc">
+					平台秉承“谁过错，谁承担”的原则。如商品存在质量问题、发错货等情况，退货运费由商家承担。
+				</view>
+			</view>
+			<view class="b">
+				<view class="title">商家责任</view>
+				<view class="desc">无需消费者承担退货运费。您需向商家发起退货退款/换货申请，商家同意申请后，寄件时请您先垫付运费。退货/换货完成后，审核通过将自动打款运费给您。
+				</view>
+			</view>
+			<view class="b">
+				<view class="title">非商家责任</view>
+				<view class="desc">消费者承担退货运费。
+				</view>
+			</view>
+		</view>
+		<view class="fright-bd">
+			<image class="icon" src="/static/home/phone.jpg"></image>
+			<view class="info">
+				<view class="a">我要退货退款我要退货退款我要退货退款我要退货退款我要退货退款</view>
+				<view class="b">已收货</view>
+			</view>
+			<view class="btn">申请售后</view>
+		</view>
+		<view class="fright-fd">
+			运费常见问题<image class="arrow" src="/static/news/icon-arrow.png"></image>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.fright{
+	overflow: hidden;
+	.arrow{
+		width: 30rpx;
+		height: 30rpx;
+	}
+	&-hd{
+		padding: 40rpx;
+		box-sizing: border-box;
+		margin-top: 20rpx;
+		background: linear-gradient(180deg, #FFE0E0 0%, #FFFFFF 100%);
+		border-radius: 0px 0px 0px 0px;
+		.a{
+			overflow: hidden;
+			.title{
+				font-size: 36rpx;
+				font-weight: 500;
+				color: #F55349;
+				line-height: 42rpx;
+			}
+			.desc{
+				padding: 30rpx 0;
+				font-size: 28rpx;
+				color: #212121;
+				line-height: 50rpx;
+			}
+		}
+		.b{
+			overflow: hidden;
+			.title{
+				font-size: 36rpx;
+				font-weight: 500;
+				color: #212121;
+				line-height: 42rpx;
+			}
+			.desc{
+				padding: 30rpx 0;
+				font-size: 28rpx;
+				color: #212121;
+				line-height: 50rpx;
+			}
+		}
+	}
+	&-bd{
+		padding: 40rpx;
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background-color: #FFFFFF;
+		margin-top: 20rpx;
+		.icon{
+			width: 135rpx;
+			height: 132rpx;
+			margin-right: 30rpx;
+			border-radius: 10rpx;
+		}
+		.info{
+			flex: 1;
+			.a{
+				font-size: 30rpx;
+				color: #212121;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				overflow: hidden;
+				max-width: 300rpx;
+			}
+			.b{
+				font-size: 26rpx;
+				margin-top: 20rpx;
+				color: #F55349;
+			}
+		}
+		.btn{
+			padding: 0 20rpx;
+			line-height: 70rpx;
+			border: 1px solid #ddd;
+			border-radius: 12rpx;
+			font-size: 30rpx;
+			color: #555;
+		}
+	}
+	&-fd{
+		padding: 40rpx;
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-size: 30rpx;
+		color: #212121;
+		background-color: #FFFFFF;
+		margin-top: 20rpx;
+	}
+}
+</style>
\ No newline at end of file
diff --git a/pages/order/refund/index.vue b/pages/order/refund/index.vue
index 28c548d..91d557e 100644
--- a/pages/order/refund/index.vue
+++ b/pages/order/refund/index.vue
@@ -6,7 +6,7 @@
 				<view class="n">出柜|圆通快递：已签收，签收人凭取..</view>
 				<image class="arrow" src="/static/news/icon-arrow.png"></image>
 			</view>
-			<view class="b">
+			<view class="b" @click="openPage(4)">
 				退货运费规则
 				<image class="arrow" src="/static/news/icon-arrow.png"></image>
 			</view>
@@ -48,7 +48,15 @@
 			openPage(index){
 				if(index == 1){
 					uni.navigateTo({
-						url: "/pages/order/refund/refund"
+						url: "/pages/order/refund/refund1"
+					})
+				}else if(index == 2){
+					uni.navigateTo({
+						url: "/pages/order/refund/refund"
+					})
+				}else if(index == 4){
+					uni.navigateTo({
+						url: "/pages/order/refund/freight"
 					})
 				}
 			}
diff --git a/pages/order/refund/refund.vue b/pages/order/refund/refund.vue
index ca1e697..3b62728 100644
--- a/pages/order/refund/refund.vue
+++ b/pages/order/refund/refund.vue
@@ -71,7 +71,7 @@
 		<view class="invoice-phone">
 			联系电话<input type="number" placeholder=""/>
 		</view>
-		<view class="invoice-fd">
+		<view class="invoice-fd" @click="toDetail()">
 			提交申请
 		</view>
 	</view>
@@ -108,7 +108,7 @@
 			},
 			toDetail(i){
 				uni.navigateTo({
-					url: "/pages/invoice/edit"
+					url: "/pages/order/refund/refundDetail"
 				})
 			},
 			bindPickerChange(e){
diff --git a/pages/order/refund/refund1.vue b/pages/order/refund/refund1.vue
new file mode 100644
index 0000000..2dd42d3
--- /dev/null
+++ b/pages/order/refund/refund1.vue
@@ -0,0 +1,428 @@
+<template>
+	<view class="invoice">
+		<view class="invoice-goods">
+			<view class="a">
+				<image src="/static/home/phone.jpg"></image>
+			</view>
+			<view class="b">
+				<view class="l">产品名称iPhone13</view>
+				<view class="r">【配置套餐】<text>x1</text></view>
+			</view>
+		</view>
+		<view class="invoice-info">
+			<view class="b">
+				<view class="item">
+					<view class="l">申请类型：</view>
+					<view class="r">
+						我要退货退款
+					</view>
+				</view>
+				<view class="item">
+					<view class="l">申请原因：</view>
+					<view class="r">
+						<picker :value="index1" :range="array1" @change="bindPickerChange1">
+							<view class="lx" :class="index1==-1?'lx-on':''">{{index1==-1?'点击选择申请原因':array[index1]}}</view>
+						</picker>
+					</view>
+				</view>
+				
+			</view>
+		</view>	
+		<view class="invoice-money">
+			<view class="a">申请金额</view>
+			<view class="b">
+				<view class="l">￥
+					<view class="money" v-if="toggleIndex">{{value}}</view>
+					<input type="number" :focus="true" v-model="value" v-else placeholder-class="box" placeholder="请输入金额" />
+				</view>
+				<view class="r" @click="toggleItem()">
+					<image src="@/static/news/icon-edit.png"></image>
+					修改金额</view>
+			</view>
+		</view>
+		<view class="invoice-remark">
+			<view class="a">
+				<view class="l">申请说明<text>（必填）</text></view>
+				<view class="r">您还可以输入{{value?(200-value.length):200}}字</view>
+			</view>
+			<view class="b">
+				<u-input v-model="value" maxlength="200" type="textarea" :height="height" placeholder="请您详细填写申请说明"  />
+			</view>
+			<view class="c">
+				<u-upload :action="action" width="160" height="160" :file-list="fileList" :custom-btn="true" max-count="5">
+					<template v-slot:addBtn>
+						<view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
+							<image src="/static/news/icon-upload.png"></image>
+							<view class="1">上传图片</view>
+							<view class="1">最多5张</view>
+						</view>
+					</template>
+				</u-upload>
+			</view>
+		</view>
+		<view class="invoice-phone">
+			联系电话<input type="number" placeholder=""/>
+		</view>
+		<view class="invoice-fd" @click="toDetail()">
+			提交申请
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				height: 150,
+				fileList: [
+					{
+						url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
+					}
+				],
+				value: "1235",
+				content: "确认您的发票信息无误后再提交",
+				show: true,
+				toggleIndex: true,
+				index: -1,
+				array: ['已收到货','未收到货'],
+				index1: -1,
+				array1: ['不喜欢、效果不好','不想要了',"外观、型号、参数与描述不符",'货物与描述不符','商品有划痕或破损','配件、部件、屏幕问题','质量问题','收到商品少件（含少配件）','商品破损或污渍','商家发错货'],
+				tabIndex: 2
+			};
+		},
+		methods: {
+			onClose() {},
+			tabItem(i){
+				this.tabIndex = i;
+			},
+			toggleItem(i){
+				this.toggleIndex = !this.toggleIndex;
+			},
+			toDetail(i){
+				uni.navigateTo({
+					url: "/pages/order/refund/refundDetail1"
+				})
+			},
+			bindPickerChange(e){
+				this.index = e.detail.value
+			},
+			bindPickerChange1(e){
+				this.index1 = e.detail.value
+			}
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.invoice{
+	&-goods{
+		padding: 0 20rpx 0 40rpx;
+		overflow: hidden;
+		background-color: #fff;
+		padding: 30rpx;
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		.a{
+			width: 145rpx;
+			height: 135rpx;
+			margin-right: 20rpx;
+			image{
+				width: 100%;
+				height: 100%;
+				border-radius: 10rpx;
+			}
+		}
+		.b{
+			flex: 1;
+			overflow: hidden;
+			.l{
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				font-size: 32rpx;
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 500;
+				color: #262626;
+				overflow: hidden;
+			}
+			.r{
+				font-size: 30rpx;
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 400;
+				color: #838383;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				margin-top: 20rpx;
+				text{
+					display: block;
+					font-size: 28rpx;
+					color: #555;
+				}
+			}
+		}
+	}
+	&-info{
+		margin-top: 20rpx;
+		background-color: #fff;
+		overflow: hidden;
+		.a{
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 20rpx 30rpx 20rpx 60rpx;
+			box-sizing: border-box;
+			border-bottom: 1px solid #F3F3F3;
+			font-size: 32rpx;
+			font-weight: 500;
+			color: #262626;
+			text{
+				color: #006AFF;
+				padding-right: 40rpx;
+				position: relative;
+				&::after{
+					content: "";
+					width: 16rpx;
+					height: 16rpx;
+					border-top: 1px solid #006AFF;
+					border-left: 1px solid #006AFF;
+					position: absolute;
+					right: 0;
+					top: 14rpx;
+					z-index: 1;
+					transform: rotate(135deg);
+				}
+			}
+		}
+		.b{
+			padding: 0 30rpx 0 45rpx;
+			box-sizing: border-box;
+			overflow: hidden;
+			.item{
+				padding: 30rpx 0;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				box-sizing: border-box;
+				border-top: 1px solid #F3F3F3;
+				font-size: 32rpx;
+				font-weight: 500;
+				color: #262626;	
+				overflow: hidden;
+				&:first-child{
+					border-top-color: #fff;
+				}
+				.l{
+					width: 180rpx;
+					font-size: 32rpx;
+					font-weight: 400;
+					color: #656565;
+				}
+				.r{
+					flex: 1;
+					display: flex;
+					align-items: center;
+					font-size: 32rpx;
+					font-weight: 400;
+					color: #262626;
+					.li{
+						width: 150rpx;
+						height: 78rpx;
+						background: #F3F3F3;
+						border-radius: 8rpx;
+						text-align: center;
+						line-height: 78rpx;
+						font-size: 32rpx;
+						font-weight: 400;
+						color: #262626;
+						margin-right: 12rpx;
+						&-on{
+							background: #FDF4F4;
+							background: url(/static/invoice/select-active.png) center top no-repeat;
+							background-size: contain;
+						}
+					}
+					input {
+						flex: 1;
+					}
+					picker{
+						flex: 1;
+						.tt{
+							width: 180rpx;
+							position: relative;
+							color: #4894FF;
+							text-align: right;
+							&::after{
+								content: "";
+								width: 16rpx;
+								height: 16rpx;
+								border-top: 1px solid #4894FF;
+								border-left: 1px solid #4894FF;
+								position: absolute;
+								right: -50rpx;
+								top: 14rpx;
+								z-index: 1;
+								transform: rotate(135deg);
+							}
+						}
+						.lx{
+							width: 100%;
+							position: relative;
+							&-on{
+								color: #B8B8B8;
+							}
+							&::after{
+								content: "";
+								width: 16rpx;
+								height: 16rpx;
+								border-top: 1px solid #B8B8B8;
+								border-left: 1px solid #B8B8B8;
+								position: absolute;
+								right: 20rpx;
+								top: 14rpx;
+								z-index: 1;
+								transform: rotate(135deg);
+							}
+						}
+					}
+				}
+			}
+			
+		}
+	}
+	&-fd{
+		width: 664rpx;
+		height: 104rpx;
+		background: #F55349;
+		border-radius: 8rpx;
+		text-align: center;
+		margin: 0 auto;
+		margin-top: 60rpx;
+		font-size: 32rpx;
+		font-weight: 500;
+		color: #FFFFFF;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	&-money{
+		width: 100%;
+		background: #FFFFFF;
+		margin-top: 20rpx;
+		padding: 26rpx 26rpx 26rpx 48rpx;
+		box-sizing: border-box;
+		overflow: hidden;
+		.a{
+			padding-bottom: 10rpx;
+			font-size: 32rpx;
+			font-weight: 400;
+			color: #838383;
+		}
+		.b{
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			.l{
+				font-size: 40rpx;
+				font-weight: 600;
+				color: #262626;
+				display: flex;
+				align-items: baseline;
+				input,.money{
+					width: 400rpx;
+					font-size: 52rpx;
+					color: #212121;
+					margin-left: 15rpx;
+				}
+				.box{
+					font-size: 26rpx;
+					color: #B8B8B8;
+					font-weight: normal;
+				}
+			}
+			.r{
+				font-size: 28rpx;
+				font-weight: 400;
+				color: #C2C2C2;
+				display: flex;
+				align-items: center;
+				image{
+					width: 36rpx;
+					height: 36rpx;
+					margin-right: 10rpx;
+				}
+			}
+		}
+	}
+	&-remark{
+		width: 100%;
+		background: #FFFFFF;
+		overflow: hidden;
+		margin-top: 20rpx;
+		padding: 26rpx 26rpx 26rpx 48rpx;
+		box-sizing: border-box;
+		.a{
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 15rpx 0;
+			.l{
+				font-size: 32rpx;
+				font-family: PingFang SC, PingFang SC;
+				font-weight: 400;
+				color: #838383;
+				text{
+					font-size: 28rpx;
+					font-weight: 400;
+					color: #F55349;
+				}
+			}
+			.r{
+				font-size: 24rpx;
+				font-weight: 400;
+				color: #A8A8A8;
+			}
+		}
+		.c{
+			padding-bottom: 20rpx;
+			overflow: hidden;
+			.slot-btn{
+				width: 80px;
+				height: 80px;
+				background: #FFFFFF;
+				border-radius: 10rpx;
+				border: 1px solid #C0C0C0;
+				text-align: center;
+				font-size: 24rpx;
+				font-weight: 500;
+				color: #D1D1D1;
+				image{
+					width: 50rpx;
+					height: 50rpx;
+					margin-top: 20rpx;
+				}
+			}
+		}
+	}
+	&-phone{
+		overflow: hidden;
+		background-color: #fff;
+		padding: 30rpx 26rpx 30rpx 48rpx;
+		box-sizing: border-box;
+		margin-top: 20rpx;
+		font-size: 32rpx;
+		font-weight: 500;
+		color: #838383;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		input {
+			flex: 1;
+			margin-left: 20rpx;
+			font-size: 32rpx;
+			color: #212121;
+		}
+	}
+}
+</style>
diff --git a/pages/order/refund/refundDetail.vue b/pages/order/refund/refundDetail.vue
new file mode 100644
index 0000000..c172db8
--- /dev/null
+++ b/pages/order/refund/refundDetail.vue
@@ -0,0 +1,265 @@
+<template>
+	<view class="refund">
+		<view class="refund-navbar">
+			<u-navbar title="退货退款详情" :background="background"></u-navbar>
+		</view>
+		<view class="refund-hd">
+			<view class="l">
+				<view class="a">退款成功</view>
+				<view class="b">
+					<text>￥3323</text>已退到农行信用卡3949
+				</view>
+			</view>
+			<view class="r">
+				<image src="@/static/news/icon-arrow.png"></image>
+			</view>
+		</view>
+		<view class="refund-bd">
+			<view class="li" :class="currentIndex >= 0?'li-on':''">
+				<view class="line">
+					<image v-if="currentIndex >= 0" class="icon" src="@/static/news/icon-success.png"></image>
+					<view v-else class="clicle">●</view>
+				</view>
+				<view class="title">同意退款</view>
+				<view class="timer">12-1 19:22</view>
+			</view>
+			<view class="li" :class="currentIndex >= 1?'li-on':''">
+				<view class="line">
+					<image v-if="currentIndex >= 1" class="icon" src="@/static/news/icon-success.png"></image>
+					<view v-else class="clicle">●</view>
+				</view>
+				<view class="title">微信支付处理中</view>
+				<view class="timer">12-1 19:22</view>
+			</view>
+			<view class="li" :class="currentIndex >= 2?'li-on':''">
+				<view class="line">
+					<image v-if="currentIndex >= 2" class="icon" src="@/static/news/icon-success.png"></image>
+					<view v-else class="clicle">●</view>
+				</view>
+				<view class="title">退款成功</view>
+				<view class="timer">12-1 19:22</view>
+			</view>
+		</view>
+		<view class="refund-box">
+			<view class="a">
+				退货物流
+			</view>
+			<view class="b">
+				顺丰快递 SF234568990
+			</view>
+			<view class="c">
+				<image src="@/static/news/icon-arrow.png"></image>
+			</view>
+		</view>
+		<view class="refund-box">
+			<view class="a">
+				协商记录
+			</view>
+			<view class="c">
+				<image src="@/static/news/icon-arrow.png"></image>
+			</view>
+		</view>
+		<view class="refund-fd">
+			<view class="a">
+				协商记录
+				<view class="more">
+					查看全部<image src="@/static/news/icon-arrow.png"></image>
+				</view>
+			</view>
+			<view class="b">
+				<view class="li">问：退款什么时候到账，退到哪里？</view>
+				<view class="li">问：如何查询退款到账信息？</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import img from "@/static/news/refund-bg.png"
+	export default {
+		data() {
+			return {
+				currentIndex: 0,
+				background: {
+					background: 'url('+	img+') center -44px no-repeat',
+					backgroundSize: '100%',
+				},
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.refund{
+	width: 100%;
+	overflow: hidden;
+	&-hd{
+		height: 206rpx;
+		background: linear-gradient(180deg, #FCE2E7 0%, #FFFFFF 100%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 60rpx;
+		box-sizing: border-box;
+		.l{
+			flex: 1;
+			overflow: hidden;
+			.a{
+				font-size: 32rpx;
+				font-weight: 500;
+				color: #262626;
+			}
+			.b{
+				display: flex;
+				align-items: baseline;
+				margin-top: 30rpx;
+				font-size: 28rpx;
+				font-weight: 500;
+				color: #4F4F4F;
+				text{
+					font-size: 53rpx;
+					margin-right: 20rpx;
+				}
+			}
+		}
+		.r{
+			image{
+				width: 40rpx;
+				height: 40rpx;
+			}
+		}
+	}
+	&-bd{
+		background-color: #FFFFFF;
+		padding: 35rpx 40rpx;
+		display: flex;
+		justify-content: center;
+		.li{
+			flex: 1;
+			position: relative;
+			text-align: center;
+			.line{
+				display: flex;
+				height: 50rpx;
+				align-items: center;
+				justify-content: center;
+				position: relative;
+				&::after{
+					content: "";
+					width: 160rpx;
+					height: 4rpx;
+					background: #000;
+					position: absolute;
+					left: -80rpx;
+					top: 50%;
+					margin-top: 0rpx;
+					z-index: 2;
+				}
+			}
+			&-on{
+				.line::after{
+					content: "";
+					width: 160rpx;
+					height: 4rpx;
+					background: #3BC020;
+					position: absolute;
+					left: -80rpx;
+					top: 50%;
+					margin-top: 0rpx;
+					z-index: 2;
+				}
+				.clicle{
+					color: #3BC020;
+				}
+			}
+			&:first-child{
+				.line::after{
+					content: "";
+					background: #fff;
+				}
+			}
+			.clicle{
+				color: #212121;
+			}
+			.icon{
+				width: 30rpx;
+				height: 30rpx;
+			}
+			.title{
+				font-size: 28rpx;
+				font-weight: 400;
+				color: #4F4F4F;
+				margin-top: 20rpx;
+			}
+			.timer{
+				font-size: 28rpx;
+				font-weight: 400;
+				color: #959595;
+				margin-top: 20rpx;
+			}
+		}
+	}
+	&-box{
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background-color: #FFFFFF;
+		padding: 35rpx 40rpx;
+		margin-top: 20rpx;
+		.a{
+			flex: 1;
+			font-size: 28rpx;
+			font-weight: 400;
+			color: #292929;
+		}
+		.b{
+			font-size: 28rpx;
+			font-weight: 400;
+			color: #484848;
+		}
+		.c{
+			flex: 1;
+			text-align: right;
+			image{
+				width: 40rpx;
+				height: 40rpx;
+			}
+		}
+	}
+	&-fd{
+		background-color: #FFFFFF;
+		padding: 35rpx 40rpx;
+		margin-top: 20rpx;
+		.a{
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			font-size: 30rpx;
+			color: #212122;
+			.more{
+				display: flex;
+				align-items: center;
+				font-size: 28rpx;
+				color: #959595;
+				image{
+					width: 30rpx;
+					height: 30rpx;
+					margin-left: 10rpx;
+				}
+			}
+		}
+		.b{
+			margin-top: 20rpx;
+			overflow: hidden;
+			.li{
+				line-height: 50rpx;
+				font-size: 26rpx;
+				color: #959595;
+			}
+		}
+	}
+}
+</style>
diff --git a/pages/order/refund/refundDetail1.vue b/pages/order/refund/refundDetail1.vue
new file mode 100644
index 0000000..1794619
--- /dev/null
+++ b/pages/order/refund/refundDetail1.vue
@@ -0,0 +1,165 @@
+<template>
+	<view class="refund">
+		<view class="refund-navbar">
+			<u-navbar title="退货退款详情" :background="background"></u-navbar>
+		</view>
+		<view class="refund-hd">
+			<view class="l">
+				<view class="a">商家已同意退货/退款申请</view>
+				<view class="b">
+					剩余：<u-count-down :timestamp="timestamp" format="DD天HH时mm分ss秒"></u-count-down>
+				</view>
+			</view>
+			<view class="r">
+				<image src="@/static/news/refund-01.png"></image>
+			</view>
+		</view>
+		<view class="refund-bd">
+			<view class="a">卖家已同意退货申请，请尽早发货</view>
+			<view class="b">
+				<view class="l">退货说明：</view>
+				<view class="r"><text>●</text>未与商家协商一致请勿平邮或到付。</view>
+				<view class="r"><text>●</text>我是退货说明。</view>
+			</view>
+			<view class="c">
+				<view class="btn">撤销申请</view>
+			</view>
+		</view>
+		<view class="refund-fd">
+			<view class="l">
+				<view class="a">退款原因</view>
+				<view class="b">不喜欢，效果不好</view>
+			</view>
+			<view class="l">
+				<view class="a">退款金额</view>
+				<view class="b">¥3323</view>
+			</view>
+			<view class="l">
+				<view class="a">退款时间</view>
+				<view class="b">2023-12-12 18:30</view>
+			</view>
+			<view class="l">
+				<view class="a">退款编号</view>
+				<view class="b">3880404038400808408</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import img from "@/static/news/refund-bg.png"
+	export default {
+		data() {
+			return {
+				timestamp: 24*3600*1000,
+				background: {
+					background: 'url('+	img+') center -44px no-repeat',
+					backgroundSize: '100%',
+				}
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.refund{
+	width: 100%;
+	overflow: hidden;
+	&-hd{
+		height: 206rpx;
+		background: linear-gradient(180deg, #FCE2E7 0%, #FFFFFF 100%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 60rpx;
+		box-sizing: border-box;
+		.l{
+			flex: 1;
+			overflow: hidden;
+			.a{
+				font-size: 32rpx;
+				font-weight: 500;
+				color: #262626;
+			}
+			.b{
+				display: flex;
+				align-items: center;
+				margin-top: 30rpx;
+				font-size: 28rpx;
+				font-weight: 500;
+				color: #F55349;
+			}
+		}
+		.r{
+			margin-left: 100rpx;
+			overflow: hidden;
+			image{
+				width: 114rpx;
+				height: 129rpx;
+			}
+		}
+	}
+	&-bd{
+		background-color: #FFFFFF;
+		padding: 35rpx 60rpx;
+		margin-top: 20rpx;
+		.a{
+			font-size: 28rpx;
+			font-weight: 500;
+			color: #262626;
+		}
+		.b{
+			margin-top: 20rpx;
+				font-size: 28rpx;
+			.l{
+				font-weight: 400;
+				line-height: 60rpx;
+				color: #959595;
+			}
+			.r{
+				text{
+					margin-right: 30rpx;
+				}
+				color: #959595;
+				line-height: 60rpx;
+				position: relative;
+			}
+		}
+		.c{
+			padding: 20rpx 0 0;
+			overflow: hidden;
+			display: flex;
+			justify-content: flex-end;
+			.btn{
+				width: 250rpx;
+				text-align: center;
+				line-height: 70rpx;
+				border: 1px solid #ddd;
+				border-radius: 12rpx;
+				font-size: 30rpx;
+				color: #555;
+			}
+		}
+	}
+	&-fd{
+		background-color: #FFFFFF;
+		padding: 10rpx 60rpx;
+		overflow: hidden;
+		margin-top: 20rpx;
+		.l{
+			display: flex;
+			align-items: center; 
+			padding: 20rpx 0;
+			font-size: 28rpx;
+			color: #959595;
+			.b{
+				margin-left: 30rpx;
+				color: #484848;
+			}
+		}
+	}
+}
+</style>
diff --git a/static/news/icon-success.png b/static/news/icon-success.png
new file mode 100644
index 0000000000000000000000000000000000000000..86143b4025108b636eb00f358fa19f9991c3c121
GIT binary patch
literal 475
zcmV<10VMv3P)<h;3K|Lk000e1NJLTq000gE000gM1^@s6A4o0H00001b5ch_0Itp)
z=>Px$l}SWFR5(wClFchbVHC!n=bb?&vXQ1n=9cellq}{hl$4b}fWndmi`m)u1BOz{
zhLjD(O3G|3rfbE*Mxw;RERbf!O!>Go^B&!6?(LG{U7gN*e$R6{Jw)IQT1K=6I!SO$
z$Swc^kz0Ui(WSN1k^2X4oL*sC#yBaP02_j0fx4i}m^~fI?m9geOdJ~%gzOMhRiH{+
z$|9UR8P4u8anc%7cIf&Kr|()s-qz@*X&EUJ3x7E&C``A_VgGR(`O-5)^b$=geo3;g
z8t6caJu8Su+A)7VjyL`4-0YI(vGGBmwq8Xr)I5r#+<~tVgpwCiD3o5@KLKn9v<cKS
zhMTZ8kVYnVi1oW=RD&w2AKzAu*2S>azlTgNjh4D7;*ky{FD88_Zxs=_qG`3INaY{r
z3*JS(`0^{{!bFO0T8JA0jh>>jc2V1S*Kfbwtf0%KUN-=h)a(EZ{TBdT=9H5jKXQqT
zF`+`(K*0HjNI?WMPHOzfc>{?|YfOd1^CB`vuu}j<ksE=ei%_d)!`UZq_7jJQqN$o4
RiqZf8002ovPDHLkV1o0|(p&%l

literal 0
HcmV?d00001

diff --git a/static/news/refund-01.png b/static/news/refund-01.png
new file mode 100644
index 0000000000000000000000000000000000000000..60cfd6ccbf0524cec64aaea166fe6cd015acb8e0
GIT binary patch
literal 3238
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
Y1LMK(3B{G+*8l(j07*qoM6N<$f@N$*TmS$7

literal 0
HcmV?d00001