|
@@ -1,14 +1,16 @@
|
|
|
<template>
|
|
|
- <div class="join-wrap">
|
|
|
- <div class="join-main-box" v-show="!isSign && isOpen">
|
|
|
- <p class="join-title">
|
|
|
- <span>
|
|
|
- {{$t('train.detail.qrCodeText')}}
|
|
|
- </span>
|
|
|
- </p>
|
|
|
- <p class="course-name">{{topic || $t('cusMgt.join.errorInfo')}}</p>
|
|
|
- <div style="width:fit-content;margin: auto;">
|
|
|
- <!-- <p class="info-item">
|
|
|
+ <div class="join-wrap">
|
|
|
+ <div class="join-main-box" v-show="!isSign && isOpen">
|
|
|
+ <p class="join-title">
|
|
|
+ <span>
|
|
|
+ {{$t('train.detail.qrCodeText')}}
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <p class="course-name">{{topic || $t('cusMgt.join.errorInfo')}}</p>
|
|
|
+ <Input v-model="phoneNum" prefix="ios-phone-portrait" type="tel" placeholder="输入手机号"
|
|
|
+ style="width: 300px;margin-top: 20px;height: 40px;" />
|
|
|
+ <div style="width:fit-content;margin: auto;">
|
|
|
+ <!-- <p class="info-item">
|
|
|
<span class="info-lable">
|
|
|
{{$t('train.detail.presenter')}}
|
|
|
</span>
|
|
@@ -16,7 +18,7 @@
|
|
|
{{presenter}}
|
|
|
</span>
|
|
|
</p> -->
|
|
|
- <!-- <p class="info-item">
|
|
|
+ <!-- <p class="info-item">
|
|
|
<span class="info-lable">
|
|
|
{{$t('train.detail.address')}}
|
|
|
</span>
|
|
@@ -32,168 +34,191 @@
|
|
|
{{time}}
|
|
|
</span>
|
|
|
</p> -->
|
|
|
- </div>
|
|
|
- <div class="join-btn" @click="signIn()">
|
|
|
- {{$t('train.detail.signNow')}}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-show="isSign" class="join-main-box">
|
|
|
- <p class="join-title">
|
|
|
- <span>
|
|
|
- {{$t('train.detail.qrCodeText')}}
|
|
|
- </span>
|
|
|
- </p>
|
|
|
- <Icon type="md-checkmark-circle-outline" color="#19be6b" size="120" />
|
|
|
- <p class="success-tips" style="font-size:24px;color:#19be6b">{{$t('train.detail.signOk')}}</p>
|
|
|
- </div>
|
|
|
- <div v-show="!isOpen" class="join-main-box">
|
|
|
- <p class="join-title">
|
|
|
- <span>
|
|
|
- {{$t('train.detail.qrCodeText')}}
|
|
|
- </span>
|
|
|
- </p>
|
|
|
- <Icon type="md-close-circle" color="#ed4014" size="120" />
|
|
|
- <p class="success-tips" style="font-size:24px;color:#ed4014">{{$t('train.detail.unStart')}}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="join-btn" @click="signIn()">
|
|
|
+ {{$t('train.detail.signNow')}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-show="isSign" class="join-main-box">
|
|
|
+ <p class="join-title">
|
|
|
+ <span>
|
|
|
+ {{$t('train.detail.qrCodeText')}}
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <Icon type="md-checkmark-circle-outline" color="#19be6b" size="120" />
|
|
|
+ <p class="success-tips" style="font-size:24px;color:#19be6b">{{$t('train.detail.signOk')}}</p>
|
|
|
+ </div>
|
|
|
+ <div v-show="!isOpen" class="join-main-box">
|
|
|
+ <p class="join-title">
|
|
|
+ <span>
|
|
|
+ {{$t('train.detail.qrCodeText')}}
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <Icon type="md-close-circle" color="#ed4014" size="120" />
|
|
|
+ <p class="success-tips" style="font-size:24px;color:#ed4014">{{$t('train.detail.unStart')}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import jwtDecode from 'jwt-decode'
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- isOpen: false,
|
|
|
- isSign: false,
|
|
|
- id: '',
|
|
|
- school: '',
|
|
|
- presenter: '',
|
|
|
- address: '',
|
|
|
- time: '',
|
|
|
- topic: '',
|
|
|
- code: '',
|
|
|
- userId: '',
|
|
|
- p: {}
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- signIn() {
|
|
|
- let params = {
|
|
|
- id: this.id,
|
|
|
- code: this.school,
|
|
|
- tId: this.userId
|
|
|
- }
|
|
|
- this.p = params
|
|
|
- this.$api.train.signIn(params).then(
|
|
|
- res => {
|
|
|
- this.$Message.success('签到成功')
|
|
|
- this.isSign = true
|
|
|
- },
|
|
|
- err => {
|
|
|
- this.$Message.error('签到失败')
|
|
|
- }
|
|
|
- )
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.id = this.$route.query.id //活动id
|
|
|
- this.code = this.$route.query.code //登录成功返回的code
|
|
|
- this.school = this.$route.query.school
|
|
|
- // this.presenter = this.$route.query.presenter
|
|
|
- // this.address = this.$route.query.address
|
|
|
- // this.time = this.$route.query.time
|
|
|
- this.topic = this.$route.query.topic
|
|
|
- this.isOpen = this.$route.query.isOpen == 'true'
|
|
|
+ import jwtDecode from 'jwt-decode'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ phoneNum: '',
|
|
|
+ isOpen: false,
|
|
|
+ isSign: false,
|
|
|
+ id: '',
|
|
|
+ school: '',
|
|
|
+ presenter: '',
|
|
|
+ address: '',
|
|
|
+ time: '',
|
|
|
+ topic: '',
|
|
|
+ code: '',
|
|
|
+ userId: '',
|
|
|
+ p: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ signIn() {
|
|
|
+ if (!this.phoneNum.trim() || !this.isTel(this.phoneNum)) {
|
|
|
+ this.$Message.warning('请输入正确手机号!')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let params = {
|
|
|
+ id: this.id,
|
|
|
+ code: this.school,
|
|
|
+ mobile: this.phoneNum
|
|
|
+ }
|
|
|
+ this.p = params
|
|
|
+ this.$api.train.signIn(params).then(
|
|
|
+ res => {
|
|
|
+ if(res.code === 404){
|
|
|
+ this.$Message.warning('未查询到对应账号!请检查后重试!')
|
|
|
+ }else{
|
|
|
+ this.$Message.success('签到成功')
|
|
|
+ this.isSign = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ err => {
|
|
|
+ this.$Message.error('签到失败')
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ isTel(tel) {
|
|
|
+ var re = /^1\d{10}$/
|
|
|
+ return re.test(tel)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.id = this.$route.query.id //活动id
|
|
|
+ this.code = this.$route.query.code //登录成功返回的code
|
|
|
+ this.school = this.$route.query.school
|
|
|
+ // this.presenter = this.$route.query.presenter
|
|
|
+ // this.address = this.$route.query.address
|
|
|
+ // this.time = this.$route.query.time
|
|
|
+ this.topic = this.$route.query.topic
|
|
|
+ this.isOpen = this.$route.query.isOpen == 'true'
|
|
|
|
|
|
- //获取登录信息
|
|
|
- let srvAdr = this.$store.state.config.srvAdr
|
|
|
- let host = srvAdr == 'Global' ? this.$store.state.config.Global.coreAPIUrl : this.$store.state.config.China.coreAPIUrl
|
|
|
- let clientId = srvAdr == 'Global' ? this.$store.state.config.Gloabl.clientID : this.$store.state.config.China.clientID
|
|
|
- this.$api.service.getToken(host, {
|
|
|
- grant_type: "authorization_code",
|
|
|
- client_id: clientId,
|
|
|
- code: this.code
|
|
|
- }).then(
|
|
|
- res => {
|
|
|
- if (!res.error) {
|
|
|
- let tokenData = jwtDecode(res.id_token)
|
|
|
- if (tokenData) {
|
|
|
- this.userId = tokenData.sub
|
|
|
- console.log(this.userId)
|
|
|
- } else {
|
|
|
- this.$Message.error(this.$t('cusMgt.join.parseErr'))
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.$Message.error(this.$t('cusMgt.join.getErr'))
|
|
|
- }
|
|
|
- },
|
|
|
- err => {
|
|
|
- this.$Message.error(this.$t('cusMgt.join.getErr'))
|
|
|
- }
|
|
|
- )
|
|
|
- }
|
|
|
-}
|
|
|
+ //获取登录信息
|
|
|
+ let srvAdr = this.$store.state.config.srvAdr
|
|
|
+ let host = srvAdr == 'Global' ? this.$store.state.config.Global.coreAPIUrl : this.$store.state.config.China
|
|
|
+ .coreAPIUrl
|
|
|
+ let clientId = srvAdr == 'Global' ? this.$store.state.config.Gloabl.clientID : this.$store.state.config.China
|
|
|
+ .clientID
|
|
|
+ // this.$api.service.getToken(host, {
|
|
|
+ // grant_type: "authorization_code",
|
|
|
+ // client_id: clientId,
|
|
|
+ // code: this.code
|
|
|
+ // }).then(
|
|
|
+ // res => {
|
|
|
+ // if (!res.error) {
|
|
|
+ // let tokenData = jwtDecode(res.id_token)
|
|
|
+ // if (tokenData) {
|
|
|
+ // this.userId = tokenData.sub
|
|
|
+ // console.log(this.userId)
|
|
|
+ // } else {
|
|
|
+ // this.$Message.error(this.$t('cusMgt.join.parseErr'))
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // this.$Message.error(this.$t('cusMgt.join.getErr'))
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // err => {
|
|
|
+ // this.$Message.error(this.$t('cusMgt.join.getErr'))
|
|
|
+ // }
|
|
|
+ // )
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
<style scoped lang="less">
|
|
|
-.success-tips {
|
|
|
- color: white;
|
|
|
- font-size: 16px;
|
|
|
- margin-top: 20px;
|
|
|
-}
|
|
|
-.join-wrap {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-evenly;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-image: url("../../assets/image/bak_light.jpg");
|
|
|
-}
|
|
|
-.join-btn {
|
|
|
- cursor: pointer;
|
|
|
- width: 100%;
|
|
|
- margin: auto;
|
|
|
- margin-top: 60px;
|
|
|
- text-align: center;
|
|
|
- border: 1px solid rgba(25, 190, 107, 0.5);
|
|
|
- // color: rgba(25, 190, 107, 1);
|
|
|
- color: white;
|
|
|
- padding: 4px 30px;
|
|
|
- border-radius: 5px;
|
|
|
- font-size: 16px;
|
|
|
- letter-spacing: 2px;
|
|
|
- font-weight: 400;
|
|
|
- user-select: none;
|
|
|
- background: rgba(25, 190, 107, 0.5);
|
|
|
-}
|
|
|
-.course-name {
|
|
|
- color: white;
|
|
|
- margin-bottom: 15px;
|
|
|
- font-size: 30px;
|
|
|
- // font-family: cursive;
|
|
|
-}
|
|
|
-.join-main-box {
|
|
|
- max-width: 90%;
|
|
|
- width: fit-content;
|
|
|
- text-align: center;
|
|
|
- .info-item {
|
|
|
- margin-top: 20px;
|
|
|
- font-size: 15px;
|
|
|
- width: fit-content;
|
|
|
- }
|
|
|
- .info-lable {
|
|
|
- color: #a5a5a5;
|
|
|
- }
|
|
|
- .info-value {
|
|
|
- color: #eeeeee;
|
|
|
- }
|
|
|
-}
|
|
|
-.join-title {
|
|
|
- position: absolute;
|
|
|
- top: 15px;
|
|
|
- text-align: center;
|
|
|
- width: 100%;
|
|
|
- left: 0px;
|
|
|
- border-bottom: 1px dashed;
|
|
|
- padding-bottom: 8px;
|
|
|
-}
|
|
|
-</style>
|
|
|
+ .success-tips {
|
|
|
+ color: white;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .join-wrap {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-image: url("../../assets/image/bak_light.jpg");
|
|
|
+ }
|
|
|
+
|
|
|
+ .join-btn {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 100%;
|
|
|
+ margin: auto;
|
|
|
+ margin-top: 60px;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid rgba(25, 190, 107, 0.5);
|
|
|
+ // color: rgba(25, 190, 107, 1);
|
|
|
+ color: white;
|
|
|
+ padding: 4px 30px;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-size: 16px;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ font-weight: 400;
|
|
|
+ user-select: none;
|
|
|
+ background: rgba(25, 190, 107, 0.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ .course-name {
|
|
|
+ color: white;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ font-size: 30px;
|
|
|
+ // font-family: cursive;
|
|
|
+ }
|
|
|
+
|
|
|
+ .join-main-box {
|
|
|
+ max-width: 90%;
|
|
|
+ width: fit-content;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .info-item {
|
|
|
+ margin-top: 20px;
|
|
|
+ font-size: 15px;
|
|
|
+ width: fit-content;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-lable {
|
|
|
+ color: #a5a5a5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-value {
|
|
|
+ color: #eeeeee;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .join-title {
|
|
|
+ position: absolute;
|
|
|
+ top: 15px;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ left: 0px;
|
|
|
+ border-bottom: 1px dashed;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ }
|
|
|
+</style>
|