273 lines
7.8 KiB
Vue
273 lines
7.8 KiB
Vue
<template>
|
||
<view class="page">
|
||
<uv-form ref="form" :model="userInfo" :rules="rules" labelPosition="left" labelWidth="auto">
|
||
<uv-form-item borderBottom label="电话:" prop="phone">
|
||
<uv-input v-model="userInfo.phone" border="none"></uv-input>
|
||
</uv-form-item>
|
||
<uv-form-item borderBottom label="地址:" prop="location">
|
||
<uv-input v-model="userInfo.location" border="none"></uv-input>
|
||
</uv-form-item>
|
||
<uv-form-item borderBottom label="主体名称:" prop="name">
|
||
<uv-input v-model="userInfo.name" border="none"></uv-input>
|
||
</uv-form-item>
|
||
<uv-form-item borderBottom label="统一社会信用代码:" prop="code">
|
||
<uv-input v-model="userInfo.code" border="none"></uv-input>
|
||
</uv-form-item>
|
||
<view class="license">
|
||
<text>营业执照</text>
|
||
</view>
|
||
<uv-form-item>
|
||
<image-uploader
|
||
ref="uploader"
|
||
:height="'400rpx'"
|
||
:width="'auto'"
|
||
@success="handleUploadSuccess"
|
||
/>
|
||
</uv-form-item>
|
||
<!-- <text>签名区域</text>-->
|
||
<!-- <uv-form-item>-->
|
||
<!-- <view style="width: auto; height: 500rpx; background-color: #8f939c">-->
|
||
<!-- <l-signature-->
|
||
<!-- ref="signatureRef"-->
|
||
<!-- :openSmooth="openSmooth"-->
|
||
<!-- :penColor="penColor"-->
|
||
<!-- :penSize="penSize"-->
|
||
<!-- disableScroll-->
|
||
<!-- ></l-signature>-->
|
||
<!-- </view>-->
|
||
<!-- </uv-form-item>-->
|
||
<view class="btn-signature">
|
||
<uv-button
|
||
customStyle="margin-top: 10px"
|
||
throttleTime="1000"
|
||
type="primary "
|
||
@click="openProtocol"
|
||
>点击查看协议
|
||
</uv-button>
|
||
<uv-button
|
||
customStyle="margin-top: 10px"
|
||
text="确认协议并去签名"
|
||
type="primary"
|
||
@click="submit"
|
||
>
|
||
</uv-button>
|
||
<!-- <uv-button-->
|
||
<!-- customStyle="margin-top: 10px"-->
|
||
<!-- text="清空签名"-->
|
||
<!-- type="error"-->
|
||
<!-- @click="onClick('clear')"-->
|
||
<!-- ></uv-button>-->
|
||
<!-- <uv-button-->
|
||
<!-- customStyle="margin-top: 10px"-->
|
||
<!-- text="确认签名"-->
|
||
<!-- type="primary"-->
|
||
<!-- @click="onClick('save')"-->
|
||
<!-- ></uv-button>-->
|
||
<!-- <uv-button-->
|
||
<!-- customStyle="margin-top: 10px"-->
|
||
<!-- text="提交协议"-->
|
||
<!-- type="primary"-->
|
||
<!-- @click="submit"-->
|
||
<!-- ></uv-button>-->
|
||
</view>
|
||
</uv-form>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { tempUrlToRealUrl } from '../../utils/tempUrl-to-realUrl'
|
||
|
||
export default {
|
||
onLoad() {
|
||
// this.openProtocol()
|
||
},
|
||
data() {
|
||
return {
|
||
tempUrl: '',
|
||
userInfo: {
|
||
name: '',
|
||
code: '',
|
||
phone: '',
|
||
location: '',
|
||
businessLicenseUrl: '',
|
||
signatureUrl: '',
|
||
templateId: '1',
|
||
},
|
||
|
||
rules: {
|
||
name: {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请填写主体名称',
|
||
trigger: ['blur', 'change'],
|
||
},
|
||
phone: {
|
||
type: 'string',
|
||
required: true,
|
||
// pattern: /^1[3-9]\d{9}$/,
|
||
message: '请填写正确的手机号码',
|
||
trigger: ['blur', 'change'],
|
||
},
|
||
location: {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请填写地址',
|
||
trigger: ['blur', 'change'],
|
||
},
|
||
code: {
|
||
type: 'string',
|
||
required: true,
|
||
// pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
|
||
message: '请填写正确的统一社会信用代码',
|
||
trigger: ['blur', 'change'],
|
||
},
|
||
// license: {
|
||
// type: 'string',
|
||
// required: true,
|
||
// message: '请上传营业执照',
|
||
// trigger: ['blur', 'change'],
|
||
// },
|
||
// signature: {
|
||
// type: 'string',
|
||
// required: true,
|
||
// message: '请签名',
|
||
// trigger: ['blur', 'change'],
|
||
// },
|
||
},
|
||
radio: '',
|
||
switchVal: false,
|
||
}
|
||
},
|
||
methods: {
|
||
openProtocol() {
|
||
uni.downloadFile({
|
||
url: 'https://api.ccttiot.com/安装协议（准备好）-1757570264575.pdf',
|
||
success: function (res) {
|
||
var filePath = res.tempFilePath
|
||
uni.openDocument({
|
||
filePath: filePath,
|
||
showMenu: true,
|
||
success: function (res) {},
|
||
})
|
||
},
|
||
})
|
||
},
|
||
|
||
handleUploadSuccess(result) {
|
||
console.log('图片上传成功:', result.url)
|
||
this.userInfo.businessLicenseUrl = result.url
|
||
uni.showToast({
|
||
title: '上传成功',
|
||
icon: 'success',
|
||
})
|
||
},
|
||
// 提交
|
||
async submit() {
|
||
// await this.onClick('save')
|
||
|
||
if (this.userInfo.businessLicenseUrl === '') {
|
||
uni.showToast({
|
||
icon: 'error',
|
||
title: '请上传营业执照',
|
||
})
|
||
return
|
||
}
|
||
// if (this.userInfo.signatureUrl === '') {
|
||
// uni.showToast({
|
||
// icon: 'error',
|
||
// title: '请确认签名',
|
||
// })
|
||
// return
|
||
// }
|
||
|
||
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
|
||
this.$refs.form
|
||
.validate()
|
||
.then(res => {
|
||
uni.showToast({
|
||
icon: 'success',
|
||
title: '校验通过',
|
||
})
|
||
// 这里可以添加实际的提交逻辑
|
||
console.log('表单数据:', this.userInfo)
|
||
uni.navigateTo({
|
||
url: `/pages/signature/signature?${Object.entries(this.userInfo)
|
||
.map(([key, val]) => `${key}=${encodeURIComponent(val)}`)
|
||
.join('&')}`,
|
||
})
|
||
})
|
||
.catch(errors => {
|
||
uni.showToast({
|
||
icon: 'error',
|
||
title: '校验失败',
|
||
})
|
||
console.log('验证错误:', errors)
|
||
})
|
||
},
|
||
// 重置
|
||
reset() {
|
||
this.$refs.form.resetFields()
|
||
this.$refs.form.clearValidate()
|
||
this.userInfo.businessLicenseUrl = ''
|
||
},
|
||
|
||
hideKeyboard() {
|
||
uni.hideKeyboard()
|
||
},
|
||
// async onClick(type) {
|
||
// if (type === 'openSmooth') {
|
||
// this.openSmooth = !this.openSmooth
|
||
// return
|
||
// }
|
||
// if (type === 'save') {
|
||
// await this.$refs.signatureRef.canvasToTempFilePath({
|
||
// success: async res => {
|
||
// // 是否为空画板 无签名
|
||
// console.log('签名返回是否为空', res.isEmpty)
|
||
// if (res.isEmpty) {
|
||
// this.userInfo.signatureUrl = ''
|
||
// return
|
||
// }
|
||
//
|
||
// // 生成图片的临时路径
|
||
// // H5 生成的是base64
|
||
// this.tempUrl = res.tempFilePath
|
||
// console.log('临时路径', res.tempFilePath)
|
||
//
|
||
// this.userInfo.signatureUrl = await tempUrlToRealUrl(res.tempFilePath)
|
||
// console.log('签名路径', this.userInfo.signatureUrl)
|
||
// console.log('签名上传成功')
|
||
// uni.showToast({ title: '签名上传成功', icon: 'success' })
|
||
// },
|
||
// })
|
||
// return
|
||
// }
|
||
// if (type === 'clear') {
|
||
// this.userInfo.signatureUrl = ''
|
||
// }
|
||
// if (this.$refs.signatureRef) this.$refs.signatureRef[type]()
|
||
// },
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
padding: 10rpx 30rpx;
|
||
}
|
||
|
||
.btn-signature {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.license {
|
||
margin-top: 50rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 690rpx;
|
||
}
|
||
</style>
|