vant 上拉刷新数据

427 阅读8分钟

<template>
	<div class="entry">
		<div class="home_top">
			<div class="home_tab">
				<div class="back" @click="back">
					<img src="../../assets/go_back.png" alt />
				</div>
				
				<div class="text">条码管理列表</div>
			</div>
		</div>
		<div class="h_40"></div>
		<div class="pd_con_wp">
			<div class="serchicon">
				<van-search placeholder="请输入搜索关键词" v-model="searval" @focus="jump()" />
			</div>
			<div class="mainpast" ref="heightwindow1">
				<!-- 已完成 -->
				<div class="pd_one">
					<van-list v-model="loading2" :finished="finished2" finished-text="没有更多数据了" @load="onLoadtwo">
						<div class="h_10"></div>
						<div class="p_list" v-for="item in yesInfo" :key="item.id" @click="datedetail(item.id, item.good_name, item.bar_code,item)">
							<div class="item">
								<div class="no_figure">
									<img :src="item.logo" alt="">
								</div>
								<div class="no_dl">
									<div class="name">{{item.good_name}}</div>
									<div class="scan">条码:{{item.bar_code}}</div>
								</div>
							</div>
						</div>
					</van-list>
				</div>
			</div>
		</div>
		<van-overlay :show="show" />
		<!-- 加载中 -->
		<div class="loading" v-if="show2">
			<van-loading type="spinner" color="#1989fa" />
		</div>
		
		
		
		<!--加载中~-->
			<div class='show_loading' v-if="isshowloading">
			  	<div class="load1">
					<div class="rect1"></div>
					<div class="rect2"></div>
					<div class="rect3"></div>
					<div class="rect4"></div>
					<div class="rect5"></div>
					<p>加载中...</p>
				</div>
			</div>

		
		
		
		
		<!-- 底部弹层 -->
		<div class="popup_wp" v-if="ispop">
			<div class="pop_close" @click="closepop"></div>
			<div class="pop_list_wp">
				<div class="pop_list">
					<div class="item">
						<div class="t_con">
							<div class="dl">
								<div class="dd"><span>{{productName}}</span></div>
								<div class="dt">
									<div class="lab">条码:</div>
									<div class="inp codeinput">
										<input type="text"  maxlength="13" @focus="scollhy" @blur="scollhy" v-model="buildcode" @input="buildcode = Number($event.target.value.replace(/\D+/, ''))">
									</div>
								</div>
							</div>
							<div class="btn_r" @click="confirmpd()">扫码</div>
						</div>
					</div>
				</div>
				<div class="h_50"></div>
				<div class="add_date_btn">
					<div class="item active" @click="stoptdata">取消</div>
					<div class="item" @click="preservedata">确定</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import Vue from "vue";
	import { API } from "../../common/api";
	import wx from 'weixin-js-sdk';
	import Qs from "qs";
	import {
		Toast,
		Loading,
		Overlay,
		Search,
		Icon,
		Sidebar,
		SidebarItem,
		List,
		Field,
		DatetimePicker,
		NumberKeyboard,
		Dialog
	} from "vant";
	Vue.use(Toast)
		.use(Loading)
		.use(Overlay)
		.use(Icon)
		.use(Sidebar)
		.use(SidebarItem)
		.use(List)
		.use(Dialog)
		.use(Field)
		.use(Search)
		.use(NumberKeyboard)
		.use(DatetimePicker);

	export default {
		name: "login",
		data() {
			return {
				isshowloading: false,
				buildID:null,
				buildcode:null,
				searval: "",
				countno: 0,
				countok: 0,
				show2: false,
				orderId: null,
				inventoryProductId: null,
				ispop: false,
				show: false,
				datelist: [],
				noInfo: [],
				loading1: false,
				finished1: false,
				showLoad1: false,
				pageNumone: 1,
				activeKey: 0,
				current: 1,
				yesInfo: [],
				loading2: false,
				finished2: false,
				showLoad2: false,
				pageNumtwo: 1,
				isdown: false,
				typeId: null,
				chooseDate: '',
				productName: "",
				pbarcode: null
			};
		},
		methods: {
			jump() {
				this.$router.push({
					path: "/sweep/codesearch",
					query: {
						orderId: this.$route.query.orderId
					}
				});
			},
			scollhy() {
				window.scroll(0, 0);
			},
			// 扫一扫
			scanfun() {
				let that = this;
				this.axios({
					method: 'POST',
					url: 'https://ha.tongchengxianggou.com/sku/wxscan/getScanList',
					data: Qs.stringify({
						url: location.href.split("#")[0],
					}),
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
				}).then(res => {
					wx.config({
						debug: false,
						appId: "wxbf65b7f4c706892c", // 必填,公众号的唯一标识
						timestamp: res.data.data.timestamp, // 必填,生成签名的时间戳
						nonceStr: res.data.data.nonceStr, // 必填,生成签名的随机串
						signature: res.data.data.signature, // 必填,签名
						jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表
					});
					wx.ready(function() {
						// config信息验证成功后会执行ready方法,所有接口调用都必须在config接口获得结果之后
						// config 是一个客户端的异步操作,所以如果需要在页面加载时调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行.对于用户触发是才调用的接口,则可以直接调用,不需要放在ready函数中
						wx.scanQRCode({ // 微信扫一扫接口
							desc: 'scanQRCode desc',
							needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
							// scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
							success: function(res) {
								const getCode = res.resultStr.split(",")[1]; // 当needResult 为 1 时,扫码返回的结果
								if(getCode) {
									that.show = true;
									that.show2 = true;
									that.axios({
										method: 'POST',
										url: `${API}/sku/inventory/type/stock/list`,
										data: Qs.stringify({
											uuid: localStorage.getItem("uuid"),
											barCode: getCode,
											inventoryId: that.orderId
										}),
										headers: {
											'Content-Type': 'application/x-www-form-urlencoded'
										},
									}).then(res => {
										if(res.data.code === 200) {
											that.show2 = false;
											that.show = false;
											that.datelist = res.data.data.list;
											that.ispop = true;
											that.productName = res.data.data.productName;
											that.inventoryProductId = res.data.data.ipId;
											that.pbarcode = res.data.data.barCode;
											for(let i = 0; i < that.datelist.length; i++) {
												if(that.datelist[i].psId == 0) {
													if(that.datelist[i].inventoryCount == 0) {
														that.datelist[i].inventoryCount = null;
													}
												}
											}
										} else if(res.data.code === 401) {
											that.show2 = false;
											that.show = false;
											that.$router.push({
												path: "/loginpd"
											});
										} else {
											that.show2 = false;
											that.show = false;
											Toast(res.data.msg)
										}
									})
								} else {
									Toast.fail("扫码失败,请重新扫码!")
								}

							}
						})
					});
					/* 处理失败验证 */
					wx.error(function(res) {
						// config 信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
						alert('配置验证失败: ' + res.errMsg)
					});
				});
			},
			oninputblur() {

			},
			//扫码
			confirmpd() {
				//数据储存处理
				localStorage.setItem('openstyle',this.ispop);
				localStorage.setItem('hodedata',JSON.stringify(this.datelist));
				localStorage.setItem('hodename',this.productName);
					
			 	let that = this;
	            this.axios({
	                method: 'POST',
	                url:'http://ha.tongchengxianggou.com/sku/wxscan/getScanList',
	                data: Qs.stringify({
	                    url: location.href.split("#")[0],
	                }),
	                headers: {
	                    'Content-Type': 'application/x-www-form-urlencoded'
	                },
	            }).then(res=>{
	                wx.config({
	                    debug: false,
	                    appId: "wxbf65b7f4c706892c", // 必填,公众号的唯一标识
	                    timestamp: res.data.data.timestamp, // 必填,生成签名的时间戳
	                    nonceStr: res.data.data.nonceStr, // 必填,生成签名的随机串
	                    signature: res.data.data.signature, // 必填,签名
	                    jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表
	                });
	                wx.ready(function () {
	                    // config信息验证成功后会执行ready方法,所有接口调用都必须在config接口获得结果之后
	                    // config 是一个客户端的异步操作,所以如果需要在页面加载时调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行.对于用户触发是才调用的接口,则可以直接调用,不需要放在ready函数中
	                    wx.scanQRCode({ // 微信扫一扫接口
	                        desc: 'scanQRCode desc',
	                        needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
	                        // scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
	                        success: function (res) {
	                            const getCode = res.resultStr.split(",")[1]; // 当needResult 为 1 时,扫码返回的结果
	                            if (getCode) {
	                            	
	                            	this.buildcode = getCode;
	                            	/*
	                                if (getCode == barCode) {
	                                    let stlist = JSON.stringify(stList);
	                                    let products = JSON.stringify(that.products);
	                                } else {
	                                    let stlist = JSON.stringify(stList);
	                                    let products = JSON.stringify(that.products);
	                                }
	                                */
	                            } else {
	                                Toast.fail("扫码失败,请重新扫码!")
	                            }
	                            
	                        }
	                    })
	                });
	                /* 处理失败验证 */
	                wx.error(function (res) {
	                    // config 信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
	                    alert('配置验证失败: ' + res.errMsg)
	                });
	            });
				
				
				
				
			},
			datapop() {
			},
			datedetail(inventoryProductId, name, barcode,viewitem) {
				this.buildID = inventoryProductId;
				this.buildcode = barcode;
				this.productName = name;
				this.ispop = true;
				//this.detailrq();
			},
			bodyScroll(event) {
				event.preventDefault();
			},
			// 禁止滚动
			forbidBodyScroll() {
				let that = this;
				document.getElementsByTagName('body')[0].addEventListener('touchmove', that.bodyScroll, false);
			},
			// 允许滚动
			allowBodyScroll() {
				document.getElementsByTagName('body')[0].removeEventListener('touchmove', that.bodyScroll, false);
			},
			closepop() {
				
				localStorage.removeItem("openstyle");
				localStorage.removeItem("hodedata");
				localStorage.removeItem("hodename");
				
				this.ispop = false;
				//this.allowBodyScroll();
			},
			
			stoptdata(){
				localStorage.removeItem("openstyle");
				localStorage.removeItem("hodedata");
				localStorage.removeItem("hodename");
				this.ispop = false;
			},
			preservedata() {
				this.isshowloading = true;
				let myData = {
					barCode: this.buildcode,
					poolId: this.buildID,
				};
				this.axios({
					method: 'POST',
					url: `${API}/sku/product/list/barCode/update/do`,
					data: Qs.stringify(
						myData
					),
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
				}).then(res => {
					if(res.data.code === 200) {
						this.isshowloading = false;
						this.yesInfo = [];
						this.pageNumtwo = 1;
						this.finished2 = false;
						this.loading2 = true;
						this.showLoad2 = true;
						this.onLoadtwo();
						//保存成功后的事件
						localStorage.removeItem("openstyle");
						localStorage.removeItem("hodedata");
						localStorage.removeItem("hodename");
						this.ispop = false;
						Toast({
						  	message:res.data.msg,
						  	icon: 'like-o',
						  	duration:1500
						});

					}else{
						this.isshowloading = false;
						Toast.fail(res.data.msg)
					}
				})
			},
			isshowdow() {
				this.isdown = true;
			},
			hidedown() {
				this.isdown = false;
			},
			back() {
				path: "/index",
				this.$router.push({
		        	path: "/index",
		        });
			},
			onLoadone() {
				
			},
			onLoadtwo() {
				this.show = true;
				let orderId = parseInt(this.$route.query.orderId);
				if(this.loading2 === true && this.finished2 === false) {
					if(this.pageNumtwo == 1) {
						this.yesInfo = [];
					}
					let myData = {
						page: this.pageNumtwo,
						productName: "",
						max: 10,
					};
					this.axios({
						method: 'POST',
						url: `${API}/sku/product/list/barCode`,
						data: Qs.stringify(
							myData
						),
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
					}).then(res => {
						if(res.data.code === 200) {
							this.show = false;
							this.countno = res.data.data.no;
							this.countok = res.data.data.ok;
							if(res.data.data.list.length != 0) {
								//新增数据拼接在后面
								this.yesInfo = this.yesInfo.concat(res.data.data.list);
							}
							this.loading2 = false;
							this.showLoad2 = false;
							this.pageNumtwo++;
							if(res.data.data.list.length == 0) {
								this.loading2 = false;
								this.finished2 = true;
								this.loadText = "加载完成";
							}
						} else if(res.data.code === 401) {
							this.show = false;
							this.$router.push({
								path: "/loginpd"
							});
						} else {
							this.show = false;
							this.finished2 = true;
							this.loading2 = false;
							this.showLoad2 = false;
							Toast(res.data.msg);
						}
					})
				}
			}
		},
		mounted() {
			//扫码保存的数据
			this.ispop =localStorage.openstyle; 
			this.productName =  localStorage.hodename;
			if(localStorage.hodedata){
				this.datelist =JSON.parse(localStorage.hodedata);
			}
			
			
			let height = window.innerHeight - 40;
			this.$refs.heightwindow1.style.height = height + "px";
		},
		beforeRouteEnter(to, from, next) {
		   next(vm=>{          //  这里的vm指的就是vue实例,可以用来当做this使用
		      	if(from.name == "verifycodesearch"){
		      		if(vm.$route.query.Returnid){
		      			vm.datedetail(vm.$route.query.Returnid,vm.$route.query.Returnname,vm.$route.query.ReturnbarCode)
		      		}
		      	}
		      	
		    })
	  	},
		created() {
			let orderId = parseInt(this.$route.query.orderId);
			this.orderId = orderId;
		}
	};
