109 lines
2.4 KiB
Vue
109 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onMounted, watch } from 'vue'
|
|
import { storeToRefs } from 'pinia'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { ElMessage } from 'element-plus'
|
|
import { AppButton } from '@/components'
|
|
import { useContractStore } from '@/stores/modules/contract'
|
|
import ContractSignPanel from './cpns/ContractSignPanel.vue'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const contractStore = useContractStore()
|
|
const { signExpires } = storeToRefs(contractStore)
|
|
|
|
const contractId = computed(() => String(route.params.id))
|
|
|
|
function load(): void {
|
|
void contractStore.fetchSignQr(contractId.value)
|
|
}
|
|
|
|
async function onRefresh(): Promise<void> {
|
|
await contractStore.fetchSignQr(contractId.value, true)
|
|
ElMessage.success('二维码已刷新')
|
|
}
|
|
|
|
function onBack(): void {
|
|
void router.push(`/contract/${contractId.value}`)
|
|
}
|
|
|
|
watch(contractId, load)
|
|
|
|
onMounted(load)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="contract-sign">
|
|
<div class="container">
|
|
<nav class="contract-sign__breadcrumb text-secondary">
|
|
<RouterLink to="/contract" class="link">
|
|
合同中心
|
|
</RouterLink>
|
|
<span> > </span>
|
|
<RouterLink :to="`/contract/${contractId}`" class="link">
|
|
合同详情
|
|
</RouterLink>
|
|
<span> > </span>
|
|
<span>签署合同</span>
|
|
</nav>
|
|
|
|
<ContractSignPanel
|
|
:expires-in="signExpires"
|
|
@refresh="onRefresh"
|
|
/>
|
|
|
|
<div class="contract-sign__footer">
|
|
<AppButton @click="onBack">
|
|
返回
|
|
</AppButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.contract-sign {
|
|
min-height: 100%;
|
|
padding-top: @spacing-lg;
|
|
padding-bottom: @spacing-page-bottom;
|
|
background: @bg-color;
|
|
|
|
.container {
|
|
.flex(column, flex-start, stretch);
|
|
gap: @spacing-base;
|
|
}
|
|
|
|
&__breadcrumb {
|
|
font-size: @font-size-sm;
|
|
color: @text-color-disabled;
|
|
|
|
> span:last-child {
|
|
color: @text-color;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
&__footer {
|
|
.flex(row, flex-end);
|
|
width: 100%;
|
|
margin-top: @spacing-base;
|
|
|
|
:deep(.app-button) {
|
|
height: 36px;
|
|
padding: 0 @spacing-lg;
|
|
border: none;
|
|
border-radius: @radius-round;
|
|
background: @primary-strong;
|
|
color: @white;
|
|
font-size: @font-size-sm;
|
|
}
|
|
|
|
:deep(.app-button:hover) {
|
|
border-color: transparent;
|
|
background: @primary-color;
|
|
color: @white;
|
|
}
|
|
}
|
|
}
|
|
</style>
|