78 lines
2.9 KiB
Vue
78 lines
2.9 KiB
Vue
<script setup>
|
||
import { ref } from 'vue'
|
||
import { onLoad, onShow } from '@dcloudio/uni-app'
|
||
import { getQuote } 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('quoteStatus', s)
|
||
|
||
const goBack = () => {
|
||
uni.navigateBack({
|
||
fail: () => uni.navigateTo({ url: PAGE_PATHS.crmQuoteList })
|
||
})
|
||
}
|
||
|
||
const load = async () => {
|
||
if (!id.value) return
|
||
try {
|
||
detail.value = await getQuote(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.quoteTitle || detail.quoteNo) }}</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?.quoteNo) }}</text></view>
|
||
<view class="mp-kv"><text class="mp-kv__label">报价日期</text><text class="mp-kv__value">{{ dash(detail?.quoteDate) }}</text></view>
|
||
<view class="mp-kv"><text class="mp-kv__label">有效期至</text><text class="mp-kv__value">{{ dash(detail?.validDate || detail?.expireDate) }}</text></view>
|
||
<view class="mp-kv"><text class="mp-kv__label">关联商机</text><text class="mp-kv__value">{{ dash(detail?.opportunityName) }}</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>
|