bonus
/
bonus-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

轮播图装修问题修复

This commit is contained in:
BianLzhaoMin 2025-01-16 13:17:31 +08:00
parent 9ee8de8321
commit 4747e467e8
3 changed files with 457 additions and 427 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/api/swiper-manage/index.js
View File

@ -1,34 +1,33 @@
import request from "@/utils/request";
import request from '@/utils/request'
// 新增上传首页轮播图
export const addHomeSwiperApi = (data) => {
return request({
url: "/material-mall/bm_slide_show",
method: "post",
data,
});
};
return request({
url: '/material-mall/bm_slide_show',
method: 'post',
data,
})
}
// 轮播图列表
export const getSwiperListApi = (data) => {
return request({
url: "/material-mall/bm_slide_show/list",
method: "get",
params: data,
});
};
return request({
url: '/material-mall/bm_slide_show/list',
method: 'get',
params: data,
})
}
// 修改轮播图状态
export const editHomeSwiperTypeApi = (data) => {
return request({
url: "/material-mall/bm_slide_show/edit",
method: "post",
data,
});
};
return request({
url: '/material-mall/bm_slide_show/edit',
method: 'post',
data,
})
}
// 删除轮播图
export const deleteHomeSwiperApi = (id) => {
return request({
url: `/material-mall/bm_slide_show/del/${id}`,
method: "post",
data,
});
};
return request({
url: `/material-mall/bm_slide_show/del/${id}`,
method: 'post',
})
}

306
src/components/ThemePicker/index.vue
View File

