contract-front/pages/index/dingdan.uvue

<template>
  <scroll-view class="container" lower-threshold='50' @scrolltolower ='scrolltolower'>
	  
	  <view class="header">
	   <view class="header_info" >
	  	 <view class="header_info_icon"  @click.native.stop.prevent="toBack" style="display: flex; justify-content: center; align-items: center;">
	  	 	<uni-icons  type="left" size="30" color="#c2d4de"  > </uni-icons>
	  	 </view>
	  	 <text class="header_text" >录入订单</text>
	   </view>
	  </view>
	  
	  
    <!-- 搜索栏 -->
    <view class="search-box">
		<uni-icons class=" isshow-header-content-icon" type="search" :size="20"></uni-icons>
	  <uni-easyinput :inputBorder="false"  class=" search-input" v-model="searchKey" placeholder="请输入客户姓名/客户手机号" :focus="firstFocus" @clear = 'clear' />
      <button @tap="handleSearch" class="search-btn" hover-class="none">搜索</button>
    </view>

    <!-- 订单状态筛选 -->
    <view class="filter-tabs">
      <text 
        v-for="tab in tabs" 
        :key="tab"
        :class="['tab-item', activeTab === tab ? 'active' : '']"
		@tap="changeStatus(tab)"
      >
        {{ tab }}
      </text>
    </view>

    <!-- 订单列表 -->
      <view 
        v-for="(order, index) in filteredOrders" 
        :key="index"
        class="order-item"
      >
        <view class="order-header">
          <text class="order-no">{{ order.orderNum }}</text>
          <text class="copy-btn" @tap="copyorderNum(order.orderNum)">复制</text>
        </view>

        <view class="order-info">
          <text>客户姓名：{{ order.custName }}</text>
          <text>联系方式：{{ order.custPhone }}</text>
          <text>服务名称：{{ order.productName }}</text>
          <text>订单时间：{{ order.createTime }}</text>
          <text>销售人员：{{ order.saleName }}</text>
          <text>门店名称：{{ order.storeName }}</text>
        </view>
		
        <button class="download-btn" @tap="downloadPDF(order.contractUrl)" v-if='order.status == 1 ? true : false'>PDF下载</button>
		<image src="/static/image/组 71693.png" v-if='order.status == 1 ? true : false' class="status"></image>
		<image src="/static/image/组 71697.png" v-if='order.status == 1 ? false : true' class="status"></image>
      </view>
  </scroll-view>
</template>

