登录页联调开发，首页开发

gaoluyang

2025-08-06 6abe22fc75b115d2a68103a4d8b24d0815a016f8

 src/pages/index.vue

@@ -1,75 +1,179 @@
<template>
  <view class="content">
    <image class="logo" src="@/static/logo.png"></image>
    <view class="text-area">
      <text class="title"> RuoYi-Geek-App</text>
    </view>
    <view class="text-area">
      <up-text type="primary" text="uview-plus"></up-text>
    </view>
    <view class="charts-box">
      <qiun-data-charts type="column" :chartData="chartData" />
    </view>
      <view>
         <view class="currentFactory">
            <up-text type="primary" :text="userStore.currentFactoryName" @click="show = true"
                         class="factoryName" suffixIcon="arrow-right" :iconStyle="iconStyle"></up-text>
         </view>
         <up-picker :show="show" :columns="factoryList" @confirm="changeFactory"></up-picker>
         <view>
            <view class="bg-img"></view>
         </view>
         <view class="bg-img">
            <up-grid
               :border="false"
               col="4"
            >
               <up-grid-item
                  v-for="(listItem,listIndex) in list"
                  :key="listIndex"
               >
                  <up-icon
                     :customStyle="{paddingTop:20+'rpx'}"
                     :name="listItem.name"
                     :size="22"
                  ></up-icon>
                  <text class="grid-text">{{listItem.title}}</text>
               </up-grid-item>
            </up-grid>
         </view>
      </view>
<!--      <view class="select-container">-->
<!--         <up-picker-data-->
<!--            class="picker"-->
<!--            v-model="currentFatoryId"-->
<!--            title="请选择公司"-->
<!--            :options="factoryList"-->
<!--            valueKey="id"-->
<!--            labelKey="name">-->
<!--         </up-picker-data>-->
<!--      </view>-->
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import {ref, onMounted, nextTick, reactive} from 'vue';
import {userLoginFacotryList} from "@/api/login";
import modal from "@/plugins/modal";
import useUserStore from "@/store/modules/user";

const chartData = ref({});

onMounted(() => { getServerData() });

function getServerData() {
  // 模拟从服务器获取数据时的延时
  setTimeout(() => {
    let res = {
      categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
      series: [
        {
          name: '目标值',
          data: [35, 36, 31, 33, 13, 34],
        },
        {
          name: '完成量',
          data: [18, 27, 21, 24, 6, 28],
        },
      ],
    };
    chartData.value = JSON.parse(JSON.stringify(res));
  }, 500);
const userStore = useUserStore()
const factoryId = ref('');
const show = ref(false);
const factoryList = ref([]);
const factoryListTem = ref([]);
const iconStyle = {
   fontSize: '14px',
   color: '#165DFF'
}
// 创建响应式数据
const list = reactive([
   {
      name: 'photo',
      title: '图片'
   },
   {
      name: 'lock',
      title: '锁头'
   },
   {
      name: 'star',
      title: '星星'
   },
   {
      name: 'hourglass',
      title: '沙漏'
   },
   {
      name: 'home',
      title: '首页'
   },
   {
      name: 'volume', // 注意：这里修改了 name 从 'star' 改为 'volume'，以避免列表中两个元素具有相同的 name
      title: '音量'
   },
]);
// 创建对子组件的引用
const uToastRef = ref(null);

function getUserLoginFacotryList() {
   userLoginFacotryList({userName: userStore.nickName}).then(res => {
      // 检查res.data是否为数组
      factoryList.value[0] = []
      if (res.data && Array.isArray(res.data)) {
         factoryListTem.value = res.data
         res.data.forEach(item => {
            factoryList.value[0].push(item.deptName)
         })
         factoryId.value = userStore.currentDeptId
      } else {
         // 如果res.data不是数组，设置为空数组
         factoryList.value = []
      }
   }).catch(error => {
      modal.msgError('获取公司列表失败:', error)
      factoryList.value = []
   })
}
const changeFactory = async (arr) => {
   show.value = false;
   const factoryId = factoryListTem.value[arr.indexs[0]].deptId
   const loginForm = {
      username: userStore.name,
      password: uni.getStorageSync('remembered_password'),
      factoryId: factoryId,
   }
   modal.loading("刷新中，请耐心等待...")
   userStore.loginCheckFactory(loginForm).then(() => {
      modal.closeLoading()
      nextTick(() => {
         loginSuccess()
      });
   }).catch(() => {
      modal.closeLoading()
   })
}
function loginSuccess(result) {
   uni.reLaunch({
      url: '/pages/index'
   });
}

// 定义方法
const click = (name) => {
   if (uToastRef.value) {
      uToastRef.value.success(`点击了第${name + 1}个`); // 注意：这里加1是因为通常我们是从第1个开始计数的
   }
};

onMounted(() => {
   // 设置用户信息
   userStore.getInfo()
   getUserLoginFacotryList()
});
</script>

<style scoped>
<style scoped lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
   background-color: transparent !important;
   padding: 14px;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
.currentFactory {
   margin-top: 12px;
   margin-left: 6px;
   font-weight: 400;
   font-size: 14px;
   display: flex;
}

.text-area {
  display: flex;
  justify-content: center;
.factoryName {
   width: auto;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
:deep(.u-text) {
   align-items: flex-end;
}

.charts-box {
  width: 100%;
  height: 300px;
.bg-img {
   margin-top: 12px;
   width: 100%;
   height: 145px;
   background-color: #ffffff;
   border-radius: 10px 10px 10px 10px;
}
.grid-text {
   font-size: 14px;
   color: #909399;
   padding: 10rpx 0 20rpx 0rpx;
   /* #ifndef APP-PLUS */
   box-sizing: border-box;
   /* #endif */
}
</style>