uniapp框架——初始化vue3项目(搭建ai项目第一步)

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─utssdk                存放uts文件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源都应存放于此目录
├─uni_modules           存放[uni_module](/uni_modules)。
├─platforms             存放各平台专用页面的目录，详见
├─nativeplugins         App原生语言插件 详见
├─nativeResources       App端原生资源目录
│  ├─android            Android原生资源目录 详见
|  └─ios                iOS原生资源目录 详见
├─hybrid                App端存放本地html文件的目录，详见
├─wxcomponents          存放小程序组件的目录，详见
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─AndroidManifest.xml   Android原生应用清单文件 详见
├─Info.plist            iOS原生应用配置文件 详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss              这里是uni-app内置的常用样式变量

1. uni.$emit(eventName,OBJECT)
触发全局的自定义事件。附加参数都会传给监听器回调。
2. uni.$on(eventName,callback)
监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。
3. uni.$once(eventName,callback)
监听全局的自定义事件。事件可以由 uni.$emit 触发，但是只触发一次，在第一次触发之后移除监听器。
4. uni.$off([eventName, callback])
移除全局自定义事件监听器。

{
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom",
        "navigationBarTitleText": ""
      }
    }
]

<template>
  <view class="container">
    <view class="container-header">
      {{state.title}}
    </view>
    <view class="container-bottom">
      <button class="button" type="primary" @click="monitorBtn">{{state.btnText}}</button>
    </view>
  </view>
</template>
<script setup>
  import {
    reactive,
    onMounted,
    ref
  } from 'vue'
  const state = reactive({
    title: 'AI模拟面试',
    btnText: '模拟面试',
    drawerVisible: false
  })
  const drawRef = ref(null);
  const monitorBtn = () => {
    console.log('模拟面试')
  }
  const reverseDrawer = () => {
    closeDrawer()
  }
  // 打开窗口
  function showDrawer() {
    console.log('drawRef',drawRef)
  }
  // 关闭窗口
  function closeDrawer() {
    drawRef.value.close()
  }
</script>
<style>
  .container {
    width: 100%;
    height: 100vh;
    background: url('https://yongma16.xyz/staticFile/common/img/ling.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    /* fallback for old browsers */
    /* background: -webkit-linear-gradient(to bottom, #8f94fb, #4e54c8); */
    /* Chrome 10-25, Safari 5.1-6 */
    /* background: linear-gradient(to bottom, #8f94fb, #4e54c8); */
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    margin: 0;
    padding: 0;
  }
  .container-header {
    position: absolute;
    width: 100%;
    text-align: center;
    font-family: Helvetica;
    color: rgba(255,255,255,1);
    background: rgba(41, 128, 221,.1);
    font-size: 18px;
    font-weight: bold;
    top: 0px;
  }
  .container-bottom {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
  }
  .button {
    width: 200px;
    background: rgba(255,255,255,.5);
  }
  .drawer-box{
    width: 100%;
  }
  .drawer-box .uni-drawer__content{
    width:100%;
  }
</style>

<template>
  <view class="container">
    <view>
      <uni-forms ref="baseFormRef" label-width='200px' :modelValue="state.baseFormData" label-position='top'>
        <uni-forms-item label="行业" name="industry" required>
          <uni-data-select v-model:value="state.baseFormData.industry" :localdata="state.industryData"
            @change="changeIndustry">
          </uni-data-select>
        </uni-forms-item>
        <uni-forms-item label="岗位" name="post" required>
          <uni-data-select v-model:value="state.baseFormData.post" :localdata="state.postData"
            @change="changePost">
          </uni-data-select>
        </uni-forms-item>
        <uni-forms-item label="工作年限(年)" name="workAge">
          <uni-number-box v-model="state.baseFormData.workAge" :min="0" :max="35" step='0.5' />
        </uni-forms-item>
      </uni-forms>
    </view>
    <view>
      <button type="primary" @click="confirm">
    
        进入面试
    
      </button>
    </view>
  </view>
</template>
<script setup>
  import {
    reactive,
    ref,
    onMounted
  } from 'vue';
  const baseFormRef = ref(null);
  const state = reactive({
    // 基础表单数据
    baseFormData: {
      // 行业
      industry: '',
      // 岗位
      post: '',
      // 工作年限
      workAge: ''
    },
    rules: {
      industry: {
        rules: [{
          required: true,
          errorMessage: '请选择行业',
        }]
      },
      post: {
        rules: [{
          required: true,
          errorMessage: '请选择岗位',
        }]
      },
      workAge: {
        rules: [{
          required: false,
          errorMessage: '请设置工作年限',
        }]
      }
    },
    industryData: [{
        value: 'net',
        text: "互联网"
      },
      {
        value: 'house',
        text: "房地产"
      },
      {
        value: 'drink',
        text: "餐饮店"
      }
    ],
    postData: [{
        value: 'front',
        text: "web前端vue2 vue3 "
      },
      {
        value: 'back',
        text: "后端 java spring cloud"
      }
    ],
  })
  const changeIndustry = (value) => {
    console.log('切换行业', value)
    state.baseFormData.industry = value
  }
  const changePost = (value) => {
    console.log('切换岗位', value)
    state.baseFormData.post = value
  }
  const confirm = () => {
    console.log('confirm')
    baseFormRef.value.validate(['industry', 'post', 'workAge'], (err, formData) => {
      if (!err) {
        console.log('success', formData)
        //userDetail
        uni.navigateTo({
          url: '/pages/chat/index'
        });
      }
    })
  }
  onMounted(()=>{
    baseFormRef.value.setRules(state.rules)
  })
</script>
<style>
  .container {
    height: 100vh;
    padding: 20px;
    background:  linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, .6)), url('https://yongma16.xyz/staticFile/common/img/ling.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
  }
</style>