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

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

任务 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