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

<template>
  <view class="container">
    <VNavigationBar titleColor="rgba(0,0,0,0.9)" leftTitle="true" backgroundColor="transparent" title="我的订单">
    </VNavigationBar>
    <view class="body">
      <view class="tabList">
        <view @click="changeTabFun(item.id)" v-for="(item, index) in tabList" :key="index" class="tabItem"
              :class="{actived: item.id === activeKey}">
          {{ item.title }}
          <view v-if="activeKey === item.id" class="activeLine"></view>
        </view>
      </view>
      <view class="orderList">
        <scroll-view style="height: 100%;" scroll-y="true" class="itemContent" @scrolltolower="onReachBottomCus"
                     refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
          <view v-for="(item, index) in orderList" :key="index" class="orderItem">
            <view class="line1">
              <view class="orderNo">
                订单编号：{{ item.orderNo }}
              </view>
              <text class="orderStatus" :class="['status_'+item.orderStatus]">
                {{ getStatus(item.orderStatus,item.mainStatus,item.payType) }}
              </text>
            </view>
            <view class="orderInfo">
              <image class="orderInfoIcon" src="@/static/icons/Frame28.png" mode="aspectFit"></image>
              <text class="orderInfoText">{{ item.goodsTitle }}</text>
            </view>
            <view class="orderInfo">
              <image class="orderInfoIcon" src="@/static/icons/Frame27.png" mode="aspectFit"></image>
              <text class="orderInfoText">{{ item.tenantName || "蓝安-中鑫之宝" }}</text>
            </view>
            <view class="line2" >
              <view v-if="item.payMoney">
                共计
                <text class="orderAmountUnit">￥</text>
                <text class="orderAmount">{{ item.payMoney }}</text>
              </view>
              <text >{{ formatTimestamp(item.createTime) }}</text>
            </view>
            <view class="line3">
             <view v-if="item.orderStatus == '0' && item.payType == '01'" @click="goPay(item)" class="showOrder">支付</view>
              <view v-if="item.goodsType == '2'" @click="gotoDetail(item)" class="showOrder">查看订单</view>
              <view @click="gotoEvaluate(item)" class="evaluate" v-if="item.orderStatus === '1' && !item.commentDesc">评价订单</view>
            </view>
          </view>
          <view class="no-data" v-if="orderList.length==0">
            <image class=""  src="@/static/images/nothing.png" ></image>
          </view>
        </scroll-view>
      </view>

      <uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" @change="popupChange">

        <view
            style="position: relative;padding: 30rpx;border-radius:20rpx;width: 600rpx;background-color: #fff;display: flex;align-items: center;row-gap: 10rpx;flex-direction: column;">
          <canvas style="width:200px; height: 200px;"
                  canvas-id="myQrcode"></canvas>
          <img id="dl-pay-img" style="width: 200px; height: 200px;position: absolute;top: 30rpx;" :key="imageUrl"
               :src="imageUrl"/>
          <view class="popup-title">长按识别图中二维码支付</view>
        </view>
      </uni-popup>
    </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 drawQrcode from 'weapp-qrcode';
import {getToken,getUserInfo} from '@/utils/auth'

