94 lines
3.0 KiB
Vue
94 lines
3.0 KiB
Vue
<template>
|
||
<view class="h-full flex flex-col">
|
||
<view class="flex-shrink-0 px-10 pt-5 text-base font-semibold text-center truncate">{{ surery.name }}</view>
|
||
<view v-if="surery.description"
|
||
class="flex-shrink-0 px-10 mt-10 text-sm leading-normal text-gray line-clamp-2 text-center">
|
||
{{ surery.description }}
|
||
</view>
|
||
<view class="flex items-center text-gray text-sm px-10 mt-10">
|
||
<view v-if="surery.enableScore">
|
||
当前得分：<text class="text-primary text-base font-semibold min-w-5 inline-block">{{ allScore }}
|
||
</text>
|
||
</view>
|
||
<view class="ml-auto">
|
||
客户：<text class="text-black text-base font-semibold min-w-5 inline-block">{{ customerName }} </text>
|
||
</view>
|
||
</view>
|
||
<view class="flex-grow relative">
|
||
<scroll-view :scroll-y="true" class="absolute inset-0">
|
||
<view v-for="(quesiton, index) in list" :key="quesiton.id">
|
||
<view v-if="quesiton" class="my-4 text-base px-10 leading-normal">
|
||
<text v-if="quesiton.require" class="text-base text-red-500">*</text> {{ index + 1 }}、{{ quesiton.title }}
|
||
</view>
|
||
<view class="px-10">
|
||
<template v-if="quesiton.type === 'radio'">
|
||
<view v-for="(opt, idx) in quesiton.options" :key="opt.value" class="flex py-15 border-b"
|
||
:class="idx === 0 ? 'border-t' : ''">
|
||
<view class="flex-grow pl-4 text-gray leading-normal"
|
||
:class="quesiton.value && quesiton.value === opt.value ? 'text-primary' : ''">
|
||
{{ opt.label }}
|
||
<text v-if="surery.enableScore && opt.score >= 0">
|
||
（ {{ opt.score }}分）
|
||
</text>
|
||
</view>
|
||
<uni-icons v-if="quesiton.value && quesiton.value === opt.value" class="ml-1 text-primary flex-shrink-0"
|
||
color=" " type="checkbox-filled" size="24"></uni-icons>
|
||
</view>
|
||
</template>
|
||
<view v-else-if="quesiton.type === 'input'"
|
||
class="my-4 p-10 text-base leading-normal border rounded">
|
||
{{ quesiton.value || '' }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
name: 'Question',
|
||
props: {
|
||
customerName: { type: String, default: '' },
|
||
list: { type: Array, default: () => ([]) },
|
||
surery: { type: Object, default: () => ({}) }
|
||
},
|
||
computed: {
|
||
allScore() {
|
||
return this.list.reduce((score, item) => {
|
||
if (item.type === 'radio') {
|
||
const opt = item.options.find(i => i.value && i.value === item.value && item.value)
|
||
if (opt && opt.score >= 0) {
|
||
score = Math.floor(score * 100 + opt.score * 100) / 100
|
||
}
|
||
}
|
||
return score
|
||
}, 0)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.min-w-5 {
|
||
min-width: 40rpx
|
||
}
|
||
|
||
.pt-5 {
|
||
padding-top: 40rpx;
|
||
}
|
||
|
||
.my-4 {
|
||
margin-top: 32rpx;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.border-t {
|
||
border-top: 1px solid #eee;
|
||
}
|
||
|
||
.pl-4 {
|
||
padding-left: 30rpx;
|
||
}
|
||
</style>
|