修改显示

src/views/order-detail/index.tsx

@@ -29,6 +29,7 @@ import { getMusicDetail } from '@/student/trade/tradeOrder'
 import OrderActive from './order-active'
 import UseCoupon from './use-coupons'
 import OrderAlbum from './order-album'
+import { useRect } from '@vant/use'
 
 export default defineComponent({
   name: 'order-detail',
@@ -46,7 +47,8 @@ export default defineComponent({
       orderAmount: 0, // 订单金额，用于使用优惠券，余额，优惠等
       orderPrice: 0, // 支付金额，最后支付金额
       dataLoading: true,
-      exists: false // 是否签署过用户注册协议
+      exists: false, // 是否签署过用户注册协议
+      bottomHeight: 0
     }
   },
   unmounted() {
@@ -105,6 +107,13 @@ export default defineComponent({
       this.loading = true
       this.onSubmit()
     }
+
+    this.$nextTick(() => {
+      // paymentButton
+      // 处理超过一屏显示
+      const { height } = useRect((this as any).$refs.paymentButtom)
+      this.bottomHeight = height + 10
+    })
   },
   methods: {
     async getUserRegisterProtocol() {
@@ -221,7 +230,12 @@ export default defineComponent({
   },
   render() {
     return (
-      <div class={styles['order-detail']}>
+      <div
+        class={styles['order-detail']}
+        style={{
+          paddingBottom: this.bottomHeight + 'px'
+        }}
+      >
         <ColHeader />
 
         {!this.loading && (
@@ -278,7 +292,7 @@ export default defineComponent({
           )}
         </div> */}
 
-            <div class={styles.paymentInfo}>
+            <div class={styles.paymentInfo} ref="paymentButtom">
               {this.orderPrice > 0 && (
                 <div class={styles.protocol}>
                   <ColProtocol