mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-08-06 10:57:26 +08:00
Merge branch 'vue3' of https://gitee.com/beijing_hongye_huicheng/lilishop-ui into vue3
This commit is contained in:
chc
@@ -15,7 +15,8 @@ h4 {
|
||||
margin-right: 40px;
|
||||
}
|
||||
.count-item,
|
||||
.todo-item {
|
||||
.todo-item,
|
||||
.today-item {
|
||||
height: 84px;
|
||||
display: flex;
|
||||
|
||||
@@ -60,6 +61,12 @@ h4 {
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
justify-content: flex-start;
|
||||
|
||||
> div:first-child {
|
||||
margin-left: 40px;
|
||||
margin-right: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
.count-item:nth-of-type(1) {
|
||||
background-image: linear-gradient(109.6deg, rgba($color: #ff7171, $alpha: 0.6) 11.2%, #ff7171 100.2%);
|
||||
@@ -93,7 +100,10 @@ h4 {
|
||||
|
||||
|
||||
.flow-list {
|
||||
height: 330px;
|
||||
min-height: 330px;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
.svg {
|
||||
width: 20px;
|
||||
@@ -101,7 +111,8 @@ h4 {
|
||||
}
|
||||
.flow-item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex: 1 1 620px;
|
||||
min-width: 0;
|
||||
}
|
||||
.flow {
|
||||
background: #ebebeb88 !important;
|
||||
@@ -131,28 +142,36 @@ h4 {
|
||||
}
|
||||
}
|
||||
.flow-box {
|
||||
padding-top: 20px;
|
||||
width: 400px;
|
||||
padding: 37px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
justify-content: space-between;
|
||||
margin: 10px 0 20px;
|
||||
gap: 20px;
|
||||
> .flow-box-item {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
margin: 0 20px;
|
||||
> div {
|
||||
margin: 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.flow-splice {
|
||||
width: 100%;
|
||||
gap: 20px;
|
||||
}
|
||||
.flow-box-splice {
|
||||
background: #fff;
|
||||
width: 190px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-right: 20px;
|
||||
padding: 20px;
|
||||
padding: 36px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -182,24 +201,44 @@ h4 {
|
||||
.flow-wrapper {
|
||||
background: #fff;
|
||||
padding: 0 30px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.today-box {
|
||||
flex: 3;
|
||||
flex: 1 1 380px;
|
||||
min-width: 380px;
|
||||
align-self: flex-start;
|
||||
background: #fff;
|
||||
margin-left: 20px;
|
||||
padding: 0 30px;
|
||||
padding: 0 30px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
> h4 {
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.today-item {
|
||||
width: 30%;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 0.4em;
|
||||
font-weight: bold;
|
||||
box-sizing: border-box;
|
||||
flex: 1 1 calc(50% - 8px);
|
||||
min-width: calc(50% - 8px);
|
||||
margin-right: 0;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background: #ebebeb88;
|
||||
padding: 20px;
|
||||
padding: 16px 20px;
|
||||
> div {
|
||||
word-break: break-word;
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
> span {
|
||||
color: $theme_color;
|
||||
font-size: 21px;
|
||||
margin-top: 8px;
|
||||
word-break: break-all;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -214,6 +253,7 @@ h4 {
|
||||
}
|
||||
|
||||
.today-list {
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
@@ -448,16 +448,16 @@ export default {
|
||||
.advert-list {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 5px 6px;
|
||||
padding: 10px;
|
||||
list-style: none;
|
||||
box-sizing: border-box;
|
||||
background: $theme_color;
|
||||
height: 200px;
|
||||
height: 210px;
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
> li {
|
||||
flex: 0 0 calc((100% - 24px) / 5);
|
||||
flex: 0 0 calc((100% - 40px) / 5);
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
@@ -32,23 +32,16 @@
|
||||
append-to-body destroy-on-close>
|
||||
<div v-if="current">
|
||||
<div class="modal-tab-bar">
|
||||
<div>
|
||||
<div class="current-module-row">
|
||||
当前模块 :
|
||||
<el-button-group>
|
||||
<el-button :type="current.model == 'goods' ? 'primary' : 'default'"
|
||||
>商品</el-button
|
||||
>
|
||||
<el-button :type="current.model == 'brand' ? 'primary' : 'default'"
|
||||
>品牌</el-button
|
||||
>
|
||||
</el-button-group>
|
||||
<el-tag>{{ current.model === "goods" ? "商品" : "品牌" }}</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<div class="flex image-row">
|
||||
<div>图片 :</div>
|
||||
<div>
|
||||
<div class="image-config">
|
||||
<img class="image" :src="current.data.image.src" alt="" />
|
||||
<div>
|
||||
<div class="image-config-detail">
|
||||
<div>推荐尺寸：{{ current.data.image.size }}</div>
|
||||
<div class="link-src">
|
||||
链接地址：
|
||||
@@ -74,7 +67,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex" v-if="current.model == 'goods'">
|
||||
<div class="flex badge-row" v-if="current.model == 'goods'">
|
||||
<div>标签 :</div>
|
||||
<el-input
|
||||
style="width: 200px"
|
||||
@@ -82,14 +75,13 @@
|
||||
v-model="current.data.badge.label"
|
||||
/>
|
||||
<el-input
|
||||
style="width: 100px; margin-left: 10px"
|
||||
style="width: 100px"
|
||||
disabled
|
||||
type="text"
|
||||
v-model="current.data.badge.url"
|
||||
/>
|
||||
<el-button
|
||||
size="small"
|
||||
class="ml_10"
|
||||
type="primary"
|
||||
@click="handleSelectLink('badge')"
|
||||
>选择链接
|
||||
@@ -101,7 +93,7 @@
|
||||
:key="index"
|
||||
class="draggable"
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="flex column-item">
|
||||
<img :src="item.img" class="column-img" />
|
||||
<el-button
|
||||
size="small"
|
||||
@@ -111,7 +103,7 @@
|
||||
@click="handleSelectGoods('list', index)"
|
||||
>选择商品
|
||||
</el-button>
|
||||
<div>
|
||||
<div class="column-item-config">
|
||||
<div v-if="current.model == 'brand'" style="margin-bottom: 10px">
|
||||
<el-input disabled v-model="item.url" />
|
||||
</div>
|
||||
@@ -235,11 +227,12 @@ export default {
|
||||
// 选择商品回调
|
||||
selectedGoodsData(val) {
|
||||
if (!val?.length || !this.current) return;
|
||||
const goods = val[0];
|
||||
const item = this.current.data.list[this.goodsIndex];
|
||||
item.img = val[0].thumbnail;
|
||||
item.title = val[0].goodsName;
|
||||
item.price = val[0].price;
|
||||
item.url = val[0].url;
|
||||
item.img = goods.thumbnail;
|
||||
item.title = goods.goodsName;
|
||||
item.price = goods.price;
|
||||
item.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
|
||||
},
|
||||
// 选择链接回调
|
||||
selectedLink(val) {
|
||||
@@ -279,6 +272,45 @@ export default {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.current-module-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.image-row {
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.badge-row {
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.image-config {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.image-config-detail {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.column-item {
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.column-item-config {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mix-model {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -293,6 +325,7 @@ export default {
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 1px 13px 0px #e5e5e5;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
.setup-box {
|
||||
@@ -326,8 +359,6 @@ export default {
|
||||
}
|
||||
|
||||
.draggable {
|
||||
> .flex {
|
||||
align-items: center;
|
||||
}
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,20 +1,22 @@
|
||||
<template>
|
||||
<div class="flex" v-if="data.options.right.model == 'brand'">
|
||||
<div class="left-side" >
|
||||
<img :src="data.options.right.data.image.src" alt="">
|
||||
<div class="mix-panel flex" v-if="data.options.right.model == 'brand'">
|
||||
<div class="left-side">
|
||||
<img :src="data.options.right.data.image.src" alt="" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="right-side">
|
||||
<div class="badge-box flex">
|
||||
<div class="round">
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="flex goods-list">
|
||||
<div class="goods-item flex" :key="index" v-for="(item,index) in data.options.right.data.list">
|
||||
<div
|
||||
class="goods-item flex"
|
||||
:key="index"
|
||||
v-for="(item, index) in data.options.right.data.list"
|
||||
>
|
||||
<div class="goods-thumbnail">
|
||||
<img :src="item.img" alt="">
|
||||
<img :src="item.img" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -24,63 +26,59 @@
|
||||
|
||||
<script>
|
||||
import { ArrowRight } from "@element-plus/icons-vue";
|
||||
|
||||
export default {
|
||||
name: "mix-goods",
|
||||
name: "mix-brand",
|
||||
components: { ArrowRight },
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
components: {},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.goods-detail{
|
||||
.mix-panel {
|
||||
height: 100%;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
.goods-detail-title{
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
color: #333333;
|
||||
}
|
||||
.goods-detail-price{
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 17px;
|
||||
letter-spacing: 0px;
|
||||
color: #F31947;
|
||||
margin-top: 8px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.goods-thumbnail{
|
||||
margin-left: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
>img{
|
||||
width:90px;
|
||||
height: 90px;
|
||||
.left-side {
|
||||
flex-shrink: 0;
|
||||
width: 254px;
|
||||
height: 344px;
|
||||
|
||||
> img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 9.8px 0 0 9.8px;
|
||||
}
|
||||
}
|
||||
.badge-box{
|
||||
margin-top: 33px;
|
||||
justify-content:right;
|
||||
>.round{
|
||||
|
||||
.right-side {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 344px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.badge-box {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 8px;
|
||||
justify-content: flex-end;
|
||||
flex-shrink: 0;
|
||||
|
||||
> .round {
|
||||
width: 17.5px;
|
||||
height: 17.5px;
|
||||
opacity: 1;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 17.5px;
|
||||
@@ -88,46 +86,47 @@ export default {
|
||||
margin-right: 17.5px;
|
||||
}
|
||||
}
|
||||
.goods-list{
|
||||
|
||||
.goods-list {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
flex-wrap: wrap;
|
||||
justify-content:space-between;
|
||||
padding: 0 16px;
|
||||
justify-content: space-between;
|
||||
align-content: flex-start;
|
||||
padding: 0 16px 12px;
|
||||
gap: 8px 0;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.goods-item{
|
||||
|
||||
.goods-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width:50%;
|
||||
height: 85px;
|
||||
flex: 0 0 calc(50% - 4px);
|
||||
width: calc(50% - 4px);
|
||||
height: 82px;
|
||||
border-radius: 9.8px;
|
||||
opacity: 1;
|
||||
transition: .35s;
|
||||
background: #FFFFFF;
|
||||
margin-bottom:9px;
|
||||
|
||||
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
transition: 0.35s;
|
||||
}
|
||||
.left-side {
|
||||
>img{
|
||||
width: 254px;
|
||||
height: 344px;
|
||||
border-radius: 9.8px 0px 0px 9.8px;
|
||||
opacity: 1;
|
||||
|
||||
.goods-thumbnail {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
> img {
|
||||
max-width: 80px;
|
||||
max-height: 76px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
.badge {
|
||||
width: 50px;
|
||||
height: 27px;
|
||||
line-height:27px;
|
||||
border-radius: 13.3px 0px 0px 13.3px;
|
||||
opacity: 1;
|
||||
background: #F31947;
|
||||
font-size: 12.6px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
color: #FFFFFF;
|
||||
margin-top: 26px;
|
||||
margin-bottom:17px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,124 +1,147 @@
|
||||
<template>
|
||||
<div class="flex" v-if="data.options.left.model == 'goods'">
|
||||
<div class="left-side" >
|
||||
<img :src="data.options.left.data.image.src" alt="">
|
||||
<div class="mix-panel flex" v-if="data.options.left.model == 'goods'">
|
||||
<div class="left-side">
|
||||
<img :src="data.options.left.data.image.src" alt="" />
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<div class="badge-box flex">
|
||||
<div class="badge">
|
||||
{{ data.options.left.data.badge.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="badge-box flex">
|
||||
<div class="badge">
|
||||
{{data.options.left.data.badge.label}}
|
||||
</div>
|
||||
<div class="flex goods-list">
|
||||
<div
|
||||
class="goods-item flex"
|
||||
:key="index"
|
||||
v-for="(item, index) in data.options.left.data.list"
|
||||
>
|
||||
<div class="goods-thumbnail">
|
||||
<img :src="item.img" alt="" />
|
||||
</div>
|
||||
<div class="flex goods-list">
|
||||
<div class="goods-item flex" :key="index" v-for="(item,index) in data.options.left.data.list">
|
||||
<div class="goods-thumbnail">
|
||||
<img :src="item.img" alt="">
|
||||
</div>
|
||||
<div class="goods-detail">
|
||||
<div class="goods-detail-title">{{item.title}}</div>
|
||||
<div class="goods-detail-price">{{ $filters.unitPrice(item.price, '¥') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods-detail">
|
||||
<div class="goods-detail-title">{{ item.title }}</div>
|
||||
<div class="goods-detail-price">{{ $filters.unitPrice(item.price, '¥') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "mix-goods",
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
components: {},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.goods-detail{
|
||||
|
||||
.mix-panel {
|
||||
height: 100%;
|
||||
align-items: stretch;
|
||||
overflow: hidden;
|
||||
}
|
||||
.goods-detail-title{
|
||||
|
||||
.left-side {
|
||||
flex-shrink: 0;
|
||||
width: 196.7px;
|
||||
height: 344px;
|
||||
|
||||
> img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-side {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 344px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.goods-detail-title {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
color: #333333;
|
||||
}
|
||||
.goods-detail-price{
|
||||
|
||||
.goods-detail-price {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 17px;
|
||||
letter-spacing: 0px;
|
||||
color: #F31947;
|
||||
color: #f31947;
|
||||
margin-top: 8px;
|
||||
margin-bottom:10px;
|
||||
}
|
||||
.goods-thumbnail{
|
||||
|
||||
.goods-thumbnail {
|
||||
margin-left: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
>img{
|
||||
width:90px;
|
||||
flex-shrink: 0;
|
||||
|
||||
> img {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
.badge-box{
|
||||
|
||||
justify-content:right;
|
||||
.badge-box {
|
||||
justify-content: flex-end;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.goods-list{
|
||||
|
||||
.goods-list {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
flex-wrap: wrap;
|
||||
justify-content:space-between;
|
||||
justify-content: space-between;
|
||||
padding: 0 16px;
|
||||
gap: 9px 0;
|
||||
}
|
||||
.goods-item{
|
||||
|
||||
.goods-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 173.6px;
|
||||
flex: 0 0 calc(50% - 4px);
|
||||
width: calc(50% - 4px);
|
||||
height: 119px;
|
||||
border-radius: 9.8px;
|
||||
opacity: 1;
|
||||
transition: .35s;
|
||||
background: #FFFFFF;
|
||||
margin-bottom:9px;
|
||||
&:hover{
|
||||
box-shadow: 0px 1px 6px 0px #E5E5E5;
|
||||
}
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
transition: 0.35s;
|
||||
|
||||
}
|
||||
.left-side {
|
||||
>img{
|
||||
border-radius: 10px 0px 0px 10px;
|
||||
display: block;
|
||||
width: 196.7px;
|
||||
height: 343.7px;
|
||||
&:hover {
|
||||
box-shadow: 0 1px 6px 0 #e5e5e5;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
width: 50px;
|
||||
height: 27px;
|
||||
line-height:27px;
|
||||
border-radius: 13.3px 0px 0px 13.3px;
|
||||
opacity: 1;
|
||||
background: #F31947;
|
||||
line-height: 27px;
|
||||
border-radius: 13.3px 0 0 13.3px;
|
||||
background: #f31947;
|
||||
font-size: 12.6px;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
letter-spacing: 0px;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
margin-top: 26px;
|
||||
margin-bottom:17px;
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -101,12 +101,14 @@
|
||||
v-for="(item, index) in options.right.list"
|
||||
:key="index"
|
||||
>
|
||||
<img :src="item.img" alt="" />
|
||||
<div class="img-wrap">
|
||||
<img :src="item.img" alt="" />
|
||||
<div class="jiaobiao" :class="'jiaobiao' + (index + 1)">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
</div>
|
||||
<p>{{ item.name }}</p>
|
||||
<p>{{ $filters.unitPrice(item.price, "￥") }}</p>
|
||||
<div class="jiaobiao" :class="'jiaobiao' + (index + 1)">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<el-button size="small" @click.stop="handleSelectGoods(item)"
|
||||
@@ -497,16 +499,52 @@ export default {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
img {
|
||||
border-bottom: 1px solid #eee;
|
||||
border-right: 1px solid #eee;
|
||||
.img-wrap {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
}
|
||||
.jiaobiao {
|
||||
position: absolute;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
display: block;
|
||||
background: url("../../../assets/festival_icon.png") no-repeat;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 23px;
|
||||
font-size: 12px;
|
||||
-webkit-line-clamp: unset;
|
||||
-webkit-box-orient: unset;
|
||||
}
|
||||
.jiaobiao1,
|
||||
.jiaobiao4 {
|
||||
background-position: -2px -30px;
|
||||
}
|
||||
.jiaobiao2,
|
||||
.jiaobiao5 {
|
||||
background-position: -31px -30px;
|
||||
}
|
||||
.jiaobiao3,
|
||||
.jiaobiao6 {
|
||||
background-position: -60px -30px;
|
||||
}
|
||||
}
|
||||
border-bottom: 1px solid #eee;
|
||||
border-right: 1px solid #eee;
|
||||
:nth-child(2) {
|
||||
> p:nth-child(2) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 32px;
|
||||
@@ -518,34 +556,12 @@ export default {
|
||||
-webkit-box-orient: vertical;
|
||||
text-align: center;
|
||||
}
|
||||
:nth-child(3) {
|
||||
> p:nth-child(3) {
|
||||
color: $theme_color;
|
||||
margin-top: 2px;
|
||||
line-height: 1.2;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.jiaobiao {
|
||||
position: absolute;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
background: url("../../../assets/festival_icon.png");
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.jiaobiao1,
|
||||
.jiaobiao4 {
|
||||
background-position: -2px -30px;
|
||||
}
|
||||
.jiaobiao2,
|
||||
.jiaobiao5 {
|
||||
background-position: -31px -30px;
|
||||
}
|
||||
.jiaobiao3,
|
||||
.jiaobiao6 {
|
||||
background-position: -60px -30px;
|
||||
}
|
||||
}
|
||||
> div:nth-child(3n) {
|
||||
border-right: none;
|
||||
|
||||
@@ -121,15 +121,26 @@ export default {
|
||||
selectedGoodsData(val) {
|
||||
if (!val?.length || !this.draftList) return;
|
||||
val.forEach((item) => {
|
||||
if (this.isGoodsInDraftList(item)) return;
|
||||
this.draftList.push({
|
||||
img: item.thumbnail,
|
||||
price: item.price,
|
||||
title: item.goodsName,
|
||||
desc: "",
|
||||
skuId: item.id,
|
||||
goodsId: item.goodsId,
|
||||
url: `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`,
|
||||
});
|
||||
});
|
||||
},
|
||||
isGoodsInDraftList(goods) {
|
||||
const targetUrl = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
|
||||
return this.draftList.some(
|
||||
(draft) =>
|
||||
(draft.skuId && String(draft.skuId) === String(goods.id)) ||
|
||||
(draft.url && draft.url === targetUrl)
|
||||
);
|
||||
},
|
||||
// 选择链接回调
|
||||
selectedLink(val) {
|
||||
if (!this.draftList?.length) return;
|
||||
|
||||
@@ -345,12 +345,17 @@ export default {
|
||||
width: 595px;
|
||||
.content-left {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
padding-top: 10px;
|
||||
font-size: 12px;
|
||||
box-sizing: content-box;
|
||||
> div:nth-child(1) {
|
||||
width: 189px;
|
||||
border-right: 1px solid #eee;
|
||||
height: 360px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
img {
|
||||
margin: 40px 0 0 15px;
|
||||
}
|
||||
@@ -368,15 +373,20 @@ export default {
|
||||
color: #999;
|
||||
}
|
||||
.view-btn {
|
||||
margin-left: 15px;
|
||||
margin-top: 10px;
|
||||
align-self: center;
|
||||
width: 145px;
|
||||
margin-top: auto;
|
||||
margin-bottom: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
width: 405px;
|
||||
height: 360px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -408,7 +418,7 @@ export default {
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
height: 360px;
|
||||
padding-top: 10px;
|
||||
box-sizing: border-box;
|
||||
box-sizing: content-box;
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
|
||||
@@ -26,9 +26,10 @@
|
||||
</p>
|
||||
<p>
|
||||
<el-switch
|
||||
v-model="storeInfo.storeDisable"
|
||||
v-model="storeEnabled"
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
:loading="storeStatusChanging"
|
||||
active-text="启用"
|
||||
inactive-text="禁用"
|
||||
@change="shopStatusChange"
|
||||
@@ -301,7 +302,7 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="下单时间">
|
||||
<el-date-picker
|
||||
v-model="selectDate"
|
||||
v-model="orderSelectDate"
|
||||
type="datetimerange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
clearable
|
||||
@@ -427,7 +428,7 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="申请时间">
|
||||
<el-date-picker
|
||||
v-model="selectDate"
|
||||
v-model="refundGoodsSelectDate"
|
||||
type="datetimerange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
clearable
|
||||
@@ -573,7 +574,7 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="申请时间">
|
||||
<el-date-picker
|
||||
v-model="selectDate"
|
||||
v-model="refundSelectDate"
|
||||
type="datetimerange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
clearable
|
||||
@@ -696,8 +697,12 @@ export default {
|
||||
categories: [],
|
||||
loading: true,
|
||||
storeInfo: {},
|
||||
storeEnabled: false,
|
||||
storeStatusChanging: false,
|
||||
checkAllGroup: [],
|
||||
selectDate: null,
|
||||
orderSelectDate: null,
|
||||
refundGoodsSelectDate: null,
|
||||
refundSelectDate: null,
|
||||
orderData: [],
|
||||
orderTotal: 0,
|
||||
orderSearchForm: {
|
||||
@@ -833,7 +838,7 @@ export default {
|
||||
getStoreInfo() {
|
||||
API_Store.getShopDetailData(this.id).then((res) => {
|
||||
this.storeInfo = res.result;
|
||||
this.storeInfo.storeDisable = this.storeInfo.storeDisable === "OPEN" ? true : false;
|
||||
this.storeEnabled = this.storeInfo.storeDisable === "OPEN";
|
||||
if (this.storeInfo.goodsManagementCategory != null) {
|
||||
this.checkAllGroup = this.storeInfo.goodsManagementCategory
|
||||
.split(",")
|
||||
@@ -843,11 +848,23 @@ export default {
|
||||
});
|
||||
},
|
||||
shopStatusChange(v) {
|
||||
if (v) {
|
||||
API_Store.enableBrand(this.id).then((res) => {});
|
||||
} else {
|
||||
API_Store.disableShop(this.id).then((res) => {});
|
||||
}
|
||||
this.storeStatusChanging = true;
|
||||
const request = v ? API_Store.enableBrand(this.id) : API_Store.disableShop(this.id);
|
||||
request
|
||||
.then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success("操作成功");
|
||||
this.getStoreInfo();
|
||||
} else {
|
||||
this.storeEnabled = !v;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.storeEnabled = !v;
|
||||
})
|
||||
.finally(() => {
|
||||
this.storeStatusChanging = false;
|
||||
});
|
||||
},
|
||||
getOrderData() {
|
||||
this.loading = true;
|
||||
@@ -922,21 +939,30 @@ export default {
|
||||
this.getOrderData();
|
||||
},
|
||||
selectDateRange(v) {
|
||||
if (v) {
|
||||
if (v && v.length === 2) {
|
||||
this.orderSearchForm.startDate = v[0];
|
||||
this.orderSearchForm.endDate = v[1];
|
||||
} else {
|
||||
this.orderSearchForm.startDate = "";
|
||||
this.orderSearchForm.endDate = "";
|
||||
}
|
||||
},
|
||||
selectRefundGoodsDateRange(v) {
|
||||
if (v) {
|
||||
if (v && v.length === 2) {
|
||||
this.refundGoodsOrderSearchForm.startDate = v[0];
|
||||
this.refundGoodsOrderSearchForm.endDate = v[1];
|
||||
} else {
|
||||
this.refundGoodsOrderSearchForm.startDate = "";
|
||||
this.refundGoodsOrderSearchForm.endDate = "";
|
||||
}
|
||||
},
|
||||
selectRefundDateRange(v) {
|
||||
if (v) {
|
||||
if (v && v.length === 2) {
|
||||
this.refundOrderSearchForm.startDate = v[0];
|
||||
this.refundOrderSearchForm.endDate = v[1];
|
||||
} else {
|
||||
this.refundOrderSearchForm.startDate = "";
|
||||
this.refundOrderSearchForm.endDate = "";
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
@@ -1,9 +1,3 @@
|
||||
.card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.cardBox {
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
|
||||
@@ -193,17 +193,21 @@
|
||||
width: 100%;
|
||||
height: 26px;
|
||||
background-color: #ffffff;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
color: #666666;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
|
||||
> div {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -211,6 +215,9 @@
|
||||
.custom-checkbox-card-checked {
|
||||
border: 2px solid #ff5c58;
|
||||
}
|
||||
.oss-card-selectable {
|
||||
cursor: pointer;
|
||||
}
|
||||
.text {
|
||||
width: 120px;
|
||||
height: 36px;
|
||||
|
||||
@@ -182,9 +182,13 @@
|
||||
<div v-for="(item, index) in data" :key="index" class="img-item">
|
||||
<div
|
||||
class="card"
|
||||
:class="{ 'custom-checkbox-card-checked': selectedOss.includes(item.id + ',' + item.url) }"
|
||||
:class="{
|
||||
'custom-checkbox-card-checked': selectedOss.includes(item.id + ',' + item.url),
|
||||
'oss-card-selectable': isComponent && selectImage,
|
||||
}"
|
||||
@mouseenter="onMouseOver(item, index)"
|
||||
@mouseleave="onMouseOut(item, index)"
|
||||
@click="handleCardClick(item, $event)"
|
||||
>
|
||||
<el-checkbox
|
||||
:value="item.id + ',' + item.url"
|
||||
@@ -1103,6 +1107,23 @@ export default {
|
||||
this.$emit("selected", e);
|
||||
}
|
||||
},
|
||||
handleCardClick(item, event) {
|
||||
if (!(this.isComponent && this.selectImage)) return;
|
||||
if (event?.target?.closest?.(".preview") || event?.target?.closest?.(".card-checkbox")) {
|
||||
return;
|
||||
}
|
||||
const key = `${item.id},${item.url}`;
|
||||
let next;
|
||||
if (this.maxSelect === 1) {
|
||||
next = this.selectedOss.includes(key) ? [] : [key];
|
||||
} else if (this.selectedOss.includes(key)) {
|
||||
next = this.selectedOss.filter((k) => k !== key);
|
||||
} else {
|
||||
next = [...this.selectedOss, key];
|
||||
}
|
||||
this.selectedOss = next;
|
||||
this.selectOssChange(next);
|
||||
},
|
||||
// 页码改变时回调
|
||||
pageChange(value) {
|
||||
this.selectedOss = [];
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
<template>
|
||||
<el-card class="card">
|
||||
<el-card class="sms-setting-card">
|
||||
<div class="cardBox">
|
||||
<div class="methodItem">
|
||||
<img src="../../../assets/aliyun.png" height="172" width="440" />
|
||||
@@ -82,7 +82,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.card {
|
||||
.sms-setting-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
|
||||
Reference in New Issue
Block a user