完善H5的页面

src/pages/cashier/cashier.vue

@@ -0,0 +1,61 @@
+<route lang="jsonc" type="page">
+{
+    "layout": "default",
+    "style": {
+        "navigationStyle": "custom"
+    }
+}
+</route>
+
+
+<template>
+    <view class="">
+        <view>
+			<navbar title="收银台" custom-class='!bg-[#F6F7F8]'></navbar>
+		</view>
+
+        <!-- 支付信息 -->
+        <view class="mt-56rpx text-center">
+            <view class="text-28rpx leading-40rpx text-#606266">顾客打赏-茶艺师名字</view>
+            <view class="mt-24rpx">
+                <price-format color="#303133" :first-size="44" :second-size="44" :subscript-size="28" :price="100"></price-format>
+            </view>
+            <view class="mt-12rpx flex items-center justify-center">
+                <view class="text-24rpx leading-34rpx text-#606266">
+                    支付剩余时间           
+                </view>             
+                <wd-count-down :time="time" custom-class="!text-[#606266] !text-24rpx !leading-34rpx"	/>
+            </view>
+        </view>
+
+        <!-- 支付方式 -->
+        <view class="bg-white rounded-16rpx px-30rpx py-34rpx mx-30rpx mt-84rpx">
+            <view class="font-400 text-32rpx leading-44rpx text-#303133 border-b border-b-solid border-b-#F6F7F8 pb-16rpx mb-32rpx">支付方式</view>
+            <!-- pay 组件 -->
+            <pay hide-store-balance @pay="Cashier.handleGetPayValue"></pay>
+        </view>
+
+        <view class="fixed bottom-70rpx left-0 right-0 bg-#4C9F44 text-#fff font-bold text-30rpx leading-42rpx mx-60rpx h-90rpx leading-90rpx text-center rounded-8rpx">立即支付</view>
+    </view>
+</template>
+
+<script lang="ts" setup>
+    import Pay from '@/components/Pay.vue'
+
+    // 支付倒计时取消
+    const time = ref<number>(30 * 60 * 60 * 1000)
+
+    const Cashier = {
+        // 获取支付方式
+        handleGetPayValue(value: number) {
+            console.log('支付方式', value)
+        }
+    }
+</script>
+
+
+<style lang="scss" scoped>
+    page {
+		background-color: $cz-page-background;
+	}
+</style>