修改
This commit is contained in:
辉
parent
8e8da1c446
commit
59471e0f1a
52
components/signature/signature.vue
Normal file
52
components/signature/signature.vue
Normal file
@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<view class="signature" style="background-color: #F4F5F7;height: 800rpx;">
|
||||
<Signature @init="onSignInit" style='background-color: #fff;height: 700rpx;width: 100%;'></Signature>
|
||||
<view class="btns">
|
||||
<button @click="clear">清空</button>
|
||||
<button @click="revoke">撤回</button>
|
||||
<button @click="saveTempFilePath">保存</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import Signature from '@/components/v-sign/v-sign.vue'
|
||||
export default {
|
||||
components: {
|
||||
Signature
|
||||
},
|
||||
methods: {
|
||||
onSignInit(signCtx) {
|
||||
this.signCtx = signCtx
|
||||
},
|
||||
// 清空
|
||||
clear() {
|
||||
this.signCtx.clear()
|
||||
},
|
||||
// 撤回
|
||||
revoke() {
|
||||
this.signCtx.revoke()
|
||||
},
|
||||
// 保存为临时图片路径，h5返回 base64
|
||||
async saveTempFilePath() {
|
||||
const res = await this.signCtx.canvasToTempFilePath()
|
||||
this.$emit('userSignaturePictureUrl', res)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.signature {
|
||||
height: 800rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btns {
|
||||
margin-top: 50rpx;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 30%;
|
||||
}
|
||||
</style>
|
||||
15
components/v-sign/utils.js
Normal file
15
components/v-sign/utils.js
Normal file
@ -0,0 +1,15 @@
|
||||
/**
|
||||
* 判断是否未数值
|
||||
* @param {Object} val
|
||||
*/
|
||||
export function isNumber(val) {
|
||||
return !isNaN(Number(val))
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理大小单位
|
||||
* @param {Object} val
|
||||
*/
|
||||
export function formatSize(val) {
|
||||
return isNumber(val) ? `${val}rpx` : val
|
||||
}
|
||||
162
components/v-sign/v-sign-action.vue
Normal file
162
components/v-sign/v-sign-action.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<view class="v-sign-action" :style="[customStyle]">
|
||||
<view
|
||||
v-for="item in btns"
|
||||
:key="item.label"
|
||||
:class="['btn', { border: border }]"
|
||||
:style="[{ 'margin-right': formatSize(space) }]"
|
||||
@click="onBtnClick(item)"
|
||||
>
|
||||
<image :class="['icon', 'icon-' + item.action]" :src="item.icon"></image>
|
||||
<text class="text">{{ item.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* v-sign-action 控制按钮组（v-sign 子组件）
|
||||
* @description 控制 v-sign 组件的一些按钮
|
||||
* @tutorial
|
||||
* @property {Array} actions 按钮配置 所有值： 清空（clear）, 撤回（prev） 保存图片（save）
|
||||
* @property {Boolean} border 按钮是否有边框
|
||||
* @property {String/Number} space 按钮间隔
|
||||
* @property {Object} customStyle 根元素自定义样式
|
||||
* @event {Function} 点击对应类型按钮触发对应事件， 例如点击 clear 则触发 clear 事件
|
||||
* @example 示例
|
||||
**/
|
||||
import { formatSize } from './utils'
|
||||
|
||||
// v-sign 父组件提供的接口
|
||||
let vSignInterface
|
||||
// 按钮类型
|
||||
const btn_type = {
|
||||
CLEAR: 'clear', // 清空
|
||||
PREV: 'prev', // 撤回/上一步
|
||||
// NEXT: 'next',
|
||||
SAVE: 'save' // 保存临时图片
|
||||
}
|
||||
const all_action = Object.values(btn_type)
|
||||
const btnsConf = [
|
||||
{
|
||||
label: '清空',
|
||||
action: btn_type.CLEAR,
|
||||
icon: '/static/v-sign/clear.png'
|
||||
},
|
||||
{
|
||||
label: '撤回',
|
||||
action: btn_type.PREV,
|
||||
icon: '/static/v-sign/prev.png'
|
||||
},
|
||||
// {
|
||||
// label: '取消撤回',
|
||||
// action: btn_type.NEXT,
|
||||
// icon: '/static/v-sign/next.png'
|
||||
// },
|
||||
{
|
||||
label: '保存',
|
||||
action: btn_type.SAVE,
|
||||
icon: '/static/v-sign/save.png'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'v-sign-action',
|
||||
props: {
|
||||
// 按钮配置
|
||||
actions: {
|
||||
type: Array,
|
||||
default: () => all_action
|
||||
},
|
||||
// 按钮是否有边框
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 按钮间隔
|
||||
space: {
|
||||
type: [String, Number],
|
||||
default: 12
|
||||
},
|
||||
// 根元素自定义样式
|
||||
customStyle: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
inject: ['getInterface'],
|
||||
data() {
|
||||
return {
|
||||
formatSize
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
btns() {
|
||||
return btnsConf.filter(item => this.actions.includes(item.action))
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
vSignInterface = this.getInterface()
|
||||
},
|
||||
methods: {
|
||||
async onBtnClick(btn) {
|
||||
// console.log(btn, btn.action)
|
||||
let emit_result
|
||||
switch (btn.action) {
|
||||
case btn_type.CLEAR:
|
||||
vSignInterface.clear()
|
||||
break
|
||||
case btn_type.PREV:
|
||||
vSignInterface.revoke()
|
||||
break
|
||||
// case btn_type.NEXT:
|
||||
// console.log('next')
|
||||
// break
|
||||
case btn_type.SAVE:
|
||||
emit_result = await vSignInterface.canvasToTempFilePath()
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
// console.log(btn.action, emit_result);
|
||||
// 触发按钮对应类型事件
|
||||
this.$emit(btn.action, emit_result)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.v-sign-action {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12rpx;
|
||||
min-width: 88rpx;
|
||||
white-space: nowrap;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
&.border {
|
||||
border: 2rpx solid #666;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
.icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
&.icon-clear,
|
||||
&.icon-prev,
|
||||
&.icon-next {
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
&.icon-save {
|
||||
}
|
||||
}
|
||||
.text {
|
||||
color: #666;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
211
components/v-sign/v-sign-pen.vue
Normal file
211
components/v-sign/v-sign-pen.vue
Normal file
@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<view class="v-sign-pen">
|
||||
<view class="label" v-if="label">{{ label }}</view>
|
||||
<view class="options">
|
||||
<view
|
||||
class="opt-item"
|
||||
:style="{
|
||||
minHeight: minWrapHeight,
|
||||
marginRight: space + 'rpx'
|
||||
}"
|
||||
v-for="item in csizes"
|
||||
:key="item.size"
|
||||
@click="onItemClick(item)"
|
||||
>
|
||||
<view
|
||||
:class="type"
|
||||
:style="{
|
||||
border:
|
||||
border && currentSelect.size === item.size
|
||||
? `${borderWidth}rpx solid ${activeColor}`
|
||||
: ''
|
||||
}"
|
||||
>
|
||||
<view class="inner" :style="[defaultInnerStyle(item)]"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* v-sign-pen 画笔（v-sign 子组件）
|
||||
* @description 控制 v-sign 画笔的线宽
|
||||
* @tutorial
|
||||
* @property {String} type 选项样式 line / circle
|
||||
* @property {String} label 标签
|
||||
* @property {Array} sizes 画笔大小数组，单位 px
|
||||
* @property {String} color 选项颜色
|
||||
* @property {String} activeColor 选中项颜色
|
||||
* @property {Boolean} border 选中项是否有边框
|
||||
* @property {Number} borderWidth 边框大小，单位 rpx
|
||||
* @property {String} space 选项间隙，单位 rpx
|
||||
* @property {Number} bigger 圆点变大变粗倍数
|
||||
* @property {Number} minSize 圆点最小大小，单位 px
|
||||
* @event {Function} change 选择画笔大小时触发
|
||||
* @example
|
||||
**/
|
||||
// v-sign 父组件提供的接口
|
||||
let vSignInterface
|
||||
// 选项样式
|
||||
const type_style = {
|
||||
CIRCLE: 'circle',
|
||||
LINE: 'line'
|
||||
}
|
||||
export default {
|
||||
name: 'v-sign-pen',
|
||||
props: {
|
||||
// 选项样式
|
||||
type: {
|
||||
type: String,
|
||||
default: type_style.CIRCLE
|
||||
},
|
||||
label: {
|
||||
type: String
|
||||
},
|
||||
// 画笔大小数组，单位是px
|
||||
sizes: {
|
||||
type: Array,
|
||||
default: () => [2, 4, 6, 8, 10]
|
||||
},
|
||||
// 选项颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333'
|
||||
},
|
||||
// 选中项颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: '#333'
|
||||
},
|
||||
// 选中项是否有边框
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 边框大小, 单位 rpx
|
||||
borderWidth: {
|
||||
type: Number,
|
||||
default: 4
|
||||
},
|
||||
// 选项间隙, 单位 rpx
|
||||
space: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
// 圆点变大变粗倍数
|
||||
bigger: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
// 圆点最小大小，单位 px
|
||||
minSize: {
|
||||
type: Number,
|
||||
default: 4
|
||||
}
|
||||
},
|
||||
inject: ['getInterface'],
|
||||
data() {
|
||||
return {
|
||||
type_style,
|
||||
currentSelect: null,
|
||||
csizes: [],
|
||||
maxSize: 0,
|
||||
maxCsize: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
minWrapHeight() {
|
||||
let height
|
||||
switch (this.type) {
|
||||
case type_style.CIRCLE:
|
||||
height = this.maxCsize + 10 + 'px'
|
||||
break
|
||||
case type_style.LINE:
|
||||
height = this.maxSize + 4 + 'px'
|
||||
break
|
||||
}
|
||||
return height
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.csizes = this.sizes.map((size, index) => {
|
||||
const csize = (index + 1) * this.bigger + this.minSize
|
||||
this.maxSize = csize > this.maxSize ? csize : this.maxSize
|
||||
this.maxCsize = csize > this.maxCsize ? csize : this.maxCsize
|
||||
return {
|
||||
size,
|
||||
csize
|
||||
}
|
||||
})
|
||||
this.currentSelect = this.csizes[0]
|
||||
},
|
||||
mounted() {
|
||||
vSignInterface = this.getInterface()
|
||||
this.setLineWidth()
|
||||
},
|
||||
methods: {
|
||||
onItemClick(opt) {
|
||||
this.currentSelect = opt
|
||||
this.setLineWidth()
|
||||
this.$emit('change', opt.size)
|
||||
},
|
||||
setLineWidth() {
|
||||
vSignInterface.setLineWidth(this.currentSelect.size)
|
||||
},
|
||||
defaultInnerStyle(item) {
|
||||
let width
|
||||
let height
|
||||
switch (this.type) {
|
||||
case type_style.CIRCLE:
|
||||
width = `${item.csize}px`
|
||||
height = `${item.csize}px`
|
||||
break
|
||||
case type_style.LINE:
|
||||
width = '20px'
|
||||
height = `${item.size}px`
|
||||
break
|
||||
}
|
||||
const background = this.currentSelect.size === item.size ? this.activeColor : this.color
|
||||
return {
|
||||
width,
|
||||
height,
|
||||
background
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.v-sign-pen {
|
||||
padding: 12rpx;
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
.options {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
.opt-item {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.circle {
|
||||
border-radius: 50%;
|
||||
padding: 4rpx;
|
||||
.inner {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
padding: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
238
components/v-sign/v-sign.vue
Normal file
238
components/v-sign/v-sign.vue
Normal file
@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<view class="signature-wrap">
|
||||
<canvas
|
||||
:canvas-id="cid"
|
||||
:id="cid"
|
||||
@touchstart="onTouchStart"
|
||||
@touchmove="onTouchMove"
|
||||
@touchend="onTouchEnd"
|
||||
style="height:600rpx"
|
||||
:style="[{ width: formatSize(width)}, customStyle]"
|
||||
></canvas>
|
||||
<slot />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* sign canvas 手写签名
|
||||
* @description 设置线条宽度、颜色，撤回，清空
|
||||
* @tutorial
|
||||
* @property {String} cid canvas id 不设置则默认为 v-sign-时间戳
|
||||
* @property {String, Number} width canvas 宽度
|
||||
* @property {String, Number} height canvas 高度
|
||||
* @property {Object} customStyle 自定义样式
|
||||
* @property {String} lineColor 画笔颜色
|
||||
* @property {Number} lineWidth 画笔大小，权重大于 v-sign-pen 组件设置的画笔大小
|
||||
* @event {Function} init 当创建完 canvas 实例后触发，向外提供 canvas实例，撤回，清空方法
|
||||
* @example <v-sign @init="signInit"></v-sign>
|
||||
*/
|
||||
import { formatSize } from './utils'
|
||||
// convas 实例
|
||||
let canvasCtx
|
||||
|
||||
export default {
|
||||
name: 'v-sign',
|
||||
props: {
|
||||
// canvas id
|
||||
cid: {
|
||||
type: String,
|
||||
default: `v-sign-${Date.now()}`
|
||||
// required: true
|
||||
},
|
||||
// canvas 宽度
|
||||
width: {
|
||||
type: [String, Number],
|
||||
default: '100%'
|
||||
},
|
||||
// canvas 高度
|
||||
height: {
|
||||
type: [String, Number],
|
||||
default: 300
|
||||
},
|
||||
// 画笔大小，权重大于 v-sign-pen 组件设置的画笔大小
|
||||
lineWidth: {
|
||||
type: Number
|
||||
},
|
||||
// 线颜色
|
||||
lineColor: {
|
||||
type: String,
|
||||
default: '#000'
|
||||
},
|
||||
// canvas自定义样式
|
||||
customStyle: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
getInterface: this.provideInterface
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formatSize,
|
||||
lineData: [],
|
||||
winWidth: 0,
|
||||
winHeight: 0,
|
||||
penLineWidth: null, // v-sign-pen 组件设置的画笔大小
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
canvasCtx = uni.createCanvasContext(this.cid, this)
|
||||
// 初始化完成，向外暴露接口
|
||||
this.$emit('init', this.provideInterface())
|
||||
// 获取窗口宽高
|
||||
uni.getSystemInfo({
|
||||
success: res => {
|
||||
this.winWidth = res.windowWidth
|
||||
this.winHeight = res.windowHeight
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
onTouchStart(e) {
|
||||
const pos = e.touches[0]
|
||||
this.lineData.push({
|
||||
style: {
|
||||
color: this.lineColor,
|
||||
width: this.lineWidth || this.penLineWidth || 4
|
||||
},
|
||||
// 屏幕坐标
|
||||
coordinates: [
|
||||
{
|
||||
type: e.type,
|
||||
x: pos.x,
|
||||
y: pos.y
|
||||
}
|
||||
]
|
||||
})
|
||||
this.drawLine()
|
||||
},
|
||||
onTouchMove(e) {
|
||||
const pos = e.touches[0]
|
||||
this.lineData[this.lineData.length - 1].coordinates.push({
|
||||
type: e.type,
|
||||
x: pos.x,
|
||||
y: pos.y
|
||||
})
|
||||
this.drawLine()
|
||||
},
|
||||
onTouchEnd(e) {
|
||||
// console.log(e.type, e)
|
||||
},
|
||||
// 清空画布
|
||||
clear() {
|
||||
this.lineData = []
|
||||
canvasCtx.clearRect(0, 0, this.winWidth, this.winHeight)
|
||||
canvasCtx.draw()
|
||||
},
|
||||
// 撤销
|
||||
revoke() {
|
||||
this.lineData.pop()
|
||||
this.lineData.forEach((item, index) => {
|
||||
canvasCtx.beginPath()
|
||||
canvasCtx.setLineCap('round')
|
||||
canvasCtx.setStrokeStyle(item.style.color)
|
||||
canvasCtx.setLineWidth(item.style.width)
|
||||
item.coordinates.forEach(pos => {
|
||||
if (pos.type == 'touchstart') {
|
||||
canvasCtx.moveTo(pos.x, pos.y)
|
||||
} else {
|
||||
canvasCtx.lineTo(pos.x, pos.y)
|
||||
}
|
||||
})
|
||||
canvasCtx.stroke()
|
||||
})
|
||||
canvasCtx.draw()
|
||||
},
|
||||
// 绘制线条
|
||||
drawLine() {
|
||||
const lineDataLen = this.lineData.length
|
||||
if (!lineDataLen) return
|
||||
const currentLineData = this.lineData[lineDataLen - 1]
|
||||
const coordinates = currentLineData.coordinates
|
||||
const coordinatesLen = coordinates.length
|
||||
if (!coordinatesLen) return
|
||||
let startPos
|
||||
let endPos
|
||||
if (coordinatesLen < 2) {
|
||||
// only start, no move event
|
||||
startPos = coordinates[coordinatesLen - 1]
|
||||
endPos = { x: startPos.x + 1, y: startPos.y }
|
||||
} else {
|
||||
startPos = coordinates[coordinatesLen - 2]
|
||||
endPos = coordinates[coordinatesLen - 1]
|
||||
}
|
||||
|
||||
const style = currentLineData.style
|
||||
canvasCtx.beginPath()
|
||||
canvasCtx.setLineCap('round')
|
||||
canvasCtx.setStrokeStyle(style.color)
|
||||
canvasCtx.setLineWidth(style.width)
|
||||
canvasCtx.moveTo(startPos.x, startPos.y)
|
||||
canvasCtx.lineTo(endPos.x, endPos.y)
|
||||
// const P1 = this.caculateBezier(startPos, endPos, centerPos)
|
||||
// console.log(P1.x, P1.y)
|
||||
// canvasCtx.moveTo(startPos.x, startPos.y)
|
||||
// canvasCtx.quadraticCurveTo(P1.x, P1.y, endPos.x, endPos.y)
|
||||
canvasCtx.stroke()
|
||||
canvasCtx.draw(true)
|
||||
},
|
||||
canvasToTempFilePath(conf = {}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.canvasToTempFilePath(
|
||||
{
|
||||
canvasId: this.cid,
|
||||
...conf,
|
||||
success: res => {
|
||||
resolve(res.tempFilePath)
|
||||
},
|
||||
fail: err => {
|
||||
console.log('fail', err)
|
||||
reject(err)
|
||||
}
|
||||
},
|
||||
this
|
||||
)
|
||||
})
|
||||
},
|
||||
setLineWidth(numberVal) {
|
||||
this.penLineWidth = numberVal
|
||||
},
|
||||
provideInterface() {
|
||||
return {
|
||||
cid: this.cid,
|
||||
ctx: canvasCtx,
|
||||
clear: this.clear,
|
||||
revoke: this.revoke,
|
||||
canvasToTempFilePath: this.canvasToTempFilePath,
|
||||
setLineWidth: this.setLineWidth
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 计算二次贝塞尔曲线 控制点 P1
|
||||
* 起点 P0(x0,y0)、控制点P1(x1, y1)、P2(x2, y2)、曲线上任意点B(x, y)
|
||||
* 二次贝塞尔公式：B(t) = (1-t)²P0 + 2t(1-t)P1 + t²P2
|
||||
* 代入坐标得：
|
||||
* x = (1-t)²*x0 + 2t(1-t)*x1 + t²*x2
|
||||
* y = (1-t)²*y0 + 2t(1-t)*y1 + t²*y2
|
||||
*/
|
||||
caculateBezier(P0, P2, B, t = 0.5) {
|
||||
const { x: x0, y: y0 } = P0
|
||||
const { x: x2, y: y2 } = P2
|
||||
const { x, y } = B
|
||||
let x1 = (x - (1 - t) * (1 - t) * x0 - t * t * x2) / (2 * t * (1 - t))
|
||||
let y1 = (y - (1 - t) * (1 - t) * y0 - t * t * y2) / (2 * t * (1 - t))
|
||||
return { x: x1, y: y1 }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.signature-wrap {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
@ -103,7 +103,11 @@
|
||||
<image src="../../static/huijiantou.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="signing">
|
||||
<view class="name">
|
||||
签约周期(年)
|
||||
<u-input v-model="query.signYears" type='number' :border="true" placeholder="请输入签约周期(单位年)" />
|
||||
</view>
|
||||
<view class=" signing">
|
||||
<view class="agency">
|
||||
签约提醒:
|
||||
</view>
|
||||
@ -200,12 +204,19 @@
|
||||
crowdNoList: null,
|
||||
packageList: [],
|
||||
packageNoList: null,
|
||||
signYears: null,
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 'query.signYears': {
|
||||
// handler(newVal, oldVal) {},
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
updata() {
|
||||
if (this.radio == 2) {
|
||||
if (!this.query.signYears) this.query.signYears = 1
|
||||
let date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1;
|
||||
|
||||
@ -1,21 +1,40 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<u-parse :html="content"></u-parse>
|
||||
<!-- <u-parse :html="content"></u-parse> -->
|
||||
<view class="" @tap='show =true'>
|
||||
111111111111111
|
||||
</view>
|
||||
<u-mask :show="show" @click="show = false">
|
||||
<view style="position:absolute;bottom:0;height:900rpx;width:100%;background-color: #fff;" v-if='show'>
|
||||
<signature @userSignaturePictureUrl='userSignaturePicture' @click.native.stop
|
||||
style='background-color: #F4F5F7;width: 100%;height: 900rpx;'></signature>
|
||||
</view>
|
||||
</u-mask>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import signature from '@/components/signature/signature.vue'
|
||||
import {
|
||||
getContent
|
||||
} from '@/api/pagesC/contractsigningprotocol/index.js'
|
||||
export default {
|
||||
components: {
|
||||
signature
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
orgNo: null,
|
||||
content: null,
|
||||
show: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//签名
|
||||
userSignaturePicture(data) {
|
||||
console.log(data)
|
||||
this.show = false
|
||||
},
|
||||
info() {
|
||||
getContent(this.orgNo, '1').then(res => {
|
||||
this.content = res.data.content
|
||||
@ -23,7 +42,6 @@
|
||||
},
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log(options)
|
||||
this.orgNo = options.orgNo
|
||||
this.info();
|
||||
},
|
||||
@ -33,5 +51,6 @@
|
||||
<style lang="scss">
|
||||
.app {
|
||||
margin-top: 100rpx;
|
||||
padding: 0 40rpx;
|
||||
}
|
||||
</style>
|
||||
@ -103,7 +103,22 @@
|
||||
that.query.lng = resp.longitude
|
||||
that.getNearbyOrginfo()
|
||||
},
|
||||
fail: function(err) {},
|
||||
fail: function(err) {
|
||||
// uni.openSetting({
|
||||
// success(res) {
|
||||
// if (res.authSetting['scope.userLocation']) {
|
||||
// uni.getLocation({
|
||||
// type: 'wgs84',
|
||||
// success: function(resp) {
|
||||
// that.query.lat = resp.latitude
|
||||
// that.query.lng = resp.longitude
|
||||
// that.getNearbyOrginfo()
|
||||
// },
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
},
|
||||
});
|
||||
},
|
||||
onReachBottom() { //上滑加载
|
||||
@ -277,4 +292,4 @@
|
||||
::v-deep .u-cell-box {}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user