h5-colexiu/src/views/goods-order/index.tsx

import ColHeader from '@/components/col-header'
import ColResult from '@/components/col-result'
import request from '@/helpers/request'
import { Button, Cell, CellGroup, Dialog, Image, List, Tab, Tabs } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import { orderState } from '@/views/shop-mall/shop-mall'
import { cartConfirm } from '@/views/cart/cart'
import Item from './item'
import AfterSaleBtns from './components/after-sale-btns'

export default defineComponent({
  name: 'shop-order',
  data() {
    return {
      active: 0,
      list: [],
      dataShow: true, // 判断是否有数据
      loading: false,
      finished: false,
      params: {
        search: '',
        groupStatus: 'APPLY',
        page: 1,
        rows: 20
      },
      page: {
        pageNum: 1,
        pageSize: 20
      }
    }
  },
  watch: {
    active(val) {
      this.init()
      this.getList()
    }
  },
  methods: {
    init() {
      this.page.pageNum = 1
      this.finished = false
      this.list = []
      this.dataShow = true
    },
    async getList() {
      if (this.loading || this.finished) {
        return
      }
      this.loading = true
      try {
        let { code, data } = await request.get('/api-mall-portal/order/list', {
          params: {
            ...this.page,
            status: this.active === 0 ? '0,4' : this.active === 1 ? '1,2' : '3'
          }
        })

        if (code === 200 && data.list) {
          this.page.pageNum += 1
          this.list = [].concat(this.list as any, data.list)
        }
        if (this.list.length >= data.total) {
          this.finished = true
        }

        if (this.list.length === 0) {
          this.dataShow = false
        }
      } catch (error) {}
      this.loading = false
    },
    onClickRight() {
      this.$router.push('/afterSale')
    },

    async cancelOrder(item: any) {
      let dialog = await Dialog.confirm({
        title: '提示',
        message: '确认取消订单?',
        confirmButtonText: '取消订单',
        confirmButtonColor: 'var(--van-primary)'
      })
      if (dialog === 'confirm') {
        let { code, data } = await request.post(
          '/api-mall-portal/order/cancelUserOrder',
          { params: { orderId: item.id } }
        )
        if (code === 200) {
          this.init()
          this.getList()
        }
      }
    },
    payOrder(item: any) {
      cartConfirm.orderInfo = item
      this.$router.push({ path: '/cartConfirmAgin' })
    },

    // 确认收货
    async onConfirmReceipt(item: any) {
      let dialog = await Dialog.confirm({
        title: '提示',
        message: '确认收货?',
        confirmButtonText: '收货',
        confirmButtonColor: 'var(--van-primary)'
      })
      if (dialog === 'confirm') {
        let res = await request.post(
          '/api-mall-portal/order/confirmReceiveOrder',
          { params: { orderId: item.id } }
        )
        if (res.code === 200) {
          item.status = 3
          // this.init()
          // this.getList()
        }
      }
    }
  },
  render() {
    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>
            )
          }}
        />

        {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 }
                    })
                  }}
                >
                  <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}
                  />
                </CellGroup>
              </>
            ))}
          </List>
        ) : (
          <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无订单" />
        )}
      </div>
    )
  }
})