Commit 2c8aba78 authored by Facius's avatar Facius
parents 26039978 dcbabe22
......@@ -36,6 +36,9 @@
// 授权用户信息
authUserInfo: '',
// 用户入驻信息
settledInfo: {},
},
onLaunch: function() {
// 应用初始化(全局只触发一次)
......@@ -46,9 +49,7 @@
},
onShow: function() {
// 应用启动,或从后台进入前台显示
if (!this.globalData.token) {
this.autoLogin()
}
},
onHide: function() {
// 应用从前台进入后台
......
......@@ -38,7 +38,9 @@ export default [{
"cat": 10
},
{
"fieldsTitle": "短裙",
"fieldsTitle": "文件选择",
"fieldsName": "file",
"fieldsType": "file",
"key": "短裙",
"icon": "https://cdn.uviewui.com/uview/common/classify/1/5.jpg",
"cat": 10
......
<template>
<view class="file-box">
<view class="u-flex" @click="selectUpload">
<view class="txt u-flex-1">{{item.fieldsTitle}}</view>
<u-icon name="arrow-right" color="#666" size="28"></u-icon>
</view>
<view class="pics u-flex u-flex-wrap">
<u-image class="pic" v-for="(item,index) in imgList" width="170rpx" height="170" :src="item.path"></u-image>
<!-- <u-image class="pic" v-for="item in 6" width="170rpx" height="170" src="'https://cdn.uviewui.com/uview/example/fade.jpg"></u-image> -->
</view>
<u-popup v-model="maskShow" mode="center" width="500">
<view class="upload-box u-p-30">
<view class="title">请选择图片</view>
<view class="u-flex u-row-between">
<view class="upload-item u-text-center" @click="uploadFile('photo')">
<u-image class="pic" width="170rpx" height="170" src="'https://cdn.uviewui.com/uview/example/fade.jpg"></u-image>
相册
</view>
<view class="upload-item u-text-center" @click="uploadFile">
<u-image class="pic" width="170rpx" height="170" src="'https://cdn.uviewui.com/uview/example/fade.jpg"></u-image>
拍摄
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import objMixin from './objMixin'
import baseFile from '@/components/upload/index';
export default {
name: 'XhFiles',
components: {},
mixins: [objMixin,baseFile],
props: {},
filters:{},
data() {
return {
maskShow:false
}
},
computed: {
settings() {
return this.item.settings || []
}
},
watch: {},
mounted() {},
methods: {
selectUpload(){
// 弹窗展示
this.maskShow = true
},
async uploadFile(type){
const self = this
if(type&&type==='photo'){
// 直接打开相册
let config = {
options:{
consourceType:['album'],//['album', 'camera']
}
}
await this.chooseImage('qiniu',config)
self.setValue()
return
}
// 使用拍照工具拍摄
},
setValue() {
const dataValue = []
this.imgList.map(item=>{
dataValue.push(item.key)
})
this.valueChange(dataValue)
}
}
}
</script>
<style lang="scss" scoped>
.pic{
margin-right: 15rpx;
margin-bottom: 15rpx;
&:nth-child(3n){
margin-right: 0;
}
}
// .list {
// display: flex;
// .txt {
// color: #666;
// padding: 10rpx;
// &.active {
// background-color: red;
// color: #fff;
// }
// }
// }
</style>
<template>
<view class="list">
<view v-for="(item,index) in settings" :key="index" :class="{'txt':true,'active':item===dataValue}"
@click="setValue(item)">{{item}}</view>
</view>
</template>
<script>
import stringMixin from './stringMixin'
export default {
name: 'XhRadio',
components: {},
mixins: [stringMixin],
props: {},
data() {
return {}
},
computed: {
settings(){
return this.item.settings || []
}
},
watch: {},
mounted() {},
methods: {
setValue(txt){
this.dataValue = txt
this.valueChange(txt)
}
}
}
</script>
<style lang="scss" scoped>
.list{
display: flex;
.txt{
color:#666;
padding:10rpx;
&.active{
background-color: red;
color:#fff;
}
}
}
</style>
......@@ -5,7 +5,9 @@ export default {
components: {},
data() {
return {
imgList:[]
imgList:[],
// 上传文件种类:0--头像、1--证件、2--身份证
categories: ['avatar', 'cert', 'id'],
};
},
created() {
......@@ -26,10 +28,19 @@ export default {
}
let res = await uploader.urlFileUpload(options)
},
async chooseImage(type){
/**
* 上传图片公用组件
* @param {Object} type 文件上传方式
* @param {Object} attr 文件属性:图片种类[category](身份证、证件、头像);
* 图片上传其他配置[options】(如,选择图片或拍摄options.consourceType,['album', 'camera'];)其他
*/
async chooseImage(type, attr={}){
const self = this
let imgList = []
if(type==='qiniu'){
// 图片种类
let category = attr && attr.category || self.categories[0]
let config = attr && attr.options || {} // 图片上传参数配置
// 七牛上传
let options = {
onProgressUpdate(res){
......@@ -57,13 +68,15 @@ export default {
}
self.imgList = imgList
console.log(res,'res---onEachUpdate')
}
},
cardType: category,
...config
}
// 不需要进度条等可直接获取
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,
......
......@@ -41,6 +41,9 @@
<xh-select v-if="item.fieldsType==='select'" :groupIndex="groupIndex"
:itemIndex="itemIndex" :item="item" @value-change="fieldValueChange">
</xh-select>
<xh-files v-if="item.fieldsType==='file'" :groupIndex="groupIndex"
:itemIndex="itemIndex" :item="item" @value-change="fieldValueChange">
</xh-files>
</template>
</u-form-item>
</view>
......@@ -58,6 +61,7 @@
import XhRadio from '@/components/createCom/XhRadio.vue'
import XhCheckbox from '@/components/createCom/XhCheckbox.vue'
import XhSelect from '@/components/createCom/XhSelect.vue'
import XhFiles from '@/components/createCom/XhFiles.vue'
// import XhRadio from '@/components/createCom/XhRadio.vue'
export default {
data() {
......@@ -109,7 +113,8 @@
XhInput,
XhRadio,
XhCheckbox,
XhSelect
XhSelect,
XhFiles
// formCom
},
created() {
......
......@@ -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,7 +454,7 @@
// });
},
},
}
}
</script>
<style lang="scss" scoped>
......
......@@ -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:访问文件的域名
......
......@@ -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