mirror of
https://gitee.com/was666/as-editor.git
synced 2026-07-04 00:00:02 +08:00
整体代码优化
This commit is contained in:
王奥斯
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user