148 lines
4.1 KiB
Vue
148 lines
4.1 KiB
Vue
<template>
|
||
<view class="min-height bg-main-light p-20">
|
||
<HeaderItem title="法律计算器"/>
|
||
<TitleItem :title="title"/>
|
||
<view class="mt-25 card flex flex-col justify-start items-start">
|
||
<view v-for="(item, index) in list" :key="index"
|
||
class="flex justify-start items-center py-15 border-bottom text-25 w-100p">
|
||
<text>{{ item.title }}</text>
|
||
<template v-if="item.type === 'single'">
|
||
<view class="tag"
|
||
:class="[list[index].userValue === answer ? 'tag-active' : '']"
|
||
@click="list[index].userValue = answer"
|
||
v-for="(answer, answerIndex) in JSON.parse(item.answer)" :key="answerIndex">{{ answer }}
|
||
</view>
|
||
</template>
|
||
<template v-else-if="item.type === 'fill'">
|
||
<u-input v-model="list[index].userValue" border="bottom"/>
|
||
</template>
|
||
</view>
|
||
<view class="text-25 text-main mt-25">温馨提示：实际情况复杂，计算结果仅供参考</view>
|
||
</view>
|
||
<view class="mt-25">
|
||
<u-button :customStyle="{background: LINEAR(), width: '300rpx', color: 'white'}" shape="circle" @click="doCal">
|
||
计算
|
||
</u-button>
|
||
</view>
|
||
<view class="mt-25">
|
||
<view v-if="loading" class="p-15 flex justify-center items-center">
|
||
<u-loading-icon mode="semicircle" :color="MAIN()"></u-loading-icon>
|
||
</view>
|
||
<zero-markdown-view v-else :markdown="returnContent"></zero-markdown-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {listLawLegalCalConfig} from "@/api/common";
|
||
import HeaderItem from "@/components/HeaderItem.vue";
|
||
import TitleItem from "@/components/TitleItem.vue";
|
||
import {LINEAR, MAIN} from "@/config/color";
|
||
import {WS_API} from "@/config";
|
||
import {getUserInfo} from "@/util/user";
|
||
import {sendChatReq} from "@/api/lawOrg";
|
||
|
||
export default {
|
||
name: "calDetail",
|
||
components: {TitleItem, HeaderItem},
|
||
data() {
|
||
return {
|
||
list: [],
|
||
title: '',
|
||
returnContent: '',
|
||
loading: false
|
||
}
|
||
},
|
||
methods: {
|
||
MAIN() {
|
||
return MAIN
|
||
},
|
||
LINEAR() {
|
||
return LINEAR
|
||
},
|
||
async getList(typeId) {
|
||
const {data} = await listLawLegalCalConfig({typeId})
|
||
this.list = data.map(item => {
|
||
if (item.type === 'single') {
|
||
const answer = JSON.parse(item.answer)
|
||
item.userValue = answer[0]
|
||
} else if (item.type === 'fill') {
|
||
item.userValue = ''
|
||
} else {
|
||
item.userValue = []
|
||
}
|
||
return item
|
||
})
|
||
},
|
||
doCal() {
|
||
this.returnContent = ''
|
||
let query = `在广西，我想计算${this.title}`
|
||
for (let i = 0; i < this.list.length; i++) {
|
||
const item = this.list[i]
|
||
if (!item.userValue || item.userValue.length === 0) {
|
||
uni.showToast({
|
||
title: `${item.title}不能为空`,
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
query += `${item.title}: ${item.userValue};`
|
||
}
|
||
uni.connectSocket({
|
||
url: `${WS_API}/${getUserInfo().uid}`,
|
||
success: () => {
|
||
this.loading = true
|
||
sendChatReq({
|
||
query,
|
||
user: getUserInfo().uid
|
||
}).finally(() => {
|
||
uni.closeSocket()
|
||
})
|
||
}
|
||
})
|
||
uni.onSocketMessage(res => {
|
||
if (res.data === '连接成功') return
|
||
this.loading = false
|
||
const aiData = JSON.parse(res.data)
|
||
if (aiData.answer !== '__END__') this.returnContent += aiData.answer
|
||
this.scrollToBottom()
|
||
})
|
||
},
|
||
scrollToBottom() {
|
||
setTimeout(() => {
|
||
this.$nextTick(() => {
|
||
uni.pageScrollTo({
|
||
scrollTop: 99999,
|
||
duration: 0
|
||
})
|
||
})
|
||
}, 100)
|
||
}
|
||
},
|
||
onLoad({id, title}) {
|
||
this.title = title
|
||
this.getList(id)
|
||
},
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss" scoped>
|
||
.tag {
|
||
border: 1px dashed #999;
|
||
padding: 10rpx;
|
||
border-radius: 15rpx;
|
||
color: #999;
|
||
font-size: 25rpx;
|
||
width: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 10rpx;
|
||
}
|
||
|
||
.tag-active {
|
||
color: #3c9cff !important;
|
||
border-color: #3c9cff !important;
|
||
}
|
||
</style> |