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.
 
 
 
 
 
Sports/pages/user/athlete/athlete.vue

302 lines
6.5 KiB

<template>
<view class="oppo-box">
<image style="width: 100%; height: 247rpx;" src="@/static/bg (2).png"></image>
<view class="custom-navigation-bar">
<view class="left-button" @click="handleBack">
<uni-icons type="left" color="#fff" size="30"></uni-icons>
</view>
<view class="title">
{{ title }}
</view>
</view>
<view class="yiyou">
<view class="">
已有运动员
</view>
<view class="yiyou1" @click="binding">去绑定<uni-icons type="right" color='#B3B6BB' size="18"></uni-icons></view>
</view>
<view class="formbox">
<uni-section title="上传照片" type="line" class="linered">
<view class="flr">照片仅用于赛事检录不收集人脸照数据</view>
<view class="border"></view>
<uni-file-picker v-model="formData.name" fileMediatype="image" mode="grid" @success="success"
@fail="fail" />
</uni-section>
</view>
<view class="formbox1">
<uni-forms ref="form" :modelValue="formData" :rules="rules" label-width="200rpx">
<uni-forms-item label="真实姓名" required name="name">
<input class="input" v-model="formData.name" type="text" placeholder="请输入" />
</uni-forms-item>
<uni-forms-item label="证件类型" required name="name">
<input class="input" v-model="formData.card" disabled type="text" placeholder="请输入" />
</uni-forms-item>
<uni-forms-item label="证件号" required name="email">
<input class="input" v-model="formData.email" type="text" placeholder="请输入" />
</uni-forms-item>
<uni-forms-item label="Email" name="email">
<input class="input" v-model="formData.email" type="text" placeholder="请输入" />
</uni-forms-item>
<uni-forms-item label="请输入微信号" name="name">
<input class="input" v-model="formData.name" type="text" placeholder="请输入微信号或微信绑定QQ/手机号" />
</uni-forms-item>
<uni-forms-item label="您来自哪里" required name="email">
<uni-data-select v-model="formData.value" :localdata="range" @change="change"></uni-data-select>
</uni-section>
</uni-forms-item>
</uni-forms>
</view>
<view class="formbox1">
<uni-forms ref="form" :modelValue="formData" :rules="rules" label-width="250rpx">
<uni-forms-item label="*联系电话" required name="email">
<input class="input" v-model="formData.email" type="text" placeholder="请输入" />
</uni-forms-item>
<uni-forms-item label="验证码" required name="email">
<view class="yzms">
<input class="yzmsinput" v-model="formData.email" type="text" placeholder="请输入" />
<view class="yzm">
获取验证码
</view>
</view>
</uni-forms-item>
</uni-forms\>
</view>
<view class="xieyi">
<checkbox-group>
<label class="flxieyi">
<checkbox value="cb" />
<view class="">
我已认真阅读并同意《用户隐私》和《用户服务协议》,并授权 个人信息用于炽热体育公开赛赛事助手报名。
</view>
</label>
</checkbox-group>
</view>
<view class="">
<!-- <button class="subbtn">确认提交</button> -->
<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
@buttonClick="buttonClick" />
</view>
</view>
</template>
<script>
export default {
data() {
return {
options: [{
icon: 'home',
text: '首页'
}],
buttonGroup: [{
text: '保存参赛信息',
backgroundColor: '#CA151F',
color: '#fff'
}],
value: '',
range: [{
value: 0,
text: "篮球"
},
{
value: 1,
text: "足球"
},
{
value: 2,
text: "游泳"
},
],
title: '运动员注册',
// 表单数据
formData: {
card: '身份证',
name: [],
email: ''
},
rules: {
// 对name字段进行必填验证
name: {
rules: [{
required: true,
errorMessage: '请输入姓名',
}]
},
// 对email字段进行必填验证
email: {
rules: [{
format: 'email',
errorMessage: '请输入正确的邮箱地址',
}]
}
}
}
},
methods: {
binding(){
uni.navigateTo({
url: "/pages/user/athlete/binding/binding"
})
},
onClick(){
uni.switchTab({
url: "/pages/index/index"
})
},
detail() {
uni.navigateTo({
url: "/pages/user/notice/detail/detail"
})
},
handleBack() {
uni.navigateBack({
delta: 2
})
// console.log(1344444);
// uni.switchTab({
// url: "/pages/user/index"
// })
},
toPage() {
console.log(1111232)
uni.navigateTo({
url: "/pages/user/index"
})
},
}
}
</script>
<style lang="scss" scoped>
.xieyi {
font-family: PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #333333;
line-height: 36rpx;
}
.flxieyi {
padding: 24rpx;
display: flex;
}
.yzms {
display: flex;
justify-content: space-between;
.yzm {
width: 187rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 30rpx;
color: #CA151F;
// margin-right: 20rpx;
}
}
.flr {
font-family: PingFang SC;
font-weight: 500;
font-size: 24rpx;
color: #999999;
margin-top: -55rpx;
float: right;
}
.yiyou {
padding: 26rpx;
display: flex;
justify-content: space-between;
.yiyou1 {
font-size: 30rpx;
color: #B3B6BB;
}
}
.oppo-box {
width: 100vw !important;
height: 100vh !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
.subbtn {
margin-top: 20rpx;
width: 662rpx;
height: 90rpx;
background: #CA151F;
border-radius: 45rpx;
color: #fff;
}
.dow {
color: red;
position: relative;
left: 80%;
top: -60rpx;
}
.formbox3 {
width: 750rpx;
// height: 107rpx;
background: #FFFFFF;
margin-top: 20rpx;
padding: 20rpx;
}
.formbox2 {
width: 730rpx;
height: 326rpx;
background: #FFFFFF;
margin-top: 20rpx;
padding: 20rpx;
}
.formbox1 {
width: 730rpx;
// height: 326rpx;
background: #FFFFFF;
margin-top: 20rpx;
padding: 20rpx;
}
.border {
border: 1px solid #E6E6E6;
;
}
.margintop {
margin-top: -100px;
}
.formbox {
padding: 20rpx;
// margin: 20rpx;
background: #fff;
}
.custom-navigation-bar {
display: flex;
align-items: center;
justify-content: space-between;
height: 220rpx;
/* #ifdef MP-WEIXIN */
margin-top: -230rpx;
/* #endif */
}
.left-button,
.right-button {
padding: 0 12px;
}
.title {
flex: 1;
// text-align: center;
color: #fff;
font-size: 18px;
font-weight: bold;
}
</style>