任务二工单3:取餐信息界面研发
1.效果图
1、根据设计效果图，完成take-foods.vue的取餐信息页面布局，布局效果应与图2.3.2所示保持一致。特别注意，view的class样式应全部引用自/static/style/app.scss文件，该文件包含了前端团队小组整理的通用样式类。以下是布局代码：
<template>
<view class="container">
<view class="d-flex w-100 h-100 flex-column just-content-center align-items-center">
<image src="/static/images/loading.gif" class="drinks-img"></image>
<view class="tips d-flex flex-column align-items-center font-size-base text-color-assist">
<view>您还没有点单</view>
<view>快去犒劳一下自己吧~</view>
</view>
<button type="primary" class="drink-btn" size="default">去点餐</button>
<view class="font-size-sm text-color-primary">查看历史订单</view>
</view>
</view>
</template>
<script>
</script>
<style lang="scss" scoped>
.drinks-img {
width: 350rpx;
height: 350rpx;
}
.tips {
margin: 60rpx 0 80rpx;
line-height: 48rpx;
}
.drink-btn {
width: 320rpx;
border-radius: 50rem !important;
margin-bottom: 40rpx;
font-size: $font-size-base;
line-height: 3.0;
}
</style>
2.3.2 取餐信息页面效果图.png
2、团队成员编写取餐页面逻辑，当用户点击“去点餐”按钮时，页面会切换至点餐配送界面（menu.vue）。以下是相关代码片段。用户可以通过点击来查看历史订单，并通过@tap指令实现交互，从而跳转至历史订单界面。
menu.vue
<template>
<view class="container">
<view class="d-flex w-100 h-100 flex-column just-content-center align-items-center">
<image src="/static/images/loading.gif" class="drinks-img"></image>
<view class="tips d-flex flex-column align-items-center font-size-base text-color-assist">
<view>您还没有点单</view>
<view>快去犒劳一下自己吧~</view>
</view>
<button type="primary" class="drink-btn" size="default" @tap="menu">去点餐</button>
<view class="font-size-sm text-color-primary" @tap="orders">查看历史订单</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
menu() {
uni.switchTab({
url: '/pages/menu/menu'//切换点餐界面
})
}
}
}
</script>
<style lang="scss" scoped>
.drinks-img {
width: 350rpx;
height: 350rpx;
}
.tips {
margin: 60rpx 0 80rpx;
line-height: 48rpx;
}
.drink-btn {
width: 320rpx;
border-radius: 50rem !important;
margin-bottom: 40rpx;
font-size: $font-size-base;
line-height: 3.0;
}
</style>
在跳转至历史订单界面之前，系统需先判断用户是否已经登录。若检测到用户未登录状态，系统将引导用户至登录界面，并在登录成功后将用户状态标记为已登录。若用户已登录，则直接跳转至历史订单界面。
在“pages”目录下创建两个新文件：一个是登录界面（login.vue），另一个是历史订单界面（orders.vue）。随后，在pages.json文件中对这两个界面的样式进行相应的配置。
orders.vue
<template>
<view>
历史订单
</view>
</template>
<script>
export default {
data() {
return { };
}
}
</script>
<style lang="scss">
</style>
pages.json中样式设定
{
"path" : "pages/login/login",
"style" :
{
"navigationBarTitleText": "登录",
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#ffffff"
}
},
{
"path" : "pages/orders/orders",
"style" :
{
"navigationBarTitleText": "历史订单",
"navigationBarTextStyle": "black",
"navigationBarBackgroundColor": "#ffffff"
}
}
团队成员完成登录页面（login.vue）的布局设计，其效果展示请参见图2.3.4。
2.3.4 登录界面效果图.png
登录界面代码login
<template>
<view class="container">
<view class="intro">
<image src="/static/images/logo.png"></image>
<view class="tips">
一杯好茶，一口软欧包
<br>
在云鲤遇见两种美好
</view>
</view>
<view class="bottom">
<!-- #ifdef H5 -->
<button type="primary" size="default" class="login-btn" @tap="login">
登录
</button>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<button type="primary" size="default" class="login-btn" open-type="getUserInfo" lang="zh_CN" >
<image src="/static/images/mine/wechat.png"></image>
微信一键登录
</button>
<!-- #endif -->
<view class="d-flex flex-column justify-content-evenly align-items-center text-center" style="height: 30vh;">
<view class="w-100 font-size-base text-color-assist">新用户登录即加入会员，享会员权益</view>
<view class="w-100 row d-flex just-content-around align-items-center font-size-sm text-color-assist">
<view class="grid">
<image src="/static/images/mine/rhyl.png"></image>
<view>入会有礼</view>
</view>
<view class="grid">
<image src="/static/images/mine/jfdh.png"></image>
<view>积分兑换</view>
</view>
<view class="grid">
<image src="/static/images/mine/sjtq.png"></image>
<view>升级特权</view>
</view>
<view class="grid">
<image src="/static/images/mine/srtq.png"></image>
<view>生日特权</view>
</view>
<view class="grid">
<image src="/static/images/mine/nxbz.png"></image>
<view>云鲤宝藏</view>
</view>
</view>
<view class="font-size-base text-color-primary">会员权益说明</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods:{ }
}
</script>
<style lang="scss" scoped>
.intro {
width: 100%;
height: 50vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
font-size: $font-size-base;
color: $text-color-assist;
image {
width: 165rpx;
height: 165rpx;
}
.tips {
line-height: 72rpx;
text-align: center;
}
}
.bottom {
height: 40vh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0 40rpx;
.login-btn {
width: 100%;
border-radius: 50rem !important;
display: flex;
align-items: center;
justify-content: center;
padding: 10rpx 0;
image {
width: 36rpx;
height: 30rpx;
margin-right: 10rpx;
}
}
.row {
.grid {
width: 20%;
image {
width: 60rpx;
height: 60rpx;
margin-bottom: 10rpx;
}
}
}
}
</style>
★3、为了有效管理本项目的状态数据，团队小组成员引入了/store/index.js文件，如图2.3.3所示。在index.js中，不仅存储了用户登录信息、商户详情、购物车内容、取餐方式、地址信息等数据，如图2.3.4所示，还集成了共享方法，例如清空购物车中的商品、配置订单信息、更新用户信息等。此外，在main.js文件中，定义了所有Vue实例共享的$store方法，具体代码如下：
import Vue from 'vue'
import App from './App'
import api from './api'
import store from './store'
Vue.config.productionTip = false
App.mpType = 'app'
Vue.prototype.$api = api
Vue.prototype.$store = store
const app = new Vue({
...App
})
app.$mount()
2.3.5 引入store下index.js状态文件.png
2.3.6 引入store中状态对象.png
在实现登录页面的交互时，点击事件会触发store/index.js文件中的SET_MEMBER动作，从而将用户信息存储到state.member状态中。当用户点击图2.3.2以查看历史订单时，可以利用this.$store.getters.isLogin方法来进行逻辑判断：未登录状态将引导用户至登录页面，而登录状态则会重定向至历史订单页面。以下是本工单登录页面的代码实现和点餐页面完整代码：
take-foods.vue
<template>
<view class="container">
<view class="d-flex w-100 h-100 flex-column just-content-center align-items-center">
<image src="/static/images/loading.gif" class="drinks-img"></image>
<view class="tips d-flex flex-column align-items-center font-size-base text-color-assist">
<view>您还没有点单</view>
<view>快去犒劳一下自己吧~</view>
</view>
<button type="primary" class="drink-btn" size="default" @tap="menu">去点餐</button>
<view class="font-size-sm text-color-primary" @tap="orders">查看历史订单</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
menu() {
uni.switchTab({
url: '/pages/menu/menu'//切换点餐界面
})
},
orders() {
//如果未登录，如何判断是否登录
if(!this.$store.getters.isLogin) {
uni.navigateTo({url: '/pages/login/login'})
return
}
//如果已登录
uni.navigateTo({
url: '/pages/orders/orders'
})
},
}
}
</script>
<style lang="scss" scoped>
.drinks-img {
width: 350rpx;
height: 350rpx;
}
.tips {
margin: 60rpx 0 80rpx;
line-height: 48rpx;
}
.drink-btn {
width: 320rpx;
border-radius: 50rem !important;
margin-bottom: 40rpx;
font-size: $font-size-base;
line-height: 3.0;
}
</style>
login.vue
<template>
<view class="container">
<view class="intro">
<image src="/static/images/logo.png"></image>
<view class="tips">
一杯好茶，一口软欧包
<br>
在云鲤遇见两种美好
</view>
</view>
<view class="bottom">
<!-- #ifdef H5 -->
<button type="primary" size="default" class="login-btn" @tap="login">
登录
</button>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<button type="primary" size="default" class="login-btn" open-type="getUserInfo" lang="zh_CN" >
<image src="/static/images/mine/wechat.png"></image>
微信一键登录
</button>
<!-- #endif -->
<view class="d-flex flex-column justify-content-evenly align-items-center text-center" style="height: 30vh;">
<view class="w-100 font-size-base text-color-assist">新用户登录即加入会员，享会员权益</view>
<view class="w-100 row d-flex just-content-around align-items-center font-size-sm text-color-assist">
<view class="grid">
<image src="/static/images/mine/rhyl.png"></image>
<view>入会有礼</view>
</view>
<view class="grid">
<image src="/static/images/mine/jfdh.png"></image>
<view>积分兑换</view>
</view>
<view class="grid">
<image src="/static/images/mine/sjtq.png"></image>
<view>升级特权</view>
</view>
<view class="grid">
<image src="/static/images/mine/srtq.png"></image>
<view>生日特权</view>
</view>
<view class="grid">
<image src="/static/images/mine/nxbz.png"></image>
<view>云鲤宝藏</view>
</view>
</view>
<view class="font-size-base text-color-primary">会员权益说明</view>
</view>
</view>
</view>
</template>
<script>
import Member from '@/api/member.js'//引入member.js 模拟用户信息
import {mapMutations} from 'vuex'
export default {
data() {
return {
};
},
methods:{
...mapMutations(['SET_MEMBER']),//引入方法
login() {
this.SET_MEMBER(Member)//调用index.js中的 SET_MEMBER 方法
uni.navigateBack()//返回
}
}
}
</script>
<style lang="scss" scoped>
.intro {
width: 100%;
height: 50vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
font-size: $font-size-base;
color: $text-color-assist;
image {
width: 165rpx;
height: 165rpx;
}
.tips {
line-height: 72rpx;
text-align: center;
}
}
.bottom {
height: 40vh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0 40rpx;
.login-btn {
width: 100%;
border-radius: 50rem !important;
display: flex;
align-items: center;
justify-content: center;
padding: 10rpx 0;
image {
width: 36rpx;
height: 30rpx;
margin-right: 10rpx;
}
}
.row {
.grid {
width: 20%;
image {
width: 60rpx;
height: 60rpx;
margin-bottom: 10rpx;
}
}
}
}
</style>
5、在完成本任务工单的研发工作后，团队成员应使用SourceTree工具执行版本提交，如图2.3.7所示，以创建研发代码的历史版本记录。
2.3.7 版本提交记录.png
