区块链国赛题目–食品溯源（模块三）

任务 3-1：区块链应用前端功能开发

1．请基于前端系统的开发模板，在登录组件 login.js、组件管理文件components.js 中添加对应的逻辑代码，实现对前端的角色选择功能，并测试功

能完整性，示例页面如下：

具体要求如下：

（1）有明确的提示，提示用户选择角色；

（2）用户可看到四个不同的角色可选（生产商、中间商、超市、消费者）；

（3）每个用户所对应的组件请在 components 中找寻并填入；

（4）页面顶部要有食品溯源平台的网站标题和 logo。

Login.js:

代码片段 1： 
template: ` 
 <div class="login"> 
 <!-- 角色选择 --> 
 <h3 v-if="currentUser === null">选手填写部分</h3> 

 <el-row :gutter="80" v-if="currentUser === null"> 
 <el-col :span="6" v-for="选手填写部分" :key="index"> 
 <div @click="选手填写部分">选手填写部分</div> 
 </el-col> 
 </el-row>
     
     代码片段 2： 
// 用户身份 
 users: [ 
 { 
 name: 选手填写部分, 
 userName: 'producer', 
 component: 选手填写部分, 
 }, 
 { 
 name: 选手填写部分, 
 userName: 'distributor', 
 component: 选手填写部分, 
 }, 
 { 
 name: 选手填写部分, 
 userName: 'retailer', 
 component: 选手填写部分, 
 }, 
 { 
 name: 选手填写部分, 
 userName: 'consumer', 
 component: 选手填写部分, 
 }, 
 ], 

 currentUser: 选手填写部分, // 当前用户 
components.js: 
代码片段 3： 
// 头部组件 
const Header = { 
 // 接受传入的登录状态、用户信息 
 props: ['login', 'user'], 
 template: ` 
 <div class="header"> 
 <img src="选手填写部分" /> 
 <h3>选手填写部分</h3> 
 <span v-if="login" class="user-name">{
  { 选 手 填 写 部
分 }}</span> 
 </div> 
 
 }

2．请基于前端系统的开发模板，在登录组件 login.js、组件管理文件

components.js 中添加对应的逻辑代码，实现对前端的角色选择功能，并测试功

能完整性，示例页面如下：

具体要求如下：

（1）点击角色进入相应角色登录页面；

（2）登录界面提示用户的地址（消费者不显示），有登录操作的相关提示；

（3）登录界面有 5 秒倒计时；

（4）登录界面有“直接登录”按钮，点击可直接跳转到相应角色首页。

login.js:

代码片段 1： 
<!-- 角色登录 --> 
 <div v-else class="is-login"> 
 <h3>登录中......(倒计时：{
  { 选手填写部分}} 秒)</h3> 
 <div>角色: 
 <span>{
  { 选手填写部分}}</span> 
 </div> 
 <!-- 非消费者则显示角色地址 --> 
 <div v-if="选手填写部分">角色地址: 
 <span>{
  { 选手填写部分}}</span> 
 </div> 
 &l