提交

src/api/2025.js

@@ -0,0 +1,23 @@
+import ajax from '@/utils/request.js';
+
+export function getJoinType(data) {
+    return ajax({
+        url: 'biz/signup/joinType',
+        method: 'GET',
+        urlType: 'Url2025',
+        next: true,
+        errorToast: '当前访问人数过多，请重试。',
+        data
+    });
+}
+
+export function saveData(data) {
+    return ajax({
+        url: 'biz/signup/add',
+        method: 'POST',
+        urlType: 'Url2025',
+        next: true,
+        errorToast: '当前访问人数过多，请重试。',
+        data
+    });
+}

src/config/index.js

@@ -5,6 +5,7 @@ const base = {
   authorization: 'https://bytedance.sxtvs.net/',
   chat: 'https://gpt.smcic.net/',
   ws: 'wss://chatglm.sxtvs.net/queue/join',
+  Url2025: 'https://signup.smcic.net/',
   default: '',
 };
 

src/view/fenghui/index.js

@@ -6,7 +6,6 @@ import { getPageParameters, environment } from "../../config/pageConfig";
 // 判断环境
 environment();
 window.$originData = getPageParameters();
-console.log(window.$originData.orginParames);
 createApp(App).mount("#app")
 
 // 分享

src/view/fenghui/index.vue

@@ -1,102 +1,67 @@
 <template>
     <div class="fenghui">
-        <van-image :width="topWidth" :height="topWidth / 3.7" :src="soundbyteJpg" />
+        <van-image :width="topWidth" :height="topWidth / 3.9" :src="soundbyteJpg" />
+        <br />
+        <div class="introduce">
+            <h4 class="text" v-text="lang[langType].forumTopic"> </h4>
+            <p class="text" v-text="lang[langType].forumTopicContent"></p>
+            <h4 class="text" v-text="lang[langType].wrestleMania"></h4>
+            <p class="text" v-text="lang[langType].wrestleManiaContent"></p>
+            <h4 class="text" v-text="lang[langType].venue"></h4>
+            <p class="text" v-text="lang[langType].venueContent"></p>
+            <h4 class="text" v-text="lang[langType].organization"></h4>
+            <div class="text" v-text="lang[langType].organizationSub1"></div>
+            <div class="text" v-text="lang[langType].organizationSub2"></div>
+            <h4 class="text" v-text="lang[langType].scale"></h4>
+            <div class="text" style="text-indent: 2em;" v-text="lang[langType].scaleContent"></div>
+        </div>
         <br />
         <van-form @submit="onSubmit">
             <div class="submit">
                 <van-cell-group inset>
-                    <van-nav-bar title="报名信息" />
-                    <van-field v-model="from.name" label="姓名" placeholder="请输入姓名" />
-                    <!-- 证件类型 VIP 嘉宾 媒体 工作人员 参展商 普通观众 ... -->
-                    <van-field v-model="from.cardTypeName" is-link readonly label="证件类型" placeholder="选择证件类型"
-                        @click="showCardType = true" />
-                    <van-popup v-model:show="showCardType" destroy-on-close round position="bottom">
-                        <van-picker :model-value="from.cardType" :columns="cardTypeList" @cancel="showCardType = false"
-                            @confirm="onConfirm" />
-                    </van-popup>
-                    <!-- 权限范围 input -->
-                    <van-field v-model="from.permissionName" is-link readonly label="权限范围" placeholder="选择权限范围"
-                        @click="showPermission = true" />
-                    <van-popup v-model:show="showPermission" destroy-on-close round position="bottom" closeable>
-                        <van-nav-bar title="权限范围">
-                        </van-nav-bar>
-                        <van-checkbox-group v-model="from.permission">
-                            <van-cell v-for="(item, index) in permissionList" clickable :key="item.value"
-                                :title="item.text" @click="toggle(index)">
-                                <template #right-icon>
-                                    <van-checkbox :name="item.value" :ref="el => checkboxRefs[index] = el"
-                                        @click.stop />
-                                </template>
-                            </van-cell>
-                        </van-checkbox-group>
-                    </van-popup>
-                    <van-field v-model="from.tel" label="联系方式" type="tel" placeholder="请输入手机号" />
-                    <van-field placeholder="照片" label="上传照片" >
+                    <h4 class="title" v-text="lang[langType].basicInformation"></h4>
+                    <van-field label-width="7em" v-model="from.name" :label="lang[langType].name"
+                        :placeholder="lang[langType].nameContent" />
+                    <van-field label-width="7em" v-model="from.idCard" :label="lang[langType].idCard"
+                        :placeholder="lang[langType].idCardContent" />
+                    <van-field label-width="7em" v-model="from.nationality" :label="lang[langType].nationality"
+                        :placeholder="lang[langType].nationalityContent" />
+                    <van-field label-width="7em" v-model="from.company" :label="lang[langType].company"
+                        :placeholder="lang[langType].companyContent" />
+                    <van-field label-width="7em" v-model="from.career" :label="lang[langType].career"
+                        :placeholder="lang[langType].careerContent" />
+                    <van-field label-width="7em" v-model="from.contact" :label="lang[langType].contact"
+                        :placeholder="lang[langType].contactContent" />
+                    <van-field label-width="7em" :placeholder="lang[langType].photoContent"
+                        :label="lang[langType].photo">
                         <template #input>
