|
|
@@ -0,0 +1,526 @@ |
|
|
|
<template> |
|
|
|
<div class="home_wrapper"> |
|
|
|
<div |
|
|
|
class="header_main" |
|
|
|
:style="`background-image:url(${require(showBtn?'@/assets/images/sunVillage_info/list_head.png':'@/assets/images/sunVillage_info/list_head_red.png')})`" |
|
|
|
> |
|
|
|
标段农户网签 |
|
|
|
<div class="return_btn" @click="onClickLeft"></div> |
|
|
|
<!-- <div class="add_btn" @click="goAdd" v-show="showBtn"></div>--> |
|
|
|
</div> |
|
|
|
|
|
|
|
<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" :disabled="item.secondIsSign === '是'" > |
|
|
|
<div class="item" @click="goDetail(item.id)"> |
|
|
|
<div class="info"> |
|
|
|
<div class="title"> |
|
|
|
<i class="icon_box" v-if="item.secondSigning==null"></i> |
|
|
|
<i class="icon_box1" v-if="item.secondSigning!=null"></i> |
|
|
|
<p class="news_title" :style="{'color': item.secondSigning!=null?'#2bc30c':'#eb1616'}">{{item.contractCode}}</p> |
|
|
|
<p class="tips_mark" :style="{'color': item.secondSigning!=null?'#79bc29':'#f8a83d','background': item.secondSigning!=null?'#e8ffcd':'#ffedcd'}">{{item.signingMode}}</p> |
|
|
|
<p class="tips_mark2" :style="{'background': item.secondSigning!=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.logAmount.toFixed(2)}}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<template #right> |
|
|
|
<div class="operation"> |
|
|
|
<!-- delete 删除 edit编辑 view查看 list榜单 --> |
|
|
|
<div class="opera_btn" @click="openPopup(item.id)" v-if="item.secondIsSign === '否' "> |
|
|
|
<img src="../../assets/images/sunVillage_info/signature_icon_02.png" alt="" width="35"> |
|
|
|
<p>签名</p> |
|
|
|
</div> |
|
|
|
<!-- <div class="opera_btn" style="margin: 0 10px;" v-if="item.signingMode == '线上' && item.attachement != null "> |
|
|
|
<img src="../../assets/images/sunVillage_info/signature_icon_03.png" alt="" width="35"> |
|
|
|
<p>预览</p> |
|
|
|
</div> |
|
|
|
<div class="opera_btn" v-if="item.signingMode == '线上' && item.isArchive == '是' "> |
|
|
|
<img src="../../assets/images/sunVillage_info/signature_icon_04.png" alt="" width="35"> |
|
|
|
<p>电子合同</p> |
|
|
|
</div> |
|
|
|
<div class="opera_btn" v-if="item.signingMode == '线下' "> |
|
|
|
<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 position="right" :style="{ height: '100%' }" > |
|
|
|
<van-cell-group style="width: 100%;height:100%;overflow: hidden;padding-top: 10px;padding-bottom: 10px;"> |
|
|
|
<div class="signature-box" @mousedown="canvasTTdown" @touchstart="canvasTTdown"> |
|
|
|
<vue-esign |
|
|
|
ref="esign" |
|
|
|
class="mySign" |
|
|
|
:width="500" |
|
|
|
:height="height" |
|
|
|
:isCrop="signature.isCrop" |
|
|
|
:lineWidth="signature.lineWidth" |
|
|
|
:lineColor="signature.lineColor" |
|
|
|
:bgColor.sync="signature.bgColor" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<img src="../../assets/images/sunVillage_info/signature_icon_10.png" id="canvasTT" style="position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)" alt=""> |
|
|
|
<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 { listMultipleLotsNh, multipleLotsSecondSign } from "@/api/sunVillage_info/fixedAssets"; |
|
|
|
import vueEsign from "vue-esign"; |
|
|
|
import signatureUploadSignature from "@/views/yinnong/signatureUploadSignature"; |
|
|
|
import $ from "jquery"; |
|
|
|
import Cookies from "js-cookie"; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "sunVillageInfoListMultipleLotsNh", |
|
|
|
components: {vueEsign, signatureUploadSignature}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
applicationList: [], |
|
|
|
loading: false, |
|
|
|
finished: false, |
|
|
|
show: false, |
|
|
|
showFile: false, |
|
|
|
fileList: [], |
|
|
|
listLength: '0', |
|
|
|
queryParams: { |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 10, |
|
|
|
idcard: null, |
|
|
|
translate_dict: 1, |
|
|
|
}, |
|
|
|
showBtn: true, |
|
|
|
|
|
|
|
signatureImg: '', |
|
|
|
//电子签名 |
|
|
|
signature: { |
|
|
|
lineWidth: 6, // 画笔的线条粗细 |
|
|
|
lineColor: "#000000", // 画笔的颜色 |
|
|
|
bgColor: "", // 画布的背景颜色 |
|
|
|
resultImg: "", // 最终画布生成的base64图片 |
|
|
|
isCrop: false, // 是否裁剪,在画布设定尺寸基础上裁掉四周空白部分 |
|
|
|
}, |
|
|
|
signaId: '', |
|
|
|
height: null |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.height = window.screen.height * 1.28 - 20; |
|
|
|
this.queryParams.idcard = JSON.parse(Cookies.get('user')).idcard; |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
canvasTTdown() { |
|
|
|
$('#canvasTT').css('display', 'none'); |
|
|
|
}, |
|
|
|
getList() { |
|
|
|
listMultipleLotsNh(this.queryParams).then(response => { |
|
|
|
response.rows.forEach(item => { |
|
|
|
this.applicationList.push(item); |
|
|
|
}); |
|
|
|
if (this.applicationList.length >= response.total) { |
|
|
|
this.finished = true; |
|
|
|
return; |
|
|
|
} else { |
|
|
|
this.loading = false; |
|
|
|
this.queryParams.pageNum += 1; |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
goDetail(id) { |
|
|
|
this.$router.push({ |
|
|
|
path: '/sunVillage_info/list_multipleLotsNh_detail', |
|
|
|
query: { id: id } |
|
|
|
}) |
|
|
|
}, |
|
|
|
openPopup(id, url) { |
|
|
|
this.show = true; |
|
|
|
this.signaId = id; |
|
|
|
}, |
|
|
|
openPopupFile(file) { |
|
|
|
this.showFile = true; |
|
|
|
if (!file) return; |
|
|
|
let fileArray = file.split(','); |
|
|
|
fileArray.map(res => { |
|
|
|
this.fileList.push({ |
|
|
|
url: '/api' + res, |
|
|
|
isImage: true |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
signaImgFun(url) { |
|
|
|
this.signatureImg = url; |
|
|
|
}, |
|
|
|
// 清空画板 |
|
|
|
handleReset() { |
|
|
|
this.$refs.esign.reset(); |
|
|
|
$('#canvasTT').css('display', 'block') |
|
|
|
}, |
|
|
|
// 生成签字图 |
|
|
|
handleGenerate() { |
|
|
|
this.$refs.esign |
|
|
|
.generate() // 使用生成器调用把签字的图片转换成为base64图片格式 |
|
|
|
.then((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对象添加数据 |
|
|
|
|
|
|
|
multipleLotsSecondSign(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; |
|
|
|
height: 100%; |
|
|
|
/*canvas{*/ |
|
|
|
/* height: 100%!important;*/ |
|
|
|
/*}*/ |
|
|
|
} |
|
|
|
|
|
|
|
.signature-footer { |
|
|
|
transform: rotate(90deg); |
|
|
|
width: auto; |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
left: 0PX; |
|
|
|
|
|
|
|
.clearBtn { |
|
|
|
margin-left: 15px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.esigh-result { |
|
|
|
margin: 15px 20px; |
|
|
|
// height: 110px; |
|
|
|
border: 1px solid #666; |
|
|
|
font-size: 0; |
|
|
|
|
|
|
|
.imgs { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |