|
|
<template>
|
|
|
<view class="container">
|
|
|
<u-notify ref="uNotify" message="Hi uView"></u-notify>
|
|
|
<!-- <view class="sk" v-if="loading">
|
|
|
<u-skeleton
|
|
|
rows="1"
|
|
|
:title="false"
|
|
|
loading
|
|
|
:rowsHeight="120"
|
|
|
></u-skeleton>
|
|
|
<u-skeleton
|
|
|
style="margin-top: 20rpx"
|
|
|
rows="1"
|
|
|
:title="false"
|
|
|
loading
|
|
|
:rowsHeight="720"
|
|
|
></u-skeleton>
|
|
|
</view> -->
|
|
|
<view class="detail">
|
|
|
<view class="artwork">
|
|
|
<view class="info">
|
|
|
<view class="left">
|
|
|
<view class="title">画作名称</view>
|
|
|
<view class="name">{{ detailData.ArtworkName }}</view>
|
|
|
</view>
|
|
|
<image class="artwork-image" :src="detailData.PreviewImg"></image>
|
|
|
</view>
|
|
|
<u-collapse>
|
|
|
<u-collapse-item title="" name="Docs guide">
|
|
|
<view class="list">
|
|
|
<view class="item">
|
|
|
<view class="sub1">商城编号</view>
|
|
|
<view class="sub2">{{ detailData.Tfnum }}</view>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
<view class="sub1">画家姓名</view>
|
|
|
<view class="sub2">{{ detailData.ArtistName }}</view>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
<view class="sub1">画作类型</view>
|
|
|
<view class="sub2">{{ detailData.ArtworkType }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="list">
|
|
|
<view class="item">
|
|
|
<view class="sub1">长度</view>
|
|
|
<view class="sub2">{{ detailData.Length }}</view>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
<view class="sub1">宽度</view>
|
|
|
<view class="sub2">{{ detailData.Width }}</view>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
<view class="sub1">平尺数</view>
|
|
|
<view class="sub2">{{ detailData.Ruler }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-collapse-item>
|
|
|
</u-collapse>
|
|
|
</view>
|
|
|
<view class="repair">
|
|
|
<u-tabs
|
|
|
@change="changeTab"
|
|
|
:list="tabList"
|
|
|
:lineColor="'#46645F'"
|
|
|
:inactiveStyle="{
|
|
|
color: '#666666',
|
|
|
}"
|
|
|
:activeStyle="{
|
|
|
color: '#000000',
|
|
|
fontSize: '32rpx',
|
|
|
fontWeight: 'bold',
|
|
|
}"
|
|
|
></u-tabs>
|
|
|
<view v-if="actName === '破损'">
|
|
|
<view style="margin-top: 30rpx; text-align: center">
|
|
|
<u-upload
|
|
|
:fileList="fileList"
|
|
|
@delete="deletePic"
|
|
|
@afterRead="afterRead"
|
|
|
name="3"
|
|
|
width="100"
|
|
|
height="100"
|
|
|
multiple
|
|
|
:previewFullImage="true"
|
|
|
></u-upload>
|
|
|
</view>
|
|
|
<view class="tips">
|
|
|
备注:
|
|
|
<u--textarea
|
|
|
v-model="DamagedRemark"
|
|
|
placeholder="请输入内容"
|
|
|
></u--textarea>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view v-else>
|
|
|
<view style="margin-top: 30rpx; text-align: center">
|
|
|
<u-upload
|
|
|
:fileList="repFileList"
|
|
|
@delete="repDeletePic"
|
|
|
@afterRead="repAfterRead"
|
|
|
name="3"
|
|
|
width="100"
|
|
|
height="100"
|
|
|
multiple
|
|
|
:previewFullImage="true"
|
|
|
></u-upload>
|
|
|
</view>
|
|
|
<view class="tips">
|
|
|
备注:
|
|
|
<u--textarea
|
|
|
v-model="RepairedRemark"
|
|
|
placeholder="请输入内容"
|
|
|
></u--textarea>
|
|
|
</view>
|
|
|
</view>
|
|
|
<u-button type="primary" :loading="loading" class="search" @click="goSubmit">提交</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
detailData: {},
|
|
|
tabList: [
|
|
|
{
|
|
|
name: "破损",
|
|
|
},
|
|
|
{
|
|
|
name: "修复",
|
|
|
},
|
|
|
],
|
|
|
fileList: [],
|
|
|
DamagedRemark: "",
|
|
|
RepairedRemark: "",
|
|
|
repFileList: [],
|
|
|
actName: "破损",
|
|
|
loading: false,
|
|
|
};
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
changeTab(e) {
|
|
|
this.actName = e.name;
|
|
|
},
|
|
|
// 删除图片
|
|
|
deletePic(event) {
|
|
|
this[`fileList`].splice(event.index, 1);
|
|
|
},
|
|
|
async afterRead(event) {
|
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
|
let lists = [].concat(event.file);
|
|
|
let fileListLen = this[`fileList`].length;
|
|
|
lists.map((item) => {
|
|
|
this[`fileList`].push({
|
|
|
...item,
|
|
|
status: "uploading",
|
|
|
message: "上传中",
|
|
|
});
|
|
|
});
|
|
|
for (let i = 0; i < lists.length; i++) {
|
|
|
const result = await this.uploadFilePromise(lists[i].url);
|
|
|
console.log(result, "result");
|
|
|
let item = this[`fileList`][fileListLen];
|
|
|
this[`fileList`].splice(
|
|
|
fileListLen,
|
|
|
1,
|
|
|
Object.assign(item, {
|
|
|
status: "success",
|
|
|
message: "",
|
|
|
url: result,
|
|
|
})
|
|
|
);
|
|
|
fileListLen++;
|
|
|
}
|
|
|
},
|
|
|
uploadFilePromise(url) {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
|
const Authorization = uni.getStorageSync("repari-token");
|
|
|
const userId = uni.getStorageSync("repari-refresh-token").ID;
|
|
|
let a = uni.uploadFile({
|
|
|
url: this.$baseUrl + "/upload/img",
|
|
|
filePath: url,
|
|
|
name: "file",
|
|
|
formData: {
|
|
|
type: "image",
|
|
|
source: "user",
|
|
|
mask: userId,
|
|
|
},
|
|
|
header: {
|
|
|
Authorization,
|
|
|
},
|
|
|
success: (res) => {
|
|
|
console.log(res, "res");
|
|
|
res.data = JSON.parse(res.data);
|
|
|
resolve(res.data.data.ori_url);
|
|
|
this.uploadFlag = true;
|
|
|
},
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
// 删除图片
|
|
|
repDeletePic(event) {
|
|
|
this[`repFileList`].splice(event.index, 1);
|
|
|
},
|
|
|
async repAfterRead(event) {
|
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
|
let lists = [].concat(event.file);
|
|
|
let fileListLen = this[`repFileList`].length;
|
|
|
lists.map((item) => {
|
|
|
this[`repFileList`].push({
|
|
|
...item,
|
|
|
status: "uploading",
|
|
|
message: "上传中",
|
|
|
});
|
|
|
});
|
|
|
for (let i = 0; i < lists.length; i++) {
|
|
|
const result = await this.uploadFilePromise(lists[i].url);
|
|
|
console.log(result, "result");
|
|
|
let item = this[`repFileList`][fileListLen];
|
|
|
this[`repFileList`].splice(
|
|
|
fileListLen,
|
|
|
1,
|
|
|
Object.assign(item, {
|
|
|
status: "success",
|
|
|
message: "",
|
|
|
url: result,
|
|
|
})
|
|
|
);
|
|
|
fileListLen++;
|
|
|
}
|
|
|
},
|
|
|
// 提交
|
|
|
async goSubmit() {
|
|
|
// 图片和备注都是必填，如果没有则提示
|
|
|
if (this.actName === "破损") {
|
|
|
if (this.fileList.length === 0) {
|
|
|
this.$refs.uNotify.show({
|
|
|
top: 10,
|
|
|
type: "error",
|
|
|
message: "请上传破损图片",
|
|
|
duration: 1000 * 3,
|
|
|
fontSize: 20,
|
|
|
safeAreaInsetTop: true,
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
if (!this.DamagedRemark) {
|
|
|
this.$refs.uNotify.show({
|
|
|
top: 10,
|
|
|
type: "error",
|
|
|
message: "请填写破损备注",
|
|
|
duration: 1000 * 3,
|
|
|
fontSize: 20,
|
|
|
safeAreaInsetTop: true,
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
} else {
|
|
|
if (this.repFileList.length === 0) {
|
|
|
this.$refs.uNotify.show({
|
|
|
top: 10,
|
|
|
type: "error",
|
|
|
message: "请上传修复图片",
|
|
|
duration: 1000 * 3,
|
|
|
fontSize: 20,
|
|
|
safeAreaInsetTop: true,
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
if (!this.RepairedRemark) {
|
|
|
this.$refs.uNotify.show({
|
|
|
top: 10,
|
|
|
type: "error",
|
|
|
message: "请填写修复备注",
|
|
|
duration: 1000 * 3,
|
|
|
fontSize: 20,
|
|
|
safeAreaInsetTop: true,
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
}
|
|
|
this.loading = true;
|
|
|
let data = {
|
|
|
RepairID: this.detailData.RepairID,
|
|
|
DamagedImgs: this.fileList.map((item) => item.url),
|
|
|
DamagedRemark: this.DamagedRemark,
|
|
|
RepairedImgs: this.repFileList.map((item) => item.url),
|
|
|
RepairedRemark: this.RepairedRemark,
|
|
|
ArtworkUuid: this.detailData.ArtworkUuid,
|
|
|
CreateSource: 2,
|
|
|
};
|
|
|
let res = await this.$api.management.update(data);
|
|
|
if (res.status == 0) {
|
|
|
this.$refs.uNotify.show({
|
|
|
top: 10,
|
|
|
type: "success",
|
|
|
message: "提交成功",
|
|
|
duration: 1000 * 3,
|
|
|
fontSize: 20,
|
|
|
safeAreaInsetTop: true,
|
|
|
});
|
|
|
this.loading = false;
|
|
|
setTimeout(() => {
|
|
|
this.$router.push({
|
|
|
path: "/",
|
|
|
});
|
|
|
}, 1000);
|
|
|
} else {
|
|
|
this.loading = false;
|
|
|
this.$refs.uNotify.show({
|
|
|
top: 10,
|
|
|
type: "error",
|
|
|
message: res.msg,
|
|
|
duration: 1000 * 3,
|
|
|
fontSize: 20,
|
|
|
safeAreaInsetTop: true,
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
|
|
|
onLoad(item) {
|
|
|
|
|
|
this.detailData = JSON.parse(item.detailData);
|
|
|
this.fileList = this.detailData.DamagedImgs ? this.detailData.DamagedImgs.map((item) => {
|
|
|
return {
|
|
|
url: item,
|
|
|
status: "success",
|
|
|
message: "",
|
|
|
};
|
|
|
}) : [];
|
|
|
this.repFileList = this.detailData.RepairedImgs ? this.detailData.RepairedImgs.map((item) => {
|
|
|
return {
|
|
|
url: item,
|
|
|
status: "success",
|
|
|
message: "",
|
|
|
};
|
|
|
}) : [];
|
|
|
this.DamagedRemark = this.detailData.DamagedRemark;
|
|
|
this.RepairedRemark = this.detailData.RepairedRemark;
|
|
|
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
page {
|
|
|
background-size: auto 100%;
|
|
|
background-attachment: fixed;
|
|
|
height: 100vh;
|
|
|
background-image: url("../../static/backg.png");
|
|
|
}
|
|
|
/deep/ .u-skeleton {
|
|
|
flex: none;
|
|
|
width: 100%;
|
|
|
}
|
|
|
/deep/ .u-skeleton__wrapper__content__rows {
|
|
|
width: 100% !important;
|
|
|
}
|
|
|
/deep/ .u-cell__body {
|
|
|
justify-content: center;
|
|
|
border: none;
|
|
|
}
|
|
|
/deep/ .u-cell__body__content {
|
|
|
display: none;
|
|
|
}
|
|
|
/deep/ .u-line {
|
|
|
display: none;
|
|
|
}
|
|
|
.container {
|
|
|
background-size: 100% 100%;
|
|
|
background-attachment: fixed;
|
|
|
height: 100vh;
|
|
|
padding: 0rpx 40rpx 0 40rpx;
|
|
|
.sk {
|
|
|
padding-top: 60rpx;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
.detail {
|
|
|
padding-top: 60rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
.artwork {
|
|
|
min-height: 240rpx;
|
|
|
border-radius: 8rpx;
|
|
|
background-color: #ffffff;
|
|
|
}
|
|
|
.info {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
padding: 30rpx;
|
|
|
}
|
|
|
.left {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
.title {
|
|
|
font-size: 32rpx;
|
|
|
color: #000000;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
.name {
|
|
|
font-size: 32rpx;
|
|
|
color: #666666;
|
|
|
font-weight: bold;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.list {
|
|
|
padding: 30rpx;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
.sub2 {
|
|
|
font-size: 32rpx;
|
|
|
color: #666666;
|
|
|
margin-top: 10rpx;
|
|
|
// 文字超出部分隐藏
|
|
|
width: 140rpx;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
.sub1 {
|
|
|
font-size: 32rpx;
|
|
|
color: #000000;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.artwork-image {
|
|
|
width: 380rpx;
|
|
|
height: 180rpx;
|
|
|
border-radius: 8rpx;
|
|
|
}
|
|
|
.repair {
|
|
|
margin-top: 20rpx;
|
|
|
padding: 30rpx;
|
|
|
background-color: #ffffff;
|
|
|
min-height: 1200rpx;
|
|
|
}
|
|
|
.tips {
|
|
|
// 文字在左边，输入框在右边
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
margin-top: 30rpx;
|
|
|
.u-textarea {
|
|
|
margin-left: 30rpx;
|
|
|
font-size: 32rpx;
|
|
|
color: #000000;
|
|
|
padding: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
.search {
|
|
|
margin-top: 70rpx;
|
|
|
width: 60%;
|
|
|
border: 0;
|
|
|
font-size: 34rpx;
|
|
|
border-radius: 10rpx;
|
|
|
height: 90rpx;
|
|
|
background-image: linear-gradient(to right, #698883, #45645f);
|
|
|
}
|
|
|
}
|
|
|
</style>
|