80 lines
3.1 KiB
Vue
80 lines
3.1 KiB
Vue
<script setup>
|
||
import { ref } from 'vue'
|
||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||
import { getContract } from '@/api/crm'
|
||
import { labelOf, dash, formatMoney } from '@/utils/crmLabels'
|
||
import { PAGE_PATHS } from '@/config/api'
|
||
|
||
const id = ref('')
|
||
const detail = ref(null)
|
||
|
||
const statusLabel = (s) => labelOf('contractStatus', s)
|
||
|
||
const goBack = () => {
|
||
uni.navigateBack({
|
||
fail: () => uni.navigateTo({ url: PAGE_PATHS.crmContractList })
|
||
})
|
||
}
|
||
|
||
const load = async () => {
|
||
if (!id.value) return
|
||
try {
|
||
detail.value = await getContract(id.value)
|
||
} catch (e) {
|
||
uni.showToast({ title: e.message || '加载失败', icon: 'none' })
|
||
}
|
||
}
|
||
|
||
onLoad((q) => {
|
||
id.value = q?.id || ''
|
||
})
|
||
onShow(() => load())
|
||
</script>
|
||
|
||
<template>
|
||
<view class="mp-page mp-page--sub">
|
||
<view class="mp-header">
|
||
<text class="mp-subpage-back" @click="goBack">← 返回</text>
|
||
<text class="mp-header__title" style="margin-top: 16rpx">合同详情</text>
|
||
</view>
|
||
|
||
<view v-if="detail" class="mp-detail-hero">
|
||
<view class="mp-detail-hero__top">
|
||
<view>
|
||
<text class="mp-detail-hero__title">{{ dash(detail.contractName) }}</text>
|
||
<text class="mp-detail-hero__sub">{{ dash(detail.customerName) }}</text>
|
||
</view>
|
||
<text class="mp-tag" :class="'mp-tag--' + statusLabel(detail.status).tag">
|
||
{{ statusLabel(detail.status).text }}
|
||
</text>
|
||
</view>
|
||
<view class="mp-detail-hero__meta">
|
||
<text class="mp-detail-hero__chip">{{ formatMoney(detail.totalAmount ?? detail.amount) }}</text>
|
||
<text class="mp-detail-hero__chip">{{ dash(detail.ownerUserName) }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mp-block">
|
||
<text class="mp-block__title">基本信息</text>
|
||
<view class="mp-block__panel">
|
||
<view class="mp-kv"><text class="mp-kv__label">合同编号</text><text class="mp-kv__value">{{ dash(detail?.contractNo) }}</text></view>
|
||
<view class="mp-kv"><text class="mp-kv__label">合同类型</text><text class="mp-kv__value">{{ dash(detail?.contractType) }}</text></view>
|
||
<view class="mp-kv"><text class="mp-kv__label">签订日期</text><text class="mp-kv__value">{{ dash(detail?.signDate) }}</text></view>
|
||
<view class="mp-kv"><text class="mp-kv__label">开始日期</text><text class="mp-kv__value">{{ dash(detail?.startDate) }}</text></view>
|
||
<view class="mp-kv"><text class="mp-kv__label">结束日期</text><text class="mp-kv__value">{{ dash(detail?.endDate) }}</text></view>
|
||
<view class="mp-kv"><text class="mp-kv__label">审批状态</text><text class="mp-kv__value">{{ dash(detail?.approvalStatus) }}</text></view>
|
||
<view class="mp-kv"><text class="mp-kv__label">备注</text><text class="mp-kv__value">{{ dash(detail?.remark) }}</text></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="mp-block">
|
||
<text class="mp-block__title">说明</text>
|
||
<view class="mp-block__panel" style="padding: 28rpx">
|
||
<text style="font-size: 26rpx; color: var(--mp-muted)">
|
||
合同审批流与附件签署请在 Web 管理端处理；小程序提供现场查阅。
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|