-                            <van-uploader accept="image/*" v-model="from.file" :max-count="1" :max-size="524288000"
-                                @oversize="filesize" result-type="file">
+                            <van-uploader accept="image/*" v-model="from.photo" :max-count="1" :max-size="524288000"
+                                @oversize="filesize" :after-read="beforeRead" result-type="file">
                                 <template #preview-cover>
                                     <van-icon color="#000" size="40" @click="previewClick" name="play-circle-o play" />
                                 </template>
                             </van-uploader>
-                            <p style="font-size: 12px; color: #fff">
-                                支持上传jpg,png等格式的图片，大小100M以内
-                            </p>
+                            <p style="font-size: 12px;" v-text="lang[langType].photoSubContent"> </p>
                         </template>
                     </van-field>
+                    <br />
+                    <h4 class="title" v-text="lang[langType].conference"></h4>
+                    <van-field label-width="7em" v-model="from.cardTypeName" is-link readonly
+                        :label="lang[langType].conferenceType" :placeholder="lang[langType].conferenceTypeContent"
+                        @click="showCardType = true" />
+                    <van-popup v-model:show="showCardType" destroy-on-close round position="bottom">
+                        <van-picker :model-value="from.cardType" :columns="cardTypeList" @cancel="showCardType = false"
+                            @confirm="onConfirm" />
+                    </van-popup>
+                    <br />
+                    <h4 class="title" v-text="lang[langType].orther"></h4>
+                    <van-field label-width="7em" v-model="from.message" rows="3" autosize label="备注" type="textarea"
+                        :placeholder="lang[langType].ortherNotesContent" />
                 </van-cell-group>
             </div>
-            <div style="padding: 40px 16px 10px 16px">
-                <van-button block color="linear-gradient(180deg, #FFFFFF 0%, #CDCCFF 100%);" native-type="submit">
-                    提交申请
-                </van-button>
-            </div>
+            <div class="btn_bottom" native-type="submit" v-text="lang[langType].submit" @click="onSubmit"> </div>
+            <div style="text-align: center;line-height: 2.5em;font-size: 12px;" v-text="lang[langType].copyright"></div>
         </van-form>
-        <br />
-        <div class="introduce">
-            <van-nav-bar title="活动介绍" />
-            <h4 class="text">
-                论坛名称：
-            </h4>
-            <p class="text">
-                2025中国-拉美互联⽹发展与合作论坛
-            </p>
-            <h4 class="text">
-                论坛主题：
-            </h4>
-            <p class="text">
-                共享数字发展新机遇 共建中拉⽹络空间命运共同体
-            </p>
-            <h4 class="text">
-                举办时间：（会期2天，不含报到和离会）
-            </h4>
-            <p class="text">
-                2025年5⽉15⽇⾄16⽇
-            </p>
-            <h4 class="text">
-                举办地点：
-            </h4>
-            <p class="text">
-                西安国际会议中⼼（西安市灞桥区浐灞⽣态区世博⼤道2626号）
-            </p>
-            <h4 class="text">
-                组织机构：
-            </h4>
-            <div class="text">
-                主办单位：国家互联⽹信息办公室 陕西省⼈民政府
-            </div>
-            <div class="text">
-                承办单位：陕西省互联⽹信息办公室 陕西省外事办公室
-            </div>
-            <h4 class="text">
-                参会嘉宾及论坛规模：
-            </h4>
-            <div class="text" style="text-indent: 2em;">
-                拟邀请中国及拉美和加勒⽐国家政府部门代表、驻华使节，国际组织、⽹信企业、智库、媒体
-                及机构代表等,论坛参会论坛规模约300⼈。其中外宾约150⼈，包含拉美国家⽹络安全研修班30
-                余名外籍学员。
-            </div>
-        </div>
     </div>
 </template>
 <script setup>
@@ -107,6 +72,8 @@ import axios from 'axios';
 import config from '@/config/index.js';
 import soundbyteJpg from '../../assets/img/2025lameifenghui.png';
 
