Browse Source

style: 格式化代码以提高可读性

master
前端-胡立永 2 months ago
parent
commit
ba57cac647
2 changed files with 262 additions and 248 deletions
  1. +87
    -71
      api/examination/index.js
  2. +175
    -177
      otherPages/authentication/components/questionCard.vue

+ 87
- 71
api/examination/index.js View File

@ -3,112 +3,128 @@ import request from '@/utils/request'
// 伴宠师工作台-查询专业执照列表 // 伴宠师工作台-查询专业执照列表
export const getLicenseList = () => { export const getLicenseList = () => {
return request({
url: '/applet/examination/licenseList',
method: "get"
}).then(res => {
return res.data
})
return request({
url: '/applet/examination/licenseList',
method: "get"
}).then(res => {
return res.data
})
} }
export const getServiceList = (params) => { export const getServiceList = (params) => {
return request({
url: '/applet/config/serviceList',
method: "get",
return request({
url: '/applet/config/serviceList',
method: "get",
params params
}).then(res => {
return res.data?.map?.(item => {
const { id, title, video } = item
}).then(res => {
return res.data?.map?.(item => {
const {
id,
title,
video
} = item
return { id, title, video }
}) || []
})
return {
id,
title,
video
}
}) || []
})
} }
export const getTrainList = (params) => { export const getTrainList = (params) => {
return request({
url: '/applet/config/trainList',
method: "get",
return request({
url: '/applet/config/trainList',
method: "get",
params params
}).then(res => {
return res.data?.map?.(item => {
const { id, title, content } = item
}).then(res => {
return res.data?.map?.(item => {
const {
id,
title,
content
} = item
return { id, title, content }
}) || []
})
return {
id,
title,
content
}
}) || []
})
} }
// 伴宠师工作台-题目列表数据查询 // 伴宠师工作台-题目列表数据查询
export const getQuestionList = (params) => { export const getQuestionList = (params) => {
return request({
url: '/applet/examination/questionList',
method: "get",
return request({
url: '/applet/examination/questionList',
method: "get",
params params
}).then(res => {
return res.data
})
}).then(res => {
return res.data
})
} }
// 伴宠师工作台-根据题目id查询题目答案 // 伴宠师工作台-根据题目id查询题目答案
export const getQuestionOptions = (params) => { export const getQuestionOptions = (params) => {
return request({
url: '/applet/examination/insertUser',
method: "get",
return request({
url: '/applet/examination/insertUser',
method: "get",
params params
}).then(res => {
return res.data
})
}).then(res => {
return res.data
})
} }
// 伴宠师工作台-添加用户基本考核答案 // 伴宠师工作台-添加用户基本考核答案
export const addBaseAnswer = (data) => { export const addBaseAnswer = (data) => {
return request({
url: '/applet/examination/addBaseAnswer',
headers: {
isToken: true
},
method: 'post',
data
})
return request({
url: '/applet/examination/addBaseAnswer',
headers: {
isToken: true
},
method: 'post',
data
})
} }
// 伴宠师工作台-根据题目id查询基本考核答案 // 伴宠师工作台-根据题目id查询基本考核答案
export const answeBaseByQuestionId = (params) => { export const answeBaseByQuestionId = (params) => {
return request({
url: '/applet/examination/answeBaseByQuestionId',
headers: {
isToken: true
},
method: "get",
return request({
url: '/applet/examination/answeBaseByQuestionId',
headers: {
isToken: true
},
method: "get",
params params
}).then(res => {
return res.data?.pop() || {}
})
}).then(res => {
return res.data?.pop() || {}
})
} }
// 伴宠师工作台-添加用户培训考核答案 // 伴宠师工作台-添加用户培训考核答案
export const addTrainAnswer = (data) => { export const addTrainAnswer = (data) => {
return request({
url: '/applet/examination/addTrainAnswer',
headers: {
isToken: true
},
method: 'post',
data
})
return request({
url: '/applet/examination/addTrainAnswer',
headers: {
isToken: true
},
method: 'post',
data
})
} }
// 伴宠师工作台-根据题目id查询培训考核答案 // 伴宠师工作台-根据题目id查询培训考核答案
export const answeTrainByQuestionId = (params) => { export const answeTrainByQuestionId = (params) => {
return request({
url: '/applet/examination/answeTrainByQuestionId',
headers: {
isToken: true
},
method: "get",
return request({
url: '/applet/examination/answeTrainByQuestionId',
headers: {
isToken: true
},
method: "get",
params params
}).then(res => {
return res.data?.pop() || {}
})
}
}).then(res => {
return res.data?.pop() || {}
})
}

