7 changed files with 338 additions and 82 deletions
@ -0,0 +1,189 @@ |
|||
<template> |
|||
<u-navbar :title="titleData.title" placeholder="true" bg-color="#F1F3F9" :auto-back="true"></u-navbar> |
|||
<view class="container"> |
|||
<u-form labelPosition="top"> |
|||
<u-form-item :label="item.title" :prop="item.type" v-for="(item,index) in titleData.question" :key="index"> |
|||
<u-input v-model="item.answer" v-if="item.type === 'input'" /> |
|||
<u-textarea v-model="item.answer" v-if="item.type === 'textarea'" placeholder="请输入内容" |
|||
autoHeight></u-textarea> |
|||
<u-radio-group v-model="item.answer" v-if="item.type === 'radio'" placement="column" |
|||
@change="groupChange"> |
|||
<u-radio :customStyle="{marginBottom: '16rpx'}" v-for="(item, index) in item.choose" :key="index" |
|||
:label="item.name" :name="item.name"> |
|||
</u-radio> |
|||
</u-radio-group> |
|||
<u-checkbox-group v-model="item.answer" v-if="item.type === 'checkbox'" placement="column" |
|||
> |
|||
<u-checkbox :customStyle="{marginBottom: '16rpx'}" v-for="(item, index) in item.choose" :key="index" |
|||
:label="item.name" :name="item.name"> |
|||
</u-checkbox> |
|||
</u-checkbox-group> |
|||
</u-form-item> |
|||
</u-form> |
|||
</view> |
|||
<view class="baombut"> |
|||
<view class="buttt" @click="submit"> |
|||
确认提交 |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
onLoad |
|||
} from '@dcloudio/uni-app' |
|||
import { |
|||
ref |
|||
} from 'vue' |
|||
import { |
|||
specialSign |
|||
} from '@/api/index' |
|||
|
|||
const titleData = ref({}) |
|||
const ztid = ref('') |
|||
|
|||
|
|||
function processCheckboxAnswers(arr) { |
|||
return arr.map(item => { |
|||
// 基础对象结构 |
|||
const result = { id: item.id }; |
|||
|
|||
// 处理answer属性 |
|||
if (item.type === 'checkbox' && typeof item.answer === 'object') { |
|||
// 将对象值转为逗号分隔的字符串(带中文引号) |
|||
result.answer = Object.values(item.answer) |
|||
.map(val => `'${val}'`) |
|||
.join(','); |
|||
} else { |
|||
// 非checkbox类型或answer非对象的情况 |
|||
result.answer = item.answer; |
|||
} |
|||
|
|||
return result; |
|||
}); |
|||
} |
|||
|
|||
// 提交方法 |
|||
function submit() { |
|||
let istrue = true |
|||
titleData.value.question.forEach((ele) => { |
|||
if (ele.answer === '' || !ele.answer) { |
|||
uni.showToast({ |
|||
title: '请填写选择完整', |
|||
duration: 3000, |
|||
icon:'error' |
|||
}) |
|||
istrue = false |
|||
} |
|||
}) |
|||
if(istrue) { |
|||
let param = { |
|||
special_list_id: ztid.value, |
|||
form_id: titleData.value.form_id, |
|||
answer: processCheckboxAnswers(titleData.value.question) |
|||
} |
|||
specialSign(param).then((res)=> { |
|||
if(res.code === 1) { |
|||
uni.showToast({ |
|||
title: '提交成功!', |
|||
duration: 2000 |
|||
}) |
|||
setTimeout(()=> { |
|||
uni.navigateBack() |
|||
},2000) |
|||
} else { |
|||
uni.showToast({ |
|||
title: res.msg, |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
|
|||
onLoad(async (param) => { |
|||
ztid.value = param.id |
|||
titleData.value = JSON.parse(param.form) |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background-color: #F1F3F9; |
|||
height: calc(100vh - 350rpx); |
|||
width: 100%; |
|||
padding: 0 48rpx; |
|||
box-sizing: border-box; |
|||
overflow-y: auto; |
|||
|
|||
.titlepart { |
|||
display: flex; |
|||
align-items: baseline; |
|||
margin-bottom: 40rpx; |
|||
|
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-weight: 550; |
|||
font-size: 36rpx; |
|||
color: #0c092a; |
|||
margin-left: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.text { |
|||
margin-top: 32rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 300; |
|||
line-height: 60rpx; |
|||
letter-spacing: normal; |
|||
color: #3d3d3d; |
|||
} |
|||
|
|||
.fbtime { |
|||
font-family: Roboto; |
|||
font-size: 28rpx; |
|||
font-weight: normal; |
|||
line-height: 142rpx; |
|||
letter-spacing: normal; |
|||
/* 外部/SCMP Grey/nobel */ |
|||
/* 样式描述:06 Small Grey txt */ |
|||
color: #a1a1a1; |
|||
} |
|||
|
|||
:deep(.u-input) { |
|||
background-color: #FFFFFF; |
|||
} |
|||
|
|||
:deep(.u-form-item__body__left__content__label) { |
|||
white-space: nowrap; |
|||
font-family: Source Han Sans; |
|||
font-size: 28rpx; |
|||
color: #0C092A; |
|||
} |
|||
} |
|||
|
|||
.baombut { |
|||
width: 100%; |
|||
padding: 36rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.3); |
|||
background: #FFFFFF; |
|||
position: fixed; |
|||
bottom: 0; |
|||
|
|||
.buttt { |
|||
width: 574rpx; |
|||
height: 96rpx; |
|||
border-radius: 248rpx; |
|||
background: linear-gradient(90deg, #007FFF 0%, #99CCFF 100%); |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
color: #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,83 +1,128 @@ |
|||
<template> |
|||
<u-navbar |
|||
:title="titleData.special_id_name ? '“' + titleData.special_id_name + '”' + '专题' : ''" |
|||
placeholder="true" |
|||
bg-color="#F1F3F9" |
|||
:auto-back="true" |
|||
></u-navbar> |
|||
<view class="container"> |
|||
<view class="titlepart"> |
|||
<image style="width: 8rpx; height: 1em" src="@/static/img/Fill1.png" mode=""></image> |
|||
<image style="width: 8rpx; height: 1em; margin-left: 6rpx" src="@/static/img/Fill2.png" mode=""></image> |
|||
<text class="title">{{ titleData.title }}</text> |
|||
</view> |
|||
<!-- <image style="width: 100%;height: 436rpx;margin-top: 48rpx;" src="@/static/img/Bitmap.png" mode=""></image> --> |
|||
<rich-text :nodes="titleData.content"></rich-text> |
|||
<view class="fbtime">{{ titleData.create_time }}</view> |
|||
</view> |
|||
<u-navbar :title="titleData.special_id_name ? '“' + titleData.special_id_name + '”' + '专题' : ''" placeholder="true" |
|||
bg-color="#F1F3F9" :auto-back="true"></u-navbar> |
|||
<view class="container"> |
|||
<view class="titlepart"> |
|||
<image style="width: 8rpx; height: 1em" src="@/static/img/Fill1.png" mode=""></image> |
|||
<image style="width: 8rpx; height: 1em; margin-left: 6rpx" src="@/static/img/Fill2.png" mode=""></image> |
|||
<text class="title">{{ titleData.title }}</text> |
|||
</view> |
|||
<!-- <image style="width: 100%;height: 436rpx;margin-top: 48rpx;" src="@/static/img/Bitmap.png" mode=""></image> --> |
|||
<rich-text :nodes="titleData.content"></rich-text> |
|||
<view class="fbtime">{{ titleData.create_time }}</view> |
|||
</view> |
|||
<view class="baombut" v-if="titleData.form"> |
|||
<view class="buttt" @click="gotij(titleData.id, titleData.form)"> |
|||
立即报名 |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { onLoad } from '@dcloudio/uni-app' |
|||
import { ref } from 'vue' |
|||
import { specialListInfo, bannerInfo } from '@/api/index' |
|||
import { |
|||
onLoad |
|||
} from '@dcloudio/uni-app' |
|||
import { |
|||
ref |
|||
} from 'vue' |
|||
import { |
|||
specialListInfo, |
|||
bannerInfo |
|||
} from '@/api/index' |
|||
|
|||
const titleData = ref([]) |
|||
const titleData = ref([]) |
|||
|
|||
onLoad(async (param) => { |
|||
if (param.type === 'zt') { |
|||
const res = await specialListInfo(param.id) |
|||
if (res.code === 1) { |
|||
titleData.value = res.data |
|||
} |
|||
} else { |
|||
const res = await bannerInfo(param.id) |
|||
if (res.code === 1) { |
|||
console.log(res) |
|||
titleData.value = res.data |
|||
} |
|||
} |
|||
titleData.value.content = titleData.value.content.replace(/<img/g, '<img style="width: 100%; max-width: 100%; height: auto;"') |
|||
}) |
|||
const gotij = (id,item) => { |
|||
uni.navigateTo({ |
|||
url: '/pages/index/subform?form='+JSON.stringify(item)+ '&id='+id |
|||
}) |
|||
} |
|||
|
|||
onLoad(async (param) => { |
|||
if (param.type === 'zt') { |
|||
const res = await specialListInfo(param.id) |
|||
if (res.code === 1) { |
|||
titleData.value = res.data |
|||
} |
|||
} else { |
|||
const res = await bannerInfo(param.id) |
|||
if (res.code === 1) { |
|||
console.log(res) |
|||
titleData.value = res.data |
|||
} |
|||
} |
|||
titleData.value.content = titleData.value.content.replace(/<img/g, |
|||
'<img style="width: 100%; max-width: 100%; height: auto;"') |
|||
}) |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.container { |
|||
background-color: #ffffff; |
|||
height: calc(100vh - 182rpx); |
|||
width: 100%; |
|||
padding: 48rpx; |
|||
box-sizing: border-box; |
|||
.titlepart { |
|||
display: flex; |
|||
align-items: baseline; |
|||
margin-bottom: 40rpx; |
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-weight: 550; |
|||
font-size: 36rpx; |
|||
color: #0c092a; |
|||
margin-left: 20rpx; |
|||
} |
|||
} |
|||
.text { |
|||
margin-top: 32rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 300; |
|||
line-height: 60rpx; |
|||
letter-spacing: normal; |
|||
color: #3d3d3d; |
|||
} |
|||
.fbtime { |
|||
font-family: Roboto; |
|||
font-size: 28rpx; |
|||
font-weight: normal; |
|||
line-height: 142rpx; |
|||
letter-spacing: normal; |
|||
/* 外部/SCMP Grey/nobel */ |
|||
/* 样式描述:06 Small Grey txt */ |
|||
color: #a1a1a1; |
|||
} |
|||
} |
|||
.container { |
|||
background-color: #ffffff; |
|||
height: calc(100vh - 350rpx); |
|||
width: 100%; |
|||
padding: 48rpx; |
|||
box-sizing: border-box; |
|||
overflow-y: auto; |
|||
|
|||
.titlepart { |
|||
display: flex; |
|||
align-items: baseline; |
|||
margin-bottom: 40rpx; |
|||
|
|||
.title { |
|||
font-family: Source Han Sans; |
|||
font-weight: 550; |
|||
font-size: 36rpx; |
|||
color: #0c092a; |
|||
margin-left: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.text { |
|||
margin-top: 32rpx; |
|||
font-family: Source Han Sans; |
|||
font-size: 32rpx; |
|||
font-weight: 300; |
|||
line-height: 60rpx; |
|||
letter-spacing: normal; |
|||
color: #3d3d3d; |
|||
} |
|||
|
|||
.fbtime { |
|||
font-family: Roboto; |
|||
font-size: 28rpx; |
|||
font-weight: normal; |
|||
line-height: 142rpx; |
|||
letter-spacing: normal; |
|||
/* 外部/SCMP Grey/nobel */ |
|||
/* 样式描述:06 Small Grey txt */ |
|||
color: #a1a1a1; |
|||
} |
|||
} |
|||
|
|||
.baombut { |
|||
width: 100%; |
|||
padding: 36rpx 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.3); |
|||
background: #FFFFFF; |
|||
position: fixed; |
|||
bottom: 0; |
|||
|
|||
.buttt { |
|||
width: 574rpx; |
|||
height: 96rpx; |
|||
border-radius: 248rpx; |
|||
background: linear-gradient(90deg, #007FFF 0%, #99CCFF 100%); |
|||
font-family: Source Han Sans; |
|||
font-size: 36rpx; |
|||
color: #FFFFFF; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue