feat(collectCode): 新增签名功能相关页面
- 添加签名面板页面,实现签名提交和清除功能 - 更新个人信息页面布局,增加下一步按钮 - 新增协议页面,实现支付前协议展示和同意签字功能 - 在 uno.config.js 中添加自定义样式规则,用于覆盖默认按钮样式
This commit is contained in:
parent
2e08e6efcb
commit
8d01653dac
18
app/pages/collectCode/signature/panel/index.vue
Normal file
18
app/pages/collectCode/signature/panel/index.vue
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<script setup>
|
||||||
|
const image = ref('');
|
||||||
|
import { showToast } from 'vant';
|
||||||
|
|
||||||
|
const onSubmit = (data) => {
|
||||||
|
image.value = data.image;
|
||||||
|
};
|
||||||
|
const onClear = () => showToast('clear');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<van-signature @submit="onSubmit" @clear="onClear" />
|
||||||
|
<van-image v-if="image" :src="image" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
@ -21,11 +21,11 @@ const columns = ref([
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="w-[100vw] bg-[url('@/static/images/asdfsdd.png')] h-screen-nav bg-cover pt-43px flex-grow-1 flex flex-col px-34px">
|
class="w-[100vw] bg-[url('@/static/images/asdfsdd.png')] h-screen-nav bg-cover pt-77px flex-grow-1 flex flex-col ">
|
||||||
<div class="text-16px text-#191919">
|
<div class="text-16px text-#191919 font-bold mb-40px px-34px">
|
||||||
请填写个人相关信息
|
请填写个人相关信息
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="grow-1 px-34px">
|
||||||
<van-field type="tel" :label-width="161" label="文本" class="mb-10px" placeholder="请输入手机号">
|
<van-field type="tel" :label-width="161" label="文本" class="mb-10px" placeholder="请输入手机号">
|
||||||
<template #label>
|
<template #label>
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
@ -44,9 +44,15 @@ const columns = ref([
|
|||||||
<van-field label="所属银行" class="mb-10px" placeholder="请输入所属银行"/>
|
<van-field label="所属银行" class="mb-10px" placeholder="请输入所属银行"/>
|
||||||
<van-field label="银行卡号码" class="mb-10px" placeholder="请输入银行卡号码"/>
|
<van-field label="银行卡号码" class="mb-10px" placeholder="请输入银行卡号码"/>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="h-81px bg-#fff flex justify-center pt-7px border-t">
|
||||||
|
<van-button color="#2B53AC" class="w-213px van-btn-h-38px">下一步</van-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
|
:deep(.van-cell.van-field){
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
40
app/pages/collectCode/signature/protocol/index.vue
Normal file
40
app/pages/collectCode/signature/protocol/index.vue
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<script setup>
|
||||||
|
const activeNames = ref(['1']);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bg-#EBEBEB h-screen-nav flex flex-col">
|
||||||
|
<div class="h-50px text-14px text-#191919 bg-#fff flex items-center px-21px mb-6px">支付前需同意以下内容并签字</div>
|
||||||
|
<van-collapse v-model="activeNames" class="grow-1">
|
||||||
|
<van-collapse-item name="1" class="mb-6px">
|
||||||
|
<template #title>
|
||||||
|
<div class="text-#2B53AC text-14px">《拍卖规则》</div>
|
||||||
|
</template>
|
||||||
|
代码是写出来给人看的,附带能在机器上运行。
|
||||||
|
</van-collapse-item>
|
||||||
|
<van-collapse-item name="2" class="mb-6px">
|
||||||
|
<template #title>
|
||||||
|
<div class="text-#2B53AC text-14px">《拍卖规则》</div>
|
||||||
|
</template>
|
||||||
|
代码是写出来给人看的,附带能在机器上运行。
|
||||||
|
</van-collapse-item>
|
||||||
|
<van-collapse-item name="3" class="mb-6px">
|
||||||
|
<template #title>
|
||||||
|
<div class="text-#2B53AC text-14px">《拍卖规则》</div>
|
||||||
|
</template>
|
||||||
|
代码是写出来给人看的,附带能在机器上运行。
|
||||||
|
</van-collapse-item>
|
||||||
|
</van-collapse>
|
||||||
|
<div class="h-81px bg-#fff flex justify-center pt-7px border-t">
|
||||||
|
<van-button color="#2B53AC" class="w-213px van-btn-h-38px">同意并签字</van-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
:deep(.van-cell__right-icon){
|
||||||
|
color: #ACACAC;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
</style>
|
@ -14,7 +14,13 @@ import {
|
|||||||
// https://unocss.dev/guide/config-file
|
// https://unocss.dev/guide/config-file
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
rules: [
|
rules: [
|
||||||
['h-screen-nav', { height: 'calc(100vh - var(--van-nav-bar-height))' }]
|
['h-screen-nav', { height: 'calc(100vh - var(--van-nav-bar-height))' }],
|
||||||
|
[/^van-btn-w-(\d+)px$/, ([_, d]) => ({
|
||||||
|
width: `${d}px !important` // 使用 !important 覆盖默认样式
|
||||||
|
})],
|
||||||
|
[/^van-btn-h-(\d+)px$/, ([_, d]) => ({
|
||||||
|
height: `${d}px !important`
|
||||||
|
})]
|
||||||
],
|
],
|
||||||
shortcuts: [
|
shortcuts: [
|
||||||
// shortcuts to multiple utilities
|
// shortcuts to multiple utilities
|
||||||
|
Loading…
Reference in New Issue
Block a user