jiliangxiaochengxu/pages/verification/list.vue

<!-- @format -->

<template>
  <view class="container">
    <view style="width: 100%; display: flex; justify-content: center">
      <u-tabs
        :itemStyle="{ width: '250rpx', marginBottom: '20rpx' }"
        :lineWidth="50"
        :activeStyle="{ color: '#3c9cff' }"
        :list="tabsList"
        @click="handleChange"
      ></u-tabs>
    </view>

    <view style="margin-top: 30rpx" v-if="activeContent == '我的检定申请'">
      <view style="">
        <u-search
          :showAction="false"
          bgColor="#fff"
          placeholder="请输入检定单编号"
          style="width: 95%; margin: 30rpx auto"
        ></u-search>
      </view>

      <view class="contentItems" @click="handleVerDetails" v-for="item of 2">
        <view class="content">
          <view class="title">申请单编号 </view>
          <view class="message">2038462928</view>
        </view>
        <view class="content">
          <view class="title">申请单位名称 </view>
          <view class="message">单位</view>
        </view>
        <view class="content">
          <view class="title">申请人姓名</view>
          <view class="message">李xx</view>
        </view>
        <view class="content">
          <view class="title">检定类型</view>
          <view class="message">送检</view>
        </view>

        <view class="content">
          <view class="title">提交时间</view>
          <view class="message">2024-07-01 00：00：00</view>
        </view>

        <view class="content">
          <view class="title">申请检定器具</view>
          <view class="message">数字指标</view>
        </view>
        <view class="content">
          <view class="title">器具数量</view>
          <view class="message">3</view>
        </view>
      </view>
    </view>

    <view v-else>
      <view>
        <view class="createNew">选择检定类型</view>
        <view
          class=""
          style="width: 90%; margin: 0 auto"
          @click="handleCurrentForm"
        >
          <view class="verType">
            <u-button @click="handleExternal" type="primary"
              >外检 (请检定人员到现场检定)</u-button
            >
          </view>
          <view class="verType">
            <u-button @click="handleExternal" type="primary"
              >送检 (送检定机构实验室检定)</u-button
            >
          </view>
        </view>
      </view>

      <view class="topicTetx">
        <view style="margin-bottom: 20rpx"> 服务提示:</view>
        <view style="margin-bottom: 10rpx"
          >1.外检用于无法将计量器送至检定机构的情况,检定人员会在预约时间内送至计量器具现场检定</view
        >
        <view
          >2.送检用户需要将计量器具送至检定机构的情况,检定申请受理后,请按照预约时间将计量器送至相关检定机构进行检定.</view
        >
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeContent: "新建检定申请",
      tabsList: [
        {
          name: "新建检定申请",
        },
        {
          name: "我的检定申请",
        },
      ],
    };
  },
  methods: {
    //外检
    handleExternal() {
      uni.navigateTo({
        url: "/pages/verification/externalList",
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
    handleChange(row) {
      this.activeContent = row.name;
    },
    handleCurrentForm() {},
    handleVerDetails() {
      uni.navigateTo({
        url: "/pages/verification/taskList",
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.topicTetx {
  width: 90%;
  margin: 80rpx auto 0;
  font-size: 26rpx;
  color: #9b9b9b;
}
.verType {
  margin: 40rpx 0;
}
.createNew {
  font-size: 30rpx;
  margin: 20rpx 0 20rpx 20rpx;
  color: #3c9ff3;
}

.container {
  height: 100vh;
  background: rgb(243, 244, 249);
  padding: 20rpx 0 110rpx;

  .contentItems {
    width: 95%;
    border-radius: 6px;
    background: #fff;
    margin: 0rpx auto 30rpx;
    padding: 20rpx 30rpx 20rpx;

    .content {
      border-bottom: 1px solid rgb(242, 242, 242);
      padding: 24rpx 0;
      display: flex;
      justify-content: space-between;
    }

    .content:last-child {
      border-bottom: none;
    }

    .title {
      font-size: 26rpx;
      color: black;
      letter-spacing: 3rpx;
    }

    .message {
      font-size: 26rpx;
      color: rgb(146, 146, 146);
    }
  }
}
</style>