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