hz-zhhq-app/pages/visitor-management/visitor-invite.vue

1256 lines
33 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="hzIndex">
<hzHeader title="访客邀约"></hzHeader>
<view class="hzContent">
<view class="main">
<view class="tab-box">
<view class="tab-item" :class="currentTabIndex == 0 ? 'active' : ''" @click="currentTabIndex = 0">访客邀约<view class="activeLine" v-if="currentTabIndex == 0"></view></view>
<view class="tab-item" :class="currentTabIndex == 1 ? 'active' : ''" @click="currentTabIndex = 1">邀约记录<view class="activeLine" v-if="currentTabIndex == 1"></view></view>
</view>
</view>
<view class="content" v-if="currentTabIndex == 0">
<view class="interviewee" style="padding: 20upx;">
<!-- 历史邀请人员 -->
<view style="width: 100%;text-align: right;margin-bottom: 10upx;z-index: 10;position: relative;">
<text style="margin-right: 40upx;" @click="openPopup">选择</text>
<text style="color: #BD1515;margin-right: 50upx;" @click="clearPeople">清空</text>
</view>
<uni-popup ref="popup" type="center" @change="change">
<view class="popup-content">
<view class="history-box" :style="{ 'width': popupWidth + 'px' }">
<view class="head-box">
<text @click="closePopup">取消</text><text>选择历史邀约人员</text><text @click="confirmPeople">确定</text>
</view>
<scroll-view class="scroll-content" scroll-y style="height: 500upx;">
<view class="history-table">
<view class="history-cell" v-for="(item, index) in historyPeople" :key="index" @click="chosenHistoryPeople(index)"
:style="chosenHistoryPeopleIndex == index ? { 'background':'#C1EFEA','fontWeight':'bold','color':'#0DB0A7' } : {}">
<view class="">{{item.PERSONNELNAME}}</view>
<view class="">{{item.PERSONNELPHONE}}</view>
<view class="">{{item.PERSONNELCARD}}</view>
</view>
</view>
</scroll-view>
</view>
</view>
</uni-popup>
<view class="form-box-ud" style="border-radius: 10upx;">
<view class="form-item" v-for="(item, index) in questions" :key="index">
<view>
<text class="label">{{item.title}}</text><text v-if="item.required" style="color: red;">*</text><text>:</text>
</view>
<view class="ipt-box">
<radio-group v-if="item.type=='radius'" @change="changeRadioGroup($event,item.formName)">
<label class="uni-list-cell uni-list-cell-pd radio-group" v-for="(obj, index1) in item.options" :key="index1" >
<view>
<radio color="#4db4ea" :value="obj" :checked="obj==formData[item.formName]" />
</view>
<view>{{obj}}</view>
</label>
</radio-group>
<textarea v-model="formData[item.formName]" v-if="item.type=='textarea'" maxlength="120" :placeholder="item.placeholderText"/>
<view class="img-box" v-if="item.imgName">
<view class="img-item" v-if="formData[item.imgName]">
<image class="remove-btn" @click="removeImg(item.imgName)" src="/static/icons/delete-icon.png" mode=""></image>
<image class="img" :src="img[item.imgName][0].replace(/[\r\n]/g,'')" mode=""></image>
</view>
<view v-else class="img-item upload-btn" @click="chooseImg(item.imgName)" ><image class="img" src="/static/imgs/tianjia-img.png" mode=""></image></view>
</view>
<input v-if="item.type=='text'" v-model="formData[item.formName]" type="text" :maxlength="item.maxlength" :placeholder="item.placeholderText" />
<uni-datetime-picker v-if="item.type=='datetime'" :clear-icon="true" v-model="formData[item.formName]" type="datetime" :start="today" @change="changeTime(item.formName)" :border="false"/>
</view>
</view>
<view class="form-item">
<text class="label">随行人员:</text>
<view class="ipt-box">
<uni-icons type="plus" size="30" color="#209993" style="float: right;margin-right: 20upx;" @click="addRetinue"></uni-icons>
</view>
</view>
<view>
<view v-for="(items, indexs) in retinue" :key="indexs" class="retinueBox">
<view style="margin: 20upx 0upx -30upx 40upx;">
<text>{{indexs+1}}</text>
<uni-icons type="trash" size="24" color="red" style="float: right;margin-right: 40upx;" @click="delRetinue(indexs)"></uni-icons>
</view>
<view class="form-item" >
<view>
<text class="label">姓名</text><text style="color: red;">*</text><text>:</text>
</view>
<view class="ipt-box">
<input v-model="items.name" type="text" maxlength="12" placeholder="随行人员姓名" />
</view>
</view>
<view class="form-item" >
<view>
<text class="label">手机号</text><text style="color: red;">*</text><text>:</text>
</view>
<view class="ipt-box">
<input v-model="items.phone" type="text" maxlength="11" placeholder="随行人员手机号" />
</view>
</view>
<view class="form-item" >
<view>
<text class="label">身份证号</text><text style="color: red;">*</text><text>:</text>
</view>
<view class="ipt-box">
<input v-model="items.ID" type="text" maxlength="20" placeholder="随行人员身份证号" />
</view>
</view>
</view>
</view>
</view>
<view class="form-box" style="border-radius: 10upx;margin-bottom: 20upx;margin-top: 20upx;">
<view class="form-item" >
<text class="label">姓  名:</text>
<view class="ipt-box"><input class="top-t" v-model="formData.userName" placeholder="请输入姓名" type="text" maxlength="50" disabled="true" /></view>
</view>
<view class="form-item" >
<text class="label">联系方式:</text>
<view class="ipt-box"><input class="top-t" v-model="formData.phone" placeholder="请输入联系方式" type="text" maxlength="50" disabled="true" /></view>
</view>
<view class="form-item" >
<text class="label">部  门:</text>
<view class="ipt-box"><input class="top-t" v-model="formData.orgName" placeholder="请输入部门" type="text" maxlength="50" disabled="true" /></view>
</view>
<view class="form-item" >
<text class="label">审批人:</text>
<view class="ipt-box"><input class="top-t" v-model="formData.userName" placeholder="请输入部门" type="text" maxlength="50" disabled="true" /></view>
</view>
</view>
<!-- <view class="form-box" style="border-radius: 10upx;margin-top: 20upx;">
<view class="form-item" >
<text class="label">审批人:</text>
<view class="ipt-box select">
<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
<picker class="picker" v-if="examList.length > 0" :range="examList" @change="changeExamList" range-key="name">
<view>{{ examList[examIndex].name }}</view>
</picker>
</view>
</view>
</view> -->
<!-- <view class="form-box" style="border-radius: 10upx;">
<view class="form-item" >
<text class="label" >审批人:</text>
<view class="ipt-box select">
<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
<picker class="picker" v-if="examList.length > 0" :range="examList" @change="changeExamList" range-key="name">
<view>{{ examList[examIndex].name }}</view>
</picker>
</view>
</view>
</view> -->
</view>
<view class="occupied" style="height: 200upx;"></view>
<view class="footer-btn" @click="submit"><view class="btn">提交</view></view>
</view>
<view v-if="currentTabIndex == 1">
<view class="list-content" v-if="reportList.length > 0">
<view class="details" v-for="(item, i) in reportList" :key="i">
<view class="detail_header" @click="details(item)">
<!-- <text class="blueSign"></text> -->
<image src="/static/img/visitorIcon.png" mode="" style="width: 35upx;height: 40upx;margin-left: 20upx;vertical-align: middle;"></image>
<text class="font-tilte">访客邀约记录</text>
<text v-if="item.EXAMINE_STATE ==0" class="statusred" style="color: #ff9000;background-color: #FFEFE3;" >待审核</text>
<text v-if="item.EXAMINE_STATE ==2" class="statusred" style="color: #BD1515;background-color: #F6DFDF;">已拒绝</text>
<text v-if="item.EXAMINE_STATE ==1" class="statusred" style="color: #0DB0A7;background-color: #C1EFEA;">已通过</text>
</view>
<view class="detail_msg">
<!-- <view class="info-item" @click="details(item)">
<text>出行日期:</text>
<text class="infoSpan">{{item.TRAVEL_DATE.replace("|"," 至 ")}}</text>
</view> -->
<view class="info-item" @click="details(item)">
<text>访客姓名:</text>
<text class="infoSpan">{{item.PERSONNEL_NAME}}</text>
</view>
<view class="info-item" @click="details(item)">
<text>访客电话:</text>
<text class="infoSpan">{{item.PERSONNEL_PHONE}}</text>
</view>
<view class="info-item" @click="details(item)">
<text>预约时间:</text>
<text class="infoSpan">{{ formatDate(item.VISITING_TIME,'dateTime')}}</text>
</view>
<view class="info-item" @click="details(item)">
<text>创建时间:</text>
<text class="infoSpan">{{ formatDate(item.CREATE_TIME,'dateTime')}}</text>
</view>
<!-- <view class="info-item" style="width: 100%;text-align: center;" @click="details(item)">
<text style="width: 100%;color: #4db4ea;">点击查看详情</text>
</view> -->
</view>
</view>
</view>
<content-none v-else :padTop="20"></content-none>
</view>
</view>
<load-more v-if="currentTabIndex == 1" :loadingType="loadingType" :contentText="contentText" style="height: 20vh;"></load-more>
</view>
</template>
<script>
import { addVisitor ,getIssueVisitorByUserId,getVisitorDeptExamineAuth,getHisInvitationByUserId } from '@/common/api.js';
import { callbackRequest,callbackRequestNoLoading, getStorage, alertTip, convertImgToBase64, formatDate,wxSdk,uploadImg } from '@/common/util.js';
import loadMore from '@/components/loadMore.vue';
import contentNone from '@/components/contentNone.vue';
import { pathToBase64 } from '@/js_sdk/mmmm-image-tools/index.js';
export default {
components: {
loadMore,
contentNone
},
data() {
return {
today:new Date().getTime(),
endTime:'',
formatDate: formatDate,
//分页
page: 1,
pageSize: 10,
loadingType: 0, //0-loading前1-loading中2-没有更多了
contentText: {
contentdown: '上拉加载更多',
contentrefresh: '正在加载...',
contentnomore: '没有更多数据了'
},
currentTabIndex:0,
questions:[
{
title:'访客姓名',
formName:'personnelName',
type:'text',
required:true,
requiredText:'请输入访客姓名',
placeholderText:'请输入访客姓名',
maxlength:15,
},
{
title:'联系方式',
formName:'personnelPhone',
type:'text',
required:true,
requiredText:'请输入访客联系方式',
placeholderText:'请输入访客联系方式',
requiredRegexText:'请输入正确的手机号',
requiredRegex:/^1[3-9]\d{9}$/,
maxlength:11,
},
{
title:'身份证号',
formName:'personneCard',
type:'text',
required:true,
requiredText:'请输入访客身份证号',
placeholderText:'请输入访客身份证号',
requiredRegexText:'请输入正确的访客身份证号',
requiredRegex:/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
maxlength:20,
},
{
title:'来访时间',
formName:'visitingTime',
type:'datetime',
required:true,
requiredText:'请选择来访时间',
},
{
title:'结束时间',
formName:'leaveTime',
type:'datetime',
required:true,
requiredText:'请选择结束时间',
},
// {
// title:'来访事由',
// type:'textarea',
// required:true,
// requiredText:'请输入来访事由',
// placeholderText:'请输入来访事由120字内',
// formName:'reason',
// },
// {
// title:'随行人员',
// type:'textarea',
// placeholderText:'请输入随行人员姓名120字内',
// required:false,
// formName:'entourage',
// },
// {
// title:'来访人员身份证照片',
// type:'img',
// required:false,
// show:false,
// // requiredText:'请上传来访人员照片',
// imgName:'personnelPhoto',
// },
],
retinue:[],
img:{
personnelPhoto:[],
},
formData:{
userId: getStorage('userInfo').userId,
userName: getStorage('userInfo').userName,
phone: getStorage('userInfo').telnumber,
orgId: getStorage('userInfo').department_id,
orgName: getStorage('userInfo').departmentName,
personnelName:"",
personneCard:"",
personnelPhone:"",
visitingTime:"",
leaveTime:"",
reason: '',
entourage: '',
personnelPhoto:''
},
reportList:[],
imgs:[],
imgsId:[],
showAlert:false,
submitFlag:true,
examIndex:0,
examList: [],
historyPeople:[],
chosenHistoryPeopleIndex:0,
show:false,
popupWidth:200,
};
},
watch: {
currentTabIndex: function(newVal, oldVal) {
if (newVal ==1) {
this.page = 1;
this.loadingType = 0;
this.dataList();
}else{
}
},
formData: {
handler(newValue,oldValue){
// if(this.formData.travelMethod!='自驾'){
// this.questions[3].required=true;
// }else{
// this.questions[3].required=false;
// }
// if(this.formData.travelMethodBack!='自驾'){
// this.questions[5].required=true;
// }else{
// this.questions[5].required=false;
// }
},
deep:true
}
},
onLoad(option) {
// this.getDeptExamineAuth();
this.getHistoryPeople();
this.currentTabIndex = option.currentTabIndex || 0;
},
onShow() {
if (this.currentTabIndex == 0) {
}else{
this.page = 1;
this.loadingType = 0;
this.dataList();
}
},
methods: {
back(){
uni.navigateBack(1);
},
changeTime(type){
if(type=="visitingTime"){
console.log()
let arr=this.formData.visitingTime.split(" ")
this.formData.leaveTime=arr[0]+" 23:59:59"
console.log(this.formData.leaveTime)
}
},
setDefaultTime() {
const now = new Date();
now.setHours(23, 59, 59, 999); // 设置为当天的最后一秒
this.endTime = this.formatDateTime(now);
console.log(this.endTime)
console.log(this.today)
// this.datetime = this.endTime;
},
formatDateTime(date) {
// 格式化日期时间为字符串以便datetime-picker可以识别
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
},
changeRadioGroup(e,radioData){
this.formData[radioData] = e.detail.value;
// console.log(data);
},
//添加随行人员
addRetinue(){
if(this.retinue.length<12){
let addPeople = {
name:'',
phone:'',
ID:''
}
this.retinue.push(addPeople)
}
},
//删除随行人员
delRetinue(index){
console.log(index)
this.retinue.splice(index,1)
},
//历史邀约人列表
getHistoryPeople(){
let params = {
method: getHisInvitationByUserId,
data: {
userId: getStorage('userInfo').userId,
// departmentId:getStorage('userInfo').deptIdUrl,
}
};
callbackRequest(params).then(res => {
res = res.data;
if (res.returnCode == 1) {
// console.log(res);
this.historyPeople = res.returnData;
} else {
alertTip(res.returnMsg);
}
});
},
//选择按钮-打开弹窗
openPopup(){
var _this = this
uni.getSystemInfo({
success: function (info) {
// console.log('页面宽度:' + info.windowWidth);
_this.popupWidth = info.windowWidth*0.95;
_this.chosenHistoryPeopleIndex = 0;
_this.$refs.popup.open()
}
});
},
closePopup(){
this.$refs.popup.close()
},
chosenHistoryPeople(index){
this.chosenHistoryPeopleIndex = index
},
confirmPeople(){
let peopledata = this.historyPeople[this.chosenHistoryPeopleIndex];
this.formData.personnelName = peopledata.PERSONNELNAME;
this.formData.personnelPhone = peopledata.PERSONNELPHONE;
this.formData.personneCard = peopledata.PERSONNELCARD;
this.$refs.popup.close()
},
clearPeople(){
this.formData.personnelName = '';
this.formData.personnelPhone = '';
this.formData.personneCard = '';
this.formData.visitingTime = '';
this.formData.leaveTime = '';
},
//防滚动穿透
change(e) {
// console.log(e)
this.show = e.show
},
//审批人
getDeptExamineAuth(){
let params = {
method: getVisitorDeptExamineAuth,
data: {
userId: getStorage('userInfo').userId,
departmentId:getStorage('userInfo').deptIdUrl,
}
};
callbackRequest(params).then(res => {
res = res.data;
if (res.returnCode == 1) {
console.log(res);
this.examList = res.returnData;
} else {
alertTip(res.returnMsg);
}
});
},
//记录列表
dataList() {
let params = {
method: getIssueVisitorByUserId,
data: {
// personnelId:getStorage('userInfo').userId,
userId:getStorage('userInfo').userId,
type:"1",
pageNum: this.page,
pageSize: this.pageSize,
}
};
callbackRequest(params).then(res => {
res = res.data;
console.log(res)
if (res.returnCode == 1) {
if (this.page == 1) {
this.reportList = res.returnData || [];
} else {
if (res.returnData.length > 0) {
this.reportList = this.reportList.concat(res.returnData);
this.loadingType = 0;
} else {
this.loadingType = 2;
}
}
} else {
alertTip(res.returnMsg);
}
});
},
verificationRetinue(){
var regex=/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
var regexPhone=/^1[3-9]\d{9}$/;
for(let i=0;i<this.retinue.length;i++){
let obj = this.retinue[i];
console.log(obj)
if(!obj.name){
alertTip('请确认随行人员姓名');
return false;
}
if(!obj.phone){
alertTip('请确认随行人员手机号');
return false;
}
if(!regexPhone.test(obj.phone)){
alertTip('请确认随行人员手机号是否正确');
return false;
}
if(obj.ID==this.formData.personneCard){
alertTip('随行人员中存在受邀人相同身份证号');
return false;
}
if(obj.phone==this.formData.personnelPhone){
alertTip('随行人员中存在受邀人相同手机号');
return false;
}
if(!obj.ID){
alertTip('请确认随行人员身份证号');
return false;
}else{
if(!regex.test(obj.ID)){
alertTip('请确认随行人员身份证号是否正确');
return false;
}
}
}
return true;
},
// 判断对象数组是否有相同属性 相同true \ 不相同false
hasDuplicates(array,type) {
if(type==1){
return array.some((item, index) => {
return (array.findIndex((v, i) => {
return (i !== index &&JSON.stringify(v.phone) === JSON.stringify(item.phone))
}) !== -1
)
})
}
if(type==2){
return array.some((item, index) => {
return (array.findIndex((v, i) => {
return (i !== index &&JSON.stringify(v.ID) === JSON.stringify(item.ID))
}) !== -1
)
})
}
},
//提交
submit() {
if(this.submitFlag){
this.submitFlag = false;
if(!this.verificationForm()){
this.submitFlag = true;
return false;
}
if(!this.verificationRetinue()){
this.submitFlag = true;
return false;
}
if(this.retinue.length>0){
// this.retinue.forEach(item=>{
// console.log(item)
// if(item.ID==this.formData.personneCard){
// alertTip('随行人员中存在受邀人相同身份证号');
// this.submitFlag = true;
// return false;
// }
// if(item.phone==this.formData.personnelPhone){
// alertTip('随行人员中存在受邀人相同手机号');
// this.submitFlag = true;
// return false;
// }
// })
if(this.hasDuplicates(this.retinue,1)){
alertTip('随行人员中存在相同手机号');
this.submitFlag = true;
return false;
}
if(this.hasDuplicates(this.retinue,2)){
alertTip('随行人员中存在相同身份证号');
this.submitFlag = true;
return false;
}
}
const startTimestamp = new Date(this.formData.visitingTime).getTime()
const endTimestamp = new Date(this.formData.leaveTime).getTime()
if(endTimestamp<startTimestamp){
alertTip('结束时间不能早于来访时间');
this.submitFlag = true;
return false;
}
// entourage
this.formData.entourage = this.retinue.map(item=>{return item.name+','+item.phone+','+item.ID;}).join('@')
// console.log(this.formData.entourage)
let params = {
method: addVisitor,
data: {
userId: this.formData.userId,
userName: this.formData.userName,
phone: this.formData.phone,
orgId: this.formData.orgId,
orgName: this.formData.orgName,
personnelId: this.formData.userId,
intervieweeId:'',
visitingTime:this.formData.visitingTime,
leaveTime:this.formData.leaveTime,
personnelName:this.formData.personnelName,
personnelCard:this.formData.personneCard,
personnelPhone:this.formData.personnelPhone,
reason: this.formData.reason,
entourage:this.formData.entourage,
personnelPhoto:this.formData.personnelPhoto,
type:"1",
examinePersonId:this.formData.userId,
examinePersonName:this.formData.userName,
}
};
// console.log(params)
callbackRequest(params).then(res => {
res = res.data;
if (res.returnCode == 1) {
this.submitFlag = true;
alertTip(res.returnMsg);
this.formData={
userId: getStorage('userInfo').userId,
userName: getStorage('userInfo').userName,
phone: getStorage('userInfo').telnumber,
orgId: getStorage('userInfo').department_id,
orgName: getStorage('userInfo').departmentName,
personnelName:"",
personneCard:"",
personnelPhone:"",
visitingTime:"",
leaveTime:"",
entourage:"",
reason: '',
personnelPhoto:'',
};
this.imgs = [];
this.imgsId = [];
this.reportList=[];
setTimeout(_ => {
this.currentTabIndex = 1;
this.imgs = [];
this.imgsId = [];
this.retinue = [];
}, 2000);
} else {
this.submitFlag = true;
alertTip(res.returnMsg);
}
});
}
},
//校验
verificationForm(){
for(let i=0;i<this.questions.length;i++){
let obj = this.questions[i];
if(obj.required){
if(obj.type=='radius'){
if(!this.formData[obj.formName]){
alertTip(obj.requiredText);
return false;
}
}else if(obj.type=='img'){
if(!this.formData[obj.imgName]){
alertTip(obj.requiredText);
return false;
}
}else if(obj.type=='datetime'){
if(this.formData[obj.formName].length==0){
alertTip(obj.requiredText);
return false;
}
}else{
if(!this.formData[obj.formName]){
alertTip(obj.requiredText);
return false;
}else{
if(obj.requiredRegex){
if(!obj.requiredRegex.test(this.formData[obj.formName])){
alertTip(obj.requiredRegexText);
return false;
}
}
}
}
}
}
return true;
},
changeExamList(e){
this.examIndex = e.detail.value;
},
// 详情跳转
details: function(item) {
uni.navigateTo({
url: '/pages/visitor-management/visitor-invite-detail?item=' + JSON.stringify(item)
});
},
async chooseImg(obj) {
let chec = 0;
let sty = [];
let _this = this;
uni.showActionSheet({
itemList:['拍照','相册'],
success:function(resp){
chec = resp.tapIndex;
if (chec == 0) {
sty = ['camera']; //从相册相机选择
} else {
sty = ['album']; //从相册相机选择
}
uni.chooseImage({
count:1,
sizeType: ['compressed'],
sourceType: sty,
quality: 1,
success: async function(res){
let resData = res.tempFilePaths;
for(let i=0;i<resData.length;i++){
console.log(_this.img[obj].length>1,_this.img[obj].length);
if(_this.img[obj].length>1){
break;
}
uni.getImageInfo({
src: resData[i],
success:async (path) => {
convertImgToBase64(path.path, async function(base64) {
if(_this.img[obj].length<1){
// _this.imgs.push(base64);
uni.showLoading({
title: '图片上传中'
})
let blength = base64.length;
let glength = 7500;
if(blength<=glength){
let uploadParam = {
base64: base64,
userId: getStorage('userInfo').userId+i,
groupEnd: '1'
}
await uploadImg(uploadParam).then(resu => {
resu = resu.data ;
uni.hideLoading();
if (resu.returnCode != 1) {
alertTip(resu.returnMsg);
}else{
_this.img[obj].push(base64);
_this.formData[obj]=resu.returnData+".jpg";
console.log(_this.formData[obj])
}
});
}else{
let fnum = parseInt(blength/glength);
for(let j=1;j<fnum+1;j++){
if(j==fnum){
let groupBase = base64.slice((j-1)*glength);
console.log(groupBase.length,"groupBaselength");
let uploadParam = {
base64: groupBase,
userId: getStorage('userInfo').userId+i,
groupEnd: '1'
}
await uploadImg(uploadParam).then(resu => {
resu = resu.data ;
if (resu.returnCode == 1) {
_this.img[obj].push(base64);
_this.formData[obj]=resu.returnData+".jpg";
console.log(_this.formData[obj])
} else {
uni.hideLoading();
alertTip(resu.returnMsg);
return;
}
});
}else{
let groupBase = base64.slice((j-1)*glength,glength*j);
let uploadParam = {
base64: groupBase,
userId: getStorage('userInfo').userId+i,
groupEnd: '0'
}
await uploadImg(uploadParam).then(resu => {
resu = resu.data ;
if (resu.returnCode == 1) {
} else {
uni.hideLoading();
alertTip(resu.returnMsg);
return;
}
});
}
}
uni.hideLoading();
}
}
});
},
});
}
}
});
},
fail:function(resp){
console.log(resp.errMsg);
}
});
},
removeImg(obj) {
this.img[obj] = [];
this.formData[obj]='';
},
},
onReachBottom() {
if (this.loadingType !== 0 || this.currentTabIndex == 0) {
return;
}
this.loadingType = 1;
this.page = this.page + 1;
this.dataList();
},
};
</script>
<style lang="scss">
@import url('../../static/css/repair/malfunction-repair.css');
@import '@/static/css/common.scss';
.history-box{
background-color: #fff;
height: 600upx;
.head-box{
width: 100%;
height: 80upx;
line-height: 80upx;
padding: 10upx 30upx;
border-bottom: 2upx solid #e5e5e5;
display: flex;
justify-content: space-between;
}
.history-table{
width: 100%;
padding: 0upx 20upx;
}
.history-cell{
width: 100%;
height: 100upx;
line-height: 100upx;
padding: 0upx 20upx;
display: flex;
justify-content: space-between;
border-bottom: 2upx solid #e5e5e5;
}
}
.form-box-ud {
background: #fff;
padding-top: 10upx;
padding-bottom: 40upx;
.form-item {
width: 90%;
margin-left:20upx;
overflow: hidden;
// border-bottom: 1px solid #eee;
padding: 30upx 20upx 10upx 20upx;
display: flex;
align-items: center;
border-bottom: 1px solid #e5e5e5;
.label {
width: 150upx;
font-size: 28upx;
color: #333;
font-weight: bold;
line-height: 50upx;
}
.ipt-box {
width: 70%;
margin-left: 40upx;
// margin-top: 20upx;
input {
width: 100%;
height: 70upx;
line-height: 70upx;
font-size: 28upx;
color: #666;
border: 0px solid #e5e5e5;
padding-left: 20upx;
border-radius: 10upx;
// padding: 40upx 20upx;
}
textarea{
width: 100%;
height: 200upx;
font-size: 28upx;
color: #666;
border: 1px solid #e5e5e5;
padding: 20upx;
border-radius: 10upx;
}
.radio-group{
font-size: 26upx;
display: flex;
justify-content: flex-start;
align-items: center;
margin-right: 40upx;
min-width: 140upx;
margin-bottom: 20upx;
}
}
.select {
.arrow {
float: right;
width: 16upx;
height: 29upx;
margin-top: 10upx;
}
.picker {
height: 50upx;
line-height: 50upx;
font-size: 26upx;
color: #666;
margin-left: 10upx;
}
}
}
}
.retinueBox{
margin: 10upx 10upx;
border: 1px solid #e5e5e5;
}
.uni-textarea-textarea{
text-align:left
}
.nolist {
font-size: 30upx;
color: #797979;
text-align: center;
margin-top: 20upx;
}
.main {
margin: 180upx 40upx 0;
position: relative;
z-index: 10;
.tab-box {
overflow: hidden;
// border-radius: 10upx 10upx 0 0;
// background: rgba(132, 149, 167, 0.8);
height: 80upx;
.tab-item {
float: left;
height: 70upx;
width: 30%;
font-size: 30upx;
// color: #e5f6ff;
// text-align: center;
line-height: 70upx;
}
.active {
// background: #fff;
color: #333;
border-radius: 10upx 10upx 0 0;
font-weight: bold;
}
.activeLine{
background: linear-gradient( 90deg, #50CBA1 0%, #06AEA6 100%), #5685F2;
border-radius: 10upx;
width: 80upx;
height: 10upx;
}
}
}
.list-content {
font-size: 28upx;
margin: 0 40rpx;
margin-top: 20upx;
.details {
background: white;
padding: 0 15upx 15upx;
// border-radius: 15upx;
margin-bottom: 20upx;
position: relative;
.detail_header {
border-bottom: #f8f8f8 5upx solid;
height: 100upx;
line-height: 100upx;
// margin: 0;
// border-radius: 10upx;
.blueSign {
height: 28upx;
width: 5upx;
background: #00c277;
display: inline-block;
margin-left: 20upx;
vertical-align: middle;
}
.font-tilte {
font-size: 32upx;
font-weight: bold;
margin-left: 20upx;
vertical-align: middle;
}
}
.detail_msg {
margin-left: 20upx;
border-radius: 10upx;
overflow: hidden;
color: #999999;
view {
height: 60upx;
line-height: 60upx;
}
.status {
position: absolute;
color: red;
margin-left: 580upx;
margin-top: -15upx;
}
}
}
}
.statusgr {
float: right;
margin-right: 30upx;
color: #00c277;
}
.statusred {
width: 160upx;
height: 60upx;
line-height: 60upx;
text-align: center;
border-radius: 50upx;
float: right;
font-size: 24upx;
margin-right: 30upx;
margin-top: 25upx;
}
.img-box {
overflow: hidden;
padding-top: 20rpx;
padding-bottom: 10rpx;
.img-item {
float: left;
width: 200upx;
height: 200upx;
border: 1px solid #ddd;
margin: 0 22rpx 20upx 0upx;
position: relative;
box-sizing: border-box;
.img {
display: block;
width: 100%;
height: 100%;
}
.remove-btn {
position: absolute;
top: -18upx;
right: -18upx;
width: 44upx;
height: 44upx;
z-index: 2;
}
}
.upload-btn {
.img {
width: 60upx;
height: 60upx;
margin: unset;
}
}
}
.detail_msg .info-item {
font-size: 28upx;
margin-right: 30upx;
text {
display: inline-block;
width: 140upx;
color: #999;
}
.infoSpan {
width: auto;
font-size: 28upx;
color: #999999;
float: right;
}
}
.form-box {
background: #fff;
.form-item {
overflow: hidden;
border-bottom: 1px solid #eee;
padding: 30upx 20upx;
.label {
float: left;
width: 150upx;
font-size: 28upx;
color: #333;
font-weight: bold;
line-height: 50upx;
}
.ipt-box {
margin-left: 160upx;
input {
width: 100%;
height: 50upx;
line-height: 50upx;
font-size: 26upx;
color: #666;
}
}
.select {
.arrow {
float: right;
width: 16upx;
height: 29upx;
margin-top: 10upx;
}
.picker {
height: 50upx;
line-height: 50upx;
font-size: 26upx;
color: #666;
margin-left: 10upx;
}
}
}
}
.comment-btn {
float: right;
font-size: 24upx;
border-radius: 10upx;
color: #fff;
// line-height: 30upx;
text-align: center;
min-width: 120upx;
margin-right: 30upx;
background-color: #00c277;
padding:0px 20upx
}
.common-shade{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background: rgba(0,0,0,0.7);
z-index:9999;
}
.box {
display: flex;
display: -webkit-flex;
}
.box-row-reverse {
flex-direction: row;
}
/*上下排列*/
.box-column {
flex-direction: column;
}
/*上下排列*/
.box-left {
justify-content: flex-start;
}
/*居右*/
.box-right {
justify-content: flex-end;
}
/*居左*/
.box-center {
justify-content: center;
}
/*居中*/
.box-between {
justify-content: space-between;
}
/*两端对齐*/
.box-align-center {
align-items: center;
}
.box-wrap {
flex-wrap: wrap;
}
</style>