商城轮播图管理功能

功能介绍：

1.轮播图列表分页功能；

2.轮播图添加功能；

3.轮播图编辑功能；

4.轮播图删除功能；

5.轮播图启用禁用功能；

6.轮播图获取排序号功能；

7.轮播图查看详情功能；

8.轮播图图片预览功能；

1.接口引入

import {deleteFile, //删除图片baseUrl,getPcMallBannerPage,//列表addPcMallBanner,//添加delPcMallBanner,//删除enablePcMallOrDisable,//启用禁用getPcMallSortList,//排序resultsThePreviewClientBanner,//预览getPcMallBannerInfo,//查看详情editPcMallBanner,//编辑upload//图片上传} from "../../api/userMG"

2. 列表页面

<template><div class="p20"><el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumbTips"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item>PC端轮播图</el-breadcrumb-item></el-breadcrumb><el-tabs v-model="activeName" style="margin-top:20px;"><el-tab-pane label="PC端轮播图" name="0"></el-tab-pane></el-tabs><div class="crew-tab"><div class="mt20 mb10">建议686*200px，图片大小小于1M，jpg/png/jpeg格式。有效期内发布0-5张，超过取前5顺位，创建上限为10个。</div><div class="mt20"><el-button v-throttle size="small" type="primary" @click="handleAdd">新增</el-button><el-button v-throttle size="small" type="success" @click="shotPreviewImg">效果预览</el-button><el-button v-throttle size="small" type="success" @click="handleReload">刷新</el-button></div></div><!--列表--><el-table :data="LunboTableData" border highlight-current-row style="width: 100%;height:auto;margin-top:20px":header-cell-style="{textAlign: 'center',background:'#fafafa'}" :cell-style="{ textAlign: 'center' }"><el-table-column prop="" label="序号" width="50" type="index" :index="getIndex" header-align="center"></el-table-column><el-table-column prop="imgUrl" label="图片" width="250"><template slot-scope="scope"><el-image style="width: 200px; height: 100px" :src="$baseImgUrl+scope.row.imgUrl" fit="contain"></el-image></template></el-table-column><el-table-column prop="" label="有效时间" width="250"><template slot-scope="scope"><div>开始时间：{{scope.row.startTime?scope.row.startTime:"暂无"}}</div><div>结束时间：{{scope.row.endTime?scope.row.endTime:"暂无"}}</div></template></el-table-column><el-table-column prop="remark" label="备注" width="150"><template slot-scope="scope"><div class="textHide">{{scope.row.remark}}</div></template></el-table-column><el-table-column prop="jumpType" label="跳转类型" width="150"><template slot-scope="scope"><span>{{scope.row.jumpType==1?"内部跳转":scope.row.jumpType==2?"外部跳转":"无"}}</span></template></el-table-column><el-table-column prop="jumpPage" label="跳转页面" width="150"><template slot-scope="scope"><span>{{scope.row.jumpPage=="1"?"独立详情页":"/"}}</span></template></el-table-column><el-table-column prop="link" label="链接地址" width="150"><template slot-scope="scope"><span>{{scope.row.link?scope.row.link:"/"}}</span></template></el-table-column><el-table-column prop="sort" label="排序" sortable></el-table-column><el-table-column prop="replaceUserName" label="是否启用" width="150"><template slot-scope="scope"><el-switch :disabled="scope.row.status=='0'||scope.row.status=='2'" @change="changeSwitch(scope.row)"v-model="scope.row.status" active-value="1" inactive-value="0" active-color="#13ce66"inactive-color="#ff4949" active-text="是" inactive-text="否"></el-switch></template></el-table-column><el-table-column label="操作" width="100" fixed="right"><template slot-scope="scope"><el-button @click="recordEdit(scope.row)" type="text" size="small">编辑</el-button><el-button @click="recordDel(scope.row)" type="text" size="small">删除</el-button></template></el-table-column></el-table><!-- 分页 --><el-pagination class="mt20  text-right" background @size-change="handleSizeChange"@current-change="handleCurrentChange" :current-page="pagination.pageNum" :page-sizes="[3,5,10, 20, 30, 40,50]":page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination></div>
</template>

轮播图列表分页功能

获取数据列表

    //获取数据列表getLunboTabledata() {let params = {pageNum: this.pagination.pageNum,pageSize: this.pagination.pageSize}getPcMallBannerPage(params).then(res => {console.log(res, "列表")if (res.code == 200) {this.LunboTableData = res.data.records;this.current = res.data.current;this.pagination.pagesize = res.data.size;this.pagination.total = res.data.total;} else {this.$message.error(res.msg);}}).catch(err => {this.$message.error(res.msg);});},

列表自定义序号

//自定义序号
getIndex(index) {return (index + 1) + (this.current - 1) * (this.pagination.pagesize)
},

3.轮播图添加功能

    // 新增handleAdd() {this.modelDialogTitle = "新建";this.isShowSkipWebpage = true;this.showCreateModel = true; //打开新建弹窗// 重置this.createModelForm.imgUrl = ""this.createModelForm.startTime = "";this.createModelForm.endTime = "";this.createModelForm.remark = ""; //备注this.createModelForm.jumpType = "1";this.createModelForm.skipWebpage = "独立详情页";this.createModelForm.content = "";this.createModelForm.title = "";this.createModelForm.link = "";this.createModelForm.sort = "";this.createModelForm.status = "1";},

4.添加、编辑功能

添加编辑弹窗

这里有使用富文本编辑器功能，后面更新这个功能

<!-- 新建轮播图弹窗 --><el-dialog :title="modelDialogTitle" :visible.sync="showCreateModel" width="1000px" :close-on-click-modal="false"@close="closeCreateModel"><el-form :model="createModelForm" ref="createModelForm" label-width="140px" class="demo-createModelForm"size="35"><el-row><el-col :span="24"><div class="modelPicPhoto"><el-form-item label="图片：" prop="imgUrl"><span class="start"></span><el-upload ref="upload" :action="baseUrl + '/file/upload'" :on-preview="handleModelPicPreview":on-remove="handleModelPicRemove" list-type="picture-card" :multiple="false":headers="{ Authorization: token }" :on-success="handleModelPicSuccess" :limit="1":file-list="modelPicFilesList" :before-upload="beforeUpload" accept="image/jpeg,image/png,image/jpg":on-exceed="handleModelPicExceed"><i class="el-icon-plus"></i><div slot="tip" class="el-upload__tip fontIntail">建议尺寸680*230px，只能上传jpg/png/jpeg文件，且不超过1M</div></el-upload></el-form-item></div></el-col><el-col :span="12"><el-form-item label="开始时间：" prop="startTime"><el-date-picker clearable style="width: 100%;" v-model="createModelForm.startTime" type="datetime"value-format="yyyy-MM-dd HH:mm:ss" default-time="00:00:00" :picker-options="pickerOptions"placeholder="请选择"></el-date-picker></el-form-item></el-col><el-col :span="12"><el-form-item label="结束时间：" prop="endTime"><el-date-picker clearable style="width: 100%;" v-model="createModelForm.endTime" type="datetime"value-format="yyyy-MM-dd HH:mm:ss" default-time="23:59:59" :picker-options="pickerOptions"placeholder="请选择"></el-date-picker></el-form-item></el-col><el-col :span="24"><el-form-item label="备注：" prop="remark"><el-input type="textarea" rows="4" maxlength="70" show-word-limit v-model="createModelForm.remark"></el-input></el-form-item></el-col><el-col :span="12"><el-form-item label="跳转类型：" prop="jumpType"><el-radio-group v-model="createModelForm.jumpType" @input="handleJumpType"><el-radio label="1">内部跳转</el-radio><el-radio label="2">外部跳转</el-radio><el-radio label="3">无</el-radio></el-radio-group></el-form-item></el-col><!-- 外部跳转对应外部链接 --><el-col :span="12" v-if="createModelForm.jumpType==2"><el-form-item label="外部链接：" prop="link"><el-input v-model="createModelForm.link" placeholder="请输入外部链接"></el-input></el-form-item></el-col><el-col :span="12" v-if="createModelForm.jumpType==1"><el-form-item label="跳转页面：" prop="jumpPage"><el-select v-model="createModelForm.jumpPage" placeholder="请选择" style="width:100%"><el-option label="独立详情页" value="1"></el-option></el-select></el-form-item></el-col><el-col :span="24" v-if="isShowSkipWebpage&&createModelForm.jumpType==1"><el-form-item label="编辑发送内容："><el-col :span="24" class=" mb20"><el-form-item><el-input clearable type="text" placeholder="独立详情页页面标题" v-model="createModelForm.title"maxlength="10" show-word-limit></el-input></el-form-item></el-col><el-col :span="24"><el-form-item style="height:600px;"><quill-editor v-model="createModelForm.content" ref="myQuillEditor" style="height: 500px;":options="contentOption"></quill-editor><!-- 自定义上传图片弹窗 --><!-- <el-uploadref="ztphotoUrl"class="upload-demo ivu-upload":action="baseUrl + '/file/upload'":headers="{ Authorization: token }":on-success="handleZtSuccess"accept="image/jpeg,image/png,image/jpg"list-type="picture"><el-button v-throttle size="small" type="primary" class="ivu-btn">点击上传</el-button></el-upload> --><van-uploader :after-read="afterCard" :before-read="beforeRead" accept="image/*" class="uploadfile":max-size="10240 * 1024" @oversize="onOversize"><img src="../../assets/upload.png"></van-uploader></el-form-item></el-col></el-form-item></el-col><el-col :span="8"><el-form-item label="排序：" prop="sort" style="position:relative"><el-select clearable v-model="createModelForm.sort" placeholder="请选择" style="width:100%"><el-option v-for="(item,index) in sortOptions" :key="index" :label="item" :value="item"></el-option></el-select><span class="sortStart"></span></el-form-item></el-col><el-col :span="12"><el-form-item label="启用：" prop="status" :rules="{required: true, message: '请选择', trigger: 'change'}"><el-switch v-model="createModelForm.status" active-value="1" inactive-value="0" active-color="#13ce66"inactive-color="#ff4949" active-text="是" inactive-text="否" @change="changeDisable"></el-switch></el-form-item></el-col><el-col :span="8" :offset="16"><el-form-item><el-button v-throttle type="primary" @click="saveForm('createModelForm')">{{modelDialogTitle=='新建'?'保 存':'编 辑'}}</el-button><el-button @click="cancelForm('createModelForm')">取 消</el-button></el-form-item></el-col></el-row></el-form></el-dialog>

    // 保存saveForm(createModelForm) {console.log(this.createModelForm)if (this.createModelForm.imgUrl == "") {this.$message.warning("请上传图片");return;} else if (this.createModelForm.sort == "") {this.$message.warning("请选择排序");return;}// 判断提交的数据if (this.createModelForm.jumpType == "1") {// 内部跳转  主题帖、外部链接为空this.createModelForm.link = "";} else if (this.createModelForm.jumpType == "2") {// 外部跳转this.createModelForm.jumpPage = "";this.createModelForm.title = "";this.createModelForm.content = "";} else if (this.createModelForm.jumpType == "3") {// 无this.createModelForm.jumpPage = "";this.createModelForm.title = "";this.createModelForm.content = "";}this.$refs[createModelForm].validate((valid) => {if (valid) {// 保存this.createModelForm.terminal = this.terminal; //承运端console.log(this.createModelForm, "保存内容");if (this.modelDialogTitle == "新建") {addPcMallBanner(this.createModelForm).then(res => {if (res.code == 200) {this.pagination.pageNum = 1;this.getLunboTabledata();this.showCreateModel = false;this.modelPicFilesList = [];this.modelPicList = [];this.createModelForm.content = "";this.createModelForm.sort = "";this.$refs.createModelForm.resetFields();this.$message.success("保存成功");// 更新排序getPcMallSortList().then(res => {console.log(res, "排序");this.sortOptions = res.data;});} else {this.$message.error(res.msg);}})} else if (this.modelDialogTitle == "编辑") {editPcMallBanner(this.createModelForm).then(res => {if (res.code == 200) {this.pagination.pageNum = 1;this.getLunboTabledata();this.showCreateModel = false;this.modelPicFilesList = [];this.modelPicList = [];this.createModelForm.content = "";this.createModelForm.sort = "";this.$refs.createModelForm.resetFields();this.$message.success("编辑成功");// 更新排序getPcMallSortList().then(res => {console.log(res, "排序");this.sortOptions = res.data;});} else {this.$message.error(res.msg);}})}} else {console.log("error")return false;}})},

5.删除功能

    // 删除recordDel(row) {this.$confirm('此操作将永久删除该行数据, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {delPcMallBanner({id: row.id}).then(res => {if (res.code == 200) {this.pagination.pageNum = 1;// 排序getPcMallSortList().then(res => {console.log(res, "排序");this.sortOptions = res.data;});this.getLunboTabledata();this.$message.success('删除成功');} else {this.$message.error("删除失败");}})}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});},

6.启用禁用功能

      // 启用变禁用changeSwitch(row) {console.log(row, "启动")enablePcMallOrDisable({id: row.id,status:row.status}).then(res => {if (res.code == 200) {// 排序getPcMallSortList().then(res => {console.log(res, "排序");this.sortOptions = res.data;});this.$message.success("操作成功");} else {this.$message.error("操作失败");}})},

7.获取排序号功能

轮播图根据选择的排序决定哪一个轮播图在前面

// 排序getPcMallSortList().then(res => {console.log(res, "排序");this.sortOptions = res.data;});

这里在添加、编辑、删除的时候都要调用这个接口，更新轮播图排序。

8.查看详情功能

点击列表编辑时候调用查看详情接口获取数据

recordEdit(row) {this.modelDialogTitle = "编辑";// 详情接口this.modelPicFilesList = [];getPcMallBannerInfo({id: row.id}).then(res => {if (res.code == 200) {this.showCreateModel = true;this.createModelForm = res.data;console.log(this.createModelForm, "编辑板块")if(this.createModelForm.jumpType=="1"){this.createModelForm.jumpPage = "1";}if (this.createModelForm.jumpPage == '1') {this.isShowSkipWebpage = true;} else {this.isShowSkipWebpage = false;}let modelPicimageUrl = res.data.imgUrl ? this.$baseImgUrl + res.data.imgUrl : "";if (modelPicimageUrl == "") {this.createModelForm.imgUrl = "";} else {this.modelPicFilesList.push({"url": modelPicimageUrl})}} else {this.$message.error("获取数据失败")}})},

9.轮播图预览功能

<!-- 效果预览 --><el-dialog :visible.sync="isShotPreviewImg" title="效果预览" v-if="clientBanner.length>0"class="lunboModelDialog carrierLB" width="686px"><el-carousel :interval="3000" arrow="always"><el-carousel-item v-for="(item,index) in clientBanner" :key="index"><img :src="$baseImgUrl+item.imgUrl" width="100%"></el-carousel-item></el-carousel></el-dialog>

    // 效果预览shotPreviewImg() {getPcMallPreviewList().then(res => {if (res.code == 200) {console.log(res, "效果预览");if (res.data.length > 0) {this.clientBanner = res.data;this.isShotPreviewImg = true;} else {this.isShotPreviewImg = false;this.$message.warning("未找到预览的轮播图");}} else {this.isShotPreviewImg = false;this.$message.error(res.msg);}})},