填写日志bug

This commit is contained in:
shijingjing
2022-10-27 10:04:10 +08:00
parent 7f1ab4e039
commit d1e2853b6e
3 changed files with 412 additions and 380 deletions

View File

@@ -169,10 +169,8 @@ export default {
}&partyOrgId=${this.user.partyOrgId}&size=${10000}`
)
.then((res) => {
if (res.code == 0) {
if (res.data.records == null) {
this.list = [];
} else {
if (res?.data) {
if (res.data?.records) {
this.list = res.data.records;
}
}

View File

@@ -1,394 +1,423 @@
<template>
<view class="page">
<header></header>
<view class="form">
<view class="main">
<div class="textarea">
<div class="color-333"><span class="color-red">*</span>活动总结</div>
<textarea type="textarea" placeholder="填写本次活动参与心得体会200字以内" v-model="baseInfo.content" adjust-position="false" maxlength="200"></textarea>
</div>
<view class="uni-uploader">
<view class="title-box title-box-margin">
<text class="title">活动照片最多9张</text>
</view>
<view class="uni-uploader-body">
<view class="uni-uploader__files">
<block v-for="(image,index) in imageList" :key="index">
<view class="uni-uploader__file">
<image class="uni-uploader__img" :src="image.accessUrl" :data-index="index" @tap="previewImage"></image>
<AiUniIcon type="clear" class="icon" color="#8f8f94" size="20" @click="deleteImage(index)"></AiUniIcon>
</view>
</block>
<view class="pre-view" @tap="chooseImageType" v-if="imageList.length < 9">
<text class="pre-label">+</text>
<text class="add-image">添加照片</text>
</view>
</view>
</view>
</view>
</view>
<view class="page">
<header></header>
<view class="form">
<view class="main">
<div class="textarea">
<div class="color-333"><span class="color-red">*</span>活动总结</div>
<textarea
type="textarea"
placeholder="填写本次活动参与心得体会200字以内"
v-model="baseInfo.content"
adjust-position="false"
maxlength="200"
></textarea>
</div>
<view class="uni-uploader">
<view class="title-box title-box-margin">
<text class="title">活动照片最多9张</text>
</view>
<view class="uni-uploader-body">
<view class="uni-uploader__files">
<block v-for="(image, index) in imageList" :key="index">
<view class="uni-uploader__file">
<image
class="uni-uploader__img"
:src="image.accessUrl"
:data-index="index"
@tap="previewImage"
></image>
<AiUniIcon
type="clear"
class="icon"
color="#8f8f94"
size="20"
@click="deleteImage(index)"
></AiUniIcon>
</view>
</block>
<view
class="pre-view"
@tap="chooseImageType"
v-if="imageList.length < 9"
>
<text class="pre-label">+</text>
<text class="add-image">添加照片</text>
</view>
</view>
</view>
</view>
<view class="report" @click="report()">提交</view>
</view>
</view>
<view class="report" @click="report()">提交</view>
</view>
</template>
<script>
import axios from "@/utils/axios.js"
export default {
name:"fillLog",
data(){
return{
reportId:'',
baseInfo:{
content:'',
fileIds:[],
reportId:'',
id:''
},
imageList:[],
sourceTypeIndex: 2,
sourceType:[ // 图片来源类型
['camera'],
['album'],
],
}
import settings from "@/utils/config"
import {mapState} from 'vuex'
export default {
name: "fillLog",
data() {
return {
reportId: "",
baseInfo: {
content: "",
fileIds: [],
reportId: "",
id: "",
},
imageList: [],
sourceTypeIndex: 2,
sourceType: [
// 图片来源类型
["camera"],
["album"],
],
};
},
onLoad(options) {
uni.setNavigationBarColor({
frontColor: "#ffffff",
backgroundColor: "#e60012",
});
this.baseInfo.reportId = options.reportId;
this.baseInfo.id = options.signupId;
options.signupContent ? this.logReport() : null;
},
computed: {
...mapState(['user']),
},
methods: {
// 选择照片类型
chooseImageType() {
let that = this;
uni.showActionSheet({
itemList: ["拍照", "从相册选择"],
success: function (res) {
that.sourceTypeIndex = res.tapIndex;
that.chooseImage();
},
onLoad(options){
uni.setNavigationBarColor({
frontColor: "#ffffff",
backgroundColor: "#e60012",
})
this.baseInfo.reportId= options.reportId;
this.baseInfo.id= options.signupId;
options.signupContent?this.logReport():null ;
},
methods:{
// 选择照片类型
chooseImageType(){
let that = this
uni.showActionSheet({
itemList:['拍照','从相册选择'],
success: function(res){
that.sourceTypeIndex = res.tapIndex
that.chooseImage()
}
})
},
showModel(title){
uni.showModal({
title: '温馨提示',
content: title,
showCancel:false,
confirmColor:"#135AB8",
})
},
chooseImage: async function() {
let that = this
if (that.imageList.length === 9) {
let isContinue = await that.isFullImg();
if (!isContinue) {
return;
}
}
uni.chooseImage({
// 从相册选择或相机拍摄
sourceType: that.sourceType[that.sourceTypeIndex],
// 最多可以选择的图片数量
count: 9,
success: (res) => {
// 图片的本地文件路径列表
that.tempFilePaths = res.tempFilePaths
// console.log(res.tempFilePaths)
for(let i=0 ;i<that.tempFilePaths.length;i++){
let str = ''
let token = uni.getStorageSync("token")
// console.log('token',token)
let params = {
token:token,
}
// url String 开发者服务器 url
// files Aarry 需要上传的文件列表使用 files filePath name 不生效 5+App
// filePath String 要上传文件资源的路径
// name String 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
// header Object HTTP 请求 Header, header 中不能设置 Referer
// formData Object HTTP 请求中其他额外的 form data
// success Function 接口调用成功的回调函数
// fail Function 接口调用失败的回调函数
// complete Function 接口调用结束的回调函数调用成功失败都会执行
uni.uploadFile({
url: axios.baseURL + '/admin/file/add',
filePath:that.tempFilePaths[i],
name: 'file',
// formData:params,
header: {
"Content-Type": "multipart/form-data",
'access_token': token,
"Authorization": token
},
success(res){
str = JSON.stringify(JSON.parse(res.data).data[0]).replace(/\"/g, "")
var temp = {
fileId:str.split(";")[1],
accessUrl:str.split(";")[0],
}
that.imageList = that.imageList.concat(temp)
if (that.imageList.length > 9) {
that.imageList = that.imageList.slice(0, 9)
uni.showToast({
title: '图片最多只能上传9张',
icon: "none"
})
}
that.imgUrl = JSON.stringify(that.imageList)
},
fail(res) {
console.log('error',res)
}
})
}
}
})
},
// 预览图片(大图预览)
previewImage: function(e) {
let that = this
var current = e.target.dataset.index
var tempList = []
for (var i in that.imageList) {
tempList.push(that.imageList[i].accessUrl)
}
uni.previewImage({
// 当前图片的索引、链接
current: tempList[current],
urls: tempList,
longPressActions:{
itemList: ['发送给朋友', '保存图片', '收藏'],
success: function(data) {
// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
},
fail: function(err) {
// console.log(err.errMsg);
}
}
})
},
// 删除照片
deleteImage(index){
this.imageList.splice(index, 1);
},
report(){
let arr = [] ;
if(!this.baseInfo.content){
this.showModel('请填写活动总结')
return false
};
this.imageList.map((e)=>{
arr.push(e.fileId) ;
})
this.baseInfo.fileIds = arr ;
this.$instance.post(`/app/apppartyreport/log-add`,this.baseInfo,null).then(res => {
if (res.code == 0 ) {
uni.showToast({
title: '提交',
icon: 'success',
duration: 2000
})
uni.navigateBack({
delta: 1
});
}
}).catch(err=>{
uni.showToast({
title: err,
icon: "none",
duration:1000
})
})
},
logReport(){
const userInfo = uni.getStorageSync("userInfo") ;
this.$instance.post(`/app/apppartyreport/log-report?partyId=${userInfo.partyId}&reportId=${this.baseInfo.reportId}`)
.then((res)=>{
if(res.code==0&&res.data){
this.baseInfo.content = res.data.content ;
this.baseInfo.fileIds = res.data.fileIds ;
res.data.files.map((e)=>{
this.imageList.push({accessUrl:e.accessUrl,fileId:e.id});
})
}
})
}
});
},
showModel(title) {
uni.showModal({
title: "温馨提示",
content: title,
showCancel: false,
confirmColor: "#135AB8",
});
},
chooseImage: async function () {
let that = this;
if (that.imageList.length === 9) {
let isContinue = await that.isFullImg();
if (!isContinue) {
return;
}
}
}
uni.chooseImage({
// 从相册选择或相机拍摄
sourceType: that.sourceType[that.sourceTypeIndex],
// 最多可以选择的图片数量
count: 9,
success: (res) => {
// 图片的本地文件路径列表
that.tempFilePaths = res.tempFilePaths;
// console.log(res.tempFilePaths)
for (let i = 0; i < that.tempFilePaths.length; i++) {
let str = "";
let token = uni.getStorageSync("token");
// console.log('token',token)
let params = {
token: token,
};
// url String 是 开发者服务器 url
// files Aarry 否 需要上传的文件列表。使用 files 时filePath 和 name 不生效。 5+App
// filePath String 是 要上传文件资源的路径。
// name String 是 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
// header Object 否 HTTP 请求 Header, header 中不能设置 Referer
// formData Object 否 HTTP 请求中其他额外的 form data
// success Function 否 接口调用成功的回调函数
// fail Function 否 接口调用失败的回调函数
// complete Function 否 接口调用结束的回调函数(调用成功、失败都会执行)
uni.uploadFile({
url: settings.baseUrl + "/admin/file/add",
filePath: that.tempFilePaths[i],
name: "file",
// formData:params,
header: {
"Content-Type": "multipart/form-data",
access_token: token,
Authorization: token,
},
success(res) {
str = JSON.stringify(JSON.parse(res.data).data[0]).replace(
/\"/g,
""
);
var temp = {
fileId: str.split(";")[1],
accessUrl: str.split(";")[0],
};
that.imageList = that.imageList.concat(temp);
if (that.imageList.length > 9) {
that.imageList = that.imageList.slice(0, 9);
uni.showToast({
title: "图片最多只能上传9张",
icon: "none",
});
}
that.imgUrl = JSON.stringify(that.imageList);
},
fail(res) {
console.log("error", res);
},
});
}
},
});
},
// 预览图片(大图预览)
previewImage: function (e) {
let that = this;
var current = e.target.dataset.index;
var tempList = [];
for (var i in that.imageList) {
tempList.push(that.imageList[i].accessUrl);
}
uni.previewImage({
// 当前图片的索引、链接
current: tempList[current],
urls: tempList,
longPressActions: {
itemList: ["发送给朋友", "保存图片", "收藏"],
success: function (data) {
// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
},
fail: function (err) {
console.log(err.errMsg);
},
},
});
},
// 删除照片
deleteImage(index) {
this.imageList.splice(index, 1);
},
report() {
let arr = [];
if (!this.baseInfo.content) {
this.showModel("请填写活动总结");
return false;
}
this.imageList.map((e) => {
arr.push(e.fileId);
});
this.baseInfo.fileIds = arr;
this.$instance
.post(`/app/apppartyreport/log-add`, this.baseInfo)
.then((res) => {
if (res.code == 0) {
uni.showToast({
title: "提交",
icon: "success",
duration: 2000,
});
uni.navigateBack({
delta: 1,
});
}
})
.catch((err) => {
uni.showToast({
title: err,
icon: "none",
duration: 1000,
});
});
},
logReport() {
this.$instance
.post(
`/app/apppartyreport/log-report?partyId=${this.user.partyId}&reportId=${this.baseInfo.reportId}`
)
.then((res) => {
if (res.code == 0 && res.data) {
this.baseInfo.content = res.data.content;
this.baseInfo.fileIds = res.data.fileIds;
res.data.files.map((e) => {
this.imageList.push({ accessUrl: e.accessUrl, fileId: e.id });
});
}
});
},
},
};
</script>
<style lang="scss" scoped>
.page{
.page {
width: 100%;
height: 100%;
header {
width: 100%;
height: 100%;
header{
width: 100%;
height: 112rpx;
background-color: #E60012;
height: 112rpx;
background-color: #e60012;
}
.form {
width: 100%;
padding: 32rpx;
box-sizing: border-box;
margin-top: -100rpx;
.main {
background-color: #fff;
border-radius: 8rpx;
padding: 16rpx;
box-sizing: border-box;
}
.form{
width: 100%;
padding: 32rpx;
box-sizing: border-box;
margin-top: -100rpx;
.main{
background-color: #fff;
border-radius:8rpx;
padding: 16rpx;
box-sizing: border-box;
}
.basic-item{
font-size: 32rpx;
justify-content: space-between;
width:100%;
height:112rpx;
padding:32rpx 32rpx 32rpx 12rpx;
box-sizing: border-box;
background-color:#fff;
border-bottom:1rpx solid #eee;
input{
text-align: right;
}
.wid-110{
width:214rpx;
}
.skill-text{
max-width:432rpx;
text-align:right;
display:inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size:30rpx;
}
.picker{
justify-content: flex-end;
align-items: center;
color: #999999;
font-size: 32rpx;
background-color: #FFFFFF;
}
.picker > .AiArea{
background-color: #fff !important;
}
.image{
width: 32rpx;
height: 32rpx;
vertical-align: middle;
}
.wei-text{
width:40%;
}
.msg-value {
width: 60%;
}
.msg-btn {
width: 160px;
text-align: right;
background-color:#fff !important;
}
button {
font-size: 28rpx;
background-color: #fff;
line-height:48rpx;
padding:0;
}
button::after {
border: 0;
}
.button-hover {
background-color: #fff;
}
button[disabled] {
background-color: #fff !important;
font-size: 28rpx;
border-radius: 0;
}
}
/* 上传照片 */
.uni-uploader {
flex: 1;
flex-direction: column;
}
.uni-uploader-head {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.uni-uploader-info {
color: #B2B2B2;
}
.uni-uploader-body {
margin-top: 16rpx;
}
.uni-uploader__files {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.uni-uploader__file {
margin-right: 10rpx;
margin-bottom: 20rpx;
width: 160rpx;
height: 160rpx;
position: relative;
}
.uni-uploader__img {
display: block;
width: 160rpx;
height: 160rpx;
}
.pre-label{
font-size: 80rpx;
color: #DDDDDD;
}
.add-image{
color: #DDDDDD;
font-size: 24rpx;
}
.pre-view{
width: 160rpx;
height: 160rpx;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
border-radius: 8rpx;
border: 2rpx solid #DDDDDD;
}
.icon{
position: absolute;
top: -15rpx;
right: -10rpx;
}
}
.report{
position: fixed;
left:0;
bottom: 0;
height:112rpx;
line-height: 112rpx;
font-size:32rpx;
text-align: center;
background:rgba(230,0,18,1);
color:#fff;
.basic-item {
font-size: 32rpx;
justify-content: space-between;
width: 100%;
height: 112rpx;
padding: 32rpx 32rpx 32rpx 12rpx;
box-sizing: border-box;
background-color: #fff;
border-bottom: 1rpx solid #eee;
input {
text-align: right;
}
.wid-110 {
width: 214rpx;
}
.skill-text {
max-width: 432rpx;
text-align: right;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 30rpx;
}
.picker {
justify-content: flex-end;
align-items: center;
color: #999999;
font-size: 32rpx;
background-color: #ffffff;
}
.picker > .AiArea {
background-color: #fff !important;
}
.image {
width: 32rpx;
height: 32rpx;
vertical-align: middle;
}
.wei-text {
width: 40%;
}
.msg-value {
width: 60%;
}
.msg-btn {
width: 160px;
text-align: right;
background-color: #fff !important;
}
button {
font-size: 28rpx;
background-color: #fff;
line-height: 48rpx;
padding: 0;
}
button::after {
border: 0;
}
.button-hover {
background-color: #fff;
}
button[disabled] {
background-color: #fff !important;
font-size: 28rpx;
border-radius: 0;
}
}
/* 上传照片 */
.uni-uploader {
flex: 1;
flex-direction: column;
}
.uni-uploader-head {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.uni-uploader-info {
color: #b2b2b2;
}
.uni-uploader-body {
margin-top: 16rpx;
}
.uni-uploader__files {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.uni-uploader__file {
margin-right: 10rpx;
margin-bottom: 20rpx;
width: 160rpx;
height: 160rpx;
position: relative;
}
.uni-uploader__img {
display: block;
width: 160rpx;
height: 160rpx;
}
.pre-label {
font-size: 80rpx;
color: #dddddd;
}
.add-image {
color: #dddddd;
font-size: 24rpx;
}
.pre-view {
width: 160rpx;
height: 160rpx;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
border-radius: 8rpx;
border: 2rpx solid #dddddd;
}
.icon {
position: absolute;
top: -15rpx;
right: -10rpx;
}
}
.report {
position: fixed;
left: 0;
bottom: 0;
height: 112rpx;
line-height: 112rpx;
font-size: 32rpx;
text-align: center;
background: rgba(230, 0, 18, 1);
color: #fff;
}
}
</style>

View File

@@ -186,6 +186,11 @@ export default {
url: `./partyDetail?id=${e.id}&listType=${this.navId}`
})
},
goToLog(e) {
uni.navigateTo({
url: `./fillLog?signupId=${e.signupId}&reportId=${e.id}&signupContent=${e.signupContent}`
})
}
}
}