<!-- 在线报名 -->
<template>
<view class="content sign_up_online" :style="{background: '#fff url('+sign_up_bg+') repeat'}">
<image class="top" src="../../static/images/sign_online_top.jpg"></image>
<view class="main box_radio">
<view class="online_wrap">
<form @submit="formSubmit" @reset="formReset">
<view class="select">
<view class="uni-padding-wrap" @click="show_group">{{group}}</view>
<lb-picker ref="group_show" v-model="group" mode="selector" @confirm="group_confirm" :list="group_select" :z-index="999"></lb-picker>
<image src="../../static/images/online_down.jpg"></image>
</view>
<view class="title">参赛人信息</view>
<view class="br"></view>
<view class="input_name">姓名</view>
<input class="input" type="text" :value="info.name" name="name" />
<view class="input_name">手机号</view>
<input class="input" type="text" :value="info.mobile" name="mobile" />
<view class="input_name">性别</view>
<lb-picker v-model="info.sex" mode="selector" @confirm="sex_confirm" :list="sex_select">
<input class="input" type="text" :value="info.sex" name="sex" />
</lb-picker>
<label class="checkbox">
<checkbox-group name="" @change="checkboxChange">
<label>
<checkbox name="isChecked" value="1" :checked="isChecked?true:false" />
<text>我已阅读并同意《平台服务声明》</text>
</label>
</checkbox-group>
</label>
<button class="submit" form-type="submit">立即报名</button>
</form>
</view>
</view>
<image class="bottom" src="../../static/images/sign_up_bottom.jpg"></image>
</view>
</template>
<script>
import LbPicker from '@/components/lb-picker';
export default {
components: {
LbPicker
},
data() {
return {
title: 'Hello',
sign_up_bg: 'static/images/sign_up_bg.jpg',
value: [''],
info: {},
sex_select: ['男', '女'],
group_select: ['男', '女'],
group: '请选择场次/赛区',
aid: 0,
agreement: 0,
isChecked:false
}
},
onLoad(e) {
if (!this.uopenid) {
uni.showToast({
title: '请先登录!',
icon: 'none'
});
return;
}
let id = e.id;
this.aid = id;
uni.request({
url: this.domain + '/api/index/active_group_list/id/' + id,
method: 'GET',
data: {},
success: (res) => {
this.group_select = Object.values(res.data.data.group_arr);
console.log(Object.values(res.data.data.group_arr));
},
fail: () => {},
complete: () => {}
});
uni.request({
url: this.domain + '/api/user/minfo',
method: 'GET',
data: {
uopenid: this.uopenid
},
success: (res) => {
this.info = res.data.data;
},
fail: () => {},
complete: () => {}
});
},
methods: {
show_group(){
this.$refs['group_show'].show();
},
checkboxChange(e) {
let values = e.detail.value;
if (values[0] == 1) {
this.isChecked = true;
} else {
this.isChecked = false;
}
},
formSubmit(e) {
uni.showLoading({
title: '提交中……',
mask: true
});
var formdata = e.detail.value;
formdata.uopenid = this.uopenid;
formdata.group = this.group;
formdata.id = this.aid;
formdata.agreement = this.isChecked?1:0;
uni.request({
url: this.domain + '/api/index/active_sign_up',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: formdata,
success: (res) => {
uni.hideLoading();
let res_data = res.data;
if (res_data.code == 10000) {
uni.showToast({
title: res_data.msg,
duration: 2000
});
setTimeout(() => {
uni.navigateTo({
url: '/pages/index/my_action_id?id=' + this.aid
});
}, 2000)
} else {
uni.showToast({
title: res_data.msg,
duration: 3000,
icon: 'none'
});
}
},
fail: () => {},
complete: () => {}
});
},
sex_confirm(e) {
this.info.sex = e.value;
},
group_confirm(e) {
this.group = e.value;
},
handleChange(e) {},
handleCancel(e) {},
}
}
</script>
<style>
.sign_up_online .top {
width: 100%;
height: 194.44rpx;
}
.sign_up_online .bottom {
width: 100%;
height: 130.55rpx;
}
.sign_up_online .main {
background-color: #fff;
}
.online_wrap {
width: 639.58rpx;
margin: 38.88rpx auto 50.69rpx;
}
.online_wrap input {
font-size: 12px;
padding-left: 10.41rpx;
}
.select {
background-color: #00a0df;
border-radius: 6.94rpx;
height: 61.11rpx;
position: relative;
}
.select .uni-padding-wrap {
/* height: 61.11rpx; */
line-height: 61.11rpx;
color: #FFFFFF;
}
.select .uni-padding-wrap .uni-title {
padding-left: 24.3rpx;
font-size: 12px;
}
.checkbox uni-checkbox .uni-checkbox-input {
border-radius: 11px;
}
.select text {
color: #ffffff;
font-size: 12px;
line-height: 61.11rpx;
}
.select image {
width: 20.83rpx;
height: 11.8rpx;
position: absolute;
top: 25rpx;
right: 32.63rpx;
background-size: 20.83rpx 11.8rpx;
background-position: 90% center;
}
.online_wrap .br {
border-color: #ccc;
}
.online_wrap .title {
text-align: center;
font-size: 16px;
margin-top: 52.08rpx;
margin-bottom: 26.38rpx;
}
.online_wrap .input_name {
color: #666;
margin-top: 34.72rpx;
font-size: 14px;
margin-bottom: 26.38rpx;
}
.online_wrap .input {
background-color: #f2f2f2;
border-radius: 10px;
height: 61.11rpx;
line-height: 61.11rpx;
width: 97%;
}
.online_wrap .checkbox {
margin-top: 51.38rpx;
display: block;
text-align: center;
}
.online_wrap .checkbox uni-checkbox .uni-checkbox-input {
width: 13.88rpx;
height: 13.83rpx;
border-radius: 20rpx;
}
.online_wrap .checkbox text {
color: #00a0df;
font-size: 14px;
}
.online_wrap .submit {
height: 61.11rpx;
width: 100%;
line-height: 61.11rpx;
background-color: #ed6c00;
border-radius: 10px;
text-align: center;
color: #ffffff;
font-size: 16px;
margin-top: 22.22rpx;
cursor: pointer;
}
</style>