提交

src/view/fenghui/index.vue

@@ -1,92 +1,169 @@
 <template>
-    <div class="WorldContribution">
-        <van-image :width="topWidth" :height="topWidth / 1.7" :src="soundbyteJpg" />
+    <div class="fenghui">
+        <van-image :width="topWidth" :height="topWidth / 3.7" :src="soundbyteJpg" />
         <br />
-        <van-cell-group inset>
+        <div class="introduce">
             <van-nav-bar title="活动介绍" />
+            <h4 class="text">
+                论坛名称：
+            </h4>
             <p class="text">
-                尽管曾经的比赛已成过眼云烟，但总有些经典瞬间无法忘却。那些年的世界杯名场面、那些与挚友一同熬夜看比赛的日子，那些因为足球而欣喜、落寞、激动、感伤的时刻，会永远铭记心中。
+                2025中国-拉美互联⽹发展与合作论坛
             </p>
+            <h4 class="text">
+                论坛主题：
+            </h4>
             <p class="text">
-                用户可在下方“我要投稿”上传自己与足球相关的视频，题材包含：足球技巧展示、喜爱的球队/球星、球衣收藏、印象深刻的比赛等各种足球、世界杯相关的视频，并点击“我的投稿”分享邀请好友助威。参赛作品严禁抄袭、搬运等非原创内容、涉嫌违规内容
+                共享数字发展新机遇 共建中拉⽹络空间命运共同体
             </p>
-        </van-cell-group>
+            <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>
         <br />
         <van-form @submit="onSubmit">
-            <van-cell-group inset>
-                <van-nav-bar title="报名信息" />
-                <van-field required v-model="from.name" label="选手姓名" placeholder="请输入用户名"
-                    :rules="[{ validator: isString, message: '请输入正确内容' }]" />
-                <van-field required v-model="from.tel" label="联系方式" type="tel" placeholder="请输入手机号"
-                    :rules="[{ validator: isNumber, message: '请输入正确内容' }]" />
-                <van-field required v-model="from.university" label="参赛院校" placeholder="请输入院校名称"
-                    :rules="[{ validator: isString, message: '请输入正确内容' }]" />
-                <van-field required v-model="from.description" label="作品简介" placeholder="请输入简介"
-                    :rules="[{ validator: isString, message: '请输入正确内容' }]" />
-                <van-field placeholder="上传作品" required label="上传作品"
-                    :rules="[{ validator: isFile, message: '请输入正确内容' }]">
-                    <template #input>
-                        <van-uploader accept="image/*" v-model="from.file" :max-count="1" :max-size="524288000"
-                            @oversize="filesize" result-type="file">
-                            <template #preview-cover>
-                                <van-icon color="#fff" size="40" @click="previewClick" name="play-circle-o play" />
-                            </template>
-                        </van-uploader>
-                        <p style="font-size: 12px; color: #666">
-                            支持上传jpg,png等格式的图片，大小100M以内
-                        </p>
-                    </template>
-                </van-field>
-                <div style="padding: 5px">
-                    <van-button block type="danger" native-type="submit">
-                        我要报名
-                    </van-button>
-                </div>
-            </van-cell-group>
+            <div class="submit">
+                <van-cell-group inset>
+                    <van-nav-bar title="报名信息" />
+                    <van-field required v-model="from.name" label="姓名" placeholder="请输入姓名"
+                        :rules="[{ validator: isString, message: '请输入正确内容' }]" />
+                    <!-- 证件类型 VIP 嘉宾 媒体 工作人员 参展商 普通观众 ... -->
+                    <van-field v-model="from.cardTypeName" is-link readonly label="证件类型" placeholder="选择证件类型"
+                        @click="showCardType = true" required />
+                    <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" required />
+                    <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 required v-model="from.tel" label="联系方式" type="tel" placeholder="请输入手机号" />
+                    <van-field placeholder="照片" required label="上传照片"
+                        :rules="[{ validator: isFile, message: '请输入正确内容' }]">
+                        <template #input>
+                            <van-uploader accept="image/*" v-model="from.file" :max-count="1" :max-size="524288000"
+                                @oversize="filesize" 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>
+                        </template>
+                    </van-field>
+                </van-cell-group>
+            </div>
+            <div style="padding: 40px 16px">
+                <van-button block color="linear-gradient(180deg, #FFFFFF 0%, #CDCCFF 100%);" native-type="submit">
+                    提交申请
+                </van-button>
+            </div>
         </van-form>
     </div>
 </template>
 <script setup>
 // import { onMounted, reactive } from "vue";
-import { ref, reactive } from 'vue';
+import { ref, reactive, onBeforeUpdate } from 'vue';
 import { showToast } from 'vant';
 import axios from 'axios';
 import config from '@/config/index.js';
