high-mini-manage/pages/tabBar/home/home.vue

<template>
	<view>
		<image mode="widthFix" class="width100 headimg" src="../../../static/img/head.png"></image>
		<view class="headsearch fotct">
			<view class="input-box fotlt">
				<input placeholder="订单搜索" v-model="orderNo" placeholder-style="color:#c0c0c0;" @input="searchOrder()" />
				<view class="icon search"></view>
			</view>
		</view>
		<view class="width94 alijusstart height50 fotct font14">
			<view class="width33" :class="[type=='0' ? 'fcor089' : 'fcor333']" @click="updateStu(0)">全部</view>
			<view class="width33" :class="[type=='3' ? 'fcor089' : 'fcor333']" @click="updateStu(3)">已完成</view>
			<view class="width33" :class="[type=='4' ? 'fcor089' : 'fcor333']" @click="updateStu(4)">已退款</view>
		</view>
		<view v-if="orderList == ''" class="mart40 fotct font14 fcor666">
			<image mode="widthFix" style="width: 70vw;" src="../../../static/img/noorder1.png"></image>
		</view>
		<view class="width94 backcorfff headcont mart10" v-for="(item,index) in orderList" :key="index"
			@click="jumpDetails(item.orderNo)">
			<view class="alijusstart width94 height30 fcor333 paddtop5">
				<view class="width70 font14 text1">{{item.orderNo}}</view>
				<image class="iconw alicntend" mode="widthFix" src="../../../static/img/jtg.png"></image>
				<text class="width20 font14 fotrt" v-if="item.status == 1">待支付</text>
				<text class="width20 font14 fotrt" v-if="item.status == 2">已支付</text>
				<text class="width20 font14 fotrt" v-if="item.status == 3">已完成</text>
				<text class="width20 font14 fotrt" v-if="item.status == 4">已退款</text>
				<text class="width20 font14 fotrt" v-if="item.status == 5">已取消</text>
				<text class="width20 font14 fotrt" v-if="item.status == 6">已退款</text>
				<text class="width20 font14 fotrt" v-if="item.status == 7">拒绝退款</text>
			</view>
			<view class="line1 width94"></view>
			<view class="width94 mart5">
				<image :src="item.gasLogo" mode="widthFix" class="counimgs flleft"></image>
				<view class="counscou paddtop10">
					<view class="width94 height25 font14 fcor666">
						油品: <text class="margle marglerig">{{item.gasOilNo}}</text> 升数: <text
							class="margle">{{item.gasOilLiters}}L</text>
					</view>
					<view class="width94 height25 alijusstart ">
						<view class="width50 font14 fcor666">加油金额: ¥{{item.totalPrice}}</view>
						<view class="width50 font14 fcor333 fotrt">实付:
							<text class="font18" v-if="item.payRealPrice">¥{{item.payRealPrice}}</text>
							<text class="font18" v-else>¥0</text>
						</view>
					</view>
				</view>
			</view>
			<view class="line1 width94 mart5"></view>
			<view class="height30 width94 mart5 font14 fcor666">下单时间:
				{{item.createTime | timeFormat('yyyy-mm-dd hh:mm:ss')}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGasOrderList
	} from '../../../Utils/Api.js';
	let app = getApp();
	export default {
		components: {},
		data() {
			return {
				type: 0, // 当前状态
				orderList: [],
				pageNum: 1,
				pagesize: 10,
				isLoadMore: false, //是否加载中
				innerAudioContext: '', //音频播放
				orderNo: '', //搜索内容
				userinfo: '' //用户数据
			};
		},
		onShow() {
			let that = this;
			that.userinfo = app.globalData.userInfo;
			that.orderList = [];
			that.pageNum = 1;
			uni.getStorage({
				key: "oiluser",
				success(e) {
					app.globalData.userInfo = e.data //这就是你想要取的token
					uni.getStorage({
						key: 'oiltoken',
						success(e) {
							app.globalData.token = e.data;
							that.getGasOrderList();
						}
					})
				},
				fail: res => {}
			})
			//油枪，油品 权限
			if (this.userinfo.buttonList) {
				for (var i = 0; i < this.userinfo.buttonList.length; i++) {
					if (this.userinfo.buttonList[i].permissionCode == 'BTN_CONFIG_OIL_GUN_PURVIEW') {
						app.globalData.positionType = 1
					}
					if (this.userinfo.buttonList[i].permissionCode == 'BTN_CONFIG_OIL_GUN_PRICE_PURVIEW') {
						app.globalData.positionGunPrice = 1
					}
				}
			}

		},
		onLoad() {

			this.socketio();
		},
		onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.pageNum += 1
				this.getGasOrderList()
			}
		},
		methods: {
			//链接socket
			socketio() {
				let that = this;
				uni.connectSocket({
					url: app.globalData.wsssocket + app.globalData.userInfo.merchantStore.id
				});
				uni.onSocketOpen(function(res) {
					console.log('WebSocket连接已打开！');
				});
				uni.onSocketError(function(res) {
					console.log('WebSocket连接打开失败，请检查！');
					uni.closeSocket();
					that.socketio();
				});
				uni.onSocketMessage(function(res) {
					let innerAudioContext = uni.createInnerAudioContext(); //创建音频文件
					innerAudioContext.autoplay = false; //不自动播放
					innerAudioContext.src = JSON.parse(res.data).voice; //音频文件链接
					that.innerAudioContext = innerAudioContext;
					that.orderList = [];
					that.pageNum = 1;
					that.getGasOrderList();
					that.startAudio();
					console.log('收到服务器内容：' + JSON.parse(res.data).voice);
				});
				uni.onSocketClose(function(res) {
					console.log('WebSocket 已关闭！');
					uni.closeSocket();
					that.socketio();
				});
			},
			//搜索条件
			searchOrder() {
				this.orderList = [];
				this.pageNum = 1;
				this.getGasOrderList();
			},
			//开始音频文件
			startAudio() {
				this.innerAudioContext.play(() => {
					console.log('开始播放');
				});
				this.innerAudioContext.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
			},
			//查询列表
			getGasOrderList() {
				let status;
				if (this.type == 0) {
					status = ''
				} else {
					status = this.type;
				}
				uni.showLoading({
					title: '加载中'
				})
				let daydate = new Date(new Date().toLocaleDateString()).getTime();
				let datas = {
					orderNo: this.orderNo,
					status: status,
					createTimeS: daydate,
					pageNum: this.pageNum,
					pageSize: this.pagesize,
				}
				getGasOrderList(datas).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000' && res.return_data.list) {
						this.orderList = this.orderList.concat(res.return_data.list);
						if (res.return_data.pages == this.pageNum) {
							this.isLoadMore = true;
						} else {
							this.isLoadMore = false
						}
					} else {
						this.orderList = [];
						this.isLoadMore = true
					}
				});
			},
			//更新状态
			updateStu(item) {
				this.type = item;
				this.orderList = [];
				this.pageNum = 1;
				this.getGasOrderList();
			},
			//跳转详情
			jumpDetails(item) {
				uni.navigateTo({
					url: '../../home/oderDetails/oderDetails?ordesid=' + item
				})
				// this.startAudio();
			}
		},

	};
</script>
<style lang="scss">
	page {
		background-color: #f3f4f8;
	}

	.input-box {
		width: 90%;
		margin-left: 5%;
		top: 55px;
		height: 70rpx;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		position: relative;
		display: flex;
		align-items: center;

		.icon {
			display: flex;
			align-items: center;
			position: absolute;
			top: 0;
			right: 0;
			width: 60upx;
			height: 60upx;
			font-size: 40upx;
			color: #c0c0c0;
		}

		input {
			padding-left: 28upx;
			height: 28upx;
			font-size: 28upx;
			width: 100%;
		}
	}

	.headimg {
		position: absolute;
		max-height: 150px;
	}

	.headsearch {
		position: relative;
		height: 145px;
	}

	.headcont {
		height: 150px;
		border-radius: 8px;
	}

	.width33 {
		width: 33.3%;
	}

	.counimgs {
		width: 60px;
		max-height: 60px;
	}

	.counscou {
		margin-left: 70px;
	}
</style>