martial-admin-mini/pages/login/login.vue

<template>
  <view class="container">
    <!-- 自定义导航栏 -->
    <view class="nav-bar">
      <view class="nav-title">评分系统</view>
      <view class="nav-right">
        <view class="icon-menu">···</view>
        <view class="icon-close">⊗</view>
      </view>
    </view>

    <!-- 主体内容 -->
    <view class="content">
      <view class="page-title">进入评分</view>

      <!-- 比赛编码输入 -->
      <view class="input-group">
        <view class="input-label">比赛编码</view>
        <view class="input-wrapper">
          <input
            class="input-field"
            type="text"
            placeholder="请输入比赛编码"
            v-model="matchCode"
          />
        </view>
      </view>

      <!-- 评委邀请码输入 -->
      <view class="input-group">
        <view class="input-label">评委邀请码</view>
        <view class="input-wrapper">
          <input
            class="input-field"
            type="text"
            placeholder="请输入评委邀请码"
            v-model="inviteCode"
          />
        </view>
      </view>

      <!-- 立即评分按钮 -->
      <button class="submit-btn" @click="handleSubmit">立即评分</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      matchCode: '',
      inviteCode: ''
    }
  },
  methods: {
    handleSubmit() {
      if (!this.matchCode) {
        uni.showToast({
          title: '请输入比赛编码',
          icon: 'none'
        })
        return
      }
      if (!this.inviteCode) {
        uni.showToast({
          title: '请输入评委邀请码',
          icon: 'none'
        })
        return
      }

      // 判断权限类型
      const role = this.inviteCode.toLowerCase()

      if (role !== 'pub' && role !== 'admin') {
        uni.showToast({
          title: '邀请码错误，请输入pub或admin',
          icon: 'none',
          duration: 2000
        })
        return
      }

      // 保存用户角色到全局数据
      getApp().globalData = {
        userRole: role,
        matchCode: this.matchCode
      }

      // 根据角色跳转到不同页面
      if (role === 'admin') {
        // 裁判长跳转到多场地列表页（可以修改评分）
        uni.navigateTo({
          url: '/pages/score-list-multi/score-list-multi'
        })
      } else {
        // 普通裁判跳转到评分列表页（可以评分）
        uni.navigateTo({
          url: '/pages/score-list/score-list'
        })
      }
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #F5F5F5;
}

/* 导航栏 */
.nav-bar {
  height: 90rpx;
  background: linear-gradient(135deg, #1B7C5E 0%, #2A9D7E 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 30rpx;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 2rpx;
}

.nav-right {
  position: absolute;
  right: 30rpx;
  display: flex;
  align-items: center;
  gap: 30rpx;
}

.icon-menu,
.icon-close {
  width: 60rpx;
  height: 60rpx;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #FFFFFF;
  font-weight: bold;
}

/* 主体内容 */
.content {
  padding: 60rpx 40rpx;
}

.page-title {
  font-size: 40rpx;
  font-weight: 600;
  color: #333333;
  margin-bottom: 60rpx;
  text-align: center;
}

/* 输入组 */
.input-group {
  margin-bottom: 40rpx;
}

.input-label {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
  margin-bottom: 20rpx;
}

.input-wrapper {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  position: relative;
}

.input-field {
  width: 100%;
  font-size: 28rpx;
  color: #333333;
  border: none;
}

.input-field::placeholder {
  color: #CCCCCC;
}

.input-tip {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24rpx;
  color: #FF4D6A;
}

/* 提交按钮 */
.submit-btn {
  width: 100%;
  height: 90rpx;
  background: linear-gradient(135deg, #1B7C5E 0%, #2A9D7E 100%);
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 80rpx;
  box-shadow: 0 8rpx 20rpx rgba(27, 124, 94, 0.3);
}

.submit-btn:active {
  opacity: 0.9;
}
</style>