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