lineUp.vue

<template>
	<view class="colletion full-width">
		<view class="uni-tab-bar full-width">
			<view class="content full-width" scroll-y>
				<view v-if="LoupanList.length == 0 && stateindex == true">
					<view class="noData">
						<image src="../../static/icon_default_no.png" mode="aspectFill" class="noData_img"></image>
						<view class="noData_title">
							啊嘞，当前还没有打印任务呢<br>
							<view class="noData_text">去定制一个作品吧</view>
						</view>
						<view class="noData_but" @click="tomain()">去定制</view>
					</view>
				</view>
				<view v-else v-for="(designer, index) in LoupanList" :key="index"
					style="background: #282932  !important;margin: 25upx 25upx; border-radius: 20upx;"
					@click="self_help_payment(designer)">

					<!-- color: #fff; border-bottom: 1upx solid #282A32; -->
					<view style="color: #fff;  display: flex; align-items: center; justify-content: center;">

						<view v-if="designer.user_id != userId" class="border-image-pesudo-no">
							<view class="border-image-pesudo-in-no">
								<!-- <view style="margin:20upx 30upx;width: 141upx; height:132upx; background-size:contain;
						background-repeat:no-repeat; background-position: center; position: relative;" 
						:style="{'background-image':' url(' + designer.front_image + ')'}"> -->
								<!-- <image :src="designer.works_image + '?x-oss-process=image/resize,lfit,w_81'" mode="aspectFit" @click="previewImg(designer,0)"
							style="width: 71upx; height:68upx; position: absolute;
							left:0; right:0; top:0; bottom:0; margin:auto;"> -->
								<image style="width: 100%;height: 100%;" src="../../static/img/icon_line_up_back.png"
									mode="aspectFit"></image>
								<image
									style="width: 141upx; height: 132upx; margin:auto; display: block;position: absolute; z-index: 10;"
									:src="designer.front_image" mode="aspectFit"></image>
								<image
									style="width: 141upx; height: 132upx; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index:8;"
									:src="designer.works_image + '?x-oss-process=image/resize,lfit,w_300'"
									mode="aspectFit">
								</image>
							</view>
						</view>

						<view v-if="designer.user_id == userId" class="border-image-pesudo">
							<view class="border-image-pesudo-in">
								<!-- <view style="margin:20upx 30upx;width: 141upx; height:132upx; background-size:contain;
						background-repeat:no-repeat; background-position: center; position: relative;" 
						:style="{'background-image':' url(' + designer.front_image + ')'}"> -->
								<!-- <image :src="designer.works_image + '?x-oss-process=image/resize,lfit,w_81'" mode="aspectFit" @click="previewImg(designer,0)"
							style="width: 71upx; height:68upx; position: absolute;
							left:0; right:0; top:0; bottom:0; margin:auto;"> -->
								<image style="width: 100%;height: 100%;" src="../../static/img/icon_line_up_back.png"
									mode="aspectFit"></image>
								<image
									style="width: 141upx; height: 132upx; margin:auto; display: block;position: absolute; z-index: 10;"
									:src="designer.front_image" mode="aspectFit"></image>
								<image
									style="width: 141upx; height: 132upx; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index:8;"
									:src="designer.works_image + '?x-oss-process=image/resize,lfit,w_300'"
									mode="aspectFit">
								</image>
							</view>
						</view>


						<view style="width: calc(100% - 360upx);">
							<view style="width: 90%;font-size: 28upx;">
								<text style="font-size: 40upx;font-weight: bold;">{{designer.id || ''}}</text>
							</view>
							<view style="font-size: 24upx; color: #FFFFFF; margin-top: 30upx;">
								{{designer.goods_name || ''}}
							</view>
							<!-- <view style="font-size: 24upx; color: #FFFFFF; margin-top: 10upx;">{{designer.goods_specs || ''}}</view> -->
						</view>
						<view style="margin-right: 20upx; margin-left: auto; padding-top:75upx">
							<view v-if="designer.status.value == 1"
								style="width: 136upx; height: 60upx;background: #7948ea;border-radius:30upx; background: linear-gradient(92deg, #178CE6, #984ACE);opacity: 0.86; ">
								<view style="text-align: center; font-size: 28upx; color: #FFFFFF; line-height: 60upx;">
									打印中 </view>
							</view>
							<view v-else
								style="width: 136upx; height: 60upx;background: transparent;border-radius: 30upx;">
								<view style="text-align: center; font-size: 28upx; color: #8148BB; line-height: 60upx;">
									排队中 </view>
							</view>
						</view>
						<!-- 订单状态 0：等待生产，1：生产中，2: 生产完成，3：取消生产，4：出料中（弃用），5: 等待取料（弃用），
							6：待入货（弃用），7：取货完成，8：已发货，9：订单完成 -->
						<!-- <view v-else style="width: 200upx;">
							<view v-if="index == 0">
								<view v-if="designer.status.value == 4" style="text-align: center; font-size: 30upx; color: #F56464;">{{designer.status.text}}</view>
								<view v-else-if="designer.status.value == 1" style="text-align: center; font-size: 30upx; color: #FF8B00;">{{designer.status.text || ''}}</view>
								<view v-else style="text-align: center; font-size: 30upx;">{{designer.status.text}}</view>
							</view>
							<view v-else>
								<view style="text-align: center; font-size: 30upx;line-height: 50upx;">排队中</view>
							</view>
						</view> -->
					</view>
				</view>
			</view>
			<!-- 提示 -->
			<view v-if="sighstate">
				<view
					style="position: fixed; z-index:999; width: 100%; height: 100%; background:rgba(0,0,0,0.6); top: 0;"
					@click.stop="sighstate = false"></view>
				<view style="position: fixed; z-index: 1000; top: 0; left: 0; bottom: 0; right: 0; margin: auto;
				width: 558upx; height: 600upx; background: #FFFFFF; border-radius: 10upx;
				display: flex; align-items: center; justify-content: center;">
					<view style="position: absolute;
					top: 0; right: 0;" @click.stop="sighstate = false">
						<image src="../../static/icon_guanbi.png" mode=""
							style="width: 26upx; height: 26upx; padding: 12upx 22upx;"></image>
					</view>
					<view style="width: 558upx;">
						<view style="display: flex; align-items: center; justify-content: center;  
						 width: 100%; height: 360upx;   ">

							<!-- <view
								style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;flex-direction: column;"> -->
							<!-- <image src="../../static/icon_paidui.png" mode="aspectFill" 
								style="width: 154upx; height: 154upx; margin: auto;"></image> -->
							<image :src="designer.works_image + '?x-oss-process=image/resize,lfit,w_150'"
								mode="aspectFit" style="width:150upx; "></image>
							<image :src="designer.back_image + '?x-oss-process=image/resize,lfit,w_150'"
								mode="aspectFit" style=" width: 150upx; margin-left: -150upx;  "></image>

							<!-- 	</view> -->

						  </view>
						<view style="text-align: center; font-size: 36upx; margin-top: 5upx;">作品排队中</view>
						<view style="text-align: center; font-size: 36upx;">如需要打印可与客服确认</view>

						<view v-if="designer.user_id == userId " @click="toOrderDetail(designer)" style="width: 135upx; height: 55upx;background: #E7BC15; 
					     border-radius: 40upx;
						 color: #FFFFFF; 
					     margin:10upx auto; 
						 text-align: center;
						 padding:auto;
						 padding-top: 15upx;">查看详情</view>
					</view>

					<!-- 查看详情 -->
					<!-- <view style="width: 100%;" >
							<view style="width: 136upx; height: 60upx;background: #E7BC15;border-radius: 30upx; color: #FFFFFF; text-align: center; ">查看详情</view>
						</view> -->

				</view>
			</view>
		</view>
		<!-- 提示完 -->
	</view>
	</view>
