186 lines
4.6 KiB
Vue
186 lines
4.6 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>
|
|
<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>
|
|
</view>
|
|
</uv-form>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
onLoad() {
|
|
// this.openProtocol()
|
|
},
|
|
data() {
|
|
return {
|
|
tempUrl: '',
|
|
userInfo: {
|
|
name: '',
|
|
code: '',
|
|
phone: '',
|
|
location: '',
|
|
businessLicenseUrl: '',
|
|
signatureUrl: '',
|
|
templateId: '2',
|
|
},
|
|
|
|
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'],
|
|
},
|
|
},
|
|
radio: '',
|
|
switchVal: false,
|
|
}
|
|
},
|
|
methods: {
|
|
openProtocol() {
|
|
uni.downloadFile({
|
|
url: 'https://api.ccttiot.com/hhrxy-1757582246358.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() {
|
|
if (this.userInfo.businessLicenseUrl === '') {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
title: '请上传营业执照',
|
|
})
|
|
return
|
|
}
|
|
|
|
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()
|
|
},
|
|
},
|
|
}
|
|
</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>
|