</script>

<style scoped>
	.addmore{
		width: 100%;
		height: 38px;
		line-height: 38px;
		text-align: center;
		color: white;
		font-size: 14px;
		background: #3FD15B;
		position: fixed;
		bottom: 0px;
	}
	.serchicon {
		width: 100%;
		background: salmon;
	}
	.login_btn:active {
		opacity: 0.9;
	}
	.loading {
		position: absolute;
		left: 50%;
		top: 50%;
	}
	.pd_con_wp {
		height: auto;
		min-height: 100%;
	}
	.pd_con_wp::after {
		display: block;
		content: " ";
		visibility: hidden;
		height: 0;
		clear: both;
	}
	
	.van-overlay {
		background-color: rgba(0, 0, 0, 0)
	}
	
	.add_date_p {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		-webkit-overflow-scrolling: touch;
	}
	
	.add_date_con {
		width: 285px;
		height: 260px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -142px;
		margin-top: -125px;
		background: #fff;
		border-radius: 3px;
		-webkit-overflow-scrolling: touch;
	}
	
	.add_date_con .title_d {
		text-align: center;
		line-height: 25px;
		padding: 12px 0;
		border-bottom: 1px solid #EEEEEE;
		font-size: 18px;
		color: #333333;
		font-weight: bold;
	}
	
	.add_date_con .pname_d {
		padding: 10px 15px;
		font-size: 12px;
		color: #000;
		line-height: 16px;
		overflow: hidden;
	}
	
	.add_date_con .pname_d::after {
		display: block;
		content: "";
		visibility: hidden;
		height: 0;
		clear: both;
	}
	
	.add_date_con .pname_d .lab {
		float: left;
	}
	
	.add_date_con .pname_d .n_val {
		float: left;
		width: 190px;
		font-weight: bold;
	}
	
	.add_date_con .pname_d span {
		font-weight: bold;
		font-size: 14px;
	}
	
	.add_date_con .date_s {
		height: 40px;
		line-height: 40px;
		padding: 0 15px;
	}
	
	.add_date_con .date_s .lab {
		float: left;
		font-size: 12px;
		color: #000000;
		line-height: 40px;
	}
	.codeinput{
		width: 180px!important;
	}
	.add_date_con .date_s .inp {
		float: left;
		width: 190px;
		height: 36px;
		border: 1px solid #D6D6D6;
		font-size: 14px;
		color: #333333;
		text-indent: 5px;
	}
	
	.add_date_con .date_s .inp .val {
		width: 140px;
		float: left;
		display: block;
		height: 36px;
	}
	
	.add_date_con .d_num {
		height: 40px;
		line-height: 40px;
		padding: 15px 15px;
	}
	
	.add_date_con .d_num .lab {
		float: left;
		font-size: 12px;
		color: #000000;
		line-height: 40px;
	}
	
	.add_date_con .d_num .inp {
		float: left;
		width: 190px;
		height: 36px;
		border: 1px solid #D6D6D6;
		font-size: 14px;
		color: #333333;
		text-indent: 5px;
		overflow: hidden;
	}
	
	.add_date_con .d_num .inp input {
		display: block;
		width: 190px;
		height: 36px;
		border: 0;
		outline: 0;
		text-indent: 5px;
		font-size: 14px;
	}
	
	.add_date_con .p_btn_w {
		height: 50px;
		display: flex;
		width: 100%;
	}
	
	.add_date_con .p_btn_w .item {
		flex: 1;
		line-height: 50px;
		font-size: 18px;
		color: #3FD15B;
		text-align: center;
		font-weight: bold;
	}
	
	.choose_date_con {
		position: absolute;
		width: 190px;
		height: 170px;
		overflow: hidden;
		box-shadow: 0px 0px 20px 0px rgba(201, 201, 201, 0.48);
		right: 15px;
		border-radius: 2px;
		-webkit-overflow-scrolling: touch;
	}
	
	.h_50 {
		height: 50px;
	}
	
	.popup_wp {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .7);
		-webkit-overflow-scrolling: touch;
	}
	
	.pop_close {
		height: 30%;
		width: 100%;
	}
	
	.pop_list_wp {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 70%;
		background: #F7F7F7;
		-webkit-overflow-scrolling: touch;
		/* overflow-x: hidden; */
		/* overflow: auto; */
	}
	
	.pop_list {
		background: #F7F7F7;
		height: 330px;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.pop_list .item {
		background: #fff;
		margin-bottom: 5px;
	}
	
	.pop_list .item::after {
		display: block;
		height: 0;
		content: " ";
		visibility: hidden;
		clear: both;
	}
	
	.pop_list .item .t_name {
		height: 40px;
		line-height: 40px;
		overflow: hidden;
		border-bottom: 1px solid #EEEEEE;
		font-size: 12px;
		color: #999999;
	}
	
	.pop_list .item .t_name .pname {
		float: left;
		margin-left: 15px;
	}
	
	.pop_list .item .t_name .pno {
		float: right;
		margin-right: 15px;
	}
	
	.pop_list .item .t_con {
		padding: 10px 0;
	}
	
	.pop_list .item .t_con::after {
		display: block;
		content: " ";
		height: 0;
		visibility: hidden;
		clear: both;
	}
	
	.pop_list .item .t_con .dl {
		float: left;
		margin-left: 15px;
	}
	
	.pop_list .item .t_con .dl .dd {
		line-height: 20px;
		height: 20px;
		overflow: hidden;
		font-size: 14px;
		color: #333333;
	}
	
	.pop_list .item .t_con .dl .dd span {
		font-weight: bold;
	}
	
	.pop_list .item .t_con .dl .dt {
		overflow: hidden;
		margin-top: 8px;
		padding: 3px 0;
	}
	
	.pop_list .item .t_con .dl .dt::after {
		display: block;
		clear: both;
		visibility: hidden;
		height: 0;
		content: " ";
	}
	
	.pop_list .item .t_con .dl .dt .lab {
		float: left;
		line-height: 30px;
		font-size: 12px;
		color: #333333;
	}
	
	.pop_list .item .t_con .dl .dt .inp {
		float: left;
		width: 90px;
		border: 1px solid #D6D6D6;
		border-radius: 1px;
		overflow: hidden;
	}
	
	.pop_list .item .t_con .dl .dt .inp input {
		display: block;
		border: 0;
		outline: 0;
		width: 100%;
		height: 26px;
		font-size: 14px;
		text-indent: 5px;
	}
	
	.pop_list .item .t_con .btn_r {
		float: right;
		margin-right: 15px;
		width: 90px;
		height: 30px;
		background: #3FD15B;
		line-height: 30px;
		text-align: center;
		margin-top: 28px;
		border-radius: 3px;
		font-size: 14px;
		color: #FFFFFF;
	}
	
	.pop_list .item .t_con .btn_r:active {
		opacity: 0.3;
	}
	
	.pop_list_wp .add_date_btn {
		width: 100%;
		position: absolute;
		height: 50px;
		top: 100%;
		margin-top: -50px;
		left: 0;
		background: #3FD15B;
		font-size: 16px;
		color: #fff;
		text-align: center;
		line-height: 50px;
		box-shadow: 0px -5px 18px 0px rgba(161, 161, 161, 0.5);
		display: flex;
	}
	
	.pop_list_wp .add_date_btn .item {
		flex: 1;
	}
	
	.pop_list_wp .add_date_btn .item.active {
		background: #f44;
	}
	
	.pd_left_bar {
		float: left;
		height: 530px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background: #fff;
		padding-bottom: 40px;
	}
	
	.pd_left_bar.active {
		position: absolute;
	}
	
	.mainpast {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		background: #fff;
	}
	
	.mainpast.active {
		height: 200px;
		overflow: hidden;
	}
	
	.entry {
		position: relative;
		height: 100%;
		/* background: #ffffff; */
	}
	
	.h_40 {
		height: 40px;
	}
	
	.home_top {
		width: 100%;
		height: 40px;
		background: #3FD15B;
		text-align: center;
		line-height: 40px;
		text-indent: -10px;
		color: rgba(255, 255, 255, 1);
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.home_tab {
		width: 100%;
		height: 40px;
		text-align: center;
		color: rgba(255, 255, 255, 1);
		line-height: 40px;
		font-size: 17px;
		position: relative;
		overflow: hidden;
	}
	
	.home_top.active {
		position: absolute;
	}
	
	.home_top .xla_s {
		right: 10px;
		z-index: 2;
		top: 35px;
		position: absolute;
		width: 111px;
		height: 85px;
		background: #ffffff;
		font-size: 14px;
		color: #333333;
		border-radius: 2px;
		box-shadow: 0px 0px 10px 0px rgba(201, 201, 201, 0.48);
	}
	
	.home_top .alt {
		position: absolute;
		top: -17px;
		right: 3px;
		margin-left: -10px;
		width: 20px;
		height: 20px;
		z-index: 3;
	}
	
	.home_top .alt::before {
		position: absolute;
		bottom: 0px;
		left: 0px;
		content: '';
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 10px solid rgba(0, 0, 0, .1);
	}
	
	.home_top .alt::after {
		content: '';
		position: absolute;
		bottom: 0px;
		left: 0px;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 10px solid #fff;
	}
	
	.home_top .xla_s .item {
		color: #333;
	}
	
	.home_top .xla_s .item .icon {
		width: 20px;
		height: 20px;
		float: left;
		margin-top: 10px;
		margin-left: 10px;
	}
	
	.home_top .xla_s .item .icon img {
		display: block;
		width: 20px;
		height: 20px;
	}
	
	.home_tab .back {
		float: left;
		padding: 10px 10px 0;
		width: 8px;
		height: 20px;
	}
	
	.home_tab .back img {
		display: block;
		width: 10px;
		height: 20px;
	}
	
	.home_tab .text {
		float: left;
		margin-left: 35%;
	}
	
	.home_tab .switch_q {
		display: block;
		float: right;
		text-align: right;
		font-size: 20px;
		padding-right: 15px;
		padding-top: 10px;
		font-size: 12px;
		line-height: 22px;
	}
	
	.home_tab .switch_q img {
		display: block;
		width: 20px;
		height: 20px;
		float: left;
		margin-right: 12px;
	}
	
	.home_tab .submit {
		width: 40px;
		text-align: center;
		font-size: 14px;
		display: block;
		float: right;
		line-height: 45px;
		overflow: hidden;
	}
	
	.van-sidebar-item {
		padding: 15px 10px;
		font-size: 14px;
	}
	
	.van-sidebar-item--select {
		border-color: #3FD15B;
		color: #3FD15B;
	}
	
	.tab_bar_item {
		width: 265px;
		margin: 10px auto;
		overflow: hidden;
		display: flex;
		border-radius: 3px;
		background: seagreen;
	}
	
	.tab_bar_item .item {
		flex: 1;
		width: 263px;
		height: 34px;
		border: 1px solid #7d7e80;
		background: #fff;
		font-size: 14px;
		color: #333333;
		text-align: center;
		line-height: 34px;
	}
	
	.tab_bar_item .item.active {
		border: 1px solid #3FD15B;
		background: #3FD15B;
		color: #fff;
	}
	
	.van-list {
		background: #fff;
	}
	
	.p_list {
		width: 100%;
		overflow: hidden;
		background: #fff;
		margin-bottom: 10px;
	}
	
	.p_list .item {
		padding: 10px 0;
		margin: 0 10px;
		border-bottom: 1px solid #EEEEEE;
	}
	
	.p_list::after {
		display: block;
		content: " ";
		height: 0;
		visibility: hidden;
		clear: both;
	}
	
	.p_list .item::after {
		display: block;
		content: " ";
		height: 0;
		visibility: hidden;
		clear: both;
	}
	
	.p_list .no_figure {
		float: left;
		width: 40px;
		height: 40px;
		background: #f6f6f6;
	}
	
	.p_list .no_figure img {
		display: block;
		width: 40px;
		height: 40px;
	}
	
	.p_list .no_dl {
		float: left;
		max-width: 210px;
		margin-left: 10px;
	}
	
	.p_list .no_dl .name {
		line-height: 20px;
		color: #333333;
		font-size: 14px;
	}
	
	.p_list .no_dl .scan {
		margin-top: 5px;
		line-height: 15px;
		color: #333333;
		font-size: 11px;
	}
	
	.p_list .yes_num {
		float: right;
		line-height: 40px;
		font-size: 12px;
		color: #333333;
	}
	
	.van-dialog__message--has-title {
		color: #FF0000;
	}
	/* 加载动画效果 */
.show_loading{
  	position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}
.moreloading{
	position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;	
}
.load1 {
  margin: 100px auto;
  width: 50px;
  height: 60px;
  text-align: center;
  font-size: 10px;
}
.load1 > div {
  background-color: #67CF22;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
.load1 .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.load1 .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
.load1 .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.load1 .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

/* load6 */
.load6 {
	position: absolute;
	bottom: 70px;
  width: 150px;
  text-align: center;
}
.load6 > div {
  width: 30px;
  height: 30px;
  background-color: #67CF22;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.load6 .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.load6 .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}


</style>