</template>

<script>
	import homeservice from '@/service/homeservice.js'
	import userService from '@/service/UserService';
	import Enums from '@/util/Enums';
	import Env from '@/util/Env.js';
	export default {
		computed: {

		},
		data() {
			return {
				LoupanList: [],
				dataLoadState: {
					pullDownRefresh: false,
					reachBottom: false
				},
				queryPage: {
					s: 'Machine.wait', //获取设备打印等待列表
					machine_id: null,
					page: 1,
					per_page: 15,
					// total: 0
				},
				stateindex: false,
				key: null, //1直营配送站 2 万能通用版 3色彩自助站
				sighstate: false,
				statetime: null,
				animMaind_time: 10000, //动画时间----刷子上下动画时间
				designer: null,
				userId: null, //用户信息

			};
		},
		methods: {

		

			//调转订单详情
			toOrderDetail(item) {
				this.sighstate = false;
				var url = this.$Env.getBaseURL();
				var envVersionName = "trial";
				if (url.indexOf("colorpark") != -1) {
					envVersionName = "release";
				}
				//console.log("envVersionName="+envVersionName)
				wx.navigateToMiniProgram({
					appId: this.$Env.getappId(),
					path: '/pages/mine/self_help_payment_details?orderId=' + item.order_id +
						'&type=null&machine_id=' + item.machine_id,
					extraData: {
						foo: 'bar'
					},
					envVersion: envVersionName,
					success(res) {
						// 打开成功
					},
					fail(res) {
						console.log("打开小程序失败")
					}
				});
			},


			self_help_payment(designer) {

				if (designer.user_id != this.userId) {
					return;
				}
				homeservice.WorksList({
					machine_id: this.queryPage.machine_id,
					s: 'machine.detail'
				}).then(res => {
					if (this.key == 2) {
						this.designer = designer
						if (designer.status.value == 1) {
							this.clearIntervalTime()
							uni.navigateTo({
								url: '../mine/self_help_payment_details?orderId=' + designer
									.order_id +
									'&type=' + this.key + '&machine_id=' + this.queryPage
									.machine_id
							})
						} else {
							if (this.sighstate == true) return;
							this.sighstate = true
						}
					}
				}).catch(err => {
					uni.showToast({
						title: '设备休息中',
						icon: 'none',
						duration: 2000
					});
				});
			},
			tomain() {
				uni.navigateBack();
			},
			previewImg(designer, index) {
				let img = designer.works_image
				uni.previewImage({
					current: index,
					urls: [img]
				});
			},
			loadGoodsList(direction) {
				// uni.showLoading({ title: '加载中...' });
				if (this.dataLoadState.pullDownRefresh || this.dataLoadState.reachBottom) return;
				this.dataLoadState.pullDownRefresh = direction === Enums.DATA_DIRECTION.UP;
				this.dataLoadState.reachBottom = direction === Enums.DATA_DIRECTION.DOWN;
				if (this.dataLoadState.reachBottom) {
					if (Math.ceil(this.queryPage.total / this.queryPage.per_page) < this.queryPage.page) {
						return setTimeout(() => {
							uni.showToast({
								title: '啊嘞,没有更多数据了！',
								icon: 'none'
							});
						}, 500);
					}
				}
				homeservice.queryList(this.queryPage).then(result => {
					/*result.forEach((item, index) => {
						// console.log(index)
						let obj = index + 1
						item.lineup = obj < 10 ? "0" + obj : obj
						// console.log(item.lineup)
					}) */
					this.stateindex = true
					// (index + 1).padStart(2,'0')
					// 触底更新时，当前列表+查询结果集
					// let newList = this.LoupanList.concat(result)
					// this.LoupanList = newList
					/* let LoupanNewList = [];
					result.forEach((item, index) => {
						if (this.userId == item.user_id) {
							LoupanNewList.push(item)
						}
					}) */
					//this.LoupanList = LoupanNewList
					this.LoupanList = result
					// 分页对象处理
					this.queryPage.total = result.total;
					this.queryPage.per_page = result.per_page;
					// 停止当前页面下拉刷新
					if (this.dataLoadState.pullDownRefresh) uni.stopPullDownRefresh();
					// 数据加载状态处理 false
					this.dataLoadState.pullDownRefresh = false;
					this.dataLoadState.reachBottom = false;
					// uni.hideLoading();
				}).catch(err => {
					// 停止当前页面下拉刷新
					if (this.dataLoadState.pullDownRefresh) uni.stopPullDownRefresh();
					// 数据加载状态处理 false
					this.dataLoadState.pullDownRefresh = false;
					this.dataLoadState.reachBottom = false;
				});
			},
			// 做滚动加载使用
			loadMore() {
				
			},
			clearIntervalTime() {
				clearInterval(this.statetime)
				this.statetime = null
			}
		},
		// 下拉加载
		onPullDownRefresh() {
			this.dataLoadState.pullDownRefresh = false;
			this.dataLoadState.reachBottom = false;
			this.queryPage.page = 1;
			this.queryPage.total = 0;
			this.LoupanList = []
			this.loadGoodsList(Enums.DATA_DIRECTION.UP);
		},
		// 上拉加载
		onReachBottom() {
			console.log('上拉加载')
			setTimeout(() => {
				uni.showToast({
					title: '啊嘞,没有更多数据了！',
					icon: 'none'
				});
			}, 500);
		},
		onLoad(options) {
			this.queryPage.machine_id = options.machine_id;
			this.key = options.key;
			this.LoupanList = []
			this.queryPage.page = 1;
			this.queryPage.total = 0;
			var appUser = userService.getCacheAppUser();
			if (appUser != null) {
				this.userId = appUser.userInfo.id
			}
			//console.log("userInfo=" + this.userInfo.id);
			this.loadGoodsList(Enums.DATA_DIRECTION.UP);
			this.statetime = setInterval(function() {
				this.dataLoadState.pullDownRefresh = false;
				this.dataLoadState.reachBottom = false;
				this.queryPage.page = 1;
				this.queryPage.total = 0;
				this.loadGoodsList(Enums.DATA_DIRECTION.UP);
			}.bind(this), this.animMaind_time)
		},
		onShow() {
			//console.log("userId=" + userService.getCacheAppUser().userInfo.id);

		},
		// 卸载程序
		onUnload() {
			this.clearIntervalTime()
			let pages = getCurrentPages();
			//console.log(pages[pages.length - 2].route)
			if (pages[pages.length - 2].route == "pages/mine/order") {
				uni.reLaunch({
					url: '../index/start-up?machine_id=' + this.queryPage.machine_id + '&worksid=1'
				})
			} else if (pages[pages.length - 2].route == "pages/mine/orderNew") {
				uni.reLaunch({
					url: '../index/start-up?machine_id=' + this.queryPage.machine_id + '&worksid=1'
				})
			} else if (pages[pages.length - 2].route == "pages/index/index") {
				uni.reLaunch({
					url: '../index/start-up?machine_id=' + this.queryPage.machine_id + '&worksid=1'
				})
			}
		}
	};
