You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
huazhiyu/pages/my/mySign.vue

431 lines
11 KiB

<template>
<view class="qianyue">
<div v-if="showXieyi&&content&&!userInfo.sign_image" style="position: relative;" class="xieyi-content" v-html="content">
</div>
<view v-if="showXieyi&&content&&!userInfo.sign_image" class="interval">{{intervalTime}}</view>
<u-icon v-if="showXieyi&&content&&intervalTime===0&&!userInfo.sign_image" class="close" name="close" color="#909399" size="28" @click="showXieyi=false"></u-icon>
<div v-if="!showXieyi||userInfo.sign_image">
<view v-if="userInfo.sign_status === 1" style="text-align: center;color:green;font-weight: 600;width: 100%;">已签约</view>
<view v-if="userInfo.sign_status === 2" style="text-align: center;color:red;font-weight: 600;width: 100%;">审核不通过</view>
<view v-if="userInfo.sign_status === 0&&userInfo.sign_image" style="text-align: center;color:grey;font-weight: 600;width: 100%;">审核中</view>
<u-form :model="form" ref="uForm" :rules="rules">
<u-form-item label="姓名" prop="bank_username" border-bottom required>
<u-input :border="false" :disabled="isEdit" placeholder="请输入姓名" v-model="form.bank_username" />
</u-form-item>
<u-form-item :label-width="100" label="银行卡姓名" prop="bank_realname" border-bottom required>
<u-input :border="false" :disabled="isEdit" placeholder="请输入银行卡姓名" v-model="form.bank_realname" />
</u-form-item>
<u-form-item :label-width="85" label="银行卡号" prop="bank_no" border-bottom required>
<u-input :border="false" :disabled="isEdit" placeholder="请输入银行卡号" v-model="form.bank_no" />
</u-form-item>
<u-form-item :label-width="70" label="开户行" prop="bank_address" border-bottom required>
<u-input :border="false" :disabled="isEdit" placeholder="请输入开户行" v-model="form.bank_address" />
</u-form-item>
<u-form-item label="支行" prop="bank_sub_address" border-bottom required>
<u-input :disabled="isEdit" :border="false" placeholder="请输入支行" v-model="form.bank_sub_address" />
</u-form-item>
<u-form-item label="签字" prop="sign_image" border-bottom required>
<view v-if="!form.sign_image" class="sign-btn" @click="showSign">点击签名</view>
<image v-else style="width: 60vw;" mode="aspectFit" @click="showSign" :src="form.sign_image"></image>
</u-form-item>
</u-form>
</div>
<view v-if="!showXieyi||userInfo.sign_image">
<view v-if="!userInfo.sign_image||userInfo.sign_status === 2" class="saveBtn" @click="submitSign">提交</view>
</view>
<u-toast ref="uToast"></u-toast>
<u-popup :show="show" mode="bottom" @close="show=false" round="10" >
<view style="width: 100vw; height: 60vh;">
<l-signature disableScroll backgroundColor="#ddd"
ref="signatureRef"
:landscape="true"
:openSmooth="openSmooth" ></l-signature>
</view>
<view class="btn">
<button @click="onClick('clear')">清空</button>
<button @click="onClick('undo')">撤消</button>
<button @click="onClick('save')">保存</button>
</view>
</u-popup>
</view>
</template>
<script>
import {getWarehouseList,getUserInfo,privacyPolicy, confirmSign} from '@/common/api.js'
import {getToken} from '@/common/auth.js'
import {updateUserInfo} from '@/common/api.js'
var base64Img = require('base64-img');
export default{
components:{
},
data(){
return{
userInfo: {}, // sign_status 1已签 2 审核拒绝 0 且sign_image不为空 审核中
showXieyi: true,
form: {
bank_username: '',
bank_realname: '',
bank_no: '',
bank_address: '',
bank_sub_address: '',
sign_image: '',
},
rules: {
bank_username: [
{
required: true,
message: '请输入姓名',
// 可以单个或者同时写两个触发验证方式
trigger: ['change','blur'],
}
],
bank_realname: [
{
required: true,
message: '请输入银行卡姓名',
// 可以单个或者同时写两个触发验证方式
trigger: ['change','blur'],
}
],
bank_no: [
{
required: true,
message: '请输入银行卡号',
// 可以单个或者同时写两个触发验证方式
trigger: ['change','blur'],
}
],
bank_address: [
{
required: true,
message: '请输入开户行',
// 可以单个或者同时写两个触发验证方式
trigger: ['change','blur'],
}
],
bank_address: [
{
required: true,
message: '请输入开户行',
// 可以单个或者同时写两个触发验证方式
trigger: ['change','blur'],
}
],
bank_sub_address: [
{
required: true,
message: '请输入支行',
// 可以单个或者同时写两个触发验证方式
trigger: ['change','blur'],
}
],
},
showList:true,
show:false,
content: '',
intervalTime: 15,
}
},
computed:{
isEdit(){
let val = false;
if(this.userInfo.sign_status === 1){
val = true
}else if(this.userInfo.sign_status === 0&&this.userInfo.sign_image){
val = true
}
return val
}
},
methods:{
showSign(){
if(this.userInfo.sign_status === 1||(this.userInfo.sign_status === 0&&this.userInfo.sign_image)){
return;
}
this.show = true;
},
submitSign(){
console.log('submit')
console.log(this.$refs.uForm.validate,'submit')
if(!this.form.bank_address||!this.form.bank_no||!this.form.bank_realname||!this.form.bank_sub_address||!this.form.bank_username||!this.form.sign_image){
return
}
confirmSign(this.form).then(res => {
if(res.code === 1){
this.$refs.uToast.show({
message:'签约信息已提交'
})
const tem = setTimeout(() => {
uni.navigateBack({
delta:1
})
clearTimeout(tem)
},1000)
}
})
// this.$refs.uForm.validate(valid => {
// debugger
// console.log(valid, 'ca')
// if (valid) {
// } else {
// console.log('验证失败');
// }
// });
},
base64toBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
onClick(type) {
console.log(type, 'type')
if(type == 'openSmooth') {
this.openSmooth = !this.openSmooth
return
}
if (type == 'save') {
this.$refs.signatureRef.canvasToTempFilePath({
success: (res) => {
if(res.isEmpty){
uni.$u.toast("请签名")
return;
}
var path = URL.createObjectURL(this.base64toBlob(res.tempFilePath))
uni.uploadFile({
url: this.baseUrl+'api/common/upload',
filePath: path,
name: 'file',
header:{
token:getToken()
},
formData: {
},
success: (res) => {
const data = JSON.parse(res.data)
if(data.code==1){
this.form.sign_image = data.data.fullurl
console.log(data, 'this.form.sign_image')
this.show = false
}else{
uni.$u.toast(JSON.parse(res.data).msg)
}
},
fail: (res) => {
console.log(res,"rrr")
}
});
}
})
return
}
if (this.$refs.signatureRef)
this.$refs.signatureRef[type]()
},
saveSignPic(picurl){
console.log(picurl)
updateUserInfo({sign_image:picurl}).then(res=>{
console.log(res,"ooooo")
if(res.code==1){
uni.switchTab({
url:"/pages/qianyue/qianyue"
})
}
})
}
},
onShow(){
getUserInfo().then(res=>{
this.userInfo =Object.assign(({},this.userInfo,res.data))
if(this.userInfo.sign_image){
this.form = {
bank_username: this.userInfo.bank_username,
bank_realname: this.userInfo.bank_realname,
bank_no: this.userInfo.bank_no,
bank_address: this.userInfo.bank_address,
bank_sub_address: this.userInfo.bank_sub_address,
sign_image: this.userInfo.sign_image,
}
}
})
privacyPolicy({id:2}).then(res => {
console.log(res, 'privacyPolicy');
this.content = res.data.content;
})
const tem = setInterval(() => {
if(this.intervalTime>0){
this.intervalTime --;
}else{
clearInterval(tem)
}
},1000)
this.getUserInfoHandle()
this.show = false
},
onLoad() {
},
onReady() {
},
}
</script>
<style lang="scss" scoped>
.interval{
position: fixed;
top: 40px;
left: 5px;
border-radius: 50%;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
color: red;
font-size: 25px;
}
.close{
top: 45px;
right: 15px;
position: fixed;
z-index: 99;
}
.qianyue{
padding:24rpx;
.banner{
height: 260rpx;
margin-bottom: 10rpx;
// margin: -200rpx auto 20rpx;
border-radius: 10rpx;
overflow: hidden;
.u-swiper{
background-color: #fff !important;
}
}
.qgList{
.qgItem{
height:286rpx;
width: 100%;
position: relative;
overflow: hidden;
margin-bottom:20rpx;
.bgPic{
width:100%;
}
.qgInfo{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
text-align: center;
background: rgba(0,0,0,.6);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index:99;
.conpany{
display: flex;
align-items: center;
color: rgb(193, 193, 193);;
.line{
height:4rpx;
width:100rpx;
background-color: rgb(193, 193, 193);;
}
.text{
font-size: 30rpx;
color: rgb(193, 193, 193);
margin:0 10rpx;
}
}
.time{
font-size: 38rpx;
color: #fff;
margin-top: 26px;
}
}
}
}
}
.gobottom{
color: rgba(165, 165, 165, 0.5);
font-size: 30rpx;
margin-top:20rpx;
text-align: center;
}
.istruction{
text-align: center;
color:#9f751f;
margin-top:80rpx;
}
.xieyi{
border:1px solid $base;
color:$base;
border-radius: 10rpx;
width:40%;
text-align: center;
margin:30rpx auto;
padding:10rpx 0;
}
.sign{
border:1px solid $base;
color:$base;
border-radius: 10rpx;
width:40%;
text-align: center;
margin:30rpx auto;
padding:10rpx 0;
}
.btn{
// transform: rotate(90deg);
display: flex;
position: fixed;
bottom:10px;
width:100%;
button{
flex:1;
margin:0 10rpx;
background-color: $base;
color:#fff;
font-size: 28rpx;
}
}
.sign-btn{
width: 80px;
height: 30px;
line-height: 30px;
background-color: #fff;
text-align: center;
}
.saveBtn{
background: rgb(35, 96, 48);
color: rgb(255, 255, 255);
border: 1px solid rgb(35, 96, 48);
overflow: hidden;
font-size: 28rpx;
height: 44px;
line-height: 44px;
text-align: center;
border-radius: 10rpx;
margin-top:100rpx;
}
</style>