feat: 商品添加图库功能未开始
This commit is contained in:
duan
221
src/components/mycomponents/addImg.vue
Normal file
221
src/components/mycomponents/addImg.vue
Normal file
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" title="选择图片" width="50%">
|
||||
<el-container>
|
||||
<el-aside style="background-color: #fff;border-right: 1px solid #ccc;" width="150px">
|
||||
<ul style="padding-left: 0;margin: 0;">
|
||||
<li style="cursor: pointer;" v-for="item in options" :key="item.id"
|
||||
:class="[activedata == item.id ? 'activedata' : '']" @click="changeEvent(item.id)">
|
||||
{{ item.name }} <span style="font-size: 12px;">({{ item.count }})</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="uplocation" :class="[activedata == -1 ? 'activedata' : '']" @click="uplocation">我的图片
|
||||
</div>
|
||||
</el-aside>
|
||||
<el-main>
|
||||
<imageComponent @onSelectImage="onSelectImage" @getList="getList" :activedata="activedata" :list='dataImages'>
|
||||
</imageComponent>
|
||||
<!-- <mypagination :total="total" @gopageEvent="handleCurrentChange"></mypagination> -->
|
||||
</el-main>
|
||||
</el-container>
|
||||
<template #footer>
|
||||
<div style="text-align: center">
|
||||
<el-button type="success" @click="Confirm">确 定</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
<!-- <myDialog title="选择图片" width="50%" ref="myDialogRef" @Confirm="subitgood">
|
||||
<el-container>
|
||||
<el-aside style="background-color: #fff;border-right: 1px solid #ccc;" width="150px">
|
||||
<ul style="padding-left: 0;margin: 0;">
|
||||
<li style="cursor: pointer;" v-for="item in options" :key="item.id"
|
||||
:class="[activedata == item.id ? 'activedata' : '']" @click="changeEvent(item.id)">
|
||||
{{ item.name }} <span style="font-size: 12px;">({{ item.count }})</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="uplocation" :class="[activedata == -1 ? 'activedata' : '']" @click="uplocation">我的图片
|
||||
</div>
|
||||
</el-aside>
|
||||
<el-main>
|
||||
<imageComponent @onSelectImage="onSelectImage" @getList="getList" :activedata="activedata" :list='dataImages'>
|
||||
</imageComponent>
|
||||
<mypagination :total="total" @gopageEvent="handleCurrentChange"></mypagination>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</myDialog> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getcommonCategor, getcommonpicture, storeAddcategory, addImg, delcate } from "@/api/imagesPhp";
|
||||
import myDialog from './myDialog.vue'
|
||||
import imageComponent from './addImgconfig/imageComponent.vue'
|
||||
import mypagination from './addImgconfig/mypagination.vue'
|
||||
export default {
|
||||
components: {
|
||||
imageComponent, mypagination, myDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dialogTableVisibles: false,
|
||||
selectImage: [],
|
||||
|
||||
files: [],
|
||||
dataImages: [],
|
||||
options: [],
|
||||
fileList: [],
|
||||
value: '',
|
||||
typedata: '',
|
||||
showUpload: false,
|
||||
page: 1,
|
||||
total: 0,
|
||||
// pageSize: 18,
|
||||
activedata: '681'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getType()
|
||||
},
|
||||
methods: {
|
||||
subitgood() {
|
||||
this.$emit('success', this.selectImage)
|
||||
this.$refs.myDialogRef.close()
|
||||
},
|
||||
uplocation() {
|
||||
this.activedata = -1
|
||||
this.page = 1
|
||||
this.dataImages = []
|
||||
// this.pageSize = 17
|
||||
this.getList()
|
||||
},
|
||||
changeEvent(id) {
|
||||
this.page = 1
|
||||
// this.pageSize = 18
|
||||
this.activedata = id
|
||||
this.getList()
|
||||
},
|
||||
handleCurrentChange(i) {
|
||||
this.page = i
|
||||
this.getList()
|
||||
},
|
||||
Confirm() {
|
||||
|
||||
},
|
||||
// 删除类型
|
||||
deleteType(id) {
|
||||
this.$confirm('删除该类型, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(async () => {
|
||||
let res = await delcate({
|
||||
id,
|
||||
store_id: localStorage.getItem("shopId"),
|
||||
})
|
||||
this.getType()
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.msg
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message.error(res.msg);
|
||||
});
|
||||
},
|
||||
// 刷新列表数据
|
||||
async doSubmit() {
|
||||
this.showUpload = false;
|
||||
let arr = []
|
||||
if (this.files.length) {
|
||||
this.files.forEach(ele => {
|
||||
arr.push({
|
||||
url: ele.response.data[0],
|
||||
name: ele.name
|
||||
})
|
||||
})
|
||||
return
|
||||
const res = await addImg({
|
||||
category: this.value,
|
||||
store_id: localStorage.getItem("shopId"),
|
||||
url: arr
|
||||
})
|
||||
if (res.code == 1) {
|
||||
this.getType(this.value)
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
this.files = [];
|
||||
}
|
||||
},
|
||||
handleBeforeRemove(file, fileList) {
|
||||
let index = this.files.findIndex(ele => ele.name == file.name)
|
||||
this.files.splice(index, 1);
|
||||
},
|
||||
handleSuccess(response, file, fileList) {
|
||||
this.files.push(file)
|
||||
},
|
||||
async addtype() {
|
||||
if (this.typedata) {
|
||||
return
|
||||
const res = await storeAddcategory({
|
||||
store_id: localStorage.getItem("shopId"),
|
||||
name: this.typedata
|
||||
});
|
||||
if (res.msg == '成功') {
|
||||
this.typedata = ''
|
||||
this.dialogTableVisibles = false
|
||||
this.getType()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
sumbit() {
|
||||
this.dialogVisible = false
|
||||
this.$emit('successEvent', this.selectImage)
|
||||
},
|
||||
show() {
|
||||
this.dialogVisible = true
|
||||
// this.$refs.myDialogRef.open()
|
||||
// console.log('show');
|
||||
},
|
||||
async getList() {
|
||||
let obj = {
|
||||
category: this.activedata == -1 ? '' : this.activedata,
|
||||
page: this.page,
|
||||
size: 18,
|
||||
store_id: localStorage.getItem("shopId"),
|
||||
}
|
||||
return
|
||||
const res = await getcommonpicture(obj);
|
||||
this.dataImages = res.data
|
||||
this.total = res.count
|
||||
},
|
||||
async getType(valueIndex) {
|
||||
console.log(2222)
|
||||
return
|
||||
const res = await getcommonCategor({
|
||||
store_id: localStorage.getItem("shopId"),
|
||||
});
|
||||
this.options = res.data
|
||||
this.value = valueIndex ? valueIndex : res.data[0].id
|
||||
this.getList()
|
||||
},
|
||||
onSelectImage(d) {
|
||||
this.selectImage = [d]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.activedata {
|
||||
color: #1890ff;
|
||||
/* background-color: #f6f7f8; */
|
||||
}
|
||||
|
||||
.uplocation {
|
||||
cursor: pointer;
|
||||
/* position: absolute; */
|
||||
/* bottom: 20px; */
|
||||
}
|
||||
</style>
|
||||
194
src/components/mycomponents/addImgconfig/imageComponent.vue
Normal file
194
src/components/mycomponents/addImgconfig/imageComponent.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="text-align: right;">
|
||||
<span style="color: #aaa;">只能上传png、jgp图片</span>
|
||||
<el-button @click="upShowUp" style="background-color: #f6f7f8;">上传文件</el-button>
|
||||
</div>
|
||||
<ul class="ulStyle" :class="[activedata == -1 ? '' : 'heightStyle']">
|
||||
<li v-for="item in list" :key="item.id" class="listyle" :class="[selectList.id == item.id ? 'actives' : '']"
|
||||
@click="clickEvent(item)">
|
||||
<img :src="item.url" style="width: 100px;height: 100px;" alt="">
|
||||
</li>
|
||||
</ul>
|
||||
<el-dialog v-model="showUpload" title="">
|
||||
<!-- <SingleImageUpload v-model="selectItem.value" @onSuccess="onSuccess"> </SingleImageUpload> -->
|
||||
<MultiImageUpload v-model="fileList" />
|
||||
<template #footer>
|
||||
<el-button type="primary" @click="doSubmit">确认</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- <el-dialog v-model="showUpload" title="" width="50%">
|
||||
<SingleImageUpload v-model="selectItem.value" @onSuccess="onSuccess">
|
||||
<img v-if="selectItem.value" :src="selectItem.value" class="avatar" />
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||||
</SingleImageUpload>
|
||||
123
|
||||
<template #footer>
|
||||
<el-button type="primary" @click="doSubmit">确认</el-button>
|
||||
</template>
|
||||
</el-dialog> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
// import { delimg } from "@/api/imagesPhp";
|
||||
// import { getToken } from "@/utils/auth";
|
||||
// import { mapGetters } from "vuex";
|
||||
// import { getcommonCategor, getcommonpicture, storeAddcategory, addImg, delcate } from "@/api/imagesPhp";
|
||||
import MultiImageUpload from "@/components/Upload/MultiImageUpload.vue";
|
||||
// import MultiImageUpload from "../../Upload/MultiImageUpload";
|
||||
export default {
|
||||
computed: {
|
||||
// ...mapGetters(["qiNiuUploadApi"])
|
||||
},
|
||||
components: {
|
||||
MultiImageUpload
|
||||
},
|
||||
// props: ["accept"],
|
||||
data() {
|
||||
return {
|
||||
showUpload: false,
|
||||
selectList: [],
|
||||
files: [],
|
||||
fileList: [],
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
upShowUp() {
|
||||
this.showUpload = true;
|
||||
},
|
||||
async doSubmit() {
|
||||
this.showUpload = false;
|
||||
let arr = []
|
||||
if (this.files.length) {
|
||||
this.files.forEach(ele => {
|
||||
arr.push({
|
||||
url: ele.response.data[0],
|
||||
name: ele.name
|
||||
})
|
||||
})
|
||||
return
|
||||
const res = await addImg({
|
||||
category: '',
|
||||
store_id: localStorage.getItem("shopId"),
|
||||
url: arr
|
||||
})
|
||||
if (res.code == 1) {
|
||||
// this.getType(this.value)
|
||||
this.$emit('getList')
|
||||
this.$message.success(res.msg);
|
||||
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
this.files = [];
|
||||
}
|
||||
},
|
||||
handleSuccess(response, file, fileList) {
|
||||
this.files.push(file)
|
||||
},
|
||||
handleBeforeRemove(file, fileList) {
|
||||
let index = this.files.findIndex(ele => ele.name == file.name)
|
||||
this.files.splice(index, 1);
|
||||
},
|
||||
beforeUpload(file) {
|
||||
if (file.type == 'image/png') {
|
||||
} else if (file.type == 'image/jpeg') {
|
||||
} else {
|
||||
this.$message.error('只能上传图片')
|
||||
return false
|
||||
}
|
||||
|
||||
},
|
||||
clickEvent(d) {
|
||||
this.selectList = d
|
||||
this.$emit('onSelectImage', d)
|
||||
},
|
||||
async deleteEvent(id) {
|
||||
return
|
||||
let res = await delimg({
|
||||
id,
|
||||
store_id: localStorage.getItem("shopId"),
|
||||
})
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
});
|
||||
this.$emit('getList')
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.show {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: -10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.listyle:hover>.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.buttonstyle {
|
||||
border-radius: 50%;
|
||||
color: #db1616;
|
||||
background-color: #fff;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.ulStyle {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: auto;
|
||||
height: 402px;
|
||||
}
|
||||
|
||||
.heightStyle {
|
||||
height: 402px;
|
||||
}
|
||||
|
||||
|
||||
.listyle {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
border: 5px solid #fff;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.listyle:last-child {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.upImgStyles {
|
||||
cursor: pointer;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
line-height: 110px;
|
||||
text-align: center;
|
||||
border: 1px dashed #ccc;
|
||||
border-radius: 1%;
|
||||
font-size: 30px;
|
||||
color: #ccc;
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
.actives {
|
||||
border: 5px solid #1890ff;
|
||||
}
|
||||
</style>
|
||||
79
src/components/mycomponents/addImgconfig/mypagination.vue
Normal file
79
src/components/mycomponents/addImgconfig/mypagination.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="mypagination">
|
||||
<i class="el-icon-arrow-left istyle" @click="minuspage" v-show="pgae != 1"></i>
|
||||
<div>
|
||||
<span style="color: #42d885;">
|
||||
{{ pgae }}
|
||||
</span> / {{ totals }}
|
||||
</div>
|
||||
<i class="el-icon-arrow-right istyle" @click="gopage" v-if="pgae != totals"></i>
|
||||
<div style="width: 26px;" v-else></div>
|
||||
<el-input v-model='pagego' class="inputStyle" @input="oninputEvent" />
|
||||
<el-button type="text" @click="gopages">跳转</el-button>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: ['total'],
|
||||
|
||||
watch: {
|
||||
totals() {
|
||||
this.pgae = 1
|
||||
this.pagego = 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
totals() {
|
||||
let pagedata = this.total / 18
|
||||
return pagedata < 0 ? 1 : Math.ceil(pagedata)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return { pgae: 1, pagego: 1 }
|
||||
},
|
||||
methods: {
|
||||
oninputEvent(d) {
|
||||
let a = d.replace(/[^\d]/g, '')
|
||||
if (a < (this.totals + 1)) {
|
||||
this.pagego = a
|
||||
} else {
|
||||
this.pagego = this.totals
|
||||
}
|
||||
},
|
||||
gopage() {
|
||||
this.$emit('gopageEvent', ++this.pgae)
|
||||
this.pagego = this.pgae
|
||||
},
|
||||
minuspage() {
|
||||
this.$emit('gopageEvent', --this.pgae)
|
||||
this.pagego = this.pgae
|
||||
},
|
||||
gopages() {
|
||||
this.pgae = this.pagego
|
||||
this.$emit('gopageEvent', this.pagego)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.mypagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end
|
||||
}
|
||||
|
||||
.istyle {
|
||||
background-color: #f6f7f8;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.inputStyle {
|
||||
width: 50px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user