diff --git a/pages.json b/pages.json
index af32d5ed..0b423f94 100644
--- a/pages.json
+++ b/pages.json
@@ -349,6 +349,12 @@
 						"navigationBarTitleText": "退货列表"
 					}
 				},
+              {
+                "path": "user_return_detail/index",
+                "style": {
+                  "navigationBarTitleText": "退货详情"
+                }
+              },
 				{
 					"path": "goods_return/index",
 					"style": {
diff --git a/pages/order_details/index.vue b/pages/order_details/index.vue
index d2b8fbe5..e277e821 100644
--- a/pages/order_details/index.vue
+++ b/pages/order_details/index.vue
@@ -1,11 +1,10 @@
 <template>
 	<view>
 		<view class='order-details'>
-			<!-- 给 header 上与 data 上加 on 为退款订单-->
-			<view class='header bg-color' :class='isGoodsReturn ? "on":""'>
+			<view class='header bg-color'>
 				<view class='picTxt acea-row row-middle'>
           <!-- 状态图 -->
-          <view class='pictrue' v-if="isGoodsReturn === false">
+          <view class='pictrue'>
             <image v-if="orderInfo.status === 0" src="@/static/images/order/status_0.gif" />
             <image v-if="orderInfo.status === 10" src="@/static/images/order/status_10.gif" />
             <image v-if="orderInfo.status === 20" src="@/static/images/order/status_20.gif" />
@@ -13,7 +12,7 @@
             <image v-if="orderInfo.status === 30 && orderInfo.commentStatus" src="@/static/images/order/status_30b.gif" />
             <image v-if="orderInfo.status === 40" src="@/static/images/order/status_40.gif" />
           </view>
-					<view class='data' :class='isGoodsReturn ? "on":""'>
+					<view class='data'>
             <!-- 状态提示 -->
             <view class='state' v-if="orderInfo.status === 0">请在 {{ formatDate(orderInfo.payExpireTime)}} 前完成支付</view>
             <view class='state' v-if="orderInfo.status === 10">商家未发货，请耐心等待</view>
@@ -29,7 +28,7 @@
 			</view>
 
       <!-- 状态的过程 -->
-      <view v-if="!isGoodsReturn && orderInfo.status !== 40">
+      <view v-if="orderInfo.status !== 40">
         <view class='nav'>
           <view class='navCon acea-row row-between-wrapper'>
             <view :class="orderInfo.status === 0 ? 'on':''">待付款</view>
@@ -145,15 +144,7 @@
 				<!-- #endif -->
 			</view>
 
-			<view class="pad30">
-        <!-- TODO 芋艿：退款各种 -->
-				<view class='nav refund' v-if="orderInfo.refundStatus>0">
-					<view class="title">
-						<image src="/static/images/shuoming.png" mode=""></image>
-						{{orderInfo.refundStatus==1?'商家审核中':orderInfo.refundStatus==2?'商家已退款':'商家拒绝退款'}}
-					</view>
-					<view class="con pad30">{{orderInfo.refundStatus==1 ? "您已成功发起退款申请，请耐心等待商家处理；退款前请与商家协商一致，有助于更好的处理售后问题": orderInfo.refundStatus==2? "退款已成功受理，如商家已寄出商品请尽快退回；感谢您的支持": "拒绝原因：" + orderInfo.refundReason}}</view>
-				</view>
+			<view>
 				<view class='wrapper borRadius14'>
 					<view class='item acea-row row-between'>
 						<view>订单编号：</view>
@@ -184,21 +175,6 @@
 						<view class='conter'>{{ orderInfo.userRemark }}</view>
 					</view>
 				</view>
-        <!-- TODO 芋艿：退款订单详情 -->
-				<view v-if="isGoodsReturn" class='wrapper borRadius14' >
-					<view class='item acea-row row-between'>
-						<view>收货人：</view>
-						<view class='conter'>{{orderInfo.realName}}</view>
-					</view>
-					<view class='item acea-row row-between'>
-						<view>联系电话：</view>
-						<view class='conter'>{{orderInfo.userPhone}}</view>
-					</view>
-					<view class='item acea-row row-between'>
-						<view>收货地址：</view>
-						<view class='conter'>{{orderInfo.userAddress}}</view>
-					</view>
-				</view>
 
         <!-- 配送信息 -->
         <view v-if="orderInfo.logisticsId !== undefined">
@@ -251,7 +227,7 @@
 				<view style='height:120rpx;'></view>
 
         <!-- 操作区域 -->
-        <view class='footer acea-row row-right row-middle' v-if="isGoodsReturn==false">
+        <view class='footer acea-row row-right row-middle'>
 					<view class="qs-btn" v-if="orderInfo.status === 0" @click.stop="cancelOrder">
             取消订单
           </view>
@@ -325,9 +301,7 @@
 
         // TODO 芋艿：未整理
         codeImg: '',
-        qrcodeSize: 100,
-
-        isGoodsReturn: false, //是否为退款订单
+        qrcodeSize: 100
       };
     },
     computed: mapGetters(['isLogin', 'chatUrl', 'userInfo']),
