Skip to content

V
voucher-h5
Commit e8fd7abe by 潘琦
Options

签约页签名增加水印提示语；

parent e29b0733
Showing with 94 additions and 64 deletions
src/views/signing/index.vue
......@@ -407,9 +407,9 @@
</mt-popup>
<div class="signPopup" :class="SignatureSheetVisible?'on':'off'">
<div class="body">
<div class="title">居民签约 <span class="close" @click="SignatureSheetVisible=false"><i class="glyphicon glyphicon-remove-circle"></i></span></div>
<div class="canvas" ref="signCanvasBlock">
<vueSignature ref="signature" :sigOption="signOption" :h="signCanvasH"></vueSignature>
<div class="title">居民签约 <span class="close" @click="closeSignPopup"><i class="glyphicon glyphicon-remove-circle"></i></span></div>
<div class="canvas" ref="signCanvasBlock" @touchstart.prevent="signChange">
<vueSignature ref="signature" :sigOption="signOption" :h="signCanvasH" :waterMark="waterMarkOptions"></vueSignature>
</div>
</div>
<div class="footer-btn">
......@@ -462,6 +462,7 @@
</div>
</div>
</div>
<div class="v-modal" v-show="modalVisible" style="z-index: 98"></div>
</div>
</template>
......@@ -472,6 +473,7 @@ import { validatename, cardid, isvalidatemobile } from '@/util/validate'
import { SubtractDay, getBirthByIdNumber, getSexByIdCard, getAgeByBirth } from '@/util/index'
import _defaultPicture from '../../assets/images/org-default-picture.png'
import _noticePicture from '../../assets/images/notice-img.png'
import _signatureBg from '../../assets/images/signature-bg.png'
// import { wxpermission } from '@/wxpermission'
const wx = require('weixin-js-sdk')
......@@ -560,7 +562,7 @@ export default {
StreetCode: '',
VillagesCode: ''
},
stepCurrent: 3, // 地址省市区街道步骤下标
stepCurrent: 1, // 地址省市区街道步骤下标
ProvinceData: null, // 省会列表数据
CityData: null, // 城市列表数据
AreaData: null, // 区域列表数据
......@@ -589,10 +591,21 @@ export default {
penColor: 'rgb(0, 0, 0)',
backgroundColor: '#efefef'
},
signBGdataUrl: _signatureBg,
signWaterMarkState: true,
waterMarkOptions: {
text: '请在此处签名，字迹工整！', // watermark text, > default ''
font: '16px Arial', // mark font, > default '20px sans-serif'
style: 'fill', // fillText and strokeText, 'all'/'stroke'/'fill', > default 'fill
fillStyle: '#333', // fillcolor, > default '#333'
x: 100, // fill positionX, > default 20
y: 100 // fill positionY, > default 20
},
lightBoxVisible: false,
lightBoxImage: '',
ChoosePlusVisible: true,
Choose2PlusVisible: true
Choose2PlusVisible: true,
modalVisible: false // 底层透明遮挡显示状态
}
},
created () {
......@@ -609,14 +622,12 @@ export default {
this.addressForm.ProvinceCode = '320000'
this.addressForm.CityCode = '320500'
this.addressForm.AreaCode = '320582'
this.stepCurrent = 3
this.stepCurrent = 4
break
default:
this.stepCurrent = 1
break
}
} else {
this.stepCurrent = 1
}
this.getUserSignInfoFn() // 获取用户签约信息回显
},
......@@ -1068,10 +1079,14 @@ export default {
})
return false
}
this.SignatureSheetVisible = true
this.modalVisible = true
this.signCanvasW = this.$refs.signCanvasBlock.offsetWidth
},
closeSignPopup () {
this.SignatureSheetVisible = false
this.modalVisible = false
},
handelSubmit () { // 签名无误提交
this.signatureImage = this.$refs.signature.save()
if (this.$refs.signature.isEmpty()) {
......@@ -1421,63 +1436,66 @@ export default {
this.lightBoxVisible = false
},
saveSignInfoToCookie () { // 将签约信息存入cookie
if (this.signId === '' || !this.signId) {
let signInfoJSON = {
BaseForm: {
name: this.BaseForm.name,
idCard: this.BaseForm.idCard,
phone: this.BaseForm.phone,
lastMensesTime: this.BaseForm.lastMensesTime, // 末次月经时间
address: this.BaseForm.address,
subAddress: this.BaseForm.subAddress,
street: this.BaseForm.street,
chooseImagesIds: this.BaseForm.chooseImagesIds, // 身份证图片微信本地图片id
chooseImages2Ids: this.BaseForm.chooseImages2Ids // 怀孕资料图片微信本地图片id
},
addressForm: this.addressForm
}
this.$cookies.set('signInfo', JSON.stringify(signInfoJSON), 60 * 60 * 24 * 1)
// store.dispatch('setSignInfo', JSON.stringify(signInfoJSON))
}
// if (this.signId === '' || !this.signId) {
// let signInfoJSON = {
// BaseForm: {
// name: this.BaseForm.name,
// idCard: this.BaseForm.idCard,
// phone: this.BaseForm.phone,
// lastMensesTime: this.BaseForm.lastMensesTime, // 末次月经时间
// address: this.BaseForm.address,
// subAddress: this.BaseForm.subAddress,
// street: this.BaseForm.street,
// chooseImagesIds: this.BaseForm.chooseImagesIds, // 身份证图片微信本地图片id
// chooseImages2Ids: this.BaseForm.chooseImages2Ids // 怀孕资料图片微信本地图片id
// },
// addressForm: this.addressForm
// }
// this.$cookies.set('signInfo', JSON.stringify(signInfoJSON), 60 * 60 * 24 * 1)
// // store.dispatch('setSignInfo', JSON.stringify(signInfoJSON))
// }
},
getSignInfoCookies () { // 获取用户签约信息cookie
let signInfo = this.$cookies.get('signInfo')
if (signInfo !== '' && signInfo) {
this.BaseForm.name = signInfo.BaseForm.name
this.BaseForm.idCard = signInfo.BaseForm.idCard
this.BaseForm.phone = signInfo.BaseForm.phone
this.BaseForm.lastMensesTime = signInfo.BaseForm.lastMensesTime // 末次月经时间
// this.BaseForm.address = signInfo.addressForm.province + ' ' + signInfo.addressForm.city + ' ' + signInfo.addressForm.area
// this.BaseForm.subAddress = signInfo.addressForm.street + ' ' + signInfo.addressForm.villages
if (signInfo.addressForm.province !== '') {
this.BaseForm.address = signInfo.addressForm.province
}
if (signInfo.addressForm.city !== '') {
this.BaseForm.address = this.BaseForm.address + ' ' + signInfo.addressForm.city
}
if (signInfo.addressForm.area !== '') {
this.BaseForm.address = this.BaseForm.address + ' ' + signInfo.addressForm.area
}
if (signInfo.addressForm.street !== '') {
this.BaseForm.subAddress = signInfo.addressForm.street
}
if (signInfo.addressForm.villages !== '') {
this.BaseForm.subAddress = this.BaseForm.subAddress + ' ' + signInfo.addressForm.villages
}
this.BaseForm.street = signInfo.BaseForm.street
this.BaseForm.chooseImagesIds = signInfo.BaseForm.chooseImagesIds // 身份证图片微信本地图片id
this.BaseForm.chooseImages2Ids = signInfo.BaseForm.chooseImages2Ids // 怀孕资料图片微信本地图片id
if (this.BaseForm.chooseImagesIds.length > 0) {
this.getWXLocalImgDataById(0, 1)
}
// this.wxGetLocalImgData(signInfo.BaseForm.chooseImages2Ids, 2)
this.addressForm = signInfo.addressForm
// this.$toast({
// message: signInfo.BaseForm.chooseImagesIds,
// position: 'center',
// duration: 3000
// })
}
// let signInfo = this.$cookies.get('signInfo')
// if (signInfo !== '' && signInfo) {
// this.BaseForm.name = signInfo.BaseForm.name
// this.BaseForm.idCard = signInfo.BaseForm.idCard
// this.BaseForm.phone = signInfo.BaseForm.phone
// this.BaseForm.lastMensesTime = signInfo.BaseForm.lastMensesTime // 末次月经时间
// // this.BaseForm.address = signInfo.addressForm.province + ' ' + signInfo.addressForm.city + ' ' + signInfo.addressForm.area
// // this.BaseForm.subAddress = signInfo.addressForm.street + ' ' + signInfo.addressForm.villages
// console.log(this.addressForm.province)
// if (signInfo.addressForm.province !== '') {
// this.BaseForm.address = signInfo.addressForm.province
// }
// if (signInfo.addressForm.city !== '') {
// this.BaseForm.address = this.BaseForm.address + ' ' + signInfo.addressForm.city
// }
// if (signInfo.addressForm.area !== '') {
// this.BaseForm.address = this.BaseForm.address + ' ' + signInfo.addressForm.area
// }
// if (signInfo.addressForm.street !== '') {
// this.BaseForm.subAddress = signInfo.addressForm.street
// }
// if (signInfo.addressForm.villages !== '') {
// this.BaseForm.subAddress = this.BaseForm.subAddress + ' ' + signInfo.addressForm.villages
// }
// this.BaseForm.street = signInfo.BaseForm.street
// this.BaseForm.chooseImagesIds = signInfo.BaseForm.chooseImagesIds // 身份证图片微信本地图片id
// this.BaseForm.chooseImages2Ids = signInfo.BaseForm.chooseImages2Ids // 怀孕资料图片微信本地图片id
// if (this.BaseForm.chooseImagesIds.length > 0) {
// this.getWXLocalImgDataById(0, 1)
// }
// // this.wxGetLocalImgData(signInfo.BaseForm.chooseImages2Ids, 2)
// if (!this.from || this.from === '') {
// this.addressForm = signInfo.addressForm
// }
// // this.$toast({
// // message: signInfo.BaseForm.chooseImagesIds,
// // position: 'center',
// // duration: 3000
// // })
// }
},
getWXLocalImgDataById (index, type) {
let that = this
......@@ -1517,6 +1535,13 @@ export default {
that.uploadImgBtnHandel()
}
})
},
signChange (e) { // 第一次签名清除水印
if (this.signWaterMarkState) {
console.log('signChange')
this.handelOverwrite()
this.signWaterMarkState = false
}
}
}
}
......@@ -1630,6 +1655,9 @@ export default {
.address-step .step-list .step-item.finish > .icon > .ico > .glyphicon{
display: block;
}
.address-step .step-list .step-item.finish > .icon > .ico > .glyphicon > i {
top: 2px;
}
.address-step .step-list .step-item.finish > .icon > .ico > .number{
display: none;
}
......@@ -1811,10 +1839,12 @@ export default {
.signPopup .body .canvas {
min-height: 150px;
padding: 0 1em;
/* background-color: #dddee1; */
}
.signPopup .footer-btn {
overflow: hidden;
border-top: 1px solid #efefef;
}
.signPopup .footer-btn > button {
width: 50%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment