eduepos_ui_store/pages/index/index.vue

<template>
    <view class="index-page">
        <u-sticky bgColor="#fff" class="tabs-wrap">
            <u-tabs
                class="tabs"
                :list="tabs"
                :itemStyle="itemStyle"
                :is-scroll="false"
                :current="params.active"
                @change="handTabhange">
            </u-tabs>
        </u-sticky>
		<view class="content-wrap" v-if="params.active == 0" style="padding-top: 20rpx;">
		    <view class="list-scroll-wrap">
		        <item v-for="item in orderList" @loadOrder="loadOrder" :item="item" :key="item.id"/>
		    </view>
		</view>
        <view class="content-wrap" v-if="params.active == 1">
            <view class="auto-taking-order">
                <view class="label">自动接单</view>
                <switch :checked="autoTaking" @change="handAutoTakingChange" color="#007AFF" class="switch" style="transform:scale(0.7)"></switch>
            </view>
            <view class="list-scroll-wrap">
                <item v-for="item in orderList" @loadOrder="loadOrder" :item="item" :key="item.id"/>
            </view>
        </view>
        <view class="content-wrap color-white" v-if="params.active == 2">
            <view class="scan-code" @click="saoma">
                <view class="label">扫码完成快速出餐</view>
                <u-icon name="scan" size="24" color="#666"></u-icon>
            </view>
            <view class="take-food-wrap">
                <view class="item" v-for="item in takeFoods" :key="item.date">
                    <view class="item-date">
                        {{ item.date }} ({{ item.list && item.list.length }})
                    </view>
                    <view class="item-food-no" v-for="no in item.list" :key="no.orderId">
                        <view class="label">
                            取餐号: {{ no.takeupCode }}
                        </view>
                        <view class="btn" @click="handComfirmTakeFoodOut(no)">确认出餐</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="content-wrap color-white h70" v-if="params.active == 3">
            <view class="scan-code">
				<input placeholder="请扫码或者输入取餐号" placeholder-class="input-placeholder" @input="inputChange" :value="searchValue" @blur="loadData" class="label"/>
                <u-icon name="scan" size="24" color="#666" @click="saoma"></u-icon>
            </view>
            <view class="take-food-wrap">
                <view class="item" v-for="item in takeFoods" :key="item.date">
                    <view class="item-date">
                        {{ item.date }} ({{ item.list && item.list.length }})
                    </view>
                    <view class="item-food-no" :style="{ backgroundImage: no.orderType == 4 ? 'linear-gradient(90.69deg, rgba(255,136,5,0.91) 0.28%,rgba(249,214,176,0.52) 0.28%,rgba(255,255,255,1) 98.81%);' : '' }" v-for="no in item.list" :key="no.orderId">
                        <view class="label">
                            <view class="top">
                                {{ no.orderType == 3 ? '自取餐号' : '堂吃餐号' }}: {{ no.takeupCode }}
                            </view>
                            <view class="btm">
                                {{ no.orderName }} {{ no.orderTel }}
                            </view>
                        </view>
                        <view class="btn" @click="handComfirmPickOut(no)">确认自取</view>
                    </view>
                </view>
            </view>
        </view>
		<view class="content">
			<ithui-bullet-two v-if="notice.redirect === 1" v-model="show" :content="notice.content" :title="notice.title"
				 buttonText="去参加" :closeOnClickOverlay="true"
				@confirm="e=>{goToActivity()}" @cancel="e=>{confirm()}" @close="e=>{confirm()}" />
			<ithui-bullet-two v-else v-model="show" :content="notice.content" :title="notice.title" :showButton="false"
				:closeOnClickOverlay="true"
				@cancel="e=>{confirm()}" @close="e=>{confirm()}" />
		</view>
		<view v-if="bindFlag">		
			<button class="float-button" hover-class="hover-btn-bg" @click="navToBind()">
				<!-- <uni-icons type="mic" size="40px" color="#fff" /> -->
				<span style="color: #fff;">绑定</span>
			</button>
		</view>
    </view>
