OfficeApp/subpkg/fixedAssets/fixedAssets.vue

<template>
  <view class="">
    <view class="card">
      <view class="top">
        <image src="../../static/img/contract/company.png"></image>
        <view class="title">
          <view class="name">租赁公司名称</view>
          <view class="type">公司类型</view>
          <view class="code">社会代码1321346351615</view>
        </view>
      </view>
      <view class="location">
        <view class="left">
          <uni-icons type="location"></uni-icons>
          <text>地址:</text>
        </view>
        <view class="right">
          泸州市江阳区通滩镇
        </view>
      </view>
      <u-line color="#999999FF" style="margin: 21rpx 0;"></u-line>
      <view class="center">
        <view class="car">
          <image src="../../static/logo.png" @click="priview('/static/logo.png')"></image>
          <view class="right">
            <view class="car_name">
              <view class="name">三轮车</view>
              <view>100天后到期</view>
            </view>
            <view class="time">租赁时间:2023-01-01 至 2024-01-01</view>
          </view>
        </view>
        <view class="info">
          <view>型号:电动三轮车</view>
          <view>数量:1辆</view>
          <view>租赁责任人:XXX</view>
          <view>联系方式:110120130</view>
        </view>
      </view>
      <view class="bottom">
        <view class="title">租赁合同附件</view>
        <view class="contract">
          <view class="left">
            <image class="contract_img" src="../../static/img/contract/pdf.png"></image>
            <view class="text">
              <view class="name">《三轮车租赁合同》</view>
              <view>
                <!-- <text class="nickname">张郭郭</text> -->
                <text>2023年01月01日</text>
              </view>
            </view>
          </view>
          <view class="right" @click="navTo(contract.contract_no)">
            <!-- <image class="icon"></image> -->
            <uni-icons type="paperclip" color="#3274F9"></uni-icons>
            <view>查看</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { download_file } from "@/api/junziqian.js"
  export default {
    data() {
      return {

      }
    },
    onLoad() {},
    onShow() {},
    methods: {
      navTo(contract_no) {
        download_file({ applyNo: contract_no }).then(res => {
          if (res.code != 1) {
            Toast(res.msg)
          }
          uni.navigateTo({
            url: `/subpkg/pdfView/pdfView?url=${res.data.url}`
          })
        })
      },
      //查看图片
      priview(url) {
        uni.previewImage({
          urls: [url],
          longPressActions: {
            itemList: ['保存图片'],
            success: function(data) {
              if (data.tapIndex === 0) {
                uni.saveImageToPhotosAlbum({
                  filePath: url,
                  success: function() {
                    uni.showToast({
                      title: '保存成功',
                      icon: 'success'
                    })
                  },
                  fail: function() {
                    uni.showToast({
                      title: '保存失败',
                      icon: 'none'
                    })
                  }
                })
              }
            }
          }
        })
      },
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .card {
    margin: 0 auto;
    margin-top: 28rpx;
    padding: 28rpx;
    width: 694rpx;
    // height: 913rpx;
    background: #FFFFFF;
    border-radius: 14rpx 14rpx 14rpx 14rpx;
    opacity: 1;

    .top {
      display: flex;

      image {
        width: 140rpx;
        height: 140rpx;
        margin-right: 28rpx;
      }

      .title {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .name {
          font-size: 32rpx;
          font-weight: 500;
          color: #333333;
        }

        .type {
          font-size: 28rpx;
          font-weight: 500;
          color: #3274F9;
        }

        .code {
          font-size: 25rpx;
          font-weight: 400;
          color: #999999;
        }
      }
    }

    .location {
      display: flex;
      font-size: 28rpx;
      font-weight: 400;
      color: #666666;
      line-height: 35rpx;
      margin-top: 24rpx;

      .right {
        flex: 1;
      }
    }


    .center {
      .car {
        display: flex;

        image {
          width: 140rpx;
          height: 140rpx;
          margin-right: 28rpx;
        }

        .right {
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .car_name {
            display: flex;
            justify-content: space-between;
            font-size: 28rpx;
            font-weight: 500;
            color: #3274F9;

            .name {
              font-size: 32rpx;
              font-family: PingFang SC-Medium, PingFang SC;
              font-weight: 500;
              color: rgba(0, 0, 0, 0.8);
              line-height: 35rpx;
            }
          }

          .time {
            font-size: 28rpx;
            font-weight: 400;
            color: #666666;
            line-height: 35rpx;
          }
        }
      }

      .info {
        margin-top: 21rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #666666;
        line-height: 45rpx;
      }
    }

    .bottom{
      .title{
        font-size: 32rpx;
        font-weight: 500;
        color: #333333;
        display: flex;
        align-items: center;
        margin: 28rpx 0;
        &::before{
          content: "";
          width: 6rpx;
          height: 32rpx;
          border-radius: 6rpx;
          margin-right: 12rpx;
          display: inline-block;
          background-color: $theme-oa-color;
        }
      }
      .contract {
        display: flex;
        justify-content: space-between;
      
        .left {
          display: flex;
      
          .contract_img {
            width: 102rpx;
            height: 102rpx;
            background: #F5F5F5;
            border-radius: 14rpx 14rpx 14rpx 14rpx;
            margin-right: 21rpx;
          }
      
          .text {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
      
            .name {
              font-size: 32rpx;
              font-weight: 500;
              color: rgba(0, 0, 0, 0.8);
              line-height: 35rpx;
            }
      
            .nickname {
              margin-right: 35rpx;
            }
      
            text {
              height: 39rpx;
              font-size: 28rpx;
              font-weight: 400;
              color: #666666;
              line-height: 35rpx;
            }
          }
        }
      
        .right {
          font-size: 28rpx;
          font-weight: 500;
          color: $theme-oa-color;
          line-height: 35rpx;
          display: flex;
          justify-content: center;
          align-items: center;
      
          .icon {
            width: 35rpx;
            height: 39rpx;
            background-color: $theme-oa-color;
            opacity: 1;
            margin-right: 10rpx
          }
        }
      }
    }
    
  }
</style>