@@ -394,18 +368,6 @@
           if (this.orderInfo.deliveryType === 2 && this.orderInfo.payStatus) {
             this.markCode(res.data.verifyCode);
           }
-
-          // TODO 芋艿：还在
-          if (res.data.refundStatus !== 0) {
-            this.isGoodsReturn = true;
-          }
-          this.isGoodsReturn = false; // TODO 芋艿：强制设置
-          if (this.isGoodsReturn) {
-            uni.setNavigationBarColor({
-              frontColor: '#ffffff',
-              backgroundColor: '#666666'
-            })
-          }
         }).catch(err => {
           uni.hideLoading();
           this.$util.Tips({
diff --git a/pages/users/user_return_detail/index.vue b/pages/users/user_return_detail/index.vue
new file mode 100644
index 00000000..b58ff03c
--- /dev/null
+++ b/pages/users/user_return_detail/index.vue
@@ -0,0 +1,566 @@
+<template>
+	<view>
+    <view class='order-details'>
+      <view class="pad30">
+        <!-- TODO 芋艿：退款各种 -->
+        <view class='nav refund'>
+          <view class="title">
+            <image src="/static/images/shuoming.png" mode="" />
+            {{order.refundStatus==1?'商家审核中':order.refundStatus==2?'商家已退款':'商家拒绝退款'}}
+          </view>
+          <view class="con pad30">
+            {{
+               order.refundStatus==1 ? "您已成功发起退款申请，请耐心等待商家处理；退款前请与商家协商一致，有助于更好的处理售后问题":
+               order.refundStatus==2 ? "退款已成功受理，如商家已寄出商品请尽快退回；感谢您的支持" : "拒绝原因：" + order.refundReason
+            }}
+          </view>
+        </view>
+
+        <!-- TODO 芋艿：退款订单详情 -->
+        <view class='wrapper borRadius14' >
+          <view class='item acea-row row-between'>
+            <view>收货人：</view>
+            <view class='conter'>{{order.realName}}</view>
+          </view>
+          <view class='item acea-row row-between'>
+            <view>联系电话：</view>
+            <view class='conter'>{{order.userPhone}}</view>
+          </view>
+          <view class='item acea-row row-between'>
+            <view>收货地址：</view>
+            <view class='conter'>{{order.userAddress}}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+	</view>
+</template>
+<script>
+	import { toLogin } from '@/libs/login.js';
+	import { mapGetters } from "vuex";
+  import * as TradeOrderApi from '@/api/trade/order.js';
+  import * as AfterSaleApi from '@/api/trade/afterSale.js';
+  export default {
+		data() {
+			return {
+        orderId: 0,
+        orderItemId: 0,
+        order: {}, // 订单
+        orderItem: {}, // 订单项
+
+        wayIndex: 0, // 选中 ways 的位置
+        ways: ['仅退款', '退款退货'], // 可选的售后方式
+
+        reasons: [], // 售后原因
+        reasonIndex: 0, // 选中 reasons 的位置
+
+        applyPicUrls: [], // 补充凭证图片
+			};
+		},
+		computed: mapGetters(['isLogin']),
+		watch:{
+			isLogin:{
+				handler: function(newV, oldV) {
+					if (newV) {
+						this.getOrderInfo();
+						this.getRefundReason();
+					}
+				},
+				deep:true
+			}
+		},
+		 onLoad: function (options) {
+      if (!this.isLogin) {
+        toLogin();
+        return;
+      }
+      // if (!options.orderId || !options.orderItemId) {
+      //   return this.$util.Tips({
+      //     title:'缺少订单id,无法退款'
+      //   },{
+      //     tab: 3,
+      //     url:1
+      //   });
+      // }
+			// this.orderId = parseInt(options.orderId);
+      // this.orderItemId = parseInt(options.orderItemId);
+      // this.getOrderInfo();
+      // this.getRefundReason();
+    },
+		methods: {
+			onLoadFun:function() {
+        this.getOrderInfo();
+        this.getRefundReason();
+      },
+      /**
+       * 获取订单详情
+      */
+      getOrderInfo:function(){
+        TradeOrderApi.getOrderDetail(this.orderId).then(res => {
+          // 设置订单信息
+          const order = res.data;
+          this.order = order;
+          // 查询订单项信息
+          this.orderItem = order.items.find(item => item.id === this.orderItemId) || {};
+        }).catch(err => {
+          return this.$util.Tips({
+            title: err
+          });
+        })
+      },
+      /**
+       * 更改售后方式
+       */
+      wayChange: function(e) {
+        this.$set(this, 'wayIndex', e.detail.value);
+        this.getRefundReason();
+      },
+      /**
+       * 获得售后方式
+       */
+      getWay: function () {
+        return this.wayIndex === 0 ? 10 : 20
+      },
+      /**
+       * 获取退款理由
+       */
+      getRefundReason: function() {
+        const way = this.getWay();
+        AfterSaleApi.getAfterSaleReasonList(way).then(res => {
+          this.reasons = res.data;
+        })
+      },
+      /**
+       * 选择售后原因
+       */
+      bindPickerChange: function(e) {
+        this.$set(this, 'reasonIndex', e.detail.value);
+      },
+      /**
+       * 删除图片
+       */
+      DelPic:function(index) {
+        this.applyPicUrls.splice(index, 1);
+      },
+      /**
+       * 上传文件
+       */
+      uploadpic:function(){
+        this.$util.uploadImageOne({}, res => {
+          this.applyPicUrls.push(res.data);
+          this.$set(this, 'applyPicUrls', this.applyPicUrls);
+        });
+      },
+
+      /**
+       * 申请退货
+      */
+      subRefund:function(e) {
+        const formData = e.detail.value;
+        AfterSaleApi.createAfterSale({
+          orderItemId: this.orderItemId,
+          way: this.getWay(),
+          refundPrice: this.orderItem.payPrice,
+          applyReason: this.reasons[this.reasonIndex],
+          applyDescription: formData.applyDescription,
+          applyPicUrls: this.applyPicUrls,
+        }).then(res => {
+          // TODO 芋艿：这里要改成跳转到售后详情页
+          this.$util.Tips({
+            title: '申请成功',
+            icon: 'success'
+          }, {
+            tab: 5,
+            url: '/pages/users/user_return_list/index?isT=1'
+          });
+        }).catch(err=>{
+          return this.$util.Tips({
+            title: err
+          });
+        })
+      }
+		}
+	}
+</script>
+<!-- TODO 芋艿：后续清理下 -->
+<style scoped lang="scss">
+.shuoming{
+  width: 32rpx;
+  height: 32rpx;
+}
+.goodCall {
+  color: $theme-color;
+  text-align: center;
+  width: 100%;
+  height: 86rpx;
+  padding: 0 30rpx;
+  border-bottom: 1rpx solid #eee;
+  font-size: 30rpx;
+  line-height: 86rpx;
+  background: #fff;
+
+  .icon-kefu {
+    font-size: 36rpx;
+    margin-right: 15rpx;
+  }
+
+  /* #ifdef MP */
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 86rpx;
+    font-size: 30rpx;
+    color: $theme-color;
+  }
+
+  /* #endif */
+}
+
+.order-details .header {
+  height: 250rpx;
+  padding: 0 30rpx;
+}
+
+.order-details .header.on {
+  background-color: #666 !important;
+}
+
+.order-details .header .pictrue {
+  width: 110rpx;
+  height: 110rpx;
+}
+
+.order-details .header .pictrue image {
+  width: 100%;
+  height: 100%;
+}
+
+.order-details .header .data {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 24rpx;
+  margin-left: 27rpx;
+}
+
+.order-details .header .data.on {
+  margin-left: 0;
+}
+
+.order-details .header .data .state {
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #fff;
+  margin-bottom: 7rpx;
+}
+
+.order-details .header .data .time {
+  margin-left: 20rpx;
+}
+
+.picTxt {
+  height: 150rpx;
+}
+
+.order-details .nav {
+  background-color: #fff;
+  font-size: 26rpx;
+  color: #282828;
+  padding: 27rpx 0;
+  width: 100%;
+  border-radius: 14rpx;
+  margin: -100rpx auto 0 auto;
+}
+
+.order-details .nav .navCon {
+  padding: 0 40rpx;
+}
+
+.order-details .nav .on {
+  color: $theme-color;
+}
+
+.order-details .nav .progress {
+  padding: 0 65rpx;
+  margin-top: 10rpx;
+}
+
+.order-details .nav .progress .line {
+  width: 100rpx;
+  height: 2rpx;
+  background-color: #939390;
+}
+
+.order-details .nav .progress .iconfont {
+  font-size: 25rpx;
+  color: #939390;
+  margin-top: -2rpx;
+}
+
+.order-details .address {
+  font-size: 26rpx;
+  color: #868686;
+  background-color: #fff;
+  margin-top: 15rpx;
+  padding: 30rpx 24rpx;
+}
+
+.order-details .address .name {
+  font-size: 30rpx;
+  color: #282828;
+  margin-bottom: 15rpx;
+}
+
+.order-details .address .name .phone {
+  margin-left: 40rpx;
+}
+
+.order-details .line {
+  width: 100%;
+  height: 3rpx;
+}
+
+.order-details .line image {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.order-details .wrapper {
+  background-color: #fff;
+  margin-top: 12rpx;
+  padding: 30rpx 24rpx;
+}
+
+.order-details .wrapper .item {
+  font-size: 28rpx;
+  color: #282828;
+}
+
+.order-details .wrapper .item~.item {
+  margin-top: 20rpx;
+}
+
+.order-details .wrapper .item .conter {
+  color: #868686;
+  // width: 490rpx;
+  text-align: right;
+}
+
+.order-details .wrapper .item .conter .copy {
+  font-size: 20rpx;
+  color: #333;
+  border-radius: 20rpx;
+  border: 1rpx solid #666;
+  padding: 3rpx 15rpx;
+  margin-left: 24rpx;
+}
+
+.order-details .wrapper .actualPay {
+  border-top: 1rpx solid #eee;
+  margin-top: 30rpx;
+  padding-top: 30rpx;
+}
+
+.order-details .wrapper .actualPay .money {
+  font-weight: bold;
+  font-size: 30rpx;
+}
+
+.order-details .footer {
+  width: 100%;
+  height: 100rpx;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  background-color: #fff;
+  padding: 0 30rpx;
+  box-sizing: border-box;
+}
+
+.order-details .footer .bnt {
+  width: 158rpx;
+  height: 54rpx;
+  text-align: center;
+  line-height: 54rpx;
+  border-radius: 50rpx;
+  color: #fff;
+  font-size: 27rpx;
+}
+
+.order-details .footer .bnt.cancel {
+  color: #aaa;
+  border: 1rpx solid #ddd;
+}
+
+.order-details .footer .bnt~.bnt {
+  margin-left: 18rpx;
+}
+
+.order-details .writeOff {
+  background-color: #fff;
+  margin-top: 15rpx;
+  padding-bottom: 50rpx;
+}
+
+.order-details .writeOff .title {
+  font-size: 30rpx;
+  color: #282828;
+  height: 87rpx;
+  border-bottom: 1px solid #f0f0f0;
+  padding: 0 24rpx;
+  line-height: 87rpx;
+}
+
+.order-details .writeOff .grayBg {
+  background-color: #f2f5f7;
+  width: 590rpx;
+  height: 384rpx;
+  border-radius: 20rpx 20rpx 0 0;
+  margin: 50rpx auto 0 auto;
+  padding-top: 55rpx;
+}
+
+.order-details .writeOff .grayBg .pictrue {
+  width: 290rpx;
+  height: 290rpx;
+  margin: 0 auto;
+}
+
+.order-details .writeOff .grayBg .pictrue image {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.order-details .writeOff .gear {
+  width: 590rpx;
+  height: 30rpx;
+  margin: 0 auto;
+}
+
+.order-details .writeOff .gear image {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.order-details .writeOff .num {
+  background-color: #f0c34c;
+  width: 590rpx;
+  height: 84rpx;
+  color: #282828;
+  font-size: 48rpx;
+  margin: 0 auto;
+  border-radius: 0 0 20rpx 20rpx;
+  text-align: center;
+  padding-top: 4rpx;
+}
+
+.order-details .writeOff .rules {
+  margin: 46rpx 30rpx 0 30rpx;
+  border-top: 1px solid #f0f0f0;
+  padding-top: 10rpx;
+}
+
+.order-details .writeOff .rules .item {
+  margin-top: 20rpx;
+}
+
+.order-details .writeOff .rules .item .rulesTitle {
+  font-size: 28rpx;
+  color: #282828;
+}
+
+.order-details .writeOff .rules .item .rulesTitle .iconfont {
+  font-size: 30rpx;
+  color: #333;
+  margin-right: 8rpx;
+  margin-top: 5rpx;
+}
+
+.order-details .writeOff .rules .item .info {
+  font-size: 28rpx;
+  color: #999;
+  margin-top: 7rpx;
+}
+
+.order-details .writeOff .rules .item .info .time {
+  margin-left: 20rpx;
+}
+
+.order-details .map {
+  height: 86rpx;
+  font-size: 30rpx;
+  color: #282828;
+  line-height: 86rpx;
+  border-bottom: 1px solid #f0f0f0;
+  margin-top: 15rpx;
+  background-color: #fff;
+  padding: 0 24rpx;
+}
+
+.order-details .map .place {
+  font-size: 26rpx;
+  width: 176rpx;
+  height: 50rpx;
+  border-radius: 25rpx;
+  line-height: 50rpx;
+  text-align: center;
+}
+
+.order-details .map .place .iconfont {
+  font-size: 27rpx;
+  height: 27rpx;
+  line-height: 27rpx;
+  margin: 2rpx 3rpx 0 0;
+}
+
+.order-details .address .name .iconfont {
+  font-size: 34rpx;
+  margin-left: 10rpx;
+}
+
+.refund {
+  padding:  0 !important;
+  margin-top: 15rpx;
+  background-color: #fff;
+
+  .title {
+    display: flex;
+    align-items: center;
+    font-size: 30rpx;
+    color: #333;
+    height: 86rpx;
+    border-bottom: 1px solid #f5f5f5;
+    font-weight: 400;
+    padding: 0 24rpx;
+
+    image {
+      width: 32rpx;
+      height: 32rpx;
+      margin-right: 10rpx;
+    }
+  }
+
+  .con {
+    font-size: 25rpx;
+    color: #666666;
+    padding: 30rpx 24rpx;
+  }
+}
+</style>
+<style>
+.qs-btn {
+  width: auto;
+  height: 60rpx;
+  text-align: center;
+  line-height: 60rpx;
+  border-radius: 50rpx;
+  color: #fff;
+  font-size: 27rpx;
+  padding: 0 3%;
+  color: #aaa;
+  border: 1px solid #ddd;
+  margin-right: 20rpx;
+}
+</style>