guolong
/
wj_nft_backend_page
0
0
Fork 0
Code Issues Pull Requests Activity
Browse Source

PCPC轮播页面

dev
caoyizhong 3 years ago
parent
2718e47db2
commit
7e046378e3
3 changed files with 269 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      public/index.html
  2. 2
      src/views/wjnft/company/index.vue
  3. 319
      src/views/wjnft/rotation/index.vue

3
public/index.html
Unescape View File

@ -3,7 +3,8 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<!-- <meta name="renderer" content="webkit">-->
<meta name="referrer" content="no-referrer">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>

2
src/views/wjnft/company/index.vue
Unescape View File

@ -101,7 +101,7 @@
</el-table-column>
<el-table-column label="点赞数量" align="center" prop="thumbsUp" >
<template slot-scope="scope">
<span v-if="scope.row.thumbsUp">{{ thumbsUp }}</span>
<span v-if="scope.row.thumbsUp">{{ scope.row.thumbsUp }}</span>
<span v-else> —— </span>
</template>

319
src/views/wjnft/rotation/index.vue
Unescape View File

@ -22,6 +22,7 @@
<el-option label="首页" value="1"></el-option>
<el-option label="创作者" value="2"></el-option>
<el-option label="市场" value="3"></el-option>
<el-option label="藏品详情" value="31"></el-option>
<el-option label="公司" value="4"></el-option>
<el-option label="登陆注册" value="5"></el-option>
@ -107,6 +108,18 @@
<el-table v-loading="loading" :data="rotationList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" align="center" type="index" width="50" />
<el-table-column label="类别" align="center" prop="identification" >
<template slot-scope="scope">
<span v-if="scope.row.identification == 1">首页 </span>
<span v-if="scope.row.identification == 2">创作者 </span>
<span v-if="scope.row.identification == 3">市场 </span>
<span v-if="scope.row.identification == 31">藏品详情 </span>
<span v-if="scope.row.identification == 4">公司 </span>
<span v-if="scope.row.identification == 41">知识科普 </span>
<span v-if="scope.row.identification == 42">关于我们 </span>
<span v-if="scope.row.identification == 5">注册登陆 </span>
</template>
</el-table-column>
<el-table-column label="内容" align="center" prop="content" width="600" >
<template slot-scope="scope">
<!-- <div v-html="scope.row.content" style="height:200px;width:100%;overflow:auto"></div>-->
@ -136,15 +149,7 @@
</template>
</el-table-column>
<el-table-column label="类别" align="center" prop="identification" >
<template slot-scope="scope">
<span v-if="scope.row.identification == 1">首页 </span>
<span v-if="scope.row.identification == 2">创作者 </span>
<span v-if="scope.row.identification == 3">市场 </span>
<span v-if="scope.row.identification == 4">公司 </span>
<span v-if="scope.row.identification == 5">注册登陆 </span>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createdTime" >
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createdTime, '{y}-{m}-{d}') }}</span>
@ -191,52 +196,89 @@
<!-- 添加或修改pc端轮播图对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="类别" prop="identification">
<!-- <el-input v-model="form.identification" placeholder="请输入1-首页，2-创作者，3-市场，4-公司，5-登录注册" />-->
<el-select v-model="form.identification" placeholder="请选择类别" @change="conceal($event)">
<el-option label="首页" value="1"></el-option>
<el-option label="创作者" value="2"></el-option>
<el-option label="市场" value="3"></el-option>
<el-option label="藏品详情" value="31"></el-option>
<el-option label="公司" value="4"></el-option>
<el-option label="知识科普" value="41"></el-option>
<el-option label="关于我们" value="42"></el-option>
<el-option label="登陆注册" value="5"></el-option>
</el-select>
</el-form-item>
<el-form-item label="内容">
<editor v-model="form.content" :min-height="192" />
</el-form-item>
<el-form-item label="图片" prop="rotationId">
<!-- <el-input v-model="form.rotationId" placeholder="请输入pc端图片表id" />-->
<Upload ref="uploadFile" :urlPath="urlPath" v-if="echo" ></Upload>
<span> 上传文件只能是<b style="color: #C03639">png，jpeg，jpg</b >格式,大小不能超过<b style="color: #C03639">3M</b> </span>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
<el-form-item label="类别" prop="identification">
<!-- <el-input v-model="form.identification" placeholder="请输入1-首页，2-创作者，3-市场，4-公司，5-登录注册" />-->
<el-select v-model="form.identification" placeholder="请选择类别" @keyup.enter.native="handleQuery">
<el-option label="首页" value="1"></el-option>
<el-option label="创作者" value="2"></el-option>
<el-option label="市场" value="3"></el-option>
<el-option label="公司" value="4"></el-option>
<el-option label="登陆注册" value="5"></el-option>
</el-select>
<el-form-item label="广告图片" prop="rotationId" v-if="hide" >
<div>
<el-upload
ref="upload"
:action="action"
:headers="headers"
:limit="4"
:on-exceed="handleExceed"
list-type="picture-card"
:on-success="handleSuccess"
:auto-upload="true"
:before-upload="beforeUpload"
:file-list="imgList"
>
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<img
class="el-upload-list__item-thumbnail"
:src="file.url" alt=""
>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<i class="el-icon-download"></i>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
</div>
<span style="color: #C03639"> 需要上传4张图片</span><br>
<span> 上传文件只能是<b style="color: #C03639">png，jpeg，jpg</b >格式,大小不能超过<b style="color: #C03639">3M</b> </span>
<!-- <el-dialog :visible.sync="dialogVisible">-->
<!-- <img width="100%" :src="dialogImageUrl" alt="">-->
<!-- </el-dialog>-->
</el-form-item>
<!-- <el-form-item label="创建时间" prop="createdTime">-->
<!-- <el-date-picker clearable size="small"-->
<!-- v-model="form.createdTime"-->
<!-- type="date"-->
<!-- value-format="yyyy-MM-dd"-->
<!-- placeholder="选择创建时间">-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="更新时间" prop="updatedTime">-->
<!-- <el-date-picker clearable size="small"-->
<!-- v-model="form.updatedTime"-->
<!-- type="date"-->
<!-- value-format="yyyy-MM-dd"-->
<!-- placeholder="选择更新时间">-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="删除时间" prop="deletedTime">-->
<!-- <el-date-picker clearable size="small"-->
<!-- v-model="form.deletedTime"-->
<!-- type="date"-->
<!-- value-format="yyyy-MM-dd"-->
<!-- placeholder="选择删除时间">-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
@ -269,6 +311,13 @@ export default {
},
data() {
return {
hide:false,
pictures:[],
//文件上传
pictureUrl:[],
//
disabled: false,
imgList:[],
echo:false,
//图片路径
urlPath:null,
@ -276,6 +325,7 @@ export default {
//文件上传
dialogImageUrl: '',
dialogVisible: false,
// 遮罩层
loading: true,
// 选中数组
@ -300,6 +350,7 @@ export default {
pageSize: 10,
content: null,
rotationId: null,
advertising:null,
identification: null,
createdTime: null,
updatedTime: null,
@ -332,6 +383,14 @@ export default {
},
methods: {
conceal(event){
console.log(event);
if(event === "1"){
this.hide = true;
}else{
this.hide = false;
}
},
/** 查询pc端轮播图列表 */
getList() {
@ -362,6 +421,7 @@ export default {
content: null,
rotationId: null,
identification: null,
advertising:null,
createdTime: null,
updatedTime: null,
deletedTime: null
@ -403,9 +463,18 @@ export default {
if(len === 3){
this.form.identification = "市场"
}
if(len === 31){
this.form.identification = "藏品详情"
}
if(len === 4){
this.form.identification = "公司"
}
if(len === 41){
this.form.identification = "知识科普"
}
if(len === 42){
this.form.identification = "关于我们"
}
if(len === 5){
this.form.identification = "登录注册"
}
@ -424,9 +493,19 @@ export default {
if(len === "市场"){
this.form.identification = 3
}
if(len === "藏品详情"){
this.form.identification = 31
}
if(len === "公司"){
this.form.identification = 4
}
if(len === "知识科普"){
this.form.identification = 41
}
if(len === "关于我们"){
this.form.identification = 42
}
if(len === "登录注册"){
this.form.identification = 5
}
@ -434,10 +513,34 @@ export default {
},
/** 修改按钮操作 */
handleUpdate(row) {
this.imgList = [];
this.reset();
const id = row.id || this.ids
getRotation(id).then(response => {
this.form = response.data;
let picture = this.form.advertising;
// console.log(picture);
if( picture !== undefined){
if(picture.search(",") != -1 ){
let e = picture.split(",");
e.forEach( items => {
let obj = {}
obj.url = items
this.imgList.push(obj)
})
}else{
let t = this.form.pictureUrl
let obj = {}
obj.url = t
this.imgList.push(obj)
}
}
if(response.data.identification === 1) {
this.hide = true;
}else{
this.hide = false;
}
this.valuation( this.form.identification );
this.urlPath = response.data.rotationId;
this.open = true;
@ -451,28 +554,61 @@ export default {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
let url = "";
// console.log(this.pictureUrl.length)
// console.log(this.imgList.length)
// console.log(this.imgList)
if(this.pictureUrl.length > 0){
this.imgList.forEach(item =>{
if(url === ""){
url = item.url+',';
}else{
url = url + item.url+',';
}
});
if(this.pictureUrl.length > 1 ){
url = url + this.pictureUrl.join(",")
}else{
url = url + this.pictureUrl[0];
}
this.form.advertising = url;
}
this.form.rotationId = this.global.apiUrl;
//console.log(this.form);
console.log(this.form);
this.updateValuation(this.form.identification);
updateRotation(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.echo = false;
this.global.apiUrl = null;
this.pictureUrl =[];
this.$refs.upload.clearFiles();
this.getList();
});
} else {
// console.log(this.global.apiUrl+"serytws er");
this.form.rotationId = this.global.apiUrl;
console.log(this.form);
addRotation(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.echo = false;
this.global.apiUrl = null;
this.$refs.uploadFile.$refs.upload.clearFiles();
this.getList();
});
console.log(this.pictureUrl.length);
if(this.pictureUrl.length === 4){
this.form.advertising = this.pictureUrl.join(",");
console.log(this.form);
addRotation(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.echo = false;
this.global.apiUrl = null;
this.pictureUrl =[];
this.$refs.uploadFile.$refs.upload.clearFiles();
this.$refs.upload.clearFiles();
this.getList();
});
}else{
this.$message.warning("上传广告图片需要4张，请添加完成")
}
}
}
});
@ -492,7 +628,84 @@ export default {
this.download('wjnft/rotation/export', {
...this.queryParams
}, `rotation_${new Date().getTime()}.xlsx`)
}
},
// 上传文件时触发
beforeUpload(file) {
//console.log(file)
let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
const extension = testmsg === "png";
const extension1 = testmsg === "jpg";
const extension2 = testmsg === "jpeg";
const isLt32M = file.size / 1024 / 1024 < 3;
if (!extension && !extension2 && !extension1) {
this.$message.warning('上传文件只能是png,jpeg,jpg格式！');
}
if (!isLt32M) {
this.$message.warning('上传文件大小不能超过3MB！');
}
return (extension || extension2 || extension1) && isLt32M;
},
// 上传的提示
handleExceed(files, fileList) {
this.$message.warning('当前只允许上传四个文件');
},
//上传成功
handleSuccess(res, file) {
console.log( res,file );
//图片路径返回给父组件
// console.log(res);
this.pictureUrl.push( res.url);
//this.imgList.push({name:file.name,url:res.url });
return this.imgList;
},
//删除照片
handleRemove(file) {
// console.log(file);
if(file.name !== undefined){
// console.log(this.$refs.upload.uploadFiles);
// this.$refs.upload.clearFiles()
let n = this.$refs.upload.uploadFiles;
const finde = n.map(f => f.name).indexOf(file.name);
if(finde > -1) {
n.splice(finde, 1);
}
let ns = file.response.url;
//console.log(ns);
let item = this.pictureUrl;
// console.log(item.length)
for (let i=0; i<item.length; i++){
if (item[i] === ns){
item.splice(i, 1)
}
}
//console.log(item);
this.pictureUrl = item;
//console.log(item.length)
}else{
const findex = this.imgList.map(f => f.url).indexOf(file.url);
if(findex > -1) {
this.imgList.splice(findex, 1);
}
console.log(this.imgList.length);
console.log(this.imgList);
}
//this.$refs.upload.clearFiles()
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleDownload(file) {
console.log(file);
},
}
};
</script>

Write Preview
Loading…
Cancel
Save