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