7.20

pageC/orderForm/component/orderInofrmation.vue

@@ -1,5 +1,9 @@
 <template>
-  <view class="detail" @click="$emit('toDetail', itemInfo)">
+  <view
+    class="detail"
+    @click="$emit('toDetail', itemInfo)"
+    v-if="itemInfo.order"
+  >
     <view class="title">
       <view class="title-left">
         <image class="header-img" :src="itemInfo.image" mode=""></image>
@@ -12,7 +16,7 @@
       </view>
       <text
         class="order-status"
-        :style="itemInfo.status == 'closed' ? 'color:#666' : ''"
+        :style="itemInfo.order.status == 'closed' ? 'color:#666' : ''"
         >{{ statusName }}</text
       >
     </view>
@@ -46,47 +50,65 @@
     <view class="price">
       <text>需付款</text>
       <text style="font-size: 20rpx">￥</text>
-      <text>133</text>.
-      <text style="font-size: 20rpx">22</text>
+      <text>{{ itemInfo.order.amount.split(".")[0] }}</text
+      >.
+      <text style="font-size: 20rpx">{{
+        itemInfo.order.amount.split(".")[1]
+      }}</text>
     </view>
     <view class="btn-list">
-      <view class="more" v-show="itemInfo.status == 8"> 更多 </view>
+      <view class="more" v-if="itemInfo.order.status == 'finished'">
+        更多
+      </view>
       <button
         class="status-1"
         @click.stop="$emit('cancellationOrder', itemInfo)"
-        v-show="itemInfo.status == 'unpaid' || itemInfo.status == 5"
+        v-if="
+          itemInfo.order.status == 'unpaid' ||
+          itemInfo.order.status == 'unreview'
+        "
       >
         取消订单
       </button>
-      <button class="status-2" v-show="itemInfo.status == 'unpaid'">
+      <button class="status-2" v-if="itemInfo.order.status == 'unpaid'">
         继续付款
       </button>
       <button
         class="status-1"
-        v-show="itemInfo.status == 'closed' || itemInfo.status == 3"
+        v-if="
+          itemInfo.order.status == 'closed' || itemInfo.order.status == 'refund'
+        "
       >
         删除订单
       </button>
-      <button class="status-2" v-show="itemInfo.status == 'closed'">
+      <button class="status-2" v-if="itemInfo.order.status == 'closed'">
         再次购买
       </button>
       <button
         class="status-1"
-        v-show="itemInfo.status == 7 || itemInfo.status == 8"
+        v-if="
+          itemInfo.order.status == 'delivered' ||
+          itemInfo.order.status == 'finished'
+        "
       >
         查看物流
       </button>
       <button
         class="status-1"
-        v-show="itemInfo.status == 3 || itemInfo.status == 8"
+        v-if="
+          itemInfo.order.status == 'refund' ||
+          itemInfo.order.status == 'finished'
+        "
       >
         再来一单
       </button>
-      <button class="status-2" v-show="itemInfo.status == 7">确认收货</button>
+      <button class="status-2" v-if="itemInfo.order.status == 'delivered'">
+        确认收货
+      </button>
 
       <button
         class="status-2"
-        v-show="itemInfo.status == 8"
+        v-if="itemInfo.order.status == 'finished'"
         @click.stop="toEvaluate"
       >
         评价
