mirror of
https://gitee.com/was666/as-editor.git
synced 2025-02-23 02:32:53 +08:00
整体代码优化
This commit is contained in:
王奥斯
parent
5b91c88880
commit
a321bf358f
@ -1,4 +1,4 @@
|
||||
window.global_config = {
|
||||
BASE_URL: '/api',
|
||||
BASE_URL: '/api/',
|
||||
NODE_ENV: 'prd',
|
||||
}
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
const msgPath = process.env.HUSKY_GIT_PARAMS
|
||||
const msg = require('fs').readFileSync(msgPath, 'utf-8').trim()
|
||||
// const msgPath = process.env.HUSKY_GIT_PARAMS
|
||||
// const msg = require('fs').readFileSync(msgPath, 'utf-8').trim()
|
||||
|
||||
const commitRE = /^(merge|feat|fix|docs|style|refactor|perf|test|workflow|build|ci|chore|release|workflow)(\(.+\))?: .{1,50}/
|
||||
// const commitRE = /^(merge|feat|fix|docs|style|refactor|perf|test|workflow|build|ci|chore|release|workflow)(\(.+\))?: .{1,50}/
|
||||
|
||||
if (!commitRE.test(msg)) {
|
||||
console.log()
|
||||
console.error(`
|
||||
不合法的 commit 消息格式。
|
||||
请查看 git commit 提交规范：https://gitee.com/OKGENE_1/dashboard/projects/OKGENE_1/vue2.x-template/wikis/OKGENE_1%2Fvue2.x-template?doc_id=1047366&sort_id=3095531
|
||||
`)
|
||||
// if (!commitRE.test(msg)) {
|
||||
// console.log()
|
||||
// console.error(`
|
||||
// 不合法的 commit 消息格式。
|
||||
// 请查看 git commit 提交规范：feat: XXXXX
|
||||
// `)
|
||||
|
||||
process.exit(1)
|
||||
}
|
||||
// process.exit(1)
|
||||
// }
|
||||
|
||||
40
src/App.vue
40
src/App.vue
@ -17,7 +17,6 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
isRouterAlive: true,
|
||||
permissionsJson: {},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -25,16 +24,9 @@ export default {
|
||||
.loginAdminTest({ loginname: 'admin', pwd: '123456' })
|
||||
.then((res) => {
|
||||
console.log(res)
|
||||
this.getPermission()
|
||||
this.getShopCommodity()
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
//将hasPermission挂载到window
|
||||
window['hasPermission'] = (data) => {
|
||||
return this.hasPermission(data)
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 刷新页面
|
||||
reload() {
|
||||
@ -43,36 +35,6 @@ export default {
|
||||
this.isRouterAlive = true
|
||||
})
|
||||
},
|
||||
// 获取当前用户权限
|
||||
getPermission() {
|
||||
this.$httpApi.getPermission().then((res) => {
|
||||
let permissionsList = res.data.permissionsList
|
||||
|
||||
for (let i in permissionsList) {
|
||||
this.permissionsJson[permissionsList[i].funkey] = 1
|
||||
}
|
||||
})
|
||||
},
|
||||
// 返回一个布尔值，判断对象是否包含特定的自身（非继承）属性
|
||||
hasPermission(permission) {
|
||||
return this.permissionsJson.hasOwnProperty(permission)
|
||||
},
|
||||
// 获取商品数据
|
||||
getShopCommodity() {
|
||||
this.$httpApi
|
||||
.getShopCommodity()
|
||||
.then((res) => {
|
||||
this.loading = false
|
||||
console.log(res.data.shopCommodity, '------------------shopCommodity')
|
||||
localStorage.setItem(
|
||||
'shopCommodity',
|
||||
JSON.stringify(res.data.shopCommodity)
|
||||
)
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
127
src/api/api.js
127
src/api/api.js
@ -1,103 +1,6 @@
|
||||
import httpAjax from './http.js'
|
||||
|
||||
class httpApi {
|
||||
|
||||
// 上传图片base64
|
||||
miniShop = (data) => httpAjax({
|
||||
url: '/upload/base64/miniShop',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
|
||||
// 保存
|
||||
save = (data) => httpAjax({
|
||||
url: '/adm/component/save',
|
||||
method: 'post',
|
||||
header: 'json',
|
||||
data
|
||||
})
|
||||
|
||||
//获取创建过的页面列表
|
||||
shopTemplate = (data) => httpAjax({
|
||||
url: '/adm/shopTemplate/list',
|
||||
method: 'post',
|
||||
header: 'json',
|
||||
data
|
||||
})
|
||||
|
||||
//获取页面模板
|
||||
shopTemplates = data => httpAjax({
|
||||
url: '/apiShop/shopTemplate',
|
||||
data,
|
||||
method: 'post'
|
||||
})
|
||||
|
||||
//获取历史页面
|
||||
listData = data => httpAjax({
|
||||
url: '/adm/shopTemplate/list.data',
|
||||
data,
|
||||
method: 'post'
|
||||
})
|
||||
|
||||
//设为主页
|
||||
homePage = data => httpAjax({
|
||||
url: '/adm/shopTemplate/homePage',
|
||||
data,
|
||||
method: 'post'
|
||||
})
|
||||
|
||||
//删除选项
|
||||
delete = data => httpAjax({
|
||||
url: '/adm/shopTemplate/delete',
|
||||
data,
|
||||
method: 'post'
|
||||
})
|
||||
|
||||
//获取下拉框模板类型
|
||||
selectData = data => httpAjax({
|
||||
url: '/adm/poster/select.data',
|
||||
data,
|
||||
method: 'post'
|
||||
})
|
||||
|
||||
//获取海报
|
||||
poster = data => httpAjax({
|
||||
url: '/adm/shopTemplate/poster',
|
||||
data,
|
||||
method: 'post'
|
||||
})
|
||||
|
||||
//复制
|
||||
copy = data => httpAjax({
|
||||
url: '/adm/shopTemplate/copy',
|
||||
data,
|
||||
method: 'post'
|
||||
})
|
||||
|
||||
//导出
|
||||
exportTemplate = data => httpAjax({
|
||||
url: '/adm/shopTemplate/export',
|
||||
data,
|
||||
method: 'post'
|
||||
})
|
||||
//导入
|
||||
importTemplate = data => httpAjax({
|
||||
url: '/adm/shopTemplate/import',
|
||||
data,
|
||||
method: 'post'
|
||||
})
|
||||
//获取系统模板
|
||||
defaultTemplate = data => httpAjax({
|
||||
url: '/adm/shopTemplate/defaultTemplate',
|
||||
data,
|
||||
method: 'post'
|
||||
})
|
||||
//获取当前用户权限
|
||||
getPermission = data => httpAjax({
|
||||
url: '/adm/permission/getPermission',
|
||||
data,
|
||||
method: 'post'
|
||||
})
|
||||
|
||||
//手机登录接口
|
||||
loginAdminTest = data => httpAjax({
|
||||
@ -106,36 +9,6 @@ class httpApi {
|
||||
method: 'post'
|
||||
})
|
||||
|
||||
//设置为模板
|
||||
saveDefaultTemplate = data => httpAjax({
|
||||
url: '/adm/shopTemplate/saveDefaultTemplate',
|
||||
data,
|
||||
method: 'post'
|
||||
})
|
||||
|
||||
//查看店铺概要信息
|
||||
queryShopInfo = data => httpAjax({
|
||||
url: '/adm/shop/queryShopInfo',
|
||||
data,
|
||||
method: 'post'
|
||||
})
|
||||
|
||||
//修改店铺信息，目前只支持名称和头像链接修改
|
||||
updateShopInfo = data => httpAjax({
|
||||
url: '/adm/shop/updateShopInfo',
|
||||
data,
|
||||
method: 'post'
|
||||
})
|
||||
|
||||
|
||||
//动态获取商品数据
|
||||
getShopCommodity = data => httpAjax({
|
||||
url: '/adm/shop/getShopCommodity',
|
||||
data,
|
||||
method: 'post'
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default new httpApi()
|
||||
@ -205,12 +205,6 @@
|
||||
>
|
||||
<!-- 视频图片 -->
|
||||
<div class="bg-pic">
|
||||
<!-- <img
|
||||
draggable="false"
|
||||
:src="item | getCommodityItemData('coverUrl')"
|
||||
alt=""
|
||||
:style="{ 'border-radius': datas.borderRadius + 'px' }"
|
||||
/> -->
|
||||
<img
|
||||
draggable="false"
|
||||
:src="item.coverUrl"
|
||||
@ -267,7 +261,6 @@
|
||||
}"
|
||||
>
|
||||
{{ item.name }}
|
||||
<!-- {{ item | getCommodityItemData('name') }} -->
|
||||
</h5>
|
||||
<!-- 视频描述 -->
|
||||
<p
|
||||
@ -276,7 +269,6 @@
|
||||
}"
|
||||
>
|
||||
{{ item.introduce }}
|
||||
<!-- {{ item | getCommodityItemData('introduce') }} -->
|
||||
</p>
|
||||
<div
|
||||
class="mony"
|
||||
@ -285,7 +277,6 @@
|
||||
<span v-show="datas.priceofcommodity"
|
||||
><i>￥</i>
|
||||
{{ item.price }}
|
||||
<!-- {{ item | getCommodityItemData('price') }} -->
|
||||
</span>
|
||||
<div v-show="datas.purchasebutton">
|
||||
<van-icon
|
||||
@ -554,12 +545,6 @@
|
||||
>
|
||||
<!-- 视频图片 -->
|
||||
<div class="bg-pic">
|
||||
<!-- <img
|
||||
draggable="false"
|
||||
:src="item | getCommodityItemData('coverUrl')"
|
||||
alt=""
|
||||
:style="{ 'border-radius': datas.borderRadius + 'px' }"
|
||||
/> -->
|
||||
<img
|
||||
draggable="false"
|
||||
:src="item.coverUrl"
|
||||
@ -624,7 +609,6 @@
|
||||
}"
|
||||
>
|
||||
{{ item.name }}
|
||||
<!-- {{ item | getCommodityItemData('name') }} -->
|
||||
</h5>
|
||||
<!-- 视频描述 -->
|
||||
<p
|
||||
@ -633,7 +617,6 @@
|
||||
}"
|
||||
>
|
||||
{{ item.introduce }}
|
||||
<!-- {{ item | getCommodityItemData('introduce') }} -->
|
||||
</p>
|
||||
<div
|
||||
class="mony"
|
||||
@ -642,7 +625,6 @@
|
||||
<span v-show="datas.priceofcommodity"
|
||||
><i>￥</i>
|
||||
{{ item.price }}
|
||||
<!-- {{ item | getCommodityItemData('price') }} -->
|
||||
</span>
|
||||
<div v-show="datas.purchasebutton">
|
||||
<van-icon
|
||||
@ -882,12 +864,6 @@
|
||||
>
|
||||
<!-- 视频图片 -->
|
||||
<div class="bg-pic">
|
||||
<!-- <img
|
||||
draggable="false"
|
||||
:src="item | getCommodityItemData('coverUrl')"
|
||||
alt=""
|
||||
:style="{ 'border-radius': datas.borderRadius + 'px' }"
|
||||
/> -->
|
||||
<img
|
||||
draggable="false"
|
||||
:src="item.coverUrl"
|
||||
@ -953,7 +929,6 @@
|
||||
}"
|
||||
>
|
||||
{{ item.name }}
|
||||
<!-- {{ item | getCommodityItemData('name') }} -->
|
||||
</h5>
|
||||
<!-- 视频描述 -->
|
||||
<p
|
||||
@ -963,7 +938,6 @@
|
||||
}"
|
||||
>
|
||||
{{ item.introduce }}
|
||||
<!-- {{ item | getCommodityItemData('introduce') }} -->
|
||||
</p>
|
||||
<div
|
||||
class="mony"
|
||||
@ -972,7 +946,6 @@
|
||||
<span v-show="datas.priceofcommodity"
|
||||
><i>￥</i>
|
||||
{{ item.price }}
|
||||
<!-- {{ item | getCommodityItemData('price') }} -->
|
||||
</span>
|
||||
<div v-show="datas.purchasebutton">
|
||||
<van-icon
|
||||
|
||||
@ -1,164 +0,0 @@
|
||||
<template>
|
||||
<div class="createTemplate">
|
||||
<!-- 上传图片 -->
|
||||
<el-dialog
|
||||
class="uploadIMG"
|
||||
title="选择页面模板"
|
||||
:lock-scroll="true"
|
||||
:visible.sync="dialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
width="860px"
|
||||
>
|
||||
<!-- 内容 -->
|
||||
<el-tabs v-model="activeName" width="100%" @tab-click="handleClick">
|
||||
<el-tab-pane label="系统页模板" name="0">
|
||||
<el-row>
|
||||
<el-col :span="6" :offset="1">
|
||||
<!-- 模板列表 -->
|
||||
<el-card
|
||||
shadow="hover"
|
||||
@click.native="$router.push({ path: 'home' })"
|
||||
>
|
||||
<i
|
||||
class="el-icon-circle-plus-outline"
|
||||
style="
|
||||
font-size: 45px;
|
||||
color: #fff;
|
||||
background: rgb(217, 220, 223, 0.5);
|
||||
border-radius: 50%;
|
||||
"
|
||||
/>
|
||||
<div>空白模板</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="6"
|
||||
v-for="(item, index) in dtList"
|
||||
:key="index"
|
||||
:offset="1"
|
||||
>
|
||||
<el-card shadow="hover">
|
||||
<van-image
|
||||
width="100%"
|
||||
height="320px"
|
||||
fit="scale-down"
|
||||
:src="item.imgUrl"
|
||||
/>
|
||||
<div class="bottom">
|
||||
<time class="name">{{ item.name }}</time>
|
||||
<el-button
|
||||
type="text"
|
||||
class="button"
|
||||
@click="
|
||||
$router.push({
|
||||
path: 'home?id=' + item.id + '&type=tpl',
|
||||
})
|
||||
"
|
||||
>使用模板</el-button
|
||||
>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'createTemplate',
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false, //弹框默认隐藏
|
||||
activeName: '0', //tab选项
|
||||
dtList: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadDefaultTemplate()
|
||||
},
|
||||
methods: {
|
||||
/* 显示弹框 */
|
||||
showExtension() {
|
||||
this.dialogVisible = true
|
||||
},
|
||||
// 关闭弹框
|
||||
handleClose() {
|
||||
// 隐藏上传文件
|
||||
this.dialogVisible = false
|
||||
},
|
||||
/* tab切换 */
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event)
|
||||
},
|
||||
loadDefaultTemplate() {
|
||||
this.$httpApi.defaultTemplate().then((res) => {
|
||||
|
||||
console.log(res)
|
||||
this.dtList = res.data.defaultTemplateList
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '../../assets/css/minx.less';
|
||||
.createTemplate {
|
||||
/* tab */
|
||||
/deep/.el-tabs__nav-wrap .is-top {
|
||||
padding: 0 40px !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
/deep/.el-dialog__title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
// 上传弹框内容部分
|
||||
/deep/.uploadIMG .el-dialog__body {
|
||||
min-height: 280px;
|
||||
/deep/.el-tabs__content {
|
||||
min-height: 380px;
|
||||
}
|
||||
/deep/.el-tabs__nav-scroll {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
/deep/.el-tab-pane {
|
||||
overflow-x: scroll;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
/deep/.el-row {
|
||||
width: 896px;
|
||||
.el-card {
|
||||
margin-bottom: 30px;
|
||||
.el-card__body {
|
||||
height: 385px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
.bottom {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.name{
|
||||
width: 70%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,289 +0,0 @@
|
||||
<template>
|
||||
<div class="extension">
|
||||
<!-- 上传图片 -->
|
||||
<el-dialog
|
||||
class="uploadIMG"
|
||||
title="推广"
|
||||
:lock-scroll="true"
|
||||
:visible.sync="dialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
width="646px"
|
||||
>
|
||||
<!-- 内容 -->
|
||||
<section class="container">
|
||||
<img :src="poster" style="width: 280px; height: 450px" alt="" />
|
||||
|
||||
<!-- 二维码 -->
|
||||
<img
|
||||
ref="qrcodeImg"
|
||||
:src="qrcodeData"
|
||||
id="qrcode"
|
||||
style="width: 235px; height: 235px; position: absolute; z-index: -999"
|
||||
/>
|
||||
|
||||
<!-- 操作 -->
|
||||
<div class="text">
|
||||
<div style="margin: 0 0 20px 0">
|
||||
<span style="font-size: 14px; margin-right: 10px">选择海报：</span>
|
||||
<el-select v-model="selectType" size="mini" @change="templatetype">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.title"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<p class="top">复制推广链接</p>
|
||||
|
||||
<!-- 复制内容 -->
|
||||
<div class="cilp">
|
||||
<span id="foo">{{ URL }}</span>
|
||||
<el-button
|
||||
size="small"
|
||||
data-clipboard-target="#foo"
|
||||
id="btn"
|
||||
data-clipboard-action="copy"
|
||||
type="primary"
|
||||
>复制</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 下载图片 -->
|
||||
<p class="operation">
|
||||
<span @click="downloadPoster">下载完整海报</span>
|
||||
<span @click="downloadqrcode">仅下载二维码</span>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Clipboard from 'clipboard'
|
||||
import QRCode from 'qrcode'
|
||||
|
||||
export default {
|
||||
name: 'extension',
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false, //弹框默认隐藏
|
||||
activeName: '0', //tab选项
|
||||
URL: '', //页面链接
|
||||
qrcodeData: '', //二维码base64
|
||||
poster: '', //海报链接
|
||||
selectType: '', //下拉框
|
||||
options: [], // 海报类型选择
|
||||
templateId: '', //当前页面id
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.clipboard()
|
||||
},
|
||||
methods: {
|
||||
/* 显示弹框 */
|
||||
showExtension(res, isHome) {
|
||||
// 默认模板
|
||||
this.poster = res.posterUrl
|
||||
this.templateId = res.id
|
||||
console.log(res, isHome,'-----------------showExtension')
|
||||
if (isHome) {
|
||||
console.log(res, isHome,'-----------------showExtension')
|
||||
this.URL = `${this.$baseURL}#/shop?orgId=${res.userAdminId}`
|
||||
} else {
|
||||
this.URL = `${this.$baseURL}#/shop?id=${res.id}&orgId=${res.userAdminId}`
|
||||
}
|
||||
|
||||
QRCode.toDataURL(this.URL)
|
||||
.then((url) => {
|
||||
this.qrcodeData = url
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
this.dialogVisible = true
|
||||
// 获取模板
|
||||
this.selectDataApi()
|
||||
},
|
||||
|
||||
// 获取海报模板
|
||||
selectDataApi() {
|
||||
this.$httpApi.selectData().then((res) => {
|
||||
|
||||
this.options = res.data.posterList
|
||||
this.selectType = res.data.posterList[0].title
|
||||
// 没有默认模板请求
|
||||
if (!this.poster) {
|
||||
this.getPoster(res.data.posterList[0].id)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 获取海报
|
||||
getPoster(id) {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: '海报加载中...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
})
|
||||
this.$httpApi
|
||||
.poster({
|
||||
posterId: id,
|
||||
shopTemplateId: this.templateId,
|
||||
path: this.URL,
|
||||
})
|
||||
.then((res) => {
|
||||
loading.close()
|
||||
|
||||
this.$message({
|
||||
message: '海报加载成功',
|
||||
type: 'success',
|
||||
})
|
||||
this.poster = res.data.url
|
||||
})
|
||||
},
|
||||
|
||||
// 选择模板类型
|
||||
templatetype(res) {
|
||||
this.getPoster(res)
|
||||
},
|
||||
|
||||
// 关闭弹框
|
||||
handleClose() {
|
||||
// 隐藏上传文件
|
||||
this.dialogVisible = false
|
||||
},
|
||||
|
||||
/* 复制 */
|
||||
clipboard() {
|
||||
const clipboard = new Clipboard('#btn')
|
||||
clipboard.on('success', (e) => {
|
||||
this.$message({
|
||||
message: '复制成功',
|
||||
type: 'success',
|
||||
})
|
||||
e.clearSelection()
|
||||
})
|
||||
clipboard.on('error', () => {
|
||||
this.$message.error('复制失败')
|
||||
})
|
||||
},
|
||||
|
||||
/* 下载二维码 */
|
||||
downloadqrcode() {
|
||||
var link = document.createElement('a')
|
||||
link.setAttribute('href', this.qrcodeData)
|
||||
link.setAttribute('download', '星火.png')
|
||||
link.click()
|
||||
},
|
||||
|
||||
// 下载海报
|
||||
downloadPoster() {
|
||||
this.getUrlBase64(this.poster).then((base64) => {
|
||||
let link = document.createElement('a')
|
||||
link.href = base64
|
||||
link.download = '星火海报.png'
|
||||
link.click()
|
||||
})
|
||||
},
|
||||
getUrlBase64(url) {
|
||||
return new Promise((resolve) => {
|
||||
let canvas = document.createElement('canvas')
|
||||
let ctx = canvas.getContext('2d')
|
||||
let img = new Image()
|
||||
img.crossOrigin = 'Anonymous' //允许跨域
|
||||
img.src = url
|
||||
img.onload = function () {
|
||||
canvas.height = 720
|
||||
canvas.width = 400
|
||||
ctx.drawImage(img, 0, 0, 400, 720)
|
||||
let dataURL = canvas.toDataURL('image/png')
|
||||
canvas = null
|
||||
resolve(dataURL)
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import '../../assets/css/minx.less';
|
||||
.extension {
|
||||
position: relative;
|
||||
|
||||
/deep/.el-dialog__title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
// 上传弹框内容部分
|
||||
/deep/.uploadIMG .el-dialog__body {
|
||||
min-height: 280px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
|
||||
/* 内容 */
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
/* 操作 */
|
||||
.text {
|
||||
margin-left: 12px;
|
||||
.top {
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
}
|
||||
/* 复制 */
|
||||
.cilp {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
#foo {
|
||||
width: 245px;
|
||||
cursor: no-drop;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #e5e5e5;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
background: #f8f8f8;
|
||||
opacity: 0.5;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
/* 下载图片 */
|
||||
.operation {
|
||||
margin-top: 20px;
|
||||
span {
|
||||
color: #38f;
|
||||
padding: 0 5px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
&:first-of-type {
|
||||
border-right: 1px solid #e5e5e5;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.disable {
|
||||
/deep/.el-upload {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -207,37 +207,19 @@
|
||||
|
||||
<!-- 跳转链接 -->
|
||||
<el-form-item label="跳转链接">
|
||||
<!-- <el-radio-group v-model="datas.more.httpType" style="margin-left: 18px">
|
||||
<el-radio :label="0">方式一</el-radio>
|
||||
<el-radio :label="1">方式二</el-radio>
|
||||
</el-radio-group> -->
|
||||
<el-radio-group v-model="datas.more.httpType" style="margin-left: 18px">
|
||||
<el-radio :label="10">内部链接</el-radio>
|
||||
<el-radio :label="11">外部链接</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<!-- 输入http -->
|
||||
<el-input
|
||||
v-show="datas.more.httpType === 0"
|
||||
v-model="datas.more.http"
|
||||
placeholder="请输入跳转链接: http://www...."
|
||||
placeholder="请输入跳转链接"
|
||||
show-word-limit
|
||||
style="margin-top: 10px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- 选择创建好的页面 -->
|
||||
<el-select
|
||||
style="margin-top: 10px"
|
||||
@change="changeId"
|
||||
@visible-change="getOption"
|
||||
v-show="datas.more.httpType === 1"
|
||||
v-model="datas.more.select.name"
|
||||
placeholder="请选择要跳转的页面"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</el-form>
|
||||
</section>
|
||||
@ -291,21 +273,7 @@ export default {
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 获取下拉框内容 */
|
||||
getOption() {
|
||||
this.$httpApi.shopTemplate().then((res) => {
|
||||
|
||||
this.options = res.data.shopTemplateList
|
||||
})
|
||||
},
|
||||
changeId(res) {
|
||||
this.datas.more.select = {
|
||||
name: res.name,
|
||||
id: res.id,
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -55,16 +55,6 @@
|
||||
</el-slider>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 页面分类 -->
|
||||
<!-- <el-form-item label="分类" :hide-required-asterisk="true" prop="classification">
|
||||
<el-select v-model="datas.classification" placeholder="请选择页面分类">
|
||||
<el-option label="区域一" value="shanghai" />
|
||||
<el-option label="区域二" value="beijing" />
|
||||
</el-select>
|
||||
|
||||
<span class="ification">刷新</span>|<span class="ification">新建</span>
|
||||
</el-form-item> -->
|
||||
|
||||
<!-- 背景颜色 -->
|
||||
<el-form-item label="背景颜色">
|
||||
<!-- 单选框 -->
|
||||
@ -100,54 +90,6 @@
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item label="底部LOGO">
|
||||
<div class="bottomLogo">
|
||||
<img :src="datas.bottomLogo.botLogo" alt="" />
|
||||
<el-button
|
||||
@click="showUpload('0')"
|
||||
class="uploadImg"
|
||||
type="primary"
|
||||
plain
|
||||
><i class="el-icon-plus" />点击添加图片</el-button
|
||||
>
|
||||
</div>
|
||||
</el-form-item> -->
|
||||
<!-- 底部主页 -->
|
||||
<el-form-item label="店铺主页" class="lef" v-if="datas.bottomLogo">
|
||||
{{ datas.bottomLogo.isShowBootom ? '显示' : '隐藏' }}
|
||||
<el-checkbox
|
||||
style="margin-left: 196px"
|
||||
v-model="datas.bottomLogo.isShowBootom"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 店铺信息 -->
|
||||
<el-form-item label="店铺信息">
|
||||
<div class="shop-info">
|
||||
<div class="shop-name">
|
||||
店铺名称：
|
||||
<el-input
|
||||
v-model="shopData.shopName"
|
||||
@blur="changeShopInfo"
|
||||
></el-input>
|
||||
</div>
|
||||
|
||||
<div class="shop-head-pic">
|
||||
店铺头像:
|
||||
<img :src="shopData.shopPic" alt="" />
|
||||
<div class="shop-head-pic-btn">
|
||||
<el-button
|
||||
@click="showUpload('1')"
|
||||
class="uploadImg"
|
||||
type="primary"
|
||||
plain
|
||||
><i class="el-icon-plus" />更换头像</el-button
|
||||
>
|
||||
<!-- <el-button @click="changeShopInfo" type="primary" plain>保存店铺信息</el-button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 上传图片 -->
|
||||
@ -202,63 +144,31 @@ export default {
|
||||
'hsla(209, 100%, 56%, 0.73)',
|
||||
'#c7158577',
|
||||
],
|
||||
shopData: {
|
||||
shopName: null, // 店铺名称
|
||||
shopPic: null, // 店铺头像
|
||||
},
|
||||
uploadImgDataType: null, // 获取到的图片地址属于哪一类别 0 修改底部logo 1 修改店铺图标 2 页面背景图
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getShopInfo()
|
||||
},
|
||||
created() {},
|
||||
|
||||
methods: {
|
||||
// 显示上传图片组件 type : 0 修改底部logo 1 修改店铺图标 2 页面背景图
|
||||
// 显示上传图片组件 type : 2 页面背景图
|
||||
showUpload(type) {
|
||||
this.uploadImgDataType = type
|
||||
this.$refs.upload.showUpload()
|
||||
},
|
||||
|
||||
// 底部logo
|
||||
// 上传图片
|
||||
uploadInformation(res) {
|
||||
if (this.uploadImgDataType === '0') {
|
||||
this.datas.bottomLogo.botLogo = res
|
||||
} else if (this.uploadImgDataType === '1') {
|
||||
this.shopData.shopPic = res
|
||||
this.changeShopInfo()
|
||||
} else if (this.uploadImgDataType === '2') {
|
||||
if (this.uploadImgDataType === '2') {
|
||||
this.datas.bgImg = res
|
||||
}
|
||||
},
|
||||
|
||||
// 获取店铺信息
|
||||
getShopInfo() {
|
||||
this.$httpApi.queryShopInfo().then((res) => {
|
||||
|
||||
|
||||
this.shopData.shopName = res.data.name // 店铺名称
|
||||
this.shopData.shopPic = res.data.icon // 店铺头像
|
||||
})
|
||||
},
|
||||
// 清空背景图片
|
||||
clear() {
|
||||
this.datas.bgImg = ''
|
||||
},
|
||||
|
||||
// 修改店铺信息
|
||||
changeShopInfo() {
|
||||
let params = {
|
||||
name: this.shopData.shopName,
|
||||
icon: this.shopData.shopPic,
|
||||
}
|
||||
|
||||
this.$httpApi.updateShopInfo(params).then((res) => {
|
||||
console.log('change shop info ::', res)
|
||||
this.$message.success(res.msg)
|
||||
})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
colourAction(data) {
|
||||
|
||||
@ -272,14 +272,8 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initImageList()
|
||||
},
|
||||
methods: {
|
||||
// 初始化更新imageList数据
|
||||
initImageList() {
|
||||
this.datas.imageList = this.$utils.replaceImageList(this.datas.imageList)
|
||||
console.log(this.datas.imageList, '------------created imageList')
|
||||
},
|
||||
showUpload(type) {
|
||||
this.uploadImgDataType = type
|
||||
this.$refs.upload.showUpload()
|
||||
|
||||
@ -63,28 +63,6 @@
|
||||
</el-color-picker>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 更多 -->
|
||||
<el-form-item label="更多" class="lef">
|
||||
{{ datas.showMore ? '显示' : '隐藏' }}
|
||||
<el-checkbox style="margin-left: 196px" v-model="datas.showMore" />
|
||||
<el-select
|
||||
v-model="datas.moreUrl"
|
||||
v-show="datas.showMore"
|
||||
placeholder="请选择更多跳转链接"
|
||||
size="mini"
|
||||
@visible-change="getOption"
|
||||
@change="selectMore"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="[item.id, item.name]"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<div v-show="datas.commoditylisttype === 0">
|
||||
<h5 style="color: #000; font-size: 14px">添加商品</h5>
|
||||
<p style="color: #969799; font-size: 12px; margin-top: 10px">
|
||||
@ -549,22 +527,8 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// if(this.datas.moreUrl) {
|
||||
// this.moreName = this.datas.moreUrl[1]
|
||||
// }
|
||||
// this.changeImageListData()
|
||||
},
|
||||
methods: {
|
||||
changeImageListData() {
|
||||
let shopCommodity = JSON.parse(localStorage.getItem('shopCommodity'))
|
||||
console.log(shopCommodity, '--------------listswitching datas')
|
||||
// let newList = []
|
||||
// this.datas.imageList.forEach((element) => {
|
||||
// newList.push(shopCommodity[element.type][element.id])
|
||||
// })
|
||||
|
||||
// this.datas.imageList = newList
|
||||
},
|
||||
/* 上传图片弹框 */
|
||||
dialogVisibleshow(text, number) {
|
||||
this.$refs.upload.showUpload()
|
||||
@ -623,19 +587,6 @@ export default {
|
||||
delecommoditylisttypetab(index) {
|
||||
this.datas.commoditylisttypetab.splice(index, 1)
|
||||
},
|
||||
|
||||
/* 获取下拉框内容 */
|
||||
getOption() {
|
||||
this.$httpApi.shopTemplate().then((res) => {
|
||||
|
||||
this.options = res.data.shopTemplateList
|
||||
})
|
||||
},
|
||||
|
||||
selectMore() {
|
||||
this.datas.showMore = true
|
||||
this.datas.moreUrl = this.moreName
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
styleText() {
|
||||
|
||||
@ -1,382 +0,0 @@
|
||||
<!-- 已被弃用 该组件为抽离的 魔方组件种商品上传 -->
|
||||
<template>
|
||||
<div class="productUpload">
|
||||
<vuedraggable v-model="datas.commoditylisttypetab" v-bind="dragOptions">
|
||||
<section
|
||||
class="magiccubestyleList"
|
||||
v-for="(item, index) in datas.commoditylisttypetab"
|
||||
:key="index"
|
||||
>
|
||||
<div class="magiccubestyleList-top">
|
||||
<el-input
|
||||
v-model="item.text"
|
||||
class="tit"
|
||||
style="width: 100px"
|
||||
placeholder="请输入分组名称"
|
||||
size="mini"
|
||||
/>
|
||||
<i
|
||||
@click="delecommoditylisttypetab(index)"
|
||||
class="el-icon-delete"
|
||||
style="
|
||||
cursor: pointer;
|
||||
padding: 2px 4px;
|
||||
fnot-size: 12px;
|
||||
margin-left: 200px;
|
||||
color: red;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 拖拽 -->
|
||||
<vuedraggable v-model="item.imageList" v-bind="dragOptions">
|
||||
<transition-group>
|
||||
<section
|
||||
class="imgBanner"
|
||||
v-for="(item, ind) in item.imageList"
|
||||
:key="item + ind"
|
||||
>
|
||||
<!-- 图片 -->
|
||||
<div class="imag" @click="$refs.upload.showUpload()">
|
||||
<img
|
||||
draggable="false"
|
||||
v-if="!item.src"
|
||||
src="../../../assets/images/add.png"
|
||||
style="border: 1px solid #e5e5e5"
|
||||
alt=""
|
||||
/>
|
||||
<div v-else style="position: relative">
|
||||
<img draggable="false" :src="item.src" alt="" />
|
||||
<p
|
||||
style="
|
||||
width: 100%;
|
||||
background: #999;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
font-size: 5px;
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
line-hright: 20px;
|
||||
"
|
||||
>
|
||||
点击跟换图片图片
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 删除 -->
|
||||
<i class="el-icon-circle-close" @click="deleteimg(index, ind)" />
|
||||
|
||||
<!-- 标题和链接 -->
|
||||
<div class="imgText">
|
||||
<div class="imgText-in">
|
||||
<el-input
|
||||
placeholder="请输入商品标题"
|
||||
v-model="item.name"
|
||||
size="mini"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 选择类型 -->
|
||||
<el-select
|
||||
v-model="item.httpType"
|
||||
placeholder="请选择跳转类型"
|
||||
size="mini"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in optionsType"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.type"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<!-- 选择 -->
|
||||
<el-select
|
||||
v-if="item.httpType !== '11'"
|
||||
v-model="item.http"
|
||||
placeholder="请选择图片跳转链接"
|
||||
size="mini"
|
||||
@change="changeId"
|
||||
@visible-change="changeType(item.httpType)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<!-- 输入外部链接 -->
|
||||
<el-input
|
||||
v-if="item.httpType === '11'"
|
||||
size="mini"
|
||||
placeholder="请输入链接，输入前确保可以访问"
|
||||
v-model="item.externalLink"
|
||||
>
|
||||
</el-input>
|
||||
</div>
|
||||
</section>
|
||||
</transition-group>
|
||||
</vuedraggable>
|
||||
|
||||
<!-- 添加商品 -->
|
||||
<el-button
|
||||
@click="addproduct(index)"
|
||||
class="uploadImg"
|
||||
type="primary"
|
||||
plain
|
||||
><i class="el-icon-plus" />点击添加商品</el-button
|
||||
>
|
||||
</section>
|
||||
</vuedraggable>
|
||||
|
||||
<!-- 上传图片 -->
|
||||
<uploadimg ref="upload" @uploadInformation="uploadInformation" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vuedraggable from 'vuedraggable' //拖拽组件
|
||||
import uploadimg from '../../uploadImg' //图片上传
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dragOptions: {
|
||||
animation: 200,
|
||||
},
|
||||
imgActive: 0, //默认选中第一个图片
|
||||
options: [],
|
||||
optionsType: [
|
||||
{
|
||||
type: '1',
|
||||
name: '视频',
|
||||
},
|
||||
{
|
||||
type: '2',
|
||||
name: '书籍',
|
||||
},
|
||||
{
|
||||
type: '3',
|
||||
name: '音频',
|
||||
},
|
||||
{
|
||||
type: '6',
|
||||
name: '直播',
|
||||
},
|
||||
{
|
||||
type: '10',
|
||||
name: '跳转至历史页面',
|
||||
},
|
||||
{
|
||||
type: '11',
|
||||
name: '外部链接',
|
||||
},
|
||||
], //跳转类型
|
||||
}
|
||||
},
|
||||
|
||||
props: ['datas'],
|
||||
|
||||
created() {
|
||||
console.log(this.datas)
|
||||
},
|
||||
|
||||
methods: {
|
||||
/* 删除分组 */
|
||||
delecommoditylisttypetab(index) {
|
||||
this.datas.commoditylisttypetab.splice(index, 1)
|
||||
},
|
||||
|
||||
/* 删除分组里的图片 */
|
||||
delecommodityimg(ind, index) {
|
||||
this.datas.commoditylisttypetab[ind].imageList.splice(index, 1)
|
||||
},
|
||||
|
||||
/* 删除图片 */
|
||||
deleteimg(index, ind) {
|
||||
this.datas.commoditylisttypetab[index].imageList.splice(ind, 1)
|
||||
},
|
||||
|
||||
// 选择类型
|
||||
changeType(res) {
|
||||
console.log(res)
|
||||
if (res === '1' || res === '2' || res === '6' || res === '3') {
|
||||
/* 获取视频,音频,直播信息 */
|
||||
this.$httpApi.newsList({ type: res }).then((res) => {
|
||||
this.activ = 0
|
||||
|
||||
this.options = res.data
|
||||
})
|
||||
} else if (res === '10') {
|
||||
this.$httpApi.shopTemplate().then((res) => {
|
||||
|
||||
this.options = res.data.shopTemplateList
|
||||
})
|
||||
}
|
||||
},
|
||||
changeId(res) {
|
||||
if (res.component) delete res.component
|
||||
this.datas.imageList[this.imgActive].http = res
|
||||
},
|
||||
|
||||
/* 替换 */
|
||||
uploadInformation(res) {
|
||||
this.datas.imageList[this.imgActive].src = res
|
||||
},
|
||||
|
||||
// 添加商品
|
||||
addproduct(index) {
|
||||
let params = {
|
||||
httpType: '1', // 跳转类型
|
||||
coverUrl: null, // 商品图片
|
||||
id: null, // 跳转id
|
||||
externalLink: null, // 外链地址
|
||||
}
|
||||
this.datas.commoditylisttypetab[index].imageList.push(params)
|
||||
},
|
||||
},
|
||||
|
||||
components: { vuedraggable, uploadimg },
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
/* 商品列表 */
|
||||
.magiccubestyleList {
|
||||
padding: 6px 12px;
|
||||
margin: 16px 0px;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.magiccubestyleList-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
/* 删除图标 */
|
||||
.el-icon-circle-close {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: -10px;
|
||||
cursor: pointer;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
/* 图片 */
|
||||
.imag {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
span {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片字 */
|
||||
.imgText {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding-left: 20px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
/* 商品列表 */
|
||||
.imgBanner {
|
||||
padding: 6px 12px;
|
||||
margin: 16px 7px;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
/* 删除图标 */
|
||||
.el-icon-circle-close {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: -10px;
|
||||
cursor: pointer;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
/* 图片 */
|
||||
.imag {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
span {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 图片字 */
|
||||
.imgText {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding-left: 20px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
/* 上传图片按钮 */
|
||||
.uploadImg {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.tit {
|
||||
/deep/.el-input__inner {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -424,15 +424,8 @@ export default {
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.initImageList()
|
||||
},
|
||||
methods: {
|
||||
// 初始化更新imageList数据
|
||||
initImageList() {
|
||||
this.datas.imageList = this.$utils.replaceImageList(this.datas.imageList)
|
||||
console.log(this.datas.imageList, '------------created imageList')
|
||||
},
|
||||
|
||||
/* 替换 */
|
||||
uploadInformation(res) {
|
||||
this.datas.imageList[this.imgActive].src = res
|
||||
|
||||
@ -248,15 +248,9 @@ export default {
|
||||
},
|
||||
|
||||
created() {
|
||||
this.initImageList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 初始化更新imageList数据
|
||||
initImageList() {
|
||||
this.datas.imageList = this.$utils.replaceImageList(this.datas.imageList)
|
||||
console.log(this.datas.imageList, '------------created imageList')
|
||||
},
|
||||
|
||||
// 提交
|
||||
uploadInformation(res) {
|
||||
|
||||
@ -114,11 +114,6 @@ export default {
|
||||
succFun(res.result)
|
||||
}
|
||||
xhr.send(formData)
|
||||
|
||||
// this.$httpApi.uploadImgs(formData).then(res => {
|
||||
// if(res.success != true) return failFun('HTTP Error: ' + res.msg)
|
||||
// succFun(res.result)
|
||||
// })
|
||||
},
|
||||
},
|
||||
predefineColors: [
|
||||
|
||||
@ -107,139 +107,45 @@ export default {
|
||||
changeType(isVisible, linkType) {
|
||||
if (isVisible && linkType) {
|
||||
this.emptyText = '正在搜索中'
|
||||
/* 获取视频,音频,直播信息 */
|
||||
/* 获取信息 */
|
||||
let res = {
|
||||
code: 0,
|
||||
success: true,
|
||||
error: false,
|
||||
data: [
|
||||
{
|
||||
id: 403,
|
||||
createTime: 1621504872000,
|
||||
updateTime: 1621504872000,
|
||||
remark: null,
|
||||
name: '查玛代表传承人',
|
||||
classifyId: null,
|
||||
type: 2,
|
||||
retailPrice: 0,
|
||||
price: 0,
|
||||
memberPrice: 0,
|
||||
vipPrice: 0,
|
||||
costPrice: 0,
|
||||
jidPrice: 0,
|
||||
zidPrice: 0,
|
||||
tidPrice: 0,
|
||||
scorePrice: 0,
|
||||
freight: 0,
|
||||
top: null,
|
||||
score: null,
|
||||
sort: 1,
|
||||
status: 1,
|
||||
code: null,
|
||||
coverUrl:
|
||||
'https://imgs.starfirelink.com/minicourse/非遗传承人@2x_1621504834414.png',
|
||||
url: 'https://mgt.starfirelink.com/mobile/index.html#/videoOnDemand?videoId=5285890818212341060',
|
||||
lengths: '',
|
||||
introduce: '',
|
||||
free: 1,
|
||||
classOne: null,
|
||||
classTwo: null,
|
||||
classThree: null,
|
||||
seriesId: 0,
|
||||
vId: null,
|
||||
price: 0,
|
||||
name: '测试1',
|
||||
videoId: '5285890818212341060',
|
||||
teacherId: 1,
|
||||
details: '',
|
||||
buys: 0,
|
||||
tryVideoId: null,
|
||||
tryLengths: null,
|
||||
num: 0,
|
||||
bannerImgUrl: null,
|
||||
specifications: null,
|
||||
color: null,
|
||||
createTimes: null,
|
||||
createTimee: null,
|
||||
updateTimes: null,
|
||||
updateTimee: null,
|
||||
page: 1,
|
||||
limit: 20,
|
||||
order: null,
|
||||
ordertype: null,
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
seriesName: null,
|
||||
id: 403,
|
||||
type: 2,
|
||||
seriesId: '0',
|
||||
},
|
||||
{
|
||||
id: 396,
|
||||
createTime: 1621403190000,
|
||||
updateTime: 1621416056000,
|
||||
remark: null,
|
||||
name: '测试',
|
||||
classifyId: null,
|
||||
type: 2,
|
||||
retailPrice: 0,
|
||||
price: 1,
|
||||
memberPrice: 1,
|
||||
vipPrice: 0,
|
||||
costPrice: 0,
|
||||
jidPrice: 0,
|
||||
zidPrice: 0,
|
||||
tidPrice: 0,
|
||||
scorePrice: 0,
|
||||
freight: 0,
|
||||
top: null,
|
||||
score: null,
|
||||
sort: 1,
|
||||
status: 1,
|
||||
code: null,
|
||||
coverUrl:
|
||||
'https://imgs.starfirelink.com/minicourse/QQ截图20210409170420_1621416051505.png',
|
||||
url: 'https://mgt.starfirelink.com/mobile/index.html#/videoOnDemand?videoId=',
|
||||
lengths: '1',
|
||||
introduce: '1',
|
||||
free: 0,
|
||||
classOne: null,
|
||||
classTwo: null,
|
||||
classThree: null,
|
||||
seriesId: 85,
|
||||
vId: null,
|
||||
price: 1,
|
||||
name: '测试2',
|
||||
videoId: '',
|
||||
teacherId: 1,
|
||||
details: '1',
|
||||
buys: 1,
|
||||
tryVideoId: null,
|
||||
tryLengths: null,
|
||||
num: 0,
|
||||
bannerImgUrl: null,
|
||||
specifications: null,
|
||||
color: null,
|
||||
createTimes: null,
|
||||
createTimee: null,
|
||||
updateTimes: null,
|
||||
updateTimee: null,
|
||||
page: 1,
|
||||
limit: 20,
|
||||
order: null,
|
||||
ordertype: null,
|
||||
minPrice: null,
|
||||
maxPrice: null,
|
||||
seriesName: '非遗商城',
|
||||
id: 396,
|
||||
type: 2,
|
||||
seriesId: '85',
|
||||
},
|
||||
],
|
||||
}
|
||||
this.activ = 0
|
||||
res.data.length === 0 ? (this.emptyText = '暂无数据') : null
|
||||
this.options = res.data
|
||||
// 校验数据
|
||||
this.options = this.$utils.filterCommodityData(linkType, this.options)
|
||||
}
|
||||
},
|
||||
// 保存跳转的地方
|
||||
changeId(res) {
|
||||
console.log(res)
|
||||
// 通过商品 type 和 id 获取到商品数据 newList接口数据可以不用
|
||||
console.log(this.$utils.getCoursewareData(this.type, res.id),'--------')
|
||||
this.dialogImageUrl = this.$utils.getCoursewareData(this.type, res.id)
|
||||
this.dialogImageUrl = res
|
||||
console.log(this.dialogImageUrl, '----------------changeId')
|
||||
},
|
||||
/* 显示上传文件组件 */
|
||||
showUpload() {
|
||||
|
||||
@ -256,55 +256,8 @@ export default {
|
||||
},
|
||||
|
||||
mounted() {
|
||||
//该字段用于区分，是否是选择模板
|
||||
let type = this.$route.query.type
|
||||
if (this.$route.query.id) {
|
||||
/* 加载 */
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: '加载中...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
})
|
||||
this.$httpApi
|
||||
.shopTemplates({ shopTemplateId: this.$route.query.id })
|
||||
.then((res) => {
|
||||
/* 取消加载 */
|
||||
loading.close()
|
||||
|
||||
let datas = res.data.shopTemplate
|
||||
|
||||
//如果为模板，则需要将id设置为null,否则模板会被修改
|
||||
if (!type) {
|
||||
this.id = res.data.shopTemplate.id
|
||||
}
|
||||
|
||||
this.pageComponents = JSON.parse(datas.component)
|
||||
|
||||
console.log(this.pageComponents, '--------------------pageComponents')
|
||||
|
||||
if (datas.templateJson) {
|
||||
console.log('----------home datas1')
|
||||
this.pageSetup = JSON.parse(datas.templateJson)
|
||||
} else {
|
||||
console.log('----------home datas2')
|
||||
this.pageSetup.name = datas.name
|
||||
this.pageSetup.details = datas.details
|
||||
this.pageSetup.bgColor = datas.bgColor
|
||||
}
|
||||
/* 默认页面设置 */
|
||||
this.currentproperties = this.pageSetup
|
||||
console.log(
|
||||
this.currentproperties,
|
||||
this.pageSetup,
|
||||
'----------home datas'
|
||||
)
|
||||
})
|
||||
} else {
|
||||
this.pageSetup.name = '页面标题'
|
||||
this.currentproperties = this.pageSetup
|
||||
console.log(this.currentproperties, '----------home datas')
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
@ -342,49 +295,14 @@ export default {
|
||||
},
|
||||
/**
|
||||
* 保存
|
||||
*
|
||||
* @param {Function} callBack 回调函数
|
||||
*/
|
||||
Preservation(callBack) {
|
||||
Preservation() {
|
||||
/* 隐藏border和删除图标 */
|
||||
this.deleShow = false
|
||||
/* 渲染结束截图 */
|
||||
this.$nextTick(() => {
|
||||
/* 截图 */
|
||||
this.toImage((res) => {
|
||||
/* 加载 */
|
||||
const loadings = this.$loading({
|
||||
lock: true,
|
||||
text: '上传中...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
})
|
||||
|
||||
this.$httpApi
|
||||
.save({
|
||||
id: this.id,
|
||||
imgUrl: res,
|
||||
// bgColor: this.pageSetup.colour,
|
||||
// details:this.pageSetup.description,
|
||||
name: this.pageSetup.name,
|
||||
// bottomLogo: this.pageSetup.bottomLogo,
|
||||
templateJson: JSON.stringify(this.pageSetup),
|
||||
component: JSON.stringify(this.pageComponents),
|
||||
})
|
||||
.then((res) => {
|
||||
/* 取消加载 */
|
||||
loadings.close()
|
||||
|
||||
this.$message({
|
||||
message: '上传成功',
|
||||
type: 'success',
|
||||
})
|
||||
|
||||
this.id = res.data.id
|
||||
|
||||
if (callBack) callBack()
|
||||
})
|
||||
})
|
||||
this.toImage()
|
||||
})
|
||||
},
|
||||
|
||||
@ -393,7 +311,7 @@ export default {
|
||||
*
|
||||
* @param {Function} callBack 回调函数
|
||||
*/
|
||||
toImage(callBack) {
|
||||
toImage() {
|
||||
/* 加载 */
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
@ -415,18 +333,8 @@ export default {
|
||||
let url = canvas.toDataURL('image/png')
|
||||
const formData = new FormData()
|
||||
formData.append('base64File', url)
|
||||
this.$httpApi.miniShop(formData).then((res) => {
|
||||
/* 取消加载 */
|
||||
loading.close()
|
||||
|
||||
this.$message({
|
||||
message: '保存成功',
|
||||
type: 'success',
|
||||
})
|
||||
|
||||
/* 获取图片链接 */
|
||||
callBack(res.data.src)
|
||||
})
|
||||
console.log(formData,'--------------页面图片formData')
|
||||
loading.close()
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
<template>
|
||||
<div id="qrcode"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'qrcode',
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@ -1,689 +0,0 @@
|
||||
<template>
|
||||
<div class="screen">
|
||||
<div class="screen-setting">
|
||||
<div class="screen-setting_left">
|
||||
<div class="__phone">
|
||||
<div class="__phone_window">
|
||||
<div class="is_skip" v-if="facade.chamfer_skip">
|
||||
<div class="is_skip_bg"></div>
|
||||
<div class="is_skip_txt">跳过</div>
|
||||
</div>
|
||||
<el-carousel
|
||||
trigger="click"
|
||||
height="1206px"
|
||||
arrow="never"
|
||||
@change="handleChange"
|
||||
:interval="3000"
|
||||
:class="{
|
||||
circle: facade.indicator_style == 1,
|
||||
strip: facade.indicator_style == 2,
|
||||
number: facade.indicator_style == 3,
|
||||
left: facade.indicator_align === 'left',
|
||||
center: facade.indicator_align === 'center',
|
||||
right: facade.indicator_align === 'right',
|
||||
}"
|
||||
>
|
||||
<el-carousel-item
|
||||
v-for="(item, index) in img_content"
|
||||
:key="index"
|
||||
>
|
||||
<img :src="getBannerImg(item.url)" width="100%" height="100%" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<div
|
||||
class="carousel_number"
|
||||
:class="{
|
||||
left: facade.indicator_align === 'left',
|
||||
center: facade.indicator_align === 'center',
|
||||
right: facade.indicator_align === 'right',
|
||||
}"
|
||||
v-if="facade.indicator_style == 3"
|
||||
>
|
||||
{{ activeNumber + '/' + img_content.length }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screen-setting_right">
|
||||
<div class="__tabs">
|
||||
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
||||
<el-tab-pane label="内容设置" name="first">
|
||||
<el-form label-width="80px">
|
||||
<el-form-item label="显示设置">
|
||||
<el-radio-group v-model="displayType">
|
||||
<el-radio :label="1">首次打开商城时</el-radio>
|
||||
<el-radio :label="2">按周期显示</el-radio>
|
||||
</el-radio-group>
|
||||
<div v-if="displayType === 2" class="le-input--120">
|
||||
每
|
||||
<el-input v-model.number="days" :maxlength="5">
|
||||
<template slot="append"> 天 </template>
|
||||
</el-input>
|
||||
显示一次
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="允许跳过">
|
||||
<el-switch
|
||||
v-model="facade.chamfer_skip"
|
||||
active-color="#409EFF"
|
||||
inactive-color="#BBBFC8"
|
||||
>
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片设置">
|
||||
<div class="le-prompt-text">
|
||||
建议图片尺寸：1080px*1920px
|
||||
</div>
|
||||
<div class="flex flex-wrap">
|
||||
<vuedraggable v-model="content">
|
||||
<div
|
||||
class="_imagelist_item select-cover__288"
|
||||
v-for="(item, index) in content"
|
||||
:key="index"
|
||||
>
|
||||
<i
|
||||
class="le-icon le-icon-cha2 _imagelist_item-close"
|
||||
@click.stop="handleDelete(index)"
|
||||
></i>
|
||||
<img :src="item.url" alt="">
|
||||
</div>
|
||||
</vuedraggable>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="le-cardpin">
|
||||
<el-button type="primary" @click="handleSubmit">保存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script type="text/javascript">
|
||||
// import choice from './choice.vue';
|
||||
import vuedraggable from 'vuedraggable'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
// choice,
|
||||
vuedraggable,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'first',
|
||||
activeNumber: 1,
|
||||
displayType: 1,
|
||||
days: 7,
|
||||
content: [
|
||||
{
|
||||
url: 'http://qmxq.oss-cn-hangzhou.aliyuncs.com/template/ad_1.png',
|
||||
},
|
||||
{
|
||||
url: 'http://qmxq.oss-cn-hangzhou.aliyuncs.com/template/ad_2.png',
|
||||
},
|
||||
{
|
||||
url: 'http://qmxq.oss-cn-hangzhou.aliyuncs.com/template/ad_3.png',
|
||||
},
|
||||
],
|
||||
def_content: [
|
||||
{
|
||||
url: 'http://qmxq.oss-cn-hangzhou.aliyuncs.com/template/ad_1.png',
|
||||
},
|
||||
{
|
||||
url: 'http://qmxq.oss-cn-hangzhou.aliyuncs.com/template/ad_2.png',
|
||||
},
|
||||
{
|
||||
url: 'http://qmxq.oss-cn-hangzhou.aliyuncs.com/template/ad_3.png',
|
||||
},
|
||||
],
|
||||
facade: {
|
||||
indicator_style: '3',
|
||||
indicator_align: 'center',
|
||||
indicator_color: '#666666',
|
||||
chamfer_skip: true,
|
||||
},
|
||||
pointerData: [
|
||||
{
|
||||
value: 1,
|
||||
name: '圆形',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
name: '数字',
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
name: '数字',
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 计算属性
|
||||
* @type {Object}
|
||||
*/
|
||||
computed: {
|
||||
img_content() {
|
||||
if (this.content.length === 0) {
|
||||
return this.def_content
|
||||
}
|
||||
if (this.content.length == 1) {
|
||||
if (!this.content[0].url) {
|
||||
return this.def_content
|
||||
}
|
||||
}
|
||||
return this.content
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 页面渲染前
|
||||
* @return {[type]} [description]
|
||||
*/
|
||||
created() {},
|
||||
/**
|
||||
* 数据监听
|
||||
* @type {Object}
|
||||
*/
|
||||
watch: {},
|
||||
/**
|
||||
* 页面加载执行
|
||||
* @return {[type]} [description]
|
||||
*/
|
||||
async mounted() {
|
||||
this.handleLoaddata()
|
||||
//this.handleStyle();
|
||||
},
|
||||
methods: {
|
||||
getBannerImg(value) {
|
||||
return value
|
||||
// var num = Math.floor(Math.random() * 3);
|
||||
// if (value) {
|
||||
// return value;
|
||||
// } else {
|
||||
// return this.def_content[num].url;
|
||||
// }
|
||||
},
|
||||
handleChange(value) {
|
||||
this.activeNumber = value + 1
|
||||
this.handleStyle()
|
||||
this.getBannerImg()
|
||||
},
|
||||
/**
|
||||
* 修改样式
|
||||
* @return {[type]} [description]
|
||||
*/
|
||||
handleStyle() {
|
||||
let color = this.facade.indicator_color
|
||||
var el_b = document.querySelectorAll(
|
||||
'.el-carousel__indicator.el-carousel__indicator--horizontal .el-carousel__button'
|
||||
)
|
||||
var el_a = document.querySelectorAll(
|
||||
'.el-carousel__indicator.el-carousel__indicator--horizontal.is-active .el-carousel__button'
|
||||
)
|
||||
for (var i = el_b.length - 1; i >= 0; i--) {
|
||||
el_b[i].style.backgroundColor = '#FFFFFF'
|
||||
el_b[i].style.opacity = 1
|
||||
}
|
||||
el_a[0].style.backgroundColor = color
|
||||
},
|
||||
handleClick() {},
|
||||
/**
|
||||
* 删除图片
|
||||
* @return {[type]} [description]
|
||||
*/
|
||||
handleDelete(index) {
|
||||
this.content.splice(index, 1)
|
||||
},
|
||||
/**
|
||||
* 获取数据
|
||||
* @return {[type]} [description]
|
||||
*/
|
||||
handleLoaddata() {
|
||||
// this.$heshop
|
||||
// .search(
|
||||
// 'POST',
|
||||
// { include: 'setting' },
|
||||
// {
|
||||
// keyword: 'openingad'
|
||||
// }
|
||||
// )
|
||||
// .then(res => {
|
||||
// if (res && res.content) {
|
||||
// this.content = res.content.content;
|
||||
// this.facade = res.content.facade;
|
||||
// this.displayType = res.content.type ? res.content.type : 1;
|
||||
// this.days = res.content.days;
|
||||
// }
|
||||
// })
|
||||
// .catch(() => {
|
||||
// this.$message.error('加载配置信息失败，请检查网络');
|
||||
// });
|
||||
},
|
||||
/**
|
||||
* 执行数据提交
|
||||
* @return {[type]} [description]
|
||||
*/
|
||||
handleSubmit() {
|
||||
for (let i = 0; i < this.content.length; i++) {
|
||||
if (!this.content[i].url) {
|
||||
this.$message.error('图片不能为空')
|
||||
return
|
||||
}
|
||||
}
|
||||
// this.$heshop
|
||||
// .setting('post', {
|
||||
// keyword: 'openingad',
|
||||
// content: {
|
||||
// content: this.content,
|
||||
// facade: this.facade,
|
||||
// type: this.displayType,
|
||||
// days: this.days,
|
||||
// submit_time: Date.parse(new Date()),
|
||||
// },
|
||||
// })
|
||||
// .then(() => {
|
||||
// this.$message({
|
||||
// message: '保存成功',
|
||||
// type: 'success',
|
||||
// })
|
||||
// })
|
||||
// .catch(() => {
|
||||
// this.$message.error('加载配置信息失败，请检查网络')
|
||||
// })
|
||||
},
|
||||
addAd(data) {
|
||||
this.content.push({
|
||||
url: data,
|
||||
link: {},
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.screen {
|
||||
.is_skip {
|
||||
width: 120px;
|
||||
height: 68px;
|
||||
font-size: 12px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-size: 22px;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
line-height: 60px;
|
||||
top: 120px;
|
||||
right: 30px;
|
||||
|
||||
.is_skip_bg {
|
||||
background: #000000;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 34px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.is_skip_txt {
|
||||
font-size: 30px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
line-height: 68px;
|
||||
position: absolute;
|
||||
z-index: 200;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.el-divider {
|
||||
margin: 12px 0 20px 0;
|
||||
}
|
||||
|
||||
/deep/ .__phone_window {
|
||||
position: relative;
|
||||
|
||||
.el-carousel {
|
||||
.el-carousel__button {
|
||||
width: 32px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.carousel_number {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
width: 68px;
|
||||
height: 32px;
|
||||
opacity: 0.4;
|
||||
border-radius: 16px;
|
||||
z-index: 100;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
font-size: 22px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #d0b9bd;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.carousel_number.left {
|
||||
left: 2%;
|
||||
}
|
||||
|
||||
.carousel_number.center {
|
||||
left: 50%;
|
||||
margin-left: -34px;
|
||||
}
|
||||
|
||||
.carousel_number.right {
|
||||
right: 2%;
|
||||
}
|
||||
|
||||
.el-carousel {
|
||||
.el-carousel__button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.el-carousel.circle {
|
||||
.el-carousel__indicators--horizontal {
|
||||
.el-carousel__button {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-carousel.number {
|
||||
.el-carousel__indicators--horizontal {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-carousel.left {
|
||||
.el-carousel__indicators--horizontal {
|
||||
left: 20px;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
.el-carousel.center {
|
||||
.el-carousel__indicators--horizontal {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.el-carousel.right {
|
||||
.el-carousel__indicators--horizontal {
|
||||
left: auto;
|
||||
right: 20px;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-item-title {
|
||||
font-size: 14px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
color: #595959;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
._imagelist_item {
|
||||
display: inline-block;
|
||||
margin-right: 24px;
|
||||
height: 200px;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
|
||||
._imagelist_item-close {
|
||||
z-index: 100;
|
||||
position: absolute;
|
||||
right: -7px;
|
||||
top: -7px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 16px;
|
||||
color: #afafaf;
|
||||
display: none;
|
||||
}
|
||||
img{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
._imagelist_item:hover {
|
||||
._imagelist_item-close {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-setting {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
|
||||
&_left {
|
||||
width: 417px;
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
&_right {
|
||||
flex: 417px 1;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.__card {
|
||||
border-radius: 16px;
|
||||
|
||||
&_clearfix {
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #262626;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
h3:before {
|
||||
content: '';
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
border-left: 4px solid #409EFF;
|
||||
padding-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.__phone {
|
||||
margin: 0 auto;
|
||||
width: 834px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 88px;
|
||||
//zoom: .453;
|
||||
transform: scale(0.5);
|
||||
transform-origin: 0 0;
|
||||
|
||||
.__phone_window {
|
||||
width: 750px;
|
||||
position: relative;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dcdfe6;
|
||||
margin: 88px auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.__card {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.__tabs {
|
||||
.le-input--120 {
|
||||
margin-top: 12px;
|
||||
.el-input {
|
||||
width: 120px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
/deep/.el-tabs.el-tabs--card.el-tabs--top {
|
||||
> .el-tabs__header {
|
||||
border-bottom: 0 solid #e4e7ed;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> .el-tabs__header .el-tabs__nav {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
> .el-tabs__header .el-tabs__item {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
> .el-tabs__header .el-tabs__item:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
> .el-tabs__header .el-tabs__item.is-active {
|
||||
background: #ffffff;
|
||||
border-radius: 16px 16px 0px 0px;
|
||||
}
|
||||
|
||||
.el-tabs__content .el-tab-pane {
|
||||
border-radius: 16px;
|
||||
background: #ffffff;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.el-tabs__content .el-tab-pane:first-child {
|
||||
border-radius: 0 16px 16px 16px;
|
||||
background: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
._explain {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
._tips {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-family: Microsoft YaHei;
|
||||
font-weight: 400;
|
||||
color: #bfbfbf;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.picture-dialog {
|
||||
width: 228px;
|
||||
height: 368px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
|
||||
.select-cover__288 {
|
||||
width: 180px;
|
||||
height: 320px;
|
||||
border-radius: 4px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
&-add {
|
||||
width: 180px;
|
||||
height: 320px;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border: 1px dashed #dcdfe6;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
display: block;
|
||||
font-size: 26px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
color: #bfbfbf;
|
||||
margin: 8px auto;
|
||||
}
|
||||
|
||||
&-text {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 30px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
&-edit {
|
||||
position: absolute;
|
||||
width: 180px;
|
||||
height: 320px;
|
||||
cursor: pointer;
|
||||
|
||||
.el-image {
|
||||
width: 180px;
|
||||
height: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
&-tips {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 120px;
|
||||
height: 28px;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.le-cardpin{
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: #f3f5f7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -30,11 +30,6 @@ Vue.prototype.$httpApi = httpApi
|
||||
/* import VueCookies from 'vue-cookies'
|
||||
Vue.use(VueCookies) */
|
||||
|
||||
Vue.prototype.$hasPermission = function (permission) {
|
||||
//console.log("---------$hasPermission-------")
|
||||
return window.hasPermission(permission)
|
||||
}
|
||||
|
||||
// 挂载 uitls
|
||||
import Utils from './utils/index'
|
||||
Vue.prototype.$utils = Utils
|
||||
|
||||
@ -18,12 +18,6 @@ const routes = [
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
// 创建页面
|
||||
path: '/establishShop',
|
||||
name: 'establishShop',
|
||||
component: () => import('@/views/establishShop'),
|
||||
},
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
|
||||
@ -27,9 +27,8 @@ componentsData.set('captiontext', {
|
||||
show: false,//是否显示查看更多
|
||||
type: 1, // 样式选择
|
||||
text: '查看更多', //自定义文字
|
||||
httpType: 1,//链接类型
|
||||
http: '',//外部链接
|
||||
select: {},//内部跳转链接
|
||||
httpType: 10,//链接类型
|
||||
http: '',//链接
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
@ -22,24 +22,6 @@ let globalFilter = {
|
||||
s = s < 10 ? '0' + s : s
|
||||
return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* 获取最新的组件数据
|
||||
* @param {*} itemData
|
||||
* @param {*} itemKey
|
||||
* @returns
|
||||
*/
|
||||
getCommodityItemData(itemData, itemKey) {
|
||||
let shopCommodity = JSON.parse(localStorage.getItem('shopCommodity'))
|
||||
if (
|
||||
shopCommodity[itemData.type] && shopCommodity[itemData.type][itemData.id]
|
||||
) {
|
||||
return shopCommodity[itemData.type][itemData.id][itemKey]
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
export default globalFilter
|
||||
|
||||
@ -102,73 +102,6 @@ class utils {
|
||||
return result
|
||||
}
|
||||
|
||||
/**
|
||||
* 过滤商品数据 对应商品类型没有指定id等数据 options 中禁止选择
|
||||
*
|
||||
* @param {*} linkType
|
||||
* @param {*} data
|
||||
* @memberof utils
|
||||
*/
|
||||
filterCommodityData(linkType, data) {
|
||||
data.forEach((item) => {
|
||||
if (linkType === '1' || linkType === '3') {
|
||||
// 视频音频必须拥有videoId 和 id
|
||||
item.videoId && item.id ? null : (item.disabled = true) // 不存在数据 直接禁用
|
||||
} else if (linkType === '2' || linkType === '6' || linkType === '10') {
|
||||
item.id ? null : (item.disabled = true)
|
||||
}
|
||||
})
|
||||
|
||||
return data
|
||||
}
|
||||
|
||||
// getCoursewareData 匹配数组
|
||||
coursewareMetchArr = ['1', '2', '3', '6', '7']
|
||||
|
||||
/**
|
||||
* 通过商品类型 商品id获取商品数据
|
||||
*
|
||||
* @param {String} type 商品类型
|
||||
* @param {Number} id 商品id
|
||||
* @memberof utils
|
||||
*/
|
||||
getCoursewareData(type, id) {
|
||||
// 只匹配type 为 1 2 3 6
|
||||
if (this.coursewareMetchArr.includes(type)) {
|
||||
console.log('utils -> getCoursewareData -> id', id)
|
||||
console.log('utils -> getCoursewareData -> type', type)
|
||||
let shopCommodity = JSON.parse(localStorage.getItem('shopCommodity'))
|
||||
|
||||
return shopCommodity[type][id]
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 更新imageList数据
|
||||
*
|
||||
* @param {Array} imageList 需要改变的imageList数组
|
||||
* @returns {Array} 更改好的数据
|
||||
* @memberof utils
|
||||
*/
|
||||
replaceImageList(imageList) {
|
||||
console.log(imageList, '----------------------imageList')
|
||||
if (imageList.length > 0) {
|
||||
// 有数据 不用更新封面图片 只用更新videoId name等数据
|
||||
imageList.forEach((element) => {
|
||||
console.log(element, '-------------------replaceImageList')
|
||||
element.http =
|
||||
this.getCoursewareData(
|
||||
element.linktype ? element.linktype : element.http.type,
|
||||
element.http.id
|
||||
) || element.http
|
||||
})
|
||||
console.log(imageList, '--------------------更新后的数据')
|
||||
return imageList
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 递归合并两个对象
|
||||
|
||||
@ -1,879 +0,0 @@
|
||||
<template>
|
||||
<div class="establishShop">
|
||||
<el-backtop :visibility-height="100" :bottom="60"></el-backtop>
|
||||
|
||||
<!-- tab切换 -->
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="页面管理" name="pageSetup">
|
||||
<!-- 店铺头部 -->
|
||||
<section class="shopHeader" v-if="homepageData">
|
||||
<!-- <img src="../../assets/images/backimg.png" alt=""> -->
|
||||
<!-- 文字内容 -->
|
||||
<div class="text">
|
||||
<!-- 标题 -->
|
||||
<p>
|
||||
<el-badge value="店铺主页" class="item" type="primary">
|
||||
<span class="title">{{ homepageData.name }}</span>
|
||||
</el-badge>
|
||||
</p>
|
||||
<!-- 创建时间 -->
|
||||
<p class="time">创建时间：{{ homepageData.createTime }}</p>
|
||||
<!-- 店铺操作 -->
|
||||
<p class="operation">
|
||||
<span @click="edit(homepageData.id)">编辑</span>
|
||||
<span @click="$refs.exten.showExtension(homepageData, 'isHome')"
|
||||
>推广</span
|
||||
>
|
||||
<span @click="copy(homepageData.id)">复制</span>
|
||||
<span @click="exportTemplate(homepageData.id, homepageData.name)"
|
||||
>导出配置</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 按钮和搜索 -->
|
||||
<section class="butAndSear">
|
||||
<div class="butAndSear-left">
|
||||
<!-- 按钮 -->
|
||||
<el-badge is-dot class="item">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="$refs.createtem.showExtension()"
|
||||
>新建页面</el-button
|
||||
>
|
||||
</el-badge>
|
||||
|
||||
<!-- 按钮 -->
|
||||
<el-upload
|
||||
class="upload-demo-aa"
|
||||
:action="baseupload"
|
||||
with-credentials
|
||||
:show-file-list="false"
|
||||
accept=".yhxl"
|
||||
:on-success="uploadSuccess"
|
||||
:on-error="uploadError"
|
||||
>
|
||||
<el-button size="small" type="primary">导入配置</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
|
||||
<!-- 状态 -->
|
||||
<p class="state">
|
||||
状态：
|
||||
<span class="warning-row"></span>已上架
|
||||
<span class="success-row"></span>未上架
|
||||
<!-- <span class="success-row"></span>未上架 -->
|
||||
</p>
|
||||
|
||||
<!-- 右边 -->
|
||||
<div>
|
||||
<el-select
|
||||
v-model="status"
|
||||
placeholder="请选择"
|
||||
size="small"
|
||||
@change="statusList"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.type"
|
||||
:label="item.text"
|
||||
:value="item.type"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 创建页面历史列表 -->
|
||||
<section class="pagelist">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
size="small"
|
||||
style="width: 100%"
|
||||
:default-sort="{ prop: 'updateTime', order: 'descending' }"
|
||||
>
|
||||
<!-- 详情 -->
|
||||
<el-table-column type="expand">
|
||||
<template slot-scope="props">
|
||||
<el-form label-position="left" class="demo-table-expand">
|
||||
<el-form-item label="id">
|
||||
<span>{{ props.row.id }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="模板人id">
|
||||
<span>{{ props.row.userAdminId }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="页面状态">
|
||||
<!-- <span :class=" props.row.status === 1 ? 'warning-row' : 'success-row'">{{ props.row.stativtext }}</span> -->
|
||||
<span>{{ props.row.stativtext }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否为模板">
|
||||
<!-- <span :class=" props.row.status === 1 ? 'warning-row' : 'success-row'">{{ props.row.stativtext }}</span> -->
|
||||
<span>{{ props.row.defaultT }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称">
|
||||
<span>{{ props.row.name }}</span>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="详情">
|
||||
<span>{{ props.row.details }}</span>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="创建时间">
|
||||
<span>{{ props.row.createTime }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="修改时间">
|
||||
<span>{{ props.row.updateTime }}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<span>{{ props.row.remark }}</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 序号 -->
|
||||
<el-table-column type="index" fixed="left" />
|
||||
|
||||
<!-- id -->
|
||||
<el-table-column prop="id" width="100" label="id" sortable />
|
||||
|
||||
<!-- 名称 -->
|
||||
<el-table-column prop="name" min-width="100" label="名称" />
|
||||
|
||||
<!-- 页面状态 -->
|
||||
<el-table-column prop="stativtext" min-width="100" label="页面状态">
|
||||
<template slot-scope="scope">
|
||||
<!-- <span :class=""></span> -->
|
||||
<span
|
||||
:class="scope.row.status === 1 ? 'warning-row-font' : ''"
|
||||
>{{ scope.row.stativtext }}</span
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 是否为系统模板 -->
|
||||
<el-table-column
|
||||
v-if="$hasPermission('cdst')"
|
||||
prop="stativtext"
|
||||
min-width="100"
|
||||
label="是否为系统模板"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span
|
||||
:class="scope.row.defaultT === 1 ? 'warning-row-font' : ''"
|
||||
>{{ scope.row.defaultT | fmtDefaultT }}</span
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 详情 -->
|
||||
<!-- <el-table-column prop="details" min-width="130" label="详情" /> -->
|
||||
|
||||
<!-- 创建时间 -->
|
||||
<el-table-column
|
||||
min-width="100"
|
||||
sortable
|
||||
prop="createTime"
|
||||
label="创建时间"
|
||||
>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 修改时间 -->
|
||||
<el-table-column
|
||||
min-width="100"
|
||||
sortable
|
||||
prop="updateTime"
|
||||
label="修改时间"
|
||||
>
|
||||
</el-table-column>
|
||||
|
||||
<!-- 操作 -->
|
||||
<el-table-column fixed="right" label="操作" width="400">
|
||||
<template slot="header">
|
||||
<input
|
||||
v-model="searchs"
|
||||
class="head-search"
|
||||
type="text"
|
||||
placeholder="请输入需要搜索的页面名称"
|
||||
@keydown.enter="inputName(searchs)"
|
||||
/>
|
||||
<i
|
||||
slot="prefix"
|
||||
class="el-input__icon el-icon-search search-icon"
|
||||
></i>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
class="search-btn"
|
||||
@click="inputName(searchs)"
|
||||
>搜索</el-button
|
||||
>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<!-- 编辑 -->
|
||||
<el-button
|
||||
style="padding: 0 5px; border-right: 1px solid #e5e5e5"
|
||||
type="text"
|
||||
size="small"
|
||||
@click="edit(scope.row.id)"
|
||||
>编辑</el-button
|
||||
>
|
||||
|
||||
<!-- 删除 -->
|
||||
<el-popconfirm
|
||||
title="您确定要删除该组件吗?"
|
||||
iconColor="red"
|
||||
@confirm="deletePage(scope.row.id)"
|
||||
>
|
||||
<el-button
|
||||
style="padding: 0 5px; border-right: 1px solid #e5e5e5"
|
||||
slot="reference"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
|
||||
<!-- 设为主页 -->
|
||||
<el-button
|
||||
style="padding: 0 5px; border-right: 1px solid #e5e5e5"
|
||||
v-if="scope.row.status !== 0 && scope.row.type !== 1"
|
||||
type="text"
|
||||
size="small"
|
||||
@click="setHomePage(scope.row.id)"
|
||||
>设为主页</el-button
|
||||
>
|
||||
<template v-if="$hasPermission('cdst')">
|
||||
<el-button
|
||||
style="padding: 0 5px; border-right: 1px solid #e5e5e5"
|
||||
v-if="scope.row.defaultT == 0"
|
||||
type="text"
|
||||
size="small"
|
||||
@click="setDefaultTemplate(scope.row.id, 1)"
|
||||
>设置为模板</el-button
|
||||
>
|
||||
<el-button
|
||||
style="padding: 0 5px; border-right: 1px solid #e5e5e5"
|
||||
v-if="scope.row.defaultT == 1"
|
||||
type="text"
|
||||
size="small"
|
||||
@click="setDefaultTemplate(scope.row.id, 0)"
|
||||
>取消系统模板</el-button
|
||||
>
|
||||
</template>
|
||||
|
||||
<!-- 推广 -->
|
||||
<el-button
|
||||
style="padding: 0 5px; margin: 0"
|
||||
type="text"
|
||||
size="small"
|
||||
@click="$refs.exten.showExtension(scope.row)"
|
||||
>分享</el-button
|
||||
>
|
||||
<!--复制-->
|
||||
<el-popconfirm
|
||||
title="您确定要复制该组件吗?"
|
||||
iconColor="red"
|
||||
@confirm="copy(scope.row.id)"
|
||||
>
|
||||
<el-button
|
||||
style="padding: 0 5px; border-right: 1px solid #e5e5e5"
|
||||
slot="reference"
|
||||
type="text"
|
||||
size="small"
|
||||
>复制</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
<!--导出配置-->
|
||||
<el-popconfirm
|
||||
title="您确定要导出该组件配置吗?"
|
||||
iconColor="red"
|
||||
@confirm="exportTemplate(scope.row.id, scope.row.name)"
|
||||
>
|
||||
<el-button
|
||||
style="padding: 0 5px; border-right: 1px solid #e5e5e5"
|
||||
slot="reference"
|
||||
type="text"
|
||||
size="small"
|
||||
>导出配置</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
style="text-align: center; margin: 40px"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[10, 20, 40, 80, 100, 130, 160, 200]"
|
||||
:page-size="pageNumber"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</section>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="开屏广告" name="screen">
|
||||
<screen/>
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane label="xxx" name="third">xxx</el-tab-pane> -->
|
||||
</el-tabs>
|
||||
|
||||
<!-- 推广弹框 -->
|
||||
<extension ref="exten" />
|
||||
|
||||
<!-- 创建模板 -->
|
||||
<createTemplate ref="createtem" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import extension from 'components/extension'
|
||||
import createTemplate from 'components/createTemplate'
|
||||
import screen from '../../layout/screen'
|
||||
|
||||
export default {
|
||||
inject: ['reload'],
|
||||
name: 'establishShop',
|
||||
data() {
|
||||
return {
|
||||
activeName: 'pageSetup', //默认第一个tab
|
||||
searchs: '', //搜索内容
|
||||
tableData: [] /* 列表数据 */,
|
||||
total: null, //总页数
|
||||
currentPage: 1, //当前页数
|
||||
pageNumber: 20, //每页多少条
|
||||
loading: false, //局部加载
|
||||
status: '', //状态
|
||||
options: [
|
||||
//选择
|
||||
{
|
||||
text: '全部',
|
||||
type: '',
|
||||
},
|
||||
{
|
||||
text: '未上架',
|
||||
type: '0',
|
||||
},
|
||||
{
|
||||
text: '已上架',
|
||||
type: '1',
|
||||
},
|
||||
],
|
||||
homepageData: null, //主页内容
|
||||
}
|
||||
},
|
||||
components: { extension, createTemplate,screen },
|
||||
created() {
|
||||
this.getList(1, this.pageNumber, this.searchs, this.status)
|
||||
},
|
||||
methods: {
|
||||
/* 获取列表接口 */
|
||||
getList(page, limit, name, status) {
|
||||
/* const loadingss = this.$loading({
|
||||
lock: true,
|
||||
text: '加载数据中...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
}); */
|
||||
this.loading = true
|
||||
|
||||
this.$httpApi
|
||||
.listData({ page, limit, name, status })
|
||||
.then((res) => {
|
||||
/* 取消加载 */
|
||||
|
||||
|
||||
|
||||
this.total = res.count - 1
|
||||
|
||||
for (const [index, item] of res.data.entries()) {
|
||||
item.createTime = this.formatDate(item.createTime)
|
||||
item.updateTime = this.formatDate(item.updateTime)
|
||||
if (item.type === 1) {
|
||||
/* item.stativtext = '主页' */
|
||||
this.homepageData = item
|
||||
delete res.data[index]
|
||||
} else if (item.status === 0) item.stativtext = '未上架'
|
||||
else if (item.status === 1) item.stativtext = '已上架'
|
||||
}
|
||||
this.tableData = res.data
|
||||
})
|
||||
.then(() => {
|
||||
this.loading = false
|
||||
})
|
||||
.catch(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
|
||||
/* tab切换 */
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event)
|
||||
},
|
||||
|
||||
/* 时间戳转换 */
|
||||
formatDate: (value) => {
|
||||
let date = new Date(value)
|
||||
let y = date.getFullYear()
|
||||
let MM = date.getMonth() + 1
|
||||
MM = MM < 10 ? '0' + MM : MM
|
||||
let d = date.getDate()
|
||||
d = d < 10 ? '0' + d : d
|
||||
let h = date.getHours()
|
||||
h = h < 10 ? '0' + h : h
|
||||
let m = date.getMinutes()
|
||||
m = m < 10 ? '0' + m : m
|
||||
let s = date.getSeconds()
|
||||
s = s < 10 ? '0' + s : s
|
||||
return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
|
||||
},
|
||||
|
||||
/* 当前列表状态 */
|
||||
// 弃用 改为单个状态颜色改变
|
||||
// tableRowClassName({row}) {
|
||||
// if(row.type === 1) return 'warning-row'
|
||||
// if(row.status === 0) return 'success-row'
|
||||
// if(row.status === 1) return 'warning-row'
|
||||
// },
|
||||
|
||||
/* 选择每一页条数 */
|
||||
handleSizeChange(val) {
|
||||
this.pageNumber = val
|
||||
this.getList(this.currentPage, val, this.searchs, this.status)
|
||||
window.scroll(0, 0)
|
||||
},
|
||||
|
||||
/* 选择第几页 */
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val
|
||||
this.getList(val, this.pageNumber, this.searchs, this.status)
|
||||
window.scroll(0, 0)
|
||||
},
|
||||
|
||||
/* 编辑按钮 */
|
||||
edit(id) {
|
||||
this.$router.push({ path: 'home', query: { id } })
|
||||
},
|
||||
|
||||
/* 设为主页按钮 */
|
||||
setHomePage(id) {
|
||||
this.$httpApi.homePage({ id }).then(() => {
|
||||
|
||||
/* 成功弹框 */
|
||||
this.$message({
|
||||
message: '设置为主页成功',
|
||||
type: 'success',
|
||||
})
|
||||
this.currentPage = 1
|
||||
this.getList(1, this.pageNumber, this.searchs, this.status)
|
||||
})
|
||||
},
|
||||
/* 设置为模板 */
|
||||
setDefaultTemplate(id, type) {
|
||||
this.$httpApi.saveDefaultTemplate({ id, type }).then(() => {
|
||||
|
||||
/* 成功弹框 */
|
||||
this.$message({
|
||||
message: '设置为模板成功',
|
||||
type: 'success',
|
||||
})
|
||||
this.currentPage = 1
|
||||
this.getList(1, this.pageNumber, this.searchs, this.status)
|
||||
this.$refs.createtem.loadDefaultTemplate()
|
||||
})
|
||||
},
|
||||
|
||||
/* 删除选项 */
|
||||
deletePage(id) {
|
||||
console.log(id, '------------deletePage')
|
||||
const loadingss = this.$loading({
|
||||
lock: true,
|
||||
text: '删除中...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
})
|
||||
this.$httpApi.delete({ id }).then(() => {
|
||||
/* 取消加载 */
|
||||
loadingss.close()
|
||||
|
||||
|
||||
|
||||
/* 成功弹框 */
|
||||
this.$message({
|
||||
message: '删除成功',
|
||||
type: 'success',
|
||||
})
|
||||
|
||||
/* 刷新列表 */
|
||||
this.getList(
|
||||
this.currentPage,
|
||||
this.pageNumber,
|
||||
this.searchs,
|
||||
this.status
|
||||
)
|
||||
})
|
||||
},
|
||||
|
||||
/* 搜索名称 */
|
||||
inputName(res) {
|
||||
console.log(res, '---------res')
|
||||
this.searchs = res
|
||||
this.getList(this.currentPage, this.pageNumber, this.searchs, this.status)
|
||||
},
|
||||
|
||||
/* 选择状态 */
|
||||
statusList() {
|
||||
this.getList(this.currentPage, this.pageNumber, this.searchs, this.status)
|
||||
},
|
||||
|
||||
// 更多按钮
|
||||
dropDownButton(res) {
|
||||
console.log(res)
|
||||
},
|
||||
//复制
|
||||
copy(id) {
|
||||
const loadingss = this.$loading({
|
||||
lock: true,
|
||||
text: '复制中...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
})
|
||||
this.$httpApi.copy({ id }).then(() => {
|
||||
/* 取消加载 */
|
||||
loadingss.close()
|
||||
|
||||
|
||||
|
||||
/* 成功弹框 */
|
||||
this.$message({
|
||||
message: '复制成功',
|
||||
type: 'success',
|
||||
})
|
||||
|
||||
/* 刷新列表 */
|
||||
this.getList(
|
||||
this.currentPage,
|
||||
this.pageNumber,
|
||||
this.searchs,
|
||||
this.status
|
||||
)
|
||||
})
|
||||
},
|
||||
//导出配置
|
||||
exportTemplate(id, name) {
|
||||
const loadingss = this.$loading({
|
||||
lock: true,
|
||||
text: '导出配置中...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
})
|
||||
this.$httpApi.exportTemplate({ shopTemplateId: id }).then((res) => {
|
||||
/* 取消加载 */
|
||||
loadingss.close()
|
||||
|
||||
|
||||
let data = res.data.exportData
|
||||
let fileName = name + '.yhxl'
|
||||
|
||||
var urlObject = window.URL || window.webkitURL || window
|
||||
var export_blob = new Blob([data])
|
||||
var save_link = document.createElementNS(
|
||||
'http://www.w3.org/1999/xhtml',
|
||||
'a'
|
||||
)
|
||||
save_link.href = urlObject.createObjectURL(export_blob)
|
||||
save_link.download = fileName
|
||||
var obj = save_link
|
||||
var ev = document.createEvent('MouseEvents')
|
||||
ev.initMouseEvent(
|
||||
'click',
|
||||
true,
|
||||
false,
|
||||
window,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
false,
|
||||
false,
|
||||
false,
|
||||
false,
|
||||
0,
|
||||
null
|
||||
)
|
||||
obj.dispatchEvent(ev)
|
||||
|
||||
/* 成功弹框 */
|
||||
this.$message({
|
||||
message: '导出配置成功',
|
||||
type: 'success',
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
//导入配置
|
||||
importTemplate(id) {
|
||||
const loadingss = this.$loading({
|
||||
lock: true,
|
||||
text: '导入配置中...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
})
|
||||
this.$httpApi.importTemplate({ id }).then(() => {
|
||||
/* 取消加载 */
|
||||
loadingss.close()
|
||||
|
||||
|
||||
|
||||
/* 成功弹框 */
|
||||
this.$message({
|
||||
message: '导入配置中成功',
|
||||
type: 'success',
|
||||
})
|
||||
|
||||
/* 刷新列表 */
|
||||
this.getList(
|
||||
this.currentPage,
|
||||
this.pageNumber,
|
||||
this.searchs,
|
||||
this.status
|
||||
)
|
||||
})
|
||||
},
|
||||
uploadSuccess(response) {
|
||||
if (!response.success) {
|
||||
return this.$message.error(response.msg)
|
||||
}
|
||||
|
||||
this.$message({
|
||||
message: '导入配置成功',
|
||||
type: 'success',
|
||||
})
|
||||
|
||||
/* 刷新列表 */
|
||||
this.getList(this.currentPage, this.pageNumber, this.searchs, this.status)
|
||||
|
||||
// 刷新页面
|
||||
this.reload()
|
||||
},
|
||||
|
||||
uploadError(err, file, fileList) {
|
||||
console.log('------uploadError----------')
|
||||
console.log(err)
|
||||
console.log(file)
|
||||
console.log(fileList)
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
// baseurl
|
||||
baseupload() {
|
||||
return `${window.global_config.BASE_URL}adm/shopTemplate/import`
|
||||
},
|
||||
},
|
||||
filters: {
|
||||
fmtDefaultT: function (defaultT) {
|
||||
let json = {
|
||||
0: '不是',
|
||||
1: '是',
|
||||
}
|
||||
return json[defaultT] || defaultT
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.establishShop {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* tab */
|
||||
// /deep/.el-tabs__nav-wrap .is-top {
|
||||
// padding: 0 20px;
|
||||
// }
|
||||
|
||||
.el-dropdown-link {
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: #409eff;
|
||||
}
|
||||
.el-icon-arrow-down {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* 店铺头部 */
|
||||
.shopHeader {
|
||||
width: 100%;
|
||||
min-height: 75px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
background: #f4f4f4;
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
margin-top: 5px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
/* 文字内容 */
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* 标题 */
|
||||
/deep/.el-badge {
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
/deep/.el-badge__content.is-fixed {
|
||||
right: -5px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
/* 创建时间 */
|
||||
.time {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
/* 店铺操作 */
|
||||
.operation {
|
||||
span {
|
||||
color: #38f;
|
||||
padding: 0 5px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
&:first-of-type {
|
||||
border-right: 1px solid #e5e5e5;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 按钮和搜索 */
|
||||
.butAndSear {
|
||||
margin: 15px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.butAndSear-left {
|
||||
width: 200px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.table-fixed {
|
||||
/deep/ .el-table__fixed-right {
|
||||
height: 100% !important; //设置高优先，以覆盖内联样式
|
||||
}
|
||||
}
|
||||
/* 创建页面历史列表 */
|
||||
.pagelist {
|
||||
/deep/.el-table {
|
||||
min-height: 400px;
|
||||
}
|
||||
/deep/.cell {
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
.head-search {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #dcdfe6;
|
||||
padding-left: 30px;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
line-height: 26px;
|
||||
}
|
||||
.head-search::placeholder {
|
||||
color: #909399;
|
||||
}
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 10px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.search-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
line-height: 28px;
|
||||
padding: 0 5px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 状态 */
|
||||
.state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
border: 1px solid #e4dfdf;
|
||||
height: 8px;
|
||||
margin: 0 15px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.demo-table-expand {
|
||||
font-size: 0;
|
||||
}
|
||||
/deep/.demo-table-expand label {
|
||||
width: 90px;
|
||||
color: #99a9bf;
|
||||
}
|
||||
/deep/.demo-table-expand .el-form-item {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
/deep/.zhuye-row {
|
||||
background: #add6ff;
|
||||
}
|
||||
|
||||
/deep/.warning-row {
|
||||
// background: #cff4bc;
|
||||
background: #67c23a;
|
||||
}
|
||||
|
||||
/deep/.warning-row-font {
|
||||
background-color: #67c23a;
|
||||
padding: 2px 7px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/deep/.success-row {
|
||||
/* background: #f8ac88; */
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user