售后状态更新

src/views/goods-order/after-sale.tsx

@@ -20,8 +20,10 @@ import Item from './item'
 import styles from './index.module.less'
 
 const returnState = {
-  0: '待审核',
-  1: '等待退款'
+  0: '待处理',
+  1: '退货中',
+  2: '已完成',
+  3: '已拒绝'
 }
 
 export default defineComponent({
@@ -55,7 +57,8 @@ export default defineComponent({
         productRealPrice: 0,
         proofPics: '',
         returnName: '',
-        returnPhone: ''
+        returnPhone: '',
+        orderItemId: ''
       },
       reason: '', // 退货原因
       returnOrderSn: '', // 退货快递单号
@@ -79,6 +82,7 @@ export default defineComponent({
     },
 
     async getList() {
+      this.dataShow = true
       //避免重复请求
       if (this.loading && this.finished) {
         return
@@ -93,14 +97,14 @@ export default defineComponent({
         res = await this.getReturnList()
       }
       // console.log(res)
-      if (!res.data.list) {
+      if (!res?.data?.list) {
         this.dataShow = false
       }
       if (res.code === 200 && res.data.list) {
         this.list = [].concat(this.list, res.data.list)
         this.params.pageNum = res.data.pageNum + 1
       }
-      this.finished = this.params.pageNum >= res.data.totalPage
+      this.finished = this.params.pageNum >= res?.data?.totalPage
       this.loading = false
     },
 
@@ -148,6 +152,7 @@ export default defineComponent({
       this.returnGood.proofPics = ''
       this.returnGood.returnName = item.receiverName
       this.returnGood.returnPhone = item.receiverPhone
+      this.returnGood.orderItemId = n.id
       console.log(this.returnGood)
     },
     // 退商品
@@ -196,6 +201,9 @@ export default defineComponent({
         )
         if (code === 200) {
           this.returnOrderSn = ''
+          this.kmsShow = false
+          this.init()
+          this.getList()
         }
       } catch (error) {}
     },
@@ -220,127 +228,149 @@ export default defineComponent({
     }
   },
   render() {
+    const tabs = [
+      { name: '0', title: '全部' },
+      { name: '1', title: '处理中' },
+      { name: '2', title: '已处理' }
+    ]
     return (
       <div class={styles.shopOrder}>
         <ColHeader
-          v-slots={{
-            default: () => (
-              <Tabs
-                v-model:active={this.active}
-                color="var(--van-primary)"
-                lineWidth={28}
-              >
-                <Tab name="0" title="全部"></Tab>
-                <Tab name="1" title="处理中"></Tab>
-                <Tab name="2" title="已处理"></Tab>
-              </Tabs>
-            )
-          }}
+        // v-slots={{
+        //   default: () => (
+        //     <Tabs
+        //       v-model:active={this.active}
+        //       color="var(--van-primary)"
+        //       lineWidth={28}
+        //     >
+        //       <Tab name="0" title="全部"></Tab>
+        //       <Tab name="1" title="处理中"></Tab>
+        //       <Tab name="2" title="已处理"></Tab>
+        //     </Tabs>
+        //   )
+        // }}
         />
 
-        {this.dataShow ? (
-          <>
-            {this.list.length ? (
-              <List
-                loading={this.loading}
-                finished={this.finished}
-                finishedText=" "
-                class={[styles.goodsList]}
-                onLoad={this.getList}
-              >
-                {this.list.map((item: any) => (
-                  <>
-                    {item.orderItemList && item.orderItemList.length ? (
-                      item.orderItemList.map((n: any) => (
-                        <CellGroup class={styles.cellGroup}>
-                          <Item item={n} />
-                          <Cell
-                            center
-                            v-slots={{
-                              default: () => (
-                                <div class={styles.btnList}>
-                                  {this.active === '0' &&
-                                  (item.status !== 0 || item.status !== 6) ? (
-                                    <Button
-                                      size="small"
-                                      round
-                                      type="primary"
-                                      onClick={() => {
-                                        this.show = true
-                                        this.setReturnParams(item, n)
-                                      }}
-                                    >
-                                      退货申请
-                                    </Button>
-                                  ) : null}
-                                </div>
-                              )
-                            }}
-                          ></Cell>
-                        </CellGroup>
-                      ))
-                    ) : (
-                      <CellGroup class={styles.cellGroup}>
-                        <Cell
-                          title={item.createTime}
-                          titleClass={styles.payTime}
-                          value={returnState[item.status]}
-                          // valueClass={}
-                        ></Cell>
-                        <Item item={item} />
-                        <Cell
-                          center
-                          v-slots={{
-                            default: () => (
-                              <div class={styles.btnList}>
-                                {item.status === 1 && !item.deliverySn ? (
-                                  <Button
-                                    size="small"
-                                    round
-                                    onClick={() => {
-                                      this.returnGoodId = item.id
-                                      this.kmsShow = true
-                                    }}
-                                  >
-                                    填写退货快递单号
-                                  </Button>
-                                ) : null}
-                                {item.status <= 1 ? (
-                                  <Button
-                                    size="small"
-                                    round
-                                    type="primary"
-                                    onClick={() => {
-                                      this.returnGoodId = item.id
-                                      this.deleteReturnApply()
-                                    }}
-                                  >
-                                    撤销申请
-                                  </Button>
-                                ) : null}
-                                {item.status === 2 ? (
-                                  <div class={styles.returnDes}>
-                                    该商品金额已于 {item.handleTime} 原路退还
-                                  </div>
-                                ) : null}
-                              </div>
-                            )
-                          }}
-                        ></Cell>
-                      </CellGroup>
-                    )}
-                  </>
-                ))}
-              </List>
-            ) : (
-              <ColResult
-                btnStatus={false}
-                classImgSize="SMALL"
-                tips="暂无数据"
-              />
-            )}
-          </>
-        ) : null}
+        <Tabs
+          v-model:active={this.active}
+          color="var(--van-primary)"
+          lineWidth={28}
+          animated
+          sticky
+          swipeable
+        >
+          {tabs.map(tab => (
+            <Tab name={tab.name} title={tab.title}>
+              {this.dataShow ? (
+                <>
+                  {this.list.length ? (
+                    <List
+                      loading={this.loading}
+                      finished={this.finished}
+                      finishedText=" "
+                      class={[styles.goodsList]}
+                      onLoad={this.getList}
+                    >
+                      {this.active === tab.name && this.list.map((item: any) => (
+                        <>
+                          {item.orderItemList && item.orderItemList.length ? (
+                            item.orderItemList.filter(n => n.returnStatus < 0).map((n: any) => (
+                              <CellGroup class={styles.cellGroup}>
+                                <Item item={n} />
+                                <Cell
+                                  center
+                                  v-slots={{
+                                    default: () => (
+                                      <div class={styles.btnList}>
+                                        {this.active === '0' &&
+                                        (item.status !== 0 ||
+                                          item.status !== 6) ? (
+                                          <Button
+                                            size="small"
+                                            round
+                                            type="primary"
+                                            onClick={() => {
+                                              this.show = true
+                                              this.setReturnParams(item, n)
+                                            }}
+                                          >
+                                            退货申请
+                                          </Button>
+                                        ) : null}
+                                      </div>
+                                    )
+                                  }}
+                                ></Cell>
+                              </CellGroup>
+                            ))
+                          ) : (
+                            <CellGroup class={styles.cellGroup}>
+                              <Cell
+                                title={item.createTime}
+                                titleClass={styles.payTime}
+                                value={returnState[item.status]}
+                                // valueClass={}
+                              ></Cell>
+                              <Item item={item} />
+                              <Cell
+                                center
+                                v-slots={{
+                                  default: () => (
+                                    <div class={styles.btnList}>
+                                      {item.status === 1 && !item.deliverySn ? (
+                                        <Button
+                                          size="small"
+                                          round
+                                          onClick={() => {
+                                            this.returnGoodId = item.id
+                                            this.kmsShow = true
+                                          }}
+                                        >
+                                          填写退货快递单号
+                                        </Button>
+                                      ) : null}
+                                      {item.status <= 1 ? (
+                                        <Button
+                                          size="small"
+                                          round
+                                          type="primary"
+                                          onClick={() => {
+                                            this.returnGoodId = item.id
+                                            this.deleteReturnApply()
+                                          }}
+                                        >
+                                          撤销申请
+                                        </Button>
+                                      ) : null}
+                                      {item.status === 2 ? (
+                                        <div class={styles.returnDes}>
+                                          该商品金额已于 {item.handleTime}{' '}
+                                          原路退还
+                                        </div>
+                                      ) : item.status === 3 ? (
+                                        <div class={styles.returnDes}>拒绝原因: {item.handleNote}</div>
+                                      ) : null}
+                                    </div>
+                                  )
+                                }}
+                              ></Cell>
+                            </CellGroup>
+                          )}
+                        </>
+                      ))}
+                    </List>
+                  ) : (
+                    <ColResult
+                      btnStatus={false}
+                      classImgSize="SMALL"
+                      tips="暂无数据"
+                    />
+                  )}
+                </>
+              ) : null}
+            </Tab>
+          ))}
+        </Tabs>
 
         <ActionSheet v-model:show={this.show} title="退货原因">
           <div style={{ paddingTop: '15px' }}>

src/views/goods-order/index.tsx

@@ -68,7 +68,10 @@ export default defineComponent({
         if (this.list.length === 0) {
           this.dataShow = false
         }
-      } catch (error) {}
+      } catch (error) {
+        this.finished = true
+        this.dataShow = false
+      }
       this.loading = false
     },
     onClickRight() {
@@ -143,72 +146,95 @@ export default defineComponent({
     }
   },
   render() {
+    const tabs = [
+      { name: 0, title: '待支付' },
+      { name: 1, title: '待收货' },
+      { name: 2, title: '已收货' }
+    ]
     return (
       <div class={styles.shopOrder}>
         <ColHeader
           rightText="售后服务"
           onClickRight={this.onClickRight}
-          v-slots={{
-            default: () => (
-              <Tabs
-                v-model:active={this.active}
-                color="var(--van-primary)"
-                lineWidth={28}
-              >
-                <Tab name={0} title="待支付"></Tab>
-                <Tab name={1} title="待收货"></Tab>
-                <Tab name={2} title="已收货"></Tab>
-              </Tabs>
-            )
-          }}
+          // v-slots={{
+          //   default: () => (
+          //     <Tabs
+          //       v-model:active={this.active}
+          //       color="var(--van-primary)"
+          //       lineWidth={28}
+          //     >
+          //       <Tab name={0} title="待支付"></Tab>
+          //       <Tab name={1} title="待收货"></Tab>
+          //       <Tab name={2} title="已收货"></Tab>
+          //     </Tabs>
+          //   )
+          // }}
         />
-
-        {this.dataShow ? (
-          <List
-            loading={this.loading}
-            finished={this.finished}
-            finishedText=" "
-            class={[styles.goodsList]}
-            onLoad={this.getList}
-          >
-            {this.list.map((item: any) => (
-              <>
-                <CellGroup
-                  class={styles.cellGroup}
-                  onClick={() => {
-                    this.$router.push({
-                      path: '/shopOrderDetail',
-                      query: { id: item.id }
-                    })
-                  }}
+        <Tabs
+          v-model:active={this.active}
+          color="var(--van-primary)"
+          lineWidth={28}
+          animated
+          sticky
+          swipeable
+        >
+          {tabs.map(tab => (
+            <Tab name={tab.name} title={tab.title}>
+              {this.active === tab.name && this.dataShow ? (
+                <List
+                  loading={this.loading}
+                  finished={this.finished}
+                  finishedText=" "
+                  class={[styles.goodsList]}
+                  onLoad={this.getList}
                 >
-                  <Cell
-                    title={item.createTime}
-                    titleClass={styles.payTime}
-                    value={orderState[item.status]}
-                    valueClass={
-                      [0, 4, 5, 6].includes(item.status)
-                        ? styles.payStatus
-                        : styles.paySuccess
-                    }
-                  ></Cell>
-                  {item.orderItemList && item.orderItemList.length
-                    ? item.orderItemList.map((n: any) => <Item item={n} />)
-                    : null}
-                  <AfterSaleBtns
-                    item={item}
-                    onCancelOrder={this.cancelOrder}
-                    onPayOrder={this.payOrder}
-                    onConfirmReceipt={this.onConfirmReceipt}
-                    onAginOrder={this.onAginOrder}
-                  />
-                </CellGroup>
-              </>
-            ))}
-          </List>
-        ) : (
-          <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无订单" />
-        )}
+                  {this.list.map((item: any) => (
+                    <>
+                      <CellGroup
+                        class={styles.cellGroup}
+                        onClick={() => {
+                          this.$router.push({
+                            path: '/shopOrderDetail',
+                            query: { id: item.id }
+                          })
+                        }}
+                      >
+                        <Cell
+                          title={item.createTime}
+                          titleClass={styles.payTime}
+                          value={orderState[item.status]}
+                          valueClass={
+                            [0, 4, 5, 6].includes(item.status)
+                              ? styles.payStatus
+                              : styles.paySuccess
+                          }
+                        ></Cell>
+                        {item.orderItemList && item.orderItemList.length
+                          ? item.orderItemList.map((n: any) => (
+                              <Item item={n} />
+                            ))
+                          : null}
+                        <AfterSaleBtns
+                          item={item}
+                          onCancelOrder={this.cancelOrder}
+                          onPayOrder={this.payOrder}
+                          onConfirmReceipt={this.onConfirmReceipt}
+                          onAginOrder={this.onAginOrder}
+                        />
+                      </CellGroup>
+                    </>
+                  ))}
+                </List>
+              ) : (
+                <ColResult
+                  btnStatus={false}
+                  classImgSize="SMALL"
+                  tips="暂无订单"
+                />
+              )}
+            </Tab>
+          ))}
+        </Tabs>
       </div>
     )
   }