<template>
|
<div class="default-main">
|
<el-card shadow="never">
|
<div class="title">订单信息</div>
|
<el-descriptions :column="3" border class="mt10">
|
<el-descriptions-item label="订单编号">{{ detail.orderNo }}</el-descriptions-item>
|
<el-descriptions-item label="交易资源类型">{{ detail.resourceTypeName }}</el-descriptions-item>
|
<el-descriptions-item label="交易状态">{{ detail.statusName }}</el-descriptions-item>
|
<el-descriptions-item label="申请时间">{{ detail.applyTime }}</el-descriptions-item>
|
<el-descriptions-item label="单位">{{ detail.unitName }}</el-descriptions-item>
|
<el-descriptions-item label="用户名">{{ detail.userName }}</el-descriptions-item>
|
</el-descriptions>
|
</el-card>
|
|
<el-card class="mt15" shadow="never">
|
<div class="title">交易内容</div>
|
<el-table :data="detail.items" border class="mt10">
|
<el-table-column label="详情" min-width="280">
|
<template #default="{ row }">
|
<div>
|
<div>{{ row.name }}</div>
|
<div class="gray">客户对象：{{ row.customerTarget }}</div>
|
<div class="gray">并发节点数：{{ row.concurrentNodes }}</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="单价" prop="priceName" width="140" />
|
<el-table-column label="数量" prop="quantity" width="80" />
|
<el-table-column label="期限(年)" prop="period" width="120" />
|
</el-table>
|
|
<div class="total">
|
总计：<span class="price">{{ detail.pointTotal }}</span> 积分
|
<span class="ml20 price">{{ detail.cashTotal }}</span> 元
|
</div>
|
</el-card>
|
|
<el-card class="mt15" shadow="never">
|
<div class="title">交易信息备注</div>
|
<el-form :model="form" label-width="140px" class="mt10">
|
<div v-for="(item, i) in detail.items" :key="i" class="item-block">
|
<div class="sub-title">{{ item.name }}</div>
|
<el-row :gutter="10">
|
<el-col :span="6">
|
<el-form-item label="授权开始时间">
|
<el-date-picker v-model="form.items[i].start" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="授权结束时间">
|
<el-date-picker v-model="form.items[i].end" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="永久">
|
<el-checkbox v-model="form.items[i].forever" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="备注">
|
<el-input v-model="form.items[i].remark" placeholder="请输入备注" />
|
</el-form-item>
|
</div>
|
</el-form>
|
<div class="ba-center mt15">
|
<el-button @click="goBack">返回</el-button>
|
<el-button type="primary" @click="submit">提交评价</el-button>
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { onMounted, reactive } from 'vue'
|
import { useRoute, useRouter } from 'vue-router'
|
import { fetchOrderDetail, confirmTrade } from '@/api/tradeManage'
|
import { ElMessage } from 'element-plus'
|
|
const route = useRoute()
|
const router = useRouter()
|
const detail = reactive<any>({ items: [] })
|
const form = reactive<any>({ items: [] })
|
|
onMounted(async () => {
|
const { data } = (await fetchOrderDetail({ id: route.params.id })) as any
|
Object.assign(detail, data || {})
|
form.items = (detail.items || []).map(() => ({ start: '', end: '', forever: false, remark: '' }))
|
})
|
|
const goBack = () => router.back()
|
const submit = async () => {
|
const { code } = (await confirmTrade({ id: route.params.id, ...form })) as any
|
if (code === 200) {
|
ElMessage.success('提交成功')
|
router.back()
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.title { font-weight: 600; }
|
.sub-title { font-weight: 600; margin: 10px 0; }
|
.mt10 { margin-top: 10px; }
|
.mt15 { margin-top: 15px; }
|
.gray { color: #909399; font-size: 12px; }
|
.total { text-align: right; margin-top: 10px; }
|
.price { color: #f56c6c; font-weight: 600; }
|
.ml20 { margin-left: 20px; }
|
.item-block { padding: 10px; border: 1px solid #ebeef5; border-radius: 4px; margin-bottom: 10px; }
|
</style>
|