export default {
  components: {
    tabBarVue,
    VNavigationBar
  },
  data() {
    return {
      payShow: false,
      activeKey: 0,
      imageUrl: '',
      tabList: [
        {
          id: 0,
          title: '维修中'
        },
        {
          id: 1,
          title: '待支付'
        },
        {
          id: 2,
          title: '待评价'
        },
        {
          id: 3,
          title: '全部订单'
        },
      ],
      orderList: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      //下来刷新状态
      isTriggered:false,
      changeActive: false
    }
  },
  onLoad() {
    if(!getToken()){
      uni.reLaunch({
        url: '/pages/login/login'
      })
    }else {
      this.orderList = []
      this.getList()
    }
  },
  methods: {
    formatTimestamp(timestamp) {
      // 将时间戳转换为Date对象
      const date = new Date(timestamp);
      // 获取年月日时分秒
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      // 组合成日期时间字符串
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    /**
     * 上滑加载数据
     */
    onReachBottomCus() {
      //判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
      if (this.pageNo * this.pageSize >= this.total) {
        uni.$u.toast('没有更多数据了')
        return
      }
      //页码+1,调用获取数据的方法获取第二页数据
      this.pageNo++
      //此处调用自己获取数据列表的方法
      this.getList()
    },
    /**
     * 下拉刷新数据
     */
    onRefresherrefresh(){
      this.isTriggered = true
      this.pageNo = 1
      this.total = 0
      this.messageList = []
      this.getList()
    },
    async getList() {
      let data = {
        pageSize: this.pageSize,
        pageNo: this.pageNo
      }
      switch (this.activeKey) {
        case 0:
          //维修中
          data.selectType = "working"
          break;
        case 1:
          //待支付
          data.selectType = "waitingPay"
          break;
        case 2:
          //待评价
          data.selectType = 'waitingComment'
          break
        default:
          break
      }
      if (this.changeActive){
        this.orderList = []
      }
      this.changeActive = false
      await request({
        url: '/app-api/repair/order-info/page',
        method: 'get',
        params: data,
        tenantIdFlag:false
      }).then((res) => {
        if (res.code === 200) {
          //判断 如果获取的数据的页码不是第一页，就让之前赋值获取过的数组数据 concat连接 刚获取的第n页数据
          if (this.pageNo != 1) {
            this.orderList = this.orderList.concat(res.data.records)
          } else {
            this.orderList = res.data.records
          }
          //将获取的总条数赋值
          this.total = res.data.total
          this.isTriggered = false
        }
      })
    },
    changeTabFun(id) {
      this.activeKey = id
      this.changeActive = true
      this.pageNo = 1
      this.total = 0
      this.getList()
    },
    /**
     * 获取工单的状态
     * @param orderStatus 订单是否支付  0未支付  1已支付
     * @param mainStatus 工单主状态
     * @param payType 支付方式
     * @returns {string}
     */
    getStatus(orderStatus,mainStatus,payType) {
      let str = "";
      if("0"==orderStatus){
        //未支付的情况下，返回工单的状态
        if("04"==mainStatus){
          //待派工
          str = "待派工"
        }else if("05"==mainStatus){
          //维修中
          str = "维修中"
        }else if("01"==mainStatus){
          //待结算
          if(!payType){
            str = "待结算"
          }else{
            str = "待支付"
          }
        }else if("06"==mainStatus){
          //挂单/记账
          str = "挂单/记账"
        }else if("02"==mainStatus){
          //已结账
          str = "已结账"
        }else if("03"==mainStatus){
          //已作废
          str = "已作废"
        }
      }else{
        //已支付
        str = "已支付"
      }
      return str;
    },
    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
        })
      }
    },
    gotoEvaluate(row) {
      uni.navigateTo({
        url: '/pages-order/orderDetail/evaluate?info=' + encodeURIComponent(JSON.stringify(row))
      })
    }
  }
}
</script>

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

  .body {
    flex: 1;
    height: 100%;
    padding: 0 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;
    height: calc(100% - 65px);

    .orderItem {
      margin-bottom:10rpx;
      padding: 30rpx;
      background: #FFFFFF;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
    }

    .line1 {
      margin-bottom: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 24rpx;

      .orderNo {
        flex: 1;
        width: 0;
        font-weight: 500;
        color: #858BA0;
      }

      .status_1 {
        color: #0174F6;
      }

      .status_2 {
        color: #999999;
      }
    }

    .orderInfo {
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;
      column-gap: 10rpx;

      .orderInfoIcon {
        width: 28rpx;
        height: 28rpx;
      }

      .orderInfoText {
        font-weight: bold;
        font-size: 28rpx;
        color: #333333;
      }
    }

    .line2 {
      margin: 30rpx 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      color: #858BA0;

      .orderAmountUnit {
        color: #F92C2C;
      }

      .orderAmount {
        color: #F92C2C;
        font-weight: bold;
        font-size: 40rpx;
      }
    }

    .line3 {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .showOrder, .evaluate {
        width: 172rpx;
        height: 60rpx;
        border-radius: 30rpx 30rpx 30rpx 30rpx;
        border: 2rpx solid #0174F6;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        color: #0174F6;
      }

      .evaluate {
        border: 1rpx solid #EEEEEE;
        color: #333333;
      }
    }
  }
  .no-data{
    text-align: center;
  }
}
</style>