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> |
<template> |
||||
<u-navbar |
<u-navbar :title="titleData.special_id_name ? '“' + titleData.special_id_name + '”' + '专题' : ''" placeholder="true" |
||||
:title="titleData.special_id_name ? '“' + titleData.special_id_name + '”' + '专题' : ''" |
bg-color="#F1F3F9" :auto-back="true"></u-navbar> |
||||
placeholder="true" |
<view class="container"> |
||||
bg-color="#F1F3F9" |
<view class="titlepart"> |
||||
:auto-back="true" |
<image style="width: 8rpx; height: 1em" src="@/static/img/Fill1.png" mode=""></image> |
||||
></u-navbar> |
<image style="width: 8rpx; height: 1em; margin-left: 6rpx" src="@/static/img/Fill2.png" mode=""></image> |
||||
<view class="container"> |
<text class="title">{{ titleData.title }}</text> |
||||
<view class="titlepart"> |
</view> |
||||
<image style="width: 8rpx; height: 1em" src="@/static/img/Fill1.png" mode=""></image> |
<!-- <image style="width: 100%;height: 436rpx;margin-top: 48rpx;" src="@/static/img/Bitmap.png" mode=""></image> --> |
||||
<image style="width: 8rpx; height: 1em; margin-left: 6rpx" src="@/static/img/Fill2.png" mode=""></image> |
<rich-text :nodes="titleData.content"></rich-text> |
||||
<text class="title">{{ titleData.title }}</text> |
<view class="fbtime">{{ titleData.create_time }}</view> |
||||
</view> |
</view> |
||||
<!-- <image style="width: 100%;height: 436rpx;margin-top: 48rpx;" src="@/static/img/Bitmap.png" mode=""></image> --> |
<view class="baombut" v-if="titleData.form"> |
||||
<rich-text :nodes="titleData.content"></rich-text> |
<view class="buttt" @click="gotij(titleData.id, titleData.form)"> |
||||
<view class="fbtime">{{ titleData.create_time }}</view> |
立即报名 |
||||
</view> |
</view> |
||||
|
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup> |
<script setup> |
||||
import { onLoad } from '@dcloudio/uni-app' |
import { |
||||
import { ref } from 'vue' |
onLoad |
||||
import { specialListInfo, bannerInfo } from '@/api/index' |
} from '@dcloudio/uni-app' |
||||
|
import { |
||||
|
ref |
||||
|
} from 'vue' |
||||
|
import { |
||||
|
specialListInfo, |
||||
|
bannerInfo |
||||
|
} from '@/api/index' |
||||
|
|
||||
const titleData = ref([]) |
const titleData = ref([]) |
||||
|
|
||||
|
const gotij = (id,item) => { |
||||
|
uni.navigateTo({ |
||||
|
url: '/pages/index/subform?form='+JSON.stringify(item)+ '&id='+id |
||||
|
}) |
||||
|
} |
||||
|
|
||||
onLoad(async (param) => { |
onLoad(async (param) => { |
||||
if (param.type === 'zt') { |
if (param.type === 'zt') { |
||||
const res = await specialListInfo(param.id) |
const res = await specialListInfo(param.id) |
||||
if (res.code === 1) { |
if (res.code === 1) { |
||||
titleData.value = res.data |
titleData.value = res.data |
||||
} |
} |
||||
} else { |
} else { |
||||
const res = await bannerInfo(param.id) |
const res = await bannerInfo(param.id) |
||||
if (res.code === 1) { |
if (res.code === 1) { |
||||
console.log(res) |
console.log(res) |
||||
titleData.value = res.data |
titleData.value = res.data |
||||
} |
} |
||||
} |
} |
||||
titleData.value.content = titleData.value.content.replace(/<img/g, '<img style="width: 100%; max-width: 100%; height: auto;"') |
titleData.value.content = titleData.value.content.replace(/<img/g, |
||||
}) |
'<img style="width: 100%; max-width: 100%; height: auto;"') |
||||
|
}) |
||||
</script> |
</script> |
||||
|
|
||||
<style scoped lang="scss"> |
<style scoped lang="scss"> |
||||
.container { |
.container { |
||||
background-color: #ffffff; |
background-color: #ffffff; |
||||
height: calc(100vh - 182rpx); |
height: calc(100vh - 350rpx); |
||||
width: 100%; |
width: 100%; |
||||
padding: 48rpx; |
padding: 48rpx; |
||||
box-sizing: border-box; |
box-sizing: border-box; |
||||
.titlepart { |
overflow-y: auto; |
||||
display: flex; |
|
||||
align-items: baseline; |
.titlepart { |
||||
margin-bottom: 40rpx; |
display: flex; |
||||
.title { |
align-items: baseline; |
||||
font-family: Source Han Sans; |
margin-bottom: 40rpx; |
||||
font-weight: 550; |
|
||||
font-size: 36rpx; |
.title { |
||||
color: #0c092a; |
font-family: Source Han Sans; |
||||
margin-left: 20rpx; |
font-weight: 550; |
||||
} |
font-size: 36rpx; |
||||
} |
color: #0c092a; |
||||
.text { |
margin-left: 20rpx; |
||||
margin-top: 32rpx; |
} |
||||
font-family: Source Han Sans; |
} |
||||
font-size: 32rpx; |
|
||||
font-weight: 300; |
.text { |
||||
line-height: 60rpx; |
margin-top: 32rpx; |
||||
letter-spacing: normal; |
font-family: Source Han Sans; |
||||
color: #3d3d3d; |
font-size: 32rpx; |
||||
} |
font-weight: 300; |
||||
.fbtime { |
line-height: 60rpx; |
||||
font-family: Roboto; |
letter-spacing: normal; |
||||
font-size: 28rpx; |
color: #3d3d3d; |
||||
font-weight: normal; |
} |
||||
line-height: 142rpx; |
|
||||
letter-spacing: normal; |
.fbtime { |
||||
/* 外部/SCMP Grey/nobel */ |
font-family: Roboto; |
||||
/* 样式描述:06 Small Grey txt */ |
font-size: 28rpx; |
||||
color: #a1a1a1; |
font-weight: normal; |
||||
} |
line-height: 142rpx; |
||||
} |
letter-spacing: normal; |
||||
</style> |
/* 外部/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