This commit is contained in:
zyk
2024-07-10 18:23:06 +08:00
parent b543e3943b
commit c87e45580a
2 changed files with 140 additions and 163 deletions

View File

@@ -1,115 +1,102 @@
<template>
<div>
<el-dialog
v-if="dialogVisible"
:title="title"
:visible.sync="dialogVisible"
:close-on-click-modal="false"
width="600px"
:before-close="handleClose"
>
<el-form :model="user" ref="user" class="demo-ruleForm" v-loading="loading" label-width="100px">
<el-form-item label="id" v-if="user.id">
<el-input v-model.number="user.id" disabled></el-input>
</el-form-item>
<el-form-item label="标题" prop="title" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
<el-input v-model.trim="user.title" placeholder="请输入标题" style="width: 200px;"></el-input>
</el-form-item>
<el-form-item label="轮播图类型" prop="type" :rules="[{ required: true, message: '请选择', trigger: 'blur' }]">
<el-select v-model="user.type" placeholder="请选择" style="width: 200px;">
<el-option label="维修店app轮播图" :value="1" />
<el-option label="小程序首页" :value="2" />
<el-option label="小程序预约页首页" :value="3" />
<el-option label="维修页轮播图" :value="4" />
<el-option label="用户端邀请页广告位" :value="5" />
<el-option label="用户端首页轮播图" :value="6" />
<el-option label="展厅" :value="7" />
<el-option label="流水返佣轮播图" :value="8" />
<el-option label="享服务轮播图" :value="9" />
<el-option label="维修副页轮播图" :value="10" />
<el-option label="车商首页轮播图" :value="11" />
</el-select>
</el-form-item>
<el-dialog v-if="dialogVisible" :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false"
width="600px" :before-close="handleClose">
<el-form :model="user" ref="user" class="demo-ruleForm" v-loading="loading" label-width="120px">
<el-form-item label="id" v-if="user.id">
<el-input v-model.number="user.id" disabled></el-input>
</el-form-item>
<el-form-item label="标题" prop="title" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
<el-input v-model.trim="user.title" placeholder="请输入标题" style="width: 200px;"></el-input>
</el-form-item>
<el-form-item label="轮播图类型" prop="type" :rules="[{ required: true, message: '请选择', trigger: 'blur' }]">
<el-select v-model="user.type" placeholder="请选择" style="width: 200px;">
<el-option label="维修店app轮播图" :value="1" />
<el-option label="小程序首页" :value="2" />
<el-option label="小程序预约页首页" :value="3" />
<el-option label="维修主页轮播图" :value="4" />
<el-option label="用户端邀请页广告位" :value="5" />
<el-option label="用户端首页轮播图" :value="6" />
<el-option label="展厅" :value="7" />
<el-option label="流水返佣轮播图" :value="8" />
<el-option label="享服务轮播图" :value="9" />
<el-option label="维修页轮播图" :value="10" />
<el-option label="车商首页轮播图" :value="11" />
</el-select>
</el-form-item>
<el-form-item label="图片" prop="image" :rules="[{ required: true, message: '请上传', trigger: 'blur' }]">
<div class="upLoadPicBox" @click="modalPicTap('1', 'image')">
<div v-if="user.image" class="pictrue"><img :src="user.image" /></div>
<div v-else-if="formValidate.image" class="pictrue"><img :src="formValidate.image" /></div>
<div v-else class="upLoad">
<i class="el-icon-camera cameraIconfont" />
<el-form-item label="图片" prop="image" :rules="[{ required: true, message: '请上传', trigger: 'blur' }]">
<div class="upLoadPicBox" @click="modalPicTap('1', 'image')">
<div v-if="user.image" class="pictrue"><img :src="user.image" /></div>
<div v-else-if="formValidate.image" class="pictrue"><img :src="formValidate.image" /></div>
<div v-else class="upLoad">
<i class="el-icon-camera cameraIconfont" />
</div>
</div>
</div>
<div style="color: red;">
<span v-show="user.type == 4">推荐尺寸 11</span>
<span v-show="user.type == 5">推荐尺寸 11</span>
<span v-show="user.type == 6">推荐尺寸 686560</span>
</div>
</el-form-item>
<el-form-item label="链接类型" prop="linkType" :rules="[{ required: true, trigger: 'blur' }]">
<el-radio-group v-model="user.linkType" @input="changeInput">
<el-radio :label="0">链接</el-radio>
<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-form-item v-if="user.linkType == 2 || user.linkType == 3" label="选择活动" >
<el-button type="primary" @click="openActivity">选择活动</el-button>
</el-form-item>
<el-form-item label="跳转链接" prop="linkUrl" >
<el-input v-model.trim="user.linkUrl" placeholder="请输入跳转链接"></el-input>
</el-form-item>
<div style="color: red;">
<span v-show="user.type == 4">推荐尺寸 11</span>
<span v-show="user.type == 5">推荐尺寸 11</span>
<span v-show="user.type == 6">推荐尺寸 686560</span>
</div>
</el-form-item>
<el-form-item label="链接类型" prop="linkType" :rules="[{ required: true, trigger: 'blur' }]">
<el-radio-group v-model="user.linkType" @input="changeInput">
<el-radio :label="0">链接</el-radio>
<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-form-item v-if="user.linkType == 2 || user.linkType == 3" label="选择活动">
<el-button type="primary" @click="openActivity">选择活动</el-button>
</el-form-item>
<el-form-item label="APP跳转链接" prop="linkUrl">
<el-input v-model.trim="user.linkUrl" placeholder="请输入跳转链接"></el-input>
</el-form-item>
<el-form-item label="小程序跳转链接" prop="minLinkUrl">
<el-input v-model.trim="user.minLinkUrl" placeholder="请输入跳转链接"></el-input>
</el-form-item>
<el-form-item label="排序" prop="sort" :rules="[{ required: true, trigger: 'blur' }]">
<el-input-number v-model="user.sort" :min="1" :max="10" label="请输入排序"></el-input-number>
</el-form-item>
<el-form-item label="排序" prop="sort" :rules="[{ required: true, trigger: 'blur' }]">
<el-input-number v-model="user.sort" :min="1" :max="10" label="请输入排序"></el-input-number>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="resetForm('user')"> </el-button>
<el-button type="primary" @click="submitForm('formValidate')"> </el-button>
</span>
</el-dialog>
<el-dialog
title="选择活动"
:visible.sync="activityShow"
:close-on-click-modal="false"
width="1000PX"
:before-close="activityClose">
<el-table :data="dataList">
<el-table-column label="卡券商品名称" prop="name" />
<el-table-column label="城市" prop="city" />
<el-table-column label="库存" prop="stock" />
<el-table-column label="销量" prop="sales" />
<el-table-column label="价格" prop="price" />
<el-table-column label="封面" prop="cover">
<template scope="scope">
<imagePreview :src="scope.row.cover" />
</template>
</el-table-column>
<el-table-column label="轮播图" prop="image">
<template scope="scope">
<imagePreview :src="scope.row.image" />
</template>
</el-table-column>
<el-table-column label="简介" prop="intro" />
<el-table-column label="操作">
<template scope="scope">
<el-button type="text" @click="checked(scope.row)">选中</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="pageChange"
:current-page="queryForm.page"
:page-sizes="[10, 20, 50, 100]"
:page-size="queryForm.limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
></el-pagination>
</el-dialog>
</div>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="resetForm('user')"> </el-button>
<el-button type="primary" @click="submitForm('formValidate')"> </el-button>
</span>
</el-dialog>
<el-dialog title="选择活动" :visible.sync="activityShow" :close-on-click-modal="false" width="1000PX"
:before-close="activityClose">
<el-table :data="dataList">
<el-table-column label="卡券商品名称" prop="name" />
<el-table-column label="城市" prop="city" />
<el-table-column label="库存" prop="stock" />
<el-table-column label="销量" prop="sales" />
<el-table-column label="价格" prop="price" />
<el-table-column label="封面" prop="cover">
<template scope="scope">
<imagePreview :src="scope.row.cover" />
</template>
</el-table-column>
<el-table-column label="轮播图" prop="image">
<template scope="scope">
<imagePreview :src="scope.row.image" />
</template>
</el-table-column>
<el-table-column label="简介" prop="intro" />
<el-table-column label="操作">
<template scope="scope">
<el-button type="text" @click="checked(scope.row)">选中</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange" @current-change="pageChange" :current-page="queryForm.page"
:page-sizes="[10, 20, 50, 100]" :page-size="queryForm.limit" :total="total"
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
</el-dialog>
</div>
</template>
<script>
@@ -154,7 +141,7 @@ export default {
queryForm: {
page: 1,
limit: 10,
isShow:true,
isShow: true,
type: '3'
},
url: '',
@@ -190,16 +177,18 @@ export default {
},
methods: {
checked(row) {
if(this.user.linkType == 2) {
this.user.linkUrl = '/pages/mine/my_activity/detail?id=' + row.id
if (this.user.linkType == 2) {
this.user.minLinkUrl = '/pages/mine/my_activity/detail?id=' + row.id
this.user.linkUrl = '/pages/driver/mine/my_activity/detail?id=' + row.id
} else if (this.user.linkType == 3) {
this.user.linkUrl = '/pages/serve/coupons/cou_detail?id=' + row.id
this.user.linkUrl = '/pages/driver/serve/coupons/cou_detail?id=' + row.id
this.user.minLinkUrl = '/pages/serve/coupons/cou_detail?id=' + row.id
}
this.activityClose()
},
openActivity() {
this.queryForm.page = 1
if(this.user.linkType == 2) {
if (this.user.linkType == 2) {
this.queryForm.type = '3'
} else if (this.user.linkType == 3) {
this.queryForm.type = '2'
@@ -213,12 +202,12 @@ export default {
this.total = res.total
})
},
changeInput(val){
changeInput(val) {
// console.log(val);
// if(val == 2) {
// this.user.linkUrl = '/pages/mine/my_activity/detail?id=' + this.productId
// } else {
this.user.linkUrl = ''
this.user.linkUrl = ''
// }
},
// 点击商品图
@@ -244,7 +233,7 @@ export default {
activityClose() {
this.activityShow = false;
},
pageChange(page) {
this.queryForm.page = page;
this.getList();
@@ -263,34 +252,35 @@ export default {
title: this.user.title,
image: this.user.image,
linkUrl: this.user.linkUrl,
minLinkUrl: this.user.minLinkUrl,
linkType: this.user.linkType,
sort: this.user.sort,
type: this.user.type,
};
this.user.id
? carouselUpdateAPI(data)
.then((res) => {
this.$message.success('编辑成功');
this.loading = false;
this.handleClose();
this.formValidate = Object.assign({}, obj);
this.$parent.getList();
})
.catch(() => {
this.loading = false;
})
.then((res) => {
this.$message.success('编辑成功');
this.loading = false;
this.handleClose();
this.formValidate = Object.assign({}, obj);
this.$parent.getList();
})
.catch(() => {
this.loading = false;
})
: carouselAddAPI(this.user)
.then((res) => {
this.$message.success('添加成功');
this.loading = false;
this.handleClose();
this.formValidate = Object.assign({}, obj);
this.$parent.getList();
})
.catch(() => {
this.loading = false;
this.formValidate = Object.assign({}, obj);
});
.then((res) => {
this.$message.success('添加成功');
this.loading = false;
this.handleClose();
this.formValidate = Object.assign({}, obj);
this.$parent.getList();
})
.catch(() => {
this.loading = false;
this.formValidate = Object.assign({}, obj);
});
} else {
return false;
}

View File

@@ -31,14 +31,8 @@
<el-button type="primary" @click="addBtn">新增轮播图</el-button>
</div>
<el-table
v-loading="listLoading"
:data="tableDataList"
style="width: 100%"
size="small"
highlight-current-row
class="switchTable"
>
<el-table v-loading="listLoading" :data="tableDataList" style="width: 100%" size="small" highlight-current-row
class="switchTable">
<el-table-column prop="id" label="ID" />
<el-table-column prop="title" label="标题"></el-table-column>
<el-table-column prop="image" label="图片">
@@ -57,7 +51,8 @@
{{ showLinkType(scope.row.linkType) }}
</template>
</el-table-column>
<el-table-column prop="linkUrl" label="路径"></el-table-column>
<el-table-column prop="linkUrl" label="APP路径"></el-table-column>
<el-table-column prop="minLinkUrl" label="小程序路径"></el-table-column>
<el-table-column prop="type" label="类型">
<template slot-scope="scope">
{{ showBrannerType(scope.row.type) }}
@@ -76,15 +71,9 @@
</el-table>
<div class="block">
<el-pagination
:page-sizes="[10, 20, 40, 60]"
:page-size="formData.limit"
:current-page="formData.page"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.total"
@size-change="handleSizeChange"
@current-change="pageChange"
/>
<el-pagination :page-sizes="[10, 20, 40, 60]" :page-size="formData.limit" :current-page="formData.page"
layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
@current-change="pageChange" />
</div>
</el-card>
<el-drawer :visible.sync="drawer" size="40%">
@@ -98,7 +87,8 @@
<imagePreview :src="detailObj.image" style="width: 40px; height: 40px" />
</el-descriptions-item>
<el-descriptions-item label="链接类型">{{ showLinkType(detailObj.linkType) }}</el-descriptions-item>
<el-descriptions-item label="路径">{{ detailObj.linkUrl }}</el-descriptions-item>
<el-descriptions-item label="APP路径">{{ detailObj.linkUrl }}</el-descriptions-item>
<el-descriptions-item label="小程序路径">{{ detailObj.minLinkUrl }}</el-descriptions-item>
<el-descriptions-item label="类型">{{ showBrannerType(detailObj.type) }}</el-descriptions-item>
@@ -107,13 +97,8 @@
</el-descriptions>
</div>
</el-drawer>
<creat-level
:title="title"
ref="grades"
v-if="userInfo"
:user="userInfo"
:levelNumData="levelNumData"
></creat-level>
<creat-level :title="title" ref="grades" v-if="userInfo" :user="userInfo"
:levelNumData="levelNumData"></creat-level>
</div>
</template>
@@ -140,14 +125,14 @@ export default {
loading: false,
tableDataList: [],
userInfo: {
linkUrl:''
linkUrl: ''
},
levelNumData: [],
title: '',
detailObj: {},
};
},
mounted() {},
mounted() { },
created() {
this.getList();
},
@@ -230,10 +215,12 @@ export default {
.descriBOX {
padding: 30px;
}
.dialogSpan {
font-size: 12px;
color: salmon;
}
.pic {
width: 60px;
height: 60px;