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

33
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) => { export const addHomeSwiperApi = (data) => {
return request({ return request({
url: "/material-mall/bm_slide_show", url: '/material-mall/bm_slide_show',
method: "post", method: 'post',
data, data,
}); })
}; }
// 轮播图列表 // 轮播图列表
export const getSwiperListApi = (data) => { export const getSwiperListApi = (data) => {
return request({ return request({
url: "/material-mall/bm_slide_show/list", url: '/material-mall/bm_slide_show/list',
method: "get", method: 'get',
params: data, params: data,
}); })
}; }
// 修改轮播图状态 // 修改轮播图状态
export const editHomeSwiperTypeApi = (data) => { export const editHomeSwiperTypeApi = (data) => {
return request({ return request({
url: "/material-mall/bm_slide_show/edit", url: '/material-mall/bm_slide_show/edit',
method: "post", method: 'post',
data, data,
}); })
}; }
// 删除轮播图 // 删除轮播图
export const deleteHomeSwiperApi = (id) => { export const deleteHomeSwiperApi = (id) => {
return request({ return request({
url: `/material-mall/bm_slide_show/del/${id}`, url: `/material-mall/bm_slide_show/del/${id}`,
method: "post", method: 'post',
data, })
}); }
};

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

@ -1,7 +1,16 @@
<template> <template>
<el-color-picker <el-color-picker
v-model="theme" v-model="theme"
:predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]" :predefine="[
'#409EFF',
'#1890ff',
'#304156',
'#212121',
'#11a983',
'#13c2c2',
'#6959CD',
'#f5222d',
]"
class="theme-picker" class="theme-picker"
popper-class="theme-picker-dropdown" popper-class="theme-picker-dropdown"
/> />
@ -15,24 +24,24 @@ export default {
data() { data() {
return { return {
chalk: '', // content of theme-chalk css chalk: '', // content of theme-chalk css
theme: '' theme: '',
} }
}, },
computed: { computed: {
defaultTheme() { defaultTheme() {
return this.$store.state.settings.theme return this.$store.state.settings.theme
} },
}, },
watch: { watch: {
defaultTheme: { defaultTheme: {
handler: function (val, oldVal) { handler: function (val, oldVal) {
this.theme = val this.theme = val
}, },
immediate: true immediate: true,
}, },
async theme(val) { async theme(val) {
await this.setTheme(val) await this.setTheme(val)
} },
}, },
created() { created() {
if (this.defaultTheme !== ORIGINAL_THEME) { if (this.defaultTheme !== ORIGINAL_THEME) {
@ -45,12 +54,20 @@ export default {
const oldVal = this.chalk ? this.theme : ORIGINAL_THEME const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
if (typeof val !== 'string') return if (typeof val !== 'string') return
const themeCluster = this.getThemeCluster(val.replace('#', '')) const themeCluster = this.getThemeCluster(val.replace('#', ''))
const originalCluster = this.getThemeCluster(oldVal.replace('#', '')) const originalCluster = this.getThemeCluster(
oldVal.replace('#', ''),
)
const getHandler = (variable, id) => { const getHandler = (variable, id) => {
return () => { return () => {
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', '')) const originalCluster = this.getThemeCluster(
const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster) ORIGINAL_THEME.replace('#', ''),
)
const newStyle = this.updateStyle(
this[variable],
originalCluster,
themeCluster,
)
let styleTag = document.getElementById(id) let styleTag = document.getElementById(id)
if (!styleTag) { if (!styleTag) {
@ -71,15 +88,23 @@ export default {
chalkHandler() chalkHandler()
const styles = [].slice.call(document.querySelectorAll('style')) const styles = [].slice
.filter(style => { .call(document.querySelectorAll('style'))
.filter((style) => {
const text = style.innerText const text = style.innerText
return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text) return (
new RegExp(oldVal, 'i').test(text) &&
!/Chalk Variables/.test(text)
)
}) })
styles.forEach(style => { styles.forEach((style) => {
const { innerText } = style const { innerText } = style
if (typeof innerText !== 'string') return if (typeof innerText !== 'string') return
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster) style.innerText = this.updateStyle(
innerText,
originalCluster,
themeCluster,
)
}) })
this.$emit('change', val) this.$emit('change', val)
@ -88,17 +113,23 @@ export default {
updateStyle(style, oldCluster, newCluster) { updateStyle(style, oldCluster, newCluster) {
let newStyle = style let newStyle = style
oldCluster.forEach((color, index) => { oldCluster.forEach((color, index) => {
newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index]) newStyle = newStyle.replace(
new RegExp(color, 'ig'),
newCluster[index],
)
}) })
return newStyle return newStyle
}, },
getCSSString(url, variable) { getCSSString(url, variable) {
return new Promise(resolve => { return new Promise((resolve) => {
const xhr = new XMLHttpRequest() const xhr = new XMLHttpRequest()
xhr.onreadystatechange = () => { xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) { if (xhr.readyState === 4 && xhr.status === 200) {
this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '') this[variable] = xhr.responseText.replace(
/@font-face{[^}]+}/,
'',
)
resolve() resolve()
} }
} }
@ -113,7 +144,8 @@ export default {
let green = parseInt(color.slice(2, 4), 16) let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16) let blue = parseInt(color.slice(4, 6), 16)
if (tint === 0) { // when primary color is in its rgb space if (tint === 0) {
// when primary color is in its rgb space
return [red, green, blue].join(',') return [red, green, blue].join(',')
} else { } else {
red += Math.round(tint * (255 - red)) red += Math.round(tint * (255 - red))
@ -150,8 +182,8 @@ export default {
} }
clusters.push(shadeColor(theme, 0.1)) clusters.push(shadeColor(theme, 0.1))
return clusters return clusters
} },
} },
} }
</script> </script>

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

@ -15,7 +15,12 @@
</el-row> </el-row>
<el-table :data="swiperList" border> <el-table :data="swiperList" border>
<el-table-column label="序号" align="center" width="100" type="index" /> <el-table-column
label="序号"
align="center"
width="100"
type="index"
/>
<el-table-column <el-table-column
prop="slidePicture" prop="slidePicture"
label="图片链接" label="图片链接"
@ -40,7 +45,11 @@
/> />
<el-table-column label="操作" align="center"> <el-table-column label="操作" align="center">
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<el-button size="mini" type="danger" @click="onClickDelete(row)"> <el-button
size="mini"
type="danger"
@click="onClickDelete(row)"
>
删除 删除
</el-button> </el-button>
</template> </template>
@ -108,7 +117,7 @@
append-to-body append-to-body
:before-close=" :before-close="
() => { () => {
dialogInnerVisible = false; dialogInnerVisible = false
} }
" "
:visible.sync="dialogInnerVisible" :visible.sync="dialogInnerVisible"
@ -123,158 +132,148 @@
</template> </template>
<script> <script>
import { getToken } from "@/utils/auth"; import { getToken } from '@/utils/auth'
import { import {
addHomeSwiperApi, addHomeSwiperApi,
getSwiperListApi, getSwiperListApi,
deleteHomeSwiperApi, deleteHomeSwiperApi,
editHomeSwiperTypeApi, editHomeSwiperTypeApi,
} from "@/api/swiper-manage/index.js"; } from '@/api/swiper-manage/index.js'
export default { export default {
data() { data() {
return { return {
uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/upload", uploadFileUrl: process.env.VUE_APP_BASE_API + '/file/upload',
dialogInnerVisible: false, dialogInnerVisible: false,
fileType: ["png", "jpg", "jpeg"], fileType: ['png', 'jpg', 'jpeg'],
previewUrl: "", previewUrl: '',
addSwiperVisible: false, addSwiperVisible: false,
value1: true, value1: true,
value2: true, value2: true,
addSwiperFormRules: {}, addSwiperFormRules: {},
addSwiperForm: { addSwiperForm: {
fileList: [], fileList: [],
slidePicture: "", slidePicture: '',
slideLink: "", slideLink: '',
delFlag: true, delFlag: true,
}, },
headers: { headers: {
Authorization: "Bearer " + getToken(), Authorization: 'Bearer ' + getToken(),
}, },
swiperList: [ swiperList: [],
{ }
imgSrc: "xxxx",
isShow: true,
outLink: "xxxx999",
},
{
imgSrc: "xxxx",
isShow: true,
outLink: "xxxx999",
},
{
imgSrc: "xxxx",
isShow: false,
outLink: "xxxx999",
},
],
};
}, },
created() { created() {
this.getSwiperListData(); this.getSwiperListData()
}, },
methods: { methods: {
handleAdd() { handleAdd() {
this.addSwiperVisible = true; this.addSwiperVisible = true
}, },
// 获取列表 // 获取列表
async getSwiperListData() { async getSwiperListData() {
const res = await getSwiperListApi(); const res = await getSwiperListApi()
this.swiperList = res.rows; this.swiperList = res.rows
this.swiperList.forEach((e) => { this.swiperList.forEach((e) => {
e.delFlag == 0 ? (e.delFlag = true) : (e.delFlag = false); e.delFlag == 0 ? (e.delFlag = true) : (e.delFlag = false)
}); })
// console.log(res, "列表数据--"); // console.log(res, "列表数据--");
}, },
async submitForm() { async submitForm() {
// 组装参数 // 组装参数
const { slidePicture, slideLink, delFlag } = this.addSwiperForm; const { slidePicture, slideLink, delFlag } = this.addSwiperForm
const params = { const params = {
slidePicture, slidePicture,
slideLink, slideLink,
delFlag: delFlag ? 0 : 2, delFlag: delFlag ? 0 : 2,
}; }
const res = await addHomeSwiperApi(params); const res = await addHomeSwiperApi(params)
if (res.code === 200) { if (res.code === 200) {
this.$modal.msgSuccess("新增成功"); this.$modal.msgSuccess('新增成功')
this.$refs.addSwiperFormRef.resetFields(); this.$refs.addSwiperFormRef.resetFields()
this.addSwiperVisible = false; this.addSwiperVisible = false
this.getSwiperListData(); this.getSwiperListData()
} }
// console.log(res, "上传结果--"); // console.log(res, "上传结果--");
// this.addSwiperVisible = false; // this.addSwiperVisible = false;
}, },
cancel() { cancel() {
this.addSwiperVisible = false; this.addSwiperVisible = false
}, },
// 上传之前 // 上传之前
handleBeforeUpload(file) { handleBeforeUpload(file) {
const isSvg = this.fileType.some((e) => file.type.includes(e)); const isSvg = this.fileType.some((e) => file.type.includes(e))
if (!isSvg) { if (!isSvg) {
this.$modal.msgError( this.$modal.msgError(
`文件格式不正确, 请上传${this.fileType.join("、")}格式的文件!` `文件格式不正确, 请上传${this.fileType.join(
); '、',
return false; )}格式的文件!`,
)
return false
} }
const isLt = file.size / 1024 / 1024 < 10; const isLt = file.size / 1024 / 1024 < 10
if (!isLt) { if (!isLt) {
this.$modal.msgError(`图片大小不能超过 10 MB`); this.$modal.msgError(`图片大小不能超过 10 MB`)
return false; return false
} }
this.$modal.loading("图片正在上传，请稍候..."); this.$modal.loading('图片正在上传，请稍候...')
}, },
// 移除 // 移除
handleRemove(file) { handleRemove(file) {
this.addSwiperForm.fileList = this.addSwiperForm.fileList.filter( this.addSwiperForm.fileList = this.addSwiperForm.fileList.filter(
(item) => item.uid !== file.uid (item) => item.uid !== file.uid,
); )
this.addSwiperForm.slidePicture = ""; this.addSwiperForm.slidePicture = ''
}, },
// 预览 图片 // 预览 图片
handlePreview(file) { handlePreview(file) {
this.dialogInnerVisible = true; this.dialogInnerVisible = true
this.previewUrl = file.url; this.previewUrl = file.url
}, },
// 文件个数超出限制 // 文件个数超出限制
handleExceed() { handleExceed() {
this.$modal.msgError(`上传的图片数量不能超过 1 个`); this.$modal.msgError(`上传的图片数量不能超过 1 个`)
}, },
// 上传成功 // 上传成功
handleSuccess(res) { handleSuccess(res) {
if (res.code === 200) { if (res.code === 200) {
this.addSwiperForm.slidePicture = res.data.url; this.addSwiperForm.slidePicture = res.data.url
} else { } else {
this.addSwiperForm.fileList = []; this.$modal.msgError('上传失败')
this.addSwiperForm.slidePicture = ""; this.addSwiperForm.fileList = []
this.addSwiperForm.slidePicture = ''
} }
this.$modal.closeLoading(); this.$modal.closeLoading()
}, },
onClickDelete(row) { onClickDelete(row) {
this.$confirm("确定删除该轮播图吗？", "提示", { this.$confirm('确定删除该轮播图吗？', '提示', {
confirmButtonText: "确定", confirmButtonText: '确定',
cancelButtonText: "取消", cancelButtonText: '取消',
type: "warning", type: 'warning',
}) })
.then(() => { .then(async () => {
console.log(row, "row-"); const res = await deleteHomeSwiperApi(row.id)
if (res.code === 200) {
this.$modal.msgSuccess('删除成功')
this.getSwiperListData()
}
}) })
.catch(() => {}); .catch(() => {})
}, },
async onSwitchChange(val, row) { async onSwitchChange(val, row) {
console.log(row, "列表消息"); const { id } = row
const { id } = row;
const params = { const params = {
id, id,
delFlag: val ? 0 : 2, delFlag: val ? 0 : 2,
}; }
const res = await editHomeSwiperTypeApi(params); const res = await editHomeSwiperTypeApi(params)
if (res.code === 200) { if (res.code === 200) {
this.$modal.msgSuccess("状态修改成功"); this.$modal.msgSuccess('状态修改成功')
this.getSwiperListData(); this.getSwiperListData()
} }
}, },
}, },
}; }
</script> </script>