|
|
@@ -4,7 +4,9 @@
|
|
|
<div class="page-inner header-inner">
|
|
|
<div class="header-left">
|
|
|
<div class="header-icon">
|
|
|
- <el-icon><Clock /></el-icon>
|
|
|
+ <el-icon>
|
|
|
+ <Clock />
|
|
|
+ </el-icon>
|
|
|
</div>
|
|
|
<div class="header-title">申请售后</div>
|
|
|
</div>
|
|
|
@@ -47,7 +49,9 @@
|
|
|
<span>本单提交商品总数量:{{ summary.totalQty }}个</span>
|
|
|
<span>退货总金额:¥ {{ summary.totalAmount }}</span>
|
|
|
</div>
|
|
|
- <el-icon class="summary-close" @click="topBtnFlag = false"><Close /></el-icon>
|
|
|
+ <el-icon class="summary-close" @click="topBtnFlag = false">
|
|
|
+ <Close />
|
|
|
+ </el-icon>
|
|
|
</div>
|
|
|
|
|
|
<div class="product-table">
|
|
|
@@ -120,6 +124,15 @@
|
|
|
</el-upload>
|
|
|
</el-form-item> -->
|
|
|
<el-form-item label="凭证图片">
|
|
|
+ <div v-if="form.voucherPhoto && form.voucherPhoto != ''" class="flex">
|
|
|
+ <div class="upload-bos" v-for="(item, index) in form.voucherPhoto.split(',')" :key="index">
|
|
|
+ <img class="upload-img" :src="item" />
|
|
|
+ <div class="upload-box">
|
|
|
+ <el-icon @click="previewImage(item)" color="#ffffff" size="20" class="mr-[20px] icons"><Search /></el-icon>
|
|
|
+ <el-icon @click="onDel(index)" color="#ffffff" size="20" class="icons"><Delete /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<el-upload
|
|
|
class="avatar-uploader"
|
|
|
:action="action"
|
|
|
@@ -128,11 +141,10 @@
|
|
|
:on-success="handleAvatarSuccess"
|
|
|
:before-upload="beforeAvatarUpload"
|
|
|
>
|
|
|
- <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
|
|
|
+ <el-icon class="avatar-uploader-icon">
|
|
|
+ <Plus />
|
|
|
+ </el-icon>
|
|
|
</el-upload>
|
|
|
- <div v-if="form.voucherPhoto && form.voucherPhoto != ''">
|
|
|
- <img class="upload-img" v-for="(item, index) in form.voucherPhoto.split(',')" :key="index" :src="item" />
|
|
|
- </div>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
@@ -210,6 +222,15 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
+
|
|
|
+ <!-- 图片放大 -->
|
|
|
+ <el-image-viewer
|
|
|
+ :url-list="previewImageList"
|
|
|
+ v-if="imageViewer.show"
|
|
|
+ @close="imageViewer.show = false"
|
|
|
+ :initial-index="imageViewer.index"
|
|
|
+ :zoom-rate="1"
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -326,6 +347,26 @@ const handleRemoveProduct = (id: number) => {
|
|
|
selectedProducts.value = selectedProducts.value.filter((p) => p.productId != id);
|
|
|
};
|
|
|
|
|
|
+// 图片放大
|
|
|
+const imageViewer = reactive({
|
|
|
+ show: false,
|
|
|
+ index: 0
|
|
|
+});
|
|
|
+const previewImageList = ref<any>([]);
|
|
|
+const previewImage = (item: any) => {
|
|
|
+ console.log(item, '8888');
|
|
|
+ previewImageList.value = [item];
|
|
|
+ imageViewer.index = 0;
|
|
|
+ imageViewer.show = true;
|
|
|
+};
|
|
|
+
|
|
|
+// 图片删除
|
|
|
+const onDel = (index: any) => {
|
|
|
+ let originalString: any = form.voucherPhoto;
|
|
|
+ originalString = originalString.split(',');
|
|
|
+ originalString.splice(index, 1);
|
|
|
+ form.voucherPhoto = originalString.join(',');
|
|
|
+};
|
|
|
//上传成功
|
|
|
const handleAvatarSuccess = (res: any) => {
|
|
|
if (res.code == 200) {
|
|
|
@@ -624,6 +665,7 @@ const handleSubmit = async () => {
|
|
|
color: #999;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
+
|
|
|
.value {
|
|
|
color: #333;
|
|
|
}
|
|
|
@@ -687,6 +729,7 @@ const handleSubmit = async () => {
|
|
|
gap: 18px;
|
|
|
font-size: 13px;
|
|
|
}
|
|
|
+
|
|
|
.summary-close {
|
|
|
cursor: pointer;
|
|
|
color: #18a058;
|
|
|
@@ -708,6 +751,7 @@ const handleSubmit = async () => {
|
|
|
.table-row {
|
|
|
display: flex;
|
|
|
border-bottom: 1px solid #f0f0f0;
|
|
|
+
|
|
|
&:last-child {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
@@ -730,6 +774,7 @@ const handleSubmit = async () => {
|
|
|
flex: 1;
|
|
|
justify-content: flex-start;
|
|
|
}
|
|
|
+
|
|
|
.col-price,
|
|
|
.col-sold,
|
|
|
.col-available,
|
|
|
@@ -737,6 +782,7 @@ const handleSubmit = async () => {
|
|
|
.col-amount {
|
|
|
width: 110px;
|
|
|
}
|
|
|
+
|
|
|
.col-op {
|
|
|
width: 80px;
|
|
|
}
|
|
|
@@ -751,6 +797,7 @@ const handleSubmit = async () => {
|
|
|
align-items: center;
|
|
|
width: 100%;
|
|
|
}
|
|
|
+
|
|
|
.product-image {
|
|
|
width: 60px;
|
|
|
height: 60px;
|
|
|
@@ -758,22 +805,26 @@ const handleSubmit = async () => {
|
|
|
border-radius: 4px;
|
|
|
overflow: hidden;
|
|
|
flex-shrink: 0;
|
|
|
+
|
|
|
.el-image {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
+
|
|
|
.image-placeholder {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: #f5f5f5;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.product-meta {
|
|
|
.name {
|
|
|
font-size: 13px;
|
|
|
color: #333;
|
|
|
line-height: 1.4;
|
|
|
}
|
|
|
+
|
|
|
.spec {
|
|
|
margin-top: 4px;
|
|
|
font-size: 12px;
|
|
|
@@ -798,10 +849,12 @@ const handleSubmit = async () => {
|
|
|
|
|
|
.pickup-row {
|
|
|
margin-bottom: 10px;
|
|
|
+
|
|
|
.k {
|
|
|
color: #999;
|
|
|
margin-right: 6px;
|
|
|
}
|
|
|
+
|
|
|
&.hint {
|
|
|
color: #999;
|
|
|
}
|
|
|
@@ -812,6 +865,7 @@ const handleSubmit = async () => {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
padding: 10px 0 20px;
|
|
|
+
|
|
|
.submit-btn {
|
|
|
width: 120px;
|
|
|
}
|
|
|
@@ -869,7 +923,8 @@ const handleSubmit = async () => {
|
|
|
}
|
|
|
|
|
|
.avatar-uploader {
|
|
|
- margin: 10px 20px;
|
|
|
+ margin: 10px 20px 0 0px;
|
|
|
+
|
|
|
:deep(.el-upload) {
|
|
|
width: 108px;
|
|
|
height: 108px;
|
|
|
@@ -881,11 +936,38 @@ const handleSubmit = async () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.upload-img {
|
|
|
+.upload-bos {
|
|
|
width: 108px;
|
|
|
height: 108px;
|
|
|
border-radius: 2px;
|
|
|
- margin-right: 15px;
|
|
|
+ margin: 10px 20px 0 0px;
|
|
|
+ position: relative;
|
|
|
+ &:hover {
|
|
|
+ .upload-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .upload-box {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .icons {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.el-icon.avatar-uploader-icon {
|