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

<template>
  <view class="container">
    <view class="containerBody">
      <VNavigationBar background-color="rgba(0,0,0,0)" title="新建工单" title-color="#333"></VNavigationBar>
      <view class="body">
        <view class="card phone">
          <view class="phoneHeader">
            <view class="title">查找手机号|车牌号|车架号</view>
            <view class="desc">根据手机号查找|车牌号|车架号/建立客户信息</view>
          </view>
          <view class="phoneBody">
            <view class="searchBox">
              <input v-model="phone" placeholder="请输入手机号码|车牌号|车架号" type="tel">
            </view>
            <view class="btn" @click="listUserInfo">
              <image class="btnIcon" mode="aspectFit" src="/pages-order/static/search.png"></image>
              确认查找
            </view>
          </view>
        </view>

        <view class="orderList">
          <view v-for="item in orderList" :key="item.id" class="orderItem" @click="addOrder(item)">
            <booking-order-card :order="item"></booking-order-card>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import VNavigationBar from '@/components/VNavigationBar.vue'
import OrderCard from "@/components/orderCard.vue";
import request from "@/utils/request";
import BookingOrderCard from "@/components/bookingOrderCard.vue";
import {formatTimestamp, formatTimestampCustom} from "@/utils/utils";

export default {
  components: {
    OrderCard,
    BookingOrderCard,
    VNavigationBar,
  },
  data() {
    return {
      phone: '',
      userInfo: null,
      carList: [],
      orderList: []
    }
  },
  onLoad(data) {
  },
  methods: {
    listUserInfo() {
      this.carList = []
      this.userInfo = null
      console.log("获取用户信息")
      if (this.phone != '') {
        const params = {
          phoneOrCar: this.phone
        }
        request({
          url: '/admin-api/base/custom/page',
          method: 'GET',
          params: params
        }).then(res => {
          console.log(res);
          if (res.data.records.length > 0) {
            const params = {
              userId: res.data.records[0].userId
            }
            request({
              url: '/admin-api/repair/booking/list',
              method: 'GET',
              params: params
            }).then(res => {
              console.log(res);
              this.orderList = res.data
              this.orderList.map((item) => {
               item.bookingTime = formatTimestamp( item.bookingTime)
              })
            })
          }
        })
      } else {
        uni.showToast({
          title: '请输入手机号',
          icon: 'none'
        })
      }
    },
    addOrder(order){
      console.log('执行')
      uni.navigateTo({
        url: `/pages-order/addOrder/addOrder?phone=${this.phone}&carId=${order.carId}&repairType=${order.repairType}&bookingId=${order.id}`
      });
    },
  }
}
</script>

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

  .containerBody {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #C1DEFF 0%, rgba(193, 222, 255, 0) 100%);
    background-size: 100% 500rpx;
    background-repeat: no-repeat;
  }

  .body {
    flex: 1;
    height: 0;
    overflow: auto;

    .card {
      background: #FFFFFF;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      margin: 20rpx 32rpx;
    }

    .phone {
      background: #0174F6;

      .phoneHeader {
        padding: 20rpx 30rpx;

        .title {
          font-weight: bold;
          font-size: 32rpx;
          color: #FFFFFF;
          margin-bottom: 10rpx;
        }

        .desc {
          font-weight: 500;
          font-size: 24rpx;
          color: rgba(255, 255, 255, 0.7);
        }
      }

      .phoneBody {
        background: #FFFFFF;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        padding: 0 30rpx;

        .searchBox {
          padding: 40rpx 0;
          border-bottom: 1rpx solid #EEEEEE;
        }

        .btn {
          padding: 40rpx 0;

          display: flex;
          align-items: center;
          justify-content: center;
          column-gap: 10rpx;

          font-weight: 500;
          font-size: 32rpx;
          color: #0174F6;

          .btnIcon {
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }

    .orderList {
      .orderItem {
        margin: 20rpx 32rpx;
      }
    }
  }
}
</style>