435 lines
9.3 KiB
Vue
435 lines
9.3 KiB
Vue
<template>
|
|
<view class="content bgfff">
|
|
<view v-if="content" style="padding-bottom: 15px;">
|
|
<!-- 文本 -->
|
|
<image :src="content.pic" mode="scaleToFill" class="topimg" v-if="content.headimg" @click="previewImage">
|
|
</image>
|
|
<view class="box newsDetail">
|
|
<view class="title">
|
|
{{content.title}}
|
|
</view>
|
|
<view class="c999 border-bottom">
|
|
<view>报名开始时间：{{content.start_time}}</view>
|
|
<view>报名截止时间：{{content.end_time}}</view>
|
|
</view>
|
|
<view class="con">
|
|
<u-parse :content="content.text_content"></u-parse>
|
|
</view>
|
|
</view>
|
|
<!-- 表单 -->
|
|
<view class="from">
|
|
<view class="item" v-for="(ite,ind) in formFields">
|
|
<view class="name">
|
|
<text v-if="ite.is_must">*</text>
|
|
{{ite.name}}
|
|
</view>
|
|
<view class="input" v-if="ite.type==='text'||ite.type==='email'||ite.type==='tel'">
|
|
<input :type="ite.type" v-model="ite.value" :placeholder="ite.placeholder"
|
|
@input="clearError(ite)" :class="{ 'input-error': ite.error }" class="form-input" />
|
|
</view>
|
|
<view class="input select" v-if="ite.type=='radio'">
|
|
<radio-group name="radio" @change="radioChange($event,ind)" class="radiogroup">
|
|
<label v-for="(it,id) in ite.options" :key="ind" class="radio"
|
|
:class="{ 'input-error': ite.error }">
|
|
<radio :value="it" style="transform:scale(0.8)" color="#345A9B" />{{it}}
|
|
</label>
|
|
</radio-group>
|
|
</view>
|
|
<view class="input select" v-if="ite.type=='select'">
|
|
<picker mode="selector" :range="ite.options" @change="onsexArr($event,ind)"
|
|
:class="{ 'input-error': ite.error }" class="form-input">
|
|
<view>{{ite.value?ite.value:ite.placeholder}}</view>
|
|
<uni-icons type="forward" size="20" color="#999"></uni-icons>
|
|
</picker>
|
|
</view>
|
|
<view class="input " v-if="ite.type=='checkbox'">
|
|
<checkbox-group @change="checkboxChange($event,ind)" class="form-input checkbox"
|
|
:class="{ 'input-error': ite.error }">
|
|
<label v-for="(it,id) in ite.options" :key="ind">
|
|
<checkbox :value="it" style="transform:scale(0.8)" color="#345A9B" />
|
|
{{it}}
|
|
</label>
|
|
</checkbox-group>
|
|
</view>
|
|
<view class="input" v-if="ite.type=='textarea'">
|
|
<textarea v-model="ite.value" name="content" maxlength="-1"
|
|
:class="{ 'input-error': ite.error }" @input="clearError(ite)"
|
|
:placeholder="ite.placeholder" class="form-input" />
|
|
</view>
|
|
</view>
|
|
<view class="btn" @click="submitForm">提交报名</view>
|
|
</view>
|
|
</view>
|
|
<view class="nolist" v-else>
|
|
<image src="@/static/none.png"></image>
|
|
<text>暂无数据</text>
|
|
</view>
|
|
<!-- 秘书处弹框 -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState
|
|
} from "vuex";
|
|
import uParse from '@/uni_modules/u-parse/u-parse.vue'
|
|
export default {
|
|
data() {
|
|
return {
|
|
type: 1,
|
|
content: null,
|
|
formFields: [],
|
|
submitSuccess: false,
|
|
}
|
|
},
|
|
components: {
|
|
uParse,
|
|
},
|
|
computed: {
|
|
...mapState(["user"]),
|
|
},
|
|
onLoad(options) {
|
|
let that = this
|
|
that.handleActive(options.id)
|
|
uni.showShareMenu({
|
|
withShareTicket: true,
|
|
menus: ['shareAppMessage', 'shareTimeline']
|
|
})
|
|
},
|
|
onShareAppMessage() {
|
|
let that = this
|
|
return {
|
|
title: that.content.title,
|
|
path: '/pageTwo/campaign/detail?id=' + that.content.id,
|
|
imageUrl: that.content.headimg,
|
|
success: function(res) {
|
|
console.log("分享到朋友成功")
|
|
},
|
|
fail: function(res) {
|
|
console.log("分享到朋友失败")
|
|
},
|
|
}
|
|
},
|
|
onShareTimeline() {
|
|
let that = this
|
|
return {
|
|
title: that.content.title,
|
|
query: 'id=' + that.content.id,
|
|
imageUrl: that.content.headimg,
|
|
success: function(res) {
|
|
console.log("分享到朋友圈成功")
|
|
},
|
|
fail: function(res) {
|
|
console.log("分享到朋友圈失败")
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
handleActive(id) {
|
|
let that = this
|
|
that.$model.getCampaignDetail({
|
|
id: id
|
|
}).then((res) => {
|
|
if (res.code != 0) return
|
|
this.content = res.data
|
|
this.formFields = res.data.form_content
|
|
this.formFields.forEach(field => {
|
|
field.error = false
|
|
});
|
|
})
|
|
},
|
|
resetErrors() {
|
|
this.formFields.forEach(field => {
|
|
field.error = false;
|
|
});
|
|
},
|
|
clearError(field) {
|
|
field.error = false;
|
|
},
|
|
radioChange(e, it) {
|
|
this.formFields[it].error = false;
|
|
this.formFields[it].value = e.detail.value
|
|
},
|
|
checkboxChange(e, it) {
|
|
this.formFields[it].error = false;
|
|
this.formFields[it].value = e.detail.value
|
|
},
|
|
//确定性别
|
|
onsexArr(e, it) {
|
|
this.formFields[it].error = false;
|
|
this.formFields[it].value = this.formFields[it].options[e.target.value]
|
|
console.log("111111111", this.formFields[it], e.target)
|
|
},
|
|
submitForm() {
|
|
let that = this
|
|
that.resetErrors();
|
|
let isValid = true;
|
|
// 遍历所有表单字段进行验证
|
|
that.formFields.forEach(field => {
|
|
if (field.is_must) {
|
|
if (field.value == '' || !field.value.length) {
|
|
field.error = true;
|
|
isValid = false;
|
|
that.$set(that.formFields, 'error', true)
|
|
} else if (field.type === 'email' && field.value != '') {
|
|
// 邮箱格式验证
|
|
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
if (!emailPattern.test(field.value)) {
|
|
field.error = true;
|
|
isValid = false;
|
|
that.$set(that.formFields, 'error', true)
|
|
}
|
|
} else if (field.type === 'phone' && field.value != '') {
|
|
// 手机号格式验证
|
|
const phonePattern = /^1[3-9]\d{9}$/;
|
|
if (!phonePattern.test(field.value)) {
|
|
field.error = true;
|
|
isValid = false;
|
|
that.$set(that.formFields, 'error', true)
|
|
}
|
|
}
|
|
}
|
|
|
|
});
|
|
// 如果验证通过
|
|
if (isValid) {
|
|
console.log("验证通过");
|
|
that.$model.getCampaignSave({
|
|
id: that.content.id,
|
|
tel: that.user.phone,
|
|
content: that.formFields
|
|
}).then((res) => {
|
|
if (res.code != 0) {
|
|
that.$tools.msg(res.msg)
|
|
return
|
|
}
|
|
that.$tools.msg("提交成功")
|
|
setTimeout(function() {
|
|
uni.navigateBack()
|
|
}, 1000)
|
|
})
|
|
}
|
|
|
|
},
|
|
|
|
previewImage() {
|
|
let that = this
|
|
let image = []
|
|
image.push(that.content.headimg)
|
|
uni.previewImage({
|
|
urls: image,
|
|
current: 0,
|
|
}).catch((e) => {
|
|
console.log(e) //用catch(e)来捕获错误{makePhoneCall:fail cancel}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
padding: 0;
|
|
}
|
|
|
|
.webview {
|
|
position: fixed;
|
|
top: 80px;
|
|
width: 100%;
|
|
height: 100vh;
|
|
}
|
|
|
|
.nolist {
|
|
padding-top: 40%;
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.box {
|
|
padding-bottom: 70px;
|
|
}
|
|
|
|
.topimg {
|
|
width: 750rpx;
|
|
height: 381rpx;
|
|
}
|
|
|
|
.icon-zantongfill {
|
|
color: $red;
|
|
}
|
|
|
|
.foot {
|
|
height: 50px;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 0 15px;
|
|
padding-bottom: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
justify-content: space-between;
|
|
box-shadow: 0px 1px 5px 2px #dfe2e1fc;
|
|
|
|
icon {
|
|
font-size: 20px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
view {
|
|
width: 30%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
text {
|
|
width: 100%;
|
|
text-align: center;
|
|
display: inline-block;
|
|
}
|
|
|
|
.call {
|
|
width: 120px !important;
|
|
color: #000;
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
margin-left: 10px;
|
|
float: right;
|
|
background-color: #E6C8A2;
|
|
}
|
|
|
|
/deep/button {
|
|
width: 30%;
|
|
padding: 0;
|
|
line-height: 20px;
|
|
font-size: 14px;
|
|
background: #fff;
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
button:after {
|
|
border: none;
|
|
}
|
|
|
|
}
|
|
|
|
.from {
|
|
margin: 15px;
|
|
padding: 15px;
|
|
border-radius: 10px;
|
|
border: 1px solid #345A9B;
|
|
width: calc(100% - 60px);
|
|
|
|
.item {
|
|
margin-bottom: 15px;
|
|
|
|
.name {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
|
|
text {
|
|
color: red;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
margin-right: 5px;
|
|
display: inline-block;
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
|
|
.input {
|
|
width: calc(100% - 5px);
|
|
background: #fff;
|
|
display: flex;
|
|
border-radius: 5px;
|
|
justify-content: space-between;
|
|
|
|
.form-input {
|
|
border-radius: 5px;
|
|
border: 1px solid #dfdfdf;
|
|
}
|
|
|
|
.radiogroup {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.radio {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
input {
|
|
padding: 8px 10px;
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
/deep/ picker {
|
|
align-items: center;
|
|
width: 100%;
|
|
display: flex;
|
|
padding: 0 10px;
|
|
height: 40px;
|
|
position: relative;
|
|
|
|
view {
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 10px;
|
|
}
|
|
|
|
uni-icons {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
height: 65px;
|
|
padding: 0 10px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.checkbox {
|
|
width: 100%;
|
|
display: flex;
|
|
padding: 10px;
|
|
flex-wrap: wrap;
|
|
|
|
label {
|
|
width: 33.3%;
|
|
display: flex;
|
|
margin: 5px 0;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.input-error {
|
|
border-radius: 5px;
|
|
border-color: #e74c3c !important;
|
|
background-color: rgba(231, 76, 60, 0.05);
|
|
}
|
|
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
color: #fff;
|
|
margin: 15px auto;
|
|
text-align: center;
|
|
background: #345A9B;
|
|
height: 40px;
|
|
font-size: 14px;
|
|
line-height: 40px;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
</style> |