317 lines
6.9 KiB
Vue
317 lines
6.9 KiB
Vue
|
<template>
|
|||
|
|
<view class="container">
|
|||
|
|
<view class="banner-box">
|
|||
|
|
<image v-if="currentTabIndex == 0" src="/static/imgs/dzck-banner.png" mode=""></image>
|
|||
|
|
<image v-if="currentTabIndex == 1" src="/static/imgs/dzck-banner.png" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="main">
|
|||
|
|
<view class="tab-box">
|
|||
|
|
<view class="tab-item" :class="currentTabIndex == 0 ? 'active' : ''" @click="currentTabIndex = 0">电子餐卡</view>
|
|||
|
|
<view class="tab-item" :class="currentTabIndex == 1 ? 'active' : ''" @click="currentTabIndex = 1">推荐菜品</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="content-box my-code" v-if="currentTabIndex == 0">
|
|||
|
|
<view class="code-box">
|
|||
|
|
<image class="code-img" src="/static/imgs/code.png" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="money">可用余额: ¥100.00</view>
|
|||
|
|
<view class="tip">如付款失败，请使用实体员工卡支付</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-else>
|
|||
|
|
<image class="prize" src="../../static/food/prize.png" @click="showPrize" mode=""></image>
|
|||
|
|
<view class="content-box uni-list" v-if="list.length > 0">
|
|||
|
|
<view class="list-item" v-for="(item, index) in list" :key="index">
|
|||
|
|
<view class="content">
|
|||
|
|
<view class="image-box" >
|
|||
|
|
<image mode="" :src="item.picture" />
|
|||
|
|
</view>
|
|||
|
|
<view class="fr-content">
|
|||
|
|
<!-- <text class="status" v-if="item.status != ''">（{{item.status}}）</text> -->
|
|||
|
|
<view class="text"><text>菜品名称:</text> {{item.food_name}}</view>
|
|||
|
|
<view class="text"><text>菜品类型:</text> {{item.kinds}}</view>
|
|||
|
|
<view class="text"><text>第{{item.activity_no}}期推荐菜品</text> </view>
|
|||
|
|
<!-- <view class="text"><text>有效期:</text> {{item.date}}</view> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<content-none v-else></content-none>
|
|||
|
|
</view>
|
|||
|
|
<load-more v-if="currentTabIndex == 1" :loadingType="loadingType" :contentText="contentText"></load-more>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {queryMyFood,getPrize} from '@/common/api.js';
|
|||
|
|
import {callbackRequest,getStorage,alertTip} from '@/common/util.js';
|
|||
|
|
import loadMore from '@/components/loadMore.vue';
|
|||
|
|
import contentNone from '@/components/contentNone.vue';
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
userId:getStorage('userInfo').id,
|
|||
|
|
currentTabIndex:0,
|
|||
|
|
page:1,
|
|||
|
|
pageSize:10,
|
|||
|
|
loadingType:0,//0-loading前；1-loading中；2-没有更多了
|
|||
|
|
contentText: {
|
|||
|
|
contentdown: "上拉加载更多",
|
|||
|
|
contentrefresh: "正在加载...",
|
|||
|
|
contentnomore: "没有更多数据了"
|
|||
|
|
},
|
|||
|
|
list : [],
|
|||
|
|
foods:[
|
|||
|
|
{
|
|||
|
|
name:'123'
|
|||
|
|
},{
|
|||
|
|
name:'123'
|
|||
|
|
},{
|
|||
|
|
name:'123'
|
|||
|
|
},{
|
|||
|
|
name:'123'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
components:{
|
|||
|
|
loadMore,
|
|||
|
|
contentNone
|
|||
|
|
},
|
|||
|
|
onLoad(){
|
|||
|
|
this.getFoodList()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getFoodList(){
|
|||
|
|
let params = {
|
|||
|
|
"method":queryMyFood,
|
|||
|
|
data:{
|
|||
|
|
pageSize:this.pageSize,
|
|||
|
|
pageNum:this.page,
|
|||
|
|
userId:this.userId
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
callbackRequest(params)
|
|||
|
|
.then(res => {
|
|||
|
|
if(res.data.returnCode == 1){
|
|||
|
|
if(this.page == 1){
|
|||
|
|
this.list = res.data.returnData;
|
|||
|
|
}else{
|
|||
|
|
if(res.data.returnData.length > 0){
|
|||
|
|
this.list = [...this.list,...res.data.returnData];
|
|||
|
|
this.loadingType = 0;
|
|||
|
|
}else {
|
|||
|
|
this.loadingType = 2;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
onNavigationBarButtonTap : function(){
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '../luck-food/luck-food'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
showPrize : function(){
|
|||
|
|
let params = {
|
|||
|
|
"method":getPrize,
|
|||
|
|
data:{
|
|||
|
|
userId:this.userId
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
var fd;
|
|||
|
|
callbackRequest(params)
|
|||
|
|
.then(res => {
|
|||
|
|
if(res.data.returnCode == 1){
|
|||
|
|
fd = res.data.returnData.list;
|
|||
|
|
if(res.data.returnData.isPrizeTime == 0){
|
|||
|
|
alertTip("未到抽奖时间");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if(res.data.returnData.isPrize == 1){
|
|||
|
|
alertTip("你已抽奖，不能重复抽奖");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '../prize/prize?foods=' + encodeURIComponent(JSON.stringify(fd))
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
colseP : function(){
|
|||
|
|
this.showp = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onReachBottom() {
|
|||
|
|
if(this.loadingType !== 0 || this.currentTabIndex == 0){
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.loadingType = 1;
|
|||
|
|
this.page = this.page+1;
|
|||
|
|
this.getFoodList();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
@import '@/static/css/common.scss';
|
|||
|
|
.container{
|
|||
|
|
min-height:100vh;
|
|||
|
|
overflow:hidden;
|
|||
|
|
background: #f8f8f8;
|
|||
|
|
.banner-box {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 240upx;
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
border-radius: 30upx;
|
|||
|
|
}
|
|||
|
|
.main {
|
|||
|
|
margin: 172upx 40upx 0;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 10;
|
|||
|
|
.tab-box {
|
|||
|
|
overflow: hidden;
|
|||
|
|
border-radius: 10upx 10upx 0 0;
|
|||
|
|
background: rgba(132, 149, 167, 0.8);
|
|||
|
|
height: 70upx;
|
|||
|
|
.tab-item {
|
|||
|
|
float: left;
|
|||
|
|
height: 70upx;
|
|||
|
|
width: 50%;
|
|||
|
|
font-size: 30upx;
|
|||
|
|
color: #e5f6ff;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 70upx;
|
|||
|
|
}
|
|||
|
|
.active {
|
|||
|
|
background: #fff;
|
|||
|
|
color: #333;
|
|||
|
|
border-radius: 10upx 10upx 0 0;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.content-box{
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
.prize{
|
|||
|
|
width: 80rpx;
|
|||
|
|
height: 80rpx;
|
|||
|
|
position: fixed;
|
|||
|
|
right: 30rpx;
|
|||
|
|
bottom: 80rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.my-code{
|
|||
|
|
background: #fff;
|
|||
|
|
padding-top:80rpx;
|
|||
|
|
.code-box{
|
|||
|
|
background: #fff;
|
|||
|
|
overflow:hidden;
|
|||
|
|
.code-img{
|
|||
|
|
display:block;
|
|||
|
|
width:350rpx;
|
|||
|
|
height:350rpx;
|
|||
|
|
margin:70rpx auto 100rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.money{
|
|||
|
|
height:60rpx;
|
|||
|
|
text-align:center;
|
|||
|
|
line-height:60rpx;
|
|||
|
|
font-size:28rpx;
|
|||
|
|
}
|
|||
|
|
.tip{
|
|||
|
|
font-size:26rpx;
|
|||
|
|
color:#666;
|
|||
|
|
line-height:40rpx;
|
|||
|
|
padding:0 0 30rpx;
|
|||
|
|
text-align:center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.uni-list{
|
|||
|
|
background: #fff;
|
|||
|
|
.list-item{
|
|||
|
|
border-bottom:10upx solid #f8f8f8;
|
|||
|
|
padding:30upx 20upx;
|
|||
|
|
.content{
|
|||
|
|
overflow:hidden;
|
|||
|
|
.image-box{
|
|||
|
|
float:left;
|
|||
|
|
width:200upx;
|
|||
|
|
height:200upx;
|
|||
|
|
image{
|
|||
|
|
display:block;
|
|||
|
|
width:100%;
|
|||
|
|
height:100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.fr-content{
|
|||
|
|
margin-left:220upx;
|
|||
|
|
font-size:26upx;
|
|||
|
|
.text{
|
|||
|
|
color:#666;
|
|||
|
|
line-height:40upx;
|
|||
|
|
margin-bottom:10upx;
|
|||
|
|
text{
|
|||
|
|
float:left;
|
|||
|
|
color:#333;
|
|||
|
|
padding-right:10upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.status {
|
|||
|
|
color:red;
|
|||
|
|
margin-left: 280upx;
|
|||
|
|
position: absolute;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.bottom{
|
|||
|
|
overflow:hidden;
|
|||
|
|
padding:10upx 20upx 0;
|
|||
|
|
.num-box{
|
|||
|
|
float:left;
|
|||
|
|
font-size:28upx;
|
|||
|
|
color:#333;
|
|||
|
|
line-height:40upx;
|
|||
|
|
padding-top:20upx;
|
|||
|
|
text{
|
|||
|
|
color:#5fbf3d;
|
|||
|
|
padding-left:4upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.vote-btn{
|
|||
|
|
float:right;
|
|||
|
|
width:160upx;
|
|||
|
|
height:60upx;
|
|||
|
|
background: #5fbf3d;
|
|||
|
|
font-size:26upx;
|
|||
|
|
color:#fff;
|
|||
|
|
text-align:center;
|
|||
|
|
line-height:60upx;
|
|||
|
|
border-radius:4upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.raffle {
|
|||
|
|
width: 600rpx;
|
|||
|
|
height: 600rpx;
|
|||
|
|
// background: #00C564;
|
|||
|
|
// position: absolute;
|
|||
|
|
// margin-left: 78rpx;
|
|||
|
|
// margin-top: 300rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</style>
|