|
@@ -0,0 +1,152 @@
|
|
|
+import { moneyFormat } from '@/helpers/utils'
|
|
|
+import dayjs from 'dayjs'
|
|
|
+import { CellGroup, Cell, Image, Row, Col } from 'vant'
|
|
|
+import { defineComponent, onMounted, ref } from 'vue'
|
|
|
+import { state } from '@/state'
|
|
|
+import request from '@/helpers/request'
|
|
|
+import { useRoute } from 'vue-router'
|
|
|
+import ColHeader from '@/components/col-header'
|
|
|
+import TheSticky from '@/components/the-sticky'
|
|
|
+import styles from './index.module.less'
|
|
|
+import { orderType } from '@/constant'
|
|
|
+import iconMember from '@common/images/icon_member.png'
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'trade-detail',
|
|
|
+ setup() {
|
|
|
+ const route = useRoute()
|
|
|
+ const result = ref<any>({})
|
|
|
+ const getOrder = async (status?: true) => {
|
|
|
+ try {
|
|
|
+ const urlFix =
|
|
|
+ state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student'
|
|
|
+ const res = await request.get(
|
|
|
+ `${urlFix}/userOrder/detailByOrderNo/${route.query.orderNo}`,
|
|
|
+ {
|
|
|
+ hideLoading: status
|
|
|
+ }
|
|
|
+ )
|
|
|
+ console.log(res.data)
|
|
|
+ result.value = res.data
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ getOrder()
|
|
|
+ })
|
|
|
+ return () => (
|
|
|
+ <div>
|
|
|
+ <TheSticky>
|
|
|
+ <ColHeader isFixed={false} border={false} color="#131415" />
|
|
|
+ </TheSticky>
|
|
|
+ <div class={styles.tradeList}>
|
|
|
+ <CellGroup border={false} class={styles.orderDetailGroup}>
|
|
|
+ <Cell
|
|
|
+ border={false}
|
|
|
+ title={dayjs(result.value.createTime).format('YYYY-MM-DD HH:mm')}
|
|
|
+ value={orderType[result.value.status]}
|
|
|
+ valueClass={styles.tradeType}
|
|
|
+ />
|
|
|
+ {result.value.orderDetailList &&
|
|
|
+ result.value.orderDetailList.map((orderDetail: any) => (
|
|
|
+ <Cell
|
|
|
+ border={false}
|
|
|
+ class={styles.orderSection}
|
|
|
+ v-slots={{
|
|
|
+ icon: () => (
|
|
|
+ <Image
|
|
|
+ src={
|
|
|
+ orderDetail.goodType === 'VIP'
|
|
|
+ ? iconMember
|
|
|
+ : orderDetail.bizInfo?.bizCover
|
|
|
+ }
|
|
|
+ class={styles.tradeLogo}
|
|
|
+ />
|
|
|
+ ),
|
|
|
+ title: () => (
|
|
|
+ <div class={styles.goodsSection}>
|
|
|
+ <div class={[styles.title]}>
|
|
|
+ <span class={[styles.name, 'van-ellipsis']}>
|
|
|
+ {orderDetail.bizInfo?.bizName}
|
|
|
+ </span>
|
|
|
+ <span class={styles.desc}>
|
|
|
+ ¥{moneyFormat(orderDetail.actualPrice)}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class={styles.description}>
|
|
|
+ <span class={[styles.d, 'van-ellipsis']}>
|
|
|
+ {orderDetail.bizInfo?.bizDesc}
|
|
|
+ </span>
|
|
|
+ {orderDetail.goodType !== 'VIP' && (
|
|
|
+ <>
|
|
|
+ {orderDetail.goodType === 'TENANT_ALBUM' ? (
|
|
|
+ <span class={styles.t}>
|
|
|
+ x{orderDetail.bizInfo?.bizValidTime}个月
|
|
|
+ </span>
|
|
|
+ ) : (
|
|
|
+ <span class={styles.t}>永久</span>
|
|
|
+ )}
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {orderDetail.bizInfo?.bizMusicCount && (
|
|
|
+ <span class={styles.songLength}>
|
|
|
+ 共{orderDetail.bizInfo?.bizMusicCount}首
|
|
|
+ </span>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ ))}
|
|
|
+
|
|
|
+ <div class={styles.paymentPrice}>
|
|
|
+ {['PAYING', 'WAIT_PAY'].includes(result.value.status)
|
|
|
+ ? '需付款'
|
|
|
+ : '实付款'}
|
|
|
+ <span>
|
|
|
+ <i>¥</i>
|
|
|
+ {moneyFormat(result.value.actualPrice)}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </CellGroup>
|
|
|
+
|
|
|
+ <div class={styles.optionGroup}>
|
|
|
+ <Row class={styles.optionRow}>
|
|
|
+ <Col span="8" offset={1}>
|
|
|
+ 订单号:
|
|
|
+ </Col>
|
|
|
+ <Col span="14">{result.value.orderNo}</Col>
|
|
|
+ <Col span="1"> </Col>
|
|
|
+ </Row>
|
|
|
+ <Row class={styles.optionRow}>
|
|
|
+ <Col span="8" offset={1}>
|
|
|
+ 交易流水号:
|
|
|
+ </Col>
|
|
|
+ <Col span="14">{result.value.transNo}</Col>
|
|
|
+ <Col span="1"> </Col>
|
|
|
+ </Row>
|
|
|
+ <Row class={styles.optionRow}>
|
|
|
+ <Col span="8" offset={1}>
|
|
|
+ 创建时间:
|
|
|
+ </Col>
|
|
|
+ <Col span="14">{result.value.createTime}</Col>
|
|
|
+ <Col span="1"> </Col>
|
|
|
+ </Row>
|
|
|
+ <Row class={styles.optionRow}>
|
|
|
+ <Col span="8" offset={1}>
|
|
|
+ 付款时间:
|
|
|
+ </Col>
|
|
|
+ <Col span="14">{result.value.payTime}</Col>
|
|
|
+ <Col span="1"> </Col>
|
|
|
+ </Row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+})
|