diff --git a/components/bottom/bottomBtn.vue b/components/bottom/bottomBtn.vue
new file mode 100644
index 0000000..8d1b9f5
--- /dev/null
+++ b/components/bottom/bottomBtn.vue
@@ -0,0 +1,73 @@
+<template>
+	<view class="container" @click="$emit('confirm')">
+		<button 
+		:style="{
+			     color: color,
+			     backgroundColor: backgroundColor,
+			     fontSize: fontSize,
+			     width: width,
+			     height: height,
+			     borderRadius: borderRadius
+			   }">
+			{{ text }}
+		</button>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			color: {
+				default: '#000000' // 设置默认颜色值
+			},
+			backgroundColor: {
+				default: '#FFFFFF' // 设置默认背景颜色
+			},
+			fontSize: {
+				default: '14px' // 设置默认字体大小
+			},
+			text: {
+				default: '按钮' // 设置默认文本内容
+			},
+			width: {
+				default: '100px' // 设置默认宽度
+			},
+			height: {
+				default: '200rpx' // 设置默认高度
+			},
+			borderRadius: {
+				default: '20rpx' // 设置默认高度
+			},
+			
+		},
+ 
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style scoped lang="less">
+	.container {
+		position: fixed;
+		bottom: 50rpx;
+		display: flex;
+		justify-content: center;
+		/* 水平居中 */
+		align-items: center;
+		/* 垂直居中 */
+		width: 100%;
+		/* 使容器宽度覆盖整个屏幕 */
+	}
+
+	button {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 1021534..18cc921 100644
--- a/pages.json
+++ b/pages.json
@@ -1,68 +1,63 @@
 {
-	"pages": [
-		{
+	"pages": [{
 			"path": "pages/index/index",
 			"style": {
 				"navigationBarTitleText": ""
 			}
 		},
 		{
-			"path" : "pages/index/order",
-			"style" : 
-			{
-				"navigationBarTitleText" : ""
+			"path": "pages/index/order",
+			"style": {
+				"navigationBarTitleText": ""
 			}
 		},
 		{
-			"path" : "pages/index/category",
-			"style" : 
-			{
-				"navigationBarTitleText" : ""
+			"path": "pages/index/category",
+			"style": {
+				"navigationBarTitleText": ""
 			}
 		},
 		{
-			"path" : "pages/index/center",
-			"style" : 
-			{
-				"navigationBarTitleText" : ""
+			"path": "pages/index/center",
+			"style": {
+				"navigationBarTitleText": ""
 			}
 		},
 		{
-			"path" : "pages/index/cart",
-			"style" : 
-			{
-				"navigationBarTitleText" : ""
+			"path": "pages/index/cart",
+			"style": {
+				"navigationBarTitleText": ""
 			}
 		}
 	],
-	"preloadRule" : {
-		"pages/index/index" : {
-			"network" : "all",
-			"packages" : ["pages_order"]
+	"preloadRule": {
+		"pages/index/index": {
+			"network": "all",
+			"packages": ["pages_order"]
 		}
 	},
-	"subPackages": [
-		{
-			"root": "pages_order",
-			"pages": [
-				{
-					"path": "order/orderDetail"
-				},
-				{
-					"path": "mine/purse"
-				},
-				{
-					"path": "mine/runningWater"
-				},
-				{
-					"path": "mine/address"
-				},
-				{
-					"path": "product/productDetail"
-				}
-			]
-		}
-	],
+	"subPackages": [{
+		"root": "pages_order",
+		"pages": [{
+				"path": "order/orderDetail"
+			},
+			{
+				"path": "mine/purse"
+			},
+			{
+				"path": "mine/runningWater"
+			},
+			{
+				"path": "mine/address"
+			},
+			{
+				"path": "product/productDetail"
+			},
+			{
+				"path": "order/refundsOrExchange"
+			}
+		]
+	}],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "酒店桌布",
@@ -71,4 +66,4 @@
 		"navigationStyle": "custom"
 	},
 	"uniIdRouter": {}
-}
+}
\ No newline at end of file
diff --git a/pages/index/center.vue b/pages/index/center.vue
index 2c30e4f..916d00a 100644
--- a/pages/index/center.vue
+++ b/pages/index/center.vue
@@ -1,10 +1,8 @@
 <template>
 	<view class="page">
-		
-		<navbar 
-		title="个人中心"
-		/>
-		
+
+		<navbar title="个人中心" />
+
 		<view class="head">
 			<view class="headImage">
 				<image src="" mode=""></image>
@@ -20,17 +18,14 @@
 					今天是您来的的第32天
 				</view>
 			</view>
-			<view class="headBtn"
-			@click="headBtn">
+			<view class="headBtn" @click="headBtn">
 				角色切换
 			</view>
 			<view class="setting">
-				<uv-icon
-				name="setting"
-				size="40rpx"></uv-icon>
+				<uv-icon name="setting" size="40rpx"></uv-icon>
 			</view>
 		</view>
-		
+
 		<!-- 水洗店 -->
 		<view class="userShop" v-if="userShop">
 			<userShopCommission />
@@ -39,9 +34,7 @@
 					我的用户
 				</view>
 				<view class="list">
-					<view class="item"
-					v-for="(item, index) in 20"
-					:key="index">
+					<view class="item" v-for="(item, index) in 20" :key="index">
 						<view class="name">
 							客户：王生
 						</view>
@@ -52,7 +45,7 @@
 				</view>
 			</view>
 		</view>
-		
+
 		<!-- 酒店 -->
 		<view class="user" v-else>
 			<view class="line">
@@ -78,125 +71,218 @@
 					常用功能
 				</view>
 				<uv-grid :col="4" :border="false">
-					
-					<uv-grid-item 
-					@click="$utils.navigateTo('/pages_order/mine/address')">
-						<image class="image" 
-						src="/static/image/center/7.png" 
-						mode=""></image>
+
+					<uv-grid-item @click="$utils.navigateTo('/pages_order/mine/address')">
+						<image class="image" src="/static/image/center/7.png" mode=""></image>
 						<text class="grid-text">地址管理</text>
 					</uv-grid-item>
-					
-					<uv-grid-item
-					@click="$utils.redirectTo('/index/order')">
-						<image class="image" 
-						src="/static/image/center/8.png" 
-						mode=""></image>
+
+					<uv-grid-item @click="$utils.redirectTo('/index/order')">
+						<image class="image" src="/static/image/center/8.png" mode=""></image>
 						<text class="grid-text">订单管理</text>
 					</uv-grid-item>
-					
-					<uv-grid-item>
-						<image class="image" 
-						src="/static/image/center/5.png" 
-						mode=""></image>
+
+					<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+1)">
+						<image class="image" src="/static/image/center/5.png" mode=""></image>
 						<text class="grid-text">换货</text>
 					</uv-grid-item>
-					
-					<uv-grid-item>
-						<image class="image" 
-						src="/static/image/center/7.png" 
-						mode=""></image>
+
+					<uv-grid-item @click="$utils.navigateTo('/pages_order/order/refundsOrExchange?index='+0)">
+						<image class="image" src="/static/image/center/7.png" mode=""></image>
 						<text class="grid-text">退货</text>
 					</uv-grid-item>
 				</uv-grid>
 			</view>
 			<view class="line grid">
 				<uv-grid :col="4" :border="false">
-					
-					<uv-grid-item>
-						<image class="image" 
-						src="/static/image/center/9.png" 
-						mode=""></image>
+
+					<uv-grid-item @click="contactUs">
+						<image class="image" src="/static/image/center/9.png" mode=""></image>
 						<text class="grid-text">联系客服</text>
 					</uv-grid-item>
-					
+
 					<uv-grid-item>
-						<image class="image" 
-						src="/static/image/center/6.png" 
-						mode=""></image>
+						<image class="image" src="/static/image/center/6.png" mode=""></image>
 						<text class="grid-text">我的租赁</text>
 					</uv-grid-item>
-					
-					<uv-grid-item
-					@click="$utils.redirectTo('/index/cart')">
-						<image class="image" 
-						src="/static/image/center/7.png" 
-						mode=""></image>
+
+					<uv-grid-item @click="$utils.redirectTo('/index/cart')">
+						<image class="image" src="/static/image/center/7.png" mode=""></image>
 						<text class="grid-text">租赁车</text>
 					</uv-grid-item>
-					
+
 					<uv-grid-item>
-						<image class="image" 
-						src="/static/image/center/7.png" 
-						mode=""></image>
+						<image class="image" src="/static/image/center/7.png" mode=""></image>
 						<text class="grid-text">申请成为水洗店</text>
 					</uv-grid-item>
 				</uv-grid>
 			</view>
 		</view>
-		
-		<tabber select="4"/>
+
+		<!-- 联系客服弹框 -->
+		<uv-overlay :show="show" @click="show = false">
+			<view class="warp">
+				<view class="rect" @tap.stop>
+					<view class="title">联系客服</view>
+					<view class="center">确定拨打客服电话?</view>
+					<view class="bottom">
+						<view>
+							<uv-button type="info" shape="circle" text="取消" :custom-style="customStyle1"
+								@click="cancle"></uv-button>
+						</view>
+						<view>
+							<uv-button type="info" shape="circle" text="确定" :custom-style="customStyle2"
+								@click="confirm"></uv-button>
+						</view>
+					</view>
+				</view>
+			</view>
+		</uv-overlay>
+
+
+		<tabber select="4" />
 	</view>
 </template>
 
 <script>
 	import tabber from '@/components/base/tabbar.vue'
-	import { mapGetters } from 'vuex'
+	import {
+		mapGetters
+	} from 'vuex'
 	import userShopCommission from '@/components/userShop/userShopCommission.vue'
 	export default {
-		components : {
+		components: {
 			tabber,
 			userShopCommission,
 		},
-		computed : {
+		computed: {
 			...mapGetters(['userShop']),
+			customStyle1() {
+				return {
+					height: '60rpx',
+					background: '#FFF',
+					color: '#000000',
+					fontSize: '34px',
+					borderRadius: '40rpx', //圆角
+					// nvue中必须是下方的写法
+					'border-top-right-radius': '40rpx',
+					'border-bottom-left-radius': '40rpx',
+					'border-bottom-right-radius': '40rpx',
+					'width': '150rpx',
+				}
+			},
+			customStyle2() {
+				return {
+					height: '60rpx',
+					background: '#fd5100',
+					color: '#FFF',
+					fontSize: '34px',
+					borderRadius: '40rpx', //圆角
+					// nvue中必须是下方的写法
+					'border-top-right-radius': '40rpx',
+					'border-bottom-left-radius': '40rpx',
+					'border-bottom-right-radius': '40rpx',
+					'width': '150rpx',
+				}
+			}
 		},
 		data() {
 			return {
+				show: false,
 			}
 		},
 		methods: {
-			headBtn(){
+
+
+			headBtn() {
 				let self = this
 				uni.showModal({
 					title: '演示切换角色之后的效果',
 					success(res) {
-						if(res.confirm){
+						if (res.confirm) {
 							self.$store.state.shop = !self.$store.state.shop
 						}
 					}
 				})
 			},
-			
+
+			// 联系客服按钮回调
+			contactUs() {
+				this.show = true
+			},
+			confirm() {
+				this.show = false
+			},
+
+			cancle() {
+				this.show = false
+			},
+
+
 		}
 	}
 </script>
 
 <style scoped lang="scss">
-	.page{
+	.page {
 		padding-bottom: 200rpx;
+
+		.warp {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 100%;
+
+		}
+
+		.rect {
+			width: 600rpx;
+			height: 300rpx;
+			background-color: #fff;
+			border-radius: 20rpx;
+			overflow: hidden;
+
+			.title {
+				padding: 10rpx 0 0 15rpx;
+				background-color: #fd5100;
+				color: #FFF;
+				text-align: left;
+				width: 100%;
+				height: 18%;
+				font-size: 36rpx;
+			}
+
+			.center {
+				height: 40%;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				font-size: 36rpx;
+			}
+
+			.bottom {
+				display: flex;
+				justify-content: center;
+				gap: 50rpx;
+			}
+		}
 	}
-	image{
+
+
+
+	image {
 		width: 100%;
 		height: 100%;
 	}
-	.head{
+
+	.head {
 		display: flex;
 		background-color: #fff;
 		padding: 40rpx 20rpx;
 		align-items: center;
 		position: relative;
-		.headImage{
+
+		.headImage {
 			width: 120rpx;
 			height: 120rpx;
 			background-image: url(/static/image/center/3.png);
@@ -205,9 +291,11 @@
 			border-radius: 50%;
 			margin-right: 40rpx;
 		}
-		.info{
+
+		.info {
 			font-size: 28rpx;
-			.vip{
+
+			.vip {
 				background-color: #FCCC92;
 				color: #FA6239;
 				width: 100rpx;
@@ -218,15 +306,18 @@
 				border-radius: 20rpx;
 				margin-top: 20rpx;
 			}
-			.name{
+
+			.name {
 				font-size: 32rpx;
 			}
-			.tips{
+
+			.tips {
 				font-size: 26rpx;
 				color: #ABABAB;
 			}
 		}
-		.headBtn{
+
+		.headBtn {
 			margin-left: auto;
 			padding: 15rpx 20rpx;
 			background-color: $uni-color;
@@ -234,23 +325,27 @@
 			border-radius: 20rpx;
 			margin-top: 50rpx;
 		}
-		.setting{
+
+		.setting {
 			position: absolute;
 			right: 50rpx;
 			top: 50rpx;
 		}
 	}
-	.userShop{
-		.userList{
-			.title{
+
+	.userShop {
+		.userList {
+			.title {
 				font-size: 32rpx;
 				font-weight: 900;
 				padding: 20rpx;
 			}
-			.list{
+
+			.list {
 				display: flex;
 				flex-wrap: wrap;
-				.item{
+
+				.item {
 					width: 270rpx;
 					margin: 20rpx;
 					display: flex;
@@ -259,10 +354,10 @@
 					background-color: #fff;
 					border-radius: 30rpx;
 					line-height: 60rpx;
-					.name{
-						
-					}
-					.num{
+
+					.name {}
+
+					.num {
 						color: $uni-color;
 						font-weight: 600;
 						font-size: 28rpx;
@@ -271,46 +366,54 @@
 			}
 		}
 	}
-	.user{
-		.line{
+
+	.user {
+		.line {
 			display: flex;
 			background-color: #fff;
 			margin-top: 20rpx;
 			padding: 20rpx 0;
-			.item{
+
+			.item {
 				flex: 1;
 				display: flex;
 				justify-content: center;
 				align-items: center;
 				padding: 20rpx 0;
-				&:nth-child(1){
+
+				&:nth-child(1) {
 					border-right: 1px solid #00000013;
 				}
-				.image{
+
+				.image {
 					width: 100rpx;
 					height: 70rpx;
 					margin-right: 20rpx;
 				}
 			}
 		}
-		.grid{
+
+		.grid {
 			flex-direction: column;
 			font-size: 26rpx;
 			padding: 20rpx;
-			.title{
+
+			.title {
 				margin-bottom: 30rpx;
 				font-size: 28rpx;
 				font-weight: 600;
 			}
-			.image{
+
+			.image {
 				width: 70rpx;
 				height: 70rpx;
 				margin-bottom: 10rpx;
 			}
-			text{
+
+			text {
 				text-align: center;
 				width: 120rpx;
 			}
 		}
 	}
-</style>
+</style>
\ No newline at end of file
diff --git a/pages_order/order/refundsOrExchange.vue b/pages_order/order/refundsOrExchange.vue
new file mode 100644
index 0000000..49e5335
--- /dev/null
+++ b/pages_order/order/refundsOrExchange.vue
@@ -0,0 +1,312 @@
+<template>
+	<view class="refundsOrExchange">
+		<navbar :title="title[titleIndex]" leftClick @leftClick="$utils.navigateBack" />
+
+		<view class="frame">
+			<!-- 商品简介 -->
+			<view class="itme1">
+				<view class="left">
+					<img src="../../static/image/center/1.png" alt="" style="width: 100%;height: 100%;">
+				</view>
+				<view class="center">
+					<view>桌布退货</view>
+					<view>产品规格：120*4*75【桌子尺寸】</view>
+				</view>
+				<view class="right">×3</view>
+			</view>
+
+			<!-- 申请类型&申请原因 -->
+			<view class="item2">
+				<view class="type">
+					<span>申请类型</span>
+					<span>退货退款</span>
+				</view>
+				<uv-line></uv-line>
+				<view class="reason">
+					<view>申请原因</view>
+					<view>
+						<uv-input placeholder="请输入申请原因" border="none" clearable></uv-input>
+					</view>
+				</view>
+			</view>
+
+			<!--  退货数量&申请金额-->
+			<view class="item3">
+				<view class="type">
+					<span>{{titleIndex==0?'退货数量' :'换货数量'}}</span>
+					<span>
+						<uv-number-box :min="1" :max="100"></uv-number-box>
+					</span>
+				</view>
+				<uv-line v-if='titleIndex == 0 ? true :false'></uv-line>
+				<view class="reason" v-if='titleIndex == 0 ? true :false'>
+					<view>申请原因</view>
+					<view>
+						<uv-input disabled placeholder="$" border="none" clearable></uv-input>
+					</view>
+				</view>
+			</view>
+
+			<!-- 申请说明 -->
+			<view class="item4">
+				<view>申请说明(选填)</view>
+				<view>
+					<uv-input placeholder="请您详细填写申请说明" border="none" clearable></uv-input>
+				</view>
+				<view>
+					<uv-upload :fileList="fileList" :maxCount="5" multiple width="150rpx" height="150rpx"
+						@delete="deleteImage" @afterRead="afterRead" :previewFullImage="true"></uv-upload>
+				</view>
+			</view>
+
+
+			<!-- 联系电话 -->
+			<view class="item5">
+				<view class="phone">
+					<view>联系电话</view>
+					<view>
+						<uv-input placeholder="请输入联系电话" border="none" clearable></uv-input>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 底部按钮 -->
+		<bottomBtn @confirm='confirm()' :color='bottomBtnStyle.color' :backgroundColor='bottomBtnStyle.backgroundColor'
+			:fontSize='bottomBtnStyle.fontSize' :text='bottomBtnStyle.text' :width="bottomBtnStyle.width"
+			:height="bottomBtnStyle.height" :borderRadius='bottomBtnStyle.borderRadius'>
+		</bottomBtn>
+
+
+	</view>
+</template>
+
+<script>
+	import bottomBtn from "../../components/bottom/bottomBtn.vue"
+	export default {
+		onLoad(option) {
+			this.titleIndex = option.index
+		},
+		components: {
+			bottomBtn
+		},
+		data() {
+			return {
+				titleIndex: 0,
+				title: ['申请换货', '申请退货'],
+				fileList: [],
+				bottomBtnStyle: {
+					color: '#FFF',
+					backgroundColor: '#fd5100',
+					fontSize: '34rpx',
+					text: '提交申请',
+					width: '400rpx',
+					height: '80rpx',
+					borderRadius: '100rpx'
+				},
+			}
+		},
+		mounted() {
+
+		},
+		methods: {
+			confirm() {
+				console.log("===");
+			},
+			deleteImage(e) {
+				this.fileList.splice(e.index, 1)
+			},
+			afterRead(e) {
+				let self = this
+				e.file.forEach(file => {
+					self.$Oss.ossUpload(file.url).then(url => {
+						self.fileList.push({
+							url
+						})
+					})
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	* {
+		box-sizing: border-box;
+	}
+
+	.refundsOrExchange {
+		.frame {
+
+			display: flex;
+			flex-direction: column;
+			gap: 30rpx;
+			width: 100%;
+			padding-top: 40rpx;
+			background-color: #f5f5f5;
+
+
+			.itme1 {
+				display: flex;
+				height: 200rpx;
+				background-color: #ffffff;
+
+				.left {
+					padding: 40rpx;
+					width: 20%;
+					border-radius: 10rpx;
+					background-color: #ffffff;
+				}
+
+				.center {
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					gap: 20rpx;
+					width: 60%;
+					padding: 0rpx 0 0 20rpx;
+					background-color: #ffffff;
+
+					// 给第一个 view 设置样式
+					>view:first-of-type {
+						font-size: 36rpx;
+						color: #333;
+					}
+
+					// 给第二个 view 设置样式
+					>view:nth-of-type(2) {
+						font-size: 28rpx;
+						color: #666666;
+					}
+				}
+
+				.right {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					width: 10%;
+					color: #666666;
+					background-color: #ffffff;
+				}
+			}
+
+			.item2 {
+				width: 100vw;
+
+				.type {
+					display: flex;
+					align-items: center;
+					background-color: #FFF;
+					height: 80rpx;
+					padding: 0 0 0 20rpx;
+
+					>span:nth-of-type(1) {
+						width: 30%;
+					}
+
+					>span:nth-of-type(2) {
+						width: 70%;
+					}
+				}
+
+				.reason {
+					display: flex;
+					align-items: center;
+					background-color: #FFF;
+					height: 80rpx;
+					// margin: 10rpx 0 0 0;
+					padding: 10rpx 0 0 20rpx;
+
+					>view:nth-of-type(1) {
+						width: 30%;
+					}
+
+					>view:nth-of-type(2) {
+						width: 70%;
+						padding: 0 20rpx 0 0;
+					}
+				}
+			}
+
+			.item3 {
+				width: 100vw;
+
+				.type {
+					display: flex;
+					align-items: center;
+					background-color: #FFF;
+					height: 80rpx;
+					padding: 0 0 0 20rpx;
+
+					>span:nth-of-type(1) {
+						width: 70%;
+					}
+
+					>span:nth-of-type(2) {
+						width: 30%;
+					}
+				}
+
+				.reason {
+					display: flex;
+					align-items: center;
+					background-color: #FFF;
+					height: 80rpx;
+					// margin: 10rpx 0 0 0;
+					padding: 10rpx 0 0 20rpx;
+
+					>view:nth-of-type(1) {
+						width: 30%;
+					}
+
+					>view:nth-of-type(2) {
+						width: 70%;
+						padding: 0 20rpx 0 0;
+					}
+				}
+			}
+
+			.item4 {
+				display: flex;
+				flex-direction: column;
+				padding: 10rpx 0 0 20rpx;
+				background-color: #FFF;
+
+				>view:nth-of-type(1) {
+					background-color: #FFF;
+				}
+
+				>view:nth-of-type(2) {
+					margin: 10rpx 0 10rpx 0;
+					background-color: #FFF;
+
+				}
+			}
+
+			.item5 {
+				display: flex;
+				flex-direction: column;
+				padding: 0 0 0 20rpx;
+				background-color: #FFF;
+
+				.phone {
+					display: flex;
+					align-items: center;
+					background-color: #FFF;
+					height: 80rpx;
+					// margin: 10rpx 0 0 0;
+					padding: 10rpx 0 0 20rpx;
+
+					>view:nth-of-type(1) {
+						width: 30%;
+					}
+
+					>view:nth-of-type(2) {
+						width: 70%;
+						padding: 0 20rpx 0 0;
+					}
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file