+import { getJoinType, saveData } from '@/api/2025.js';
+
 import langpkg from './lang.js';
 // import en from './en.json';
 /**
@@ -116,53 +83,47 @@ import langpkg from './lang.js';
  */
 
 const lang = ref(langpkg);
-console.log(lang)
+const langType = ref('zh');
 const preview = ref('');
 const showCardType = ref(false);
-const cardTypeList = [
-    { text: 'VIP', value: 'VIP' },
-    { text: '嘉宾', value: '嘉宾' },
-    { text: '媒体', value: '媒体' },
-    { text: '工作人员', value: '工作人员' },
-    { text: '参展商', value: '参展商' },
-    { text: '普通观众', value: '普通观众' },
-]
-const showPermission = ref(false);
-const permissionList = [
-    { text: 'VIP', value: 'VIP' },
+const cardTypeList = ref([
     { text: '嘉宾', value: '嘉宾' },
     { text: '媒体', value: '媒体' },
-    { text: '工作人员', value: '工作人员' },
     { text: '参展商', value: '参展商' },
     { text: '普通观众', value: '普通观众' },
-]
+])
 const isFile = () => {
-    return from.file && from.file.length;
+    return from.photo && from.photo.length;
 };
 const topWidth = ref(window.$originData.orginParames.availWidth);
 const from = reactive({
     name: '',
-    tel: '',
+    idCard: '',
+    nationality: '',
+    company: '',
+    career: '',
+    contact: '',
+    photoUrl: '',
     cardType: [],
-    permissionName: '',
-    permission: [],
-    file: [],
+    photo: [],
+    message: ''
 });
 
-const checkboxRefs = ref([]);
-const toggle = (index) => {
-    checkboxRefs.value[index].toggle();
-    from.permissionName = from.permission.map((item) => item).join(',');
-};
+onBeforeUpdate(() => { });
 