<script>
import {list,isToken,addContract} from '@/api.uts'
export default {
  data() {
    return {
		params:{
			pageNo: 1,
			pageSize: 10,
			status: ''
		},
	 firstFocus:false,
      searchKey: '',          // 搜索关键词
      activeTab: '全部',      // 当前激活的标签
      tabs: ['全部', '已生效', '已失效'],
      orders: [/* 从接口获取的数据 */]
    }
  },
  mounted() {
	isToken();
  	list({pageNo:1,pageSize:10}).then((res)=>{
		for (var index = 0; index < res.result.records.length; index++) {
			this.orders.push( res.result.records[index])
		}
	})
	
  },
  	computed: {
  			filteredOrders() {
  				return this.orders.filter((item) => {
  					// 根据多种类型来搜索
  					return item.custName.includes(this.searchKey) || item.custPhone.includes(this
  						.searchKey) 
  				})
  			}
  		},
  methods: {
	  // 清楚搜索框信息
	  clear(){
		  this.searchKey = '';
	  },
	  // 到底部刷新
	  scrolltolower(){
		  this.params.pageNo++
		  uni.showLoading({
		    title: '刷新中..'
		  })
		  list(this.params).then((res)=>{
		  	let orders = res.result.records;
		  	for (var index = 0; index < orders.length; index++) {
		  		this.orders.push(orders[index]);
		  	}
			uni.hideLoading();
		  })

	  },
	  changeStatus(status){
		  uni.showLoading();
		 this.activeTab = status;
		 if(status== '已生效'){
			 this.orders.splice(0)
			 this.params.status = 1;
			 this.params.pageNo= 1;
			 list(this.params).then((res)=>{
			 	let orders = res.result.records;
			 	for (var index = 0; index < orders.length; index++) {
			 		this.orders.push(orders[index]);
			 	}
				uni.hideLoading();
			 })
		 }else if (status== '已失效'){
			 this.orders.splice(0);
			 this.params.status = 2;
			 this.params.pageNo= 1
			 list(this.params).then((res)=>{
				for (var index = 0; index < res.result.records.length; index++) {
						this.orders.push(res.result.records[index]);
				}
			 })
			 uni.hideLoading();
		 }else{
			 this.params.status = '';
			 this.params.pageNo= 1
			 list(this.params).then((res)=>{
			 	console.log(res.result)
				this.orders.splice(0);
				for (var index = 0; index < res.result.records.length; index++) {
						this.orders.push(res.result.records[index]);
				}
				uni.hideLoading();
			 })		 
		 }
	  },
	// 回退
	  toBack(){
	  let canNavBack = getCurrentPages()
	  if( canNavBack && canNavBack.length>1) {  
	      uni.navigateBack() 
	  } else {  
	      history.back();  
	  } 
	  },
	   IsChinese(value) {
	  	const reg = /^[\u4e00-\u9fa5]+$/gi;
	  	return reg.test(value);
	  },
	   WhNumber(value) {
	  	return /^\d+$/.test(value);
	  },
    // 搜索处理
    handleSearch() {
      // 实际调用接口获取数据
	    uni.showLoading();
		// console.log(this.IsChinese(this.searchKey));
	  if(this.IsChinese(this.searchKey)){
		  list({custName:this.searchKey,pageNo:1,pageSize:10}).then((res)=>{
			   this.activeTab  = '全部';
			  this.orders.splice(0);
		  	let orders = res.result.records;
		  	for (var index = 0; index < orders.length; index++) {
		  		this.orders.push(orders[index]);
		  	}
		  			uni.hideLoading();
		  })
	  }else if(this.WhNumber(this.searchKey)){
		  list({custPhone:this.searchKey,pageNo:1,pageSize:10}).then((res)=>{
			  this.activeTab  = '全部';
			   this.orders.splice(0);
		  	let orders = res.result.records;
		  	for (var index = 0; index < orders.length; index++) {
		  		this.orders.push(orders[index]);
		  	}
		  			uni.hideLoading();
		  })
	  }else if(!this.searchKey){
		  list({pageNo:1,pageSize:10}).then((res)=>{
		  	this.activeTab  = '全部';
		  	this.orders.splice(0);
		  	let orders = res.result.records;
		  	for (var index = 0; index < orders.length; index++) {
		  		this.orders.push(orders[index]);
		  	}
		  			uni.hideLoading();
		  })
	  }
	  
    },
    // 复制订单号
    copyorderNum(orderNum) {
      uni.setClipboardData({
        data: orderNum,
        success: () => {
          uni.showToast({ title: '复制成功' })
        }
      })
    },
    // PDF下载
    async downloadPDF(contractUrl) {
      uni.showLoading({ title: '下载中...' })
        // 1. 调用下载接口
		uni.downloadFile({
			        url: contractUrl,//下载地址接口返回
			        success: (data) => {
						uni.saveFile({
								tempFilePath: data.tempFilePath, //临时路径
								// filePath:"内部存储/Documents/",
								success: (res)=> {
								uni.hideLoading();
								uni.showToast({
								   icon: 'none',
								   mask: true,
								   title: '文件已下载，打开后请点击右上角保存!', //保存路径
								   duration: 2000,
								});
								setTimeout(() => {                            //打开文档查看
									uni.openDocument({
										filePath: res.savedFilePath,
										showMenu:true,
										success: function(res) {
											list({pageNo:1,pageSize:10}).then((res)=>{
												for (var index = 0; index < res.result.records.length; index++) {
												this.orders.push( res.result.records[index])
												}
												                                     })
											                   }
											        });
										        }, 3000)
											}
										})
			        },
			        fail: (err) => {
			            console.log(err);
			            uni.showToast({
			                icon: 'none',
			                mask: true,
			                title: '失败请重新下载',
			            });
			        },
			    });
    }
  }
}
</script>

<style lang="scss" scoped>


.search-box {
	height: 10%;
  display: flex;
  flex-direction: row;
  margin-bottom: 30rpx;
  align-items: center;
  .search-input {
    flex: 1;
    background: #fff;
    padding: 20rpx;
    border-radius: 8rpx;
  }
  .search-btn {
    width: 20%;
	height: 40%;
    margin-right: 10%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1rem;
    color: #044f7a;
	border: none;
	
  }
  .search-btn:after {
  border: none;
  }
  .isshow-header-content-icon{
	display: flex;
	justify-content: center;
	margin-left: 10%;
	align-items: center;
}
}

.filter-tabs {
  display: flex;
  flex-direction: row;
  margin-bottom: 30rpx;
  position: relative;
  .tab-item {
	  flex: 1;
	  width: 10%;
    text-align: center;
    padding: 20rpx;
    color: #000000;
    border-bottom: 4rpx solid transparent;
    &.active {
      color: #044f7a;
      // border-bottom-color: #044f7a;
    }
	&.active:after {
	  content: '';
	  width: 50%;
	  height: 1px;
	  display: block;
	  margin: 0 auto;
	  border-bottom: 2px solid  #044f7a;
	  color: #044f7a;
	  padding: 1px;
	}
  }
}





.order-item {
  margin: 0 auto;
  width: 80%;
  height: 30%;
  box-shadow: -0.1rem 0.1rem #e4e4e4;
  border: 1px solid #e1e1e1;
  border-radius: 0.5rem;
  position: relative;
  background: white;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 20rpx;

  .order-header {
    display: flex;
	flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #eee;

    .order-no {
      color: #06507b;
      font-size: 28rpx;
    }
    .copy-btn {
      color: #06507b;
      font-size: 24rpx;
    }
  }

  .order-info {
    padding: 20rpx 0;
    text {
      display: block;
      color: #666;
      font-size: 24rpx;
      line-height: 1.8;
    }
  }

  .download-btn {
	width: 28%;
	height: 15%;
    background-color: #044f7a;
	position: absolute;
    color: #ffffff;
	bottom: 10%;
	right: 10%;
    font-size: 0.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 1rem;
  }
}

.status{
	position: absolute;
	width: 25%;
	height: 25%;
	right: 10%;
	top:30%
}

</style>