Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
596506f2 by zhangmeng
Options

国家队

1 parent 0a1abe64
Inline Side-by-side
Showing 1 changed file with 171 additions and 145 deletions
src/viewsPc/register/team/step2.vue
......@@ -5,91 +5,110 @@
<label>{{ language == 0 ? '登录账号' : 'Account' }}</label> {{ accont }}
</div>
</div>
<div class="leftboderTT" v-if="!user">{{ language == 0 ? '登录密码' : 'Password' }}
<div v-if="!user" class="leftboderTT">{{ language == 0 ? '登录密码' : 'Password' }}
<span v-if="language==0">(登录时需要验证，保护账户信息)</span></div>
<div class="d-form-border" v-if="!user">
<el-form class="d-form" size="large" label-width="120"
:label-position="language==0?'left':'top'" style="max-width: 500px;margin: auto">
<div v-if="!user" class="d-form-border">
<el-form
:label-position="language==0?'left':'top'" class="d-form" label-width="120"
size="large" style="max-width: 500px;margin: auto"
>
<el-form-item :label="language==0?'密码':'Password'" required>
<el-input type="password" show-password v-model="form.password"
:placeholder="language==0?'6-16位密码。区分大小写':''"/>
<el-input
v-model="form.password" :placeholder="language==0?'6-16位密码。区分大小写':''" show-password
type="password"
/>
</el-form-item>
<el-form-item :label="language==0?'确认密码':'Confirm Password'" required>
<el-input type="password" show-password v-model="form.confirmPassword" @blur="vconfirmPassword"
:placeholder="language==0?'再次输入密码':''"/>
<el-input
v-model="form.confirmPassword" :placeholder="language==0?'再次输入密码':''" show-password type="password"
@blur="vconfirmPassword"
/>
</el-form-item>
</el-form>
</div>
<div class="leftboderTT">{{ language == 0 ? '机构信息' : 'Institutional information' }}</div>
<div class="d-form-border">
<el-form class="d-form" size="large" :model="form" ref="registerRef"
:rules="form.is=='0'?registerRules:registerRulesEn" label-width="120" :label-position="language==0?'left':'top'"
style="max-width: 500px;margin: auto">
<el-form-item :label="language==0?'是否国家队':'National Team'" required v-show="language==0">
<el-select filterable v-model="form.is" @change="changeIs">
<el-option :label="language==0?'是':'Yes'" value="1"></el-option>
<el-option :label="language==0?'否':'No'" value="0"></el-option>
<el-form
ref="registerRef" :label-position="language==0?'left':'top'" :model="form"
:rules="form.is=='0'?registerRules:registerRulesEn"
class="d-form" label-width="120"
size="large"
style="max-width: 500px;margin: auto"
>
<el-form-item v-show="language==0" :label="language==0?'是否国家队':'National Team'" required>
<el-select v-model="form.is" filterable @change="changeIs">
<el-option :label="language==0?'是':'Yes'" value="1" />
<el-option :label="language==0?'否':'No'" value="0" />
</el-select>
<div class="tip">
{{ language==0?'注册完成后，该属性不可变更':'After registration, this attribute cannot be changed' }}
{{ language == 0 ? '注册完成后，该属性不可变更' : 'After registration, this attribute cannot be changed' }}
</div>
</el-form-item>
<el-form-item :label="language==0?'代表国家/地区':'Representing'" required prop="countryId">
<el-select filterable v-model="form.countryId" :disabled="language==0&&form.is=='0'">
<!-- <el-option v-for="item in countryList" :key="item.id" :label="language==0?item.name:item.enName" :value="item.id"/>-->
<el-option v-for="item in countryList" :key="item.id" :label="item.noc||item.enName" :value="item.id"/>
<el-form-item :label="language==0?'代表国家/地区':'Representing'" prop="countryId" required>
<el-select v-model="form.countryId" :disabled="language==0&&form.is=='0'" filterable>
<!-- <el-option v-for="item in countryList" :key="item.id" :label="language==0?item.name:item.enName" :value="item.id"/>-->
<el-option v-for="item in countryList" :key="item.id" :label="item.noc||item.enName" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item :label="language==0?'详细地址':'Address'" prop="address" :required="form.is=='0'">
<el-cascader v-if="form.countryId == 240"
v-model="regionArr"
style="width: 100%;"
:options="regionsList"
:props="{ label:'text' }"
<el-form-item :label="language==0?'详细地址':'Address'" :required="form.is=='0'" prop="address">
<el-cascader
v-if="form.countryId == 240"
v-model="regionArr"
:options="regionsList"
:props="{ label:'text' }"
style="width: 100%;"
/>
<el-input type="textarea" v-model="form.address" class="mt10"/>
<el-input v-model="form.address" class="mt10" type="textarea" />
</el-form-item>
<el-form-item v-if="form.is=='0'" :label="language==0?'团体类型':'Group type'" prop="type" required>
<el-select v-model="form.type" :placeholder="language==0?'请选择团体类型':''" style="width: 100%;">
<el-select v-model="form.type" :placeholder="language==0?'请选择团体类型':''" style="width: 100%;">
<el-option :label="language==0?'普通院校':'School'" value="0" />
<el-option :label="language==0?'专业舞蹈学校':'Professional dance school'" value="1" />
<el-option :label="language==0?'培训机构/俱乐部':'Company/Club'" value="2" />
<el-option :label="language==0?'地方协会':'Local Association'" value="3" />
<el-option :disabled="form.is=='0'" :label="language==0?'国家协会':'National Association'" value="4" />
<el-option
:disabled="form.is=='0'" :hidden="userStore.group.id"
:label="language==0?'国家协会':'National Association'" value="4"
/>
</el-select>
</el-form-item>
<el-form-item :label="language==0?'团体名称':'Team Name'" :required="form.is=='0'" prop="teamName">
<el-input type="text" v-model="form.teamName" :placeholder="language==0?'请输入内容':''"/>
<el-input v-model="form.teamName" :placeholder="language==0?'请输入内容':''" type="text" />
</el-form-item>
<el-form-item v-if="form.is=='0'" :label="language==0?'专业/业余':'Professional/Amateur'" required prop="majorFlag">
<el-form-item
v-if="form.is=='0'" :label="language==0?'专业/业余':'Professional/Amateur'" prop="majorFlag"
required
>
<el-select v-model="form.majorFlag">
<el-option :label="language==0?'专业':'Professional'" value="1" />
<el-option :label="language==0?'业余':'Amateur'" value="0" />
</el-select>
</el-form-item>
<el-form-item :label="language==0?'联系人姓名':'Contact Name'" required prop="contactName">
<el-input type="text" v-model="form.contactName" :placeholder="language==0?'请输入内容':''"/>
<el-form-item :label="language==0?'联系人姓名':'Contact Name'" prop="contactName" required>
<el-input v-model="form.contactName" :placeholder="language==0?'请输入内容':''" type="text" />
</el-form-item>
<el-form-item :label="language==0?'联系人电话':'Contact Phone'" required prop="contactTel">
<el-input v-model="form.contactTel" type="phone" :placeholder="language==0?'请输入内容':''"/>
<el-form-item :label="language==0?'联系人电话':'Contact Phone'" prop="contactTel" required>
<el-input v-model="form.contactTel" :placeholder="language==0?'请输入内容':''" type="phone" />
</el-form-item>
<el-form-item :label="language==0?'联系人邮箱':'Contact Email'" required prop="contactEmail">
<el-input v-model="form.contactEmail" type="email" :placeholder="language==0?'请输入内容':''"/>
<el-form-item :label="language==0?'联系人邮箱':'Contact Email'" prop="contactEmail" required>
<el-input v-model="form.contactEmail" :placeholder="language==0?'请输入内容':''" type="email" />
</el-form-item>
<el-form-item prop="photo" :label="language==0?'机构LOGO':'Organizational photos'"
:required="form.is=='0'">
<el-form-item
:label="language==0?'机构LOGO':'Organizational photos'" :required="form.is=='0'"
prop="photo"
>
<ImageUpload2
v-model="form.photo" :crop-height="200" :crop-width="200" :limit="1"
:is-show-tip="false"
v-model="form.photo" :crop-height="200" :crop-width="200" :is-show-tip="false"
:limit="1"
/>
</el-form-item>
<el-form-item>
<div @click="isAgree = !isAgree" class="flexAgree">
<div class="flexAgree" @click="isAgree = !isAgree">
<el-icon v-if="isAgree" color="#453DEA" size="20">
<CircleCheckFilled/>
<CircleCheckFilled />
</el-icon>
<el-icon v-else color="#999" size="20">
<CircleCheck/>
<CircleCheck />
</el-icon>
<div v-if="language==0">
我已阅读并接受<a class="text-primary" @click.stop="showAgreeMent">《注册协议》</a>
......@@ -106,13 +125,19 @@
</el-form-item>
</el-form>
</div>
<div class="text-center">
<!-- <el-button class="primary-kx" @click="goStep1">上一步</el-button>-->
<el-button v-if="user&&user.utype=='3'" type="primary" round class="btn-lineG w200px" @click.prevent="upgrade" :loading="loading">
<el-button
v-if="user&&user.utype=='3'" :loading="loading" class="btn-lineG w200px" round type="primary"
@click.prevent="upgrade"
>
{{ language == 0 ? '升级账号' : 'Submit' }}
</el-button>
<el-button v-else type="primary" round class="btn-lineG w200px" @click.prevent="goStep3" :loading="loading">
<el-button
v-else :loading="loading" class="btn-lineG w200px" round type="primary"
@click.prevent="goStep3"
>
{{ language == 0 ? '立即注册' : 'Register Now!' }}
</el-button>
</div>
......@@ -120,21 +145,21 @@
</template>
<script setup>
import {getCurrentInstance} from "@vue/runtime-core"
import {onMounted, toRefs, reactive} from "vue"
import * as match from "@/apiPc/match";
import {ElMessage} from "element-plus";
import {setToken} from "@/utils/auth";
import {useStorage} from "@vueuse/core/index";
import {useRoute, useRouter} from "vue-router";
import useUserStore from "@/store/modules/user";
import {upgradeTeam} from "@/apiPc/common";
import { getCurrentInstance } from '@vue/runtime-core'
import { onMounted, toRefs, reactive } from 'vue'
import * as match from '@/apiPc/match'
import { ElMessage } from 'element-plus'
import { setToken } from '@/utils/auth'
import { useStorage } from '@vueuse/core/index'
import { useRoute, useRouter } from 'vue-router'
import useUserStore from '@/store/modules/user'
import { upgradeTeam } from '@/apiPc/common'
const router = useRouter()
const route = useRoute()
const {proxy} = getCurrentInstance()
const { proxy } = getCurrentInstance()
const emit = defineEmits(['submit', 'prev'])
const language= useStorage('language',0)
const language = useStorage('language', 0)
const userStore = useUserStore()
const user = useUserStore().user
const props = defineProps({
......@@ -153,50 +178,50 @@ const data = reactive({
regionArr: [],
isAgree: false
})
const {form, countryList, regionsList, isAgree, loading, regionArr} = toRefs(data)
const { form, countryList, regionsList, isAgree, loading, regionArr } = toRefs(data)
const registerRulesEn = ref(
{
password: [
{required: true, trigger: 'blur', message: '请输入您的密码'},
{min: 6, max: 16, message: '用户密码长度必须介于 6 和 16 之间', trigger: 'blur'}
],
confirmPassword: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
countryId: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
// address: [{required: true, trigger: 'blur', message: '请输入地址'},],
// teamName: [{required: true, trigger: 'blur'},],
contactName: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
contactTel: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
contactEmail: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
// photo: [{required: true, trigger: 'blur', message: '请上传'},],
})
{
password: [
{ required: true, trigger: 'blur', message: '请输入您的密码' },
{ min: 6, max: 16, message: '用户密码长度必须介于 6 和 16 之间', trigger: 'blur' }
],
confirmPassword: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }],
countryId: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }],
// address: [{required: true, trigger: 'blur', message: '请输入地址'},],
// teamName: [{required: true, trigger: 'blur'},],
contactName: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }],
contactTel: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }],
contactEmail: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }]
// photo: [{required: true, trigger: 'blur', message: '请上传'},],
})
const registerRules = ref(
{
password: [
{required: true, trigger: 'blur', message: '请输入您的密码'},
{min: 6, max: 16, message: '用户密码长度必须介于 6 和 16 之间', trigger: 'blur'}
],
confirmPassword: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
countryId: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
address: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
teamName: [{required: true, trigger: 'blur',message: language.value == 0 ? '请输入':'Please enter'},],
contactName: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
contactTel: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
contactEmail: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
photo: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
type: [{required: true, trigger: 'blur', message: language.value == 0 ? '请选择':'Please enter'},],
majorFlag: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入':'Please enter'},],
})
{
password: [
{ required: true, trigger: 'blur', message: '请输入您的密码' },
{ min: 6, max: 16, message: '用户密码长度必须介于 6 和 16 之间', trigger: 'blur' }
],
confirmPassword: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }],
countryId: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }],
address: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }],
teamName: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }],
contactName: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }],
contactTel: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }],
contactEmail: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }],
photo: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }],
type: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请选择' : 'Please enter' }],
majorFlag: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }]
})
const vconfirmPassword = () => {
if (form.value.password !== form.value.confirmPassword) {
ElMessage.warning(language.value == 0 ? '两次输入的密码不一致' :'The two passwords entered are inconsistent')
ElMessage.warning(language.value == 0 ? '两次输入的密码不一致' : 'The two passwords entered are inconsistent')
}
}
const matchId = ref('')
onMounted(() => {
if(route.query.matchId){
if (route.query.matchId) {
matchId.value = route.query.matchId
}
if(language.value==1){
if (language.value == 1) {
form.value.type = '4'
}
getCountryList()
......@@ -219,77 +244,77 @@ const goStep1 = () => {
emit('prev')
}
const upgrade = () => {
proxy.$refs.registerRef.validate(valid => {
if (valid) {
if(language.value==0){
var pattern = /^1[3456789]\d{9}$/
if (!pattern.test(form.value.contactTel)) {
ElMessage.warning(language.value == 0 ?'请输入正确的手机号':'Please enter the correct mobile phone number')
return
}
}
if (!isAgree.value) {
ElMessage.warning(language.value == 0?'请勾选接受':'Please check the acceptance')
proxy.$refs.registerRef.validate(valid => {
if (valid) {
if (language.value == 0) {
var pattern = /^1[3456789]\d{9}$/
if (!pattern.test(form.value.contactTel)) {
ElMessage.warning(language.value == 0 ? '请输入正确的手机号' : 'Please enter the correct mobile phone number')
return
}
loading.value = true
form.value.regionId = regionArr.value.pop()
form.value.userId = user.userId
console.log('upgrade')
upgradeTeam(form.value).then(res => {
loading.value = false
console.log(matchId.value,res.data)
if(res.data){
userStore.getInfo().then(()=>{
router.push({
name: 'matchDetail',
params: {
id: matchId.value
}
})
})
} else {
ElMessage.success(language.value == 0?'升级成功':'Upgrade successful')
router.push({name: 'home'})
}
}).catch(()=>{
loading.value = false
})
}
})
if (!isAgree.value) {
ElMessage.warning(language.value == 0 ? '请勾选接受' : 'Please check the acceptance')
return
}
loading.value = true
form.value.regionId = regionArr.value.pop()
form.value.userId = user.userId
console.log('upgrade')
upgradeTeam(form.value).then(res => {
loading.value = false
console.log(matchId.value, res.data)
if (res.data) {
userStore.getInfo().then(() => {
router.push({
name: 'matchDetail',
params: {
id: matchId.value
}
})
})
} else {
ElMessage.success(language.value == 0 ? '升级成功' : 'Upgrade successful')
router.push({ name: 'home' })
}
}).catch(() => {
loading.value = false
})
}
})
}
const goStep3 = () => {
proxy.$refs.registerRef.validate(valid => {
if (valid) {
if(language.value==0){
if (language.value == 0) {
var pattern = /^1[3456789]\d{9}$/
if (!pattern.test(form.value.contactTel)) {
ElMessage.warning(language.value == 0 ?'请输入正确的手机号':'Please enter the correct mobile phone number')
ElMessage.warning(language.value == 0 ? '请输入正确的手机号' : 'Please enter the correct mobile phone number')
return
}
}
if (!isAgree.value) {
ElMessage.warning(language.value == 0?'请勾选接受':'Please check the acceptance')
if (!isAgree.value) {
ElMessage.warning(language.value == 0 ? '请勾选接受' : 'Please check the acceptance')
return
}
if (!form.value.password) {
ElMessage.warning(language.value == 0?'请输入密码':'Please enter password')
ElMessage.warning(language.value == 0 ? '请输入密码' : 'Please enter password')
return
}
if (!form.value.confirmPassword) {
ElMessage.warning(language.value == 0?'请再次输入密码':'Please enter password')
ElMessage.warning(language.value == 0 ? '请再次输入密码' : 'Please enter password')
return
}
loading.value = true
delete form.value.confirmPassword
form.value.regionId = regionArr.value.pop()
form.value.username= props.accont
form.value.username = props.accont
console.log('pass')
match.pcRegisterTeam(form.value).then(res => {
setToken(res.data.token)
loading.value = false
emit('submit')
}).catch(()=>{
}).catch(() => {
loading.value = false
})
}
......@@ -297,22 +322,22 @@ const goStep3 = () => {
}
const showAgreeMent = () => {
const routeLocation = router.resolve({
name: 'userAgreement',
name: 'userAgreement'
})
window.open(routeLocation.href, '_blank')
}
const showPolicy = () => {
const routeLocation = router.resolve({
name: 'policy',
name: 'policy'
})
window.open(routeLocation.href, '_blank')
}
onMounted(() => {
console.log(props)
if(props.accont.indexOf('@')>-1){
form.value.contactEmail=props.accont
if (props.accont.indexOf('@') > -1) {
form.value.contactEmail = props.accont
}
if(language.value==1){
if (language.value == 1) {
form.value.type = '4'
form.value.is = '1'
} else {
......@@ -321,10 +346,10 @@ onMounted(() => {
})
const changeIs = (e) => {
console.log(e)
if(e == 1){
if (e == 1) {
form.value.type = '4'
} else {
if(language.value == '0'){
if (language.value == '0') {
form.value.countryId = 240
}
form.value.type = ''
......@@ -332,7 +357,7 @@ const changeIs = (e) => {
}
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
.d-form-border {
border: 1px solid #E5E5E5;
margin: 20px 0;
......@@ -343,7 +368,7 @@ const changeIs = (e) => {
color: var(--el-color-primary);
font-size: 16px;
font-weight: 600;
span {
color: #929AA0;
font-size: 14px;
......@@ -353,12 +378,13 @@ const changeIs = (e) => {
.flexAgree {
display: flex;
align-items: center;
div {
margin-left: 8px;
font-size: 14px
}
}
.tip {
line-height: 1.6;
font-size: 12px;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!