软测宝小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

695 lines
18 KiB

<template>
<view>
<view class="tabledetails">
<!-- <el-tag type="success">标签二</el-tag> -->
<!-- <img class="logobg" src="http://image.bjkeyware.com/static/index/cspx/13.png" alt="" /> -->
<!--background-color: #FFFFFF; <img class="logobg" src="http://image.bjkeyware.com/static/index/cspx/16.png" alt="" /> -->
<view style="padding:2vh 13px;">
<rich-text v-if='issueinform' class="article-body" :nodes="issueinform&&issueinform.detail | filtersRichText"></rich-text>
<u-divider v-else bg-color='transparent'>加载中...</u-divider>
<!-- <u-image v-else src="https://cdn.uviewui.com/uview/example/fade.jpg">
<u-loading slot="loading"></u-loading>
</u-image> -->
</view>
</view>
<view class="submitt">
<view v-if="wxUserInfo">
<view v-if='currentsign&&!register' class="bottbtn" @click="popcilk('sign')" >
<!-- <img src="http://image.bjkeyware.com/static/index/testpx/58.png" alt=""> -->
<p v-if="currentsign.type==0">培训报名</p>
<p v-if="currentsign.type==1">考试报名</p>
</view>
<view v-else-if='register' class="bottbtn" @click="popcilk('registered')" style="background: #909399;">
<!-- <img src="http://image.bjkeyware.com/static/index/testpx/58.png" alt=""> -->
<p>已报名</p>
</view>
<view v-else class="bottbtn" @click="popcilk('end')" style="background: #909399;">
<!-- <img src="http://image.bjkeyware.com/static/index/testpx/58.png" alt=""> -->
<p >报名已结束</p>
</view>
</view>
<view v-else>
<view class="bottbtn" @click="onlinesign">
<!-- <img src="http://image.bjkeyware.com/static/index/testpx/58.png" alt=""> -->
<p >立即报名</p>
</view>
</view>
</view>
<u-popup style="background:#66666;padding: 20px;" v-model="isPopupShow" @close="close" @open="open" mode="bottom" length="80%" height='630rpx' border-radius="15" :closeable='true' :mask-close-able="false">
<view style="background:#66666;padding: 20px;">
<view class='peodi'>— 填写报名信息 —</view>
<u-line></u-line>
<!-- <u-form :model="signobj" ref="signobj" label-position='left' label-width='120' border-bottom='false' >
<u-form-item label="姓名:" prop="name" border-bottom='false' required='true'> -->
<view class="sinput">
<!-- <img src="http://image.bjkeyware.com/static/index/testpx/xingming.png" alt=""> -->
<u-input v-model="signobj.name" placeholder='请输入您的名字' border="true" />
</view>
<!-- </u-form-item>
<u-form-item label= "QQ号:" prop="qq" border-bottom='false' required='true'>-->
<view class="sinput">
<!-- <img style="height: 30px;" src="http://image.bjkeyware.com/static/index/testpx/shouji.png" alt=""> -->
<u-input v-model="signobj.qq" placeholder='请输入您的QQ号' border="true" />
</view>
<!-- </u-form-item>
<u-form-item labe l="微信号:" prop="wechat" border-bottom='false' required='true'>-->
<view class="sinput">
<!-- <img style="height: 30px;" src="http://image.bjkeyware.com/static/index/testpx/shouji.png" alt=""> -->
<u-input v-model="signobj.wechat" placeholder='请输入您的微信号' border="true" />
</view>
<!-- </u-form-item>
</u-form> -->
</view>
<u-line style="margin-top: 20px;"></u-line>
<view class="submitt" style="justify-content: space-around;margin-top:0px;">
<view class="button-g" style="width:43vw;background:#FFFFFF;border: 1px solid #1578ED;color: #1578ED;margin-left: 0;" @click="resource('setes')">重置</view>
<view class="button-g" style="width:43vw;background: linear-gradient(90deg, #FF8600, #FE2B2B);color: #FFFFFF;margin-left:2vw" @click="resource('singup')">立即报名</view>
</view>
</u-popup>
<u-modal title='温馨提示' v-model="tokenshow" content="您还没有登录" confirm-text='现在就去' cancel-text='稍等一下' show-cancel-button='true'
cancel-color='#1578ED' confirm-color='#1578ED' @confirm="confirms" @cancel='tokenshow=false'></u-modal>
<u-toast ref="uToast" />
</view>
</template>
<script>
export default {
data() {
return {
isPopupShow:false,
signobj:{name:'',qq:'',wechat:''},
courselist:'',//培训课程列表
wxUserInfo:null,//微信基本信息
currentsign:null,
register:null,
issueId:'',
tokenshow:false,
issueinform:null,
type:'',//从我的报名页跳过的
certRules: {
name: [{required: true, message: '请输入姓名', trigger: 'change',},
{max: 4, message: '最多输入4个中文', trigger: 'change' },
{
pattern:
/^(?:[\u4e00-\u9fa5·]{2,16})$/,
message: "请输入中文",
trigger: "blur",
},],
qq: [{ required: true, message: '请输入QQ号', trigger: 'change'},
{
pattern:
/^[1-9][0-9]{4,9}$/,
message: "请输入正确的QQ号",
trigger: "blur",
},
// {max:18, message: 'qq号长度为18', trigger: 'change' },/^[a-zA-Z]([-a-zA-Z0-9]{5,19})+$/
// {min:18, message: '身份证长度为18', trigger: 'change' },
],
wechat: [{ required: true, message: '请输入微信号', trigger: 'blur'},
{
pattern:
/^[a-zA-Z]([-a-zA-Z0-9]{5,19})+$/,
message: "请输入正确的微信号",
trigger: "blur",
},
],
},
}
},
onReady(){
// this.$refs.signobj.setRules(this.certRules);
},
filters: {
filtersRichText(html) { //控制小程序中图片大小
if(html){
let newContent = html.replace(/<img[^>]*>/gi, (match, capture)=>{
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi, (match, capture)=>{
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
return match;
});
// let newContentsss = html.replace(/<span[^>]*>/gi, (match, capture)=>{
// console.log('sss---',match, capture)
// if(capture==12428 || capture==12693){
// match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
// match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
// match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
// }
// return match;
// });
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
newContent = newContent.replace(/\<img/gi,
'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
// newContentsss = newContentsss.replace(/\<span/gi,
// '<span style="word-wrap:break-word;width:90vw;display:block;margin:10rpx auto;"');newContentsss;
return newContent;
}
}
},
onLoad(option) {
this.issueId=option.issueId
console.log('issueId',this.issueId)
let type=option.type;
if(type&&type==1){
uni.setNavigationBarTitle({
title: '我的报名'
});
}else{
uni.setNavigationBarTitle({
title: '在线报名'
});
}
this.wxUserInfo = uni.getStorageSync('wxUserInfo');
this.register = uni.getStorageSync('register');
// console.log('register--',this.register)
// console.log('wxUserInfo---',this.wxUserInfo)
// this.http.quickGet(`/train/course/list?pageNum=1&pageSize=100`).then(res=>{
// // console.log('res---', res)
// this.courselist = res.data.rows;
// if(this.courselist.length>0){
// this.courselist.sort((a,b)=>{
// return a.orderNum-b.orderNum
// })
// this.courselist.forEach(item=>{
// if(item.children.length>0){
// item.children.sort((a,b)=>{
// return a.orderNum-b.orderNum
// })
// if(item.orderNum==1){
// item.index='一'
// }else if(item.orderNum==2){
// item.index='二'
// }else if(item.orderNum==3){
// item.index='三'
// }else if(item.orderNum==4){
// item.index='四'
// }else if(item.orderNum==5){
// item.index='五'
// }
// }
// })
// // console.log('课程培训列表--', this.courselist)
// }
// })
this.http.quickGet(`/train/issue/detail/${this.issueId}`).then(res=>{
console.log('报名期号信息---',res)
this.issueinform=res.data
})
if(this.wxUserInfo){
// this.issigin();
console.log('this.wxUserInfo---',this.wxUserInfo)
this.http.quickGet(`/train/issue/list`,true).then(res=>{
// console.log('报名状态---',res)
let statuslist=res.data
let flag=null
if(statuslist.length>0){
statuslist.forEach(item=>{
if(item.status==1){
flag=item
}
})
}
if(flag){
this.currentsign=flag
}
console.log('当前报名类型---',this.currentsign)
})
}
},
methods: {
popcilk(type){
if(type=='sign'){
this.isPopupShow=true
}else if(type=='end'){
// this.$refs.uToast.show({
// title: '报名已结束',
// type: 'warning',
// })
}else if(type=='registered'){
// this.$refs.uToast.show({
// title: '已报名',
// type: 'success',
// })
}else{
this.$refs.uToast.show({
title: '功能暂未开通',
type: 'info',
// url: '/pages/index/index'
})
}
},
onlinesign(){
let accessToken = uni.getStorageSync('accessToken');
if(!accessToken){
this.tokenshow=true
}else{
this.isPopupShow=true
}
},
confirms(){
uni.navigateTo({
url:'/pages/personal/login'
})
},
open() {
// console.log('open');
},
close() {
this.isPopupShow = false
// console.log('close');
},
resource(type){
if(type=='setes'){
this.signobj={name:'',qq:'',wechat:''}
}else{
if(!this.signobj.name){
this.$refs.uToast.show({
title: '请输入姓名',
type: 'info',
})
return;
}
if(this.signobj.name.length>4){
this.$refs.uToast.show({
title: '姓名最多输入4个中文',
type: 'info',
})
return;
}
if(!/^(?:[\u4e00-\u9fa5·]{2,16})$/.test(this.signobj.name)){
this.$refs.uToast.show({
title: '姓名为中文',
type: 'info',
})
return;
}
if(!this.signobj.qq){
this.$refs.uToast.show({
title: '请输入qq号',
type: 'info',
})
return;
}
if(!/^[1-9][0-9]{4,9}$/.test(this.signobj.qq)){
this.$refs.uToast.show({
title: '请输入正确的QQ号',
type: 'info',
})
return;
}
if(!this.signobj.wechat){
this.$refs.uToast.show({
title: '请输入微信号',
type: 'info',
})
return;
}
if(!/^[a-zA-Z]([-a-zA-Z0-9]{5,19})+$/.test(this.signobj.wechat)){
this.$refs.uToast.show({
title: '请输入正确的微信号',
type: 'info',
})
return;
}
// this.$refs.signobj.validate(valid => {
// if (valid) {
let data={
userId:this.wxUserInfo.userId,
userName:this.wxUserInfo.userName,
phonenumber:this.wxUserInfo.phonenumber,
email:this.wxUserInfo.email,
sex:this.wxUserInfo.sex,
company:this.wxUserInfo.companyName,
name:this.signobj.name,
qq:this.signobj.qq,
wechat:this.signobj.wechat,
issueId:this.issueinform.issueId,
// issue:this.issueinform.issue,
category:this.currentsign.type,
}
console.log('data',data)
// return;
if(this.currentsign){
if(this.currentsign.type==0){
this.http.quickPost(`/train/trainApply`,data,true).then(res=>{
if(res.data.code==200){
this.$refs.uToast.show({
title: '报名成功',
type: 'success',
// isTab:true,
url:'pages/personal/mysignup/notice'
})
setTimeout(()=>{
this.isPopupShow=false
},1000)
// this.issigin();
uni.setStorageSync('register', true)
}
})
}else{
this.http.quickPost(`/train/examApply`,data,true).then(res=>{
if(res.data.code==200){
this.$refs.uToast.show({
title: '报名成功',
type: 'success',
// isTab:true,
url:'pages/personal/mysignup/notice'
})
setTimeout(()=>{
this.isPopupShow=false
},1000)
// this.issigin();
uni.setStorageSync('register', true)
}
})
}
}
// }else{
// console.log('验证失败',this.signobj)
// }
// })
}
}
}
}
</script>
<style>
.tabledetails{
width:100vw;
/* height: 100vh; */
/* background-color: #FFFFFF; */
padding:0 13px 13px 13px;
}
.logobg {
width:100%;
height:32vw;
margin-bottom:-7px;
}
.deyalimg{
width:100%;
height:4.8vw;
margin:5px 0;
object-fit: cover;
}
.statictosol{
width:48%;
height:200px;
background: #FFFFFF;
border-radius: 10rpx;
text-align: center;
margin-top: 20px;
padding: 10px;
}
.statictosol img{
width:26vw;
height:21vw;
}
.statictosol p{
font-size:.9rem;
color:#808080;
margin-bottom: 5px;
line-height:21px
}
.lighr{
width:28vw;
height:20vw;
}
.practice{
display: flex;
justify-content:space-between;
background-color: #FFFFFF;
padding:13px;
width: 100%;
margin:15px 0;
}
.lighrt{
width:22vw;
height:22vw;
}
.linblue{
width: 46rpx;
height: 5rpx;
background: #1578ED;
border-radius: 3rpx;
margin: 10px auto;
}
.buttonobj{
width: 320rpx;
height: 70rpx;
background: linear-gradient(145deg, #33CABC, #39B4A0);
border-radius:50rpx;
font-size: 34rpx;
font-weight: bold;
color: #FFFFFF;
text-align: center;
line-height:70rpx;
margin: 30px auto -10px auto;
}
.course{
background-color: #FFFFFF;
padding:10px;
width: 100%;
margin:15px 0;
font-size: 26rpx;
color: #808080;
}
.course p{
margin:10px 0;
line-height: 22px;
}
.course img{
width: 28rpx;
height: 28rpx;
margin-right:5px;
}
.software{
display: flex;
align-items: center;
margin-top: -10px;
}
.master{
display: flex;
width: 170px;
margin: 20px auto;
align-items: center;
justify-content: space-around;
}
.master p{
font-size:36rpx;
color: #1A1A1A;
font-weight: bold;
}
.xline{
width: 11rpx;
height: 39rpx;
background: #1578ED;
transform: rotate(18deg);
}
.interface{
display: flex;
justify-content:space-between;
flex-wrap: wrap;
}
.testet{
/* height:120rpx; */
width:21vw;
background: #FFFFFF;
border-radius: 8rpx;
text-align: center;
padding: 15px 0;
margin:0 0 10px 0
}
.testet img{
width:60rpx;
height:65rpx;
}
.testet p{
font-size:28rpx;
color: #4D4D4D;
margin-top: 5px;
}
.teams{
background: #FFFFFF;
width: 100%;
padding:15px 12px ;
border-radius: 8rpx;
font-size: 27rpx;
color: #808080;
margin-top: 80px;
}
.teams img{
width:27vw;
height:32vw;
margin-top:-58px;
margin-right:10px;
}
.submitt{
height:55px;
font-size: 20px;
background: #FFFFFF;
margin-top:60px;
position: fixed;
bottom: 0;
width: 100vw;
display: flex;
justify-content: space-between;
}
.bottbtn{
width:94vw;
margin:7px 3vw;
height:75rpx;
background: linear-gradient(90deg, #5EA6FD, #1A81F9);
border-radius:43rpx;
text-align: center;
line-height:75rpx;
color: #FFFFFF;
font-size: 33rpx;
margin-left:13px;
}
.bottbtn img{
width:23px ;
height:23px ;
margin-right: 10px;
}
.peodi{
/* line-height: 15%; */
margin:5px auto 15px;
width: 260px;
text-align: center;
color: #1A1A1A;
font-size:36rpx;
font-weight: bold;
}
.button-g{
width:280rpx;
height: 80rpx;
background:transparent;
border-radius:43rpx;
text-align: center;
line-height:80rpx;
color: #FFFFFF;
font-size: 33rpx;
margin-left:13px;
}
.sinput{
display: flex;
align-items: center;
height:50px;
padding: 10px;
margin-left:30px
}
.sinput img{
width:20px;
height:20px;
margin-right: 10px;
padding-right: 5px;
}
.u-input{
width:72vw;
height:35px;
border: 1px solid #E6E6E6;
background: #FFFFFF;
border-radius: 10rpx;
padding-left: 10px!important;
}
.innovate{
width:41vw;
height:24vw ;
}
.tableclas{
/* width: 230rpx;
height: 56rpx; */
background: #DEECFC;
border-radius:30rpx;
padding:7px 13px;
font-size: 28rpx;
color: #1A7AED;
margin-right:10px ;
}
.vertical{
width: 6rpx;
height: 26rpx;
background: #1578ED;
border-radius: 3rpx;
margin-right:10px ;
}
.online{
width: 100%;
height: 70rpx;
background: linear-gradient(90deg, #5EA6FD, #1A81F9);
border-radius: 35rpx;
line-height: 70rpx;
font-size: 15px;
color:#FFFFFF;
text-align: center;
}
.table_heade{
width: 90%;
text-align: center;
/* margin:5px 0 */
}
.table_kheade{
width: 10%;
text-align: center;
}
.headert{
background-color: #3283BE;
display: flex;
align-items: center;
color:#FFFFFF ;
}
.bodyt{
background-color: #FFFFFF;
display: flex;
align-items: center;
color:#1A1A1A;
/* height: 26px; */
}
.table_obody{
width: 10%;
text-align: center;
}
.table_tbody{
width: 80%;
text-align: left;
padding:4px 8px;
border-left:1px solid #CFDDDD;
border-right:1px solid #CFDDDD;
}
.table_hbody{
width: 10%;
text-align: center;
}
.article-body{
line-height: 26px!important;
/* width: 100%; */
/* color:rgb(17, 16, 16)!important; */
}
.article-body p {
font-size: 34rpx!important;
color: #666666!important;
line-height: 35rpx!important;
background-color:transparent!important;
}
.article-body>>> span {
font-size: 34rpx!important;
color: #666666!important;
line-height: 35rpx!important;
background-color:transparent!important;
}
</style>