-onBeforeUpdate(() => {
-    checkboxRefs.value = [];
-});
+getJoinType().then((res) => {
+    cardTypeList.value = res.map((item) => {
+        return {
+            text: item.dictLabel,
+            value: item.dictValue,
+        }
+    })
+})
 
 const filesize = () => showToast('超出文件大小限制');
 const previewClick = () => {
     let getUrl = null;
-    const file = from.file[0].file;
+    const file = from.photo[0].file;
     if (window.createObjectURL != undefined) {
         //basic
         getUrl = window.createObjectURL(file);
@@ -183,39 +144,57 @@ const onConfirm = ({ selectedValues, selectedOptions }) => {
     from.cardType = selectedValues;
     from.cardTypeName = selectedOptions[0].text;
 };
-// 选择权限范围
 
-const onSubmit = () => {
-    if (!isFile) showToast('请上传作品');
+const beforeRead = () => {
+    if (!isFile) showToast('请选择照片');
     const oriData = new FormData();
-    oriData.append('name', from.name);
-    oriData.append('phone', from.tel);
-    oriData.append('file', from.file[0].file);
-
-    showToast.loading({
-        message: '报名中...',
-        forbidClick: true,
-        duration: 0,
-    });
+    oriData.append('file', from.photo[0].file);
     axios({
         method: 'post',
-        url: config.base.ajax + 'store',
+        url: config.base.Url2025 + 'dev/file/uploadDynamicReturnUrl',
         headers: {
             'Content-Type': 'multipart/form-data',
         },
         data: oriData,
     })
-        .then(() => {
-            showToast('报名成功');
-            // 清空表单内容
-            from.name = '';
-            from.tel = '';
-            from.university = '';
-            from.file = [];
+        .then(res => {
+            if (res.status !== 200 || res.data.code !== 0) {
+                showToast('上传失败');
+                from.photoUrl = ''
+                return
+            }
+            from.photoUrl = res.data.data
         })
-        .catch(() => {
-            showToast('报名失败');
-        });
+    return true;
+};
+
+// 选择权限范围
+const onSubmit = () => {
+    if (!isFile) showToast('请上传作品');
+    saveData({
+        "name": from.name,
+        "photo": from.photoUrl,
+        "nationality": from.nationality,
+        "passportOrId": from.idCard,
+        "contact": from.contact,
+        "position": from.career,
+        "company": from.company,
+        "participationType": from.cardType.join(','),
+        "remarks": from.message
+    }).then(() => {
+        showToast('报名成功');
+        // 清空表单内容
+        from.name = '';
+        from.idCard = '';
+        from.nationality = '';
+        from.company = '';
+        from.career = '';
+        from.photoUrl = ''
+        from.contact = '';
+        from.cardType = [];
+        from.photo = [];
+        from.message = '';
+    })
 };
 </script>
 <style lang="scss">
@@ -223,30 +202,29 @@ const onSubmit = () => {
     overflow-x: hidden;
     width: 100vw;
     min-height: 100vh;
-    background: linear-gradient(270deg, #1C4DD6 0%, #1D18BC 100%);
+    // background: linear-gradient(270deg, #1C4DD6 0%, #1D18BC 100%);
     font-weight: 400;
-    padding-bottom: 20px;
+
+    input {
+        text-align: right;
+    }
 
     .text {
         padding: 8px 8px 0 8px;
         text-align: justify;
         line-height: 1.5em;
         font-size: 14px;
-    }
-
-    .van-nav-bar,
-    .van-nav-bar__title {
-        background-color: #ffffff00;
-        color: #FEFEFE;
+        color: #3D3D3D;
     }
 
     .introduce {
-        background-color: rgb(0, 0, 0, 0.1);
-        color: #FEFEFE;
-        margin: 20px;
+        background-color: #FAFAFA;
         padding-bottom: 10px;
-        border: 1px solid rgba(254, 254, 254, 0.4);
-        border-radius: 8px;
+        overflow: hidden;
+
+        h4 {
+            color: #031280;
+        }
     }
 
 
@@ -264,24 +242,26 @@ const onSubmit = () => {
         background-color: #000;
     }
 
+    .btn_bottom {
+        color: #ffffff;
+        text-align: center;
+        height: 60px;
+        line-height: 60px;
+        background: linear-gradient(270deg, #1D19BC 0%, #1C4CD5 100%);
+    }
+
     .submit {
-        margin: 20px;
-        border: 1px solid rgba(254, 254, 254, 0.4);
-        border-radius: 8px;
-        background-color: rgb(0, 0, 0, 0.1);
+        .title {
+            padding: 0 16px;
+        }
 
         .van-cell-group,
         .van-cell {
-            background-color: rgb(0, 0, 0, 0);
             margin: 0%;
         }
 
-        .van-field__label {
-            background-color: rgb(0, 0, 0, 0);
-            color: #FFFFFF;
-        }
-
         .van-field__body input {
+
             &::placeholder,
             &::-webkit-input-placeholder,
             &:-moz-placeholder,

src/view/fenghui/lang.js

@@ -1,9 +1,41 @@
 export default {
     "zh": {
-        "introduce": "活动介绍"
-
+        "forumTopic": "论坛主题",
+        "forumTopicContent": "共享数字发展新机遇 共建中拉⽹络空间命运共同体",
+        "wrestleMania": "举办时间",
+        "wrestleManiaContent": "2025年5⽉15⽇⾄16⽇（会期2天，不含报到和离会）",
+        "venue": "举办地点",
+        "venueContent": "西安国际会议中⼼（西安市灞桥区浐灞⽣态区世博⼤道2626号）",
+        "organization": "组织机构",
+        "organizationSub1": "主办单位：国家互联⽹信息办公室 陕西省⼈民政府",
+        "organizationSub2": "承办单位：陕西省互联⽹信息办公室 陕西省外事办公室",
+        "scale": "活动规模",
+        "scaleContent": "拟邀请中国及拉美和加勒⽐国家政府部门代表、驻华使节，国际组织、⽹信企业、智库、媒体及机构代表等,论坛参会论坛规模约300⼈。其中外宾约150⼈，包含拉美国家⽹络安全研修班30余名外籍学员。",
+        "basicInformation": "个人基本信息",
+        "name": "姓名",
+        "nameContent": "请输入姓名(中英文名称，必填)",
+        "idCard": "身份证/护照号",
+        "idCardContent": "请输入身份证/护照号(必填)",
+        "nationalityContent": "请选择国籍(必填)",
+        "nationality": "国籍",
+        "company": "公司/机构名称",
+        "companyContent": "公司/机构名称",
+        "career": "职业",
+        "careerContent": "请输入职业/职务",
+        "contact": "联系方式",
+        "contactContent": "请输入联系方式",
+        "photo": "照片",
+        "photoContent": "请选择照片",
+        "photoSubContent": "支持上传jpg,png等格式的图片，大小100M以内",
+        "conference": "参会信息",
+        "conferenceType": "参会类型",
+        "conferenceTypeContent": "请选择参会类型",
+        "orther": "其他材料",
+        "ortherNotes": "备注",
+        "ortherNotesContent": "特殊需求(如无障碍设施、饮食禁忌等)",
+        "submit": "提交申请",
+        "copyright": "由陕西广电融媒体集团技术研究院提供计算服务"
     },
     "en": {
-        "introduce": "Introduce"
     }
 }