123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719 |
- <template>
- <view class="bigbox">
- <!-- 顶部导航栏 -->
- <uni-nav-bar status-bar=true fixed=true left-icon="back" background-color="#3387ff" color="#ffffff"
- @clickLeft="navigateBack">
- <text slot="default" style="text-align: center; flex: 1; font-size: 18px; font-weight: bold;">Sign Up</text>
- <button slot="right" size="mini" @click="submitForm" class="sunmit-btn" type="submit"
- hover-class="button-hover">submit</button>
- </uni-nav-bar>
- <!-- 背景装饰物 -->
- <view class="decorate">
- <!-- <view class="decorates"></view> -->
- </view>
- <!-- 表单部分 -->
- <uni-list :border="false"
- style="width: 686rpx;margin: 100rpx 32rpx;border-radius: 12rpx;overflow: hidden;box-shadow: 0px 3px 6px #000000;">
- <uni-list-item showArrow clickable @click="toUpload">
- <view slot="header" class="text_style" style="line-height: 104rpx;">
- <text style="margin-left: 26rpx;">Photo</text>
- </view>
- <image v-if="meetingApply.photoUrl" @click="toUpload" slot="footer"
- :src="websiteUrl+meetingApply.photoUrl"
- style="width: 100rpx;height: 140rpx; border-radius: 16rpx;margin-top: -134rpx;"></image>
- </uni-list-item>
- <uni-list-item clickable>
- <text slot="header" class="text_style text_style_s label">Invitation Code</text>
- <input placeholder="Please enter your Invitation Code or '000000'" slot="body"
- class="uni-input-info text_style_s" v-model="meetingApply.invitationCode" />
- </uni-list-item>
- <uni-list-item clickable>
- <text slot="header" class="text_style text_style_s label">Given Name</text>
- <input placeholder="Please enter your Given Name" slot="body" class="uni-input-info text_style_s"
- v-model="meetingApply.givenName" />
- </uni-list-item>
- <uni-list-item clickable>
- <text slot="header" class="text_style text_style_s" style="margin-left: 12rpx;">Middle Name</text>
- <input placeholder="Please enter your Middle Name" slot="body" class="uni-input-info text_style_s"
- v-model="meetingApply.middleName" />
- <!-- <information-input slot="body" class="uni-common-mt" v-model="meetingApply.middleName"></information-input> -->
- </uni-list-item>
- <uni-list-item clickable>
- <text slot="header" class="text_style text_style_s label">Surname</text>
- <input placeholder="Please enter your Surname" slot="body" class="uni-input-info text_style_s"
- v-model="meetingApply.surname" />
- </uni-list-item>
- <uni-list-item showArrow>
- <text slot="header" class="text_style text_style_s label">Gender</text>
- <view slot="body" class="uni-list select-view">
- <view class="uni-list-cell">
- <view class="uni-list-cell-db">
- <picker @change="bindPickerChange" :value="genderIndex" :range="genderRange"
- range-key="label">
- <view class="uni-input">{{genderRange[genderIndex].label}}</view>
- </picker>
- </view>
- </view>
- </view>
- </uni-list-item>
- <uni-list-item clickable>
- <text slot="header" class="text_style text_style_s label">E-mail</text>
- <input placeholder="Please enter your E-mail" slot="body" class="uni-input-info text_style_s"
- v-model="meetingApply.email" />
- </uni-list-item>
- <!-- <uni-list-item showArrow clickable @click="toMobileAreaCode('mobileAreaCodeDictEn')">
- <text slot="header" class="text_style text_style_s label" style="line-height: 100rpx;">Mobile Area
- Code</text>
- <text slot="footer" style="margin-top: -42px;">{{meetingApply.mobileAreaCodeDictEn}}</text>
- </uni-list-item> -->
- <uni-list-item showArrow clickable @click="toMobileAreaCode('mobileAreaCodeDictEn')">
- <text slot="header" class="text_style text_style_s label"
- style="height: 100rpx;line-height: 100rpx;">Mobile Area Code</text>
- <text slot="footer" style="margin-top: -37px;">{{meetingApply.contactMobileAreacodeDictEn}}</text>
- </uni-list-item>
- <uni-list-item clickable>
- <text slot="header" class="text_style text_style_s label">Tel.</text>
- <input placeholder="Please enter your Tel." slot="body" class="uni-input-info text_style_s"
- v-model="meetingApply.tel" />
- </uni-list-item>
- <uni-list-item showArrow clickable @click="toUnitCountryDict">
- <view slot="header" class="text_style" style="line-height: 100rpx; font-weight: bold;">
- <text class="label" style="margin-left: 10rpx;">Country/Region</text>
- </view>
- <text slot="footer" style="margin-top: -42px;">{{unitCountry}}</text>
- </uni-list-item>
- <uni-list-item showArrow>
- <text slot="header" class="text_style text_style_s label">Language</text>
- <view slot="body" class="uni-list select-view">
- <view class="uni-list-cell" v-if="languageDictEns.length">
- <view class="uni-list-cell-db">
- <picker @change="bindLanguageChange" :value="languageIndex" :range="languageDictEns"
- range-key="label">
- <view class="uni-input">{{languageDictEns[languageIndex].label}}</view>
- </picker>
- </view>
- </view>
- </view>
- </uni-list-item>
- <uni-list-item clickable>
- <text slot="header" class="text_style text_style_s ">Passport Number</text>
- <input placeholder="Please enter your Passport Number" slot="body" class="uni-input-info text_style_s"
- v-model="meetingApply.passportNumber" />
- </uni-list-item>
- <uni-list-item clickable>
- <text slot="header" class="text_style text_style_s label">Name of Company/Organization</text>
- <input placeholder="Please enter your Company/Organization" slot="body"
- class="uni-input-info text_style_s" v-model="meetingApply.unitNameEn" />
- </uni-list-item>
- <uni-list-item showArrow>
- <view class="" slot="header">
- <text class="text_style text_style_s label">Company/Organization Type</text>
- </view>
- <view slot="body" class="uni-list select-view text_style_s">
- <view class="uni-list-cell" v-if="UnitTypeDictRange.length">
- <view class="uni-list-cell-db">
- <picker @change="bindUnitTypePickerChange" :value="unitTypeIndex" :range="UnitTypeDictRange"
- range-key="label">
- <view class="uni-input"
- style="text-align:left; padding-left:28rpx;line-height: 192rpx;">
- {{UnitTypeDictRange[unitTypeIndex].label}}
- </view>
- </picker>
- </view>
- </view>
- </view>
- </uni-list-item>
- <uni-list-item clickable>
- <text slot="header" class="text_style text_style_s label">Title</text>
- <input placeholder="Please enter your Title" slot="body" class="uni-input-info text_style_s"
- v-model="meetingApply.positionNameEn" />
- </uni-list-item>
- <uni-list-item clickable>
- <text slot="header" class="text_style text_style_s label">Contact Person</text>
- <input placeholder="Please enter your Contact Person" slot="body" class="uni-input-info text_style_s"
- v-model="meetingApply.contactPersonName" />
- </uni-list-item>
- <uni-list-item showArrow clickable @click="toMobileAreaCode('contactMobileAreacodeDictEn')">
- <text slot="header" class="text_style text_style_s label"
- style="height: 100rpx;line-height: 100rpx;">Mobile Area Code</text>
- <text slot="footer" style="margin-top: -37px;">{{meetingApply.contactMobileAreacodeDictEn}}</text>
- </uni-list-item>
- <uni-list-item clickable>
- <text slot="header" class="text_style text_style_s label">Contact Cellphone</text>
- <input placeholder="Please enter your Contact Cellphone" slot="body" class="uni-input-info text_style_s"
- v-model="meetingApply.contactCellphone" />
- </uni-list-item>
- <uni-list-item clickable>
- <text slot="header" class="text_style text_style_s label">Contact E-mail</text>
- <input placeholder="Please enter your Contact E-mail" slot="body" class="uni-input-info text_style_s"
- v-model="meetingApply.contactEmail" />
- </uni-list-item>
- </uni-list>
- <activities-select v-if="baseInfo!= {} && baseInfo.isShowEnOnsiteIntention=='Yes'"
- :meetingId="meetingApply.meetingId" @getcheckedIds="getActivityIds" @getcheckDetermine="getdetermine"></activities-select>
- </view>
- </template>
- <script>
- import {
- addIntegral,
- addGrowth
- } from '@/components/addPointDetailByTaskDict.js'
- import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
- import informationInput from "@/pages/conference/conferenceOfflineZh/information.vue";
- import activitiesSelect from "@/pages/conference/activitiesSelectEN.vue";
- export default {
- components: {
- uniNavBar,
- informationInput,
- activitiesSelect,
- addIntegral,
- addGrowth
- },
- data() {
- return {
- unitCountry: '',
- genderRange: [{
- value: 'M',
- label: 'Male'
- },
- {
- value: 'F',
- label: 'Female'
- },
- {
- value: 'O',
- label: 'Other'
- },
- ],
- genderIndex: 0,
- unitTypeIndex: 0,
- languageIndex: 1,
- UnitTypeDictRange: [],
- languageDictEns: [],
- baseInfo: {}, //邀请码集合
- invitationCodePrefix: [], //邀请码集合
- invitationCodeArr: [], //邀请码集合
- meetingApply: {
- meetingYearplanTypeDict: 'main_meeting',
- isNeedLetter: 'No',
- meetingId: '',
- auditStatusDict: '',
- applyWay: 'en',
- nameEn: '',
- photoUrl: '',
- invitationCode: '',
- givenName: '',
- middleName: '',
- surname: '',
- genderDictEn: 'M',
- email: '',
- mobileAreaCodeDictEn: '',
- tel: '',
- unitCountryDictEn: '',
- languageDictEn: 'english',
- passportNumber: '',
- unitNameEn: '',
- meetingUnitTypeDictEn: '01',
- positionNameEn: '',
- contactPersonName: '',
- contactMobileAreacodeDictEn: '',
- contactCellphone: '',
- contactEmail: ''
- },
- approverId: '',
- checkedIds: '',
- checkDetermine: true,
- }
- },
- mounted() {
- // this.getUnitTypeDict();
- this.getLanguageDictEn();
- },
- onLoad(option) {
- if (option && option.id) {
- this.meetingApply.meetingId = option.id;
- const myId = option.id
- this.getConfrenceDetail(myId)
- // console.log(option.id)
- } else {
- let that = this;
- const eventChannel = this.getOpenerEventChannel()
- eventChannel.on('reapply', function(data) {
- that.meetingApply = data.data;
- that.getConfrenceDetail(data.data.meetingId);
- // console.log('2222',that.meetingApply)
- })
- that.initDicts()
- }
- },
- watch: {
- 'meetingApply.givenName'(val) {
- this.meetingApply.givenName = val
- this.meetingApply.contactPersonName = val + ' ' + this.meetingApply.middleName + ' ' + this.meetingApply
- .surname
- this.meetingApply.nameEn = val + ' ' + this.meetingApply.middleName + ' ' + this.meetingApply.surname
- },
- 'meetingApply.middleName'(val) {
- this.meetingApply.middleName = val
- this.meetingApply.contactPersonName = this.meetingApply.givenName + ' ' + val + ' ' + this.meetingApply
- .surname
- this.meetingApply.nameEn = this.meetingApply.givenName + ' ' + val + ' ' + this.meetingApply.surname
- },
- 'meetingApply.surname'(val) {
- this.meetingApply.surname = val
- this.meetingApply.contactPersonName = this.meetingApply.givenName + ' ' + this.meetingApply.middleName +
- ' ' + val
- this.meetingApply.nameEn = this.meetingApply.givenName + ' ' + this.meetingApply.middleName + ' ' + val
- },
- 'meetingApply.email'(val) {
- this.meetingApply.contactEmail = val
- },
- 'meetingApply.tel'(val) {
- this.meetingApply.contactCellphone = val
- },
- },
- methods: {
- getActivityIds(ids) {
- console.log('ids', ids)
- this.checkedIds = ids;
- },
- getdetermine(checkDetermine) {
-
- this.checkDetermine = checkDetermine;
- console.log('checkDetermine', this.checkDetermine)
- },
- async initDicts() {
- const res = await this.$myRequest({
- url: '/sys/sysDicts',
- data: {
- type: 'unit_country_dict_en,meeting_unit_type_dict_en'
- }
- })
- res.data[0].forEach(item => {
- // console.log(item)
- if (this.meetingApply.unitCountryDictEn == item.value) {
- this.unitCountry = item.label
- }
- })
- res.data[1].forEach((item, i) => {
- // console.log(item)
- if (this.meetingApply.meetingUnitTypeDictEn == item.value) {
- this.unitTypeIndex = i
- }
- })
- this.genderRange.forEach((item, i) => {
- if (this.meetingApply.genderDict == item.value) {
- this.genderIndex = i
- }
- })
- },
- async submitForm() {
- // uni.navigateTo({
- // url: '/pages/conference/conferenceOfflineEn/successfully'
- // });
- // return
- //必填项验证
- if (!this.checkContent(this.meetingApply.invitationCode)) {
- uni.showToast({
- title: 'Invitation code not filled in',
- icon: 'none'
- });
- return;
- } else if (!this.invitationCodeArr.includes(this.meetingApply.invitationCode)) {
- uni.showToast({
- title: 'Invitation code error',
- icon: 'none'
- });
- return;
- } else if (!this.checkContent(this.meetingApply.givenName)) {
- uni.showToast({
- title: 'GivenName not filled in',
- icon: 'none'
- });
- return;
- } else if (!this.checkContent(this.meetingApply.surname)) {
- uni.showToast({
- title: 'SurName not filled in',
- icon: 'none'
- });
- return;
- } else if (!this.checkContent(this.meetingApply.email)) {
- uni.showToast({
- title: 'Email not filled in',
- icon: 'none'
- });
- return;
- } else if (!this.checkEmail(this.meetingApply.email)) {
- uni.showToast({
- title: 'Email format error',
- icon: 'none'
- });
- return;
- }/* else if (!this.checkContent(this.meetingApply.mobileAreaCodeDictEn)) {
- uni.showToast({
- title: 'Mobile Area Code not filled in',
- icon: 'none'
- });
- return;
- } */ else if (!this.checkContent(this.meetingApply.tel)) {
- uni.showToast({
- title: 'Tel not filled in',
- icon: 'none'
- });
- return;
- } else if (!this.checkMobile(this.meetingApply.tel)) {
- uni.showToast({
- title: 'Tel error',
- icon: 'none'
- });
- return;
- }/* else if (!this.checkContent(this.meetingApply.passportNumber)) {
- uni.showToast({
- title: 'passportNumber is not filled in',
- icon: 'none'
- });
- return;
- } */ else if (!this.checkContent(this.meetingApply.unitNameEn)) {
- uni.showToast({
- title: 'Name of Company/Organization is not filled in',
- icon: 'none'
- });
- return;
- } else if (!this.checkContent(this.meetingApply.positionNameEn)) {
- uni.showToast({
- title: 'Title not filled in',
- icon: 'none'
- });
- return;
- } else if (!this.checkContent(this.meetingApply.contactPersonName)) {
- uni.showToast({
- title: 'Contact Person is not filled in',
- icon: 'none'
- });
- return;
- } else if (!this.checkContent(this.meetingApply.contactCellphone)) {
- uni.showToast({
- title: 'Contact Cellphone is not filled in',
- icon: 'none'
- });
- return;
- } else if (!this.checkMobile(this.meetingApply.contactCellphone)) {
- uni.showToast({
- title: 'Contact Cellphone error',
- icon: 'none'
- });
- return;
- } else if (!this.checkContent(this.meetingApply.contactEmail)) {
- uni.showToast({
- title: 'Contact Email is not filled in',
- icon: 'none'
- });
- return;
- } else if (!this.checkEmail(this.meetingApply.contactEmail)) {
- uni.showToast({
- title: 'Contact Email format error',
- icon: 'none'
- });
- return;
- } else if (!this.checkDetermine) {
- uni.showToast({
- title: 'Kind Reminder: participants can only register for one parallel session. Hope you enjoy the conference.',
- icon: 'none'
- });
- return;
- }
- // 点击确定时,对手机邮箱进行验证
- if (this.meetingApply.auditStatusDict == '') {
- this.meetingApply.auditStatusDict = '4';
- } else {
- this.meetingApply.auditStatusDict = this.meetingApply.auditStatusDict;
- }
- var res = await this.$myRequest({
- url: '/meeting/meetingApplys/getApproverId',
- data: {
- invitationCode: this.meetingApply.invitationCode
- },
- });
- res = res.data; //20210401添加此行代码
- var str = "";
- for (var i = 0; i < res.length; i++) {
- str += res[i].userId + ",";
- }
- if (str.length > 0) {
- str = str.substr(0, str.length - 1);
- }
- this.approverId = str;
- console.log('approverId', this.approverId)
- const token = await this.$myRequest({
- url: '/sys/token',
- data: {}
- });
- console.log('meetingApply', this.meetingApply)
- await this.$myRequest({
- url: '/meeting/meetingApplys',
- method: (this.meetingApply.id ? 'PUT' : 'POST'),
- data: {
- meetingApply: JSON.stringify(this.meetingApply),
- approver: this.approverId,
- taskComment: '',
- token: token.data,
- activityIds: this.checkedIds
- },
- }).then(result => {
- console.log(result)
- if (result.data.isRepeat) {
- uni.showToast({
- title: 'please do not fill in again',
- icon: 'none'
- })
- return
- }
- addIntegral('meeting_registration_successful', '10')
- addGrowth('meeting_registration_successful', '10')
- uni.navigateTo({
- url: '/pages/conference/conferenceOfflineEn/successfully'
- });
- });
- },
- bindPickerChange(e) {
- this.meetingApply.genderDict = this.genderRange[e.target.value].value;
- this.genderIndex = e.target.value;
- },
- bindUnitTypePickerChange(e) {
- console.log(this.UnitTypeDictRange[e.target.value].value)
- this.meetingApply.meetingUnitTypeDictEn = this.UnitTypeDictRange[e.target.value].value;
- this.unitTypeIndex = e.target.value;
- },
- bindLanguageChange(e) {
- this.meetingApply.languageDictEn = this.languageDictEns[e.target.value].value;
- this.languageIndex = e.target.value;
- },
- async getDict(rand) {
- const res = await this.$myRequest({
- url: '/sys/sysDicts',
- data: {
- type: 'geidco_dept_dict,meeting_unit_type_dict_en'
- }
- })
- if (res.data) {
- this.UnitTypeDictRange = res.data[1];
- // this.invitationCodePrefix = res.data
- res.data[0].forEach(item => {
- // console.log(item)
- this.invitationCodeArr.push(item.value + '' + rand)
- })
- this.invitationCodeArr.push("000000")
- console.log(this.invitationCodeArr)
- }
- },
- async getConfrenceDetail(myId) {
- const res = await this.$myRequest({
- url: '/meeting/meetingOutInfos/findMeetingDetail/',
- data: {
- id: myId
- }
- });
- this.baseInfo = res.data.basicInfo;
- this.getDict(res.data.basicInfo.meetingRand)
- },
- async getLanguageDictEn() {
- const res = await this.$myRequest({
- url: '/sys/sysDicts',
- data: {
- type: 'language_dict_en'
- }
- })
- if (res.data) {
- this.languageDictEns = res.data[0];
- }
- },
- toMobileAreaCode(mark) {
- uni.navigateTo({
- url: 'MobileAreaCodeDict',
- events: {
- watchMobileAreaCode: data => {
- this.meetingApply[mark] = data.code;
- if (mark == 'mobileAreaCodeDictEn') {
- this.meetingApply.contactMobileAreacodeDictEn = data.code;
- }
- }
- },
- })
- },
- toUnitCountryDict() {
- uni.navigateTo({
- url: 'CountryDict',
- events: {
- acceptSelectedCountry: data => {
- this.unitCountry = data.country;
- this.meetingApply.unitCountryDictEn = data.code;
- }
- },
- })
- },
- toUpload() {
- uni.navigateTo({
- url: '/pages/conference/conferenceOfflineZh/uni-list-item-upload',
- events: {
- acceptImageUrl: data => {
- this.meetingApply.photoUrl = data.url;
- }
- },
- })
- },
- navigateBack() {
- uni.navigateBack()
- },
- checkEmail(email) {
- return RegExp(/^\w+.*\w+@[a-zA-Z0-9]+.*[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/).test(email);
- },
- checkMobile(mobile) {
- return RegExp(/^1[34578]\d{9}$/).test(mobile);
- },
- checkContent(content) {
- return RegExp(/^[\s\S]*.*[^\s][\s\S]*$/).test(content);
- },
- }
- }
- </script>
- <style lang="scss" scoped>
- .bigbox {
- background-color: #FFFFFF;
- padding-bottom: 20px;
- }
- /deep/.uni-list--border::after {
- background-color: #FFFFFF;
- }
- .uni-list-item {
- height: 144rpx;
- line-height: 104rpx;
- border-bottom: 1px solid #dadada;
- }
- /deep/.uni-list-item__container {
- flex-wrap: wrap;
- }
- .decorate {
- width: 100%;
- height: 170px;
- background-color: #3387ff;
- position: absolute;
- border-radius: 0 0 50px 50px
- }
- .decorates {
- width: 323px;
- height: 30px;
- background-color: rgb(255, 255, 255);
- opacity: 0.5;
- border-radius: 5px;
- position: absolute;
- top: 60rpx;
- left: 52rpx;
- }
- .text_style {
- width: 100%;
- font-weight: bold;
- font-size: 14px;
- display: flex;
- align-items: center;
- margin-bottom: 10rpx;
- }
- .text_style_s {
- padding-left: 14rpx;
- }
- .uni-common-mt {
- // margin-left: 90rpx;
- }
- .uni-list {
- width: auto;
- background-color: #d7d7d7;
- }
- .uni-list:after,
- .uni-list:before {
- height: 0px;
- }
- .select-view {
- position: absolute;
- width: 100%;
- height: 100%;
- text-align: right;
- top: 0;
- left: 0;
- background-color: transparent;
- }
- .select-view .uni-input {
- line-height: 140rpx;
- }
- .sunmit-btn {
- width: 57px;
- height: 30px;
- color: #FFFFFF;
- background-color: #2d79e5;
- padding: 0 10px;
- border-radius: 18px;
- }
- .button-hover[type=submit] {
- opacity: .75;
- transform: scale(0.95, 0.95);
- }
- .uni-input-info {
- height: 54rpx;
- width: 650rpx;
- font-size: 30rpx;
- // border-bottom: 1px solid #dadada;
- // background: #E4E7ED;
- }
- .uni-input-placeholder {
- font-size: 28rpx;
- padding-left: 10rpx;
- }
- .label:before {
- content: '* ';
- color: red;
- }
- </style>
|