1.封装的组件dtFrom
<template>
<view id="container_id" class="">
<view class="infoBox1">
<view class="card">
<!-- 下拉选择器 -->
<u-picker :show='isFShow' :closeOnClickOverlay="true" :closeOnClickAction="true" :columns="array"
@close='isFShow=false' @cancel='isFShow=false' @confirm='bindPickerChange' confirmColor="#E02525">
</u-picker>
<u--form :model="dataForm" ref="uForm" :rules="rules">
<view class="" v-for="(item,index) in dataList.forms">
<!-- 文本框 -->
<view class="infoBox" v-if="item.formType === 1">
<u-form-item :label="item.showLabel" :prop="item.column" borderBottom
:required="item.required">
<u--input :placeholder="item.errorDesc" fontSize="28rpx" border="false" clearable
v-model="dataForm[item.column]" :disabled="disabled" disabledColor="#ffffff"
:maxlength="item.column=='cardNo'||item.column=='name'||item.column=='emergencyName'?(item.column=='name'||item.column=='emergencyName'?'8':'20'):'-1'">
</u--input>
</u-form-item>
</view>
<!-- 单选按钮 -->
<view class="infoBox" v-if="item.formType === 2 && item.values.split(',').length<4">
<u-form-item :label="item.showLabel" borderBottom :prop="item.column"
:required="item.required" style="display: flex;">
<u-radio-group slot="right" placement="row" :disabled="disabled" style="display: flex;padding: 20rpx 0rpx;"
v-model="dataForm[item.column]" @change='radioClick'>
<u-radio :customStyle="{marginRight:'8px'}" activeColor="red"
v-for="(ite, ind) in item.values.split(',')" :key="ite" :label="ite"
labelSize='28rpx' :name="ite" @change="radioChange($event,item.column)">
</u-radio>
</u-radio-group>
</u-form-item>
</view>
<!-- 多选 -->
<view class="infoBox" v-if="item.formType === 3">
<u-form-item :label="item.showLabel" :prop="item.column" @click="handleCheckBox(item)"
borderBottom :required="item.required">
<view style="display: flex;">
<text style="text-align: right;"
:class="dataForm[item.column]&&dataForm[item.column]!=null&&dataForm[item.column]!=''&&dataForm[item.column]!=undefined?'':'value'">
{{dataForm[item.column]&&dataForm[item.column]!=null&&dataForm[item.column]!=''&&dataForm[item.column]!=undefined?dataForm[item.column].length>8?`${dataForm[item.column].slice(0,8)}...`:dataForm[item.column]:(item.errorDesc && item.errorDesc!='null' ?item.errorDesc.length>8?`${item.errorDesc.slice(0,8)}...`:item.errorDesc:item.showLabel.length>8?`${item.showLabel.slice(0,8)}...`:item.showLabel)}}
</text>
</view>
<u-icon v-show="!disabled" slot="right" name="arrow-right" size="20"></u-icon>
</u-form-item>
</view>
<!-- 下拉菜单 -->
<view class="infoBox" v-if="item.formType === 4&&!item.values.split(',').length>=4">
<u-form-item :label="item.showLabel" :prop="item.column" @click="handlePicker(item)"
borderBottom :required="item.required">
<view class="">
<u--input v-model="dataForm[item.column]" disabled disabledColor="#ffffff"
:placeholder="item.errorDesc" border="none" fontSize="28rpx"
@focus="btnFlag=false" @blur="btnFlag=true"></u--input>
</view>
<u-icon v-show="!disabled" slot="right" name="arrow-right" size="20"></u-icon>
</u-form-item>
</view>
<view class="infoBox" v-if="item.formType === 4&&item.values.split(',').length>=4&&!disabled">
<u-form-item :label="item.showLabel" borderBottom style="display: flex;" :prop="item.column"
:required="item.required">
<uni-combox :border="false" :candidates="item.values.split(',')"
v-model="dataForm[item.column]" @update:modelValue="handleChangeS($event,item)"
:placeholder="item.errorDesc"></uni-combox>
</u-form-item>
</view>
<!-- 图片 -->
<view class="infoBox" v-if="item.formType === 5||item.formType === 10">
<u-form-item :label="item.showLabel" borderBottom style="display: flex;" :prop="item.column"
@click="checkedIndexClick(item.column,item.formType)" :required="item.required">
<u--input disabled v-if="!dataForm[item.column]" disabledColor="#ffffff"
:placeholder="item.errorDesc" border="none" fontSize="28rpx"></u--input>
<view class="" slot="right" style="flex-direction:unset">
<u-upload :fileList="fileList1[item.column]" @afterRead="afterRead" :deletable="!disabled"
@beforeRead="beforeRead" @delete="deletePic($event,item.column)"
@oversize="oversize" name='1' multiple :maxCount="disabled?0:1" :previewFullImage="disabled?false:true"
:accept="item.formType === 5?'image':'video'" width="60rpx" height="60rpx">
</u-upload>
</view>
</u-form-item>
</view>
<!-- 文件上传 -->
<!-- <view class="infoBox2" v-if="item.formType === 6">
<u-form-item style="display: flex;flex-wrap: wrap;padding: 20rpx 0rpx;" label=" " :prop="item.column"
@click="checkedIndex = item.column">
<uni-file-picker :limit="1" :value="item.labels" file-mediatype="all" mode="grid"
@select="select" @progress="progress" @success="success" @fail="fail"
@delete="deletePicker($event,item.column)">
<view class="upload">
+
</view>
</uni-file-picker>
</u-form-item>
</view> -->
<!-- 时间选择器 -->
<view class="infoBox" v-if="item.formType === 7">
<u-form-item :label="item.showLabel" borderBottom style="display: flex;width: 100%;"
:prop="item.column" :required="item.required" @click="checkedIndex = item.column">
<picker mode="multiSelector" :range="range" :value="dataForm[item.column]"
@change="bindTimeChange($event,item)">
<view class="" style="display: flex;">
<u--input :placeholder="item.errorDesc" disabled disabledColor="#ffffff"
v-model="dataForm[item.column]" style="padding: unset;" border=false
fontSize="28rpx">
</u--input>
<u-icon v-show="!disabled" name="arrow-right" size="20"></u-icon>
</view>
</picker>
</u-form-item>
</view>
<!-- 地址选择器 -->
<view class="infoBox" v-if="item.formType === 8">
<u-form-item style="display: flex;" :label="item.showLabel" borderBottom :prop="item.column"
:required="item.required" @click="checkedIndex = item.column">
<selectCity @changeCitys="changeCity" :disabled="disabled" :placeholder="dataForm[item.column]"
v-if="dataForm[item.column]">
</selectCity>
<selectCity @changeCitys="changeCity" :disabled="disabled" placeholder="请选择地址" v-else></selectCity>
</u-form-item>
</view>
<!-- 生日选择器 -->
<view class="infoBox" v-if="item.formType === 9">
<u-form-item :label="item.showLabel" borderBottom style="display: flex;" :prop="item.column"
:required="item.required">
<picker mode="date" :value="dataForm[item.column]" @change="bindDateChange"
:end="endTime" @click="checkedIndex = item.column">
<view class="" style="display: flex;">
<u--input :placeholder="item.errorDesc" disabled disabledColor="#ffffff"
style="padding: unset;" v-model="dataForm[item.column]" border="false"
fontSize="28rpx">
</u--input>
<u-icon v-show="!disabled" name="arrow-right" size="20"></u-icon>
</view>
</picker>
</u-form-item>
</view>
</view>
</u--form>
</view>
</view>
<u-popup :show="checkBoxVis" overlayOpacity='0.1' :round="24" @close="checkBoxC" @open="checkBoxO">
<view class="showCheckBox">
<view class="btn">
<text @click="checkBoxC()">取消</text>
<text @click="checkboxOk(checkBoxList)">确定</text>
</view>
<view class="title">
{{checkBoxList.showLabel}}
</view>
<view style='display: flex;flex-wrap: wrap;margin: 0 26rpx 40rpx 26rpx;'>
<view class="checkbox" v-for="(ite, ind) in checkBoxList.values"
@click='checkboxChange(ite,checkBoxList)'>
<view style="margin-top: 2rpx;">
<image v-if="!ite.checked" src="../../project/static/check.png" mode=""></image>
<image v-else src="../../project/static/checked.png" mode=""></image>
</view>
<text>{{ite.name}}</text>
</view>
</view>
</view>
</u-popup>
<view v-if="tempVideoUrl||tempImgUrl" class="mask" @tap.stop="tempVideoUrl = '',tempImgUrl=''">
<view class="" style="position: fixed;top: 20rpx;right: 20rpx;" @click="tempVideoUrl = '',tempImgUrl=''">
<u-icon name="close" color="#fff"></u-icon>
</view>
<view class="block" @tap.stop :style="{width:tempVideoUrl?'100%':''}">
<video v-if="tempVideoUrl" :src="tempVideoUrl" class="temp"
:poster="`${tempVideoUrl}?ci-process=snapshot&time=1&format=jpg`">
</video>
<img v-else :src="tempImgUrl" class="temp" alt="">
</view>
</view>
</view>
</template>
<script>
import selectCity from '../../components/biaofun-region/biaofun-region.vue'
import {
validateIdentityCard,
getIdentityCardBirthDay,
getIdentityCardGender
} from '../../payList/utils/index.js'
export default {
components: {
selectCity,
},
// props: {
// flag: [String, Boolean]
// },
data() {
return {
id: '',
lis: {},
scrollTop: 0,
old: {
scrollTop: 0
},
radio: false,
Formdata: [],
Infodata: [],
array: [],
dataForm: {},
rules: {},
isFShow: false,
count: 3,
timer: '',
contents: '',
fileList1: {},
matchId: '',
endTime: "",
checkedIndex: '',
a: 'hhhhhhh',
checkBoxVis: false,
checkBoxList: [],
flag: true,
content: "",
dataList: [],
range: [
[],
[],
[]
],
disabled: null,
tempVideoUrl: '',
tempImgUrl:''
}
},
onShow() {
this.endTime = uni.$u.timeFormat(uni.getStorageSync('currentTime'), 'yyyy-mm-dd');
},
mounted() {
this.getRange(23, 0)
this.getRange(59, 1)
this.getRange(59, 2)
// window.getcompletionMaterials = this.getcompletionMaterials
},
methods: {
clickPreview(url, lists, name){
console.log(url, lists, name)
},
getRange(max, o) {
for (let i = 0, len = max; i <= max; i++) {
i = i <= 9 ? '0' + i : i
this.range[o].push(i)
}
},
getList(res, disabled) {
// disabled为true禁止修改表单
// this.$http.api.index_line_entries(id).then(async res => {
// if (res.code == 200) {
this.disabled=disabled
console.log(res, disabled, '=============')
this.endTime = uni.$u.timeFormat(uni.getStorageSync('currentTime'), 'yyyy-mm-dd');
this.dataList = res.data
this.getRules(res)
console.log(this.dataForm)
this.dataForm?.saveDc?.map(item => {
res.data.forms?.map(records => {
// console.log('&&&&&&',records,item)
if (records.id === item.formId) {
this.dataForm[records.column] = item.value
}
})
})
let list = []
res.data.forms?.map(item => {
list.push({
...item,
label: '',
flag: false
})
})
res.data.forms = list
res.data.forms.map(item => {
Object.keys(this.dataForm).map(ite => {
if (item.column == ite) {
item.label = this.dataForm[item.column]
}
})
})
console.log('forms:', res.data.forms)
res.data.forms.map(item => {
if (item.formType === 3) {
console.log(item, '--------------')
// this.handleBCShow(item)
item.checkboxValue = []
item.values.split(',').map((ite, ind) => {
item.checkboxValue.push({
name: ite,
checked: false
})
item.label?.split(',').map((i, j) => {
if (ite === i) {
item.checkboxValue[ind].checked = true
}
})
})
item.values = item.checkboxValue
}
})
console.log(res.data.forms)
this.dataList = res.data
this.itemList(res)
},
//编辑页面数据请求
itemList(res) {
res.data.saveDc = res.data.saveDc ? JSON.parse(res.data.saveDc.replace(/\'/g, "\"")) : [],
res.data.height = res.data.height + ''
res.data.weight = res.data.weight + ''
this.dataForm = res.data
this.dataForm?.saveDc?.map(item => {
this.dataList.forms?.map(records => {
// console.log(item,records)
if (records.id === item.formId) {
this.dataForm[records.column] = item.value
}
})
})
this.dataList.forms.forEach(item => {
if ([5, 10].includes(item.formType)) {
// console.log(this.dataForm[item.column])
if (this.dataForm[item.column]) {
// console.log(this.dataForm[item.column].split(',').length)
if (this.dataForm[item.column].split(',').length > 1) {
let arr = this.dataForm[item.column].split(',').map(i => {
return {
url: i
}
})
this.fileList1[item.column] = [...arr]
} else {
this.fileList1[item.column] = [{
url: this.dataForm[item.column]
}]
}
}
}
})
this.dataList?.forms?.forEach(item => {
if (item.formType == 3) {
item.values.map(i => {
if (this.dataForm[item.column]?.split(',').includes(i.name)) {
i.checked = true
}
})
console.log(item)
}
//文件
if (item.formType == 6) {
if (this.dataForm[item.column]) {
item.labels = [{
name: 'file',
url: this.dataForm[item.column]
}]
}
}
if (item.formType == 4 || item.formType == 2) {
// console.log(this.dataForm[item.column])
// console.log(item.values.split(',')?.indexOf(this.dataForm[item.column]?.toString())==-1)
if (item.values.split(',')?.indexOf(this.dataForm[item.column]?.toString()) == -1) {
this.dataForm[item.column] = ''
}
}
})
this.$forceUpdate()
},
getcompletionMaterials(data) {
let imagedata = JSON.parse(data)
this.fileList1[this.checkedIndex] = [...this.fileList1[this.checkedIndex], {
url: imagedata.imageUrl
}]
if (this.dataForm[this.checkedIndex]) {
this.dataForm[this.checkedIndex] = this.dataForm[this.checkedIndex] +
',' + imagedata.imageUrl
} else {
this.dataForm[this.checkedIndex] = imagedata.imageUrl
}
this.$forceUpdate()
},
checkedIndexClick(i, type) {
console.log(i,type)
this.checkedIndex = i
if (!this.fileList1[i]) {
this.fileList1[i] = []
}else{
if(type==10&&this.fileList1.video.length){
this.tempVideoUrl=this.fileList1[i][0].url
}else{
this.tempImgUrl=this.fileList1[i][0].url
}
}
// console.log(i, type,this.fileList1[this.checkedIndex].length<2)
let u = navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // Android
this.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
if (isAndroid && uni.getStorageSync('isapp') && this.fileList1[this.checkedIndex] && this.fileList1[
this.checkedIndex]?.length < 1&&!this.disabled) {
// 这个是安卓操作系统
try {
let sendData = {
column: i,
formType: type
}
window.android.addImage(JSON.stringify(sendData));
} catch (error) {
console.log(error);
}
} else {
if (!this.fileList1[i]) {
this.fileList1[i] = []
}
}
},
//文件大小超出限制
oversize() {
uni.showToast({
title: "图片最大不能超过10M",
icon: 'none'
})
},
handleCheckBox(records) {
if(!this.disabled){
this.checkBoxVis = true
this.checkBoxList = JSON.parse(JSON.stringify(records))
console.log(this.checkBoxList)
}
},
checkBoxC() {
this.checkBoxVis = false
this.checkBoxList = {}
},
checkBoxO() {},
checkboxOk(records) {
let arr = []
records.values.map(item => {
if (item.checked) {
arr.push(item.name)
}
})
console.log('arr:', arr)
this.dataForm[records.column] = arr.toString()
this.dataList.forms.map(item => {
if (item.column == records.column) {
item.values = records.values
}
})
this.checkBoxVis = false
this.checkBoxList = {}
this.$forceUpdate()
},
// 多选
checkboxChange(n, records) {
console.log('change', n, records);
n.checked = !n.checked
this.$forceUpdate()
},
submit() {
//确定开始校验
// console.log('this.dataForm:', this.dataForm)
if (this.dataList.forms.length) {
this.$refs.uForm.validate().then(res => {
// uni.$u.toast('校验通过')
let arr = {
id: this.dataForm.id ? this.dataForm.id : ''
}
let saveDc = []
// console.log(this.dataForm)
if (!this.disabled) {
this.dataList.forms.map(item => {
if (item.required) {
if (item.column === 'emergencyMobile') {
if (this.dataForm.emergencyMobile === this.dataForm.mobilePhone) {
item.flag = true
this.$msg('紧急联系电话不能与本人手机号码一致')
item.label = '紧急联系电话不能与本人手机号码一致'
} else {
item.flag = false
}
}
if (item.column === 'emergencyName') {
if (this.dataForm.emergencyName === this.dataForm.name) {
item.flag = true
this.$msg('紧急联系人姓名不能与本人姓名一致')
item.label = '紧急联系人姓名不能与本人姓名一致'
} else {
item.flag = false
}
}
// if (item.column === 'gender') {
// if (this.dataList.gender == 1 && this.dataForm.gender !== '男') {
// item.flag = true
// this.$msg('该项目仅限男性')
// } else if (this.dataList.gender == 2 && this.dataForm.gender !== '女') {
// item.flag = true
// this.$msg('该项目仅限女性')
// } else {
// item.flag = false
// }
// }
if (item.column === 'cardNo') {
if (this.dataForm.cardType == '身份证') {
if (!validateIdentityCard(this.dataForm.cardNo)) {
item.flag = true
this.$msg('证件号输入不正确')
} else if (getIdentityCardGender(this.dataForm.cardNo) !== this
.dataForm.gender) {
item.flag = true
this.$msg('证件号性别与所选性别不一致')
} else {
item.flag = false
}
} else {
let cardZz = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]*$/
let cardZz1 = /^[0-9]*$/
if (cardZz.test(this.dataForm.cardNo) || cardZz1.test(this
.dataForm
.cardNo)) {
item.flag = false
} else {
item.flag = true
this.$msg('证件号输入不正确')
}
}
}
if (item.column === 'birthday') {
if (item.column === 'birthday' && this.dataForm.cardType ==
'身份证' &&
this
.dataForm !== '' && this.dataForm.birthday !== '') {
let birthday = getIdentityCardBirthDay(this.dataForm.cardNo)
// console.log(birthday)
if (birthday !== this.dataForm.birthday) {
item.flag = true
this.$msg('出生日期和身份证号上不一致')
} else {
item.flag = false
}
} else {
// this.dataForm.birthday = `${this.dataForm.birthday} 00:00:00`
// let ar = new Date(this.dataForm.birthday).getTime()
// let enrollMaxAge = new Date(this.dataList.enrollMaxAge).getTime()
// let enrollMinAge = new Date(this.dataList.enrollMinAge).getTime()
// // console.log(ar, enrollMaxAge, enrollMinAge)
// // console.log(ar < enrollMaxAge, ar > enrollMinAge)
// if (ar < enrollMaxAge || ar > enrollMinAge) {
// // console.log('---------------')
// // this.dataForm.birthday=null
// this.$msg(
// `出生日期范围${this.dataList.enrollMaxAge}到${this.dataList.enrollMinAge}`
// )
// item.flag = true
// } else {
// item.flag = false
// }
}
}
}
})
let flag = true
flag = this.dataList.forms.some(i => i.flag == true)
// console.log(flag)
if (!flag) {
this.editSubmit()
}
}
}).catch(errors => {
console.log(errors)
uni.$u.toast('请正确输入报名人信息')
})
} else {
if (!this.disabled) {
uni.$emit('goFillOrder', [], this.dataForm)
}
}
},
editSubmit() {
let issaveDc = []
this.dataList.forms.map(item => {
// if (!item.baseForm) {
issaveDc.push({
'formId': item.id,
'column': item.column,
'label': item.showLabel,
'value': this.dataForm[item.column] ? this.dataForm[item.column] : ''
})
// }
})
console.log('6666', issaveDc)
uni.$emit('goFillOrder', issaveDc, this.dataForm)
},
getRules(res) {
res.data.forms?.forEach(item => {
if (item.formCheck && item.formType == 1) {
this.dataForm[item.column] = ""
item.pattern = `/${item.pattern}/g`
// console.log(item.pattern)
this.rules[item.column] = [{
required: item.required,
message: `${item.showLabel}不能为空`,
// blur和change事件触发检验
trigger: ['blur', 'change'],
},
{
pattern: eval(item.pattern),
transform(value) {
// console.log(value)
return String(value)
},
message: item.errorDesc,
trigger: ['blur', 'change'],
},
]
} else {
this.dataForm[item.column] = ""
this.rules[item.column] = [{
required: item.required,
message: `${item.showLabel}不能为空`,
trigger: ['blur', 'change']
}]
}
})
this.$refs.uForm.setRules(this.rules)
},
handlePicker(records) {
if(!this.disabled){
this.checkedIndex = records.column
let arr = []
records.values && records.values.split(',').map(item => {
arr.push(item)
})
this.array = [arr]
this.isFShow = true
}
},
bindPickerChange(e) {
// console.log(e.value[0])
this.dataForm[this.checkedIndex] = e.value[0]
this.isFShow = false
// this.array
},
//时间选择器--7
// bindTimeChange(e, records) {
// this.dataForm[this.checkedIndex] = e.target.value
// this.$forceUpdate()
// },
bindTimeChange(e, records) {
// console.log(e)
e.target.value[0] = e.target.value[0] <= 9 ? '0' + e.target.value[0] : e.target.value[0]
e.target.value[1] = e.target.value[1] <= 9 ? '0' + e.target.value[1] : e.target.value[1]
e.target.value[2] = e.target.value[2] <= 9 ? '0' + e.target.value[2] : e.target.value[2]
this.dataForm[this.checkedIndex] = e.target.value[0] + ':' + e.target.value[1] + ':' + e.target.value[2]
// this.lis.username = e.target.value
this.$forceUpdate()
},
// 地址选择器--8
changeCity(vl) {
this.dataForm[this.checkedIndex] = vl[1] && vl[2] ? `${vl[0].name} ${vl[1]?.name} ${vl[2]?.name}` :
`${vl[0].name}`
this.$forceUpdate()
},
//生日选择器--9
bindDateChange(e) {
console.log(e.target.value)
// this.$set(this.dataForm,this.checkedIndex,e.target.value)
this.dataForm[this.checkedIndex] = e.target.value
this.$forceUpdate();
},
radioChange(n, j) {
// console.log('n:', n)
},
radioClick(item) {
// console.log(item)
},
upper: function(e) {
// console.log(e)
},
lower: function(e) {
// console.log(e)
},
scroll: function(e) {
// console.log(e)
this.old.scrollTop = e.detail.scrollTop
},
open() {},
handleSign(id) {
uni.navigateTo({
url: `/project/order/order?id=${id}`
})
},
// 删除图片
deletePic(event, i) {
this.checkedIndex = i
// console.log(event)
// console.log(this.fileList1[this.checkedIndex])
// this.fileList1[this.checkedIndex]=this.fileList1[this.checkedIndex].splice(event.index,1)
this.fileList1[this.checkedIndex] = this.fileList1[this.checkedIndex].filter(item => {
return item.url !== event.file.url
})
// this[`fileList${event.name}`].splice(event.index, 1)
this.dataForm[this.checkedIndex] = this.dataForm[this.checkedIndex].split(',')
this.dataForm[this.checkedIndex].splice(event.index, 1)
this.dataForm[this.checkedIndex] = this.dataForm[this.checkedIndex].join(',')
this.$forceUpdate()
},
beforeRead() {
},
// 新增图片/视频
async afterRead(event) {
if (event.file[0].size > 1024 * 1024 * 10) {
uni.showToast({
title: '最大上传10MB',
icon: 'error',
});
return;
} else {
const result = await this.uploadFilePromise(event.file[0].url)
// let fileListLen = 1
this.fileList1[this.checkedIndex] = [...this.fileList1[this.checkedIndex], {
url: result
}]
}
this.$forceUpdate()
},
uploadFilePromise(url) {
uni.showLoading({
title: '上传中',
mask: true
})
// console.log(url)
let getbaseUrl = this.$http.api.getbase_Url()
let token = uni.getStorageSync("token")
return new Promise((resolve, reject) => {
let a = uni.uploadFile({
// url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
url: `${getbaseUrl}/api-fe/api-file/upload/aliyun`, //真实的接口地址
filePath: url,
name: 'file',
formData: {
'file': url
},
header: {
'domain-scope': 'www.marathonbm.com',
// "Content-Type": "multipart/form-data",
'Authorization': token ? `Bearer ${token}` : ''
},
success: (res) => {
// console.log(res)
var data = JSON.parse(res.data)
// console.log(data, 'resresresresresresres');
if (this.dataForm[this.checkedIndex]) {
this.dataForm[this.checkedIndex] = this.dataForm[this.checkedIndex] +
',' + data.data.reqUrl
} else {
this.dataForm[this.checkedIndex] = data.data.reqUrl
}
// console.log('ww', data.data.reqUrl)
uni.hideLoading();
resolve(data.data.reqUrl)
this.$forceUpdate()
},
fail() {
// console.log('6666666666')
}
});
})
},
}
}
</script>
<style lang="scss" scoped>
page {
background-color: $uni-bg-color-background;
}
.uni-input-placeholder{
text-align: right;
color: #cccccc;
}
.mask {
background-color: #000;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99;
}
.mask .block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
// width: 100%;
uni-video{
width: 100%;
}
img{
width: 100%;
height: 100%;
}
}
.container {
// height: 100vh;
height: 100%;
background: #f4f5f6;
}
.u-form-item {
width: 100%;
position: relative;
}
::v-deep .u-upload__button {
margin: unset;
}
::v-deep .u-form-item__body__right__content__slot {
display: flex;
flex-direction: row-reverse;
align-items: center;
}
::v-deep .u-form-item__body__right__message {
position: absolute;
left: -92rpx;
bottom: 2rpx;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 100%;
}
::v-deep .u-upload__wrap__preview__other {
width: 60rpx !important;
height: 60rpx !important;
}
::v-deep .u-upload__wrap__preview__image {
width: 60rpx !important;
height: 60rpx !important;
}
::v-deep .u-input {
padding: unset !important;
}
::v-deep .uni-combox {
width: 100%;
}
::v-deep .uni-combox__input {
text-align: end;
}
::v-deep .uni-combox__input-plac {
color: rgb(192, 196, 204);
}
::v-deep .uicon-movie {
font-size: 36rpx !important;
line-height: 30rpx !important;
top: 34rpx !important;
}
::v-deep .u-upload__wrap {
align-items: center;
}
::v-deep .u-form-item__body__left__content__required {
top: 26rpx
}
::v-deep .u-upload__wrap__preview {
margin: unset;
}
::v-deep .content {
text-align: right;
}
::v-deep .u-form-item__body__left {
width: unset !important;
}
::v-deep .u-form-item__body {
padding: unset !important;
}
::v-deep .u-form-item__body__right__content__slot {
width: 100%;
justify-content: end;
}
::v-deep .input-placeholder {
text-align: right;
}
::v-deep .uni-input-input {
text-align: right !important;
// width: 10rpx !important;
}
::v-deep .u-form-item__body__left__content__label {
max-width: 280rpx !important;
display: block !important;
flex-wrap: wrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: 28rpx !important;
}
.value {
color: #c0c4cc !important;
display: block;
text-align: right;
// flex-wrap: wrap !important;
// overflow: hidden !important;
// text-overflow:ellipsis !important;
// white-space: nowrap!important;
}
.showCheckBox {
.btn {
border-top-left-radius: 48rpx;
border-top-right-radius: 48rpx;
height: 118rpx;
display: flex;
line-height: 118rpx;
font-size: 36rpx;
border: 2rpx solid #f4f5f7;
justify-content: space-between;
padding: 0 80rpx;
}
.title {
margin-top: 32rpx;
font-size: 28rpx;
padding: 0 46rpx;
margin-bottom: 20rpx;
}
.checkbox {
display: flex;
margin: 0 30rpx 32rpx 30rpx;
image {
width: 36rpx;
height: 36rpx;
margin-right: 20rpx;
}
}
}
.card {
background-color: #fff;
// margin-bottom: 20rpx;
}
.scroll-Y {
// height: 720rpx;
// height: 100%;
padding-bottom: 660rpx;
}
.Dbox {
margin-bottom: 20rpx;
}
.popup {
position: relative;
// width: 100%;
height: 90%;
padding: 0rpx 32rpx;
#text {
height: 82%;
// width: 96%;
// margin: 0 14rpx;
}
.headerTitle {
font-size: 40rpx;
font-weight: 700;
text-align: center;
margin: 30rpx 0;
color: #333333;
line-height: 60rpx;
letter-spacing: 0.02rpx;
}
.btn {
position: absolute;
height: 94rpx;
background: #fff;
bottom: -50rpx;
left: 4rpx;
.button {
width: 606rpx;
height: 88rpx;
margin: 10rpx 28rpx;
font-size: 28rpx;
text-align: center;
line-height: 88rpx;
color: #fff;
background: #e02525;
border-radius: 8rpx;
}
.buttons {
margin: 10rpx 28rpx;
width: 606rpx;
height: 88rpx;
font-size: 28rpx;
color: #fff;
text-align: center;
line-height: 88rpx;
opacity: 0.3;
background: #e02525;
border-radius: 8rpx;
}
}
}
.btn {
display: flex;
justify-content: center;
button {
width: 246rpx;
height: 88rpx;
line-height: 88rpx;
border-radius: 10rpx;
}
button:nth-child(1) {
font-size: 30rpx;
background: #e7e8ea;
margin-right: 40rpx;
}
button:nth-child(2) {
font-size: 30rpx;
background: #e02525;
color: #fff;
}
}
.infoBox1 {
// display: flex;
// justify-content: space-between;
// margin-top: 20rpx;
background: #ffffff;
// margin: 0 26rpx;
border-radius: 6rpx;
padding: 0 20rpx;
// position: fixed;
// bottom: 0rpx;
// left: 0rpx;
width: -webkit-fill-available;
// position: relative;
.ren {
padding: 10rpx 16rpx;
background-color: #f3f4f5;
border-radius: 6rpx;
margin: 10rpx;
display: inline-block;
}
}
.upload {
width: 60rpx;
height: 60rpx;
background: #ffffff;
border: 2rpx dashed #e7e8ea;
border-radius: 6rpx;
text-align: center;
color: #e7e8ea;
font-size: 60rpx;
line-height: 60rpx;
}
.infoBox {
display: flex;
align-items: center;
// flex-wrap: wrap;
// height: 80rpx;
width: 95%;
line-height: 80rpx;
font-size: 28rpx !important;
border-radius: 6rpx;
background: #fff;
margin: 0 14rpx;
// margin-top: 10rpx;
// padding: 0 26rpx 0rpx 0rpx;
}
.infoBox2 {
display: flex;
align-items: center;
// height: 80rpx;
width: 90%;
line-height: 80rpx;
font-size: 20rpx !important;
border-radius: 6rpx;
background: #fff;
margin: 0 26rpx;
// margin-top: 20rpx;
padding: 0 26rpx 0rpx 0rpx;
.checkbox {
display: flex;
margin: 15rpx 0;
margin-right: 70rpx;
image {
width: 36rpx;
height: 36rpx;
line-height: 36rpx;
margin-right: 20rpx;
}
::v-deep uni-image {
vertical-align: unset
}
}
}
.infoBoxs {
// display: flex;
// justify-content: space-between;
margin-top: 20rpx;
min-height: 252rpx;
background: #ffffff;
margin: 0 26rpx;
border-radius: 24rpx;
position: relative;
.check {
display: flex;
align-items: center;
padding-top: 40rpx;
.imag {
// width: 36rpx;
height: 34rpx;
margin-left: 52rpx;
}
}
image {
width: 100%;
height: 40rpx;
margin-bottom: 10rpx;
}
.image {
height: 192rpx;
width: 204rpx;
position: absolute;
right: 40rpx;
top: 30rpx;
}
.title {
// margin: 0 30rpx;
// padding-top: 30rpx;
font-size: 40rpx;
font-weight: 700;
color: #333333;
letter-spacing: 0.02rpx;
// margin-bottom: 10rpx;
}
.remark {
margin-left: 52rpx;
font-size: 24rpx;
color: #333333;
padding-bottom: 20rpx;
margin-top: 10rpx;
// padding-bottom: 74rpx;
}
}
</style>
2.页面引入使用组件
<template>
<view class="card" v-show="lis.beforeSaveDc&&lis.beforeForms.length&&lis.hasBeforeForms==1" >
<view class="title">
报名人信息
</view>
<dtForm :flag="flag2" ref="refdtform"></dtForm>
</view>
<!-- 动态表单 -->
<view class="card">
<dtForm :flag="flag" ref="refdtforms"></dtForm>
</view>
</template>
<script>
import dtForm from '../../components/dtForm/dtForm.vue'
export default {
components: {
dtForm
},
}
methods:{
onShow() {
uni.$on('goFillOrder', this.goFillOrder)
},
onHide() {
uni.$off('goFillOrder')
},
getList(){
this.$http.api.index_activity_evaluation(e).then(res => {
this.lis = res.data
// this.dataList=JSON.parse(JSON.stringify(res))
if (res.data.hasBeforeForms == 1&&res.data.beforeSaveDc) {
//1.不能修改表单数据只是显示
res.data.beforeForms.map(item=>{
item.formCheck=false
item.required=false
})
this.dataList.data.forms = res.data.beforeForms
this.dataList.data.saveDc = res.data.beforeSaveDc
this.$refs.refdtform.getList(this.dataList,true)
}}
2.可以修改表单数据
this.$refs.refdtforms.getList(res,false)
}，
//接受组件传来的数据
goFillOrder(issaveDc, dataForm) {
console.log(issaveDc, dataForm)
let img = []
this.fileList3.map(item => {
img.push(item.url)
})
let vio = []
this.fileList2.map(item => {
vio.push(item.url)
})
// console.log('提交', this.lis, this.fileList2, this.fileList3)
this.$http.api.index_activity_addEvaluation({
...this.lis,
picture: img.toString(),
video: vio.toString(),
saveDc: JSON.stringify(issaveDc),
}).then(res => {
if (res.code == 200) {
uni.navigateBack()
}
})
},
}
</script>
544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
