czg_team
/
management
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://e.coding.net/g-cphe0354/yinshoukeguanliduan/management into wwz

This commit is contained in:
魏啾 2024-08-08 09:38:35 +08:00
parent 81f5c68fa7 9a55093516
commit 87d2f8a7bb
5 changed files with 263 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/uploadImg/index.vue
View File

@ -36,7 +36,7 @@ export default {
dialogImageUrl: '',
dialogVisible: false,
fileList: [],
files: [],
// files: [],
headers: {
'Authorization': getToken()
}
@ -45,7 +45,13 @@ export default {
methods: {
handleSuccess(response, file, fileList) {
// console.log('上传成功', response)
this.files = response.data
setTimeout(() => {
this.fileList.push({
url: response.data[0],
id: response.data.id
})
}, 100);
// this.files = response.data
this.$emit('success', response.data)
},
// 监听上传失败
@ -69,6 +75,9 @@ export default {
},
handleRemove(file, fileList) {
let arr = fileList.map(item => item.url)
// 删除数据
let index = this.fileList.findIndex(ele => ele.url == file.url)
this.fileList.splice(index, 1);
this.$emit('remove', arr)
},
clearFiles() {
@ -76,4 +85,11 @@ export default {
}
}
}
</script>
</script>
<style>
.el-upload-list__item {
transition: none;
}
</style>

96
src/views/product/add_shop.vue
View File

@ -2,7 +2,8 @@
<div class="app-container">
<el-form ref="formRef" :model="form" :rules="rules" label-width="140px" label-position="left">
<el-form-item label="商品类型" prop="typeEnum">
<div class="shop_type_box" :class="{ disabled: form.id }">
<div class="shop_type_box" :class="{ }">
<!-- <div class="shop_type_box" :class="{ disabled: form.id }"> -->
<div class="item" v-for="(item, index) in shopTypes" :key="index"
:class="{ active: shopTypesActive == index }" @click="changeTypeEnum(index)">
<div class="s_title">{{ item.label }}</div>
@ -45,9 +46,19 @@
<addClassify ref="addClassifyRef" @success="tbShopCategoryGet" />
</el-form-item>
<el-form-item label="商品图片">
<uploadImg ref="uploadImg" :limit="9" @success="uploadSuccess" @remove="uploadRemove" />
<div style="display: flex;flex-wrap: wrap; ">
<div v-for="item in imgList" style="position: relative;" class="showStyle">
<i class="el-icon-error buttonstyle" @click="deleteEvent(item)"></i>
<img style="width: 148px;height: 148px;margin-right: 6px;" class="imgStyle" :key="item.id" :src="item.url"
alt="">
</div>
<div class="upImgStyle" @click="$refs.addImg.show()">
+
</div>
</div>
<!-- <uploadImg ref="uploadImg" :limit="9" @success="uploadSuccess" @remove="uploadRemove" /> -->
<div class="tips">注：第一张图为商品封面图，图片尺寸为750×750</div>
<el-button type="primary" plain icon="el-icon-plus" @click="$refs.addImg.show()">选择图片</el-button>
<!-- <el-button type="primary" plain icon="el-icon-plus" @click="$refs.addImg.show()">选择图片</el-button> -->
</el-form-item>
<el-form-item label="套餐商品" v-if="shopTypes[shopTypesActive].typeEnum == 'group'">
<el-table :data="form.groupSnap" border v-if="form.groupSnap.length">
@ -142,9 +153,9 @@
</template>
</el-table-column>
</el-table>
<div class="tips" v-if="form.isShowMall">
<!-- <div class="tips" v-if="form.isShowMall">
注：小程序商城必须设置库存数量大于0
</div>
</div> -->
</el-form-item>
<template v-if="form.typeEnum == 'group'">
<el-form-item label="使用日期说明" prop="notices.dateUsed">
@ -297,9 +308,9 @@
</template>
</el-table-column> -->
</el-table>
<div class="tips" v-if="form.isShowMall">
<!-- <div class="tips" v-if="form.isShowMall">
注：小程序商城必须设置库存数量大于0
</div>
</div> -->
</el-form-item>
<template v-if="form.typeEnum != 'group'">
<el-form-item label="上架区域">
@ -470,6 +481,7 @@ export default {
usageRules: ""
}
},
imgList: [],
rules: {
typeEnum: [
{
@ -552,15 +564,22 @@ export default {
},
methods: {
successEvent(d) {
// 删除重复数据
// let index = this.files.findIndex(ele => ele.name == file.name)
// this.files.splice(index, 1);
d.forEach(item => {
item.uid = item.id
item.url = item.url
this.form.images.push(item.url);
})
this.$refs.uploadImg.fileList.push(...d)
this.form.images.push(d[0].url);
this.imgList.push(d[0])
// if (this.$refs.uploadImg.fileList.length < 9) {
// d.forEach(item => {
// item.uid = item.id
// item.url = item.url
// this.form.images.push(item.url);
// })
// this.$refs.uploadImg.fileList.push(...d)
// console.log(this.$refs.uploadImg.fileList, '调试1')
// } else {
// this.$notify.error({
// title: '错误',
// message: '最多选择9张图片'
// });
// }
},
priceFormat(item, key) {
const messageheight = 48;
@ -582,6 +601,10 @@ export default {
}
})
},
deleteEvent(d) {
let index = this.imgList.findIndex(ele => ele.url == d.url)
this.imgList.splice(index, 1);
},
// 删除分组商品
delGoods(goods, index, $index) {
goods.splice(index, 1);
@ -630,14 +653,18 @@ export default {
);
this.specTableHeaders = JSON.parse(res.specTableHeaders);
this.selectSpec = JSON.parse(res.selectSpec);
console.log(res, '调试11111')
// 初始化上传图片
this.$refs.uploadImg.fileList = res.images.map(item => {
// this.$refs.uploadImg.fileList = res.images.map(item => {
// return {
// url: item
// };
// });
this.imgList = res.images.map(item => {
return {
url: item
};
});
this.form = res;
if (res.typeEnum == "sku") {
let skuList = [...res.skuList];
@ -719,7 +746,7 @@ export default {
},
// 切换类型
changeTypeEnum(index) {
if (this.form.id) return;
// if (this.form.id) return;
this.shopTypesActive = index;
const typeEnum = this.shopTypes[index].typeEnum;
this.form.typeEnum = typeEnum;
@ -740,6 +767,7 @@ export default {
},
// 删除突破按
uploadRemove(arr) {
this.form.images = arr;
},
// 选择规格属性
@ -933,6 +961,18 @@ export default {
</script>
<style scoped lang="scss">
.upImgStyle {
cursor: pointer;
width: 148px;
height: 148px;
line-height: 148px;
text-align: center;
border: 1px dashed #ccc;
border-radius: 1%;
font-size: 30px;
color: #ccc;
}
.shop_list {
.item {
display: flex;
@ -988,4 +1028,20 @@ export default {
cursor: pointer;
}
}
.buttonstyle {
border-radius: 50%;
color: #db1616;
background-color: #fff;
font-size: 20px;
display: none;
position: absolute;
right: -10px;
top: -10px;
z-index: 10;
}
.showStyle:hover>.buttonstyle {
display: block;
}
</style>

110
src/views/product/components/addImages.vue
View File

@ -1,33 +1,58 @@
<template>
<div v-if="dialogVisible">
<el-dialog title="请选择" :visible.sync="dialogVisible" width="">
<el-select v-model="value" placeholder="请选择" @change="changeEvent">
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
<span style="float: left">{{ item.name }}</span>
<span style="float: right; color: #8492a6; font-size: 13px"><i class="el-icon-error "
@click="deleteType(item.id)"></i></span>
</el-option>
</el-select>
<el-button type="primary" @click="dialogTableVisibles = true">新增类型</el-button>
<el-button type="primary" @click="showUpload = true">新增图片</el-button>
<imageComponent @onSelectImage="onSelectImage" @getList="getList" @getlists="getlists" :list='dataImages'>
</imageComponent>
<el-dialog title="请选择" :visible.sync="dialogVisible" width="1000px">
<el-container>
<el-aside style="background-color: #fff;" width="150px">
<ul style="padding-left: 0;">
<li style="cursor: pointer;" v-for="item in options" :key="item.id"
:class="[activedata == item.id ? 'activedata' : '']" @click="changeEvent(item.id)">{{
item.name }}</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>
<el-pagination layout="prev, pager, next" :total="total" :page-size="20"
@current-change="handleCurrentChange">
</el-pagination>
</el-main>
</el-container>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="sumbit">确 定</el-button>
</span>
</el-dialog>
<!-- <el-select v-model="value" placeholder="请选择" @change="changeEvent">
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
<span style="float: left">{{ item.name }}</span>
<template v-if="item.id != '681'">
<template v-if="item.id != '682'">
<template v-if="item.id != '699'">
<span style="float: right; color: #8492a6; font-size: 13px"><i class="el-icon-error "
@click="deleteType(item.id)"></i></span>
</template>
</template>
</template>
</el-option>
</el-select> -->
<!-- <el-button type="primary" @click="dialogTableVisibles = true">新增类型</el-button> -->
<!-- <el-button type="primary" @click="showUpload = true">新增图片</el-button> -->
<!-- 新增类型 -->
<el-dialog title="新增类型" :visible.sync="dialogTableVisibles">
<!-- <el-dialog title="新增类型" :visible.sync="dialogTableVisibles">
<el-input v-model="typedata" placeholder="请输入类型" autocomplete="off"></el-input>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogTableVisibles = false">取 消</el-button>
<el-button type="primary" @click="addtype">确 定</el-button>
</span>
</el-dialog>
</el-dialog> -->
<!-- 新增图片 -->
<template v-if="showUpload">
<el-dialog :visible.sync="showUpload" :close-on-click-modal="false" append-to-body width="500px"
<!-- <template v-if="showUpload">
<el-dialog :visible.sync="showUpload" :close-on-click-modal="false" append-to-body width="1000px"
@close="showUpload = false">
<el-upload :before-remove="handleBeforeRemove" list-type="picture-card" :on-success="handleSuccess"
:file-list="fileList" :headers="headers" :action="qiNiuUploadApi" class="upload-demo" multiple>
@ -37,7 +62,7 @@
<el-button type="primary" @click="doSubmit">确认</el-button>
</div>
</el-dialog>
</template>
</template> -->
</div>
</template>
@ -69,14 +94,28 @@ export default {
typedata: '',
showUpload: false,
page: 1,
total: 0,
activedata: '681'
}
},
mounted() {
this.getType()
},
methods: {
changeEvent() {
uplocation() {
this.activedata = -1
this.page = 1
this.dataImages = []
this.total = 0
this.getList()
},
changeEvent(id) {
this.page = 1
this.activedata = id
this.getList()
},
handleCurrentChange(i) {
this.page = i
this.getList()
},
// 删除类型
@ -93,10 +132,10 @@ export default {
this.getType()
this.$message({
type: 'success',
message: '删除成功!'
message: res.msg
});
}).catch(() => {
this.$message.error(res.msg);
});
},
// 刷新列表数据
@ -137,15 +176,13 @@ export default {
name: this.typedata
});
if (res.msg == '成功') {
this.typedata = ''
this.dialogTableVisibles = false
this.getType()
}
}
},
getlists() {
this.page++
this.getList()
},
sumbit() {
this.dialogVisible = false
this.$emit('successEvent', this.selectImage)
@ -155,18 +192,14 @@ export default {
},
async getList() {
let obj = {
category: this.value,
category: this.activedata == -1 ? '' : this.activedata,
page: this.page,
size: 20,
size: this.activedata == -1 ? 17:18,
store_id: localStorage.getItem("shopId"),
}
const res = await getcommonpicture(obj);
if (this.page == 1) {
this.dataImages = res.data
} else {
this.dataImages.push(...res.data)
}
this.dataImages = res.data
this.total = res.count
},
async getType(valueIndex) {
const res = await getcommonCategor({
@ -181,4 +214,15 @@ export default {
}
}
}
</script>
</script>
<style scoped>
.activedata {
color: #1890ff;
}
.uplocation {
cursor: pointer;
position: absolute;
bottom: 20px;
}
</style>

99
src/views/product/components/imageComponent.vue
View File

@ -1,32 +1,95 @@
<template>
<div>
<ul class="ulStyle" v-infinite-scroll="load">
<ul class="ulStyle">
<li class="upImgStyles" @click="showUpload = true" v-if="activedata == -1">
+
</li>
<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="">
<el-popconfirm title="确定删除吗？" class="show" @confirm="deleteEvent(item.id)">
<i class="el-icon-error buttonstyle" slot="reference"></i>
</el-popconfirm>
<!-- <el-popconfirm title="确定删除吗？" class="show" @confirm="deleteEvent(item.id)">
<template v-if="item.pid != '681'">
<template v-if="item.pid != '682'">
<template v-if="item.pid != '699'">
<i class="el-icon-error buttonstyle" slot="reference"></i>
</template>
</template>
</template>
</el-popconfirm> -->
</li>
</ul>
<template v-if="showUpload">
<el-dialog :visible.sync="showUpload" :close-on-click-modal="false" append-to-body width="1000px"
@close="showUpload = false">
<el-upload :before-remove="handleBeforeRemove" list-type="picture-card" :on-success="handleSuccess"
:file-list="fileList" :headers="headers" :action="qiNiuUploadApi" class="upload-demo" multiple>
<i class="el-icon-plus"></i>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="doSubmit">确认</el-button>
</div>
</el-dialog>
</template>
</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";
export default {
props: ['list'],
computed: {
...mapGetters(["qiNiuUploadApi"])
},
props: ['list', 'activedata'],
data() {
return {
showUpload: false,
selectList: [],
files: [],
fileList: [],
headers: {
Authorization: getToken()
},
}
},
mounted() {
},
methods: {
load() {
this.$emit('getlists')
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
})
})
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);
},
clickEvent(d) {
this.selectList = d
@ -51,6 +114,7 @@ ul,
li {
list-style: none;
}
.show {
position: absolute;
right: -10px;
@ -68,6 +132,7 @@ li {
background-color: #fff;
font-size: 20px;
}
.ulStyle {
display: flex;
flex-wrap: wrap;
@ -76,18 +141,30 @@ li {
}
.listyle {
width: 110px;
height: 110px;
margin-right: 10px;
margin-top: 10px;
border: 5px solid #fff;
position: relative;
}
.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>
</style>

3
src/views/product/index.vue
View File

@ -53,6 +53,9 @@
<template v-slot="scope">
<span>￥{{ scope.row.lowPrice }}</span>
</template>
</el-table-column>
<el-table-column label="商品规格" prop="typeEnum">
</el-table-column>
<el-table-column label="销量/库存">
<template v-slot="scope">