-import soundbyteJpg from '../../assets/img/upbg.jpg';
+import soundbyteJpg from '../../assets/img/2025lameifenghui.png';
+
+import langpkg from './lang.js';
+// import en from './en.json';
 /**
  * window.$originData.orginParames.title 页面标题
  * window.$originData.orginParames.parameters 固定参数值
  * window.$originData.urlParames url参数
  */
 
+const lang = ref(langpkg);
+console.log(lang)
 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' },
+    { text: '嘉宾', value: '嘉宾' },
+    { text: '媒体', value: '媒体' },
+    { text: '工作人员', value: '工作人员' },
+    { text: '参展商', value: '参展商' },
+    { text: '普通观众', value: '普通观众' },
+]
 const isFile = () => {
     return from.file && from.file.length;
 };
 const isString = v => {
     return !!v && typeof v == 'string' && isNaN(v);
 };
-const isNumber = () => {
-    return /1[0-9]{10}/g.test(from.tel);
-};
 const topWidth = ref(window.$originData.orginParames.availWidth);
-const shanshipin = window.$shanshipin || {};
-shanshipin.Phone =
-    window.$originData.urlParames.phone || shanshipin.Phone || '';
-shanshipin.UserName =
-    decodeURI(window.$originData.urlParames.userName || '') ||
-    shanshipin.UserName ||
-    '';
 const from = reactive({
-    name: shanshipin.UserName || '',
-    tel:
-        !isNaN(shanshipin.Phone) && Number(shanshipin.Phone)
-            ? shanshipin.Phone
-            : '',
-    university: '',
+    name: '',
+    tel: '',
+    cardType: [],
+    permissionName: '',
+    permission: [],
     file: [],
 });
 
+const checkboxRefs = ref([]);
+const toggle = (index) => {
+    checkboxRefs.value[index].toggle();
+    from.permissionName = from.permission.map((item) => item).join(',');
+};
+
+onBeforeUpdate(() => {
+    checkboxRefs.value = [];
+});
+
 const filesize = () => showToast('超出文件大小限制');
 const previewClick = () => {
     let getUrl = null;
@@ -105,13 +182,19 @@ const previewClick = () => {
     preview.value = getUrl;
 };
 
+// 选择证件类型
+const onConfirm = ({ selectedValues, selectedOptions }) => {
+    showCardType.value = false;
+    from.cardType = selectedValues;
+    from.cardTypeName = selectedOptions[0].text;
+};
+// 选择权限范围
+
 const onSubmit = () => {
     if (!isFile) showToast('请上传作品');
     const oriData = new FormData();
     oriData.append('name', from.name);
     oriData.append('phone', from.tel);
-    oriData.append('description', from.description);
-    oriData.append('university', from.university);
     oriData.append('file', from.file[0].file);
 
     showToast.loading({
@@ -133,7 +216,6 @@ const onSubmit = () => {
             from.name = '';
             from.tel = '';
             from.university = '';
-            from.description = '';
             from.file = [];
         })
         .catch(() => {
@@ -142,48 +224,67 @@ const onSubmit = () => {
 };
 </script>
 <style lang="scss">
-.WorldContribution {
+.fenghui {
     width: 100vw;
     min-height: 100vh;
-    background-image: url(../../assets/img/bg.jpg);
+    background-color: #0927A1;
     background-size: 100% 100%;
     font-weight: 400;
     padding-bottom: 20px;
 
     .text {
-        text-indent: 2em;
         padding: 8px 8px 0 8px;
         text-align: justify;
         line-height: 1.5em;
-        font-size: 16px;
+        font-size: 14px;
     }
 
-
-    .van-hairline--bottom:after {
-        border-bottom-width: 0px;
+    .van-nav-bar,
+    .van-nav-bar__title {
+        background-color: #ffffff00;
+        color: #FEFEFE;
     }
 
-    .van-nav-bar__content {
-        background-image: url('../../assets/img/title.png');
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
-        overflow: hidden;
+    .introduce {
+        background-color: rgb(0, 0, 0, 0.1);
+        color: #FEFEFE;
+        margin: 20px;
+        padding-bottom: 10px;
+        border: 1px solid rgba(254, 254, 254, 0.4);
+        border-radius: 8px;
     }
 
 
-    .van-nav-bar__title {
-        color: #f63634;
-        font-size: 23px;
+    .van-hairline--bottom:after {
+        border-bottom-width: 0px;
     }
 
-
     .van-button__text {
         font-size: 15px;
         font-weight: 400;
+        color: #031280;
     }
 
     .van-uploader__preview-cover {
         background-color: #000;
     }
+
+    .submit {
+        margin: 20px;
+        border: 1px solid rgba(254, 254, 254, 0.4);
+        border-radius: 8px;
+        background-color: rgb(0, 0, 0, 0.1);
+
+        .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;
+        }
+    }
 }
 </style>

src/view/fenghui/lang.js

@@ -0,0 +1,10 @@
+export default {
+    "zh": {
+        "introduce": "活动介绍"
+
+    },
+    "en": {
+        "introduce": "Introduce"
+    }
+
+}