orchestra-app/src/student/music-group/pre-apply/order-detail.tsx

import OHeader from '@/components/o-header'
import { defineComponent, reactive } from 'vue'
import styles from './order-detail.module.less'
import Addres from './component/addres'
import OSticky from '@/components/o-sticky'
import { Button, Cell, CellGroup, Image, Popup, Tag } from 'vant'
import Payment from '@/views/adapay/payment'
import { useRoute, useRouter } from 'vue-router'
import OQrcode from '@/components/o-qrcode'

export default defineComponent({
  name: 'order-detail',
  setup() {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      paymentStatus: false,
      showQrcode: false
    })
    const onSubmit = () => {
      state.paymentStatus = true
    }
    return () => (
      <>
        <OHeader />
        <div class={styles.cartConfirm}>
          <div class={styles.cartConfirmBox}>
            <Addres />
          </div>

          <CellGroup style={{ margin: 0 }}>
            <Cell class={styles.cellItem} center>
              {{
                icon: () => (
                  <Image
                    class={styles.img}
                    src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1670231208704.png"
                  />
                ),
                title: () => (
                  <div class={styles.goodsContent}>
                    <h2>长笛标准配置</h2>
                    <Tag type="primary">品牌型号</Tag>
                    <p class={styles.goodsNum}>x 1</p>
                  </div>
                ),
                value: () => <span class={styles.cellPrice}>1212</span>
              }}
            </Cell>
            <Cell class={styles.cellItem} center>
              {{
                icon: () => (
                  <Image
                    class={styles.img}
                    src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1670231208704.png"
                  />
                ),
                title: () => (
                  <div class={styles.goodsContent}>
                    <h2>长笛标准配置长笛标准配置</h2>
                    <Tag type="primary">品牌型号</Tag>
                    <p class={styles.goodsNum}>x 1</p>
                  </div>
                ),
                value: () => <span class={styles.cellPrice}>1212</span>
              }}
            </Cell>
          </CellGroup>
        </div>

        <OSticky position="bottom" background="white">
          <div class={styles.paymentContainer}>
            <div class={styles.payemntPrice}>
              <p class={styles.needPrice}>
                共需支付：<span>¥3,860.00</span>
              </p>
            </div>
            <div class={styles.paymentBtn}>
              <Button
                color="linear-gradient(135deg, #FF8C4A 0%, #FF531C 100%)"
                round
                onClick={onSubmit}
              >
                立即购买
              </Button>
            </div>
          </div>
        </OSticky>

        <Popup
          show={state.paymentStatus}
          closeOnClickOverlay={false}
          position="bottom"
          round
          closeOnPopstate
          safeAreaInsetBottom
          style={{ minHeight: '30%' }}
        >
          <Payment
            paymentConfig={{}}
            onClose={() => (state.paymentStatus = false)}
            onBackOut={() => {
              console.log('back')
              // router.back()
            }}
          />
        </Popup>

        <Popup
          v-model:show={state.showQrcode}
          position="bottom"
          style={{ background: 'transparent' }}
          safeAreaInsetBottom={true}
        >
          <div class={styles.codeContainer}>
            <div class={styles.codeImg}>
              <div class={styles.codeContent}>
                <h2 class={styles.codeTitle}>乐团报名</h2>
                <div class={styles.codeName}>武汉小学2022上学期团武汉小学</div>

                <div class={styles.codeQr}>
                  <OQrcode text="http://ponline.dayaedu.com/" size={'400'} />
                </div>
                <div style={{ textAlign: 'center' }}>
                  <span class={styles.codeBtnText}>扫描上方二维码完成资料填写</span>
                </div>
                <div class={styles.codeTips}>二维码将在两小时后失效，请及时登记</div>
              </div>
            </div>
          </div>
        </Popup>
      </>
    )
  }
})