1、36壁纸页面列表显示前端实现
This commit is contained in:
xjs
parent
2e7c457b9f
commit
d3e61cab4e
|
|
@ -35,3 +35,11 @@ export function getWallpaperList(data) {
|
|||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获取壁纸类别
|
||||
export function getType() {
|
||||
return request({
|
||||
url: '/webmagic/_36wallpaper/getType',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,50 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="app-container">
|
||||
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
|
||||
<el-form-item label="图片类型" prop="type">
|
||||
<el-select
|
||||
v-model="queryParams.type"
|
||||
placeholder="请输入"
|
||||
size="small"
|
||||
@change="handleQuery"
|
||||
style="width: 180px">
|
||||
<el-option
|
||||
v-for="index in typeList"
|
||||
:key="index"
|
||||
:label="index"
|
||||
:value="index"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
|
||||
<div class="bigDiv">
|
||||
<el-row :gutter="20" class="el-row" >
|
||||
<el-row :gutter="20" class="el-row">
|
||||
<el-col :span="4" v-for="data in wallpaperList">
|
||||
<div class="grid-content bg-purple">
|
||||
|
||||
<div style="height: 10px;background-color: #ffba00"></div>
|
||||
|
||||
<!--图片div-->
|
||||
<div style="">
|
||||
<el-image
|
||||
style="height: 108px;width: 192px"
|
||||
:src="data.pictureUrl"
|
||||
fit="fill"
|
||||
style="height: 160px"
|
||||
:alt="data.pictureName"
|
||||
:preview-src-list="[data.pictureUrl]">
|
||||
</el-image>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<!--标签div-->
|
||||
<div style="margin-top: 5px">
|
||||
<div v-for="label in data.labels" style="float: left;margin-left: 4px;margin-top: 4px">
|
||||
<el-tag>{{ label }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -35,7 +66,7 @@
|
|||
|
||||
<script>
|
||||
|
||||
import {getWallpaperList} from '@/api/business/webmagic/_36wallpaper/wallpaper36'
|
||||
import {getWallpaperList, getType} from '@/api/business/webmagic/_36wallpaper/wallpaper36'
|
||||
|
||||
export default {
|
||||
name: "wallpaper_36Show",
|
||||
|
|
@ -47,28 +78,57 @@ export default {
|
|||
pageNum: 1,
|
||||
pageSize: 12,
|
||||
condition: null,
|
||||
type: null,
|
||||
},
|
||||
|
||||
//总数
|
||||
total:0,
|
||||
total: 0,
|
||||
|
||||
//壁纸列表数据
|
||||
wallpaperList:{},
|
||||
wallpaperList: {},
|
||||
|
||||
//壁纸类别
|
||||
typeList: [],
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getList();
|
||||
this.init()
|
||||
|
||||
},
|
||||
|
||||
|
||||
methods:{
|
||||
methods: {
|
||||
getList() {
|
||||
|
||||
getWallpaperList(this.queryParams).then(response => {
|
||||
this.wallpaperList = response.data.records;
|
||||
this.total = response.data.total;
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
init() {
|
||||
//获取类别
|
||||
getType().then(res => {
|
||||
this.typeList = res.data
|
||||
|
||||
this.queryParams.type = this.typeList[0]
|
||||
this.getList();
|
||||
})
|
||||
},
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.queryParams.type = this.typeList[0]
|
||||
this.handleQuery();
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -77,22 +137,22 @@ export default {
|
|||
|
||||
<style scoped>
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
background: #666666;
|
||||
}
|
||||
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
border-radius: 10px;
|
||||
min-height: 36px;
|
||||
max-height: 350px;
|
||||
height: 320px;
|
||||
height: 310px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.bigDiv{
|
||||
.bigDiv {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.el-row{
|
||||
.el-row {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ import io.swagger.annotations.ApiOperation;
|
|||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
|
||||
import java.util.List;
|
||||
import java.util.Objects;
|
||||
|
||||
/**
|
||||
|
|
@ -70,6 +71,15 @@ public class _36wallpaperController extends MyBaseController<_36wallpaper> {
|
|||
return AjaxResult.success(list);
|
||||
}
|
||||
|
||||
@GetMapping("getType")
|
||||
@ApiOperation("获取壁纸类别")
|
||||
@RequiresPermissions("webmagic:_36wallpaper:list")
|
||||
public AjaxResult getType() {
|
||||
List<Object> list = wallpaperService.getType();
|
||||
return AjaxResult.success(list);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//----------------------远程rpc调用---------------------------
|
||||
|
|
|
|||
|
|
@ -44,6 +44,12 @@ public class _36wallpaper extends BaseEntity implements Serializable {
|
|||
@Excel(name = "照片标签(多个用 , 分割)")
|
||||
private String label;
|
||||
|
||||
/**
|
||||
* label分割成数组
|
||||
*/
|
||||
@TableField(exist = false)
|
||||
private String[] labels;
|
||||
|
||||
/** 创建时间 */
|
||||
@Excel(name = "创建时间",dateFormat = "yyyy-MM-dd HH:mm:ss")
|
||||
@TableField(fill = FieldFill.INSERT)
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
|
|||
import com.baomidou.mybatisplus.extension.service.IService;
|
||||
import com.xjs._36wallpaper.pojo._36wallpaper;
|
||||
|
||||
import java.util.List;
|
||||
|
||||
/**
|
||||
* 36壁纸网service接口
|
||||
* @author xiejs
|
||||
|
|
@ -45,4 +47,12 @@ public interface _36wallpaperService extends IService<_36wallpaper> {
|
|||
* @return page
|
||||
*/
|
||||
IPage<_36wallpaper> selectWallpaperList(Page<_36wallpaper> page, _36wallpaper wallpaper);
|
||||
|
||||
|
||||
/**
|
||||
* 获取壁纸类别
|
||||
* @return list
|
||||
*/
|
||||
List<Object> getType();
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ import org.springframework.beans.factory.annotation.Autowired;
|
|||
import org.springframework.stereotype.Service;
|
||||
|
||||
import javax.annotation.Resource;
|
||||
import java.util.List;
|
||||
import java.util.regex.Pattern;
|
||||
|
||||
import static com.xjs._36wallpaper.consts._36wallpaperConst.*;
|
||||
|
|
@ -136,13 +137,30 @@ public class _36wallpaperServiceImpl extends ServiceImpl<_36wallpaperMapper, _36
|
|||
public IPage<_36wallpaper> selectWallpaperList(Page<_36wallpaper> page, _36wallpaper wallpaper) {
|
||||
String condition = wallpaper.getCondition();
|
||||
QueryWrapper<_36wallpaper> wr = new QueryWrapper<>();
|
||||
wr.eq(StringUtils.isNotEmpty(wallpaper.getType()), "type", wallpaper.getType());
|
||||
wr.and(StringUtils.isNotEmpty(condition), obj -> {
|
||||
obj.like("picture_name", condition)
|
||||
.or().like("type", condition)
|
||||
.or().like("label", condition);
|
||||
});
|
||||
Page<_36wallpaper> wallpaperList = this.page(page, wr);
|
||||
for (_36wallpaper record : wallpaperList.getRecords()) {
|
||||
//分割label
|
||||
String label = record.getLabel();
|
||||
if (StringUtils.isNotEmpty(label)) {
|
||||
String[] strings = label.split(",");
|
||||
record.setLabels(strings);
|
||||
}
|
||||
}
|
||||
|
||||
return this.page(page,wr);
|
||||
return wallpaperList;
|
||||
}
|
||||
|
||||
@Override
|
||||
public List<Object> getType() {
|
||||
QueryWrapper<_36wallpaper> wrapper = new QueryWrapper<_36wallpaper>().groupBy("type");
|
||||
wrapper.select("type");
|
||||
return this.listObjs(wrapper);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue