jiliangxiaochengxu/pages/assay/index.vue

<!-- @format -->

<template>
  <view class="container">
    <view @click="handleApplicat" class="createFixed">
      <u-icon name="plus" color="#fff" size="23"></u-icon>
    </view>

    <view style="margin: 15rpx 0" v-if="activeContent == '我的申请'">
      <view style="background: #fff; padding: 20rpx 0; margin-bottom: 15rpx">
        <u-search
          shape="square"
          :showAction="false"
          placeholder="请输入备案单编号"
          style="width: 95%; margin: 0rpx auto"
        ></u-search>
      </view>
      <view class="contentItems" @click="handleDetails" v-for="item of 2">
        <view class="content">
          <view class="title"
            >备案单编号
            <text style="margin-left: 40rpx"> 2024845782 </text>
          </view>
        </view>
        <view class="content">
          <view class="title">器具名称</view>
          <view class="message">血压计和高压</view>
        </view>
        <view class="content">
          <view class="title">备案状态</view>
          <view class="message">备案中</view>
        </view>
        <view class="content">
          <view class="title">行政部门</view>
          <view class="message">单位</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-23 </view>
        </view>
        <view class="content">
          <view class="title">联系电话</view>
          <view class="message">153430587834</view>
        </view>
        <view class="content">
          <view class="title">器具数</view>
          <view class="message">4</view>
        </view>
      </view>
    </view>

    <view v-else>
      <view>
        <view class="createNew">选择器具进行申请</view>
        <view class="contentItems" @click="handleCurrentForm">
          <view class="content">
            <view class="title">出厂编号</view>
            <view class="message">123478654</view>
          </view>
          <view class="content">
            <view class="title">器具名称</view>
            <view class="message">血压计和血压表</view>
          </view>
          <view class="content">
            <view class="title">规格型号</view>
            <view class="message">153430587834</view>
          </view>
        </view>
        <view class="contentItems">
          <view class="content">
            <view class="title">出厂编号</view>
            <view class="message">123478654</view>
          </view>
          <view class="content">
            <view class="title">器具名称</view>
            <view class="message">燃油加油机</view>
          </view>
          <view class="content">
            <view class="title">规格型号</view>
            <view class="message">20kg*10</view>
          </view>
        </view>
        <view class="contentItems">
          <view></view>
          <view class="content">
            <view class="title">出厂编号</view>
            <view class="message">123478654</view>
          </view>
          <view class="content">
            <view class="title">器具名称</view>
            <view class="message">汽车发动机检测仪</view>
          </view>
          <view class="content">
            <view class="title">规格型号</view>
            <view class="message">BJL</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeContent: "我的申请",
      tabsList: [
        {
          name: "我的申请",
        },
      ],
    };
  },
  methods: {
    //备案申请
    handleApplicat() {
      uni.navigateTo({
        url: "/pages/assay/assayList",
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
    handleChange(row) {
      this.activeContent = row.name;
    },
    handleCurrentForm() {},
    handleDetails() {
      uni.navigateTo({
        url: "/pages/assay/details",
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.createFixed {
  background: #2979ff;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  position: fixed;
  right: 30rpx;
  bottom: 200rpx;
}

.createNew {
  font-size: 30rpx;
  margin: 20rpx 0 20rpx 20rpx;
  color: #3c9ff3;
}

.container {
  height: 100vh;
  background: rgb(243, 244, 249);

  .contentItems {
    width: 93%;
    border-radius: 6px;
    background: #fff;
    margin: 0rpx auto 20rpx;
    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>