Skip to content

S
self-support
Commit 4d14079a authored by Morson's avatar Morson
Browse files
Options

入驻资料模块交互逻辑 

图片模块逻辑处理
parent a029c047
Show whitespace changes
Inline Side-by-side
Showing with 609 additions and 534 deletions
src/App.vue
View file @ 4d14079a
......@@ -36,6 +36,9 @@
// 授权用户信息
authUserInfo: '',
// 用户入驻信息
settledInfo: {},
},
onLaunch: function() {
// 应用初始化（全局只触发一次）
......@@ -46,9 +49,7 @@
},
onShow: function() {
// 应用启动，或从后台进入前台显示
if (!this.globalData.token) {
this.autoLogin()
}
},
onHide: function() {
// 应用从前台进入后台
......
src/components/upload/index.js
View file @ 4d14079a
......@@ -5,7 +5,9 @@ export default {
components: {},
data() {
return {
imgList:[]
imgList:[],
// 上传文件种类：0--头像、1--证件、2--身份证
categories: ['avatar', 'cert', 'id'],
};
},
created() {
......@@ -26,10 +28,17 @@ export default {
}
let res = await uploader.urlFileUpload(options)
},
async chooseImage(type){
/**
* 上传图片公用组件
* @param {Object} type 文件上传方式
* @param {Object} attr 文件属性：图片种类[category]（身份证、证件、头像），其他
*/
async chooseImage(type, attr={}){
const self = this
let imgList = []
if(type==='qiniu'){
// 图片种类
let category = attr && attr.category || self.categories[0]
// 七牛上传
let options = {
onProgressUpdate(res){
......@@ -57,13 +66,14 @@ export default {
}
self.imgList = imgList
console.log(res,'res---onEachUpdate')
}
},
cardType: category
}
// 不需要进度条等可直接获取
let res = await uploader.qnImgUpload(options)
console.log(self.imgList,'self.imgList')
// console.log(uploader,uploader.qiniuTokenObj,'qiniuTokenObj')
console.log(uploader,uploader.qiniuTokenObj,'qiniuTokenObj')
// let imgList = res.map(item=>{
// return {
// key:item,
......
src/pages/settle/file.vue
View file @ 4d14079a
......@@ -13,22 +13,30 @@
</view>
<view class="info-tip-text">{{ fileItem.tips }}</view>
<view class="image-view">
<image class="info-image" mode="aspectFill" v-for="(src, key) in fileItem.placeholderImages"
:src="fileItem.imgs.length > key ? fileItem.imgs[key] : src" :key="src + key"
@click="handleClick(fileItem, index, key)"></image>
<image
class="info-image"
mode="aspectFill"
v-for="(src, key) in fileItem.placeholderImages"
:src="fileItem.imgs.length > key ? fileItem.imgs[key] : src"
:key="src + key"
@click="handleClick(fileItem, index, key)"
></image>
</view>
<view v-if="index == 0" class="bottom-tip-view">
<image class="bottom-tip-image" mode="widthFix" src="../../static/settle/tishi@3x.png"></image>
<text>所上传的身份证信息必须与银行卡开户绑定身份证信息一致，否则将导致订单报酬无法交付</text>
</view>
<view class="card-info-view" v-if="index == 0 && (fileInfo.id_card_name || fileInfo.id_card_number || fileInfo.id_card_date)">
<view class="card-info-view" v-if="index == 0
&& ((fileInfo.id_card_name || fileInfo.id_card_number || fileInfo.id_card_date) || frontErrorMsg || backErrorMsg)">
<view class="card-list-view" v-for="(value, cardkey) in cardTitle" :key="cardkey">
<view class="card-list-item">
<text>{{value}}</text>
<text class="card-item-text">{{fileInfo[cardkey]}}</text>
<text>{{ value }}</text>
<text class="card-item-text">{{ fileInfo[cardkey] }}</text>
</view>
<view class="line-view"></view>
<view class="card-item-error" v-if="fileInfo[cardkey] && (cardkey == 'id_card_date' ? fileInfo.id_card_back : fileInfo.id_card_front)">识别失败，请重新上传</view>
<view class="card-item-error" v-if="fileInfo[cardkey]
&& ((cardkey == 'id_card_name' || cardkey == 'id_card_number') && frontErrorMsg)">{{frontErrorMsg}}</view>
<view class="card-item-error" v-if="(cardkey == 'id_card_date' && backErrorMsg)">{{ backErrorMsg }}</view>
</view>
</view>
</view>
......@@ -37,48 +45,34 @@
<template v-slot:bottom>
<view class="btn-wrap flex-xc">
<button class="btn-submit" :disabled="!submitBtnStatus" @click="$u.debounce(submitFileInfo, 500)">
{{!submitBtnStatus ? "完成必填项，可提交资料" : "提交"}}
{{ !submitBtnStatus ? '完成必填项，可提交资料' : '提交' }}
</button>
</view>
</template>
<view class="base-list">
<!-- <view class="base-list">
<template v-for="(fileItem, index) in formShowList">
<view class="item item-select flex flex-yc" :key="index" @click="toUploadImg(fileItem, index)">
<view class="label txt">{{ fileItem.label }}</view>
<p class="flex1 u-text-right txt" v-show="fileInfo[fileItem.filedName] !== ''">
{{
imgObj[fileItem.filedName] && imgObj[fileItem.filedName].length + "张"
}}
{{ imgObj[fileItem.filedName] && imgObj[fileItem.filedName].length + '张' }}
</p>
<u-icon name="arrow-right" color="#999" size="28"></u-icon>
</view>
<view class="tips" :key="index + 't'">
{{ fileItem.tips }}
</view>
<view class="tips id-identity-box" :key="index + 'identity'"
v-if="fileItem.filedName === 'id_card_front'">
<view class="tips" :key="index + 't'">{{ fileItem.tips }}</view>
<view class="tips id-identity-box" :key="index + 'identity'" v-if="fileItem.filedName === 'id_card_front'">
<view class="txt">请核实识别结果</view>
<view class="txt">
身份证姓名：{{ fileInfo.id_card_name}}<span class="red" v-show="
!fileInfo.id_card_name &&
fileInfo.id_card_front
">识别失败，请重新上传</span>
身份证姓名：{{ fileInfo.id_card_name }}
<span class="red" v-show="!fileInfo.id_card_name && fileInfo.id_card_front">识别失败，请重新上传</span>
</view>
<view class="txt">
身份证号码：{{ fileInfo.id_card_number
}}<span class="red" v-show="
!fileInfo.id_card_name &&
fileInfo.id_card_front
">识别失败，请重新上传</span>
身份证号码：{{ fileInfo.id_card_number }}
<span class="red" v-show="!fileInfo.id_card_name && fileInfo.id_card_front">识别失败，请重新上传</span>
</view>
</view>
</template>
</view>
</view> -->
<!-- <view class="seat"></view>
<view class="btn-wrap fixed flex flex-xc">
<button class="btn-submit" :disabled="!submitBtnStatus" @click="$u.debounce(submitFileInfo, 500)">
......@@ -92,13 +86,21 @@
</template>
<script>
import Settle from '@/components/settle/index.vue'
export default {
import Settle from '@/components/settle/index.vue'
import base from '@/components/upload/index';
const app = getApp()
export default {
mixins:[base],
components: {
Settle
},
data() {
return {
imgList:[],
frontErrorMsg: '',
backErrorMsg: '',
uploadType: '',
settledInfo: '',
fileInfo: {
id: "",
id_card_name: "",
......@@ -107,16 +109,32 @@
id_card_front: "",
id_card_back: "",
electrician_certificate: "",
vehicle_photos: "",
other_certificates: "",
/**
* 其他证件照片信息，json串储存
* driver_license:驾驶证
* driving_license:行驶证
* vehicle:车辆照
**/
other_photos: {
"driver_license": {
"url": "",
},
"driving_license": {
"url": "",
},
"vehicle":{
"url": "",
},
},
id_card_back_check: false,
},
imgObj: {
id_card_front: [],
id_card_back: [],
electrician_certificate: [],
vehicle_photos: [],
other_certificates: []
driver_license: [],
driving_license: [],
vehicle: [],
},
formShowList: [{
filedName: "id_card_front",
......@@ -145,7 +163,7 @@
placeholderImages: ['../../static/settle/diangong@3x.png']
},
{
filedName: "other_certificates",
filedName: "driver_license",
label: "驾驶证/行驶证照片",
imgs: [],
maxImgs: 999,
......@@ -153,7 +171,7 @@
placeholderImages: ['../../static/settle/jiashi@3x.png', '../../static/settle/jiashi@3x.png']
},
{
filedName: "vehicle_photos",
filedName: "vehicle",
label: "车辆照",
maxImgs: 1,
tips: "两证单张照片需包含两页内容，图片大小不大于3M",
......@@ -167,9 +185,12 @@
saving: false,
}
},
onLoad(e) {},
onLoad(e) {
this.initSettledInfo()
},
updated() {
this.updateImgs()
// 该方法性能消耗大目前不使用
// this.updateImgs()
},
watch: {
"fileInfo.id_card_front"() {
......@@ -181,7 +202,7 @@
}
},
"fileInfo.id_card_back"() {
if (this.fileInfo.id_card_front) {
if (this.fileInfo.id_card_back) {
this.checkIdCard("back");
} else {
this.fileInfo.id_card_back_check = true;
......@@ -207,14 +228,44 @@
},
methods: {
// 初始化入驻信息
async initSettledInfo() {
let self = this
let settledInfo = app.globalData.settledInfo
if(settledInfo && settledInfo.length) {
self.fileInfo.id = settledInfo.id
} else {
const app = getApp()
const callBack = (vm, result) => {
vm.settledInfo = result.record
vm.fileInfo.id = result.record.id
}
settledInfo = await app.getBaseInfo(this, callBack)
uni.hideLoading()
}
},
// item: formShowList的元素
// index、key: 选中的是formShowList的第index里面的第key个图片选择器
handleClick(item, index, key) {
async handleClick(item, index, key) {
let self = this
self.imgList = []
self.uploadType = item.filedName || ''
// 默认上传证件类型图片
let attr = {category: self.categories[1]}
switch (index) {
case 0:
// 身份证
// 上传图片
// 成功之后更新 fileInfo、 item里的imgs
attr = {category: self.categories[2]}
if(key == 0) {
// 身份证正面照片
self.uploadType = "id_card_front"
} else {
// 身份证反面照片
self.uploadType = "id_card_back"
}
break;
default:
//其他
......@@ -223,21 +274,30 @@
break;
}
await self.chooseImage("qiniu", attr)
if(self.uploadType && self.imgList && self.imgList.length > 0) {
// 设置图片对象
self.imgObj[self.uploadType] = self.imgList
self.formShowList[index].imgs[key] = self.imgList[0].src
this.updateImgs()
}
},
updateImgs() {
const uploadType = this.uploadType
const uploadImgs = this.imgObj[uploadType]
if (uploadImgs.length < 1) {
if (uploadImgs && uploadImgs.length < 1) {
return
}
if (uploadType === 'other_certificates') {
const otherImgs = this.imgObj['other_certificates']
if (uploadType === 'driver_license' || uploadType === 'driving_license' || uploadType === 'vehicle') {
const otherImgs = this.imgObj[uploadType]
let imgs = []
otherImgs.map(item => {
const img = item.key || item.src || ''
imgs.push(img)
})
this.fileInfo[uploadType] = imgs.join(',')
return
}
this.fileInfo[uploadType] = uploadImgs[0].key || uploadImgs[0].src || ''
......@@ -277,8 +337,10 @@
if (type === "front") {
this.fileInfo.id_card_name = "";
this.fileInfo.id_card_number = "";
this.frontErrorMsg = res.message || "识别失败，请重新上传"
} else {
this.fileInfo.id_card_back_check = false;
this.backErrorMsg = res.message || "识别失败，请重新上传"
}
return
}
......@@ -288,8 +350,11 @@
res.data.id_card_name || "";
this.fileInfo.id_card_number =
res.data.id_card_number || "";
this.frontErrorMsg = (!this.fileInfo.id_card_name || !this.fileInfo.id_card_number) ? "识别失败，请重新上传" : ''
} else {
this.fileInfo.id_card_date = res.data.id_card_date || "";
this.fileInfo.id_card_back_check = true;
this.backErrorMsg = !this.fileInfo.id_card_date ? "识别失败，请重新上传" : ''
}
},
checkFileInfo() {
......@@ -389,12 +454,12 @@
// });
},
},
}
}
</script>
<style lang="scss" scoped>
.page-content {
background-color: #F4F5F7;
.page-content {
background-color: #f4f5f7;
position: absolute;
top: 0;
left: 0;
......@@ -402,9 +467,9 @@
height: 100%;
display: flex;
flex-direction: column;
}
}
.base-list {
.base-list {
.item {
display: flex;
margin-bottom: 58rpx;
......@@ -443,7 +508,7 @@
font-size: 28rpx;
color: #666;
&+.id-identity-box {
& + .id-identity-box {
margin-top: -38rpx;
margin-bottom: 40rpx;
}
......@@ -469,10 +534,9 @@
// &.tips{
// margin-bottom:0!important;
// }
}
.item+.tips {
.item + .tips {
margin-top: -38rpx;
margin-bottom: 58rpx;
}
......@@ -533,10 +597,10 @@
font-weight: 400;
}
}
}
}
.tip-text {
background-color: #FFFFFF;
.tip-text {
background-color: #ffffff;
border-radius: 12rpx;
padding: 38rpx 30rpx 30rpx 30rpx;
height: 140rpx;
......@@ -545,35 +609,35 @@
color: #000000;
display: flex;
align-items: flex-start;
}
}
.tip-image {
.tip-image {
width: 34rpx;
margin-right: 8rpx;
margin-top: 2rpx;
}
}
.bottom-tip-view {
.bottom-tip-view {
color: #999999;
font-size: 20rpx;
display: flex;
align-items: flex-start;
margin-top: 30rpx;
}
}
.bottom-tip-image {
.bottom-tip-image {
width: 24rpx;
height: 24rpx;
margin-right: 8rpx;
margin-top: 4rpx;
}
}
.seat {
.seat {
padding-bottom: 144rpx;
}
}
/*提交按钮*/
.btn-wrap {
/*提交按钮*/
.btn-wrap {
width: 100%;
.btn-submit {
......@@ -581,17 +645,17 @@
height: 104rpx;
line-height: 104rpx;
border-radius: 52rpx;
background: #2272FF;
background: #2272ff;
font-size: 32rpx;
color: #fff;
&[disabled] {
background-color: #D1D4D4;
color: #FFFFFF;
}
background-color: #d1d4d4;
color: #ffffff;
}
}
.card-info-view {
}
.card-info-view {
margin-top: 30rpx;
.card-list-view {
.card-list-item {
......@@ -607,22 +671,22 @@
}
}
.line-view {
background-color: #F4F5F7;
background-color: #f4f5f7;
height: 2rpx;
width: 100%;
}
.card-item-error{
.card-item-error {
color: red;
font-size: 20rpx;
}
}
}
}
.info-view {
.info-view {
margin-bottom: 188rpx;
.title-view {
background-color: #FFFFFF;
background-color: #ffffff;
border-radius: 12rpx;
padding: 38rpx 30rpx 30rpx 30rpx;
margin-bottom: 20rpx;
......@@ -652,5 +716,5 @@
height: 226rpx;
}
}
}
}
</style>
src/plugins/uploader/index.js
View file @ 4d14079a
......@@ -26,11 +26,11 @@ let baseOptions = {
let uploader = new request(baseOptions);
// 添加获取七牛云token的方法
uploader.getQnToken = function(data) {
uploader.getQnToken = function(params) {
//该地址需要开发者自行配置（每个后台的接口风格都不一样）
// console.log(uploader.get,'uploader.get')
return new Promise((resolve, reject) => {
uploader.post(baseOptions.qiniuUploadUrl,data).then(data => {
uploader.post(baseOptions.qiniuUploadUrl, params).then(data => {
/*
*接口返回参数：
*visitPrefix:访问文件的域名
......
src/plugins/uploader/request/upload/upload.js
View file @ 4d14079a
......@@ -83,7 +83,7 @@ export default class fileUpload extends request {
}
let qnRes = this.qiniuTokenObj
if(!qnRes || qnRes.cardType !== requestInfo.cardType){
let params = {type:requestInfo.cardType || ''}
let params = {type:requestInfo.cardType || 'avatar'}
qnRes = await this.getQnToken(params)
this.qiniuTokenObj = {
cardType:'',
......
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