productLine-applet/pages/product/query.vue

<template>
  <view >
	  <tn-nav-bar fixed>下线查询</tn-nav-bar>
	  <view class="" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		  <view class="tn-border-solid">
			<view class="tn-flex tn-flex-col-bottom tn-margin">
				  <view class="tn-flex-3 align-content-item  tn-text-center ">
					  <view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
						<view class="content__title">产品二维码：</view>
						<view class="content__data tn-flex-1">
						  <tn-input v-model="qrCode" type="text" placeholder="请扫描产品二维码" border :height="60" >
						  </tn-input>
						</view>
					  </view>
				  </view>
				  <view class="tn-flex-1 align-content-item  tn-text-right">
					  <tn-button backgroundColor="#01BEFF"  fontColor="tn-color-white" icon="tn-icon-scan"  @click="openScan">
						  <span class="tn-icon-scan tn-margin-right-xs"></span>扫码
					  </tn-button>
				  </view>
			</view>
			<view class="tn-flex tn-flex-col-bottom tn-margin">
				  <view class="tn-flex-3 align-content-item  tn-text-center ">
					  <view class="content tn-flex tn-flex-direction-row tn-flex-col-center ">
						<view class="content__title">日期：</view>
						<view class="content__data tn-flex-1">
						  <tn-input v-model="time" type="text" :disabled="true" placeholder="请选择日期"  :height="60" border @click="openCalendar"></tn-input>
						</view>
					  </view>
				  </view>
				  <view class="tn-flex-1 align-content-item  tn-text-right">
					  <tn-button :plain="true"  backgroundColor="#dcdfe6" @click="initList()">
						   <span class="tn-icon-search tn-margin-right-xs"></span>查询
					   </tn-button>
				  </view>
			</view>
		  </view>		
		  <view>
			  <template v-for="(item,index) in list">
				  <view class="tn-flex tn-border-solid-bottom tn-bg-white tn-padding" @click="toDetail(item.id)" >
					  <view class="tn-flex-4 "style="height: 50rpx;line-height:50rpx;" :class="[!item.frontImg?'tn-color-red':'']">
						  {{item.qrCode}}
					  </view>
					  <view class="tn-flex-1  tn-text-right ">
						  <view v-if="item.status==-1" class="tn-btn-class tn-btn  tn-round tn-main-gradient-orangered--reverse tn-text-center" style="height: 50rpx;line-height:50rpx;">
							  生产中
						  </view>
						  <view v-if="item.status==0" class="tn-btn-class tn-btn  tn-round tn-main-gradient-orange tn-text-center" style="height: 50rpx;line-height:50rpx;">
							  作废
						  </view>
						  <view v-if="item.status==1" class="tn-btn-class tn-btn  tn-round tn-main-gradient-red tn-text-center" style="height: 50rpx;line-height:50rpx;">
							  待维修
						  </view>
						  <view v-if="item.status==2" class="tn-btn-class tn-btn  tn-round tn-main-gradient-green tn-text-center" style="height: 50rpx;line-height:50rpx;">
							  已下线
						  </view>
						  <view v-if="item.status==3" class="tn-btn-class tn-btn  tn-round tn-main-gradient-blue tn-text-center" style="height: 50rpx;line-height:50rpx;">
							  已入库
						  </view>
					  </view>
				  </view>
			  </template>
			  <tn-load-more class="tn-margin" status="nomore" v-if="total>0 && total<=list.length"></tn-load-more>
		  </view>
		  <view v-if="total==0" class="tn-padding tn-bg-white tn-border-solid-top">
			<tn-empty  icon="../../../static/image/cart.jpg" text="暂无数据" :imgWidth="200" :imgHeight="200" class="tn-margin-top-xl "></tn-empty>
		  </view>
		</view>  
		
    <tn-calendar
      v-if="showCalendar"
      v-model="showCalendar"
      mode="date"
	  :dateValue="time"
      :showLunar="false"
      :changeYear="false"
      @change="onChangeCalendar"
    ></tn-calendar>
  </view>
</template>

<script setup>
  export default {
    data(){
      return {
		showCalendar: false,
		time:'',
		qrCode:'',
		list:[],
		current:1,
		size:20,
		total:-1,
		status:'',
      }
    },
	onLoad(options){
		// if(options.status){
		// 	this.status = options.status
		// }
		// this.initList();
	},
	onReachBottom() { //监听上拉触底事件
		if(this.total<= this.list.length){
			return
		}
		this.getList();
	},
	onPullDownRefresh() {//下拉刷新
		this.initList();
	},
	onShow(){
		let pages = getCurrentPages();
		let currentPage = pages[pages.length-1];
		if(currentPage.options.status){
			this.status = currentPage.options.status
		}
		this.initList();
	},
    methods: {
		openScan(){
			// 允许从相机和相册扫码
			let that = this;
			uni.scanCode({
				success: function (res) {
					that.qrCode = res.result
					that.detail()
				}
			});
		},
		initList(){
			this.current = 1;
			this.list = [];
			this.getList();
		},
		getList(){
			let that = this,
			url = "wx/product/api/list",
			params = {
				current:that.current,
				size:that.size,
				isNg_ignore:that.status=='-1'?"1":"0",
			}
			if(this.qrCode){
				params.qrCode = this.qrCode;
			}
			if(this.time){
				params.createTime=this.time;
			}
			that.api.request(url, params,"get").then((res) => {
				console.log(res)
				let list=res.records;
				for(var i = 0; i < list.length; i++){
					that.list.push(list[i]);
				}
				if(list.length>0){
					that.current=that.current+1;
				}
				that.total = res.total
				uni.stopPullDownRefresh();
			}).catch((res) => {
				uni.stopPullDownRefresh();
			})
		},
		toDetail(id){
			uni.navigateTo({
				url:"/pages/product/details?id="+id
			})
		},
		openCalendar() {
		  this.showCalendar = true
		},
		onChangeCalendar(event){
			this.time = event.date
			this.initList();
		},
    }
  }
</script>

<style lang="scss" scoped>
	
	.list-icon-text, .list-image-text {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	}
	
	.list {
	  &__left {
	    display: flex;
	    align-items: center;
	    justify-content: flex-start;
		min-width: 140rpx;
	    
	    &__icon, &__image {
	      margin-right: 18rpx;
	    }
	  }
	  
	  &__right {
	    display: flex;
	    align-items: center;
	    justify-content: flex-end;
		flex-wrap: wrap;
		word-break: break-all;
	  }
	}
	
	
	.tn-image-upload {
	  display: flex;
	  flex-direction: row;
	  flex-wrap: wrap;
	  align-items: center;
	  
	  &__item {
	    /* #ifndef APP-NVUE */
	    display: flex;
	    /* #endif */
	    align-items: center;
	    justify-content: center;
	    width: 200rpx;
	    height: 200rpx;
	    overflow: hidden;
	    margin: 12rpx;
	    margin-left: 0;
	    background-color: $tn-font-holder-color;
	    position: relative;
	    border-radius: 10rpx;
	    
	    &-preview {
	      border: 1rpx solid $tn-border-solid-color;
	      
	      
	      &__image {
	        display: block;
	        width: 100%;
	        height: 100%;
	        border-radius: 10rpx;
	      }
	    }
	    
	  }
	  
	}
</style>