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) => {
return request({
url: "/material-mall/bm_slide_show",
method: "post",
url: '/material-mall/bm_slide_show',
method: 'post',
data,
});
};
})
}
// 轮播图列表
export const getSwiperListApi = (data) => {
return request({
url: "/material-mall/bm_slide_show/list",
method: "get",
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",
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,
});
};
method: 'post',
})
}

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

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

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

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