flat: 优化语音
This commit is contained in:
史典卓
@@ -1,8 +1,197 @@
|
||||
<template>
|
||||
<uni-popup ref="popup" type="bottom" borderRadius="12px 12px 0 0" background-color="#F6F6F6">
|
||||
<view class="feeback">
|
||||
<view class="titile">反馈</view>
|
||||
<view class="pop-h3">针对问题</view>
|
||||
<view class="pop-content">
|
||||
<view
|
||||
class="item"
|
||||
:class="{ active: item.check }"
|
||||
@click="toggleCheck(item.id)"
|
||||
v-for="item in wt"
|
||||
:key="item.id"
|
||||
>
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="pop-h3">针对回答</view>
|
||||
<view class="pop-content">
|
||||
<view
|
||||
class="item"
|
||||
:class="{ active: item.check }"
|
||||
@click="toggleCheck(item.id)"
|
||||
v-for="item in hd"
|
||||
:key="item.id"
|
||||
>
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="pop-h3">我要补充</view>
|
||||
<view class="supplement">
|
||||
<textarea v-model="inputText" cols="30" rows="10"></textarea>
|
||||
</view>
|
||||
<view class="btn button-click" @click="send">提交</view>
|
||||
<view class="close-btn" @click="close"></view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, inject, defineEmits } from 'vue';
|
||||
const emit = defineEmits(['onSend']);
|
||||
const { $api } = inject('globalFunction');
|
||||
const popup = ref(null);
|
||||
const inputText = ref('');
|
||||
const wt = ref([
|
||||
{ label: '上下文错误', id: 1, check: false },
|
||||
{ label: '理解错误', id: 2, check: false },
|
||||
{ label: '未识别问题中的错误', id: 3, check: false },
|
||||
]);
|
||||
const hd = ref([
|
||||
{ label: '违法有害', id: 11, check: false },
|
||||
{ label: '内容不专业', id: 12, check: false },
|
||||
{ label: '推理错误', id: 13, check: false },
|
||||
{ label: '计算错误', id: 14, check: false },
|
||||
{ label: '内容不完整', id: 15, check: false },
|
||||
{ label: '事实错误', id: 16, check: false },
|
||||
]);
|
||||
|
||||
function open() {
|
||||
resetCheck();
|
||||
inputText.value = '';
|
||||
popup.value.open();
|
||||
}
|
||||
|
||||
function close() {
|
||||
popup.value.close();
|
||||
}
|
||||
|
||||
function send() {
|
||||
const text = getLabel();
|
||||
if (text) {
|
||||
emit('onSend', text);
|
||||
// close();
|
||||
} else {
|
||||
$api.msg('清输入反馈内容');
|
||||
}
|
||||
}
|
||||
|
||||
function getLabel() {
|
||||
const wtArr = wt.value.filter((item) => item.check).map((item) => item.label);
|
||||
const hdArr = hd.value.filter((item) => item.check).map((item) => item.label);
|
||||
let str = '';
|
||||
wtArr.length ? (str += `问题：${wtArr.join(',')}. `) : '';
|
||||
hdArr.length ? (str += `回答：${hdArr.join(',')}. `) : '';
|
||||
inputText.value ? (str += `描述：${inputText.value}. `) : '';
|
||||
return str;
|
||||
}
|
||||
|
||||
function resetCheck() {
|
||||
wt.value = wt.value.map((item) => {
|
||||
return { ...item, check: false }; // 创建新对象，确保更新响应式
|
||||
});
|
||||
hd.value = hd.value.map((item) => {
|
||||
return { ...item, check: false }; // 创建新对象，确保更新响应式
|
||||
});
|
||||
}
|
||||
|
||||
function toggleCheck(id) {
|
||||
if (id < 10) {
|
||||
const newWt = wt.value.map((item) => {
|
||||
if (item.id === id) {
|
||||
return { ...item, check: !item.check };
|
||||
}
|
||||
return item;
|
||||
});
|
||||
wt.value = newWt;
|
||||
} else {
|
||||
const newHd = hd.value.map((item) => {
|
||||
if (item.id === id) {
|
||||
return { ...item, check: !item.check };
|
||||
}
|
||||
return item;
|
||||
});
|
||||
hd.value = newHd;
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open, close });
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
<style lang="stylus" scoped>
|
||||
.feeback
|
||||
padding: 38rpx 32rpx;
|
||||
.titile
|
||||
font-weight: 500;
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
line-height: 42rpx;
|
||||
text-align: center;
|
||||
margin-bottom: 20rpx;
|
||||
.pop-h3
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
color: #000000;
|
||||
line-height: 38rpx;
|
||||
text-align: left;
|
||||
padding: 8rpx 0
|
||||
margin-top: 32rpx
|
||||
.pop-content
|
||||
.item
|
||||
width: fit-content;
|
||||
height: 80rpx;
|
||||
background: #E8EAEE;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
padding: 0 36rpx
|
||||
border: 2rpx solid transparent;
|
||||
display: inline-block
|
||||
margin-right: 28rpx
|
||||
margin-top: 28rpx
|
||||
.active
|
||||
border: 2rpx solid #256BFA;
|
||||
color: #256BFA;
|
||||
.supplement
|
||||
height: 200rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||||
margin-top: 28rpx
|
||||
padding: 20rpx 24rpx
|
||||
.btn
|
||||
height: 90rpx;
|
||||
background: #256BFA;
|
||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
color: #FFFFFF;
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
margin-top: 62rpx
|
||||
.close-btn
|
||||
position: absolute;
|
||||
right: 32rpx;
|
||||
top: 32rpx;
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
.close-btn::before
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
content: '';
|
||||
width: 4rpx;
|
||||
height: 28rpx;
|
||||
border-radius: 2rpx
|
||||
background: #5A5A68;
|
||||
transform: translate(50%, -50%) rotate(-45deg) ;
|
||||
.close-btn::after
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
content: '';
|
||||
width: 4rpx;
|
||||
height: 28rpx;
|
||||
border-radius: 2rpx
|
||||
background: #5A5A68;
|
||||
transform: translate(50%, -50%) rotate(45deg)
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user