</template>
<script>
import item from '@/pages/components/order.vue'
import ithuiBulletTwo from '@/components/ithui-bullet/ithui-bullet-two';
import {mapState} from 'vuex';
export default  {
    name: 'Home',
    components: {
        item,
		ithuiBulletTwo
    },
    data () {
        return {
			listUrl: '/storeOrderApi/getOrderListForStore',
			updateUrl: '/storeOrderApi/updateStoreAutoGo',
			autoGoUrl: '/storeOrderApi/getStoreAutoGo',
			confirmUrl: '/storeOrderApi/confirmOrder',
			pickUrl: '/storeOrderApi/selfPickUp',
			checkCodeUrl: '/storeOrderApi/checkCode',
			noticeUrl: '/storeNoticeApi/getNotice',
			checkBindGzhUrl: '/storeUserLoginApi/checkWxBind',
            params: {
                active: 1,
            },
			autoTaking: false,
            itemStyle: {
                width: '25vw',
                height: '80rpx',
				fontSize: '28rpx',
            },
            tabs: [
				{
					name: '预约单',
					value: 0,
					badge: {
					    value: 0,
					}
				},
                {
                    name: '待接单',
					value: 10,
                    badge: {
                        value: 0,
                    }
                },
                {
                    name: '待出餐',
					value: 20,
                    badge: {
                        value: 0,
                    }
                },
                {
                    name: '待自取',
					value: 50,
                    badge: {
                        value: 0,
                    }
                }
            ],
            orderList: [],
            takeFoods: [],
			searchValue: '',
			intervalId: null,
			bindIntervalId: null,
			handle: false,
			show: false,
			notice: {},
			errorMsg: '',
			bindFlag: true
        }
    },
	computed: {
		...mapState(['storeInfo'])
	},
	
	created(){
		this.bindDataRefreh();
	   this.dataRefreh();
	},
	onHide() {
	   // 销毁组件之前，清除计时器
	   this.clear();
	   this.bindClear();
	},   
    methods: {
		navToBind(url) {
			uni.navigateTo({
			    url: `/pages/tools/bind`
			})
		},
		// bindload (detail) {
		// 	console.log(detail);
		// },
		// binderror (detail) {
		// 	console.log(detail);
		// },
        // tab切换
        handTabhange (e) {
            this.params.active = e.index
			this.orderList = [];
			this.takeFoods = [];
			this.loadData()
        },
        handSwiperChange (e) {
            this.params.active = e.detail.current
        },
		loadOrder (msg) {
			this.loadData(msg)
		},
        // 自动接单切换
        handAutoTakingChange (e) {
			if (this.handle) {
				return;
			}
			this.handle = true;
			this.autoTaking = e.detail.value
			var dateStr = (new Date()).getTime();
			var sign = this.getSign(dateStr);
			this.requst({
				url: this.updateUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					autoGo: this.autoTaking ? 1 : 0
				},
				success: res => {
					this.handle = false;
					this.loadData()
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					this.handle = false;
				},
			});
        },
		inputChange(e) {
			this.searchValue = e.detail.value
		},
		// 定时刷新数据函数
		dataRefreh() {
			// 计时器正在进行中，退出函数
			if (this.intervalId != null) {
				return;
			}
			// 计时器为空，操作
			this.intervalId = setInterval(() => {
				this.loadData();
			}, 60000);
		}, 
		// 停止定时器
		clear() {
			if (this.intervalId) {
				clearInterval(this.intervalId);//清除计时器
				this.intervalId = null; //设置为null
			}
		},
		// 定时刷新数据函数
		bindDataRefreh() {
			// 计时器正在进行中，退出函数
			if (this.bindIntervalId != null) {
				return;
			}
			// 计时器为空，操作
			this.bindIntervalId = setInterval(() => {
				this.checkBindGzh();
			}, 30000);
		}, 
		// 停止定时器
		bindClear() {
			if (this.bindIntervalId) {
				clearInterval(this.bindIntervalId);//清除计时器
				this.bindIntervalId = null; //设置为null
			}
		},
		handComfirmTakeFoodOut (e) {
			let that = this
			uni.showModal({
				title: '提示',
				content: '是否将该订单标记为已出餐？',
				success: function (r) {
					if (r.confirm) {
						that.handComfirmTakeFood(e);
					} else if (r.cancel) {
					}
				}	
			})
		},
        // 确认出餐
        handComfirmTakeFood (e) {
			if (this.handle) {
				return;
			}
			this.handle = true;
			uni.showLoading({
				title: '加载中'
			})
			var dateStr = (new Date()).getTime();
			var sign = this.getSign(dateStr);
			this.requst({
				url: this.confirmUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					orderId: e.orderId,
				},
				success: res => {
					this.handle = false;
					if (res.data.rtnBean.rtnCode == 0) {
						uni.hideLoading();
						if (res.data.rtnBean.rtnMsg != '') {
							this.loadData(res.data.rtnBean.rtnMsg);
						} else {
							this.loadData('出餐成功');
						}
					} else {
						uni.hideLoading();
						if (res.data.rtnBean.rtnMsg != '') {
							this.$api.msg(res.data.rtnBean.rtnMsg);
						}
					}
				},
				fail: (e) => {
					uni.hideLoading()
					console.log("接口调用失败:" + JSON.stringify(e));
					this.handle = false;
				},
			});
        },
		handComfirmPickOut (e) {
			let that = this
			uni.showModal({
				title: '提示',
				content: '是否将该订单标记为已自取？',
				success: function (r) {
					if (r.confirm) {
						that.handComfirmPick(e);
					} else if (r.cancel) {
					}
				}	
			})
		},
		handComfirmPick (e) {
			if (this.handle) {
				return;
			}
			this.handle = true;
			uni.showLoading({
				title: '加载中'
			})
			var dateStr = (new Date()).getTime();
			var sign = this.getSign(dateStr);
			this.requst({
				url: this.pickUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					orderId: e.orderId,
				},
				success: res => {
					
					this.handle = false;
					
					if (res.data.rtnBean.rtnCode == 0) {
						uni.hideLoading()
						if (res.data.rtnBean.rtnMsg != '') {
							this.loadData(res.data.rtnBean.rtnMsg);
						} else {
							this.loadData('自取成功');
						}
					} else {
						uni.hideLoading()
						if (res.data.rtnBean.rtnMsg != '') {
							this.$api.msg(res.data.rtnBean.rtnMsg);
						}
					}
					
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					this.handle = false;
					uni.hideLoading()
				},
			});
		},
		splitOrderList(list) {
			if (!list || list.length == 0) {
				return [];
			}
			let orderList = [];
			list.map(item => {
				const date = item.requireDateStr.slice(5,10);
				if (orderList.length == 0) {
					let arr = [];
					arr.push(item)
					const obj = {
						date: date,
						requireDate: item.requireDate,
						list: arr
					}
					orderList.push(obj)
				} else {
					let obj = orderList.find(w => w.date == date);
					if (obj) {
						obj.list.push(item)
					} else {
						let arr = [];
						arr.push(item)
						const obj = {
							date: date,
							requireDate: item.requireDate,
							list: arr
						}
						orderList.push(obj)
					}
				}
			})
			if (orderList.length > 0) {
				orderList.sort((a, b) => {
					return new Date(a.requireDate).getTime() - new Date(b.requireDate).getTime()
				})
				orderList.reverse()
			}
			return orderList;
		},
		loadData(msg) {
			if (this.handle) {
				return;
			}
			this.handle = true;
			uni.showLoading({
				title: '加载中'
			})
			var dateStr = (new Date()).getTime();
			var sign = this.getSign(dateStr);
			let status = 0;
			let value = ""
			if (this.params.active == 1) {
				status = 10;
			} else if (this.params.active == 2) {
				status = 20;
			} else if (this.params.active == 3) {
				status = 50;
				value = this.searchValue
			} else {
				status = 0;
			}
			this.requst({
				url: this.listUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					status: status,
					searchValue: value
				},
				success: res => {
					this.handle = false;
					if (res.data.rtnBean.rtnCode == 0) {
						if (this.params.active == 1 || this.params.active == 0) {
							this.orderList = res.data.list;
						} else{
							this.takeFoods = this.splitOrderList(res.data.list);
						}
						const obj = res.data.obj;
						if (obj.reserveNum > 99) {
							this.tabs[0].badge.value = '...';
						} else {
							this.tabs[0].badge.value = obj.reserveNum;
						}
						if (obj.confirmedNum > 99) {
							this.tabs[1].badge.value = '...';
						} else {
							this.tabs[1].badge.value = obj.confirmedNum;
						}
						if (obj.receivedNum > 99) {
							this.tabs[2].badge.value = '...';
						} else {
							this.tabs[2].badge.value = obj.receivedNum;
						}
						if (obj.dinedNum > 99) {
							this.tabs[3].badge.value = '...';
						} else {
							this.tabs[3].badge.value = obj.dinedNum;
						}
					} else {
						if (res.data.rtnBean.rtnMsg != '') {
							this.$api.msg(res.data.rtnBean.rtnMsg);
						}
					}
					uni.stopPullDownRefresh()
					uni.hideLoading()
					if (msg != '' && msg != undefined && msg != null) {
						uni.showToast({
							icon: 'none',
							title: msg,
							duration: 1500
						})
					}
					this.errorMsg = '';
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.stopPullDownRefresh()
					this.handle = false;
					uni.hideLoading();
				},
			});
		},
		getStoreAutoGo() {
			uni.showLoading({
				title: '加载中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign(dateStr);
			this.requst({
				url: this.autoGoUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId
				},
				success: res => {
					if (res.data.rtnBean.rtnCode == 0) {
						uni.hideLoading();
						this.autoTaking = res.data.obj.autoGo == 1;
					} else {
						uni.hideLoading();
						if (res.data.rtnBean.rtnMsg != '') {
							this.$api.msg(res.data.rtnBean.rtnMsg);
						}
					}
					
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				},
			});
		},
		saoma() {
			var that = this;
			// 只允许从相机扫码
			wx.scanCode({
				onlyFromCamera: true,
				scanType: 'qrCode',
				success(res) {
					that.checkDoneMealCode(encodeURIComponent(res.result));
				},fail(res) {
				}
			})
		},
		// 判断是不是核销码类型
		checkDoneMealCode(orderCode) {
			if (this.handle) {
				return;
			}
			this.handle = true;
			uni.showLoading({
				title: '加载中'
			})
			var dateStr = (new Date()).getTime();
			var sign = this.getSign(decodeURIComponent(orderCode) + this.storeInfo.storeId + dateStr);
			let status = 0;
			if (this.params.active == 1) {
				status = 10;
			} else if (this.params.active == 2) {
				status = 20;
			} else if (this.params.active == 3) {
				status = 30;
			} else {
				status = 0;
			}
			let that = this;
			this.requst({
				url: this.checkCodeUrl,
				data: {
					orderCode: decodeURIComponent(orderCode),
					storeId: this.storeInfo.storeId,
					status: status,
					timestamp: dateStr,
					sign: sign
				},
				success: res => {
					this.handle = false;
					uni.hideLoading()
					if (res.data.rtnBean.rtnCode == 0) {
						if (this.params.active == 1) {
							uni.showModal({
								title: '提示',
								content: '是否将取餐号为' + res.data.obj.takeupCode + '的订单标记为已出餐？',
								success: function (r) {
									if (r.confirm) {
										that.handComfirmTakeFood(res.data.obj)
									} else if (r.cancel) {
									}
								}
							});
						} else if (this.params.active == 2) {
							uni.showModal({
								title: '提示',
								content: '是否将取餐号为' + res.data.obj.takeupCode + '的订单标记为已自取？',
								success: function (r) {
									if (r.confirm) {
										that.handComfirmPick(res.data.obj)
									} else if (r.cancel) {
									}
								}
							});
						} 
					} else {
						if (res.data.rtnBean.rtnMsg != '') {
							// setTimeout(() => {
							// 	uni.showToast({
							// 		icon: 'none',
							// 		title: res.data.rtnBean.rtnMsg,
							// 		duration: 2000
							// 	})
							// }, 1000)
							this.errorMsg = res.data.rtnBean.rtnMsg;
						}
					}
					
				},
				fail: (e) => {
					uni.hideLoading()
					console.log("接口调用失败:" + JSON.stringify(e));
					this.handle = false;
				},
			})
		},
		getNotice() {
			uni.showLoading({
				title: '加载中'
			});
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.noticeUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					storeId: this.storeInfo.storeId,
					storeUserId: this.storeInfo.storeUserId
				},
				success:res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.notice = res.data.obj
						if (this.notice != '' && this.notice != null && this.notice != undefined){
							this.show = true
						}
					}
					uni.hideLoading();
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
					uni.hideLoading();
				},
			});
		},
		goToActivity() {
			this.show = false
			uni.navigateTo({
				url: this.notice.url
			})
		},
		confirm() {
			this.show = false
		},
		// 判断用户是否绑定微信公众号
		checkBindGzh() {
			var dateStr = (new Date()).getTime();
			var sign = this.getSign('' + this.storeInfo.storeUserId + dateStr);
			this.requst({
				url: this.checkBindGzhUrl,
				data: {
					timestamp: dateStr,
					sign: sign,
					openid2: this.storeInfo.openid2 || '',
					storeUserId: this.storeInfo.storeUserId || ''
				},
				success:res => {
					if (res.data.rtnBean.rtnCode == 0) {
						this.bindFlag = res.data.obj
						// if (!this.bindFlag) {
						// 	this.bindClear();
						// }
					}
				},
				fail: (e) => {
					console.log("接口调用失败:" + JSON.stringify(e));
				},
			});
		}
    },
	onShow () {
		this.getStoreAutoGo();
		this.loadData(this.errorMsg);
		this.checkBindGzh();
	},
    onLoad () {
		this.getNotice();
    },
	onPullDownRefresh() {
		this.loadData();
	},
	onReachBottom: function() {
	}
}
</script>
<style lang="scss" scoped>
.fs14 {
    font-size: $font-base;
}
.pd24 {
    padding: 0 24rpx;
    box-sizing: border-box;
}
.mlr24 {
    margin: 0 24rpx;
}
.ptb10 {
    padding: 10rpx 0;
    box-sizing: border-box;
}
.mt10 {
    margin-top: 10rpx;
}
.mt20 {
    margin-top: 20rpx;
}
.mb10 {
    margin-bottom: 10rpx;
}
.w100 {
    width: 100%;
}
.borbtm {
    border-bottom: 2rpx solid #ececec;
}
.text {
    color: $text-color;
}
.desc {
    color: $desc-color;
}
.index-page {
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f5;
    ::-webkit-scrollbar {
        display: none;
    }
}
/deep/ .input-placeholder {
	color: #666666
}
/deep/ .u-tabs__wrapper__nav__item__text.data-v-48634e29 {
    font-size: 28rpx;
    color: #606266;
}
.tabs-wrap {
    padding-left: 5vw;
    box-sizing: border-box;
    background-color: #fff;
	position: fixed;
    .tabs {
        margin-bottom: 20rpx;
    }
}
.content-wrap {
    height: calc(100vh - 80rpx);
    .take-food-wrap {
        background-color: #f5f5f5;
    }

    .scan-code {
        @include between;
        height: 60rpx;
        margin: 0 20rpx 20rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
        background-color: #f5f5f5;
        .label {
            font-size: $font-base;
            color: $icon-color;
        }
    }
    .item-date {
        height: 60rpx;
        background-color: #f5f5f5;
        @include flexStart;
        font-size: $font-base;
        padding: 0 20rpx;
        box-sizing: border-box;
    }
    .take-food-wrap {
        background-color: #fff;
    }
    .item-food-no {
        padding: 0 20rpx;
        box-sizing: border-box;
        border-bottom: 2rpx solid #ececec;
        height: 100rpx;
        @include between;
        font-size: $font-base;
        color: $title-color;
        font-weight: bold;
        .btn {
            font-weight: normal;
            width: 140rpx;
            height: 52rpx;
            background-color: $base-color;
            color: #fff;
            border-radius: 26rpx;
            @include flexCenter;
            font-size: $font-sm;
        }
    }
    .btm {
        font-size: $font-sm;
        color: #6c6c6c;
    }
}
.auto-taking-order {
    width: 100vw;
    height: 80rpx;
    @include between;
    padding: 0 20rpx;
    box-sizing: border-box;
    /deep/ .u-switch {
        transform: scale(.75) translateX(12rpx);
    }
}
.list-scroll-wrap {
    width: calc(100vw - 40rpx);
    margin-left: 20rpx;
    padding-bottom: 20rpx;
}
.color-white {
    background-color: #fff;
    padding-top: 20rpx;
    box-sizing: border-box;
}
.h70 {
    .item-food-no {
        height: 140rpx;
    }
    .top {
        margin-bottom: 10rpx;
    }
}
.float-button {
		position: fixed;
		right: 15px;
		bottom: 15px;
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		background: #1A78F6;
		text-align: center;
		display: flex;
		align-items:center;
		justify-content: center;
		box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.4);
		z-index: 999;
	}
	.hover-btn-bg{
		background-color: #1A78F6;
		color: #fff;
	}
</style>