+ 175
- 177
otherPages/authentication/components/questionCard.vue View File

@ -1,187 +1,185 @@
<template> <template>
<view class="mt32 question__view" :class="[props.mode]">
<view class="size-28 mb20 question">
{{ props.data.title }}
<!-- {{ `${props.index + 1}${props.data.title}` }} -->
</view>
<template v-if="props.mode === 'edit'">
<template v-if="props.data.options?.length">
<view class="size-28 option"
v-for="(option, oIdx) in props.data.options"
:key="`${props.index}-option-${oIdx}`"
:class="[value === option.id ? 'is-selected' : '']"
@click="onChange(option.id)"
>
{{ option.title }}
</view>
</template>
<template v-else>
<view class="textarea">
<textarea
v-model="value"
placeholder="请输入您的答案,不得低于700个字"
:rows="10"
@blur="onChange($event.detail.value)"
></textarea>
</view>
</template>
</template>
<template v-else>
<template v-if="props.data.options?.length">
<view class="size-28 option"
v-for="(option, oIdx) in props.data.options"
:key="`${props.index}-option-${oIdx}`"
:class="[
<view class="mt32 question__view" :class="[props.mode]">
<view class="size-28 mb20 question">
{{ props.data.title }}
<!-- {{ `${props.index + 1}${props.data.title}` }} -->
</view>
<template v-if="props.mode === 'edit'">
<template v-if="props.data.options?.length">
<view class="size-28 option" v-for="(option, oIdx) in props.data.options"
:key="`${props.index}-option-${oIdx}`" :class="[value === option.id ? 'is-selected' : '']"
@click="onChange(option.id)">
{{ option.title }}
</view>
</template>
<template v-else>
<view class="textarea">
<textarea v-model="value" placeholder="请输入您的答案,不得低于700个字" :rows="10"
@blur="onChange($event.detail.value)"></textarea>
</view>
</template>
</template>
<template v-else>
<template v-if="props.data.options?.length">
<view class="size-28 option" v-for="(option, oIdx) in props.data.options"
:key="`${props.index}-option-${oIdx}`" :class="[
props.data.answer === option.id ? 'is-correct' : '', props.data.answer === option.id ? 'is-correct' : '',
props.data.value === option.id && props.data.answer !== option.id ? 'is-error' : '', props.data.value === option.id && props.data.answer !== option.id ? 'is-error' : '',
]"
>
{{ option.title }}
<view class="icon icon-correct">
<up-icon name="checkmark" color="#05C160" size="35rpx"></up-icon>
</view>
<view class="icon icon-error">
<up-icon name="close" color="#FF2A2A" size="35rpx"></up-icon>
</view>
</view>
</template>
<template v-else>
<view class="textarea">
<view>{{ props.data.value }}</view>
<view class="highlight">{{ props.data.answer }}</view>
</view>
</template>
</template>
</view>
]">
{{ option.title }}
<view class="icon icon-correct">
<up-icon name="checkmark" color="#05C160" size="35rpx"></up-icon>
</view>
<view class="icon icon-error">
<up-icon name="close" color="#FF2A2A" size="35rpx"></up-icon>
</view>
</view>
</template>
<template v-else>
<view class="textarea">
<view>{{ props.data.value }}</view>
<view class="highlight">{{ props.data.answer }}</view>
</view>
</template>
</template>
</view>
</template> </template>
<script setup> <script setup>
import { computed, watch } from 'vue'
import { addBaseAnswer, addTrainAnswer } from '@/api/examination'
import { store } from '@/store'
const userId = computed(() => {
return store.state.user.userInfo.userId
})
const props = defineProps({
index: {
type: Number,
default: null,
},
data: {
type: Object,
default() {
return {}
}
},
modelValue: {
type: String | Number,
default: null,
},
mode: {
type: String,
default: 'edit', // edit | display
},
type: {
type: String,
default: null, // '' | ''
}
})
const emit = defineEmits(['update:modelValue'])
const value = computed({
set(val) {
emit('update:modelValue', val)
},
get() {
return props.modelValue
}
})
const onChange = (val) => {
value.value = val
const data = {
userId: userId.value,
questionId: props.data.id,
}
if (props.type === '基本') {
data.answerId = val
addBaseAnswer(data)
} else if (props.type === '培训') {
data.answer = val
addTrainAnswer(data)
}
}
import {
computed,
watch
} from 'vue'
import {
addBaseAnswer,
addTrainAnswer
} from '@/api/examination'
import {
store
} from '@/store'
const userId = computed(() => {
return store.state.user.userInfo.userId
})
const props = defineProps({
index: {
type: Number,
default: null,
},
data: {
type: Object,
default () {
return {}
}
},
modelValue: {
type: String | Number,
default: null,
},
mode: {
type: String,
default: 'edit', // edit | display
},
type: {
type: String,
default: null, // '' | ''
}
})
const emit = defineEmits(['update:modelValue'])
const value = computed({
set(val) {
emit('update:modelValue', val)
},
get() {
return props.modelValue
}
})
const onChange = (val) => {
value.value = val
const data = {
userId: userId.value,
questionId: props.data.id,
}
if (props.type === '基本') {
data.answerId = val
addBaseAnswer(data)
} else if (props.type === '培训') {
data.answer = val
addTrainAnswer(data)
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.question {
color: #000000;
}
.option {
background-color: #F3F3F3;
color: #707070;
line-height: 37rpx;
padding: 23rpx;
border-radius: 28rpx;
position: relative;
& + & {
margin-top: 20rpx;
}
.icon {
position: absolute;
right: 45rpx;
bottom: 23rpx;
display: none;
}
}
.textarea {
background-color: #F3F3F3;
padding: 23rpx;
border-radius: 16rpx;
.highlight {
color: #FF2A2A;
font-size: 28rpx;
}
}
.question__view.edit {
.option.is-selected {
background-color: rgba($color: #FFBF60, $alpha: 0.22);
color: #FFBF60;
}
}
.question__view.display {
.option {
&.is-correct {
background-color: rgba($color: #05C160, $alpha: 0.08);
color: #05C160;
.icon-correct {
display: block;
}
}
&.is-error {
background-color: rgba($color: #FFEBCE, $alpha: 0.36);
color: #FF2A2A;
.icon-error {
display: block;
}
}
}
}
.question {
color: #000000;
}
.option {
background-color: #F3F3F3;
color: #707070;
line-height: 37rpx;
padding: 23rpx;
border-radius: 28rpx;
position: relative;
&+& {
margin-top: 20rpx;
}
.icon {
position: absolute;
right: 45rpx;
bottom: 23rpx;
display: none;
}
}
.textarea {
background-color: #F3F3F3;
padding: 23rpx;
border-radius: 16rpx;
.highlight {
color: #FF2A2A;
font-size: 28rpx;
}
}
.question__view.edit {
.option.is-selected {
background-color: rgba($color: #FFBF60, $alpha: 0.22);
color: #FFBF60;
}
}
.question__view.display {
.option {
&.is-correct {
background-color: rgba($color: #05C160, $alpha: 0.08);
color: #05C160;
.icon-correct {
display: block;
}
}
&.is-error {
background-color: rgba($color: #FFEBCE, $alpha: 0.36);
color: #FF2A2A;
.icon-error {
display: block;
}
}
}
}
</style> </style>

Loading…
Cancel
Save