contract-front/pages/index/dingdan.uvue

<template>
  <view class="container">
	  
	  <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"  />
      <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="activeTab = 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.orderNo }}</text>
          <text class="copy-btn" @tap="copyOrderNo(order.orderNo)">复制</text>
        </view>

        <view class="order-info">
          <text>客户姓名：{{ order.customerName }}</text>
          <text>联系方式：{{ order.phone }}</text>
          <text>服务名称：{{ order.serviceName }}</text>
          <text>订单时间：{{ order.orderTime }}</text>
          <text>销售人员：{{ order.salesman }}</text>
          <text>门店名称：{{ order.store }}</text>
        </view>

        <button class="download-btn" @tap="downloadPDF(order)">PDF下载</button>
      </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
	 firstFocus:false,
      searchKey: '',          // 搜索关键词
      activeTab: '全部',      // 当前激活的标签
      tabs: ['全部', '已生效', '已失效'],
      orders: [/* 从接口获取的数据 */
	  {
		customerName:"你可乐" ,
		orderNo:"1223333",
		 phone:"",
		 serviceName:"",
		 orderTime:"",
		 salesman:"",
		 store:""
	  },{
		customerName:"你可乐" ,
		orderNo:"1223333",
		 phone:"",
		 serviceName:"",
		 orderTime:"",
		 salesman:"",
		 store:""
	  }
	  ]
    }
  },
  computed: {
    // 过滤后的订单列表
    filteredOrders() {
      return this.orders.filter(order => {
        const matchStatus = this.activeTab === '全部' || 
          order.status === this.activeTab
        const matchSearch = order.customerName.includes(this.searchKey) ||
          order.phone.includes(this.searchKey)
        return matchStatus && matchSearch
      })
    }
  },
  methods: {
	  toBack(){
	  let canNavBack = getCurrentPages()
	  if( canNavBack && canNavBack.length>1) {  
	      uni.navigateBack() 
	  } else {  
	      history.back();  
	  } 
	  },
    // 搜索处理
    handleSearch() {
      // 实际调用接口获取数据
      console.log('搜索关键词:', this.searchKey)
    },

    // 复制订单号
    copyOrderNo(orderNo) {
      uni.setClipboardData({
        data: orderNo,
        success: () => {
          uni.showToast({ title: '复制成功' })
        }
      })
    },

    // PDF下载
    async downloadPDF(order) {
      uni.showLoading({ title: '下载中...' })
      
      try {
        // 1. 调用下载接口
        const { tempFilePath } = await uni.downloadFile({
          url: 'https://your-api.com/download',
          header: { 'order-id': order.id }
        })

        // 2. 保存到本地
        await uni.saveFile({
          tempFilePath,
          success: (res) => {
            uni.showToast({ title: '下载成功' })
            console.log('文件路径:', res.savedFilePath)
          }
        })

        // 3. 打开文档（可选）
        uni.openDocument({
          filePath: tempFilePath,
          showMenu: true
        })
      } catch (err) {
        uni.showToast({ title: '下载失败', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    }
  }
}
</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;
  }
}


</style>