308 lines
7.3 KiB
Vue
308 lines
7.3 KiB
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> |