lanan-repair-app/pages-order/orderList/orderList.vue

<template>
  <view class="container">
    <view class="header">
      <view class="searchBox">
        <input class="searchInput" type="text" placeholder="车牌号查询工单" placeholder-style="font-size: 28rpx">
        <text class="searchBtn">搜索</text>
      </view>
    </view>
    <view class="body">
      <view class="tabList">
        <view v-for="(item, index) in tabList" :key="index" :class="{actived: item.id === activeKey}" class="tabItem"
              @click="changeTabFun(item.id)">
          {{ item.title }}
          <view v-if="activeKey === item.id" class="activeLine"></view>
        </view>
      </view>
      <view class="orderList">
        <view v-for="(item, index) in orderList" :key="index" class="orderItem">
          <order-card :order="item"></order-card>
        </view>
      </view>
    </view>
    <tabBarVue msg="2"></tabBarVue>
  </view>
</template>

<script>
import request from '../../utils/request';
import VNavigationBar from '@/components/VNavigationBar.vue'
import tabBarVue from '@/components/tabBar/tabBar.vue'
import OrderCard from "@/components/orderCard.vue";

export default {
  components: {
    OrderCard,
    tabBarVue,
    VNavigationBar
  },
  data() {
    return {
      payShow: false,
      activeKey: 0,
      pageNum: 1,
      totalPages: 0,
      imageUrl: '',
      tabList: [
        {
          id: 0,
          title: '待处理'
        },
        {
          id: 1,
          title: '已完成'
        },
      ],
      orderList: [
        {
          orderNo: '1209840149750105501',
          flag: 1, flagStr: '待处理', carNum: '川A 184AO1',
          carModel: '一汽奥迪 2024款 A6L',
          projectList: [
            { name: '清洗内饰', id: 1 },
            { name: '内饰精洗除臭', id: 2 },
            { name: '烘干底板胶及脚垫', id: 3 }
          ],
          userName: '张三',
          userPhone: '157****6879',
          appointDate: '2024-10-20 12:00',
          counselorName: '李相东'
        },
        {
          orderNo: '1209840149750105501',
          flag: 2, flagStr: '已完成', carNum: '川A 184AO1',
          carModel: '一汽奥迪 2024款 A6L',
          projectList: [
            { name: '清洗内饰', id: 1 },
            { name: '内饰精洗除臭', id: 2 },
            { name: '烘干底板胶及脚垫', id: 3 }
          ],
          userName: '张三',
          userPhone: '157****6879',
          appointDate: '2024-10-20 12:00',
          counselorName: '李相东'
        }
      ],
      changeActive: false
    }
  },
  onShow() {
    // this.orderList = []
    // this.getList()
  },
  onReachBottom() {
    if (this.pageNum >= this.totalPages) {
      uni.showToast({
        title: '没有下一页数据',
        icon: 'none'
      })
    } else {
      this.pageNum++
      this.getList()
    }
  },
  methods: {
    async getList() {
      let data = {
        pageSize: 20,
        pageNo: this.pageNum
      }
      switch (this.activeKey) {
        case 0:
          break;
        case 1:
          data.status = "06"
          break;
        case 2:
          data.status = '00'
          break
        default:
          break
      }
      if (this.changeActive) {
        this.orderList = []
      }
      this.changeActive = false
      await request({
        url: '/userClient/order/page',
        method: 'get',
        params: data
      }).then((res) => {
        if (res.code === 200) {
          this.orderList = this.orderList.concat(res.rows)
          let total = res.total
          this.totalPages = Math.ceil(total / this.pageSize);
        }
      })
    },
    changeTabFun(id) {
      this.activeKey = id
      this.changeActive = true
      this.getList()
    },
    getStatus(status) {
      switch (status) {
        case '0':
          return '待支付'
        case '1':
          return '已支付'
        default:
          break;
      }
    },
    async goPay(data) {
      let that = this
      await request({
        url: '/userClient/pay/toPay',
        method: 'get',
        params: {orderId: data.id}
      }).then((ress) => {

        wx.requestPayment({
          timeStamp: ress.data.timeStamp, // 时间戳，从1970年1月1日00:00:00至今的秒数，即当前的时间
          nonceStr: ress.data.nonceStr, // 随机字符串，长度为32个字符以下。
          package: ress.data.package, // 统一下单接口返回的 prepay_id 参数值，格式如“prepay_id=*”
          signType: ress.data.signType, // 签名算法类型，默认为 MD5，支持RSA等其他加密算法
          paySign: ress.data.paySign, // 签名，详见签名生成算法
          success: function (res) {
            console.log('成功', res);
            if (res.errMsg = 'requestPayment:ok') {
              uni.showToast({
                title: '支付成功'
              })
              this.getList()
            }
            // 支付成功后的回调函数， res.errMsg = 'requestPayment:ok'
          },

        })
      })
    },

    convertToImage() {

      uni.canvasToTempFilePath({

        canvasId: 'myQrcode',
        success: function (res) {
          // 在H5平台下，tempFilePath 为 base64
          // this.imageUrl = res.tempFilePath.replace(/[\r\n]/g, "")
          document.getElementById("dl-pay-img").setAttribute("src", res.tempFilePath.replace(/[\r\n]/g, ""))
          this.$forceUpdate()
          console.log(this.imageUrl, 200);
        }
      })
    },
    popupChange({show}) {
      if (show) {

      }
    },
    gotoDetail(row) {
      if (row.goodsType === '2') {
        uni.navigateTo({
          url: '/pages-order/orderDetail/orderDetail?ticketsId=' + row.goodsId
        })
      } else {
        uni.navigateTo({
          url: '/pages-order/orderDetail/orderDetail'
        })
      }
    },
    gotoEvaluate(row) {
      uni.navigateTo({
        url: '/pages-order/orderDetail/evaluate?info=' + encodeURIComponent(JSON.stringify(row))
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background: #F3F5F7;
  display: flex;
  flex-direction: column;
  color: #333333;

  .header {
    padding: 40rpx 32rpx 20rpx;
    background-color: #fff;

    .searchBox {
      background: #F3F5F7;
      padding: 20rpx 32rpx;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      display: flex;
      align-items: center;
      column-gap: 12rpx;
      .searchInput {
        flex: 1;
        width: 0;
      }
      .searchBtn {
        font-weight: 500;
        font-size: 28rpx;
        color: #0174F6;
      }
    }
  }

  .body {
    flex: 1;
    height: 0;
    padding: 24rpx 32rpx;
    overflow: auto;
  }

  .tabList {
    background: #FFFFFF;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    display: flex;
    align-items: center;
    padding: 0 40rpx;

    .tabItem {
      padding: 30rpx;
      flex: 1;
      text-align: center;
      position: relative;
      font-size: 24rpx;

      &.actived {
        color: #0174F6;
      }

      .activeLine {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 96rpx;
        height: 6rpx;
        background: #0174F6;
        border-radius: 4rpx 4rpx 0rpx 0rpx;
      }
    }
  }

  .orderList {
    padding: 30rpx 0;
    display: flex;
    flex-direction: column;
    row-gap: 20rpx;

    .orderItem {
    }
  }
}
</style>