1.0.1
This commit is contained in:
zkthink
+9
-1
@@ -3,9 +3,17 @@ import axiosApi from './AxiosApi.js'
|
||||
const apiList = {
|
||||
getPlatformTemplate: `/authority/cmsTemplate/getPlatformTemplate`,
|
||||
updateTemplate: '/authority/cmsTemplate/updateTemplate',
|
||||
getCmsTemplate: '/authority/cmsTemplate/'
|
||||
getCmsTemplate: '/authority/cmsTemplate/',
|
||||
getStorePage: '/authority/store/findStoreListForPlatform'
|
||||
}
|
||||
export default {
|
||||
getStorePage(data) {
|
||||
return axiosApi({
|
||||
method: 'POST',
|
||||
url: apiList.getStorePage,
|
||||
data
|
||||
})
|
||||
},
|
||||
getCmsTemplate(id) {
|
||||
return axiosApi({
|
||||
method: 'GET',
|
||||
|
||||
@@ -38,7 +38,6 @@ axios.interceptors.response.use(
|
||||
|
||||
function handleError(error, reject) {
|
||||
if (error.code === 'ECONNABORTED') {
|
||||
debugger
|
||||
Message({
|
||||
message: '请求超时'
|
||||
})
|
||||
|
||||
+8
-1
@@ -8,10 +8,17 @@ const apiList = {
|
||||
findCategoryList: '/authority/productCategory/findCategoryListByDepth/',
|
||||
saveProduct: '/authority/product/save',
|
||||
findAdminProductList: '/authority/platformProduct/findAdminProductList',
|
||||
findGoods: '/authority/platformProduct/findProductListByCategoryOrProductIdList'
|
||||
findGoods: '/authority/platformProduct/findProductListByCategoryOrProductIdList',
|
||||
queryAllCategory: '/authority/productCategory/queryAllCategory'
|
||||
}
|
||||
|
||||
export default {
|
||||
queryAllCategory() {
|
||||
return axiosApi({
|
||||
method: 'POST',
|
||||
url: apiList.queryAllCategory
|
||||
})
|
||||
},
|
||||
findGoods(data) {
|
||||
return axiosApi({
|
||||
method: 'POST',
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
</form-item>
|
||||
<form-item>
|
||||
<Button type="primary" size="mini" @click="query">查询</Button>
|
||||
<Button plain size="mini" @click="reset">重置</Button>
|
||||
<Button type="success" size="mini" @click="addManagement">新建商家</Button>
|
||||
</form-item>
|
||||
</Form>
|
||||
@@ -53,6 +54,16 @@ export default {
|
||||
},
|
||||
addManagement() {
|
||||
this.$emit('addManagement')
|
||||
},
|
||||
reset() {
|
||||
this.formParams = {
|
||||
name: '',
|
||||
code: '',
|
||||
duty: '',
|
||||
status: {
|
||||
code: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,10 +9,7 @@
|
||||
>
|
||||
<div class="product-page">
|
||||
<div class="toolbar">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formParams"
|
||||
>
|
||||
<el-form :inline="true" :model="formParams">
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="formParams.keyword"
|
||||
@@ -21,47 +18,30 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="上架状态">
|
||||
<el-select
|
||||
v-model="formParams.status"
|
||||
size="mini"
|
||||
>
|
||||
<el-option
|
||||
label="全部"
|
||||
value=""
|
||||
/>
|
||||
<el-option
|
||||
label="上架"
|
||||
:value="1"
|
||||
/>
|
||||
<el-option
|
||||
label="下架"
|
||||
:value="0"
|
||||
/>
|
||||
<el-select v-model="formParams.status" size="mini">
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="上架" :value="1" />
|
||||
<el-option label="下架" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="官方分类">
|
||||
<el-select
|
||||
<el-cascader
|
||||
v-model="formParams.categoryId"
|
||||
class="category-select"
|
||||
size="mini"
|
||||
>
|
||||
<el-option
|
||||
label="全部"
|
||||
value=""
|
||||
/>
|
||||
<el-option
|
||||
v-for="(category, index) in categoryList"
|
||||
:key="index"
|
||||
:label="category.categoryName"
|
||||
:value="category.id"
|
||||
/>
|
||||
</el-select>
|
||||
:options="categoryList"
|
||||
clearable
|
||||
:props="{
|
||||
checkStrictly: true,
|
||||
expandTrigger: 'hover',
|
||||
label: 'categoryName',
|
||||
value: 'id',
|
||||
children: 'childs'
|
||||
}"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="fetch"
|
||||
>
|
||||
<el-button type="primary" size="mini" @click="fetch">
|
||||
查询
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
@@ -99,35 +79,20 @@
|
||||
height="80"
|
||||
width="80"
|
||||
:src="scope.row.productImg"
|
||||
>
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="productName"
|
||||
label="产品名称"
|
||||
/>
|
||||
<el-table-column prop="productName" label="产品名称" />
|
||||
<el-table-column
|
||||
prop="id"
|
||||
width="200"
|
||||
class="text-overflow"
|
||||
label="产品ID"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="price"
|
||||
label="售价"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="applyPrice"
|
||||
label="原价"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="stock"
|
||||
label="库存"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="sellCount"
|
||||
label="销量"
|
||||
/>
|
||||
<el-table-column prop="price" label="售价" />
|
||||
<el-table-column prop="applyPrice" label="原价" />
|
||||
<el-table-column prop="stock" label="库存" />
|
||||
<el-table-column prop="sellCount" label="销量" />
|
||||
</el-table>
|
||||
</div>
|
||||
<pagination
|
||||
@@ -167,19 +132,15 @@ export default {
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
formParams: {
|
||||
"categoryId": '',
|
||||
"hasStock": '',
|
||||
"keyword": "",
|
||||
"pageSize": 10,
|
||||
"pageIndex": 1,
|
||||
"status": ''
|
||||
},
|
||||
dialog: {
|
||||
type: 'add',
|
||||
isVisible: false
|
||||
categoryId: '',
|
||||
hasStock: '',
|
||||
keyword: '',
|
||||
pageSize: 10,
|
||||
pageIndex: 1,
|
||||
status: ''
|
||||
},
|
||||
tableData: [],
|
||||
categoryList: [],
|
||||
@@ -195,15 +156,15 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
isVisible: {
|
||||
get () {
|
||||
get() {
|
||||
return this.dialogVisible
|
||||
},
|
||||
set () {
|
||||
set() {
|
||||
this.close()
|
||||
this.reset()
|
||||
}
|
||||
},
|
||||
title () {
|
||||
title() {
|
||||
return '选择商品'
|
||||
}
|
||||
},
|
||||
@@ -240,7 +201,11 @@ export default {
|
||||
})
|
||||
}
|
||||
},
|
||||
async getProductList () {
|
||||
async getProductList() {
|
||||
const { categoryId } = this.formParams
|
||||
if (typeof categoryId === 'object') {
|
||||
this.formParams.categoryId = categoryId.splice(-1, 1)[0]
|
||||
}
|
||||
const res = await Goods.findAdminProductList(this.formParams)
|
||||
const resData = res.data
|
||||
const { code } = resData
|
||||
@@ -249,21 +214,21 @@ export default {
|
||||
this.formatData()
|
||||
}
|
||||
},
|
||||
async findCategoryList () {
|
||||
const res = await Goods.findCategoryList(3)
|
||||
async queryAllCategory() {
|
||||
const res = await Goods.queryAllCategory()
|
||||
const resData = res.data
|
||||
this.categoryList = resData.data
|
||||
},
|
||||
fetch (config) {
|
||||
fetch(config) {
|
||||
const { limit, page } = config
|
||||
this.formParams.pageIndex = page || 1
|
||||
this.formParams.pageSize = limit || 10
|
||||
this.getProductList()
|
||||
},
|
||||
editClose () {
|
||||
editClose() {
|
||||
this.dialog.isVisible = false
|
||||
},
|
||||
onSubmit () {
|
||||
onSubmit() {
|
||||
if (this.radioState) {
|
||||
this.$emit('success', [this.selectOneGoods])
|
||||
} else {
|
||||
@@ -271,12 +236,12 @@ export default {
|
||||
}
|
||||
this.close()
|
||||
},
|
||||
close () {
|
||||
close() {
|
||||
this.$emit('close')
|
||||
},
|
||||
open() {
|
||||
this.getProductList()
|
||||
this.findCategoryList()
|
||||
this.queryAllCategory()
|
||||
},
|
||||
formatData() {
|
||||
if (this.radioState) {
|
||||
@@ -292,22 +257,24 @@ export default {
|
||||
const excludeIds = this.exclude.map(i => i.id)
|
||||
this.tableData.adminProductVOList.map(item => {
|
||||
if (excludeIds.indexOf(item.id) > 0) {
|
||||
this.$refs.multipleTable && this.$refs.multipleTable.toggleRowSelection(item, true)
|
||||
this.$refs.multipleTable &&
|
||||
this.$refs.multipleTable.toggleRowSelection(item, true)
|
||||
} else {
|
||||
this.$refs.multipleTable && this.$refs.multipleTable.toggleRowSelection(item, false)
|
||||
this.$refs.multipleTable &&
|
||||
this.$refs.multipleTable.toggleRowSelection(item, false)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
reset () {
|
||||
reset() {
|
||||
this.radioId = null
|
||||
this.formParams = {
|
||||
"categoryId": '',
|
||||
"hasStock": '',
|
||||
"keyword": "",
|
||||
"pageSize": 10,
|
||||
"pageIndex": 1,
|
||||
"status": ''
|
||||
categoryId: '',
|
||||
hasStock: '',
|
||||
keyword: '',
|
||||
pageSize: 10,
|
||||
pageIndex: 1,
|
||||
status: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -315,7 +282,7 @@ export default {
|
||||
</script>
|
||||
<style lang="less">
|
||||
.add-dialog-component {
|
||||
.form-inline{
|
||||
.form-inline {
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
}
|
||||
@@ -328,7 +295,7 @@ export default {
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.goods-dialog{
|
||||
.goods-dialog {
|
||||
/deep/ .el-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -9,26 +9,28 @@
|
||||
>
|
||||
<div class="add-dialog-component">
|
||||
<el-form ref="form" class="form-inline" label-width="80px">
|
||||
<el-form-item label="一级分类">
|
||||
<el-select v-model="value" placeholder="请选择" @change="change(value, 1)">
|
||||
<el-option
|
||||
v-for="item in categorys"
|
||||
:key="item.id"
|
||||
:label="item.categoryName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级分类">
|
||||
<el-select v-model="value1" placeholder="请选择" @change="change(value1, 2)">
|
||||
<el-option
|
||||
v-for="item in secondaryList"
|
||||
:key="item.id"
|
||||
:label="item.categoryName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<template v-if="deep===1">
|
||||
<el-form-item label="一级分类">
|
||||
<el-select v-model="value" placeholder="请选择" @change="change(value, 1)">
|
||||
<el-option
|
||||
v-for="item in categorys"
|
||||
:key="item.id"
|
||||
:label="item.categoryName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级分类">
|
||||
<el-select v-model="value1" placeholder="请选择" @change="change(value1, 2)">
|
||||
<el-option
|
||||
v-for="item in secondaryList"
|
||||
:key="item.id"
|
||||
:label="item.categoryName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-form-item label="三级分类">
|
||||
<el-select v-model="value2" placeholder="请选择" @change="change(value2, 3)">
|
||||
<el-option
|
||||
@@ -49,6 +51,7 @@
|
||||
</template>
|
||||
<script>
|
||||
import Classification from '@/api/Classification.js'
|
||||
import Goods from '@/api/Goods.js'
|
||||
export default {
|
||||
props: {
|
||||
exclude: {
|
||||
@@ -57,6 +60,12 @@ export default {
|
||||
return []
|
||||
}
|
||||
},
|
||||
deep: {
|
||||
type: Number,
|
||||
default() {
|
||||
return 1
|
||||
}
|
||||
},
|
||||
dialogVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
@@ -137,7 +146,9 @@ export default {
|
||||
}
|
||||
})
|
||||
}
|
||||
this.queryChildCategory(id, deep)
|
||||
if (deep !== 3) {
|
||||
this.queryChildCategory(id, deep)
|
||||
}
|
||||
},
|
||||
async queryChildCategory (id, deep) {
|
||||
const res = await Classification.queryChildCategory({
|
||||
@@ -159,6 +170,11 @@ export default {
|
||||
})
|
||||
}
|
||||
},
|
||||
async findCategoryList() {
|
||||
const res = await Goods.findCategoryList(this.deep)
|
||||
const categoryList = res.data.data || []
|
||||
this.level3List = categoryList
|
||||
},
|
||||
onSubmit () {
|
||||
this.$emit('success', this.currentObj)
|
||||
this.close()
|
||||
@@ -168,7 +184,11 @@ export default {
|
||||
this.reset()
|
||||
},
|
||||
open() {
|
||||
this.getProductCategory()
|
||||
if (this.deep === 1) {
|
||||
this.getProductCategory()
|
||||
} else {
|
||||
this.findCategoryList()
|
||||
}
|
||||
},
|
||||
reset () {
|
||||
this.value = ''
|
||||
|
||||
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:title="title"
|
||||
top="25px"
|
||||
:visible.sync="isVisible"
|
||||
class="goods-dialog"
|
||||
@opened="open"
|
||||
>
|
||||
<div class="product-page">
|
||||
<div class="toolbar">
|
||||
<el-form
|
||||
:inline="true"
|
||||
:model="formParams"
|
||||
>
|
||||
<el-form-item>
|
||||
<el-input
|
||||
v-model="formParams.storeName"
|
||||
size="mini"
|
||||
placeholder="店铺名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
@click="fetch"
|
||||
>
|
||||
查询
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="product-content">
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="tableData.records"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column width="55" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-radio
|
||||
v-model="radioId"
|
||||
:label="scope.row.id"
|
||||
size="medium"
|
||||
class="textRadio"
|
||||
@change.native="getCurrentRow(scope.row)"
|
||||
> </el-radio>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="storeName"
|
||||
label="店铺名称"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="mobile"
|
||||
label="手机号"
|
||||
/>
|
||||
</el-table>
|
||||
</div>
|
||||
<pagination
|
||||
v-show="tableData.total > 0"
|
||||
:limit.sync="formParams.size"
|
||||
:page.sync="formParams.current"
|
||||
:total="Number(tableData.total)"
|
||||
@pagination="fetch"
|
||||
/>
|
||||
</div>
|
||||
<div slot="footer" class="add-btn-wrap">
|
||||
<el-button @click="close">取 消</el-button>
|
||||
<el-button type="primary" @click="onSubmit">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import Applet from '@/api/Applet'
|
||||
import Pagination from '@/components/Pagination'
|
||||
export default {
|
||||
components: {
|
||||
Pagination
|
||||
},
|
||||
props: {
|
||||
exclude: {
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
dialogVisible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tableData: {},
|
||||
formParams: {
|
||||
"current": 1,
|
||||
"map": {},
|
||||
"model": {
|
||||
"id": 0,
|
||||
"isAutoSendRefundAddress": 0,
|
||||
"logo": "",
|
||||
"mobile": "",
|
||||
"refundAddress": "",
|
||||
"refundContact": "",
|
||||
"refundTel": "",
|
||||
"remark": "",
|
||||
"shipAddress": "",
|
||||
"storeName": ""
|
||||
},
|
||||
"order": "descending",
|
||||
"size": 10,
|
||||
"sort": "id"
|
||||
},
|
||||
radioId: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isVisible: {
|
||||
get () {
|
||||
return this.dialogVisible
|
||||
},
|
||||
set () {
|
||||
this.close()
|
||||
this.reset()
|
||||
}
|
||||
},
|
||||
title () {
|
||||
return '选择商品'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCurrentRow(row) {
|
||||
this.radioId = row.id
|
||||
this.selectOneShop = {
|
||||
id: row.id,
|
||||
storeName: row.storeName
|
||||
}
|
||||
},
|
||||
async getStorePage () {
|
||||
const res = await Applet.getStorePage(this.formParams)
|
||||
const resData = res.data
|
||||
const { code } = resData
|
||||
if (code === 0) {
|
||||
this.tableData = resData.data
|
||||
}
|
||||
},
|
||||
fetch (config) {
|
||||
const { limit, page } = config
|
||||
this.formParams.current = page || 1
|
||||
this.formParams.size = limit || 10
|
||||
this.getStorePage()
|
||||
},
|
||||
editClose () {
|
||||
this.dialog.isVisible = false
|
||||
},
|
||||
onSubmit () {
|
||||
this.$emit('success', [this.selectOneShop])
|
||||
this.close()
|
||||
},
|
||||
close () {
|
||||
this.$emit('close')
|
||||
},
|
||||
open() {
|
||||
this.getStorePage()
|
||||
},
|
||||
reset () {
|
||||
this.radioId = null
|
||||
this.formParams = {
|
||||
"current": 1,
|
||||
"map": {},
|
||||
"model": {
|
||||
"id": 0,
|
||||
"isAutoSendRefundAddress": 0,
|
||||
"logo": "",
|
||||
"mobile": "",
|
||||
"refundAddress": "",
|
||||
"refundContact": "",
|
||||
"refundTel": "",
|
||||
"remark": "",
|
||||
"shipAddress": "",
|
||||
"storeName": ""
|
||||
},
|
||||
"order": "descending",
|
||||
"size": 10,
|
||||
"sort": "id"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.add-dialog-component {
|
||||
.form-inline{
|
||||
display: inline-block;
|
||||
margin: auto;
|
||||
}
|
||||
.tree-box {
|
||||
.el-tree-node__content {
|
||||
margin-bottom: 15px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.goods-dialog{
|
||||
/deep/ .el-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 90vh;
|
||||
min-width: 1000px;
|
||||
overflow: hidden;
|
||||
.el-dialog__body {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
.dialog-from {
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
.btn-wrap {
|
||||
margin: 45px auto 0;
|
||||
text-align: right;
|
||||
}
|
||||
.form-item-row {
|
||||
padding-top: 40px;
|
||||
/deep/ .el-input {
|
||||
width: 100px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.product-page {
|
||||
padding: 15px 20px;
|
||||
.toolbar {
|
||||
margin-bottom: 25px;
|
||||
.product-name {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -20,7 +20,8 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.app-main {
|
||||
/* 50= navbar 50 */
|
||||
min-height: calc(100vh - 50px);
|
||||
// min-height: calc(100vh - 50px);
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div :class="classObj" class="app-wrapper">
|
||||
<div v-if="device==="mobile" && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
|
||||
<sidebar class="sidebar-container" />
|
||||
<div :class="{hasTagsView:needTagsView}" class="main-container">
|
||||
<div class="main-container">
|
||||
<div>
|
||||
<navbar />
|
||||
</div>
|
||||
|
||||
@@ -10,28 +10,28 @@ import wode2 from '@/assets/footer/wode2.png'
|
||||
const footerComponentInit = {
|
||||
list: [
|
||||
{
|
||||
pagePath: 'pages/index/index',
|
||||
href: 'pages/index/index',
|
||||
iconPath: shouye1,
|
||||
selectedIconPath: shouye2,
|
||||
text: '首页',
|
||||
collapseState: true
|
||||
},
|
||||
{
|
||||
pagePath: 'pages/category/index',
|
||||
href: 'pages/category/index',
|
||||
iconPath: fenlei1,
|
||||
selectedIconPath: fenlei2,
|
||||
text: '分类',
|
||||
collapseState: false
|
||||
},
|
||||
{
|
||||
pagePath: 'pages/cart/cart',
|
||||
href: 'pages/cart/cart',
|
||||
iconPath: gouwuche1,
|
||||
selectedIconPath: gouwuche2,
|
||||
text: '购物车',
|
||||
collapseState: false
|
||||
},
|
||||
{
|
||||
pagePath: 'pages/userCenter/index',
|
||||
href: 'pages/userCenter/index',
|
||||
iconPath: wode1,
|
||||
selectedIconPath: wode2,
|
||||
text: '我的',
|
||||
@@ -39,6 +39,44 @@ const footerComponentInit = {
|
||||
}
|
||||
]
|
||||
}
|
||||
const initPublic = [
|
||||
{
|
||||
label: '首页',
|
||||
value: 'pages/index/index',
|
||||
isCustom: false
|
||||
},
|
||||
{
|
||||
label: '商品详情',
|
||||
value: 'pages/product/details/index?id={detailId}',
|
||||
isCustom: false
|
||||
},
|
||||
{
|
||||
label: '分类页面',
|
||||
value: 'pages/category/index',
|
||||
isCustom: false
|
||||
},
|
||||
{
|
||||
label: '分类商品列表',
|
||||
value: 'pages/product/list/index?category3Id={category3Id}',
|
||||
isCustom: false
|
||||
},
|
||||
{
|
||||
label: '店铺页面',
|
||||
value: 'pages/shop/index?id={shopId}',
|
||||
isCustom: false
|
||||
},
|
||||
{
|
||||
label: '购物车',
|
||||
value: 'pages/cart/cart',
|
||||
isCustom: false
|
||||
},
|
||||
{
|
||||
label: '我的',
|
||||
value: 'pages/userCenter/index',
|
||||
isCustom: false
|
||||
}
|
||||
]
|
||||
console.log(initPublic)
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
@@ -56,7 +94,7 @@ export default {
|
||||
})
|
||||
},
|
||||
initTemplatePage(state, templatePage) {
|
||||
state.templatePage = templatePage
|
||||
state.templatePage = initPublic.concat(templatePage)
|
||||
},
|
||||
initComponents(state, components) {
|
||||
state.currentComponentKeyCode = 'AddComponent'
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
#app {
|
||||
|
||||
.main-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
transition: margin-left .28s;
|
||||
margin-left: $sideBarWidth;
|
||||
|
||||
@@ -2,18 +2,27 @@
|
||||
<div class="add-component">
|
||||
<div class="config-header">基础组件</div>
|
||||
<div class="parts-list">
|
||||
<div v-for="(item, index) in basicComponents" :key="index" class="parts-item" @click="selectItem(item)">
|
||||
<div
|
||||
v-for="(item, index) in basicComponents"
|
||||
:key="index"
|
||||
class="parts-item"
|
||||
@click="selectItem(item)"
|
||||
>
|
||||
<div class="parts-icon">
|
||||
<i :class="item.icon" />
|
||||
<i :class="item.icon"></i>
|
||||
</div>
|
||||
<div class="parts-name">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-header">商品组件</div>
|
||||
<div class="parts-list">
|
||||
<div v-for="(item, index) in commodityComponents" :key="index" class="parts-item" @click="selectItem(item)">
|
||||
<div
|
||||
v-for="(item, index) in commodityComponents" :key="index"
|
||||
class="parts-item"
|
||||
@click="selectItem(item)"
|
||||
>
|
||||
<div class="parts-icon">
|
||||
<i :class="item.icon" />
|
||||
<i :class="item.icon"></i>
|
||||
</div>
|
||||
<div class="parts-name">{{ item.name }}</div>
|
||||
</div>
|
||||
@@ -42,26 +51,32 @@ export default {
|
||||
content: {
|
||||
fillStyle: 1,
|
||||
number: 3,
|
||||
list: [{
|
||||
href: '',
|
||||
src: '',
|
||||
collapseState: false
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
src: '',
|
||||
collapseState: false
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
src: '',
|
||||
collapseState: false
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
src: '',
|
||||
collapseState: true
|
||||
}]
|
||||
list: [
|
||||
{
|
||||
href: '',
|
||||
src: '',
|
||||
isCustom: '',
|
||||
collapseState: false
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
src: '',
|
||||
isCustom: '',
|
||||
collapseState: false
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
src: '',
|
||||
isCustom: '',
|
||||
collapseState: false
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
src: '',
|
||||
isCustom: '',
|
||||
collapseState: true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -71,11 +86,14 @@ export default {
|
||||
content: {
|
||||
fillStyle: 1,
|
||||
interval: 5000,
|
||||
list: [{
|
||||
href: '',
|
||||
src: '',
|
||||
collapseState: false
|
||||
}]
|
||||
list: [
|
||||
{
|
||||
href: '',
|
||||
src: '',
|
||||
isCustom: '',
|
||||
collapseState: false
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -144,30 +162,36 @@ export default {
|
||||
keyCode: 'GraphicNavigation',
|
||||
content: {
|
||||
number: 3,
|
||||
list: [{
|
||||
href: '',
|
||||
src: '',
|
||||
name: '',
|
||||
collapseState: false
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
src: '',
|
||||
name: '',
|
||||
collapseState: false
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
src: '',
|
||||
name: '',
|
||||
collapseState: false
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
src: '',
|
||||
name: '',
|
||||
collapseState: true
|
||||
}]
|
||||
list: [
|
||||
{
|
||||
href: '',
|
||||
src: '',
|
||||
isCustom: '',
|
||||
name: '',
|
||||
collapseState: false
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
src: '',
|
||||
isCustom: '',
|
||||
name: '',
|
||||
collapseState: false
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
src: '',
|
||||
isCustom: '',
|
||||
name: '',
|
||||
collapseState: false
|
||||
},
|
||||
{
|
||||
href: '',
|
||||
src: '',
|
||||
isCustom: '',
|
||||
name: '',
|
||||
collapseState: true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
@@ -183,11 +207,13 @@ export default {
|
||||
originalPrice: true,
|
||||
sellingPrice: true,
|
||||
paymentNumber: true,
|
||||
list: [{
|
||||
name: '',
|
||||
categoryList: [],
|
||||
goodsList: []
|
||||
}]
|
||||
list: [
|
||||
{
|
||||
name: '',
|
||||
categoryList: [],
|
||||
goodsList: []
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -204,34 +230,34 @@ export default {
|
||||
|
||||
<style lang="less" scoped>
|
||||
.add-component {
|
||||
.parts-title {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.parts-title {
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.parts-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.parts-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.parts-item {
|
||||
width: calc(100% / 3);
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
.parts-icon {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
i{
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.parts-item {
|
||||
width: calc(100% / 3);
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
.parts-icon {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
i {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.parts-name {
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.parts-name {
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,8 +7,18 @@
|
||||
</div>
|
||||
<div class="config-setting">
|
||||
<div class="config-setting">
|
||||
<el-select v-model="currentSub.fillStyle" placeholder="请选择" class="full-input" @change="change('fillStyle', $event)">
|
||||
<el-option v-for="item in fillStyleLit" :key="item.value" :label="item.label" :value="item.value" />
|
||||
<el-select
|
||||
v-model="currentSub.fillStyle"
|
||||
placeholder="请选择"
|
||||
class="full-input"
|
||||
@change="change('fillStyle', $event)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in fillStyleLit"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
@@ -18,8 +28,18 @@
|
||||
轮播间隔
|
||||
</div>
|
||||
<div class="config-setting">
|
||||
<el-select v-model="currentSub.interval" placeholder="请选择" class="full-input" @change="change('interval', $event)">
|
||||
<el-option v-for="item in intervalList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
<el-select
|
||||
v-model="currentSub.interval"
|
||||
placeholder="请选择"
|
||||
class="full-input"
|
||||
@change="change('interval', $event)"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in intervalList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
@@ -33,41 +53,40 @@
|
||||
class="collapse-item"
|
||||
>
|
||||
<div class="collapse-item-header" @click="collapseToggle(item)">
|
||||
<i class="header-icon el-icon-rank" />
|
||||
<i class="header-icon el-icon-rank"></i>
|
||||
<div class="header-thumbnail">
|
||||
<img v-if="item.src" :src="item.src">
|
||||
<div v-else class="el-icon-picture-outline" />
|
||||
<img v-if="item.src" :src="item.src" />
|
||||
<div v-else class="el-icon-picture-outline"></div>
|
||||
</div>
|
||||
<div class="header-name">图片</div>
|
||||
<div class="header-arrow">
|
||||
<i class="el-icon-delete" @click="delectItem(currentSub.list, index)" />
|
||||
<i
|
||||
class="el-icon-delete"
|
||||
@click="delectItem(currentSub.list, index)"
|
||||
></i>
|
||||
</div>
|
||||
<div class="header-arrow">
|
||||
<i class="el-icon-arrow-down" :class="item.collapseState?'open':''" />
|
||||
<i
|
||||
class="el-icon-arrow-down"
|
||||
:class="item.collapseState ? 'open' : ''"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.collapseState" class="collapse-item-content">
|
||||
<div class="config-title">选择图片</div>
|
||||
<ImageUpload :key="index+'-'+1" :item="[item]" :src="item.src" @success="success" />
|
||||
<div class="config-title">跳转至</div>
|
||||
<el-select
|
||||
v-model="item.href"
|
||||
placeholder="请选择"
|
||||
class="full-input"
|
||||
>
|
||||
<el-option
|
||||
v-for="link in templatePage"
|
||||
:key="link.value"
|
||||
:label="link.label"
|
||||
:value="link.value"
|
||||
/>
|
||||
</el-select>
|
||||
<ImageUpload
|
||||
:key="index + '-' + 1"
|
||||
:item="[item]"
|
||||
:src="item.src"
|
||||
@success="success"
|
||||
/>
|
||||
<Jump :item="item" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="add-widget" href="javascript:;" @click="addCarousel">
|
||||
<i class="el-icon-plus" />
|
||||
<i class="el-icon-plus"></i>
|
||||
添加图片
|
||||
</a>
|
||||
</div>
|
||||
@@ -77,9 +96,11 @@
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
import ImageUpload from '@/components/ImageUpload'
|
||||
import Jump from '../components/Jump'
|
||||
export default {
|
||||
components: {
|
||||
ImageUpload
|
||||
ImageUpload,
|
||||
Jump
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -106,14 +127,11 @@ export default {
|
||||
value: 7000,
|
||||
label: '7秒'
|
||||
}
|
||||
],
|
||||
carouselList: [],
|
||||
value: ''
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('creationCamp', [
|
||||
'diyComponents',
|
||||
'templatePage',
|
||||
'currentComponentKeyCode',
|
||||
'currentComponentConfig'
|
||||
@@ -167,32 +185,31 @@ export default {
|
||||
|
||||
<style lang="less" scoped>
|
||||
.carousel-config {
|
||||
.carousel-images {
|
||||
.carousel-item {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
.img-box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.carousel-content {
|
||||
margin-left: 10px;
|
||||
.carousel-title {
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.add-carousel {
|
||||
text-align: center;
|
||||
color: #5d99d3;
|
||||
}
|
||||
.carousel-images {
|
||||
.carousel-item {
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
.img-box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.carousel-content {
|
||||
margin-left: 10px;
|
||||
.carousel-title {
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.add-carousel {
|
||||
text-align: center;
|
||||
color: #5d99d3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
+46
-24
@@ -29,7 +29,10 @@
|
||||
<div class="collapse-item-header">
|
||||
<div class="title">商品来源</div>
|
||||
<div class="right">
|
||||
<i class="el-icon-delete" @click="delectItem(currentSub.list, index)" />
|
||||
<i
|
||||
class="el-icon-delete"
|
||||
@click="delectItem(currentSub.list, index)"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse-item-content">
|
||||
@@ -39,30 +42,52 @@
|
||||
placeholder="请选择"
|
||||
class="full-input"
|
||||
/>
|
||||
<div v-for="(category,index1) in item.categoryList" :key="index1" class="class-item">
|
||||
<div
|
||||
v-for="(category, index1) in item.categoryList"
|
||||
:key="index1"
|
||||
class="class-item"
|
||||
>
|
||||
<div class="left">
|
||||
类别
|
||||
</div>
|
||||
<div class="content text-overflow">{{ category.categoryName }}</div>
|
||||
<div class="content text-overflow">
|
||||
{{ category.categoryName }}
|
||||
</div>
|
||||
<div class="right">
|
||||
<i class="el-icon-delete" @click="delectItem(item.categoryList, index1)" />
|
||||
<i
|
||||
class="el-icon-delete"
|
||||
@click="delectItem(item.categoryList, index1)"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(category,index2) in item&&item.goodsList" :key="index+'-'+index2" class="class-item">
|
||||
<div
|
||||
v-for="(category, index2) in item && item.goodsList"
|
||||
:key="index + '-' + index2"
|
||||
class="class-item"
|
||||
>
|
||||
<div class="left">
|
||||
商品
|
||||
</div>
|
||||
<div class="content text-overflow">{{ category.productName }}</div>
|
||||
<div class="content text-overflow">
|
||||
{{ category.productName }}
|
||||
</div>
|
||||
<div class="right">
|
||||
<i class="el-icon-delete" @click="delectItem(item.goodsList, index2)" />
|
||||
<i
|
||||
class="el-icon-delete"
|
||||
@click="delectItem(item.goodsList, index2)"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<a class="add-shop" href="javascript:;" @click="addGoodsClass(index)">
|
||||
<i class="el-icon-plus" />
|
||||
<a
|
||||
class="add-shop"
|
||||
href="javascript:;"
|
||||
@click="addGoodsClass(index)"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
添加类别
|
||||
</a>
|
||||
<a class="add-shop" href="javascript:;" @click="addGoods(index)">
|
||||
<i class="el-icon-plus" />
|
||||
<i class="el-icon-plus"></i>
|
||||
添加商品
|
||||
</a>
|
||||
</div>
|
||||
@@ -71,7 +96,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<a class="add-widget" href="javascript:;" @click="addCarousel">
|
||||
<i class="el-icon-plus" />
|
||||
<i class="el-icon-plus"></i>
|
||||
添加标签
|
||||
</a>
|
||||
<goods-class
|
||||
@@ -141,8 +166,6 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
...mapState('creationCamp', [
|
||||
'diyComponents',
|
||||
'templatePage',
|
||||
'currentComponentKeyCode',
|
||||
'currentComponentConfig'
|
||||
]),
|
||||
@@ -190,7 +213,6 @@ export default {
|
||||
id: goods.id
|
||||
})
|
||||
})
|
||||
console.log(exclude)
|
||||
this.exclude2 = exclude
|
||||
},
|
||||
delectItem(list, index) {
|
||||
@@ -199,14 +221,14 @@ export default {
|
||||
success1(obj) {
|
||||
this.currentSub.list[this.addClassIndex].categoryList.push(obj)
|
||||
},
|
||||
close1 () {
|
||||
close1() {
|
||||
this.dialog1.isVisible = false
|
||||
},
|
||||
success2(obj) {
|
||||
console.log(obj)
|
||||
this.currentSub.list[this.addGoodsIndex].goodsList = obj
|
||||
},
|
||||
close2 () {
|
||||
close2() {
|
||||
this.dialog2.isVisible = false
|
||||
},
|
||||
addCarousel() {
|
||||
@@ -232,25 +254,25 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
.title{
|
||||
.title {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.add-shop{
|
||||
.add-shop {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
color: #409EFF;
|
||||
color: #409eff;
|
||||
border: 1px dashed #ccc;
|
||||
text-align: center;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.full-input{
|
||||
.full-input {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.class-item{
|
||||
.class-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
@@ -258,10 +280,10 @@ export default {
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #eee;
|
||||
font-size: 12px;
|
||||
.left{
|
||||
color: #409EFF;
|
||||
.left {
|
||||
color: #409eff;
|
||||
}
|
||||
.content{
|
||||
.content {
|
||||
flex: 1;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
@@ -65,30 +65,41 @@
|
||||
<div class="config-item">
|
||||
<div class="config-setting">
|
||||
<div class="collapse-list">
|
||||
<div
|
||||
v-if="currentSub.categoryList.length"
|
||||
class="collapse-item"
|
||||
>
|
||||
<div v-if="currentSub.categoryList.length" class="collapse-item">
|
||||
<div class="collapse-item-header">
|
||||
<div class="title">商品来源</div>
|
||||
<div class="right">
|
||||
<i class="el-icon-delete" @click="delectItem(currentSub.categoryList, 0)" />
|
||||
<i
|
||||
class="el-icon-delete"
|
||||
@click="delectItem(currentSub.categoryList, 0)"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse-item-content">
|
||||
<div v-for="(category,index2) in currentSub.categoryList" :key="index2" class="class-item">
|
||||
<div
|
||||
v-for="(category, index2) in currentSub.categoryList"
|
||||
:key="index2"
|
||||
class="class-item"
|
||||
>
|
||||
<div class="left">
|
||||
类别
|
||||
</div>
|
||||
<div class="content text-overflow">{{ category.categoryName }}</div>
|
||||
<div class="content text-overflow">
|
||||
{{ category.categoryName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a v-if="!currentSub.categoryList.length" class="add-widget" href="javascript:;" @click="addGategory">
|
||||
<i class="el-icon-plus" />
|
||||
<a
|
||||
v-if="!currentSub.categoryList.length"
|
||||
class="add-widget"
|
||||
href="javascript:;"
|
||||
@click="addGategory"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
添加类别
|
||||
</a>
|
||||
<goods-class
|
||||
@@ -133,8 +144,6 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
...mapState('creationCamp', [
|
||||
'diyComponents',
|
||||
'templatePage',
|
||||
'currentComponentKeyCode',
|
||||
'currentComponentConfig'
|
||||
]),
|
||||
@@ -161,7 +170,7 @@ export default {
|
||||
success1(obj) {
|
||||
this.currentSub.categoryList = [obj]
|
||||
},
|
||||
close1 () {
|
||||
close1() {
|
||||
this.dialog1.isVisible = false
|
||||
},
|
||||
delectItem(list, index) {
|
||||
@@ -176,12 +185,12 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
.title{
|
||||
.title {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.class-item{
|
||||
.class-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
@@ -189,10 +198,10 @@ export default {
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #eee;
|
||||
font-size: 12px;
|
||||
.left{
|
||||
color: #409EFF;
|
||||
.left {
|
||||
color: #409eff;
|
||||
}
|
||||
.content{
|
||||
.content {
|
||||
flex: 1;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
@@ -31,14 +31,15 @@ export default {
|
||||
placeholder: '请输入内容',
|
||||
modules: {
|
||||
toolbar: [
|
||||
[{ 'size': ['small', false, 'large'] }],
|
||||
[{ size: ['small', false, 'large'] }],
|
||||
['bold', 'italic'],
|
||||
[{ 'header': 1 }, { 'header': 2 }],
|
||||
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
|
||||
[{ header: 1 }, { header: 2 }],
|
||||
[{ list: 'ordered' }, { list: 'bullet' }],
|
||||
['link'],
|
||||
[{ 'color': [] }, { 'background': [] }],
|
||||
[{ 'align': [] }]
|
||||
], history: {
|
||||
[{ color: [] }, { background: [] }],
|
||||
[{ align: [] }]
|
||||
],
|
||||
history: {
|
||||
delay: 1000,
|
||||
maxStack: 50,
|
||||
userOnly: false
|
||||
@@ -48,7 +49,10 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('creationCamp', ['diyComponents', 'currentComponentKeyCode', 'currentComponentConfig']),
|
||||
...mapState('creationCamp', [
|
||||
'currentComponentKeyCode',
|
||||
'currentComponentConfig'
|
||||
]),
|
||||
currentSub() {
|
||||
return this.currentComponentConfig
|
||||
}
|
||||
@@ -79,11 +83,11 @@ export default {
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.editor-config {
|
||||
/deep/ .ql-editor{
|
||||
height:400px;
|
||||
}
|
||||
.editor-tips{
|
||||
text-align: right;
|
||||
}
|
||||
/deep/ .ql-editor {
|
||||
height: 400px;
|
||||
}
|
||||
.editor-tips {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,20 +10,23 @@
|
||||
class="collapse-item"
|
||||
>
|
||||
<div class="collapse-item-header" @click="collapseToggle(item)">
|
||||
<i class="header-icon el-icon-rank" />
|
||||
<i class="header-icon el-icon-rank"></i>
|
||||
<div class="header-thumbnail">
|
||||
<img v-if="item.src" :src="item.src">
|
||||
<div v-else class="el-icon-picture-outline" />
|
||||
<img v-if="item.src" :src="item.src" />
|
||||
<div v-else class="el-icon-picture-outline"></div>
|
||||
</div>
|
||||
<div class="header-name">图片</div>
|
||||
<div class="header-arrow">
|
||||
<i class="el-icon-delete" @click="delectItem(currentSub.list, index)" />
|
||||
<i
|
||||
class="el-icon-delete"
|
||||
@click="delectItem(currentSub.list, index)"
|
||||
></i>
|
||||
</div>
|
||||
<div class="header-arrow">
|
||||
<i
|
||||
class="el-icon-arrow-down"
|
||||
:class="item.collapseState ? 'open' : ''"
|
||||
/>
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.collapseState" class="collapse-item-content">
|
||||
@@ -35,29 +38,27 @@
|
||||
class="full-input"
|
||||
/>
|
||||
<div class="config-title">默认图标</div>
|
||||
<ImageUpload :key="index+'-'+1" :item="[item]" :src="item.iconPath" @success="handleImageSuccess1" />
|
||||
<ImageUpload
|
||||
:key="index + '-' + 1"
|
||||
:item="[item]"
|
||||
:src="item.iconPath"
|
||||
@success="handleImageSuccess1"
|
||||
/>
|
||||
<div class="config-title">选中图标</div>
|
||||
<ImageUpload :key="index+'-'+2" :item="[item]" :src="item.selectedIconPath" @success="handleImageSuccess2" />
|
||||
<div class="config-title">跳转至</div>
|
||||
<Select
|
||||
v-model="item.pagePath"
|
||||
placeholder="请选择"
|
||||
class="full-input"
|
||||
>
|
||||
<Option
|
||||
v-for="link in navList"
|
||||
:key="link.value"
|
||||
:label="link.label"
|
||||
:value="link.value"
|
||||
/>
|
||||
</Select>
|
||||
<ImageUpload
|
||||
:key="index + '-' + 2"
|
||||
:item="[item]"
|
||||
:src="item.selectedIconPath"
|
||||
@success="handleImageSuccess2"
|
||||
/>
|
||||
<Jump :item="item" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="add-widget" href="javascript:;" @click="addImage">
|
||||
<i class="el-icon-plus" />
|
||||
<i class="el-icon-plus"></i>
|
||||
添加图片
|
||||
</a>
|
||||
</div>
|
||||
@@ -65,40 +66,15 @@
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
import { Select, Option } from 'element-ui'
|
||||
import ImageUpload from '@/components/ImageUpload'
|
||||
import Jump from '../components/Jump'
|
||||
export default {
|
||||
components: {
|
||||
Select,
|
||||
Option,
|
||||
ImageUpload
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
navList: [
|
||||
{
|
||||
value: 'pages/index/index',
|
||||
label: '首页'
|
||||
},
|
||||
{
|
||||
value: 'pages/category/index',
|
||||
label: '分类'
|
||||
},
|
||||
{
|
||||
value: 'pages/cart/cart',
|
||||
label: '购物车'
|
||||
},
|
||||
{
|
||||
value: 'pages/userCenter/index',
|
||||
label: '我的'
|
||||
}
|
||||
],
|
||||
uploadIndex: null
|
||||
}
|
||||
ImageUpload,
|
||||
Jump
|
||||
},
|
||||
computed: {
|
||||
...mapState('creationCamp', [
|
||||
'diyComponents',
|
||||
'templatePage',
|
||||
'currentComponentKeyCode',
|
||||
'currentComponentConfig'
|
||||
@@ -118,7 +94,6 @@ export default {
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapMutations('creationCamp', ['setComponentConfig']),
|
||||
collapseToggle(item) {
|
||||
@@ -144,7 +119,7 @@ export default {
|
||||
return item
|
||||
})
|
||||
this.currentSub.list.push({
|
||||
pagePath: '',
|
||||
href: '',
|
||||
iconPath: '',
|
||||
selectedIconPath: '',
|
||||
text: '',
|
||||
@@ -159,7 +134,7 @@ export default {
|
||||
.image-config {
|
||||
.collapse-list {
|
||||
margin-bottom: 10px;
|
||||
.full-input{
|
||||
.full-input {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.collapse-item {
|
||||
|
||||
+30
-29
@@ -30,22 +30,33 @@
|
||||
class="collapse-item"
|
||||
>
|
||||
<div class="collapse-item-header" @click="collapseToggle(item)">
|
||||
<i class="header-icon el-icon-rank" />
|
||||
<i class="header-icon el-icon-rank"></i>
|
||||
<div class="header-thumbnail">
|
||||
<img v-if="item.src" :src="item.src">
|
||||
<div v-else class="el-icon-picture-outline" />
|
||||
<img v-if="item.src" :src="item.src" />
|
||||
<div v-else class="el-icon-picture-outline"></div>
|
||||
</div>
|
||||
<div class="header-name">图片</div>
|
||||
<div class="header-arrow">
|
||||
<i class="el-icon-delete" @click="delectItem(currentSub.list, index)" />
|
||||
<i
|
||||
class="el-icon-delete"
|
||||
@click="delectItem(currentSub.list, index)"
|
||||
></i>
|
||||
</div>
|
||||
<div class="header-arrow">
|
||||
<i class="el-icon-arrow-down" :class="item.collapseState?'open':''" />
|
||||
<i
|
||||
class="el-icon-arrow-down"
|
||||
:class="item.collapseState ? 'open' : ''"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.collapseState" class="collapse-item-content">
|
||||
<div class="config-title">选择图片</div>
|
||||
<ImageUpload :key="index+'-'+1" :item="[item]" :src="item.src" @success="success" />
|
||||
<ImageUpload
|
||||
:key="index + '-' + 1"
|
||||
:item="[item]"
|
||||
:src="item.src"
|
||||
@success="success"
|
||||
/>
|
||||
<div class="confit-item">
|
||||
<div class="config-title">
|
||||
名称
|
||||
@@ -54,26 +65,14 @@
|
||||
<Input v-model="item.name" class="full-input" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-title">跳转至</div>
|
||||
<Select
|
||||
v-model="item.href"
|
||||
placeholder="请选择"
|
||||
class="full-input"
|
||||
>
|
||||
<Option
|
||||
v-for="link in templatePage"
|
||||
:key="link.value"
|
||||
:label="link.label"
|
||||
:value="link.value"
|
||||
/>
|
||||
</Select>
|
||||
<Jump :item="item" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="add-widget" href="javascript:;" @click="addCarousel">
|
||||
<i class="el-icon-plus" />
|
||||
<i class="el-icon-plus"></i>
|
||||
添加图片
|
||||
</a>
|
||||
</div>
|
||||
@@ -83,12 +82,14 @@
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
import { Select, Option, Input } from 'element-ui'
|
||||
import ImageUpload from '@/components/ImageUpload'
|
||||
import Jump from '../components/Jump'
|
||||
export default {
|
||||
components: {
|
||||
Select,
|
||||
Option,
|
||||
ImageUpload,
|
||||
Input
|
||||
Input,
|
||||
Jump
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -163,7 +164,7 @@ export default {
|
||||
|
||||
<style lang="less" scoped>
|
||||
.carousel-config {
|
||||
.collapse-list{
|
||||
.collapse-list {
|
||||
margin-bottom: 10px;
|
||||
.collapse-item {
|
||||
margin-top: 10px;
|
||||
@@ -199,9 +200,9 @@ export default {
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
i{
|
||||
transition: all .3s;
|
||||
&.open{
|
||||
i {
|
||||
transition: all 0.3s;
|
||||
&.open {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
@@ -211,14 +212,14 @@ export default {
|
||||
padding: 20px 10px;
|
||||
.upload-widget {
|
||||
margin-bottom: 10px;
|
||||
.upload-uploader{
|
||||
.upload-uploader {
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
/deep/ .el-upload{
|
||||
/deep/ .el-upload {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.upload-images{
|
||||
.upload-images {
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
}
|
||||
@@ -253,7 +254,7 @@ export default {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
font-size: 14px;
|
||||
background-color: #2E60F8;
|
||||
background-color: #2e60f8;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
display: block;
|
||||
|
||||
@@ -55,37 +55,62 @@
|
||||
class="collapse-item"
|
||||
>
|
||||
<div class="collapse-item-header" @click="collapseToggle(item)">
|
||||
<i class="header-icon el-icon-rank" />
|
||||
<i class="header-icon el-icon-rank"></i>
|
||||
<div class="header-thumbnail">
|
||||
<img v-if="item.src" :src="item.src">
|
||||
<div v-else class="el-icon-picture-outline" />
|
||||
<img v-if="item.src" :src="item.src" />
|
||||
<div v-else class="el-icon-picture-outline"></div>
|
||||
</div>
|
||||
<div class="header-name">图片</div>
|
||||
<div class="header-arrow">
|
||||
<i class="el-icon-delete" @click="delectItem(currentSub.list, index)" />
|
||||
<i
|
||||
class="el-icon-delete"
|
||||
@click="delectItem(currentSub.list, index)"
|
||||
></i>
|
||||
</div>
|
||||
<div class="header-arrow">
|
||||
<i class="el-icon-arrow-down" :class="item.collapseState?'open':''" />
|
||||
<i
|
||||
class="el-icon-arrow-down"
|
||||
:class="item.collapseState ? 'open' : ''"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.collapseState" class="collapse-item-content">
|
||||
<div class="config-title">选择图片</div>
|
||||
<ImageUpload :key="index+'-'+1" :item="[item]" :src="item.src" @success="success" />
|
||||
<ImageUpload
|
||||
:key="index + '-' + 1"
|
||||
:item="[item]"
|
||||
:src="item.src"
|
||||
@success="success"
|
||||
/>
|
||||
<div class="collapse-item-header">
|
||||
<div class="title">商品来源</div>
|
||||
</div>
|
||||
<div class="collapse-item-content">
|
||||
<div v-for="(category,index1) in item.categoryList" :key="index1" class="class-item">
|
||||
<div
|
||||
v-for="(category, index1) in item.categoryList"
|
||||
:key="index1"
|
||||
class="class-item"
|
||||
>
|
||||
<div class="left">
|
||||
类别
|
||||
</div>
|
||||
<div class="content text-overflow">{{ category.categoryName }}</div>
|
||||
<div class="content text-overflow">
|
||||
{{ category.categoryName }}
|
||||
</div>
|
||||
<div class="right">
|
||||
<i class="el-icon-delete" @click="delectItem(item.categoryList, index1)" />
|
||||
<i
|
||||
class="el-icon-delete"
|
||||
@click="delectItem(item.categoryList, index1)"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<a v-if="!item.categoryList.length" class="add-shop" href="javascript:;" @click="addGoodsClass(index)">
|
||||
<i class="el-icon-plus" />
|
||||
<a
|
||||
v-if="!item.categoryList.length"
|
||||
class="add-shop"
|
||||
href="javascript:;"
|
||||
@click="addGoodsClass(index)"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
添加类别
|
||||
</a>
|
||||
</div>
|
||||
@@ -95,7 +120,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<a class="add-widget" href="javascript:;" @click="addGategory">
|
||||
<i class="el-icon-plus" />
|
||||
<i class="el-icon-plus"></i>
|
||||
添加类别
|
||||
</a>
|
||||
<goods-class
|
||||
@@ -144,8 +169,6 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
...mapState('creationCamp', [
|
||||
'diyComponents',
|
||||
'templatePage',
|
||||
'currentComponentKeyCode',
|
||||
'currentComponentConfig'
|
||||
]),
|
||||
@@ -199,7 +222,7 @@ export default {
|
||||
success1(obj) {
|
||||
this.currentSub.list[this.addClassIndex].categoryList.push(obj)
|
||||
},
|
||||
close1 () {
|
||||
close1() {
|
||||
this.dialog1.isVisible = false
|
||||
},
|
||||
delectItem(list, index) {
|
||||
@@ -214,25 +237,25 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
.title{
|
||||
.title {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.add-shop{
|
||||
.add-shop {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
color: #409EFF;
|
||||
color: #409eff;
|
||||
border: 1px dashed #ccc;
|
||||
text-align: center;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.full-input{
|
||||
.full-input {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.class-item{
|
||||
.class-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
@@ -240,10 +263,10 @@ export default {
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #eee;
|
||||
font-size: 12px;
|
||||
.left{
|
||||
color: #409EFF;
|
||||
.left {
|
||||
color: #409eff;
|
||||
}
|
||||
.content{
|
||||
.content {
|
||||
flex: 1;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
@@ -26,8 +26,18 @@
|
||||
</div>
|
||||
<div class="config-setting">
|
||||
<div class="config-setting">
|
||||
<Select v-model="currentSub.fillStyle" placeholder="请选择" class="full-input" @change="change('fillStyle', $event)">
|
||||
<Option v-for="item in fillStyleLit" :key="item.value" :label="item.label" :value="item.value" />
|
||||
<Select
|
||||
v-model="currentSub.fillStyle"
|
||||
placeholder="请选择"
|
||||
class="full-input"
|
||||
@change="change('fillStyle', $event)"
|
||||
>
|
||||
<Option
|
||||
v-for="item in fillStyleLit"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
@@ -42,42 +52,42 @@
|
||||
class="collapse-item"
|
||||
>
|
||||
<div class="collapse-item-header" @click="collapseToggle(item)">
|
||||
<i class="header-icon el-icon-rank" />
|
||||
<i class="header-icon el-icon-rank"></i>
|
||||
<div class="header-thumbnail">
|
||||
<img v-if="item.src" :src="item.src">
|
||||
<div v-else class="el-icon-picture-outline" />
|
||||
<img v-if="item.src" :src="item.src" />
|
||||
<div v-else class="el-icon-picture-outline"></div>
|
||||
</div>
|
||||
<div class="header-name">图片</div>
|
||||
<div class="header-arrow">
|
||||
<i class="el-icon-delete" @click="delectItem(currentSub.list, index)" />
|
||||
<i
|
||||
class="el-icon-delete"
|
||||
@click="delectItem(currentSub.list, index)"
|
||||
></i>
|
||||
</div>
|
||||
<div class="header-arrow">
|
||||
<i class="el-icon-arrow-down" :class="item.collapseState?'open':''" />
|
||||
<i
|
||||
class="el-icon-arrow-down"
|
||||
:class="item.collapseState ? 'open' : ''"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.collapseState" class="collapse-item-content">
|
||||
<div class="config-title">选择图片</div>
|
||||
<ImageUpload :key="index+'-'+1" :item="[item]" :src="item.src" @success="success" />
|
||||
<div class="config-title">跳转至</div>
|
||||
<Select
|
||||
v-model="item.href"
|
||||
placeholder="请选择"
|
||||
class="full-input"
|
||||
>
|
||||
<Option
|
||||
v-for="link in templatePage"
|
||||
:key="link.value"
|
||||
:label="link.label"
|
||||
:value="link.value"
|
||||
/>
|
||||
</Select>
|
||||
<ImageUpload
|
||||
:key="index + '-' + 1"
|
||||
:item="[item]"
|
||||
:src="item.src"
|
||||
@success="success"
|
||||
/>
|
||||
<Jump :item="item" />
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="add-widget" href="javascript:;" @click="addImage">
|
||||
<i class="el-icon-plus" />
|
||||
<i class="el-icon-plus"></i>
|
||||
添加图片
|
||||
</a>
|
||||
</div>
|
||||
@@ -86,12 +96,12 @@
|
||||
<script>
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
import { Select, Option } from 'element-ui'
|
||||
import ImageUpload from '@/components/ImageUpload'
|
||||
import Jump from '../components/Jump'
|
||||
export default {
|
||||
components: {
|
||||
Select,
|
||||
Option,
|
||||
ImageUpload
|
||||
Jump
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -123,7 +133,6 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
...mapState('creationCamp', [
|
||||
'diyComponents',
|
||||
'templatePage',
|
||||
'currentComponentKeyCode',
|
||||
'currentComponentConfig'
|
||||
@@ -176,7 +185,7 @@ export default {
|
||||
|
||||
<style lang="less" scoped>
|
||||
.image-config {
|
||||
.collapse-list{
|
||||
.collapse-list {
|
||||
margin-bottom: 10px;
|
||||
.collapse-item {
|
||||
margin-top: 10px;
|
||||
@@ -213,9 +222,9 @@ export default {
|
||||
width: 32px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
i{
|
||||
transition: all .3s;
|
||||
&.open{
|
||||
i {
|
||||
transition: all 0.3s;
|
||||
&.open {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
@@ -225,14 +234,14 @@ export default {
|
||||
padding: 20px 10px;
|
||||
.upload-widget {
|
||||
margin-bottom: 10px;
|
||||
.upload-uploader{
|
||||
.upload-uploader {
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
/deep/ .el-upload{
|
||||
/deep/ .el-upload {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.upload-images{
|
||||
.upload-images {
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
}
|
||||
@@ -267,7 +276,7 @@ export default {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
font-size: 14px;
|
||||
background-color: #2E60F8;
|
||||
background-color: #2e60f8;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
display: block;
|
||||
|
||||
@@ -19,7 +19,10 @@ export default {
|
||||
Input
|
||||
},
|
||||
computed: {
|
||||
...mapState('creationCamp', ['diyComponents', 'currentComponentKeyCode', 'currentComponentConfig']),
|
||||
...mapState('creationCamp', [
|
||||
'currentComponentKeyCode',
|
||||
'currentComponentConfig'
|
||||
]),
|
||||
placeholder() {
|
||||
return this.currentComponentConfig.placeholder
|
||||
}
|
||||
@@ -37,7 +40,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.search-config {
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,48 +3,75 @@
|
||||
<div class="config-header">设置</div>
|
||||
<widgetFormitem>
|
||||
卖点
|
||||
<el-switch slot="right" v-model="currentSub.sellingPoint" @change="change('sellingPoint', $event)" />
|
||||
<el-switch
|
||||
slot="right"
|
||||
v-model="currentSub.sellingPoint"
|
||||
@change="change('sellingPoint', $event)"
|
||||
/>
|
||||
</widgetFormitem>
|
||||
<widgetFormitem>
|
||||
原价
|
||||
<el-switch slot="right" v-model="currentSub.originalPrice" @change="change('originalPrice', $event)" />
|
||||
<el-switch
|
||||
slot="right"
|
||||
v-model="currentSub.originalPrice"
|
||||
@change="change('originalPrice', $event)"
|
||||
/>
|
||||
</widgetFormitem>
|
||||
<widgetFormitem>
|
||||
售价
|
||||
<el-switch slot="right" v-model="currentSub.sellingPrice" @change="change('sellingPrice', $event)" />
|
||||
<el-switch
|
||||
slot="right"
|
||||
v-model="currentSub.sellingPrice"
|
||||
@change="change('sellingPrice', $event)"
|
||||
/>
|
||||
</widgetFormitem>
|
||||
<widgetFormitem>
|
||||
按钮
|
||||
<el-switch slot="right" v-model="currentSub.button" @change="change('button', $event)" />
|
||||
<el-switch
|
||||
slot="right"
|
||||
v-model="currentSub.button"
|
||||
@change="change('button', $event)"
|
||||
/>
|
||||
</widgetFormitem>
|
||||
<div class="config-header">内容</div>
|
||||
<div class="config-item">
|
||||
<div class="config-setting">
|
||||
<div class="collapse-list">
|
||||
<div
|
||||
v-if="currentSub.goodsList.length"
|
||||
class="collapse-item"
|
||||
>
|
||||
<div v-if="currentSub.goodsList.length" class="collapse-item">
|
||||
<div class="collapse-item-header">
|
||||
<div class="title">商品来源</div>
|
||||
<div class="right">
|
||||
<i class="el-icon-delete" @click="delectItem(currentSub.goodsList, 0)" />
|
||||
<i
|
||||
class="el-icon-delete"
|
||||
@click="delectItem(currentSub.goodsList, 0)"
|
||||
></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="collapse-item-content">
|
||||
<div v-for="(category,index2) in currentSub.goodsList" :key="index2" class="class-item">
|
||||
<div
|
||||
v-for="(category, index2) in currentSub.goodsList"
|
||||
:key="index2"
|
||||
class="class-item"
|
||||
>
|
||||
<div class="left">
|
||||
商品
|
||||
</div>
|
||||
<div class="content text-overflow">{{ category.productName }}</div>
|
||||
<div class="content text-overflow">
|
||||
{{ category.productName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a v-if="!currentSub.goodsList.length" class="add-widget" href="javascript:;" @click="addGoods">
|
||||
<i class="el-icon-plus" />
|
||||
<a
|
||||
v-if="!currentSub.goodsList.length"
|
||||
class="add-widget"
|
||||
href="javascript:;"
|
||||
@click="addGoods"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
添加商品
|
||||
</a>
|
||||
<goods-dialog
|
||||
@@ -66,18 +93,20 @@ export default {
|
||||
widgetFormitem,
|
||||
GoodsDialog
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
value1: true,
|
||||
dialog2: {
|
||||
type: 'add',
|
||||
isVisible: false
|
||||
},
|
||||
exclude2: []
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('creationCamp', ['diyComponents', 'currentComponentKeyCode', 'currentComponentConfig']),
|
||||
...mapState('creationCamp', [
|
||||
'currentComponentKeyCode',
|
||||
'currentComponentConfig'
|
||||
]),
|
||||
currentSub() {
|
||||
return this.currentComponentConfig
|
||||
}
|
||||
@@ -98,7 +127,7 @@ export default {
|
||||
success2(obj) {
|
||||
this.currentSub.goodsList = obj
|
||||
},
|
||||
close2 () {
|
||||
close2() {
|
||||
this.dialog2.isVisible = false
|
||||
},
|
||||
delectItem(list, index) {
|
||||
@@ -113,14 +142,14 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
.title{
|
||||
.title {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.single-from-item {
|
||||
margin-bottom: 10px;
|
||||
.single-from-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.class-item{
|
||||
.class-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
@@ -128,10 +157,10 @@ export default {
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #eee;
|
||||
font-size: 12px;
|
||||
.left{
|
||||
color: #409EFF;
|
||||
.left {
|
||||
color: #409eff;
|
||||
}
|
||||
.content{
|
||||
.content {
|
||||
flex: 1;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
@@ -34,7 +34,7 @@ export default {
|
||||
Input
|
||||
},
|
||||
computed: {
|
||||
...mapState('creationCamp', ['diyComponents', 'currentComponentKeyCode', 'currentComponentConfig']),
|
||||
...mapState('creationCamp', ['currentComponentKeyCode', 'currentComponentConfig']),
|
||||
currentSub() {
|
||||
return this.currentComponentConfig
|
||||
}
|
||||
|
||||
@@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<div class="jump-component">
|
||||
<div class="config-title">跳转至</div>
|
||||
<el-select
|
||||
v-model="item.href"
|
||||
placeholder="请选择"
|
||||
class="full-input"
|
||||
@change="selectHref(item)"
|
||||
>
|
||||
<el-option
|
||||
v-for="link in templatePage"
|
||||
:key="link.value"
|
||||
:label="link.label"
|
||||
:value="link.value"
|
||||
/>
|
||||
</el-select>
|
||||
<div v-if="item.detailId && item.detailId.length">
|
||||
<div
|
||||
v-for="(category, index1) in item.detailId"
|
||||
:key="index1"
|
||||
class="class-item"
|
||||
>
|
||||
<div class="left">
|
||||
商品
|
||||
</div>
|
||||
<div class="content text-overflow">{{ category.productName }}</div>
|
||||
<div class="right">
|
||||
<i class="el-icon-delete" @click="delectGoods(item)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
v-if="item.hasOwnProperty('detailId') && !item.detailId"
|
||||
class="add-shop"
|
||||
href="javascript:;"
|
||||
@click="addGoods()"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
添加商品
|
||||
</a>
|
||||
<div v-if="item.category3Id && item.category3Id.length">
|
||||
<div
|
||||
v-for="(category, index2) in item.category3Id"
|
||||
:key="index2"
|
||||
class="class-item"
|
||||
>
|
||||
<div class="left">
|
||||
类别
|
||||
</div>
|
||||
<div class="content text-overflow">{{ category.categoryName }}</div>
|
||||
<div class="right">
|
||||
<i class="el-icon-delete" @click="delectCategory(item)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
v-if="item.hasOwnProperty('category3Id') && !item.category3Id"
|
||||
class="add-shop"
|
||||
href="javascript:;"
|
||||
@click="addGoodsClass()"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
添加类别
|
||||
</a>
|
||||
<div v-if="item.shopId && item.shopId.length">
|
||||
<div
|
||||
v-for="(shop, index3) in item.shopId"
|
||||
:key="index3"
|
||||
class="class-item"
|
||||
>
|
||||
<div class="left">
|
||||
店铺
|
||||
</div>
|
||||
<div class="content text-overflow">{{ shop.storeName }}</div>
|
||||
<div class="right">
|
||||
<i class="el-icon-delete" @click="delectShop(item)"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
v-if="item.hasOwnProperty('shopId') && !item.shopId"
|
||||
class="add-shop"
|
||||
href="javascript:;"
|
||||
@click="addShop()"
|
||||
>
|
||||
<i class="el-icon-plus"></i>
|
||||
添加店铺
|
||||
</a>
|
||||
<goods-class
|
||||
ref="edit"
|
||||
:dialog-visible="dialog1.isVisible"
|
||||
:type="dialog1.type"
|
||||
:deep="3"
|
||||
@close="close1"
|
||||
@success="success1"
|
||||
/>
|
||||
<goods-dialog
|
||||
ref="edit"
|
||||
:dialog-visible="dialog2.isVisible"
|
||||
:type="dialog2.type"
|
||||
:radio-state="true"
|
||||
@close="close2"
|
||||
@success="success2"
|
||||
/>
|
||||
<shop-dialog
|
||||
ref="edit"
|
||||
:dialog-visible="dialog3.isVisible"
|
||||
:type="dialog3.type"
|
||||
:radio-state="true"
|
||||
@close="close3"
|
||||
@success="success3"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import GoodsClass from '@/components/applet/GoodsClass'
|
||||
import GoodsDialog from '@/components/applet/Goods'
|
||||
import ShopDialog from '@/components/applet/Shops'
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
components: {
|
||||
GoodsClass,
|
||||
GoodsDialog,
|
||||
ShopDialog
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialog1: {
|
||||
type: 'add',
|
||||
isVisible: false
|
||||
},
|
||||
dialog2: {
|
||||
type: 'add',
|
||||
isVisible: false
|
||||
},
|
||||
dialog3: {
|
||||
type: 'add',
|
||||
isVisible: false
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('creationCamp', ['templatePage']),
|
||||
currentSub() {
|
||||
return this.currentComponentConfig
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addGoodsClass() {
|
||||
this.dialog1.isVisible = true
|
||||
},
|
||||
addGoods() {
|
||||
this.dialog2.isVisible = true
|
||||
},
|
||||
addShop() {
|
||||
this.dialog3.isVisible = true
|
||||
},
|
||||
success1(obj) {
|
||||
this.item.category3Id = [obj]
|
||||
},
|
||||
close1() {
|
||||
this.dialog1.isVisible = false
|
||||
},
|
||||
success2(obj) {
|
||||
this.item.detailId = obj
|
||||
},
|
||||
close2() {
|
||||
this.dialog2.isVisible = false
|
||||
},
|
||||
success3(obj) {
|
||||
this.item.shopId = obj
|
||||
},
|
||||
close3() {
|
||||
this.dialog3.isVisible = false
|
||||
},
|
||||
selectHref(item) {
|
||||
const { href } = item
|
||||
var re = /{(.*?)}/g
|
||||
const execArray = re.exec(href)
|
||||
delete item.detailId
|
||||
delete item.category3Id
|
||||
delete item.shopId
|
||||
if (execArray) {
|
||||
this.$set(item, execArray[1], '')
|
||||
}
|
||||
if (href.indexOf('/') > -1) {
|
||||
item.isCustom = false
|
||||
} else {
|
||||
item.isCustom = true
|
||||
}
|
||||
},
|
||||
delectGoods(item) {
|
||||
item.detailId = ''
|
||||
},
|
||||
delectCategory(item) {
|
||||
item.category3Id = ''
|
||||
},
|
||||
delectShop(item) {
|
||||
item.shopId = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.jump-component {
|
||||
.class-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
padding: 0 12px;
|
||||
margin-top: 10px;
|
||||
border: 1px solid #eee;
|
||||
font-size: 12px;
|
||||
.left {
|
||||
color: #409eff;
|
||||
}
|
||||
.content {
|
||||
flex: 1;
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
.add-shop {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
color: #409eff;
|
||||
border: 1px dashed #ccc;
|
||||
text-align: center;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+12
-12
@@ -1,24 +1,24 @@
|
||||
<template>
|
||||
<el-row class="widget-formitem">
|
||||
<el-col class="content-wrapper" :span="18">
|
||||
<slot />
|
||||
<slot></slot>
|
||||
</el-col>
|
||||
<el-col class="control-wrapper" :span="6">
|
||||
<slot name="right" />
|
||||
<slot name="right"></slot>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<style lang="less" scoped>
|
||||
.widget-formitem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
margin-bottom: 10px;
|
||||
.content-wrapper {
|
||||
text-align: left;
|
||||
}
|
||||
.control-wrapper {
|
||||
text-align: right;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
margin-bottom: 10px;
|
||||
.content-wrapper {
|
||||
text-align: left;
|
||||
}
|
||||
.control-wrapper {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div class="title">商城好物</div>
|
||||
</div>
|
||||
<div class="single-item-content">
|
||||
<img :src="goods.imgs||defaultImg">
|
||||
<img :src="goods.imgs[0]||defaultImg" />
|
||||
</div>
|
||||
<div class="single-item-footer">
|
||||
<div v-if="configContent.sellingPoint" class="shop-name">{{ goods.productName || '商品A' }}</div>
|
||||
@@ -64,6 +64,7 @@ export default {
|
||||
const resData = res.data.data || {}
|
||||
const goods = resData.goodsList || []
|
||||
this.goods = goods[0] || {}
|
||||
console.log(this.goods, '23')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
height="100%"
|
||||
:src="configContent.link"
|
||||
controls
|
||||
/>
|
||||
<img :src="defaultVideo">
|
||||
></video>
|
||||
<img v-else :src="defaultVideo" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -50,7 +50,7 @@ export default {
|
||||
font-weight: bold;
|
||||
color: rgba(51, 51, 51, 1);
|
||||
&::before {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="operation-area-component">
|
||||
<div class="phone-component">
|
||||
<div class="phone-body" />
|
||||
<div class="phone-body"></div>
|
||||
<div class="phone-main">
|
||||
<component
|
||||
:is="item.keyCode"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="applet-container">
|
||||
<div class="toolbar">
|
||||
<el-button
|
||||
type="primary"
|
||||
@@ -81,10 +81,11 @@ export default {
|
||||
const res = await Custom.cmsTemplatePage(this.customParams)
|
||||
const templatePage = res.data.data.records || []
|
||||
const templates = templatePage.map(item => {
|
||||
const { name, config } = item
|
||||
const { name, id } = item
|
||||
return {
|
||||
value: config,
|
||||
label: name
|
||||
value: id,
|
||||
label: name,
|
||||
isCustom: true
|
||||
}
|
||||
})
|
||||
this.initTemplatePage(templates)
|
||||
@@ -97,7 +98,21 @@ export default {
|
||||
content: this.footerComponent
|
||||
}
|
||||
const diyComponents = this.diyComponents.concat(footerComponent)
|
||||
let temp = false
|
||||
const diyComponentsString = JSON.stringify(diyComponents)
|
||||
if (diyComponents.length) {
|
||||
diyComponents.forEach((item) => {
|
||||
const t = item.content
|
||||
if ((t.list && !t.list.length) || (t.goodsList && !t.goodsList.length) || (t.categoryList && !t.categoryList.length)) {
|
||||
temp = true
|
||||
return this.$message({
|
||||
message: `${item.name}组件内容不能为空`,
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
if (temp) return
|
||||
const res = await Applet.updateTemplate({
|
||||
config: diyComponentsString,
|
||||
sCustom: false,
|
||||
@@ -117,11 +132,11 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
.applet-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: calc(100vh - 50px);
|
||||
.toolbar {
|
||||
padding: 12px;
|
||||
text-align: right;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:title="dialogData.title"
|
||||
:visible="dialogData.isVisible"
|
||||
:visible.sync="dialogData.isVisible"
|
||||
width="45%"
|
||||
>
|
||||
<ul>
|
||||
|
||||
@@ -47,6 +47,13 @@
|
||||
>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button
|
||||
plain
|
||||
size="mini"
|
||||
@click="reset"
|
||||
>
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
@@ -171,6 +178,18 @@ export default {
|
||||
query() {
|
||||
this.getCashList()
|
||||
},
|
||||
reset() {
|
||||
this.formParams = {
|
||||
model: {
|
||||
storeName: '',
|
||||
tenant: '',
|
||||
applyTimeString: '',
|
||||
auditStatus: ''
|
||||
},
|
||||
size: 10,
|
||||
current: 1
|
||||
}
|
||||
},
|
||||
look(d) {
|
||||
this.$refs.dialog.getDetail(d.id)
|
||||
this.dialogData = {
|
||||
|
||||
Reference in New Issue
Block a user