</script>

<style lang="scss">
	@import "../index/css/css.css";

	page {
		background: #131319 !important;
	}

	.border-image-pesudo {
		width: 150upx;
		height: 150upx;
		background: #131319;
		margin: 25upx 35upx;
		position: relative;
		overflow: hidden;

		//clip-path: inset(0 round 8upx);
		.border-image-pesudo-in {
			width: 100%;
			height: 100%;
			background: #282932;
			//background-color: rgba(255,255,255,0.7);
		}
	}


	.border-image-pesudo-no {
		width: 150upx;
		height: 150upx;
		background: #131319;
		margin: 25upx 35upx;
		position: relative;
		overflow: hidden;
		opacity: 0.2;

		.border-image-pesudo-in-no {
			width: 100%;
			height: 100%;
			background: #282932;
			//background-color: rgba(255,255,255,0.7);
		}
	}

	/* .border-image-pesudo::before {
	    content: "";
	    position: absolute;
	    width: 140upx;
	    height: 140upx;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    border: 10upx solid;
		
		
		background: #131319;
		border: 5upx solid;
		
								
		border-image: linear-gradient(0deg, #178CE6, #984ACE) 2 2;
		
	    
	} */

	.colletion {
		.cart-ticket-null {
			padding-top: 50upx;
		}

		.content {}
	}
</style>