<template>
|
<div class="test-container">
|
<h2>客户满意度评价功能测试</h2>
|
|
<div class="test-section">
|
<h3>1. 生成二维码测试</h3>
|
<el-form :inline="true">
|
<el-form-item label="车牌号">
|
<el-input v-model="testVehicleNo" placeholder="请输入车牌号" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="generateQrcode">生成二维码</el-button>
|
</el-form-item>
|
</el-form>
|
|
<div v-if="qrcodeInfo" class="qrcode-result">
|
<p><strong>二维码URL:</strong> {{ qrcodeInfo.qrcodeUrl }}</p>
|
<p><strong>二维码内容:</strong> {{ qrcodeInfo.qrcodeContent }}</p>
|
<p><strong>二维码图片:</strong> {{ qrcodeInfo.qrcodeImage }}</p>
|
</div>
|
</div>
|
|
<div class="test-section">
|
<h3>2. 评价维度配置测试</h3>
|
<el-button type="primary" @click="loadDimensions">加载评价维度</el-button>
|
|
<div v-if="dimensions.length > 0" class="dimensions-result">
|
<h4>评价维度列表:</h4>
|
<ul>
|
<li v-for="dimension in dimensions" :key="dimension.dimensionId">
|
{{ dimension.dimensionName }} - {{ dimension.dimensionType }}
|
<span v-if="dimension.isRequired === '1'">(必填)</span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
|
<div class="test-section">
|
<h3>3. 评价提交测试</h3>
|
<el-form :model="testEvaluation" label-width="100px">
|
<el-form-item label="车牌号">
|
<el-input v-model="testEvaluation.vehicleNo" />
|
</el-form-item>
|
<el-form-item label="客户姓名">
|
<el-input v-model="testEvaluation.customerName" />
|
</el-form-item>
|
<el-form-item label="客户手机">
|
<el-input v-model="testEvaluation.customerPhone" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="submitTestEvaluation">提交测试评价</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<div class="test-section">
|
<h3>4. 直接访问评价页面</h3>
|
<p>访问地址: <a :href="evaluationUrl" target="_blank">{{ evaluationUrl }}</a></p>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { generateQrcode, getEvaluationDimensions, submitEvaluation } from "@/api/evaluation";
|
|
export default {
|
name: "EvaluationTest",
|
data() {
|
return {
|
testVehicleNo: "粤A12345",
|
qrcodeInfo: null,
|
dimensions: [],
|
testEvaluation: {
|
vehicleNo: "粤A12345",
|
customerName: "测试用户",
|
customerPhone: "13800138000",
|
evaluationDetails: [
|
{
|
dimensionId: 1,
|
score: 5
|
},
|
{
|
dimensionId: 2,
|
score: 4
|
},
|
{
|
dimensionId: 3,
|
score: 5
|
},
|
{
|
dimensionId: 4,
|
score: 4
|
}
|
]
|
}
|
};
|
},
|
computed: {
|
evaluationUrl() {
|
return `${window.location.origin}/evaluation?vehicle=${this.testVehicleNo}`;
|
}
|
},
|
methods: {
|
async generateQrcode() {
|
try {
|
const response = await generateQrcode(this.testVehicleNo);
|
if (response.code === 200) {
|
this.qrcodeInfo = response.data;
|
this.$message.success("二维码生成成功");
|
} else {
|
this.$message.error(response.msg || "生成失败");
|
}
|
} catch (error) {
|
console.error("生成二维码失败:", error);
|
this.$message.error("生成二维码失败");
|
}
|
},
|
|
async loadDimensions() {
|
try {
|
const response = await getEvaluationDimensions();
|
if (response.code === 200) {
|
this.dimensions = response.data;
|
this.$message.success("评价维度加载成功");
|
} else {
|
this.$message.error(response.msg || "加载失败");
|
}
|
} catch (error) {
|
console.error("加载评价维度失败:", error);
|
this.$message.error("加载评价维度失败");
|
}
|
},
|
|
async submitTestEvaluation() {
|
try {
|
const response = await submitEvaluation(this.testEvaluation);
|
if (response.code === 200) {
|
this.$message.success(response.msg || "评价提交成功");
|
} else {
|
this.$message.error(response.msg || "提交失败");
|
}
|
} catch (error) {
|
console.error("提交评价失败:", error);
|
this.$message.error("提交评价失败");
|
}
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.test-container {
|
max-width: 800px;
|
margin: 0 auto;
|
padding: 20px;
|
}
|
|
.test-section {
|
margin-bottom: 30px;
|
padding: 20px;
|
border: 1px solid #e4e7ed;
|
border-radius: 6px;
|
background-color: #fafafa;
|
}
|
|
.test-section h3 {
|
margin-top: 0;
|
color: #333;
|
}
|
|
.qrcode-result, .dimensions-result {
|
margin-top: 15px;
|
padding: 15px;
|
background-color: white;
|
border-radius: 4px;
|
border: 1px solid #e4e7ed;
|
}
|
|
.dimensions-result ul {
|
margin: 10px 0;
|
padding-left: 20px;
|
}
|
|
.dimensions-result li {
|
margin-bottom: 5px;
|
}
|
</style>
|
