<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="120px" class="mt10" :rules="rules" ref="formRef">
|
<el-form-item label="综合评分" prop="score">
|
<el-rate v-model="form.score" />
|
</el-form-item>
|
<el-form-item label="评价内容" prop="content">
|
<el-input v-model="form.content" type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入评价内容" />
|
</el-form-item>
|
</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, ref } from 'vue'
|
import { useRoute, useRouter } from 'vue-router'
|
import { fetchOrderDetail, submitEvaluate } from '@/api/tradeManage'
|
import { ElMessage, FormInstance } from 'element-plus'
|
|
const route = useRoute()
|
const router = useRouter()
|
const detail = reactive<any>({ items: [] })
|
const formRef = ref<FormInstance>()
|
const form = reactive({ score: 0, content: '' })
|
const rules = {
|
score: [{ required: true, message: '请评分', trigger: 'change' }],
|
content: [{ required: true, message: '请输入评价内容', trigger: 'blur' }],
|
}
|
|
onMounted(async () => {
|
const { data } = (await fetchOrderDetail({ id: route.params.id })) as any
|
Object.assign(detail, data || {})
|
})
|
|
const goBack = () => router.back()
|
const submit = async () => {
|
await formRef.value?.validate()
|
const { code } = (await submitEvaluate({ id: route.params.id, ...form })) as any
|
if (code === 200) {
|
ElMessage.success('提交成功')
|
router.back()
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.title { font-weight: 600; }
|
.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; }
|
</style>
|