@@ -109,24 +131,24 @@ export default {
   },
   computed: {
     statusName() {
-      if (this.itemInfo.status == "unpaid") {
+      if (this.itemInfo.order.status == "unpaid") {
         return "待付款";
-      } else if (this.itemInfo.status == "closed") {
+      } else if (this.itemInfo.order.status == "closed") {
         return "已取消";
-      } else if (this.itemInfo.status == 3) {
+      } else if (this.itemInfo.order.status == "refund") {
         return "退款成功";
-      } else if (this.itemInfo.status == "refunding") {
+      } else if (this.itemInfo.order.status == "refunding") {
         return "退款中";
-      } else if (this.itemInfo.status == "unreview") {
+      } else if (this.itemInfo.order.status == "unreview") {
         return "拼团中";
       } else if (
-        this.itemInfo.status == "paid" ||
-        this.itemInfo.status == "merdelivered"
+        this.itemInfo.order.status == "undelivered" ||
+        this.itemInfo.order.status == "paid"
       ) {
         return "等待发货";
-      } else if (this.itemInfo.status == "delivered") {
+      } else if (this.itemInfo.order.status == "delivered") {
         return "等待收货";
-      } else if (this.itemInfo.status == 8) {
+      } else if (this.itemInfo.order.status == "finished") {
         return "交易完成";
       }
     },
@@ -134,6 +156,9 @@ export default {
   data() {
     return {};
   },
+  watch: {
+    itemInfo(newVal) {},
+  },
   methods: {
     toEvaluate() {
       uni.navigateTo({

pageC/orderForm/orderForm.vue

@@ -75,22 +75,6 @@
           />
         </view>
       </view>
-      <!-- <view v-for="item in orderList1" :key="item.id">
-        <view v-if="follow != 7">
-          <OrderInofrmation
-            :itemInfo="item"
-            @toDetail="toDetail"
-            @cancellationOrder="cancellationOrder"
-          />
-        </view>
-        <view v-else>
-          <RefundCard
-            :itemInfo="item"
-            :refundDetail="refundDetail"
-            @toRefundDetail="toRefundDetail"
-          />
-        </view>
-      </view> -->
     </view>
   </view>
 </template>
@@ -105,28 +89,13 @@ export default {
   },
   data() {
     return {
-      orderList: [
-        {
-          status: 3,
-        },
-        {
-          status: 4,
-        },
-        {
-          status: 5,
-        },
-        {
-          status: 7,
-        },
-        {
-          status: 8,
-        },
-      ],
-      orderList1: [],
+      orderList: [],
       follow: 1,
       refundDetail: {
         status: 1,
       },
+      page: 1,
+      total: 0,
     };
   },
   computed: {
@@ -153,7 +122,7 @@ export default {
     },
     //取消订单
     cancellationOrder(item) {
-      uni.$u.http.post(`/api/order/cancel/${item.id}`).then((res) => {
+      uni.$u.http.post(`/api/order/cancel/${item.order.id}`).then((res) => {
         console.log(res);
       });
     },
@@ -166,12 +135,24 @@ export default {
     },
     getOrderList() {
       uni.$u.http
-        .get(`/api/order/order_list?status=&page=1&limit=10`)
+        .get(`/api/order/order_list?status=&page=${this.page}&limit=10`)
         .then((res) => {
-          this.orderList = res.data;
+          if (this.orderList.length == 0) {
+            this.orderList = res.data;
+          } else {
+            this.orderList = this.orderList.concat(res.data);
+          }
+          this.total = res.total;
         });
     },
   },
+  onReachBottom() {
+    //商品总数量小于当前获取到的商品数量
+    if (this.total > this.orderList.length) {
+      this.page++;
+      this.getOrderList();
+    }
+  },
   mounted() {
     this.getOrderList();
   },

pageD/afterSalesDetail/afterSalesDetail.vue

@@ -1,151 +1,158 @@
 <template>
-	<view class="page">
-		<view class="top">
-			<view class="top-title">
-				请处理退款申请
-			</view>
-			<view class="top-detail">
-				如果您同意，请点击“同意退款”
-			</view>
-		</view>
+  <view class="page">
+    <view class="top">
+      <view class="top-title"> 请处理退款申请 </view>
+      <view class="top-detail"> 如果您同意，请点击“同意退款” </view>
+    </view>
 
-		<!-- 地址信息 -->
-		<view class="address">
-			<view class="name-phone">
-				<view style="margin-right:20rpx;font-size: 32rpx;">陈曦</view>
-				<text class="phone">17800000000</text>
-			</view>
-			<view class="address-detail">
-				江苏省淮安市清江浦区北京南路99号（青浦大桥南侧200
-				米）淮安恒大名都3号楼一单元1602
-			</view>
-		</view>
+    <!-- 地址信息 -->
+    <view class="address">
+      <view class="name-phone">
+        <view style="margin-right: 20rpx; font-size: 32rpx">{{
+          orderInformation.address_name
+        }}</view>
+        <text class="phone">{{ orderInformation.address_mobile }}</text>
+      </view>
+      <view class="address-detail">
+        {{ orderInformation.full_address }}
+      </view>
+    </view>
 
-		<CommodityDetail />
-		<ApplicationInformation />
-		<RefusePopup :show="show" @close="close"  />
-		<AgreePopup :agreeShow="agreeShow" @close="close"  />
-		
-		<view class="footer">
-			<button class="btn-1" @click="refuseApplication">拒绝申请</button><button @click="agreeShow = true" class="btn-2">同意退款</button>
-		</view>
-	</view>
+    <CommodityDetail :orderInformation="orderInformation" />
+    <ApplicationInformation />
+    <RefusePopup :show="show" @close="close" />
+    <AgreePopup :agreeShow="agreeShow" @close="close" />
+
+    <view class="footer">
+      <button class="btn-1" @click="refuseApplication">拒绝申请</button
+      ><button @click="agreeShow = true" class="btn-2">同意退款</button>
+    </view>
+  </view>
 </template>
 
 <script>
-	import CommodityDetail from './component/commodityDetail.vue';
-	import ApplicationInformation from './component/applicationInformation.vue';
-	import RefusePopup from './component/refusePopup.vue';
-	import AgreePopup from './component/agreePopup.vue';
-	export default {
-		components: {
-			CommodityDetail,
-			ApplicationInformation,
-			RefusePopup,
-			AgreePopup
-		},
-		data() {
-			return {
-				show:false,
-				agreeShow:false
-			};
-		},
-		methods:{
-			refuseApplication(){
-				this.show = true
-			},
-			close(value){
-				console.log(value)
-				this.show = false
-				this.agreeShow = false
-			}
-		}
-	}
+import CommodityDetail from "./component/commodityDetail.vue";
+import ApplicationInformation from "./component/applicationInformation.vue";
+import RefusePopup from "./component/refusePopup.vue";
+import AgreePopup from "./component/agreePopup.vue";
+export default {
+  components: {
+    CommodityDetail,
+    ApplicationInformation,
+    RefusePopup,
+    AgreePopup,
+  },
+  data() {
+    return {
+      show: false,
+      agreeShow: false,
+      orderInformation: {},
+    };
+  },
+  onLoad(options) {
+    this.getOrderDetail(options.id);
+  },
+  methods: {
+    refuseApplication() {
+      this.show = true;
+    },
+    close(value) {
+      console.log(value);
+      this.show = false;
+      this.agreeShow = false;
+    },
+    getOrderDetail(id) {
+      uni.$u.http.get(`/api/order/read?id=${id}`).then((res) => {
+        console.log(res);
+        this.orderInformation = res;
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-	.page {
-		padding: 20rpx 24rpx;
-		position: relative;
-
-		.top {
-			background-color: #fff;
-			border-radius: 16rpx;
-			padding: 28rpx 20rpx;
+.page {
+  padding: 20rpx 24rpx;
+  position: relative;
 
-			.top-title {
-				font-size: 36rpx;
-				color: #333;
-				font-weight: 600;
-			}
+  .top {
+    background-color: #fff;
+    border-radius: 16rpx;
+    padding: 28rpx 20rpx;
 
-			.top-detail {
-				font-size: 26rpx;
-				color: #A3A3A3;
-				margin-top: 10rpx;
-			}
-		}
+    .top-title {
+      font-size: 36rpx;
+      color: #333;
+      font-weight: 600;
+    }
 
-		.address {
-			background-color: #fff;
-			border-radius: 16rpx;
-			padding: 34rpx 24rpx 28rpx;
-			margin-top: 24rpx;
+    .top-detail {
+      font-size: 26rpx;
+      color: #a3a3a3;
+      margin-top: 10rpx;
+    }
+  }
 
-			.name-phone {
-				display: flex;
-				align-items: center;
-				align-items: flex-end;
+  .address {
+    background-color: #fff;
+    border-radius: 16rpx;
+    padding: 34rpx 24rpx 28rpx;
+    margin-top: 24rpx;
 
-				.phone {
-					font-size: 26rpx;
-					color: #666;
-				}
-			}
+    .name-phone {
+      display: flex;
+      align-items: center;
+      align-items: flex-end;
 
-			.address-detail {
-				margin-top: 20rpx;
-				font-size: 24rpx;
-				color: #444;
-			}
-		}
+      .phone {
+        font-size: 26rpx;
+        color: #666;
+      }
+    }
 
-		.footer {
-			position: fixed;
-			bottom: 0;
-			left: 0;
-			width: 100%;
-			background-color: #fff;
-			height: 146rpx;
-			display: flex;
-			justify-content: flex-end;
-			padding: 20rpx 20rpx 0 0;
+    .address-detail {
+      margin-top: 20rpx;
+      font-size: 24rpx;
+      color: #444;
+    }
+  }
 
-			.btn-1 {
-				height: 76rpx;
-				padding: 0;
-				margin: 0;
-				font-size: 28rpx;
-				color: #f83224;
-				min-width: 188rpx;
-				background-color: #fff;
-				border-radius: 38rpx;
-				border: 2rpx solid #f83224;
-				margin-right: 20rpx;
-			}
+  .footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: #fff;
+    height: 146rpx;
+    display: flex;
+    justify-content: flex-end;
+    padding: 20rpx 20rpx 0 0;
 
-			.btn-2 {
-				height: 76rpx;
-				padding: 0;
-				margin: 0;
-				font-size: 28rpx;
-				color: #fff;
-				min-width: 188rpx;
-				background-color: #f83224;
-				border-radius: 38rpx;
-				margin-right: 20rpx;
-			}
-		}
+    .btn-1 {
+      height: 76rpx;
+      padding: 0;
+      margin: 0;
+      font-size: 28rpx;
+      color: #f83224;
+      min-width: 188rpx;
+      background-color: #fff;
+      border-radius: 38rpx;
+      border: 2rpx solid #f83224;
+      margin-right: 20rpx;
+    }
 
-	}
-</style>
+    .btn-2 {
+      height: 76rpx;
+      padding: 0;
+      margin: 0;
+      font-size: 28rpx;
+      color: #fff;
+      min-width: 188rpx;
+      background-color: #f83224;
+      border-radius: 38rpx;
+      margin-right: 20rpx;
+    }
+  }
+}
+</style>

pageD/afterSalesDetail/component/commodityDetail.vue

@@ -1,257 +1,257 @@
 <template>
-	<view class="detail">
-		<view class="title">
-			<view class="title-left">
-				<image class="header-img"
-					src="https://tse4-mm.cn.bing.net/th/id/OIP-C.uMf5AX3a6yYpIhpEkyDxiQAAAA?rs=1&pid=ImgDetMain"
-					mode=""></image>
-				<text>张三</text>
-				<image class="right-325" src="../../../static/mine/325.png" mode=""></image>
-			</view>
-		</view>
-		<view class="commodity-information">
-			<view class="commodity-1">
-				<image class="commodity-img"
-					src="https://img11.360buyimg.com/jdcms/s460x460_jfs/t1/156939/24/43697/126104/6619de23F69802006/8432635baed61875.jpg.webp"
-					mode=""></image>
-				<view class="">
-					<view class="commodity-2">
-						<view class="commodity-title">
-							OATLY 噢麦力 醇香燕麦…
-						</view>
-						<view class="commodity-price">
-							<text style="font-size: 20rpx;">￥</text>
-							<text>133</text>.
-							<text style="font-size: 20rpx;">22</text>
-						</view>
-					</view>
+  <view class="detail">
+    <view class="title">
+      <view class="title-left" v-if="orderInformation.member">
+        <image
+          class="header-img"
+          :src="orderInformation.member.avatar"
+          mode=""
+        ></image>
+        <text>{{ orderInformation.member.nickname }}</text>
+        <image
+          class="right-325"
+          src="../../../static/mine/325.png"
+          mode=""
+        ></image>
+      </view>
+    </view>
+    <view class="commodity-information">
+      <view class="commodity-1" v-for="item in orderInformation.goods">
+        <image class="commodity-img" :src="item.goods_image" mode=""></image>
+        <view class="">
+          <view class="commodity-2">
+            <view class="commodity-title"> {{ item.goods_name }}</view>
+            <view class="commodity-price">
+              <text style="font-size: 20rpx">￥</text>
+              <text>{{ item.sku_item.price.split(".")[0] }}</text
+              >.
+              <text style="font-size: 20rpx">{{
+                item.sku_item.price.split(".")[1]
+              }}</text>
+            </view>
+          </view>
 
-					<view class="commodity-3">
-						<view class="specifications">
-							【醇香】250ml*3
-						</view>
-						<view style="font-size: 24rpx;">
-							x1
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<view class="detail-1">
-			<text class="_text-1">{{"共1件商品"+"&nbsp;"}}</text>
-			<text class="_text-2">买家实付</text>
-			<view class="_price">
-				<text style="font-size: 20rpx;">￥</text>
-				<text>133</text>.
-				<text style="font-size: 20rpx;">22</text>
-			</view>
-		</view>
-		<view class="information">
-			<text class="_label">退款状态</text>
-			<view style="color: #f83224;">
-			待商家处理
-			</view>
-		</view>
-		<view class="information">
-			<text class="_label">退款原因</text>
-			<view class="_title-right">
-				商品与图片不符
-			</view>
-		</view>
-		<view class="information">
-			<text class="_label">退款金额</text>
-			<view lass="_title-right" style="font-weight: 600;">
-				￥89.00
-			</view>
-		</view>
-		<view class="information">
-			<text class="_label">申请时间</text>
-			<view style="color: #222;">
-				2022-08-23 20:34:34
-			</view>
-		</view>
-		<view class="information">
-			<text class="_label">退款编号</text>
-			<view style="color: #222;">
-				<text>{{"Cbz202212120919838881｜"}}</text>
-				<text @click="cope('123456')">复制</text>
-			</view>
-		</view>
-	</view>
+          <view class="commodity-3">
+            <view class="specifications"> {{ item.sku_item.item }} </view>
+            <view style="font-size: 24rpx"> x{{ item.goods_num }} </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="detail-1">
+      <text class="_text-1">{{
+        "共" + orderInformation.goods.length + "件商品" + "&nbsp;"
+      }}</text>
+      <text class="_text-2">买家实付</text>
+      <view class="_price">
+        <text style="font-size: 20rpx">￥</text>
+        <text>{{ orderInformation.amount.split(".")[0] }}</text
+        >.
+        <text style="font-size: 20rpx">{{
+          orderInformation.amount.split(".")[1]
+        }}</text>
+      </view>
+    </view>
+    <view class="information">
+      <text class="_label">退款状态</text>
+      <view style="color: #f83224"> 待商家处理 </view>
+    </view>
+    <view class="information">
+      <text class="_label">退款原因</text>
+      <view class="_title-right"> 商品与图片不符 </view>
+    </view>
+    <view class="information">
+      <text class="_label">退款金额</text>
+      <view lass="_title-right" style="font-weight: 600"> ￥89.00 </view>
+    </view>
+    <view class="information">
+      <text class="_label">申请时间</text>
+      <view style="color: #222"> {{ orderInformation.created_at }} </view>
+    </view>
+    <view class="information">
+      <text class="_label">退款编号</text>
+      <view style="color: #222">
+        <text>{{ orderInformation.order_no + "｜" }}</text>
+        <text @click="cope(orderInformation.order_no)">复制</text>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-	export default {
-
-		props:{
-			status:{
-				typeof:Number,
-				default:0
-			}
-		},
-		data() {
-			return {
-
-			}
-		},
-		methods:{
-			cope(str) {
-				uni.setClipboardData({
-					data: str,
-					success() {
-						uni.showToast({
-							title: "复制成功",
-							icon: "none"
-						})
-					}
-				})
-			},
-			application(){
-				uni.navigateTo({
-					url:"/pageC/applicationRefund/applicationRefund"
-				})
-			}
-		}
-	}
+export default {
+  props: {
+    status: {
+      typeof: Number,
+      default: 0,
+    },
+    orderInformation: {
+      typeof: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    cope(str) {
+      uni.setClipboardData({
+        data: str,
+        success() {
+          uni.showToast({
+            title: "复制成功",
+            icon: "none",
+          });
+        },
+      });
+    },
+    application() {
+      uni.navigateTo({
+        url: "/pageC/applicationRefund/applicationRefund",
+      });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-	.detail {
-		padding: 28rpx 20rpx;
-		background-color: #fff;
-		border-radius: 16rpx;
-		margin-top: 28rpx;
-
-		.title {
-			display: flex;
-			justify-content: space-between;
+.detail {
+  padding: 28rpx 20rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  margin-top: 28rpx;
 
-			.title-left {
-				display: flex;
-				font-size: 32rpx;
-				align-items: center;
+  .title {
+    display: flex;
+    justify-content: space-between;
 
-				.header-img {
-					width: 36rpx;
-					height: 36rpx;
-					border-radius: 50%;
-					margin-right: 20rpx;
-				}
+    .title-left {
+      display: flex;
+      font-size: 32rpx;
+      align-items: center;
 
-				.right-325 {
-					width: 32rpx;
-					height: 32rpx;
-				}
-			}
+      .header-img {
+        width: 36rpx;
+        height: 36rpx;
+        border-radius: 50%;
+        margin-right: 20rpx;
+      }
 
-			.order-status {
-				color: #f83224;
-				font-size: 26rpx;
-			}
-		}
+      .right-325 {
+        width: 32rpx;
+        height: 32rpx;
+      }
+    }
 
-		.commodity-information {
-			margin-top: 28rpx;
+    .order-status {
+      color: #f83224;
+      font-size: 26rpx;
+    }
+  }
 
-			.commodity-1 {
-				display: flex;
+  .commodity-information {
+    margin-top: 28rpx;
 
-				.commodity-img {
-					width: 180rpx;
-					height: 180rpx;
-					margin-right: 20rpx;
-					border-radius: 10rpx;
-				}
+    .commodity-1 {
+      display: flex;
 
-				.commodity-2 {
-					display: flex;
-					justify-content: space-between;
+      .commodity-img {
+        width: 180rpx;
+        height: 180rpx;
+        margin-right: 20rpx;
+        border-radius: 10rpx;
+      }
 
-					.commodity-title {
-						width: 328rpx;
-						overflow: hidden;
-						white-space: nowrap;
-						text-overflow: ellipsis;
-						margin-right: 38rpx;
-					}
-				}
+      .commodity-2 {
+        display: flex;
+        justify-content: space-between;
 
-				.commodity-3 {
-					display: flex;
-					justify-content: space-between;
-					margin-top: 20rpx;
-					color: #777;
+        .commodity-title {
+          width: 366rpx;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          margin-right: 38rpx;
+        }
+      }
 
-					.specifications {
-						font-size: 28rpx;
-						color: #777;
-					}
-				}
-			}
-		}
-		.last{
-			border-bottom: 2rpx solid rgba(151, 151, 151, .1);
-			padding-bottom: 20rpx;
-		}
-		.btn-list{
-			display: flex;
-			justify-content: flex-end;
-			button{
-				width: 152rpx;
-				height: 58rpx;
-				border: 2rpx solid #979797;
-				color: #444;
-				margin: 0;
-				padding: 0;
-				font-size: 24rpx;
-				background-color: #fff;
-				border-radius: 34rpx;
-				margin-top: 20rpx;
-				margin-left: 20rpx;
-			}
-		}
-		.detail-1{
-			display: flex;
-			justify-content: flex-end;
-			align-items: flex-end;
-			padding-bottom: 20rpx;
-			border-bottom: 2rpx solid rgba(151, 151, 151, .1);
-			._text-1{
-				color: #222;
-				font-size: 24rpx;
-			}
-			._text-2{
-				color:#222;
-				font-size: 28rpx;
-				font-weight: 600;
-			}
-			._price{
-				font-weight: 600;
-				color:#222;
-			}
-		}
-		.information {
-			display: flex;
-			justify-content: space-between;
-			font-size: 28rpx;
-			align-items: flex-end;
-			margin: 24rpx 0;
-			._label{
-				font-size: 28rpx;
-				color: #333;
-			}
-			._title-right{
-				font-size: 28rpx;
-				color: #333;
-			}
-		}
-		._bottom{
-				display: flex;
-				justify-content: flex-end;
-				font-size: 28rpx;
-				align-items: flex-end;
-				margin-top: 34rpx;
-		}
+      .commodity-3 {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 20rpx;
+        color: #777;
 
-	}
-</style>
+        .specifications {
+          font-size: 28rpx;
+          color: #777;
+        }
+      }
+    }
+  }
+  .last {
+    border-bottom: 2rpx solid rgba(151, 151, 151, 0.1);
+    padding-bottom: 20rpx;
+  }
+  .btn-list {
+    display: flex;
+    justify-content: flex-end;
+    button {
+      width: 152rpx;
+      height: 58rpx;
+      border: 2rpx solid #979797;
+      color: #444;
+      margin: 0;
+      padding: 0;
+      font-size: 24rpx;
+      background-color: #fff;
+      border-radius: 34rpx;
+      margin-top: 20rpx;
+      margin-left: 20rpx;
+    }
+  }
+  .detail-1 {
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+    padding-bottom: 20rpx;
+    border-bottom: 2rpx solid rgba(151, 151, 151, 0.1);
+    ._text-1 {
+      color: #222;
+      font-size: 24rpx;
+    }
+    ._text-2 {
+      color: #222;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+    ._price {
+      font-weight: 600;
+      color: #222;
+    }
+  }
+  .information {
+    display: flex;
+    justify-content: space-between;
+    font-size: 28rpx;
+    align-items: flex-end;
+    margin: 24rpx 0;
+    ._label {
+      font-size: 28rpx;
+      color: #333;
+    }
+    ._title-right {
+      font-size: 28rpx;
+      color: #333;
+    }
+  }
+  ._bottom {
+    display: flex;
+    justify-content: flex-end;
+    font-size: 28rpx;
+    align-items: flex-end;
+    margin-top: 34rpx;
+  }
+}
+</style>

pageD/afterSalesDetail/component/refusePopup.vue

@@ -1,67 +1,74 @@
 <template>
-	<view class="popup">
-		<u-popup :show="show" @close="$emit('close')" :safeAreaInsetBottom="false" mode="center" round="10" >
-			<view class="popup-content">
-				<view class="title">
-					拒绝理由
-				</view>
-				<view class="_textarea">
-					<u--textarea v-model="value2" height="108" maxlength="200" placeholder="请输入拒绝原因" count ></u--textarea>
-				</view>
-					<button class="btn-1" @click="$emit('close',value2)">提交</button>
-					<view class="cancel" @click="$emit('close')">
-						取消
-					</view>
-			</view>
-		</u-popup>
-	</view>
+  <view class="popup">
+    <u-popup
+      :show="show"
+      @close="$emit('close')"
+      :safeAreaInsetBottom="false"
+      mode="center"
+      round="10"
+    >
+      <view class="popup-content">
+        <view class="title"> 拒绝理由 </view>
+        <view class="_textarea">
+          <u--textarea
+            v-model="value2"
+            height="108"
+            maxlength="200"
+            placeholder="请输入拒绝原因"
+            count
+          ></u--textarea>
+        </view>
+        <button class="btn-1" @click="$emit('refund', 2, value2)">提交</button>
+        <view class="cancel" @click="$emit('close')"> 取消 </view>
+      </view>
+    </u-popup>
+  </view>
 </template>
 
 <script>
-	export default {
-		props:{
-			show:{
-				typeof:Boolean,
-				default:false
-			}
-		},
-		data(){
-			return{
-				value2:""
-			}
-		},
-		methods:{
-			close(){}
-		}
-	}
+export default {
+  props: {
+    show: {
+      typeof: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      value2: "",
+    };
+  },
+  methods: {
+    close() {},
+  },
+};
 </script>
 
 <style scoped lang="scss">
-	.popup-content{
-		padding: 36rpx 28rpx;
-		.title{
-			font-size: 32rpx;
-			color: #333;
-			font-weight: 600;
-			text-align: center;
-			margin-bottom: 28rpx;
-		}
-		._textarea{
-			width: 534rpx;
-			height: 216rpx;
-		}
-		.btn-1{
-			background-color: #f83224;
-			color: #fff;
-			margin-top: 40rpx;
-			border-radius: 38rpx;
-		}
-		.cancel{
-			text-align: center;
-			margin-top: 28rpx;
-			font-size: 28rpx;
-			color: rgba(51, 51, 51, .6);
-		}
-	}
-
-</style>
+.popup-content {
+  padding: 36rpx 28rpx;
+  .title {
+    font-size: 32rpx;
+    color: #333;
+    font-weight: 600;
+    text-align: center;
+    margin-bottom: 28rpx;
+  }
+  ._textarea {
+    width: 534rpx;
+    height: 216rpx;
+  }
+  .btn-1 {
+    background-color: #f83224;
+    color: #fff;
+    margin-top: 40rpx;
+    border-radius: 38rpx;
+  }
+  .cancel {
+    text-align: center;
+    margin-top: 28rpx;
+    font-size: 28rpx;
+    color: rgba(51, 51, 51, 0.6);
+  }
+}
+</style>

pageD/afterSalesManage/afterSalesManage.vue

@@ -2,16 +2,16 @@
   <view>
     <view class="top-tab">
       <view
-        :class="{ commodity: follow == 1 }"
+        :class="{ commodity: follow == '' }"
         class="tab"
-        @click="tabSwitch(1)"
+        @click="tabSwitch('')"
       >
         全部
       </view>
       <view
-        :class="{ commodity: follow == 2 }"
+        :class="{ commodity: follow == '0' }"
         class="tab"
-        @click="tabSwitch(2)"
+        @click="tabSwitch('0')"
       >
         待退款
       </view>
@@ -23,47 +23,116 @@
         平台介入
       </view>
       <view
-        :class="{ commodity: follow == 4 }"
+        :class="{ commodity: follow == 1 }"
         class="tab"
-        @click="tabSwitch(4)"
+        @click="tabSwitch(1)"
       >
         已退款
       </view>
     </view>
     <view class="center">
-      <view v-for="item in orderList" :key="item.status">
-        <DetailCard :itemInfo="item" @toDetail="toDetail" />
+      <view v-for="item in orderList" :key="item.id">
+        <DetailCard
+          :itemInfo="item"
+          @toDetail="toDetail"
+          @agreeRefund="agreeRefund"
+          @refuseRefund="refuseRefund"
+          @platformIntervene="platformIntervene"
+        />
       </view>
     </view>
+    <AgreePop :show="show" @close="close" @refund="refund" />
+    <RefusePopup :show="refuseShow" @close="close" @refund="refund" />
   </view>
 </template>
 
 <script>
 import DetailCard from "./component/detailCard.vue";
+import AgreePop from "./component/agreePop.vue";
+import RefusePopup from "../afterSalesDetail/component/refusePopup";
 export default {
   components: {
     DetailCard,
+    AgreePop,
+    RefusePopup,
   },
   data() {
     return {
-      follow: 1,
+      follow: "",
       orderList: [],
+      show: false,
+      needRdfundOrder: {},
+      refuseShow: false,
+      page: 1,
+      total: 0,
     };
   },
   methods: {
     tabSwitch(num) {
       this.follow = num;
+      this.getOrderList();
     },
-    toDetail() {
+    toDetail(item) {
       uni.navigateTo({
-        url: "/pageD/afterSalesDetail/afterSalesDetail",
+        url: "/pageD/afterSalesDetail/afterSalesDetail?id=" + item.order_id,
       });
     },
+    //获取售后订单
     getOrderList() {
-      uni.$u.http.get(`/api/order/refund_order`).then((res) => {
-        console.log(res);
-        this.orderList = res.data;
-      });
+      uni.$u.http
+        .get(
+          `/api/order/refund_order?status=${this.follow}&page=${this.page}&limit=10`
+        )
+        .then((res) => {
+          this.orderList = res.data;
+          this.total = res.total;
+        });
+    },
+    //平台介入
+    platformIntervene(item) {
+      uni.$u.http
+        .post(`/api/order_refund/platform_intervention`, {
+          order_refund_id: item.id,
+        })
+        .then((res) => {
+          uni.showToast({
+            title: "已申请平台介入",
+            icon: "none",
+          });
+          this.getOrderList();
+        });
+    },
+    //关闭退款确认框
+    close() {
+      this.show = false;
+      this.refuseShow = false;
+    },
+    //确认退款 or 拒绝退款
+    refund(status, value) {
+      uni.$u.http
+        .post(`/api/order_refund/examine`, {
+          status,
+          order_refund_id: this.needRdfundOrder.id,
+          reason: value,
+        })
+        .then((res) => {
+          this.show = false;
+          this.refuseShow = false;
+          uni.showToast({
+            title: status == 1 ? "已同意退款" : "已拒绝退款",
+            icon: "none",
+          });
+          this.getOrderList();
+        });
+    },
+    refuseRefund(item) {
+      this.refuseShow = true;
+      this.needRdfundOrder = item;
+    },
+    //打开同意退款确认框
+    agreeRefund(item) {
+      this.show = true;
+      this.needRdfundOrder = item;
     },
   },
   mounted() {

pageD/afterSalesManage/component/agreePop.vue

@@ -0,0 +1,58 @@
+<template>
+  <view>
+    <u-popup :show="show" @close="$emit('close')" mode="center" round="10">
+      <view class="content">
+        <text>请确认是否退款</text>
+        <view class="btn-list">
+          <button class="btn-1" @click="$emit('close')">取消</button>
+          <button class="btn-2" @click="$emit('refund', 1)">确认</button>
+        </view>
+      </view>
+    </u-popup>
+  </view>
+</template>
+<script>
+export default {
+  props: {
+    show: {
+      typeof: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 494rpx;
+  padding: 56rpx 0;
+  text-align: center;
+  .btn-list {
+    display: flex;
+    margin-top: 52rpx;
+    justify-content: space-around;
+    .btn-1 {
+      margin: 0;
+      padding: 0;
+      font-size: 32rpx;
+      color: #f83224;
+      border-radius: 38rpx;
+      border: 2rpx solid #f83224;
+      background-color: #fff;
+      padding: 0 60rpx;
+    }
+    .btn-2 {
+      margin: 0;
+      padding: 0;
+      font-size: 32rpx;
+      color: #fff;
+      border-radius: 38rpx;
+      border: 2rpx solid #f83224;
+      background-color: #f83224;
+      padding: 0 60rpx;
+    }
+  }
+}
+</style>

pageD/afterSalesManage/component/detailCard.vue

@@ -1,35 +1,38 @@
 <template>
-  <view class="card" @click="$emit('toDetail')">
+  <view class="card" @click="$emit('toDetail', itemInfo)">
     <view class="user-name">
       <view class="name">
-        <image
-          class="header-img"
-          src="https://ts3.cn.mm.bing.net/th?id=OIP-C.uMf5AX3a6yYpIhpEkyDxiQAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2"
-          mode=""
-        ></image>
+        <image class="header-img" :src="itemInfo.member.avatar" mode=""></image>
 
-        <text>{{ itemInfo.order.nickname }}</text>
+        <text>{{ itemInfo.member.nickname }}</text>
       </view>
-      <text class="order-status">{{ deliveryStatus }}</text>
+      <text
+        class="order-status"
+        :style="
+          this.itemInfo.status == '0' || this.itemInfo.status == '1'
+            ? 'color:#444'
+            : ''
+        "
+        >{{ deliveryStatus }}</text
+      >
     </view>
     <view class="order-detail">
       <view class="detail">
-        <image
-          class="order-img"
-          src="https://img12.360buyimg.com/jdcms/s460x460_jfs/t1/226637/16/19995/180517/66696f86Fa90c7d49/3bc094e1eb7aeb12.jpg.avif"
-          mode=""
-        ></image>
+        <image class="order-img" :src="itemInfo.goods.image" mode=""></image>
         <view class="detail-right">
           <view class="title-price">
-            <view class="title"> {OATLY噢麦力 咖啡大师… }</view>
+            <view class="title"> {{ itemInfo.goods.name_cn }}</view>
             <view class="price">
               <text style="font-size: 20rpx">￥</text>
-              <text>133</text>.
-              <text style="font-size: 20rpx">22</text>
+              <text>{{ itemInfo.goods.price.split(".")[0] }}</text
+              >.
+              <text style="font-size: 20rpx">{{
+                itemInfo.goods.price.split(".")[1]
+              }}</text>
             </view>
           </view>
           <view class="specifications">
-            <view class="title"> 咖啡大师燕麦奶250ml*6瓶 </view>
+            <view class="title"> {{ itemInfo.goods.sku_item[0].item }} </view>
             <text>x1</text>
           </view>
         </view>
@@ -51,14 +54,24 @@
         disabled
         class="btn-2"
         :disabled="itemInfo.status == 3"
+        :style="itemInfo.status == 3 ? 'opacity: 0.5' : ''"
         v-if="itemInfo.status == 0 || itemInfo.status == 3"
+        @click.stop="$emit('platformIntervene', itemInfo)"
       >
         平台介入
       </button>
-      <button class="btn-1" v-if="itemInfo.status == 0 || itemInfo.status == 3">
+      <button
+        class="btn-1"
+        v-if="itemInfo.status == 0 || itemInfo.status == 3"
+        @click.stop="$emit('refuseRefund', itemInfo)"
+      >
         拒绝申请
       </button>
-      <button class="btn-3" v-if="itemInfo.status == 0 || itemInfo.status == 3">
+      <button
+        class="btn-3"
+        v-if="itemInfo.status == 0 || itemInfo.status == 3"
+        @click.stop="$emit('agreeRefund', itemInfo)"
+      >
         同意退款
       </button>
       <button class="btn-2" v-if="itemInfo.status == 1">删除</button>