@ -1,10 +1,19 @@
<template>
<el-color-picker
v-model="theme"
:predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
<el-color-picker
v-model="theme"
:predefine="[
'#409EFF',
'#1890ff',
'#304156',
'#212121',
'#11a983',
'#13c2c2',
'#6959CD',
'#f5222d',
]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</template>
<script>
@ -12,162 +21,185 @@ const version = require('element-ui/package.json').version // element-ui version
const ORIGINAL_THEME = '#409EFF' // default color
export default {
data() {
return {
chalk: '', // content of theme-chalk css
theme: ''
}
},
computed: {
defaultTheme() {
return this.$store.state.settings.theme
}
},
watch: {
defaultTheme: {
handler: function(val, oldVal) {
this.theme = val
},
immediate: true
},
async theme(val) {
await this.setTheme(val)
}
},
created() {
if(this.defaultTheme !== ORIGINAL_THEME) {
this.setTheme(this.defaultTheme)
}
},
methods: {
async setTheme(val) {
const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
if (typeof val !== 'string') return
const themeCluster = this.getThemeCluster(val.replace('#', ''))
const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
const getHandler = (variable, id) => {
return () => {
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
let styleTag = document.getElementById(id)
if (!styleTag) {
styleTag = document.createElement('style')
styleTag.setAttribute('id', id)
document.head.appendChild(styleTag)
}
styleTag.innerText = newStyle
data() {
return {
chalk: '', // content of theme-chalk css
theme: '',
}
}
if (!this.chalk) {
const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
await this.getCSSString(url, 'chalk')
}
const chalkHandler = getHandler('chalk', 'chalk-style')
chalkHandler()
const styles = [].slice.call(document.querySelectorAll('style'))
.filter(style => {
const text = style.innerText
return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
})
styles.forEach(style => {
const { innerText } = style
if (typeof innerText !== 'string') return
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
})
this.$emit('change', val)
},
updateStyle(style, oldCluster, newCluster) {
let newStyle = style
oldCluster.forEach((color, index) => {
newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
})
return newStyle
computed: {
defaultTheme() {
return this.$store.state.settings.theme
},
},
getCSSString(url, variable) {
return new Promise(resolve => {
const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
resolve()
}
watch: {
defaultTheme: {
handler: function (val, oldVal) {
this.theme = val
},
immediate: true,
},
async theme(val) {
await this.setTheme(val)
},
},
created() {
if (this.defaultTheme !== ORIGINAL_THEME) {
this.setTheme(this.defaultTheme)
}
xhr.open('GET', url)
xhr.send()
})
},
getThemeCluster(theme) {
const tintColor = (color, tint) => {
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16)
methods: {
async setTheme(val) {
const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
if (typeof val !== 'string') return
const themeCluster = this.getThemeCluster(val.replace('#', ''))
const originalCluster = this.getThemeCluster(
oldVal.replace('#', ''),
)
if (tint === 0) { // when primary color is in its rgb space
return [red, green, blue].join(',')
} else {
red += Math.round(tint * (255 - red))
green += Math.round(tint * (255 - green))
blue += Math.round(tint * (255 - blue))
const getHandler = (variable, id) => {
return () => {
const originalCluster = this.getThemeCluster(
ORIGINAL_THEME.replace('#', ''),
)
const newStyle = this.updateStyle(
this[variable],
originalCluster,
themeCluster,
)
red = red.toString(16)
green = green.toString(16)
blue = blue.toString(16)
let styleTag = document.getElementById(id)
if (!styleTag) {
styleTag = document.createElement('style')
styleTag.setAttribute('id', id)
document.head.appendChild(styleTag)
}
styleTag.innerText = newStyle
}
}
return `#${red}${green}${blue}`
}
}
if (!this.chalk) {
const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
await this.getCSSString(url, 'chalk')
}
const shadeColor = (color, shade) => {
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16)
const chalkHandler = getHandler('chalk', 'chalk-style')
red = Math.round((1 - shade) * red)
green = Math.round((1 - shade) * green)
blue = Math.round((1 - shade) * blue)
chalkHandler()
red = red.toString(16)
green = green.toString(16)
blue = blue.toString(16)
const styles = [].slice
.call(document.querySelectorAll('style'))
.filter((style) => {
const text = style.innerText
return (
new RegExp(oldVal, 'i').test(text) &&
!/Chalk Variables/.test(text)
)
})
styles.forEach((style) => {
const { innerText } = style
if (typeof innerText !== 'string') return
style.innerText = this.updateStyle(
innerText,
originalCluster,
themeCluster,
)
})
return `#${red}${green}${blue}`
}
this.$emit('change', val)
},
const clusters = [theme]
for (let i = 0; i <= 9; i++) {
clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
}
clusters.push(shadeColor(theme, 0.1))
return clusters
}
}
updateStyle(style, oldCluster, newCluster) {
let newStyle = style
oldCluster.forEach((color, index) => {
newStyle = newStyle.replace(
new RegExp(color, 'ig'),
newCluster[index],
)
})
return newStyle
},
getCSSString(url, variable) {
return new Promise((resolve) => {
const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
this[variable] = xhr.responseText.replace(
/@font-face{[^}]+}/,
'',
)
resolve()
}
}
xhr.open('GET', url)
xhr.send()
})
},
getThemeCluster(theme) {
const tintColor = (color, tint) => {
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16)
if (tint === 0) {
// when primary color is in its rgb space
return [red, green, blue].join(',')
} else {
red += Math.round(tint * (255 - red))
green += Math.round(tint * (255 - green))
blue += Math.round(tint * (255 - blue))
red = red.toString(16)
green = green.toString(16)
blue = blue.toString(16)
return `#${red}${green}${blue}`
}
}
const shadeColor = (color, shade) => {
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16)
red = Math.round((1 - shade) * red)
green = Math.round((1 - shade) * green)
blue = Math.round((1 - shade) * blue)
red = red.toString(16)
green = green.toString(16)
blue = blue.toString(16)
return `#${red}${green}${blue}`
}
const clusters = [theme]
for (let i = 0; i <= 9; i++) {
clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
}
clusters.push(shadeColor(theme, 0.1))
return clusters
},
},
}
</script>
<style>
.theme-message,
.theme-picker-dropdown {
z-index: 99999 !important;
z-index: 99999 !important;
}
.theme-picker .el-color-picker__trigger {
height: 26px !important;
width: 26px !important;
padding: 2px;
height: 26px !important;
width: 26px !important;
padding: 2px;
}
.theme-picker-dropdown .el-color-dropdown__link-btn {
display: none;
display: none;
}
</style>

