Skip to content

S
self-support
Commit fb9889fd authored by Damon's avatar Damon
Browse files
Options

完工-上传组件适配scroll-view

parent 4d886b4b
Hide whitespace changes
Inline Side-by-side
Showing with 168 additions and 150 deletions
src/components/createCom/XhFiles.vue
View file @ fb9889fd
......@@ -2,10 +2,6 @@
<template>
<view>
<view class="file-box">
<!-- <view class="u-flex">
<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">
<view class="img-list" v-for="(item,index) in imgList" :key="index">
<u-image class="pic" width="160" height="160" :src="item.path ? item.path : item.src + '?imageView2/1/w/100/h/100/q/75'" :border-radius="10" @click.stop="prviewImage(item,index)"></u-image>
......@@ -14,13 +10,14 @@
<view class="icon-del rotate"></view>
</view>
</view>
<view class="img-list">
<slot></slot>
<!-- <view class="img-list">
<u-image class="pic" width="160rpx" height="160rpx" :border-radius="10" @click="selectUpload" :src="uploadImage"></u-image>
</view>
</view> -->
</view>
<u-action-sheet :list="list" v-model="maskShow" :cancel-btn="true" @click="uploadSelect"></u-action-sheet>
<!-- <u-action-sheet :list="list" v-model="maskShow" :cancel-btn="true" @click="uploadSelect"></u-action-sheet> -->
</view>
<take-photo v-if="takeStatus" @close="closeTake" :upload="false" :currentItem="currentItemDate"></take-photo>
<!-- <take-photo v-if="takeStatus" @close="closeTake" :upload="false" :currentItem="currentItemDate"></take-photo> -->
</view>
</template>
......@@ -86,6 +83,26 @@
}
},
methods: {
setTmpValue(values) {
this.imgList = this.imgList.concat(values)
const dataValue = this.imgList.map(v => v.src)
this.valueChange(dataValue)
},
setValue() {
const dataValue = this.imgList.map(item => item.src)
this.valueChange(dataValue)
},
prviewImage(item, index) {
uni.previewImage({
urls: [item.path ? item.path : item.src],
current: index
});
},
delFile(index) {
this.imgList.splice(index, 1)
this.setValue()
},
/*
selectUpload(){
if (this.imgList.length === 10) {
return this.$refs.uToast.show({
......@@ -122,18 +139,6 @@
this.photograph()
this.getWatermark()
},
setTmpValue(values) {
this.imgList = this.imgList.concat(values)
const dataValue = values.map(v => v.key)
this.valueChange(dataValue)
},
setValue() {
const dataValue = []
this.imgList.map(item=>{
dataValue.push(item.src)
})
this.valueChange(dataValue)
},
closeTake(val) {
if(val && val.length > 0){
// val.forEach(item=>{
......@@ -164,16 +169,6 @@
// }
// uploader.qnFileUpload(options)
},
prviewImage(item, index) {
uni.previewImage({
urls: [item.path ? item.path : item.src],
current: index
});
},
delFile(index) {
this.imgList.splice(index, 1)
this.setValue()
},
photograph(){// 获取拍照规范接口
let self = this
let param = {"partnerCompanyId":self.partnerCompanyId,
......@@ -201,7 +196,7 @@
console.log("获取水印备注异常",res.data.message)
}
});
}
}*/
}
}
</script>
......
src/components/upload/index.js
View file @ fb9889fd
......@@ -48,10 +48,11 @@ export default {
async saveToTask(files) {
// 生成key返回，然后把key放到异步上传的任务队列
let lists = files.map(v => {
const key = randomChar(10)
return {
key: randomChar(10),
key: key,
path: v,
src: ''
src: key
}
})
// for (let i = 0; i < files.length; i++) {
......@@ -92,10 +93,11 @@ export default {
tempFilePath: path,
success(e) {
const { savedFilePath } = e
const key = randomChar(10)
const img = {
key: randomChar(10),
key: key,
path: savedFilePath,
src: ''
src: key
}
resolve(img)
},
......
src/pages/order/complete.vue
View file @ fb9889fd
......@@ -11,7 +11,7 @@
<text class="u-line-1">{{item.name}}</text>
</view>
</scroll-view>
<scroll-view :scroll-top="scrollRightTop" scroll-y enhanced scroll-with-animation class="right-box" @scroll="rightScroll">
<scroll-view :scroll-top="scrollRightTop" :enhanced="true" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
<u-form :model="form" ref="uForm">
<template v-for="(groupItem, groupIndex) in (list.length>0?list[tabIndex].items:[])">
<view class="class-item" :key="groupIndex">
......@@ -43,10 +43,19 @@
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""'
@value-change="fieldValueChange">
</xh-select>
<xh-files v-else-if="item.formType==='file'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :partnerCompanyId="partnerCompanyId" :categoryId="categoryId" :value='form[item.fieldsName] || []'
@value-change="fieldValueChange">
</xh-files>
<view v-else-if="item.formType==='file'">
<xh-files
:ref="`fileChild${itemIndex}`"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :partnerCompanyId="partnerCompanyId" :categoryId="categoryId" :value='form[item.fieldsName] || []'
@value-change="fieldValueChange">
<template v-slot>
<view class="img-list">
<u-image class="pic" width="160rpx" height="160rpx" :border-radius="10" @click="selectUpload(JSON.stringify(item), groupIndex, itemIndex)" :src="uploadImage"></u-image>
</view>
</template>
</xh-files>
</view>
<xh-location v-else-if="item.formType==='location'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""'
@value-change="fieldValueChange">
......@@ -100,6 +109,8 @@
</view>
</view>
<u-toast ref="uToast" />
<take-photo v-if="takeStatus" @close="closeTake" :upload="false" :currentItem="currentItemDate"></take-photo>
<u-action-sheet :list="carmeraList" v-model="maskShow" :cancel-btn="true" @click="uploadSelect"></u-action-sheet>
</view>
</template>
<script>
......@@ -117,6 +128,8 @@
import XhServiceMeasure from '@/components/createCom/XhServiceMeasure.vue'
import XhServiceMore from "../../components/createCom/XhServiceMore";
import XhLabel from "../../components/createCom/XhLabel";
import takePhoto from '@/components/take/index.vue'
import baseFile from '@/components/upload/index';
// import XhRadio from '@/components/createCom/XhRadio.vue'
export default {
data() {
......@@ -142,32 +155,6 @@
timer: null, // 定时器
form: { // 一维表单
},
rules: {
name: [{
required: true,
min: 10,
message: '姓名不能为空',
// 可以单个或者同时写两个触发验证方式
trigger: ['change', 'blur'],
}],
mobile: [{
required: true,
min: 10,
message: '姓名不能为空',
// 可以单个或者同时写两个触发验证方式
trigger: ['change', 'blur'],
}, {
// 自定义验证函数，见上说明
validator: (rule, value, callback) => {
// 上面有说，返回true表示校验通过，返回false表示不通过
// this.$u.test.mobile()就是返回true或者false的
return this.$u.test.mobile(value);
},
message: '手机号码不正确',
// 触发器可以同时用blur和change
trigger: ['change', 'blur'],
}]
},
submitBtnStatus: false,
completeCheckStatus: false,
completeCheckResult: [],
......@@ -175,6 +162,18 @@
waitHandlerGroupIndex: 0,
waitHandlerEleIndex: 0,
pass: false,
carmeraList: [
{
text: '相册'
},
{
text: '拍照'
}
],
maskShow: false,
takeStatus: false,
currentItemDate:{},
photoItem: {}
}
},
components: {
......@@ -190,8 +189,10 @@
XhTime,
XhServiceMeasure,
XhServiceMore,
XhLabel
XhLabel,
'take-photo': takePhoto
},
mixins: [baseFile],
created() {
// console.log(allComponents,'allComponents')
},
......@@ -212,7 +213,6 @@
this.getCompleteData()
},
onReady() {
this.$refs.uForm.setRules(this.rules);
// 导航栏滚动切换
this.getMenuItemTop()
},
......@@ -223,6 +223,9 @@
mixingImage() {
return process.uniEnv.qn_base_url + 'mixing.png'
},
uploadImage() {
return process.uniEnv.qn_base_url + 'upload-file.png'
},
buttonStyle() {
return {
'color': '#FFFFFF',
......@@ -566,88 +569,92 @@
})
}
},
// inputType(type) {
// var inputType = ''
// let ty = type.toLocaleLowerCase()
// switch (ty) {
// case 'text':
// inputType = 'textarea'
// break
// case 'password':
// inputType = ty
// break
// case 'decimal':
// case 'number':
// case 'double':
// case 'integer':
// inputType = 'digit'
// break
// case 'textarea':
// default:
// inputType = 'text'
// break
// }
// return inputType
// },
// typeToComponentType(type) {
// // 将fieldType类型统一转换为公共组件判定类型
// let formType = ''
// type = type.toLocaleLowerCase()
// switch (type) {
// case 'text':
// case 'password':
// case 'textarea':
// case 'number':
// case 'decimal':
// case 'double':
// case 'integer':
// formType = 'input'
// break
// case 'multiinput':
// formType = 'multiinput'
// break;
// case 'select':
// case 'specifications':
// formType = 'select'
// break
// case 'radio':
// formType = 'radio'
// break
// case 'checkbox':
// formType = 'checkbox'
// break
// case 'file':
// case 'photos':
// formType = 'file'
// break
// case 'location':
// formType = 'location'
// break
// case 'scan':
// case 'machine_code':
// formType = 'scan'
// break
// case 'picker':
// case 'mutipicker':
// formType = 'picker'
// break
// case 'service_measures':
// formType = 'servicemeasure'
// break
// case 'time':
// case 'date':
// formType = 'time'
// break
// case 'form':
// formType = 'form'
// break
// case 'label':
// formType = 'label'
// break
// }
// return formType
// },
// ------------------------- 以下方法为上传组件相关 -------------------------
// 弹出上传选项
selectUpload(item, groupIndex, itemIndex){
const imgList = this.$refs[`fileChild${itemIndex}`][0].imgList
if (imgList.length === 10) {
return this.$refs.uToast.show({
title: '图片已超出最大数量',
type: 'error',
})
}
this.photoItem = {
...JSON.parse(item),
groupIndex,
itemIndex,
}
// 弹窗展示
this.maskShow = true
},
// 区分上传动作
uploadSelect(index) {
if (index === 0) {
this.uploadFile('photo')
} else {
this.uploadFile()
}
},
// 拍照回调
async closeTake(val) {
if(val && val.length > 0){
const files = val.map(v => v.path)
const value = await this.saveToTask(files)
this.$refs[`fileChild${this.photoItem.itemIndex}`][0].setTmpValue(value)
}
this.takeStatus = false
},
// 上传图片
async uploadFile(type){
const self = this
if(type&&type==='photo'){
// 直接打开相册
let options = {
sourceType:['album'],//['album', 'camera']
count: 3,
sizeType: ['compressed']
}
const value = await this.chooseImg(options)
self.$refs[`fileChild${self.photoItem.itemIndex}`][0].setTmpValue(value)
return
}
// 使用拍照工具拍摄
this.photograph()
this.getWatermark()
},
// 获取拍照规范
photograph(){
let self = this
let param = {"partnerCompanyId":this.partnerCompanyId,
"categoryId":this.categoryId,
"brandId":this.brandId,
"fieldName":this.photoItem.fieldsName}
this.$u.api.orderStandardItem(param).then((res)=>{
if (res.code == 200 && res.data.length>0) {
self.currentItemDate = res.data[0]
}else{
console.log("获取完工项的拍照标准异常",res.data.message)
}
self.takeStatus = true
})
},
// 获取水印
getWatermark(){
if(getApp().globalData.photo.waterSetting){
return
}
var data={partnerCompanyId:this.partnerCompanyId}
this.$u.api.getWatermark(data).then((res) => {
if (res.code == 200) {
getApp().globalData.photo.waterSetting = res.data
} else {
console.log("获取水印备注异常",res.data.message)
}
});
},
// ------------------------- 以上方法为上传组件相关 -------------------------
// ------------------------- 以下方法为展示滚动切换 -------------------------
// 点击左边的栏目切换
async swichMenu(index) {
......@@ -959,4 +966,18 @@
font-size: 32rpx;
font-weight: bold;
}
.img-list {
position: relative;
margin: 8rpx;
width: 160rpx;
height: 160rpx;
.pic{
// margin-right: 15rpx;
// margin-bottom: 15rpx;
&:nth-child(3n){
margin-right: 0;
}
}
}
</style>
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