商品列表-商品图片-选择图片增删改
This commit is contained in:
duan
parent
79e1282c68
commit
1d39576b34
|
|
@ -14,5 +14,4 @@ VUE_APP_BASE_API = 'https://admintestpapi.sxczgkj.cn'
|
|||
VUE_APP_WS_API = 'ws://192.168.2.128:8000'
|
||||
|
||||
VUE_APP_PHP_API = 'https://kysh.sxczgkj.cn'
|
||||
|
||||
# 是否启用 babel-plugin-dynamic-import-node插
|
||||
|
|
@ -1,17 +1,57 @@
|
|||
import request from "@/utils/requestPhp";
|
||||
|
||||
// 查询图库
|
||||
export function getcommonCategor(data,params) {
|
||||
return request({
|
||||
url: data + `/channel/file/getcommon-category`,
|
||||
method: "get",params
|
||||
});
|
||||
}
|
||||
export function getcommonpicture(data,params) {
|
||||
return request({
|
||||
url: data + "/channel/file/getcommon-picture",
|
||||
method: "get",
|
||||
params
|
||||
});
|
||||
}
|
||||
// 获取图片分类
|
||||
export function getcommonCategor(data) {
|
||||
return request({
|
||||
url: `/sourcematerial/getcommon-category`,
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 获取图片
|
||||
export function getcommonpicture(data) {
|
||||
return request({
|
||||
url: "/sourcematerial/getcommon-picture",
|
||||
method: 'post',
|
||||
data: data
|
||||
});
|
||||
}
|
||||
|
||||
export function storeAddcategory(data) {
|
||||
return request({
|
||||
url: '/sourcematerial/store-addcategory',
|
||||
method: 'post',
|
||||
data: {
|
||||
...data
|
||||
},
|
||||
})
|
||||
}
|
||||
export function addImg(data) {
|
||||
return request({
|
||||
url: '/sourcematerial/add-img',
|
||||
method: 'post',
|
||||
data: {
|
||||
...data
|
||||
},
|
||||
})
|
||||
}
|
||||
// 删除图片
|
||||
export function delimg(data) {
|
||||
return request({
|
||||
url: '/sourcematerial/delimg',
|
||||
method: 'post',
|
||||
data: {
|
||||
...data
|
||||
},
|
||||
})
|
||||
}
|
||||
// 删除类型
|
||||
export function delcate(data) {
|
||||
return request({
|
||||
url: '/sourcematerial/delcate',
|
||||
method: 'post',
|
||||
data: {
|
||||
...data
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -10,7 +10,6 @@ import Element from "element-ui";
|
|||
// import VueSelectImage from 'vue-select-image'
|
||||
// import "vue-select-image/dist/vue-select-image.css";
|
||||
// Vue.use(VueSelectImage)
|
||||
// "vue-select-image": "^1.9.0",
|
||||
|
||||
// 数据字典
|
||||
import dict from "./components/Dict";
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import Cookies from 'js-cookie'
|
|||
|
||||
// 创建axios实例
|
||||
const service = axios.create({
|
||||
baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_PHP_API : '/php',
|
||||
baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_PHP_API : '/source',
|
||||
// baseURL: process.env.VUE_APP_PHP_API, // api 的 base_url
|
||||
timeout: Config.timeout // 请求超时时间
|
||||
})
|
||||
|
|
@ -19,7 +19,7 @@ service.interceptors.request.use(
|
|||
// if (getToken()) {
|
||||
// config.headers['Authorization'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
|
||||
// }
|
||||
// config.headers['Content-Type'] = 'application/json'
|
||||
config.headers['Content-Type'] = 'text/html; charset=UTF-8'
|
||||
// config.headers['loginName'] = 'admin'
|
||||
// config.headers['token'] = 'eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyVHlwZSI6Ik1HIiwiZXhwIjoxNjkwMTgwNzE2LCJ1c2VySWQiOiIyNDQiLCJpYXQiOjE2ODg3MDk0ODcsImxvZ2luTmFtZSI6ImFkbWluIn0.lqxxvv2-FcecQngMBorz4MpkB3mIJQDG-IUULQyV-KQ'
|
||||
// config.headers["userId"] = '244'
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
<el-form-item label="商品图片">
|
||||
<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">
|
||||
|
|
@ -552,15 +552,15 @@ 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.src
|
||||
this.form.images.push(item.src);
|
||||
item.url = item.url
|
||||
this.form.images.push(item.url);
|
||||
})
|
||||
this.$refs.uploadImg.fileList.push(...d)
|
||||
// this.form.images.push(res[0]);
|
||||
// console.log(this.$refs.uploadImg.fileList, '调试111111')
|
||||
// console.log(this.$refs.uploadImg.files, '调试222')
|
||||
},
|
||||
priceFormat(item, key) {
|
||||
const messageheight = 48;
|
||||
|
|
|
|||
|
|
@ -1,56 +1,141 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-if="dialogVisible">
|
||||
<el-dialog title="请选择" :visible.sync="dialogVisible" width="">
|
||||
<el-select v-model="value" placeholder="请选择" @change="selectchange">
|
||||
<el-select v-model="value" placeholder="请选择" @change="getList">
|
||||
<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>
|
||||
<br />
|
||||
<br />
|
||||
<!-- <vue-select-image :dataImages="dataImages" h="100px" w="100px" :is-multiple="true"
|
||||
@onselectmultipleimage="onSelectImage">
|
||||
</vue-select-image> -->
|
||||
<el-button type="primary" @click="dialogTableVisibles = true">新增类型</el-button>
|
||||
<el-button type="primary" @click="showUpload = true">新增图片</el-button>
|
||||
<imageComponent @onSelectImage="onSelectImage" @getList="getList" :list='dataImages'></imageComponent>
|
||||
<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-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>
|
||||
<!-- 新增图片 -->
|
||||
<template v-if="showUpload">
|
||||
<el-dialog :visible.sync="showUpload" :close-on-click-modal="false" append-to-body width="500px"
|
||||
@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 { getcommonCategor, getcommonpicture } from "@/api/imagesPhp";
|
||||
import { getcommonCategor, getcommonpicture, storeAddcategory, addImg, delcate } from "@/api/imagesPhp";
|
||||
import { mapGetters } from "vuex";
|
||||
import { getToken } from "@/utils/auth";
|
||||
import imageComponent from './imageComponent.vue'
|
||||
export default {
|
||||
computed: {
|
||||
...mapGetters(["qiNiuUploadApi"])
|
||||
},
|
||||
components: {
|
||||
imageComponent
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
dialogTableVisibles: false,
|
||||
selectImage: [],
|
||||
dataImages: [
|
||||
// {
|
||||
// id: '1',
|
||||
// src: 'https://unsplash.it/200?random',
|
||||
// alt: 'Alt Image 1'
|
||||
// },
|
||||
// {
|
||||
// id: '2',
|
||||
// src: 'https://unsplash.it/200?random',
|
||||
// alt: 'Alt Image 2',
|
||||
// disabled: true
|
||||
// }
|
||||
],
|
||||
headers: {
|
||||
Authorization: getToken()
|
||||
},
|
||||
files: [],
|
||||
dataImages: [],
|
||||
options: [],
|
||||
value: ''
|
||||
fileList: [],
|
||||
value: '',
|
||||
typedata: '',
|
||||
showUpload: false,
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getType()
|
||||
},
|
||||
methods: {
|
||||
selectchange() {
|
||||
this.getList()
|
||||
// 删除类型
|
||||
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: '删除成功!'
|
||||
});
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
// 刷新列表数据
|
||||
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: 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) {
|
||||
const res = await storeAddcategory({
|
||||
store_id: localStorage.getItem("shopId"),
|
||||
name: this.typedata
|
||||
});
|
||||
if (res.msg == '成功') {
|
||||
this.dialogTableVisibles = false
|
||||
this.getType()
|
||||
}
|
||||
}
|
||||
},
|
||||
sumbit() {
|
||||
this.dialogVisible = false
|
||||
|
|
@ -67,18 +152,20 @@ export default {
|
|||
store_id: localStorage.getItem("shopId"),
|
||||
|
||||
}
|
||||
const res = await getcommonpicture('https://kysh.sxczgkj.cn', obj);
|
||||
const res = await getcommonpicture(obj);
|
||||
this.dataImages = res.data
|
||||
},
|
||||
async getType() {
|
||||
const res = await getcommonCategor('https://kysh.sxczgkj.cn',{
|
||||
async getType(valueIndex) {
|
||||
const res = await getcommonCategor({
|
||||
store_id: localStorage.getItem("shopId"),
|
||||
});
|
||||
this.options = res.data
|
||||
this.value = res.data[0].id
|
||||
this.value = valueIndex ? valueIndex : res.data[0].id
|
||||
this.getList()
|
||||
},
|
||||
onSelectImage(d) { this.selectImage = d }
|
||||
onSelectImage(d) {
|
||||
this.selectImage = [d]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<div>
|
||||
<ul class="ulStyle">
|
||||
<li v-for="item in list" :key="item.id" class="listyle" :class="[selectList.id == item.id ? 'active' : '']"
|
||||
@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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { delimg } from "@/api/imagesPhp";
|
||||
|
||||
export default {
|
||||
props: ['list'],
|
||||
data() {
|
||||
return {
|
||||
selectList: [],
|
||||
}
|
||||
}, methods: {
|
||||
clickEvent(d) {
|
||||
this.selectList = d
|
||||
this.$emit('onSelectImage', d)
|
||||
},
|
||||
async deleteEvent(id) {
|
||||
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;
|
||||
}
|
||||
|
||||
.ulStyle {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.listyle {
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
border: 5px solid #fff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.active {
|
||||
border: 5px solid #1890ff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -41,11 +41,11 @@ module.exports = {
|
|||
'^/auth': 'auth'
|
||||
}
|
||||
},
|
||||
'/php': {
|
||||
'/source': {
|
||||
target: process.env.VUE_APP_PHP_API,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
'^/auth': 'auth'
|
||||
'^/source': 'source'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue