Skip to content

E
ElectricitySheep
Commit 85220de3 authored by 罗超's avatar 罗超
Browse files
Options

1

parent 22c116d8
Hide whitespace changes
Inline Side-by-side
Showing with 3637 additions and 1523 deletions
src/components/CommodityMan/distributionGoodsList.vue
View file @ 85220de3
......@@ -718,13 +718,11 @@ export default {
},
//分销商品
distributionGoods(CategoryList, ids) {
console.log(1151, CategoryList, ids);
let msg = {
CategoryList: CategoryList,
GoodsIds: ids,
};
this.apipost("/api/product/SynchroGoods", msg, (res) => {
console.log(1158, res);
if (res.data.resultCode == 1) {
this.Success("操作成功");
this.msg.pageIndex = 1;
......
src/components/CommodityMan/goodsList.vue
View file @ 85220de3
......@@ -360,8 +360,8 @@
<el-table-column prop="RetailStore" width="100" label="分销商品">
<template slot-scope="scope">
<el-checkbox
v-if="scope.row.RetailStore == 1"
:value="scope.row.RetailStore == 1"
v-if="scope.row.SourceGoodsId > 0"
:value="scope.row.SourceGoodsId > 0"
disabled
></el-checkbox>
</template>
......
src/components/common/choicePosts.vue 0 → 100644
View file @ 85220de3
<template>
<div>
<el-input
size="mini"
v-model="msg.ActivityTitle"
placeholder="根据名称搜索"
:clearable="true"
@clear="(msg.pageIndex = 1), getList()"
@keyup.enter.native="(msg.pageIndex = 1), getList()"
>
<el-button slot="append" @click="(msg.pageIndex = 1), getList()"
>搜索</el-button
>
</el-input>
<el-table
ref="multipleTable"
:data="dataList"
tooltip-effect="dark"
height="450"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<template v-if="isSingle">
<el-table-column width="50px" label="">
<template slot-scope="scope">
<el-radio
v-model="scope.row.IsChecked"
@change.native="getTemplateRow(scope.$index, scope.row)"
>&nbsp;
</el-radio>
</template>
</el-table-column>
</template>
<template v-else>
<el-table-column type="selection" width="50px"> </el-table-column>
</template>
<el-table-column label="ID" width="80px">
<template slot-scope="scope">{{ scope.row.Id }}</template>
</el-table-column>
<el-table-column prop="CategoryList" label="用户信息">
<template slot-scope="scope">
<div style="display: flex; align-items: center">
<img
style="width: 50px; height: 50px; margin-right: 10px"
:src="scope.row.Photo"
/>
{{ scope.row.UserName }}
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="名称">
<template slot-scope="scope">
<div flex="cross:center dir:left">
<img
style="width: 50px; height: 50px; margin-right: 10px"
:src="getIconLink(scope.row.ImageList[0])"
/>
<div>{{ scope.row.ActivityTitle }}</div>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination
style="text-align: center"
background
@current-change="handleCurrentChange"
:page-size="msg.pageSize"
layout="prev, pager, next"
:total="total"
>
</el-pagination>
</div>
</template>
<script>
export default {
props: ["ckGoods", "isSingle", "IsGetSpec"],
data() {
return {
dataList: [],
msg: {
ActivityTitle: "",
ForumId: 0,
pageIndex: 1,
pageSize: 20,
},
total: 0,
selectRow: [],
};
},
created() {
if (this.IsGetSpec) {
this.msg.IsGetSpec = this.IsGetSpec;
}
},
methods: {
//获取贴子
getList() {
this.apipost("/api/Miai/GetActivityDianZanPageList", this.msg, (res) => {
if (res.data.resultCode == 1) {
this.total = res.data.data.count;
var tempArray = res.data.data.pageData;
if (tempArray && tempArray.length > 0) {
tempArray.forEach((item) => {
item.IsChecked = false;
});
}
this.dataList = JSON.parse(JSON.stringify(tempArray));
} else {
this.Info(res.data.message);
}
});
},
handleSelectionChange(val) {
this.selectRow = JSON.parse(JSON.stringify(val));
},
getTemplateRow(index, row) {
this.selectRow = [];
if (this.dataList && this.dataList.length > 0) {
this.dataList.forEach((item) => {
if (item.Id != row.Id) {
item.IsChecked = false;
}
});
}
this.selectRow.push(JSON.parse(JSON.stringify(row)));
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
//父组件调用方法
getChoicedGoods() {
return this.selectRow;
},
//清空多选方法
toggleSelection(rows) {
if (rows) {
rows.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
},
mounted() {
this.getList();
},
};
</script>
src/components/common/choiceSystemFenlei.vue 0 → 100644
View file @ 85220de3
<template>
<div>
<el-table
ref="multipleTable"
:data="dataList"
tooltip-effect="dark"
height="450"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="ID">
<template slot-scope="scope">{{ scope.row.id }}</template>
</el-table-column>
<el-table-column prop="name" label="名称">
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
</el-table>
<el-pagination
style="text-align: center"
background
@current-change="handleCurrentChange"
:page-size="msg.pageSize"
layout="prev, pager, next"
:total="total"
>
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
dataList: [],
msg: {
pageIndex: 1,
pageSize: 20,
Name: "",
IsShow: 0,
},
selectRow: [],
total: 0,
};
},
created() {},
methods: {
//获取所有菜单
getList() {
this.apipost("/api/Miai/GetForumPageList", this.msg, (res) => {
if (res.data.resultCode == 1) {
this.total = res.data.data.count;
var dataArray = res.data.data.pageData;
console.log(42, dataArray);
this.dataList = [];
if (dataArray && dataArray.length > 0) {
dataArray.forEach((x) => {
this.dataList.push({
id: x.Id,
name: x.Name,
menuName: x.Name,
goodsNum: 3,
staticGoods: false,
goodsList: [],
});
if (x.ChildList && x.ChildList.length > 0) {
x.ChildList.forEach((y) => {
this.dataList.push({
id: y.Id,
name: y.Name,
menuName: y.Name,
goodsNum: 3,
staticGoods: false,
goodsList: [],
});
if (y.ChildList && y.ChildList.length > 0) {
y.ChildList.forEach((z) => {
this.dataList.push({
id: z.Id,
name: z.Name,
menuName: z.Name,
goodsNum: 3,
staticGoods: false,
goodsList: [],
});
});
}
});
}
});
}
} else {
this.Info(res.data.message);
}
});
},
handleSelectionChange(val) {
this.selectRow = JSON.parse(JSON.stringify(val));
},
//父组件调用方法
getChoicedFenlei() {
return this.selectRow;
},
//清空多选方法
toggleSelection(rows) {
if (rows) {
rows.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
},
mounted() {
this.getList();
},
};
</script>
src/components/sallCenter/plugin/posts.vue 0 → 100644
View file @ 85220de3
<style>
/*-----------------设置部分--------------*/
.diy-goods .diy-component-edit .diy-goods-label {
width: 85px;
}
.diy-goods .diy-component-edit .cat-item {
border: 1px solid #e2e2e2;
margin-bottom: 5px;
padding: 15px;
max-width: 400px;
}
.diy-goods .diy-component-edit .goods-list {
flex-wrap: wrap;
}
.diy-goods .diy-component-edit .goods-item,
.diy-goods .diy-component-edit .goods-add {
width: 50px;
height: 50px;
position: relative;
margin-right: 15px;
margin-bottom: 15px;
}
.diy-goods .diy-component-edit .goods-add .el-button {
width: 100%;
height: 100%;
border-radius: 0;
padding: 0;
}
.diy-goods .diy-component-edit .goods-pic {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.diy-goods .diy-component-edit .goods-delete {
position: absolute;
left: calc(100% - 10px);
top: -10px;
width: 20px;
height: 20px;
line-height: 20px;
padding: 0 0;
visibility: hidden;
z-index: 1;
}
.diy-goods .diy-component-edit .goods-item:hover .goods-delete {
visibility: visible;
}
.diy-goods .diy-component-edit .cat-item-options {
position: relative;
}
.diy-goods .diy-component-edit .cat-item-options .el-button {
height: 25px;
line-height: 25px;
width: 25px;
padding: 0;
text-align: center;
border: none;
border-radius: 0;
position: absolute;
margin-left: 0;
top: -16px;
right: -40px;
}
/*-----------------预览部分--------------*/
.diy-goods .diy-component-preview .cat-list {
}
.diy-goods .diy-component-preview .cat-list-top {
}
.diy-goods .diy-component-preview .cat-list-left {
width: 160px;
}
.diy-goods .diy-component-preview .cat-item {
height: 104px;
padding: 0 10px;
text-align: center;
max-width: 100%;
white-space: nowrap;
}
.diy-goods .diy-component-preview .cat-list-left .cat-name {
overflow: hidden;
text-overflow: ellipsis;
}
.diy-goods .diy-component-preview .cat-item.active {
color: #ff4544;
}
.diy-goods .diy-component-preview .cat-list-top .cat-item {
margin: 0 20px;
}
.diy-goods .diy-component-preview .cat-list-top {
overflow-x: auto;
}
.diy-goods .diy-component-preview .cat-list-top.cat-style-1 .cat-item {
border-bottom: 4px solid transparent;
}
.diy-goods .diy-component-preview .cat-list-top.cat-style-2 .cat-name {
background: #ff4544;
color: #fff;
border-radius: 100px;
padding: 0 18px;
}
.diy-goods .diy-component-preview .cat-list-top .cat-item.active {
border-bottom-color: #ff4544;
}
.diy-goods .diy-component-preview .cat-list-left .cat-item {
border-left: 2px solid transparent;
}
.diy-goods .diy-component-preview .cat-list-left .cat-item.active {
border-left-color: #ff4544;
}
.diy-goods .diy-component-preview .goods-list {
padding: 11px;
}
.diy-goods .diy-component-preview .goods-item {
padding: 11px;
}
.diy-goods .diy-component-preview .goods-pic {
background-size: cover;
background-position: center;
width: 99.8%;
height: 700px;
background-color: #f6f6f6;
background-repeat: no-repeat;
position: relative;
border-radius: 10px 10px 0 0;
}
.diy-goods .diy-component-preview .goods-pic-3-2 {
height: 471px;
}
.diy-goods .diy-component-preview .goods-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 10px;
}
.diy-goods .diy-component-preview .goods-name-static {
height: 94px;
}
.diy-goods .diy-component-preview .goods-name-staticList {
white-space: normal !important;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
min-height: 76px;
}
.diy-goods .diy-component-preview .goods-name-StaticName {
margin-top: 40px;
height: 32px;
}
.diy-goods .diy-component-preview .goods-price {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #ff4544;
line-height: 48px;
}
.diy-goods .diy-component-preview .goods-list-style--1 .goods-item,
.diy-goods .diy-component-preview .goods-list-style-1 .goods-item,
.diy-goods .diy-component-preview .goods-list-style-4 .goods-item {
width: 100%;
}
.diy-goods .diy-component-preview .goods-list-style-2 .goods-item {
width: 50%;
}
.diy-goods .diy-component-preview .goods-list-style-3 .goods-item {
width: 33.333333%;
}
.diy-goods .diy-component-preview .goods-list-style-0 .goods-item {
width: 249px;
}
.diy-goods .diy-component-preview .goods-list-style--1 .goods-pic {
width: 200px;
height: 200px;
border-radius: 10px 0 0 10px;
}
.diy-goods .diy-component-preview .goods-list-style-4 .goods-pic {
width: 250px;
height: 170px;
border-radius: 10px;
}
.diy-goods .diy-component-preview .goods-list-style-2 .goods-pic {
height: 342px;
border-radius: 10px 10px 0 0;
}
.diy-goods .diy-component-preview .goods-list-style-0 .goods-pic,
.diy-goods .diy-component-preview .goods-list-style-3 .goods-pic {
height: 200px;
border-radius: 10px 10px 0 0;
}
.diy-goods .diy-component-preview .goods-pic-fill-0 {
background-size: contain;
}
.diy-goods .diy-component-preview .buy-btn {
border-color: #ff4544;
color: #ff4544;
padding: 0 20px;
height: 48px;
line-height: 50px;
font-size: 24px;
}
.diy-goods .diy-component-preview .buy-btn.el-button--primary {
background-color: #ff4544;
color: #fff;
}
.diy-goods .diy-component-preview .goods-tag {
position: absolute;
top: 0;
left: 0;
width: 64px;
height: 64px;
z-index: 1;
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
}
.diy-goods hr {
border: none;
height: 1px;
background-color: #e2e2e2;
}
.diy-goods .diy-component-preview .goods-item .buy-btn.is-round {
border-radius: 24px;
}
.diy-goods .goods-item.goods-cat-list {
border-top: 1px solid #e2e2e2;
}
.diy-goods .goods-item.goods-cat-list:first-of-type {
border-top: 0;
}
.diy-goods .cat-list {
max-height: 500px;
overflow: auto;
}
.Goodspic-box {
width: 70px;
height: 70px;
border: 1px solid #ccc;
cursor: pointer;
background-color: #fff;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.Goodspic-box i {
font-size: 22px;
color: #909399;
}
.Goodspic-box .size-tip {
line-height: 1.35;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
color: #fff;
background: rgba(0, 0, 0, 0.2);
letter-spacing: -1px;
}
.goodsDialog .el-dialog__body {
padding: 10px 20px;
}
.goods-priceScore {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 48px;
}
.goods-price .el-rate__icon {
font-size: 30px;
}
.diy-goods .gd_Price {
font-size: 12px !important;
}
/* ------------------瀑布流样式------------------------ */
.goods-item-pb {
width: 330px;
height: auto;
background-color: #ffffff;
border-radius: 30px;
}
.goods-pic-pb {
/* background-size: cover;
background-position: center; */
width: 100%;
height: auto;
/* background-color: #f6f6f6;
background-repeat: no-repeat;
position: relative;
border-radius: 10px 10px 0 0; */
}
.creatManInfo {
height: 90px;
border-radius: 0px 0px 30px 30px;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0 20px;
}
.creatManInfo-name {
display: flex;
align-items: center;
font-size: 24px;
font-family: PingFang SC;
font-weight: 500;
color: #111111;
}
</style>
<template>
<div :class="{ active: goodData.isCked }">
<div class="diy-component-options" v-if="goodData.isCked">
<el-button
type="primary"
icon="el-icon-delete"
style="left: -25px; top: 0px"
@click="delPlugin()"
></el-button>
<el-button
type="primary"
icon="el-icon-document-copy"
style="left: -25px; top: 30px"
></el-button>
<el-button
type="primary"
icon="el-icon-arrow-up"
v-if="index > 0"
@click="resetSord(0)"
style="right: -25px; top: 0"
></el-button>
<el-button
type="primary"
icon="el-icon-arrow-down"
v-if="index != dataLeng - 1"
@click="resetSord(1)"
style="right: -25px; top: 30px"
></el-button>
</div>
<div class="diy-goods">
<div class="diy-component-preview" :style="cListStyle">
<div :flex="cMainFlex">
<div
:flex="cCatFlex"
class="cat-list"
v-if="
data.showCat &&
(data.catPosition == 'left' ||
(data.catPosition == 'top' && cCatList.length > 1))
"
:class="
'cat-list-' + data.catPosition + ' cat-style-' + data.catStyle
"
>
<div
class="cat-item"
v-for="(item, index) in cCatList"
:class="index === 0 ? 'active' : ''"
:key="index"
flex="main:center cross:center"
>
<div class="cat-name">{{ item.menuName }}</div>
</div>
</div>
<div class="goods-list" :class="'goods-list-style-' + data.listStyle">
<div v-for="(cat, catIndex) in cCatList" :key="catIndex">
<div
v-if="data.catPosition === 'left'"
style="color: #666666; margin: 24px 11px; font-size: 24px"
>
{{ cat.menuName }}
</div>
<div :style="cGoodsListStyle" flex>
<div
v-if="data.listStyle === 5"
style="
width: 100%;
display: flex;
justify-content: space-between;
"
>
<div style="width: 100%">
<div
v-for="(goods, goodsIndex) in cCatGoodsList(
cat,
catIndex
)"
class="goods-item-pb"
:key="goodsIndex"
:class="
data.catPosition === 'left' ? 'goods-cat-list' : ''
"
v-if="goodsIndex % 2 === 0"
>
<div
style="display: inline-block"
:style="cGoodsItemWidth"
>
<div
:style="cGoodsItemStyle"
:flex="cGoodsItemFlex"
style="position: relative; margin-bottom: 30px"
>
<el-image
class="goods-pic-pb"
:src="goods.picUrl"
fit="cover"
></el-image>
<div class="creatManInfo">
<div class="creatManInfo-name">
<el-image
style="
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
"
:src="goods.Photo"
fit="cover"
></el-image>
{{ goods.CreateBy }}
</div>
<div class="creatManInfo-name">
<el-image
style="
width: 26px;
height: 28px;
margin-right: 10px;
"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/weizan.png"
fit="cover"
></el-image>
{{ goods.DianZanNum }}
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width: 100%">
<div
v-for="(goods, goodsIndex) in cCatGoodsList(
cat,
catIndex
)"
class="goods-item-pb"
:key="goodsIndex"
:class="
data.catPosition === 'left' ? 'goods-cat-list' : ''
"
v-if="goodsIndex % 2 === 1"
>
<div
style="display: inline-block"
:style="cGoodsItemWidth"
>
<div
:style="cGoodsItemStyle"
:flex="cGoodsItemFlex"
style="position: relative"
>
<div>
<el-image
class="goods-pic-pb"
:class="
'goods-pic-' +
data.goodsCoverProportion +
' goods-pic-fill-' +
data.fill
"
:src="goods.picUrl"
fit="cover"
></el-image>
<div class="creatManInfo">
<div class="creatManInfo-name">
<el-image
style="
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
"
:src="goods.Photo"
fit="cover"
></el-image>
{{ goods.CreateBy }}
</div>
<div class="creatManInfo-name">
<el-image
style="
width: 26px;
height: 28px;
margin-right: 10px;
"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/weizan.png"
fit="cover"
></el-image>
{{ goods.DianZanNum }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div v-else>
<div
v-for="(goods, goodsIndex) in cCatGoodsList(cat, catIndex)"
class="goods-item"
:key="goodsIndex"
:class="data.catPosition === 'left' ? 'goods-cat-list' : ''"
>
<div style="display: inline-block" :style="cGoodsItemWidth">
<div
:style="cGoodsItemStyle"
:flex="cGoodsItemFlex"
style="position: relative"
>
<div
class="goods-pic"
:class="
'goods-pic-' +
data.goodsCoverProportion +
' goods-pic-fill-' +
data.fill
"
:style="
'background-image: url(' +
getIconLink(goods.picUrl) +
')'
"
>
<div
v-if="data.showGoodsTag"
class="goods-tag"
:style="
'background-image: url(' +
getIconLink(data.goodsTagPicUrl) +
')'
"
></div>
</div>
<div :style="cGoodsItemInfoStyle">
<div
class="goods-name"
:class="{
'goods-name-static': data.listStyle === -1,
'goods-name-staticList': data.listStyle === 4,
}"
>
<template v-if="data.showGoodsName">{{
goods.name
}}</template>
</div>
<div
flex="box:last"
:class="{
'goods-name-StaticName': data.listStyle === 4,
}"
>
<div class="goods-price">
<template
v-if="
data.showGoodsPrice && data.listStyle != 4
"
>￥{{ goods.price }}</template
>
<template
v-if="data.showScore && data.listStyle == 4"
>
<el-rate
v-model="ScoreStar"
disabled
show-score
:colors="ScoreArr"
:text-color="ScoreArr[0]"
score-template="{value}分"
>
</el-rate>
</template>
</div>
<div>
<div
v-if="
data.showGoodsPrice && data.listStyle == 4
"
style="color: #ff003f"
>
<span class="gd_Price">￥</span
>{{ goods.price }}
</div>
<template v-if="cShowBuyBtn">
<template v-if="data.buyBtn === 'cart'">
<i
style="font-size: 48px; color: #ff4544"
class="el-icon-shopping-cart-1"
></i>
</template>
<template v-if="data.buyBtn === 'add'">
<i
style="font-size: 48px; color: #ff4544"
class="el-icon-circle-plus-outline"
></i>
</template>
<template v-if="data.buyBtn === 'text'">
<div
:style="cButtonStyle"
style="
font-size: 24px;
border: 1px solid;
color: #ffffff;
"
>
{{ data.buyBtnText }}
</div>
</template>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="diy-component-edit" v-if="goodData.isCked">
<el-form label-width="150px" @submit.native.prevent>
<el-form-item label="显示分类">
<el-switch
v-model="data.showCat"
@change="showCatChange"
:active-value="true"
:inactive-value="false"
>
</el-switch>
</el-form-item>
<template v-if="data.showCat">
<el-form-item label="分类栏位置">
<el-radio
v-model="data.catPosition"
@change="catPositionChange"
label="top"
>顶部</el-radio
>
<!-- <el-radio v-model="data.catPosition" label="left">左侧</el-radio> -->
<div style="color: #909399; line-height: normal">
只有一个分类时顶部不会显示分类栏
</div>
</el-form-item>
<el-form-item label="分类样式" v-if="data.catPosition === 'top'">
<el-radio v-model="data.catStyle" :label="1">样式1</el-radio>
<!-- <el-radio v-model="data.catStyle" :label="2">样式2</el-radio> -->
</el-form-item>
<el-form-item label="分类列表">
<div
v-for="(cat, catIndex) in data.catList"
class="cat-item"
:key="catIndex"
>
<div class="cat-item-options">
<el-button
type="primary"
icon="el-icon-delete"
@click="deleteCat(catIndex)"
></el-button>
</div>
<div flex="box:first">
<div class="diy-goods-label">分类名称</div>
<div v-if="cat.isCustom === 0">{{ cat.name }}</div>
<el-input v-else v-model="cat.name" size="small"></el-input>
</div>
<div flex="box:first">
<div class="diy-goods-label">帖子范围</div>
<div>
<el-radio-group
v-model="cat.range"
@change="summaryChange($event, cat)"
>
<el-radio :label="1">全部</el-radio>
<el-radio :label="2">关注</el-radio>
<el-radio :label="3">手动关联</el-radio>
</el-radio-group>
<!-- <el-select v-model="cat.range" placeholder="请选择">
<el-option
v-for="item in postsOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select> -->
</div>
</div>
<div flex="box:first" v-if="cat.isCustom === 0">
<div class="diy-goods-label">菜单名称</div>
<div>
<el-input v-model="cat.menuName" size="small"></el-input>
</div>
</div>
<div flex="box:first" v-if="cat.range === 1 || cat.range === 2">
<div class="diy-goods-label">贴子数量</div>
<div>
<el-input
v-model.number="cat.goodsNum"
type="number"
min="1"
max="30"
size="small"
@change="catGoodsNumChange(catIndex)"
></el-input>
</div>
</div>
<!-- <div flex="box:first">
<div class="diy-goods-label">手动指定</div>
<div>
<el-switch
v-model="cat.staticGoods"
:active-value="true"
:inactive-value="false"
></el-switch>
</div>
</div> -->
<div flex="box:first" v-if="cat.range === 3">
<div class="diy-goods-label">贴子列表</div>
<div>
<draggable
v-model="cat.goodsList"
class="goods-list"
style="display: flex"
>
<div
class="goods-item"
v-for="(goods, goodsIndex) in cat.goodsList"
:key="goodsIndex"
>
<el-tooltip
effect="dark"
content="移除商品"
placement="top"
>
<el-button
@click="deleteGoods(goodsIndex, catIndex)"
circle
class="goods-delete"
type="danger"
icon="el-icon-close"
></el-button>
</el-tooltip>
<div
class="goods-pic"
:style="
'background-image:url(' +
getIconLink(goods.picUrl) +
')'
"
></div>
</div>
</draggable>
<div class="goods-add">
<el-button
@click="
showGoodsDialog(catIndex), (ckGoods = cat.goodsNum)
"
icon="el-icon-plus"
>
</el-button>
</div>
</div>
</div>
</div>
<el-button size="small" @click="isFenlei = true"
>添加系统分类</el-button
>
<el-button size="small" @click="customFenLei"
>添加自定义分类</el-button
>
</el-form-item>
</template>
<template v-else>
<el-form-item label="贴子添加">
<el-radio v-model="data.addGoodsType" :label="0"
>自动添加</el-radio
>
<el-radio v-model="data.addGoodsType" :label="1"
>手动添加</el-radio
>
</el-form-item>
<el-form-item v-show="data.addGoodsType == 0" label="贴子数量">
<el-input
size="small"
v-model.number="data.goodsLength"
type="number"
></el-input>
</el-form-item>
<el-form-item v-show="data.addGoodsType == 1" label="贴子列表">
<draggable
v-model="data.list"
class="goods-list"
style="display: flex"
>
<div
class="goods-item"
v-for="(goods, goodsIndex) in data.list"
:key="goodsIndex"
>
<el-tooltip effect="dark" content="移除商品" placement="top">
<el-button
@click="deleteGoods(goodsIndex, null)"
circle
class="goods-delete"
type="danger"
icon="el-icon-close"
></el-button>
</el-tooltip>
<div
class="goods-pic"
:style="
'background-image:url(' + getIconLink(goods.picUrl) + ')'
"
></div>
</div>
</draggable>
<div class="goods-add">
<el-button
size="small"
@click="showGoodsDialog(null)"
icon="el-icon-plus"
></el-button>
</div>
</el-form-item>
</template>
<hr />
<el-form-item label="列表样式" v-if="data.catPosition === 'top'">
<el-radio v-model="data.listStyle" :label="5">瀑布流模式</el-radio>
<el-radio v-model="data.listStyle" :label="-1">卡片模式</el-radio>
</el-form-item>
<!-- <el-form-item label="列表样式" v-if="data.catPosition==='top'">
<el-radio v-model="data.listStyle" :label="-1">列表模式</el-radio>
<el-radio v-model="data.listStyle" :label="0">左右滑动</el-radio>
<el-radio v-model="data.listStyle" :label="1">一行一个</el-radio>
<el-radio v-model="data.listStyle" :label="2">一行两个</el-radio>
<el-radio v-model="data.listStyle" :label="3">一行三个</el-radio>
<el-radio v-model="data.listStyle" :label="4">新列表模式</el-radio>
</el-form-item> -->
<!-- <el-form-item label="商品封面图宽高比例" v-if="data.listStyle==1">
<el-radio v-model="data.goodsCoverProportion" label="1-1">1:1</el-radio>
<el-radio v-model="data.goodsCoverProportion" label="3-2">3:2</el-radio>
</el-form-item>
<el-form-item label="商品封面图填充">
<el-radio v-model="data.fill" :label="1">填充</el-radio>
<el-radio v-model="data.fill" :label="0">留白</el-radio>
</el-form-item>
<el-form-item label="商品样式">
<el-radio v-model="data.goodsStyle" :label="1">白底无边框</el-radio>
<el-radio v-model="data.goodsStyle" :label="2">白底有边框</el-radio>
<el-radio v-model="data.goodsStyle" :label="3">无底无边框</el-radio>
</el-form-item>
<el-form-item label="显示商品名称">
<el-switch v-model="data.showGoodsName" :active-value="true" :inactive-value="false"></el-switch>
</el-form-item>
<el-form-item label="显示商品价格">
<el-switch v-model="data.showGoodsPrice" :active-value="true" :inactive-value="false"></el-switch>
</el-form-item>
<el-form-item label="显示星级" v-if="data.listStyle==4">
<el-switch v-model="data.showScore" :active-value="true" :inactive-value="false"></el-switch>
</el-form-item>
<el-form-item label="星星颜色" v-if="data.listStyle==4">
<div class="input-color" flex="dir:left cross:center">
<el-color-picker size="small" v-model="data.scoreColor"></el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.scoreColor"></el-input>
</div>
</el-form-item>
<el-form-item v-if="data.listStyle!==-1" label="文本样式">
<el-radio v-model="data.textStyle" :label="1">左对齐</el-radio>
<el-radio v-model="data.textStyle" :label="2">居中</el-radio>
</el-form-item>
<el-form-item label="显示购买按钮" v-if="data.textStyle !== 2">
<el-switch v-model="data.showBuyBtn" :active-value="true" :inactive-value="false"></el-switch>
</el-form-item>
<el-form-item label="购买按钮样式" v-if="data.textStyle !== 2&&data.showBuyBtn">
<el-radio v-model="data.buyBtn" label="cart">购物车</el-radio>
<el-radio v-model="data.buyBtn" label="add">加号</el-radio>
<el-radio v-if="data.listStyle!=3" v-model="data.buyBtn" label="text">文字</el-radio>
</el-form-item>
<el-form-item label="购买按钮文字样式" v-if="data.textStyle !== 2&&data.showBuyBtn&&data.buyBtn=='text'">
<el-radio v-model="data.buyBtnStyle" :label="1">填充</el-radio>
<el-radio v-model="data.buyBtnStyle" :label="2">线条</el-radio>
<el-radio v-model="data.buyBtnStyle" :label="3">圆角填充</el-radio>
<el-radio v-model="data.buyBtnStyle" :label="4">圆角线条</el-radio>
</el-form-item>
<el-form-item label="购买按钮颜色" v-if="data.textStyle !== 2&&data.showBuyBtn&&data.buyBtn=='text'">
<el-color-picker v-model="data.buttonColor"></el-color-picker>
</el-form-item>
<el-form-item label="购买按钮文字" v-if="data.textStyle !== 2&&data.showBuyBtn&&data.buyBtn=='text'">
<el-input maxlength="4" size="small" v-model="data.buyBtnText"></el-input>
</el-form-item>
<el-form-item label="显示商品角标">
<el-switch v-model="data.showGoodsTag" :active-value="true" :inactive-value="false"></el-switch>
</el-form-item>
<el-form-item label="商品角标" v-if="data.showGoodsTag">
<el-radio v-model="data.goodsTagPicUrl" v-for="tag in goodsTags" :label="tag.picUrl" :key="tag.name"
@change="goodsTagChange">
{{tag.name}}
</el-radio>
<el-radio v-model="data.customizeGoodsTag" :label="true" @change="customizeGoodsTagChange">自定义</el-radio>
</el-form-item>
<el-form-item label="自定义商品角标" v-if="data.showGoodsTag&&data.customizeGoodsTag">
<div flex="main:center cross:center" @click="choicImg=true" class="Goodspic-box"
:style="{backgroundImage:'url('+getIconLink(data.goodsTagPicUrl)+')'}">
<i v-if="data.goodsTagPicUrl==''" class="el-icon-picture-outline"></i>
<div class="size-tip">64 × 64</div>
</div>
</el-form-item>
<el-form-item label="背景颜色">
<div class="input-color" flex="dir:left cross:center">
<el-color-picker size="small" v-model="data.backgroundColor"></el-color-picker>
<el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.backgroundColor"></el-input>
</div>
</el-form-item> -->
</el-form>
</div>
</div>
<!-- 选择图片文件 -->
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
<!-- 选择分类 -->
<el-dialog title="选择分类" :visible.sync="isFenlei" width="800px">
<ChoiceSystemFenlei ref="ChooseFenlei"></ChoiceSystemFenlei>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="quxiaoFenlei()">取 消</el-button>
<el-button size="small" type="danger" @click="getChoiceFenlei()"
>确 定</el-button
>
</span>
</el-dialog>
<!-- 选择贴子 -->
<el-dialog
title="选择贴子"
:visible.sync="isShowGoods"
custom-class="goodsDialog"
>
<ChoicePosts ref="choiceGood"></ChoicePosts>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="isShowGoods = false">取 消</el-button>
<el-button size="small" type="danger" @click="getGoodsChoice()"
>确 定</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
import draggable from "vuedraggable";
import ChooseImg from "@/components/global/ChooseImg.vue";
import ChooseFenlei from "../../common/choiceFenlei.vue";
import choiceGood from "../../common/choiceGood.vue";
import ChoiceSystemFenlei from "../../common/choiceSystemFenlei.vue";
import ChoicePosts from "../../common/choicePosts.vue";
export default {
props: ["goodData", "index", "dataLeng"],
components: {
draggable,
ChooseImg,
ChooseFenlei,
choiceGood,
ChoiceSystemFenlei,
ChoicePosts,
},
data() {
return {
//可以选择的商品数
ckGoods: 0,
data: this.goodData.data,
position: "center center",
repeat: "no-repeat",
choicImg: false,
isFenlei: false,
isShowGoods: false,
ScoreStar: 5, //分数
ScoreArr: [], //颜色数组
//添加的下标
comIndex: -1,
goodsTags: [
{
name: "热销",
picUrl: this.domainManager().ImageUrl + "/Static/goods-tag-rx.png",
},
{
name: "新品",
picUrl: this.domainManager().ImageUrl + "/Static/goods-tag-xp.png",
},
{
name: "折扣",
picUrl: this.domainManager().ImageUrl + "/Static/goods-tag-zk.png",
},
{
name: "推荐",
picUrl: this.domainManager().ImageUrl + "/Static/goods-tag-tj.png",
},
],
postsOptions: [
{
value: 1,
label: "全部帖子",
},
{
value: 2,
label: "用户关注",
},
{
value: 3,
label: "手动关联",
},
],
};
},
created() {},
methods: {
//向父组件传值 并调用排序
resetSord(IsUp) {
this.$emit("getSord", this.index, IsUp);
},
//点击触发父组件删除
delPlugin() {
this.$emit("comDelPlugin", this.index);
},
cCatGoodsList(cat, catIndex) {
const goodsList = cat.goodsList;
let newList = [];
if (this.data.catPosition == "top" && catIndex > 0) {
newList = [];
} else {
if (goodsList && goodsList.length) {
newList = goodsList;
} else {
const defaultGoodsItem = {
id: 0,
name: "商品名称",
picUrl: "",
price: "100.00",
};
newList = new Array(cat.goodsNum).fill(defaultGoodsItem);
}
}
return newList;
},
goodsTagChange(e) {
this.data.goodsTagPicUrl = e;
this.data.customizeGoodsTag = false;
},
catPositionChange(e) {
if (e === "left") {
this.data.listStyle = -1;
}
},
customizeGoodsTagChange(e) {
this.data.goodsTagPicUrl = "";
this.data.customizeGoodsTag = true;
},
deleteCat(index) {
this.data.catList.splice(index, 1);
},
showGoodsDialog(catIndex) {
if (catIndex !== null) {
this.comIndex = catIndex;
} else {
this.comIndex = null;
}
this.isShowGoods = true;
},
deleteGoods(goodsIndex, catIndex) {
if (catIndex !== null) {
this.data.catList[catIndex].goodsList.splice(goodsIndex, 1);
} else {
this.data.list.splice(goodsIndex, 1);
}
},
listStyleChange(listStyle) {
if (listStyle === -1 && this.data.textStyle === 2) {
this.data.textStyle = 1;
}
if (this.data.textStyle === 2 && this.data.buyBtn === "text") {
this.data.buyBtn = "cart";
}
},
catGoodsNumChange(catIndex) {
// if (this.data.catList[catIndex].goodsNum > 3) {
// this.data.catList[catIndex].goodsNum = 3;
// }
// if (this.data.catList[catIndex].goodsNum < 1) {
// this.data.catList[catIndex].goodsNum = 1;
// }
},
showCatChange(value) {
if (!value) {
this.data.catPosition = "top";
}
},
//选择图片
SelectId(msg) {
this.data.goodsTagPicUrl = msg.url;
this.choicImg = false;
},
//选择商品分类
getChoiceFenlei() {
var ckedArr = this.$refs.ChooseFenlei.getChoicedFenlei();
var myCatArray = [];
if (ckedArr && ckedArr.length > 0) {
ckedArr.forEach((item) => {
myCatArray.push({
isCustom: 0,
goodsList: [],
goodsNum: 1,
id: item.id,
menuName: item.menuName,
name: item.name,
range: 1,
staticGoods: 1,
});
});
}
this.data.catList = this.data.catList.concat(myCatArray);
this.isFenlei = false;
this.$refs.ChooseFenlei.toggleSelection();
},
customFenLei() {
let obj = {
isCustom: 1,
goodsList: [],
goodsNum: 1,
id: 0,
menuName: "",
name: "",
range: 1,
staticGoods: 1,
};
this.data.catList.push(obj);
console.log(1024, this.data.catList);
},
//取消商品分类选择
quxiaoFenlei() {
this.isFenlei = false;
this.$refs.ChooseFenlei.toggleSelection();
},
//选择商品
getGoodsChoice() {
var ckedArr = this.$refs.choiceGood.getChoicedGoods();
var myArray = [];
if (ckedArr && ckedArr.length > 0) {
ckedArr.forEach((element) => {
console.log("element", element);
myArray.push({
id: element.Id,
name: element.ActivityTitle,
picUrl: element.ImageList[0],
CreateBy: element.UserName,
DianZanNum: element.DianZanNum,
Photo: element.Photo,
userId: element.UserId,
});
});
}
if (this.comIndex !== null) {
this.data.catList[this.comIndex].goodsList =
this.data.catList[this.comIndex].goodsList.concat(myArray);
} else {
this.data.list = this.data.list.concat(myArray);
}
this.isShowGoods = false;
this.$refs.choiceGood.toggleSelection();
},
//取消选择商品
quxiaoGoods() {
this.isShowGoods = false;
this.$refs.choiceGood.toggleSelection();
},
summaryChange(e, cat) {
if (e === 3) {
cat.staticGoods = 1;
} else {
cat.staticGoods = 0;
}
},
},
computed: {
cListStyle() {
if (this.data.backgroundColor) {
return `background-color:${this.data.backgroundColor};background-image:url(${this.data.backgroundPicUrl});background-size:${this.data.backgroundWidth}% ${this.data.backgroundHeight}%;background-repeat:${this.repeat};background-position:${this.position}`;
} else {
return `background-image:url(${this.data.backgroundPicUrl});background-size:${this.data.backgroundWidth}% ${this.data.backgroundHeight}%;background-repeat:${this.repeat};background-position:${this.position}`;
}
},
cMainFlex() {
if (this.data.catPosition === "left") {
return "dir:left box:first";
}
if (this.data.catPosition === "top") {
return "dir:top";
}
},
cCatFlex() {
if (this.data.catPosition === "left") {
return "dir:top";
}
if (this.data.catPosition === "top") {
return "dir:left";
}
},
cCatList() {
if (this.data.showCat) {
if (this.data.catList && this.data.catList.length) {
console.log(1301, this.data.catList);
return this.data.catList;
} else {
const defaultCatItem = {
id: 0,
name: "分类名称",
menuName: "分类名称",
goodsList: [],
goodsNum: 3,
};
return [defaultCatItem, defaultCatItem];
}
} else {
return [
{
id: null,
name: null,
menuName: null,
goodsList: this.data.list,
},
];
}
},
cCatStyle() {},
cGoodsListStyle() {
if (this.data.listStyle === 0) {
return "flex-wrap: nowrap;overflow-x:auto;";
} else {
return "flex-wrap: wrap;";
}
},
cGoodsItemFlex() {
if (this.data.listStyle === -1 || this.data.listStyle === 4) {
return "dir:left box:first cross:center";
}
return "dir:top";
},
cGoodsItemStyle() {
let style;
if (this.data.goodsStyle != 3) {
if (this.data.listStyle === -1) {
style =
"border: 1px solid #e2e2e2;border-radius:10px;background:#fff;";
} else {
style =
"border: 1px solid #e2e2e2;border-radius:10px;background:#fff;";
}
} else {
return style;
}
if (this.data.goodsStyle === 2) {
return style;
} else if (this.data.goodsStyle === 1) {
if (this.data.listStyle === -1) {
return "border-radius:10px;background:#fff;";
} else {
return "border-radius:10px;background:#fff;";
}
} else {
return "background:#fff;";
}
},
cShowBuyBtn() {
if (!this.data.showBuyBtn) {
return false;
}
if (this.data.textStyle === 2 || this.data.listStyle === 0) {
return false;
}
if (this.data.listStyle == 4) {
return false;
}
return true;
},
cGoodsItemInfoStyle() {
let style = "";
if (this.data.textStyle === 2) {
style += `text-align: center;`;
}
if (this.data.listStyle === -1 || this.data.listStyle === 4) {
style += `height: 200px;padding: 20px 24px 20px 32px;`;
} else {
style += `padding:24px 24px;`;
}
return style;
},
cGoodsItemWidth() {
if (this.data.listStyle === 0) {
return "width: 200px;";
}
return "width: 100%;";
},
cButtonStyle() {
let style = `background: ${this.data.buttonColor};border-color: ${this.data.buttonColor};height:48px;line-height:46px;padding:0 20px;`;
if (this.data.buyBtnStyle === 3 || this.data.buyBtnStyle === 4) {
style += `border-radius:999px;`;
}
if (this.data.buyBtnStyle === 2 || this.data.buyBtnStyle === 4) {
style += `background:#fff;color:${this.data.buttonColor}`;
}
return style;
},
},
mounted() {
if (this.data.scoreColor) {
this.ScoreArr.push(this.data.scoreColor);
this.ScoreArr.push(this.data.scoreColor);
this.ScoreArr.push(this.data.scoreColor);
}
},
watch: {
"data.scoreColor"(val) {
this.ScoreArr = [];
this.ScoreArr.push(val);
this.ScoreArr.push(val);
this.ScoreArr.push(val);
this.$forceUpdate();
},
"data.listStyle"(val) {
if (val == 4) {
this.data.showBuyBtn = false;
} else {
this.data.showBuyBtn = true;
}
},
},
};
</script>
\ No newline at end of file
src/components/sallCenter/templateEdit.vue
View file @ 85220de3
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment