|
|
@@ -0,0 +1,455 @@ |
|
|
|
<template> |
|
|
|
<div class="home_wrapper"> |
|
|
|
<van-nav-bar |
|
|
|
title="合同网签" |
|
|
|
left-arrow |
|
|
|
fixed |
|
|
|
placeholder |
|
|
|
@click-left="onClickLeft" |
|
|
|
/> |
|
|
|
|
|
|
|
<div class="list_main"> |
|
|
|
<van-list |
|
|
|
v-model="loading" |
|
|
|
:finished="finished" |
|
|
|
finished-text="没有更多了" |
|
|
|
@load="getList" |
|
|
|
> |
|
|
|
<!----1--> |
|
|
|
<van-swipe-cell v-for="(item,index) in applicationList" :key="index" > |
|
|
|
<div class="item" @click="goDetail(item.id)"> |
|
|
|
<div class="info"> |
|
|
|
<div class="title"> |
|
|
|
<i class="icon_box" v-if="item.firstSigning==null"></i> |
|
|
|
<i class="icon_box1" v-if="item.firstSigning!=null"></i> |
|
|
|
<p class="news_title" :style="{'color': item.firstSigning!=null?'#2bc30c':'#eb1616'}">{{item.contractCode}}</p> |
|
|
|
<p class="tips_mark" :style="{'color': item.firstSigning!=null?'#79bc29':'#f8a83d','background': item.firstSigning!=null?'#e8ffcd':'#ffedcd'}">{{item.signingMode}}</p> |
|
|
|
<p class="tips_mark2" :style="{'background': item.firstSigning!=null?'#2bc30c':'#eb1616'}">{{item.signingStatus}}</p> |
|
|
|
</div> |
|
|
|
<div class="time"> |
|
|
|
<p>{{item.contractName}}</p> |
|
|
|
<p style="color:#eb1616;font-weight: bold;"><span style="font-size: 12px;">¥</span>{{item.contractMoney.toFixed(2)}}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<template #right> |
|
|
|
<div class="operation"> |
|
|
|
<!-- delete 删除 edit编辑 view查看 list榜单 --> |
|
|
|
<div class="opera_btn" style="margin-right: 10px;" v-if="!item.firstSigning" @click="openPopup(item.id)"> |
|
|
|
<img src="../../../assets/images/sunVillage_info/signature_icon_02.png" alt="" width="35"> |
|
|
|
<p>签名</p> |
|
|
|
</div> |
|
|
|
<div class="opera_btn" style="margin-right: 10px;"> |
|
|
|
<img src="../../../assets/images/sunVillage_info/signature_icon_03.png" alt="" width="35"> |
|
|
|
<p>预览</p> |
|
|
|
</div> |
|
|
|
<div class="opera_btn"> |
|
|
|
<img src="../../../assets/images/sunVillage_info/signature_icon_04.png" alt="" width="35"> |
|
|
|
<p>下载</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</van-swipe-cell> |
|
|
|
</van-list> |
|
|
|
</div> |
|
|
|
<van-popup v-model="show" closeable round position="bottom" > |
|
|
|
<van-cell-group style="width: 100%;overflow: hidden;padding-top: 10px;padding-bottom: 5%;"> |
|
|
|
<div class="signature-box"> |
|
|
|
<vue-esign |
|
|
|
ref="esign" |
|
|
|
class="mySign" |
|
|
|
:width="500" |
|
|
|
:height="225" |
|
|
|
:isCrop="signature.isCrop" |
|
|
|
:lineWidth="signature.lineWidth" |
|
|
|
:lineColor="signature.lineColor" |
|
|
|
:bgColor.sync="signature.bgColor" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="signature-footer"> |
|
|
|
<van-button @click="handleGenerate" type="info" size="small">保存签字</van-button> |
|
|
|
<van-button @click="handleReset" class="clearBtn" type="info" plain size="small">清空画板</van-button> |
|
|
|
</div> |
|
|
|
</van-cell-group> |
|
|
|
</van-popup> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { contractSecondList , signSecond } from "@/api/sunVillage_info/fixedAssets"; |
|
|
|
import vueEsign from "vue-esign"; |
|
|
|
import signatureUploadSignature from "@/views/yinnong/signatureUploadSignature"; |
|
|
|
export default { |
|
|
|
name: "sunVillageInfoListSignature", |
|
|
|
components:{vueEsign,signatureUploadSignature}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
applicationList:[], |
|
|
|
loading: false, |
|
|
|
finished: false, |
|
|
|
show: false, |
|
|
|
fileList:[], |
|
|
|
listLength:'0', |
|
|
|
queryParams:{ |
|
|
|
pageNum:1, |
|
|
|
pageSize:10, |
|
|
|
translate_dict:1, |
|
|
|
}, |
|
|
|
showBtn:true, |
|
|
|
|
|
|
|
signatureImg:'', |
|
|
|
//电子签名 |
|
|
|
signature:{ |
|
|
|
lineWidth: 6, // 画笔的线条粗细 |
|
|
|
lineColor: "#000000", // 画笔的颜色 |
|
|
|
bgColor: "", // 画布的背景颜色 |
|
|
|
resultImg: "", // 最终画布生成的base64图片 |
|
|
|
isCrop: false, // 是否裁剪,在画布设定尺寸基础上裁掉四周空白部分 |
|
|
|
}, |
|
|
|
signaId:'', |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
if (this.$route.query.type == 'code'){ |
|
|
|
this.showBtn = false; |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getList(){ |
|
|
|
var _this = this; |
|
|
|
contractSecondList(_this.queryParams).then(response => { |
|
|
|
_this.applicationList = response.rows; |
|
|
|
|
|
|
|
if(_this.applicationList.length >= response.total){ |
|
|
|
_this.finished = true; |
|
|
|
return; |
|
|
|
}else{ |
|
|
|
_this.loading = false; |
|
|
|
_this.queryParams.pageNum += 1 ; |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
goDetail(id){ |
|
|
|
this.$router.push({path:'/user/signature/signatureDetail',query: {id:id,type:this.$route.query.typeX,showBtn:this.showBtn}}) |
|
|
|
}, |
|
|
|
openPopup(id,url){ |
|
|
|
this.show = true; |
|
|
|
this.signaId = id; |
|
|
|
}, |
|
|
|
signaImgFun(url){ |
|
|
|
this.signatureImg = url; |
|
|
|
// console.log(url) |
|
|
|
}, |
|
|
|
// 清空画板 |
|
|
|
handleReset() { |
|
|
|
this.$refs.esign.reset(); |
|
|
|
}, |
|
|
|
// 生成签字图 |
|
|
|
handleGenerate() { |
|
|
|
this.$refs.esign |
|
|
|
.generate() // 使用生成器调用把签字的图片转换成为base64图片格式 |
|
|
|
.then((res) => { |
|
|
|
console.log(res) |
|
|
|
this.signature.resultImg = res; |
|
|
|
let wj = this.dataURLtoBlob(res); |
|
|
|
let param = new FormData() // 创建form对象 |
|
|
|
param.append('file', wj) // 通过append向form对象添加数据 |
|
|
|
param.append('date', this.format(new Date(),'yyyy-MM-dd')) // 通过append向form对象添加数据 |
|
|
|
|
|
|
|
signSecond(param,this.signaId).then(response => { |
|
|
|
this.$notify({ type: 'success', message: '签字成功' }); |
|
|
|
this.show = false; |
|
|
|
location.reload() |
|
|
|
}); |
|
|
|
|
|
|
|
}) |
|
|
|
.catch((err) => { |
|
|
|
// 画布没有签字时会执行这里提示一下 |
|
|
|
this.$toast.fail('请签名后再保存签字'); |
|
|
|
|
|
|
|
}); |
|
|
|
}, |
|
|
|
dataURLtoBlob (dataurl, filename = 'file') { |
|
|
|
let arr = dataurl.split(',') |
|
|
|
let mime = arr[0].match(/:(.*?);/)[1] |
|
|
|
let suffix = mime.split('/')[1] |
|
|
|
let bstr = atob(arr[1]) |
|
|
|
let n = bstr.length |
|
|
|
let u8arr = new Uint8Array(n) |
|
|
|
while (n--) { |
|
|
|
u8arr[n] = bstr.charCodeAt(n) |
|
|
|
} |
|
|
|
return new File([u8arr], `${filename}.${suffix}`, { |
|
|
|
type: mime |
|
|
|
}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.home_wrapper{ |
|
|
|
background: #e9e9e9; |
|
|
|
min-height: 100vh; |
|
|
|
width: 100vw; |
|
|
|
.header_main{ |
|
|
|
height: 116px; |
|
|
|
background: url('../../../assets/images/sunVillage_info/list_head.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
font-size: 36px; |
|
|
|
line-height: 116px; |
|
|
|
text-align: center; |
|
|
|
color: #fff; |
|
|
|
position: relative; |
|
|
|
.return_btn{ |
|
|
|
width: 24px; |
|
|
|
height: 43.2px; |
|
|
|
background: url('../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat; |
|
|
|
background-size: 20px 36px; |
|
|
|
position: absolute; |
|
|
|
left: 38px; |
|
|
|
top: 36px; |
|
|
|
} |
|
|
|
.add_btn{ |
|
|
|
width: 56.4px; |
|
|
|
height: 40.8px; |
|
|
|
background: url('../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat; |
|
|
|
background-size: 47px 34px; |
|
|
|
position: absolute; |
|
|
|
right: 38px; |
|
|
|
top: 36px; |
|
|
|
} |
|
|
|
} |
|
|
|
.record_main{ |
|
|
|
padding:30px 22px; |
|
|
|
.record_det{ |
|
|
|
height: 38px; |
|
|
|
line-height: 38px; |
|
|
|
display: flex; |
|
|
|
justify-content:space-between; |
|
|
|
.year_l{ |
|
|
|
font-size: 30px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
color: #858585; |
|
|
|
|
|
|
|
.unit{ |
|
|
|
padding-left: 5px; |
|
|
|
} |
|
|
|
.icon{ |
|
|
|
width: 23px; |
|
|
|
height: 12px; |
|
|
|
display: block; |
|
|
|
background: url('../../../assets/images/sunVillage_info/list_icon_1.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
margin-bottom: 4px; |
|
|
|
margin-right: 8px; |
|
|
|
&.zk { |
|
|
|
transform: rotate(0deg) |
|
|
|
} |
|
|
|
&.ss{ |
|
|
|
transform: rotate(180deg) |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.total_r{ |
|
|
|
font-size: 26px; |
|
|
|
letter-spacing: 2px; |
|
|
|
} |
|
|
|
} |
|
|
|
.record_list{ |
|
|
|
display: flex; |
|
|
|
flex-flow: wrap; |
|
|
|
margin-top: 12PX; |
|
|
|
.flex_block{ |
|
|
|
font-size: 30px; |
|
|
|
color: #878787; |
|
|
|
padding-right: 30px; |
|
|
|
&.current{ |
|
|
|
color: #4199fe; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.list_main{ |
|
|
|
padding:0 22px; |
|
|
|
margin-top: 15PX; |
|
|
|
.item{ |
|
|
|
border-radius: 30px; |
|
|
|
background: #fff; |
|
|
|
box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1); |
|
|
|
padding:25px 32px; |
|
|
|
margin-bottom: 20px; |
|
|
|
.info{ |
|
|
|
.title{ |
|
|
|
display: flex; |
|
|
|
font-size: 32px; |
|
|
|
align-items: center; |
|
|
|
height: 58px; |
|
|
|
.icon_box{ |
|
|
|
width: 34px; |
|
|
|
display: block; |
|
|
|
height: 30px; |
|
|
|
background: url('../../../assets/images/sunVillage_info/signature_icon_01.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
margin-right: 10px; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
.icon_box1{ |
|
|
|
width: 34px; |
|
|
|
display: block; |
|
|
|
height: 30px; |
|
|
|
background: url('../../../assets/images/sunVillage_info/signature_icon_01g.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
margin-right: 10px; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
.news_title{ |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
-webkit-line-clamp: 1; |
|
|
|
word-break: break-all; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
.tips_mark{ |
|
|
|
background: #ffedcd; |
|
|
|
border-radius: 8px; |
|
|
|
font-size: 24px; |
|
|
|
color: #f8a83d; |
|
|
|
text-align: center; |
|
|
|
line-height: 34px; |
|
|
|
flex-shrink: 0; |
|
|
|
padding: 0 5Px; |
|
|
|
margin-left: auto; |
|
|
|
} |
|
|
|
.tips_mark2{ |
|
|
|
background: #eb1616; |
|
|
|
border-radius: 8px; |
|
|
|
font-size: 24px; |
|
|
|
color: #ffffff; |
|
|
|
text-align: center; |
|
|
|
line-height: 34px; |
|
|
|
flex-shrink: 0; |
|
|
|
padding: 0 5Px; |
|
|
|
margin-left: 10PX; |
|
|
|
} |
|
|
|
} |
|
|
|
.time{ |
|
|
|
font-size: 16PX; |
|
|
|
color: #333333; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
margin-top: 5PX; |
|
|
|
justify-content: space-between; |
|
|
|
.icon_time{ |
|
|
|
width: 25px; |
|
|
|
height: 25px; |
|
|
|
background: url('../../../assets/images/sunVillage_info/list_icon_4.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.operation{ |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: right; |
|
|
|
text-align: center; |
|
|
|
border-radius: 30px; |
|
|
|
background: #fff; |
|
|
|
box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1); |
|
|
|
height: 100%; |
|
|
|
padding: 0 15Px; |
|
|
|
margin-left: 10PX; |
|
|
|
.opera_btn{ |
|
|
|
border-radius: 50%; |
|
|
|
&.delete{ |
|
|
|
background:#df0707; |
|
|
|
margin-left: 10PX; |
|
|
|
.icon{ |
|
|
|
width: 22PX; |
|
|
|
height: 29PX; |
|
|
|
background: url('../../../assets/images/sunVillage_info/signature_icon_03.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
} |
|
|
|
&.edit{ |
|
|
|
background: #79cf13; |
|
|
|
margin-left: 10PX; |
|
|
|
.icon { |
|
|
|
width: 26PX; |
|
|
|
height: 25PX; |
|
|
|
background: url('../../../assets/images/sunVillage_info/signature_icon_02.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
} |
|
|
|
&.view{ |
|
|
|
background: #3494ff; |
|
|
|
margin-left: 10PX; |
|
|
|
.icon { |
|
|
|
width: 29PX; |
|
|
|
height: 21PX; |
|
|
|
background: url('../../../assets/images/sunVillage_info/signature_icon_04.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
} |
|
|
|
&.list{ |
|
|
|
background: #79cf13; |
|
|
|
margin-left: 10PX; |
|
|
|
.icon { |
|
|
|
width: 29px; |
|
|
|
height: 21px; |
|
|
|
background: url('../../../assets/images/sunVillage_info/list_icon_10.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.bottom_tips{ |
|
|
|
font-size: 24px; |
|
|
|
color: #a7a6a6; |
|
|
|
text-align: center; |
|
|
|
margin-top: 32px; |
|
|
|
background: url('../../../assets/images/sunVillage_info/list_icon_8.png') center center no-repeat; |
|
|
|
background-size: 260px 2px; |
|
|
|
.xs{ |
|
|
|
padding:0 8px; |
|
|
|
background: #e9e9e9; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.signature-box{ |
|
|
|
border:1px dashed #666; |
|
|
|
margin:2px 20px; |
|
|
|
} |
|
|
|
.signature-footer{ |
|
|
|
margin:15px 20px 0; |
|
|
|
display: flex; |
|
|
|
.clearBtn{ |
|
|
|
margin-left: 15px; |
|
|
|
} |
|
|
|
} |
|
|
|
.esigh-result{ |
|
|
|
margin:15px 20px; |
|
|
|
// height: 110px; |
|
|
|
border:1px solid #666; |
|
|
|
font-size: 0; |
|
|
|
.imgs{ |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |