385 lines
9.1 KiB
Vue
385 lines
9.1 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="codecass" style=" text-align: center;" v-if="payFlag == 0" >
|
||
<img :src="qrURL" style="width: 300upx;height: 300upx; text-align: center;margin-top: 30upx;" />
|
||
</view>
|
||
<view class="codecass" style=" text-align: center;" v-else-if="payFlag == 1">
|
||
<image src="/static/imgs/payscess.png" style="width: 300upx;height: 300upx; text-align: center;margin-top: 30upx;" />
|
||
</view>
|
||
<view class="codecass" style=" text-align: center;" v-else-if="payFlag == 3">
|
||
<image src="/static/imgs/code2.png" style=" width: 300upx;height: 300upx; text-align: center;margin-top: 30upx;" />
|
||
</view>
|
||
<view class="money" v-if="payFlag == 3" >
|
||
<image class="icon" src="/static/imgs/tips.png"
|
||
style="display:inline-block;width: 30upx;height: 30upx;top: 4upx;"></image>
|
||
<view style="display:inline-block;color: #ff5959;margin-left: 6upx;">暂未绑定餐卡，请联系管理员</view>
|
||
</view>
|
||
<view class="money" v-else-if="payFlag == 4" ></view>
|
||
<view class="money" v-else>可用余额: ¥{{amount}}</view>
|
||
<view class="tip" v-if="payFlag != 3">如付款失败，请使用实体员工卡支付</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">
|
||
<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>
|
||
</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 uniRate from "@/components/uni-rate/uni-rate.vue";
|
||
import {queryMyFood,getPrize,queryMealCard,queryMealCardState} from '@/common/api.js';
|
||
import {callbackRequest,callbackRequestNoTip,getStorage,alertTip,callbackRequestCanteen,domain} from '@/common/util.js';
|
||
import loadMore from '@/components/loadMore.vue';
|
||
import contentNone from '@/components/contentNone.vue';
|
||
import jrQrcode from '@/components/wxqrcode/wxqrcode.js';
|
||
|
||
export default {
|
||
|
||
data() {
|
||
return {
|
||
// userId:getStorage('userInfo').id,
|
||
currentTabIndex:0,
|
||
page:1,
|
||
payFlag:4,
|
||
pageSize:10,
|
||
qrURL:'',
|
||
userId:getStorage('userInfo').id,
|
||
staffId:'',
|
||
putFalg:0,
|
||
amount :0,
|
||
interval1:'',
|
||
interval2:'',
|
||
loadingType:0,//0-loading前；1-loading中；2-没有更多了
|
||
contentText: {
|
||
contentdown: "上拉加载更多",
|
||
contentrefresh: "正在加载...",
|
||
contentnomore: "没有更多数据了"
|
||
},
|
||
list : [],
|
||
orderId:new Date().getTime(),
|
||
cardId:'',
|
||
}
|
||
},
|
||
components:{
|
||
loadMore,
|
||
contentNone
|
||
},
|
||
onLoad(){
|
||
// this.getFoodList()
|
||
this.initData();
|
||
// this.qrURL = this.createQrCodeImg("12345");
|
||
self = this;
|
||
self.interval1 =setInterval(function(){
|
||
console.log(self.orderId)
|
||
if(self.putFalg == 0){
|
||
self.getMealCar();
|
||
}
|
||
|
||
},3000);
|
||
self.interval2 = setInterval(function(){
|
||
if(self.putFalg == 0){
|
||
self.initData();
|
||
}
|
||
},180000);
|
||
},
|
||
destroyed() {
|
||
self.putFalg = 1;
|
||
clearInterval(self.interval1 );//停止interval
|
||
clearInterval(self.interval2 );//停止interval
|
||
console.log('关闭')
|
||
},
|
||
methods: {
|
||
initData(){
|
||
self = this;
|
||
|
||
let data = {
|
||
method:queryMealCardState,
|
||
data:{
|
||
userId:self.userId,
|
||
orderId:self.orderId
|
||
}
|
||
|
||
};
|
||
|
||
callbackRequestNoTip(domain,data)
|
||
.then(res => {
|
||
console.log(res)
|
||
if(res.data.returnCode == 1){
|
||
|
||
let result = res.data.returnData;
|
||
// self.amount = result.amout;
|
||
self.payFlag = 0;
|
||
self.show(result.qCode);
|
||
self.staffId = result.staffId;
|
||
this.getMealCar();
|
||
}else if(res.data.returnCode == 1001){
|
||
self.payFlag = 3;
|
||
}
|
||
})
|
||
},
|
||
getMealCar(){
|
||
self = this;
|
||
let data = {
|
||
method:queryMealCard,
|
||
staffId:self.staffId,
|
||
orderId:self.orderId,
|
||
};
|
||
callbackRequestCanteen(data)
|
||
.then(res => {
|
||
if(res.data.returnCode == 0){
|
||
let result = res.data.obj.list[0];
|
||
var falg = res.data.obj.flag;
|
||
self.amount = result.TOTAL_BALANCE;
|
||
|
||
if(falg == 1){
|
||
// alertTip("支付成功");
|
||
self.payFlag = 1;
|
||
self.putFalg = 1;
|
||
}
|
||
|
||
// self.show(result.qCode);
|
||
}
|
||
})
|
||
},
|
||
show:function(msg){
|
||
|
||
this.qrURL = jrQrcode.createQrCodeImg(msg);
|
||
// this.refresh();
|
||
},
|
||
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: 100%;
|
||
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>
|