529
src/views/swiper-manage/index.vue
View File

@ -1,280 +1,279 @@
<template>
<div class="app-container">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>
新增轮播图
</el-button>
</el-col>
</el-row>
<el-table :data="swiperList" border>
<el-table-column label="序号" align="center" width="100" type="index" />
<el-table-column
prop="slidePicture"
label="图片链接"
align="center"
show-overflow-tooltip
/>
<el-table-column prop="isShow" label="是否禁用" align="center">
<template slot-scope="{ row }">
<el-switch
active-text="激活"
inactive-text="禁用"
v-model="row.delFlag"
@change="onSwitchChange($event, row)"
/>
</template>
</el-table-column>
<el-table-column
prop="slideLink"
label="外部链接"
align="center"
show-overflow-tooltip
/>
<el-table-column label="操作" align="center">
<template slot-scope="{ row }">
<el-button size="mini" type="danger" @click="onClickDelete(row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog
width="50%"
append-to-body
title="新增轮播图"
:visible.sync="addSwiperVisible"
>
<el-form
ref="addSwiperFormRef"
:model="addSwiperForm"
:rules="addSwiperFormRules"
label-width="120px"
>
<el-row>
<el-col :span="24">
<el-form-item label="外部链接：" prop="slideLink">
<el-input
placeholder="请输入外部链接"
v-model="addSwiperForm.slideLink"
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="是否激活：" prop="delFlag">
<el-switch
active-text="激活"
inactive-text="禁用"
v-model="addSwiperForm.delFlag"
></el-switch>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="轮播图上传：" prop="fileList">
<el-upload
:limit="1"
:headers="headers"
:show-file-list="true"
:action="uploadFileUrl"
list-type="picture-card"
:on-exceed="handleExceed"
:on-remove="handleRemove"
:on-preview="handlePreview"
:on-success="handleSuccess"
:before-upload="handleBeforeUpload"
:file-list="addSwiperForm.fileList"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
</el-col>
<div class="app-container">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>
新增轮播图
</el-button>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
<el-dialog
width="30%"
append-to-body
:before-close="
() => {
dialogInnerVisible = false;
}
"
:visible.sync="dialogInnerVisible"
>
<img
:src="previewUrl"
style="display: block; max-width: 100%; margin: 0 auto"
/>
</el-dialog>
</el-dialog>
</div>
<el-table :data="swiperList" border>
<el-table-column
label="序号"
align="center"
width="100"
type="index"
/>
<el-table-column
prop="slidePicture"
label="图片链接"
align="center"
show-overflow-tooltip
/>
<el-table-column prop="isShow" label="是否禁用" align="center">
<template slot-scope="{ row }">
<el-switch
active-text="激活"
inactive-text="禁用"
v-model="row.delFlag"
@change="onSwitchChange($event, row)"
/>
</template>
</el-table-column>
<el-table-column
prop="slideLink"
label="外部链接"
align="center"
show-overflow-tooltip
/>
<el-table-column label="操作" align="center">
<template slot-scope="{ row }">
<el-button
size="mini"
type="danger"
@click="onClickDelete(row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog
width="50%"
append-to-body
title="新增轮播图"
:visible.sync="addSwiperVisible"
>
<el-form
ref="addSwiperFormRef"
:model="addSwiperForm"
:rules="addSwiperFormRules"
label-width="120px"
>
<el-row>
<el-col :span="24">
<el-form-item label="外部链接：" prop="slideLink">
<el-input
placeholder="请输入外部链接"
v-model="addSwiperForm.slideLink"
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="是否激活：" prop="delFlag">
<el-switch
active-text="激活"
inactive-text="禁用"
v-model="addSwiperForm.delFlag"
></el-switch>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="轮播图上传：" prop="fileList">
<el-upload
:limit="1"
:headers="headers"
:show-file-list="true"
:action="uploadFileUrl"
list-type="picture-card"
:on-exceed="handleExceed"
:on-remove="handleRemove"
:on-preview="handlePreview"
:on-success="handleSuccess"
:before-upload="handleBeforeUpload"
:file-list="addSwiperForm.fileList"
>
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
<el-dialog
width="30%"
append-to-body
:before-close="
() => {
dialogInnerVisible = false
}
"
:visible.sync="dialogInnerVisible"
>
<img
:src="previewUrl"
style="display: block; max-width: 100%; margin: 0 auto"
/>
</el-dialog>
</el-dialog>
</div>
</template>
<script>
import { getToken } from "@/utils/auth";
import { getToken } from '@/utils/auth'
import {
addHomeSwiperApi,
getSwiperListApi,
deleteHomeSwiperApi,
editHomeSwiperTypeApi,
} from "@/api/swiper-manage/index.js";
addHomeSwiperApi,
getSwiperListApi,
deleteHomeSwiperApi,
editHomeSwiperTypeApi,
} from '@/api/swiper-manage/index.js'
export default {
data() {
return {
uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/upload",
dialogInnerVisible: false,
fileType: ["png", "jpg", "jpeg"],
previewUrl: "",
addSwiperVisible: false,
value1: true,
value2: true,
addSwiperFormRules: {},
addSwiperForm: {
fileList: [],
slidePicture: "",
slideLink: "",
delFlag: true,
},
headers: {
Authorization: "Bearer " + getToken(),
},
swiperList: [
{
imgSrc: "xxxx",
isShow: true,
outLink: "xxxx999",
data() {
return {
uploadFileUrl: process.env.VUE_APP_BASE_API + '/file/upload',
dialogInnerVisible: false,
fileType: ['png', 'jpg', 'jpeg'],
previewUrl: '',
addSwiperVisible: false,
value1: true,
value2: true,
addSwiperFormRules: {},
addSwiperForm: {
fileList: [],
slidePicture: '',
slideLink: '',
delFlag: true,
},
headers: {
Authorization: 'Bearer ' + getToken(),
},
swiperList: [],
}
},
created() {
this.getSwiperListData()
},
methods: {
handleAdd() {
this.addSwiperVisible = true
},
{
imgSrc: "xxxx",
isShow: true,
outLink: "xxxx999",
// 获取列表
async getSwiperListData() {
const res = await getSwiperListApi()
this.swiperList = res.rows
this.swiperList.forEach((e) => {
e.delFlag == 0 ? (e.delFlag = true) : (e.delFlag = false)
})
// console.log(res, "列表数据--");
},
{
imgSrc: "xxxx",
isShow: false,
outLink: "xxxx999",
async submitForm() {
// 组装参数
const { slidePicture, slideLink, delFlag } = this.addSwiperForm
const params = {
slidePicture,
slideLink,
delFlag: delFlag ? 0 : 2,
}
const res = await addHomeSwiperApi(params)
if (res.code === 200) {
this.$modal.msgSuccess('新增成功')
this.$refs.addSwiperFormRef.resetFields()
this.addSwiperVisible = false
this.getSwiperListData()
}
// console.log(res, "上传结果--");
// this.addSwiperVisible = false;
},
cancel() {
this.addSwiperVisible = false
},
// 上传之前
handleBeforeUpload(file) {
const isSvg = this.fileType.some((e) => file.type.includes(e))
if (!isSvg) {
this.$modal.msgError(
`文件格式不正确, 请上传${this.fileType.join(
'、',
)}格式的文件!`,
)
return false
}
const isLt = file.size / 1024 / 1024 < 10
if (!isLt) {
this.$modal.msgError(`图片大小不能超过 10 MB`)
return false
}
this.$modal.loading('图片正在上传，请稍候...')
},
// 移除
handleRemove(file) {
this.addSwiperForm.fileList = this.addSwiperForm.fileList.filter(
(item) => item.uid !== file.uid,
)
this.addSwiperForm.slidePicture = ''
},
// 预览 图片
handlePreview(file) {
this.dialogInnerVisible = true
this.previewUrl = file.url
},
],
};
},
created() {
this.getSwiperListData();
},
methods: {
handleAdd() {
this.addSwiperVisible = true;
},
// 获取列表
async getSwiperListData() {
const res = await getSwiperListApi();
this.swiperList = res.rows;
this.swiperList.forEach((e) => {
e.delFlag == 0 ? (e.delFlag = true) : (e.delFlag = false);
});
// console.log(res, "列表数据--");
},
async submitForm() {
// 组装参数
const { slidePicture, slideLink, delFlag } = this.addSwiperForm;
const params = {
slidePicture,
slideLink,
delFlag: delFlag ? 0 : 2,
};
const res = await addHomeSwiperApi(params);
if (res.code === 200) {
this.$modal.msgSuccess("新增成功");
this.$refs.addSwiperFormRef.resetFields();
this.addSwiperVisible = false;
this.getSwiperListData();
}
// console.log(res, "上传结果--");
// this.addSwiperVisible = false;
},
cancel() {
this.addSwiperVisible = false;
},
// 上传之前
handleBeforeUpload(file) {
const isSvg = this.fileType.some((e) => file.type.includes(e));
if (!isSvg) {
this.$modal.msgError(
`文件格式不正确, 请上传${this.fileType.join("、")}格式的文件!`
);
return false;
}
const isLt = file.size / 1024 / 1024 < 10;
if (!isLt) {
this.$modal.msgError(`图片大小不能超过 10 MB`);
return false;
}
this.$modal.loading("图片正在上传，请稍候...");
},
// 移除
handleRemove(file) {
this.addSwiperForm.fileList = this.addSwiperForm.fileList.filter(
(item) => item.uid !== file.uid
);
this.addSwiperForm.slidePicture = "";
},
// 预览 图片
handlePreview(file) {
this.dialogInnerVisible = true;
this.previewUrl = file.url;
},
// 文件个数超出限制
handleExceed() {
this.$modal.msgError(`上传的图片数量不能超过 1 个`)
},
// 上传成功
handleSuccess(res) {
if (res.code === 200) {
this.addSwiperForm.slidePicture = res.data.url
} else {
this.$modal.msgError('上传失败')
this.addSwiperForm.fileList = []
this.addSwiperForm.slidePicture = ''
}
this.$modal.closeLoading()
},
// 文件个数超出限制
handleExceed() {
this.$modal.msgError(`上传的图片数量不能超过 1 个`);
onClickDelete(row) {
this.$confirm('确定删除该轮播图吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(async () => {
const res = await deleteHomeSwiperApi(row.id)
if (res.code === 200) {
this.$modal.msgSuccess('删除成功')
this.getSwiperListData()
}
})
.catch(() => {})
},
async onSwitchChange(val, row) {
const { id } = row
const params = {
id,
delFlag: val ? 0 : 2,
}
const res = await editHomeSwiperTypeApi(params)
if (res.code === 200) {
this.$modal.msgSuccess('状态修改成功')
this.getSwiperListData()
}
},
},
// 上传成功
handleSuccess(res) {
if (res.code === 200) {
this.addSwiperForm.slidePicture = res.data.url;
} else {
this.addSwiperForm.fileList = [];
this.addSwiperForm.slidePicture = "";
}
this.$modal.closeLoading();
},
onClickDelete(row) {
this.$confirm("确定删除该轮播图吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
console.log(row, "row-");
})
.catch(() => {});
},
async onSwitchChange(val, row) {
console.log(row, "列表消息");
const { id } = row;
const params = {
id,
delFlag: val ? 0 : 2,
};
const res = await editHomeSwiperTypeApi(params);
if (res.code === 200) {
this.$modal.msgSuccess("状态修改成功");
this.getSwiperListData();
}
},
},
};
}
</script>