JiangNingUmale-h5/subViolation/ShengchanJiandu/FieldTest/add.vue

<template>
  <view class="app-container">
    <u-navbar
      leftText="返回"
      title="现场检查录入"
      :autoBack="true"
      :placeholder="true"
    />
    <view class="form-item">
      <view class="form-title">
        现场检查打卡
        <text></text>
      </view>
      <view class="item-input">
        <u-button
          text="点击打卡"
          size="small"
          color="linear-gradient(90deg, #3976F1 0%, #3CA0F6 100%)"
          :custom-style="{
            width: '130rpx',
            height: '65rpx',
            margin: '0',
          }"
        ></u-button>
        <view class="already">
          <u-icon
            name="checkmark-circle-fill"
            color="#32B78B"
            size="28rpx"
          ></u-icon>
          <text>已完成打卡</text>
        </view>
      </view>
    </view>
    <view class="form-item">
      <view class="form-title"><text></text>店铺名称</view>
      <view class="nob-input view-global">
        <u--input
          placeholder="请输入名称"
          border="none"
          :customStyle="{ height: '45rpx' }"
          v-model="value"
        ></u--input>
      </view>
    </view>
    <view class="form-item">
      <view class="form-title"><text></text>发现隐患</view>
      <view class="nob-input view-global">
        <u--textarea
          v-model="value"
          placeholder="请输入内容"
          border="none"
        ></u--textarea>
      </view>
    </view>
    <view class="form-item">
      <view class="form-title"><text></text>现场照片</view>
      <view class="upload-images nob-input view-global">
        <view class="upload-btn">
          <view class="upload-icon" @click="upload">
            <u-icon
              name="camera-fill"
              size="50rpx"
              color="rgb(211, 212, 214)"
            ></u-icon>
          </view>
          <text class="upload-text"
            >最多可上传5个图片，支持上传jpg.png等格式文件</text
          >
        </view>
        <view class="file-list">
          <view
            class="file-item"
            v-for="(item, index) in fileList"
            :key="index"
          >
            <view class="close-btn">
              <u-icon name="minus-circle-fill" color="#EB5B47"></u-icon>
            </view>

            <image :src="item.url" mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </view>
    <view class="form-item">
      <view class="form-title"><text></text>现场录音文件</view>
      <view class="upload-images nob-input view-global">
        <view class="upload-btn">
          <view class="upload-icon" @click="upload">
            <u-icon
              name="plus"
              size="50rpx"
              color="rgb(211, 212, 214)"
            ></u-icon>
          </view>
        </view>
        <view class="audio-list">
          <view class="list-item" v-for="item in 3" :key="item">
            <view class="item-name">
              <image
                src="/static/images/file-type.png"
                mode=""
                class="item-type"
              ></image>
              asdadad.mp3
            </view>
            <u-icon name="minus-circle-fill" color="#EB5B47"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="form-item">
      <view class="form-title"><text></text>是否发起整改</view>
      <view class="form-radio">
        <u-radio-group v-model="radiovalue1" placement="row">
          <u-radio
            :customStyle="{ marginRight: '80rpx' }"
            v-for="(item, index) in radiolist1"
            :key="index"
            :label="item.name"
            :name="item.name"
          >
          </u-radio>
        </u-radio-group>
      </view>
    </view>
    <view class="form-item">
      <view class="form-title"><text></text>设置整改时限</view>
      <view
        class="nob-input view-global"
        style="display: flex; align-items: center"
      >
        <u--input
          placeholder="请输入名称"
          border="none"
          :customStyle="{ height: '45rpx' }"
          v-model="value"
        ></u--input>
        <text style="color: #9da2ab; font-size: 28rpx">工作日</text>
      </view>
    </view>
    <view class="form-item">
      <view class="form-title"><text></text>是否发送至主体</view>
      <view class="form-radio">
        <u-radio-group v-model="radiovalue1" placement="row">
          <u-radio
            :customStyle="{ marginRight: '80rpx' }"
            v-for="(item, index) in radiolist1"
            :key="index"
            :label="item.name"
            :name="item.name"
          >
          </u-radio>
        </u-radio-group>
      </view>
    </view>
    <view v-show="false">
      <uni-file-picker ref="files" />
    </view>

    <fixed-buttom title="提交"></fixed-buttom>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: null,
      radiovalue1: "是",
      fileList: [
        {
          url: "https://cdn.uviewui.com/uview/album/1.jpg",
        },
        {
          url: "https://cdn.uviewui.com/uview/album/1.jpg",
        },
        {
          url: "https://cdn.uviewui.com/uview/album/1.jpg",
        },
        {
          url: "https://cdn.uviewui.com/uview/album/1.jpg",
        },
        {
          url: "https://cdn.uviewui.com/uview/album/1.jpg",
        },
      ],
      radiolist1: [
        {
          name: "是",
          disabled: false,
        },
        {
          name: "否",
          disabled: false,
        },
      ],
    };
  },
  methods: {
    upload() {
      this.$refs.files.choose();
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .form-item {
    .form-title {
      position: relative;
      font-size: 30rpx;
      font-weight: bold;
      color: #2e2f31;
      margin-bottom: 20rpx;
    }

    .form-title text {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      height: 12rpx;
      width: 140rpx;
      background: url("/static/images/juxing.png");
      background-size: cover;
      max-width: 300rpx;
      z-index: 0;
    }

    .item-input {
      margin-bottom: 30rpx;
      display: flex;
      align-items: center;

      .already {
        margin-left: 45rpx;
        display: flex;
        align-items: center;

        text {
          margin-left: 10rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #313335;
        }
      }
    }

    .nob-input {
      margin-bottom: 30rpx;
      border-radius: 16rpx;
      background-color: #fff;
      box-sizing: border-box;
      padding: 25rpx;
    }

    .upload-images {
      .upload-btn {
        display: flex;
        align-items: center;

        .upload-icon {
          height: 150rpx;
          width: 150rpx;
          background-color: #f4f5f7;
          border-radius: 4rpx;
          margin-right: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .upload-text {
          flex: 1;
          color: rgb(192, 196, 204);
        }
      }

      .file-list {
        display: flex;
        align-items: center;
        margin-top: 40rpx;

        .file-item {
          width: calc((100% / 5) - 20rpx);
          height: 115rpx;
          margin-right: calc(20rpx + (20rpx / 4));
          position: relative;

          image {
            display: inline-block;
            height: 100%;
            width: 100%;
          }

          .close-btn {
            position: absolute;
            right: -10rpx;
            top: -10rpx;
            z-index: 10;
          }
        }

        & > .file-item:last-child {
          margin-right: 0;
        }
      }

      .audio-list {
        .list-item {
          margin-top: 20rpx;
          width: 40%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .item-name {
            display: flex;
            align-items: center;
            font-size: 28rpx;
            font-weight: 400;
            color: #2e2f31;

            .item-type {
              height: 28rpx;
              width: 28rpx;
              margin-right: 15rpx;
            }
          }
        }
      }
    }

    .form-radio {
      margin-bottom: 30rpx;
      box-sizing: border-box;
      padding: 0 25rpx;
    }
  }
}
</style>