领取列表

src/views/collection-record-detail/index.module.less

@@ -164,109 +164,3 @@
     background: #f2f2f2;
     border-radius: 6px;
 }
-
-.cancelBtn {
-    height: 44px;
-    border: none;
-    background: linear-gradient(73deg, #5BECFF 0%, #259CFE 100%);
-    font-size: 16px;
-    font-weight: 500;
-    margin: 20px auto;
-    width: 88%;
-    &.orderNo{
-        background: #fff;
-        color: #777;
-        border: 1Px solid #777;
-    }
-}
-
-.cancelBox {
-    margin: 0 25px;
-    background: #FFFFFF;
-    border-radius: 10px;
-    overflow: hidden;
-
-    .boxContent {
-        padding: 20px;
-    }
-
-    .titleTag {
-        width: 4px;
-        height: 13px;
-        background: #FF8057 linear-gradient(73deg, #5BECFF 0%, #259CFE 100%);
-        border-radius: 2px;
-        margin-right: 6px;
-    }
-
-    .title {
-        display: flex;
-        align-items: center;
-        height: 25px;
-        font-size: 18px;
-        font-weight: 500;
-        color: #333333;
-        line-height: 25px;
-    }
-
-    .des {
-        padding: 15px 0;
-        font-size: 15px;
-        font-weight: 400;
-        color: #333333;
-        line-height: 21px;
-    }
-
-    .radioTitle {
-        font-size: 16px;
-        font-weight: 600;
-        color: rgba(51, 51, 51, 1);
-        line-height: 22px;
-    }
-
-    .radioDes {
-        padding: 10px;
-        background: #F2F2F2;
-        border-radius: 6px;
-        font-size: 15px;
-        font-weight: 400;
-        color: #333333;
-        line-height: 21px;
-
-        :global {
-            .van-field {
-                padding: 0;
-                background: transparent;
-            }
-        }
-    }
-
-    :global {
-        .van-cell {
-            padding: 18px 0;
-
-            &::after {
-                left: 0;
-                right: 0;
-            }
-        }
-    }
-
-    .radioBtns {
-        display: flex;
-        border-top: 1Px solid #F2F2F2;
-
-        :global {
-            .van-button {
-                border: none;
-                border-radius: 0;
-                font-size: 18px;
-                font-weight: 500;
-            }
-
-            .van-button:first-child {
-                border-right: 1Px solid #F2F2F2;
-                color: #777;
-            }
-        }
-    }
-}

src/views/collection-record-detail/index.tsx

@@ -23,6 +23,7 @@ import { useEventListener, useWindowScroll } from '@vueuse/core';
 import {
   api_userPaymentOrderCancelRefund,
   api_userPaymentOrderDetail,
+  api_userPaymentOrderRefundDetail,
   api_userPaymentOrderRefundPayment
 } from '../collection-record/api';
 import * as detailState from '@/state';
@@ -33,7 +34,8 @@ export default defineComponent({
     const route = useRoute();
     const router = useRouter();
     const state = reactive({
-      refund: route.query.refund,
+      refundAudit: '' as any, // 退回审核状态
+      refundOrderId: '', // 退回订单id
       orders: {} as any,
       goodsInfos: [] as any,
       background: 'transparent',
@@ -45,16 +47,26 @@ export default defineComponent({
     const getDetails = async () => {
       try {
         if (!route.query.orderNo) return;
-        const { data } = await api_userPaymentOrderDetail(route.query.orderNo);
-
-        state.orders = data || {};
-        // state.orders.status = 'REFUNDED'
-        const tempGoods = data.goodsInfos || [];
+        const res = await api_userPaymentOrderRefundDetail(route.query.orderNo);
+        if (res?.code !== 200) return;
+        state.orders = res.data.order || {};
+        const tempGoods = res.data.order.goodsInfos || [];
         tempGoods.forEach((item: any) => {
           const img = item.goodsUrl ? item.goodsUrl.split(',')[0] : '';
           item.goodsUrl = img;
         });
         state.goodsInfos = tempGoods;
+        if (Array.isArray(res.data?.refund)) {
+          const refunds = res.data.refund;
+          const index = refunds.length - 1;
+          state.refundAudit = refunds[index]?.refundAudit || '';
+          state.refundOrderId = refunds[index]?.id || '';
+          if (state.refundAudit === 'ING') {
+            state.orders.status = 'REFUNDING';
+          } else if (state.refundAudit === 'PASS') {
+            state.orders.status = 'REFUNDED';
+          }
+        }
       } catch {
         //
       }
@@ -99,8 +111,8 @@ export default defineComponent({
         TIMEOUT: '订单超时',
         FAIL: '支付失败',
         CLOSED: '订单关闭',
-        REFUNDING: '退款中',
-        REFUNDED: '已退款'
+        REFUNDING: '退回申请中',
+        REFUNDED: '已退回'
       };
       return temp[status];
     };
@@ -122,18 +134,11 @@ export default defineComponent({
       });
     });
 
-    const data = reactive({
-      open: false
-    });
-    const forms = reactive({
-      refundReason: '',
-      refundReasonDes: ''
-    });
-
     /** 取消退款申请 */
     const handleBack = async () => {
-      await api_userPaymentOrderCancelRefund(state.orders.orderNo);
+      await api_userPaymentOrderCancelRefund(state.refundOrderId);
       showToast('撤销退回成功');
+      await getDetails();
     };
     return () => (
       <div class={styles.paymentResult}>
@@ -149,8 +154,7 @@ export default defineComponent({
                 />
                 <div class={styles.orderInfo}>
                   <span>{formatOrderStatus(state.orders.status)}</span>
-                  {state.orders.status === 'PAID' ||
-                  state.orders.status === 'REFUNDING' ? (
+                  {state.orders.status === 'PAID' ? (
                     <div class={styles.orderPrice}>
                       实付金额：￥ {moneyFormat(state.orders.paymentCashAmount)}
                     </div>
@@ -158,9 +162,9 @@ export default defineComponent({
                     ''
                   )}
 
-                  {state.orders.status === 'REFUNDED' && (
+                  {['REFUNDING', 'REFUNDED'].includes(state.orders.status) && (
                     <div class={styles.orderPrice}>
-                      退款金额：￥ {moneyFormat(state.orders.paymentCashAmount)}
+                      退回金额：￥ {moneyFormat(state.orders.paymentCashAmount)}
                     </div>
                   )}
                 </div>
@@ -212,7 +216,7 @@ export default defineComponent({
           ))}
         </CellGroup>
 
-        {state.orders.refundAudit === 'ING' && (
+        {state.refundAudit === 'ING' && (
           <Button
             class={styles.cancelBtn}
             block

src/views/collection-record/api.ts

@@ -1,5 +1,9 @@
 import request from '@/helpers/request';
 
+export const type_OrderTypes: { [_: string]: string } = {
+    VIP: "乐团Ai学练工具购买",
+    SCHOOL_REGISTER: "学生报名"
+}
 export const type_OrderStatus: { [_: string]: string } = {
   WAIT_PAY: '待支付',
   PAYING: '支付中',
@@ -34,11 +38,23 @@ export const api_userPaymentOrderPage = (
     data: params
   });
 };
+/** 获取退回列表 */
+export const api_userPaymentOrderStudentRefundOrderPage = (
+  params: any
+): Promise<any> => {
+  return request.post('/edu-app/userPaymentOrder/studentRefundOrderPage', {
+    data: params
+  });
+};
 
 /** 获取订单详情 */
 export const api_userPaymentOrderDetail = (params: any): Promise<any> => {
   return request.get(`/edu-app/userPaymentOrder/detail/${params}`);
 };
+/** 获取退回订单详情 */
+export const api_userPaymentOrderRefundDetail = (params: any): Promise<any> => {
+  return request.get(`/edu-app/userPaymentOrder/refundDetail/${params}`);
+};
 /** 取消订单退款 */
 export const api_userPaymentOrderCancelRefund = (params: any): Promise<any> => {
   return request.post(`/edu-app/userPaymentOrder/cancelRefund/${params}`);
@@ -52,9 +68,15 @@ export const api_userPaymentOrderRefundPayment = (
   });
 };
 
-/** 支付订单 */
+/** 继续支付订单 */
 export const api_userPaymentOrderUnpaid = (params: any): Promise<any> => {
   return request.get('/edu-app/userPaymentOrder/unpaid', {
     data: params
   });
 };
+/** 取消订单 */
+export const api_userPaymentOrderCancelPayment = (
+  params: any
+): Promise<any> => {
+  return request.post('/edu-app/userPaymentOrder/cancelPayment/' + params);
+};

src/views/collection-record/component/item.tsx

@@ -13,10 +13,12 @@ import { defineComponent, reactive } from 'vue';
 import styles from './item.module.less';
 import icon_order from '../image/icon_order.svg';
 import {
+  api_userPaymentOrderCancelPayment,
   api_userPaymentOrderDetail,
   api_userPaymentOrderRefundPayment,
   api_userPaymentOrderUnpaid,
-  type_OrderStatus
+  type_OrderStatus,
+  type_OrderTypes
 } from '../api';
 import { postMessage } from '@/helpers/native-message';
 import { browser } from '@/helpers/utils';
@@ -30,12 +32,13 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ['cancel'],
+  emits: ['cancel', 'close'],
   setup(props, { emit }) {
     const data = reactive({
       open: false,
       order: {} as any,
-      confirmLoading: false
+      confirmLoading: false,
+      cancelOrderLoading: false
     });
     const forms = reactive({
       refundReason: '',
@@ -88,40 +91,49 @@ export default defineComponent({
           : []
       });
       showToast('申请退回成功');
+      data.open = false;
+      emit('close');
     };
 
     /** 继续支付 */
     const onConfirmOrder = async () => {
       data.confirmLoading = true;
-      try {
-        const { data } = await api_userPaymentOrderUnpaid({
-          params: {
-            orderNo: props.item.orderNo,
-            paymentType: props.item.orderType
-          }
-        });
-        data.confirmLoading = false;
-        const paymentConfig = data.paymentConfig;
+      const res = await api_userPaymentOrderUnpaid({
+        params: {
+          orderNo: props.item.orderNo,
+          paymentType: props.item.orderType
+        }
+      });
+      data.confirmLoading = false;
+      if (res?.code === 200) {
+        const paymentConfig = res.data.paymentConfig;
+        const url =
+          location.origin +
+          location.pathname +
+          '#/order-detail?orderNo=' +
+          paymentConfig.orderNo +
+          '&config=' +
+          JSON.stringify(paymentConfig.paymentConfig);
+        console.log('🚀 ~ url:', url);
         postMessage({
           api: 'openWebView',
           content: {
-            url:
-              location.origin +
-              location.pathname +
-              '#/order-detail?orderNo=' +
-              paymentConfig.orderNo +
-              '&config=' +
-              JSON.stringify(paymentConfig.paymentConfig),
+            url,
             orientation: 1,
             isHideTitle: false
           }
         });
-      } catch {
-        //
       }
     };
 
-    /** 取消支付 */
+    /** 取消订单 */
+    const handleCancelOrder = async () => {
+      data.cancelOrderLoading = true;
+      await api_userPaymentOrderCancelPayment(props.item.orderNo);
+      data.cancelOrderLoading = false;
+      showToast('取消成功');
+      emit('close');
+    };
     return () => (
       <div class={styles.item}>
         <CellGroup inset>
@@ -131,8 +143,10 @@ export default defineComponent({
                 <div class={styles.time}>{props.item.createTime}</div>
               ),
               value: () => (
-                <div class={[styles.state, styles[props.item.status]]}>
-                  {type_OrderStatus[props.item.status]}
+                <div
+                  class={[styles.state]}
+                  style={{ color: props.item.statusColor }}>
+                  {props.item.statusName}
                 </div>
               )
             }}
@@ -141,24 +155,35 @@ export default defineComponent({
             {{
               icon: () => <img class={styles.icon} src={icon_order} />,
               title: () => (
-                <div class={styles.name}>{props.item.orderName}</div>
+                <div class={styles.name}>
+                  {type_OrderTypes[props.item.orderType]}
+                </div>
               ),
               value: () => (
                 <div class={styles.price}>
                   ¥
                   <span style={{ fontSize: '0.42667rem' }}>
-                    {props.item.originalPrice}
+                    {props.item.paymentCashAmount}
                   </span>
                 </div>
               )
             }}
           </Cell>
-          {props.item.status === 'WAIT_PAY' && (
+          {['WAIT_PAY', 'PAYING'].includes(props.item.status) && (
             <div class={styles.btns}>
-              <Button style={{ margin: '0 11px 0 auto' }} round size="small">
+              <Button
+                style={{ margin: '0 11px 0 auto' }}
+                round
+                size="small"
+                loading={data.cancelOrderLoading}
+                onClick={() => handleCancelOrder()}>
                 取消领取
               </Button>
-              <Button round size="small" onClick={() => onConfirmOrder()}>
+              <Button
+                round
+                size="small"
+                loading={data.confirmLoading}
+                onClick={() => onConfirmOrder()}>
                 继续领取
               </Button>
             </div>
@@ -166,18 +191,13 @@ export default defineComponent({
           {props.item.refundable && (
             <div
               class={[styles.btns, styles.cancelBtn]}
-              onClick={() => (data.open = true)}>
+              onClick={() => {
+                data.open = true;
+                getDetails(props.item);
+              }}>
               申请退回
             </div>
           )}
-          <div
-            class={[styles.btns, styles.cancelBtn]}
-            onClick={() => {
-              data.open = true;
-              getDetails(props.item);
-            }}>
-            申请退回
-          </div>
         </CellGroup>
 
         <Popup

src/views/collection-record/component/list.module.less

@@ -0,0 +1,22 @@
+.downBtn {
+    margin-left: 13px;
+    margin-bottom: 12px;
+    padding: 3px 12px;
+    font-size: 14px;
+    line-height: 20px;
+    color: #333;
+    font-weight: 400;
+    min-width: 103px;
+    :global {
+        .van-button__text {
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    .downIcon {
+        width: 9px;
+        height: 5px;
+        margin-left: 4px;
+    }
+}

src/views/collection-record/component/list.tsx

@@ -1,13 +1,17 @@
-import { PropType, defineComponent, onMounted, reactive } from 'vue';
+import { PropType, computed, defineComponent, onMounted, reactive } from 'vue';
 import {
   IApiUserPaymentOrderPage,
   api_userPaymentOrderPage,
+  api_userPaymentOrderStudentRefundOrderPage,
+  type_OrderStatus
 } from '../api';
 import Item from './item';
 import MFullRefresh from '@/components/m-full-refresh';
-import { List, showToast } from 'vant';
+import { Button, DatePicker, List, Popup, showToast } from 'vant';
 import MEmpty from '@/components/m-empty';
 import ItemSkelete from './item-skelete';
+import icon_arrow from '../image/icon_arrow.svg';
+import styles from './list.module.less';
 
 export default defineComponent({
   name: 'collection-record-list',
@@ -18,26 +22,86 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const time = new Date();
     const data = reactive({
       page: 1,
+      dateTime: [
+        time.getFullYear().toString(),
+        (time.getMonth() + 1).toString().padStart(2, '0')
+      ],
+      minDate: new Date(time.getFullYear(), 0, 1),
+      maxDate: new Date(time.getFullYear() + 10, 5, 1),
+
       list: [],
       skelete: true,
       refreshing: false,
       finished: false,
-      loading: false
+      loading: false,
+
+      dataOpen: false
     });
+    const statusTypes: { [_: string]: string } = {
+      WAIT_PAY: '待领取',
+      PAYING: '待领取',
+      PAID: '领取成功',
+      CLOSED: '已关闭'
+    };
+    const statusColors: { [_: string]: string } = {
+      WAIT_PAY: 'rgba(64, 196, 203, 1)',
+      PAYING: 'rgba(64, 196, 203, 1)',
+      PAID: 'rgba(28, 172, 241, 1)',
+      CLOSED: 'rgba(170, 170, 170, 1)',
+      ING: 'rgba(153, 153, 153, 1)',
+      REJECT: 'rgba(255, 90, 86, 1)',
+      PASS: 'rgba(255, 162, 68, 1)'
+    };
+    const refundTypes: { [_: string]: string } = {
+      ING: '退回申请中',
+      REJECT: '退回失败',
+      PASS: '退回成功',
+      CLOSED: '退回关闭'
+    };
     const getList = async () => {
       data.loading = true;
-      const res = await api_userPaymentOrderPage({
-        page: data.page,
-        rows: 10,
-        orderStatus: props.orderStatus,
-        paymentYear: ''
-      });
-      if (res?.code === 200 && Array.isArray(res?.data?.rows)) {
-        data.list = res.data.rows;
-        data.finished = !res.data.next;
+      let res = {} as any;
+      if (props.orderStatus === 'REFUNDED') {
+        res = await api_userPaymentOrderStudentRefundOrderPage({
+          page: data.page,
+          rows: 10,
+          refundMonth: data.dateTime.join('-')
+        });
+        if (res?.code === 200 && Array.isArray(res?.data?.rows)) {
+          data.list = res.data.rows.map((item: any) => {
+            return {
+              ...item,
+              createTime: item.refundTime,
+              statusName: refundTypes[item.refundAudit],
+              statusColor: statusColors[item.status]
+            };
+          });
+          data.finished = !res.data.next;
+          data.page = data.page + 1;
+        }
+      } else {
+        res = await api_userPaymentOrderPage({
+          page: data.page,
+          rows: 10,
+          orderStatus: props.orderStatus,
+          paymentYear: data.dateTime[0]
+        });
+        if (res?.code === 200 && Array.isArray(res?.data?.rows)) {
+          data.list = res.data.rows.map((item: any) => {
+            return {
+              ...item,
+              statusName: statusTypes[item.status],
+              statusColor: statusColors[item.status]
+            };
+          });
+          data.finished = !res.data.next;
+          data.page = data.page + 1;
+        }
       }
+
       setTimeout(() => {
         data.refreshing = false;
       }, 500);
@@ -47,32 +111,65 @@ export default defineComponent({
     onMounted(() => {
       getList();
     });
+
+    const handlStart = () => {
+      data.finished = false;
+      data.page = 1;
+      getList();
+    };
+
+    const timeName = computed(() => {
+      return `${data.dateTime[0]}年${data.dateTime[1]}月`;
+    });
     return () => (
-      <MFullRefresh
-        modelValue={data.refreshing}
-        onRefresh={() => {
-          data.refreshing = true;
-          data.finished = false;
-          console.log('下拉');
-          getList();
-        }}>
-        {data.skelete && new Array(5).fill(1).map(i => <ItemSkelete />)}
+      <>
+        <MFullRefresh
+          modelValue={data.refreshing}
+          onRefresh={() => {
+            data.refreshing = true;
+            console.log('下拉');
+            handlStart();
+          }}>
+          <Button
+            class={styles.downBtn}
+            size="small"
+            round
+            onClick={() => (data.dataOpen = true)}>
+            <div>{timeName.value}</div>
+            <img class={styles.downIcon} src={icon_arrow} />
+          </Button>
+          {data.skelete && new Array(5).fill(1).map(i => <ItemSkelete />)}
 
-        {data.list.length !== 0 && (
-          <List
-            loading={data.loading}
-            finished={data.finished}
-            finishedText=" ">
-            {data.list.map(item => {
-              return <Item item={item} />;
-            })}
-          </List>
-        )}
+          {data.list.length !== 0 && (
+            <List
+              loading={data.loading}
+              finished={data.finished}
+              finishedText=" ">
+              {data.list.map(item => {
+                return <Item item={item} onClose={() => handlStart()} />;
+              })}
+            </List>
+          )}
 
-        {!data.skelete && data.list.length === 0 && (
-          <MEmpty description="暂无记录" />
-        )}
-      </MFullRefresh>
+          {!data.skelete && data.list.length === 0 && (
+            <MEmpty description="暂无记录" />
+          )}
+        </MFullRefresh>
+        <Popup teleport="body" v-model:show={data.dataOpen} position="bottom">
+          <DatePicker
+            v-model={data.dateTime}
+            title="选择年月"
+            columnsType={['year', 'month']}
+            minDate={data.minDate}
+            maxDate={data.maxDate}
+            onConfirm={() => {
+              data.dataOpen = false;
+              console.log(data.dateTime);
+              handlStart();
+            }}
+          />
+        </Popup>
+      </>
     );
   }
 });

src/views/collection-record/image/icon_arrow.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="9px" height="5px" viewBox="0 0 9 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>三角形</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="领取记录-待领取" transform="translate(-99.000000, -155.000000)" fill="#AAAAAA">
+            <g id="编组-2" transform="translate(13.000000, 144.000000)">
+                <g id="筛选目录备份" transform="translate(12.000000, 3.000000)">
+                    <path d="M78.8716471,8.41294119 L82.2489659,12.1655176 C82.4336954,12.3707726 82.4170562,12.6869176 82.2118012,12.8716471 C82.1199888,12.9542782 82.0008397,13 81.8773188,13 L75.1226812,13 C74.8465388,13 74.6226812,12.7761424 74.6226812,12.5 C74.6226812,12.3764791 74.668403,12.25733 74.7510341,12.1655176 L78.1283529,8.41294119 C78.3130824,8.20768618 78.6292274,8.19104698 78.8344824,8.37577649 C78.8475136,8.38750459 78.859919,8.39990996 78.8716471,8.41294119 Z" id="三角形" transform="translate(78.500000, 10.500000) rotate(-180.000000) translate(-78.500000, -10.500000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/collection-record/index.tsx

@@ -17,7 +17,8 @@ export default defineComponent({
           <Tabs v-model:active={data.tab} animated swipeable>
             <Tab name="1" title="待领取">
               <div class={styles.wrap}>
-                <List orderStatus="WAIT_PAY" />
+                {/* <List orderStatus="WAIT_PAY" /> */}
+                <List orderStatus="PAYING" />
               </div>
             </Tab>
             <Tab name="2" title="已领取">
@@ -30,7 +31,7 @@ export default defineComponent({
                 <List orderStatus="CLOSED" />
               </div>
             </Tab>
-            <Tab name="4" title="已退回">
+            <Tab name="4" title="退回">
               <div class={styles.wrap}>
                 <List orderStatus="REFUNDED" />
               </div>