472 lines
12 KiB
Vue
472 lines
12 KiB
Vue
<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>
|