orchestra-app/src/student/trade-record/component/wait-pay.tsx

import dayjs from 'dayjs'
import {
  Button,
  Cell,
  CellGroup,
  DatePicker,
  Icon,
  Image,
  List,
  Picker,
  Popup,
  showConfirmDialog,
  Sticky
} from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import styles from '../index.module.less'
import iconOrder from '../images/icon_order.png'
import request from '@/helpers/request'
import OEmpty from '@/components/o-empty'
import { orderStatus, orderType } from '@/constant'
import { moneyFormat } from '@/helpers/utils'
import { useRouter } from 'vue-router'
import OFullRefresh from '@/components/o-full-refresh'

export default defineComponent({
  name: 'wait_pay',
  props: {
    height: {
      type: Number,
      default: 50
    }
  },
  setup(props) {
    const router = useRouter()
    const form = reactive({
      isClick: false,
      timeShow: false,
      currentData: [dayjs().year() + ''],
      typeShow: false,
      currentType: 'ALL',
      typeArray: [{ text: '全部', value: 'ALL' }] as any,
      list: [] as any,
      listState: {
        dataShow: true, // 判断是否有数据
        loading: false,
        finished: false,
        refreshing: false,
        height: props.height || 0 // 页面头部高度，为了处理下拉刷新用的
      },
      params: {
        paymentStatus: ['WAIT_PAY', 'PAYING'],
        page: 1,
        rows: 20
      }
    })

    const getList = async (hideLoading = false) => {
      try {
        if (form.isClick) return
        form.isClick = true
        const res = await request.post('/api-student/userPaymentOrder/page', {
          // hideLoading: hideLoading,
          data: {
            ...form.params,
            orderType: form.currentType === 'ALL' ? null : form.currentType,
            paymentYear: form.currentData[0]
          }
        })
        form.listState.loading = false
        form.listState.refreshing = false
        const result = res.data || {}
        // 处理重复请求数据
        if (form.list.length > 0 && result.current === 1) {
          return
        }
        form.list = form.list.concat(result.rows || [])
        form.listState.finished = result.current >= result.pages
        form.params.page = result.current + 1
        form.listState.dataShow = form.list.length > 0
        form.isClick = false
      } catch {
        form.listState.dataShow = false
        form.listState.refreshing = false
        form.listState.finished = true
        form.isClick = false
      }
    }

    const onSearch = (hideLoading = false) => {
      form.params.page = 1
      form.list = []
      form.listState.dataShow = true // 判断是否有数据
      form.listState.loading = false
      form.listState.finished = false
      getList(hideLoading)
    }

    const formatOrderType = (orderType: string) => {
      let select = {} as any
      form.typeArray.forEach((item: any) => {
        if (item.value === orderType) {
          select = item
        }
      })
      return select.text
    }

    const onCancelOrder = async (item: any) => {
      showConfirmDialog({
        message: '您是否关闭该订单',
        cancelButtonText: '取消',
        confirmButtonText: '确定'
      }).then(async () => {
        try {
          await request.post('/api-student/userPaymentOrder/cancelPayment/' + item.orderNo, {
            hideLoading: false
          })
          onSearch()
        } catch {
          //
        }
      })
    }

    const onConfirmOrder = async (item: any) => {
      try {
        const { data } = await request.get('/api-student/userPaymentOrder/unpaid', {
          hideLoading: false,
          params: {
            orderNo: item.orderNo,
            paymentType: item.orderType
          }
        })

        const paymentConfig = data.paymentConfig
        router.push({
          path: '/orderDetail',
          query: {
            config: JSON.stringify(paymentConfig.paymentConfig),
            orderNo: paymentConfig.orderNo
          }
        })
      } catch {
        //
      }
    }

    const onDetails = (item: any) => {
      router.push({
        path: 'payment-result',
        query: {
          orderNo: item.orderNo
        }
      })
    }

    onMounted(() => {
      getList()

      Object.keys(orderType).forEach((key) => {
        form.typeArray.push({
          text: orderType[key],
          value: key
        })
      })
    })
    return () => (
      <div
        class={!form.listState.dataShow && 'emptyRootContainer'}
        style={{ minHeight: `calc(100vh - ${props.height}px)` }}
      >
        <Sticky position="top" offsetTop={props.height} style={{ width: '100%' }}>
          <div style={{ padding: '12px 13px 16px', background: '#F8F8F8' }}>
            <div class={styles.searchBand} onClick={() => (form.timeShow = true)}>
              {form.currentData[0]}年 <Icon name={form.timeShow ? 'arrow-up' : 'arrow-down'} />
            </div>
            <div
              class={styles.searchBand}
              onClick={() => (form.typeShow = true)}
              style="margin-left: 16px"
            >
              {formatOrderType(form.currentType)}
              <Icon name={form.typeShow ? 'arrow-up' : 'arrow-down'} />
            </div>
          </div>
        </Sticky>

        {form.listState.dataShow ? (
          <OFullRefresh
            v-model:modelValue={form.listState.refreshing}
            onRefresh={() => onSearch(false)}
            style={{
              minHeight: `calc(100vh - ${form.listState.height}px)`
            }}
          >
            <List
              // v-model:loading={form.listState.loading}
              finished={form.listState.finished}
              finishedText=" "
              class={[styles.liveList]}
              onLoad={getList}
              immediateCheck={false}
            >
              {form.list.map((item: any) => (
                <CellGroup inset class={styles.cellGroup} onClick={() => onDetails(item)}>
                  <Cell center titleClass={styles.times}>
                    {{
                      title: () => <span class={styles.times}>{item.createTime}</span>,
                      value: () => <span class={styles.status}>{orderStatus[item.status]}</span>
                    }}
                  </Cell>
                  <Cell isLink center clickable={false} titleStyle={{ flex: '0 auto' }}>
                    {{
                      icon: () => <Image class={styles.img} src={iconOrder} />,
                      title: () => <span class={styles.name}>{orderType[item.orderType]}</span>,
                      value: () => (
                        <div class={styles.price}>
                          <span>¥</span>
                          {moneyFormat(item.paymentCashAmount)}
                        </div>
                      )
                    }}
                  </Cell>
                  <Cell>
                    {{
                      value: () => (
                        <div class={styles.btnGroup}>
                          <Button
                            plain
                            round
                            size="small"
                            color="#777777"
                            class={styles.smallBtn}
                            onClick={(e: any) => {
                              e.stopPropagation()
                              onCancelOrder(item)
                            }}
                          >
                            取消订单
                          </Button>
                          <Button
                            plain
                            round
                            size="small"
                            type="primary"
                            class={styles.smallBtn}
                            onClick={(e: any) => {
                              e.stopPropagation()
                              onConfirmOrder(item)
                            }}
                          >
                            继续支付
                          </Button>
                        </div>
                      )
                    }}
                  </Cell>
                </CellGroup>
              ))}
            </List>
          </OFullRefresh>
        ) : (
          <OEmpty btnStatus={false} tips="暂无订单" />
        )}

        <Popup v-model:show={form.timeShow} position="bottom" round>
          <DatePicker
            v-model={form.currentData}
            columnsType={['year']}
            onConfirm={(date: any) => {
              form.currentData = date.selectedValues
              form.timeShow = false
              onSearch()
            }}
            onCancel={() => (form.timeShow = false)}
          />
        </Popup>

        <Popup v-model:show={form.typeShow} position="bottom" round>
          <Picker
            columns={form.typeArray}
            onCancel={() => (form.typeShow = false)}
            onConfirm={(val: any) => {
              form.currentType = val.selectedValues[0]
              form.typeShow = false
              onSearch()
            }}
          />
        </Popup>
      </div>
    )
  }
})