feat: ✨ 新增楼层装修 更改部分买家端UI
Yer
commit
3c296ea011
Binary file not shown.
|
After Width: | Height: | Size: 682 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -10,20 +10,28 @@ $warning_color: #ff9900;
|
||||||
$error_color: #ed3f14;
|
$error_color: #ed3f14;
|
||||||
$handle-btn-color: #438cde;
|
$handle-btn-color: #438cde;
|
||||||
|
|
||||||
$theme_color: #e4393c;
|
$theme_color: #F31947;
|
||||||
|
|
||||||
$border_color: #dddee1;
|
$border_color: #dddee1;
|
||||||
$title_color: #8c8c8c;
|
$title_color: #8c8c8c;
|
||||||
$light_title_color: #1c2438;
|
$light_title_color: #1c2438;
|
||||||
$light_content_color: #495060;
|
$light_content_color: #495060;
|
||||||
$light_sub_color: #80848f;
|
$light_sub_color: #80848f;
|
||||||
$light_background_color: #f8f8f9;
|
$light_background_color: #F5F5F7;
|
||||||
$light_white_background_color: #fff;
|
$light_white_background_color: #fff;
|
||||||
// 暗黑主题颜色
|
// 暗黑主题颜色
|
||||||
$dark_background_color: #141414;
|
$dark_background_color: #141414;
|
||||||
$dark_sub_background_color: #1d1d1d; //稍微浅一点的
|
$dark_sub_background_color: #1d1d1d; //稍微浅一点的
|
||||||
$dark_content_color: #d5d5d5;
|
$dark_content_color: #d5d5d5;
|
||||||
|
|
||||||
|
|
||||||
|
.wes-2 {
|
||||||
|
/* 适用于webkit内核和移动端 */
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
/***** 封装一些方法可用于 黑暗主题 ，明亮主题 *****/
|
/***** 封装一些方法可用于 黑暗主题 ，明亮主题 *****/
|
||||||
|
|
||||||
// 背景颜色
|
// 背景颜色
|
||||||
|
|
@ -283,10 +291,24 @@ li {
|
||||||
left: auto;
|
left: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.flex{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.flex-a-c{
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.flex-j-sb{
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.flex-j-c{
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.width_1200_auto {
|
||||||
|
width: 1184px;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="navbar" :class="{'small-search-box':useClass == 'fixed-show'}">
|
||||||
<div class="container">
|
<div class="container width_1200_auto flex flex-a-c">
|
||||||
<img
|
<img
|
||||||
:src="$store.state.logoImg"
|
:src="$store.state.logoImg"
|
||||||
v-if="showLogo"
|
v-if="showLogo"
|
||||||
|
|
@ -8,31 +8,36 @@
|
||||||
alt=""
|
alt=""
|
||||||
@click="$router.push('/')"
|
@click="$router.push('/')"
|
||||||
/>
|
/>
|
||||||
<i-input
|
<div :class="{'small-search-box':useClass == 'fixed-show'}" class="search-box">
|
||||||
v-model="searchData"
|
<i-input
|
||||||
size="large"
|
v-model="searchData"
|
||||||
class="search"
|
size="large"
|
||||||
placeholder="输入你想查找的商品"
|
class="search "
|
||||||
@keyup.enter.native="search"
|
placeholder="输入你想查找的商品"
|
||||||
>
|
@keyup.enter.native="search"
|
||||||
<Button v-if="!store" slot="append" @click="search">搜索</Button>
|
>
|
||||||
</i-input>
|
|
||||||
<div v-if="store" class="btn-div">
|
<div class="search-icon" slot="append" @click="search">
|
||||||
<Button class="store-search" type="warning" @click="searchStore">搜本店</Button>
|
<Icon type="ios-search" size="21"/>
|
||||||
<Button class="store-search" type="primary" @click="search">搜全站</Button>
|
</div>
|
||||||
</div>
|
</i-input>
|
||||||
<template v-if="showTag">
|
<div v-if="store" class="btn-div">
|
||||||
<div style="height:12px" v-if="promotionTags.length === 0"></div>
|
<Button class="store-search" type="warning" @click="searchStore">搜本店</Button>
|
||||||
<div v-else>
|
<Button class="store-search" type="primary" @click="search">搜全站</Button>
|
||||||
<Tag
|
|
||||||
v-for="(item, index) in promotionTags"
|
|
||||||
:key="index"
|
|
||||||
class="mr_10"
|
|
||||||
>
|
|
||||||
<span class="hover-color" @click="selectTags(item)">{{ item }}</span>
|
|
||||||
</Tag>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
<template v-if="showTag">
|
||||||
|
<div style="height:12px" v-if="promotionTags.length === 0"></div>
|
||||||
|
<div v-else class="history-list flex">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in promotionTags"
|
||||||
|
:key="index"
|
||||||
|
class="mr_10"
|
||||||
|
>
|
||||||
|
<span class="history-item" @click="selectTags(item)">{{ item }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -40,6 +45,7 @@
|
||||||
<script>
|
<script>
|
||||||
import storage from '@/plugins/storage.js'
|
import storage from '@/plugins/storage.js'
|
||||||
import {hotWords} from '@/api/goods.js'
|
import {hotWords} from '@/api/goods.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'search',
|
name: 'search',
|
||||||
props: {
|
props: {
|
||||||
|
|
@ -58,15 +64,19 @@ export default {
|
||||||
hover: {
|
hover: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
},
|
||||||
|
useClass:{
|
||||||
|
type:null,
|
||||||
|
default:''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
searchData: '' // 搜索内容
|
searchData: '' // 搜索内容
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
selectTags (item) { // 选择热门标签
|
selectTags(item) { // 选择热门标签
|
||||||
this.searchData = item;
|
this.searchData = item;
|
||||||
this.search();
|
this.search();
|
||||||
},
|
},
|
||||||
|
|
@ -81,12 +91,12 @@ export default {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
searchStore () { // 店铺搜索商品
|
searchStore() { // 店铺搜索商品
|
||||||
this.$emit('search', this.searchData)
|
this.$emit('search', this.searchData)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
promotionTags () {
|
promotionTags() {
|
||||||
if (this.$store.state.hotWordsList) {
|
if (this.$store.state.hotWordsList) {
|
||||||
return JSON.parse(this.$store.state.hotWordsList)
|
return JSON.parse(this.$store.state.hotWordsList)
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -94,7 +104,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created() {
|
||||||
this.searchData = this.$route.query.keyword
|
this.searchData = this.$route.query.keyword
|
||||||
if (!this.hover) { // 首页顶部固定搜索栏不调用热词接口
|
if (!this.hover) { // 首页顶部固定搜索栏不调用热词接口
|
||||||
// 搜索热词每5分钟请求一次
|
// 搜索热词每5分钟请求一次
|
||||||
|
|
@ -116,27 +126,61 @@ export default {
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.container {
|
.navbar {
|
||||||
margin: 30px auto;
|
height: 113px;
|
||||||
width: 460px;
|
background: #fff;
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
|
.small-search-box{
|
||||||
|
height: 60px;
|
||||||
|
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
|
width: 778.4px;
|
||||||
margin: 10px 0px 5px 0;
|
margin: 10px 0px 5px 0;
|
||||||
|
|
||||||
|
border-radius: 18.9px;
|
||||||
|
|
||||||
|
|
||||||
/deep/ .ivu-input.ivu-input-large {
|
/deep/ .ivu-input.ivu-input-large {
|
||||||
border: 2px solid $theme_color;
|
border: 1.4px solid $theme_color;
|
||||||
font-size: 12px;
|
box-sizing: border-box;
|
||||||
height: 34px;
|
border-radius: 19.6px;
|
||||||
|
position: relative;
|
||||||
|
padding-left: 26px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: normal;
|
||||||
|
height: 37.8px;
|
||||||
|
color: #999;
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ .ivu-input-group-append {
|
/deep/ .ivu-input-group-append {
|
||||||
border: 1px solid $theme_color;
|
border-radius: 19.6px !important;
|
||||||
border-left: none;
|
cursor: pointer;
|
||||||
height: 30px;
|
box-sizing: border-box;
|
||||||
|
border: 1.4px solid $theme_color;
|
||||||
|
width: 67.2px;
|
||||||
|
height: 37.8px;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
top: 0;
|
||||||
|
z-index: 99;
|
||||||
background-color: $theme_color;
|
background-color: $theme_color;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
@ -144,28 +188,46 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.search-box{
|
||||||
|
margin-left: 28px;
|
||||||
|
}
|
||||||
.logo-img {
|
.logo-img {
|
||||||
position: absolute;
|
|
||||||
left: -360px;
|
|
||||||
top: -9px;
|
|
||||||
max-width: 150px;
|
max-width: 150px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.store-search{
|
|
||||||
width:55.6px;
|
.store-search {
|
||||||
|
width: 55.6px;
|
||||||
padding: 0 9px;
|
padding: 0 9px;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
&:nth-child(2){
|
|
||||||
width:55px;
|
&:nth-child(2) {
|
||||||
|
width: 55px;
|
||||||
margin-left: -2px;
|
margin-left: -2px;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.btn-div{
|
|
||||||
|
.btn-div {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 0px;
|
height: 0px;
|
||||||
top: -38px;
|
top: -38px;
|
||||||
left: 352px;
|
left: 352px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.history-list {
|
||||||
|
margin-top: 2px;
|
||||||
|
margin-left: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.history-item {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 16px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
margin-right: 17px;
|
||||||
|
color: #666666;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,117 @@
|
||||||
|
<template>
|
||||||
|
<div class="shadow-box">
|
||||||
|
<div class="shadow-item flex flex-a-c flex-j-c" v-for="(item,index) in iconList" @click="handleClickIcon(item)" :key="index">
|
||||||
|
<img class="icon" :src="require(`@/assets/iconfont/${item.icon}.png`)">
|
||||||
|
<div class="shadow-label">{{item.label}}</div>
|
||||||
|
<div class="line" v-if="iconList.length-1 !=index"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "fixed-index",
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
iconList:[
|
||||||
|
{
|
||||||
|
icon:"user",
|
||||||
|
label:"会员中心",
|
||||||
|
path:"/home"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon:"carts",
|
||||||
|
label:"购物车",
|
||||||
|
path:"/cart"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon:"notification",
|
||||||
|
label:"消息",
|
||||||
|
path:"/home/MsgList"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon:"collage",
|
||||||
|
label:"收藏",
|
||||||
|
path:"/home/Favorites"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon:"back",
|
||||||
|
label:"顶部",
|
||||||
|
path:"back"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
isScrolling:false,
|
||||||
|
timeoutId:"",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 添加滚轮事件监听器
|
||||||
|
window.addEventListener('wheel', function() {
|
||||||
|
if (this.isScrolling) {
|
||||||
|
// 如果页面正在滚动，则取消定时器并设置 isScrolling 为 false
|
||||||
|
window.cancelAnimationFrame(this.timeoutId);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
scrollToTop() {
|
||||||
|
const c = document.documentElement.scrollTop || document.body.scrollTop;
|
||||||
|
if (c > 0) {
|
||||||
|
this.timeoutId = window.requestAnimationFrame(this.scrollToTop);
|
||||||
|
window.scrollTo(0, c - c / 4);
|
||||||
|
this.isScrolling = true;
|
||||||
|
}else {
|
||||||
|
this.isScrolling = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleClickIcon(val){
|
||||||
|
if(val.path === 'back'){
|
||||||
|
this.scrollToTop()
|
||||||
|
}else{
|
||||||
|
this.$router.push(val.path)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.shadow-box{
|
||||||
|
width: 64px;
|
||||||
|
height: 354px;
|
||||||
|
border-radius: 10px;
|
||||||
|
opacity: 1;
|
||||||
|
|
||||||
|
background: #FFFFFF;
|
||||||
|
|
||||||
|
box-shadow: 0px 1px 10px 0px rgba(154, 154, 154, 0.5);
|
||||||
|
}
|
||||||
|
.shadow-label{
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 16px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
.icon{
|
||||||
|
margin-top: 15px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.shadow-item{
|
||||||
|
cursor: pointer;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 70px;
|
||||||
|
>.line{
|
||||||
|
width: 34px;
|
||||||
|
height: 1px;
|
||||||
|
opacity: 1;
|
||||||
|
margin-top: 17px;
|
||||||
|
border: 0.7px solid #EAEAEA;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -3,20 +3,20 @@
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<div class="clearfix"></div>
|
<div class="clearfix"></div>
|
||||||
<div class="icon-row">
|
<div class="icon-row">
|
||||||
<div class="footer-icon">
|
<div class="footer-icon flex flex-a-c">
|
||||||
<h5 class="footer-icon-child"></h5>
|
<h5 class="footer-icon-child">多</h5>
|
||||||
<span class="footer-icon-text">品类齐全，轻松购物</span>
|
<span class="footer-icon-text">品类齐全，轻松购物</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-icon">
|
<div class="footer-icon flex flex-a-c">
|
||||||
<h5 class="footer-icon-child footer-icon-child-2"></h5>
|
<h5 class="footer-icon-child footer-icon-child-2">块</h5>
|
||||||
<span class="footer-icon-text">多仓直发，极速配送</span>
|
<span class="footer-icon-text">多仓直发，极速配送</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-icon">
|
<div class="footer-icon flex flex-a-c">
|
||||||
<h5 class="footer-icon-child footer-icon-child-3"></h5>
|
<h5 class="footer-icon-child footer-icon-child-3">好</h5>
|
||||||
<span class="footer-icon-text">正品行货，精致服务</span>
|
<span class="footer-icon-text">正品行货，精致服务</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-icon">
|
<div class="footer-icon flex flex-a-c">
|
||||||
<h5 class="footer-icon-child footer-icon-child-4"></h5>
|
<h5 class="footer-icon-child footer-icon-child-4">省</h5>
|
||||||
<span class="footer-icon-text">天天低价，畅选无忧</span>
|
<span class="footer-icon-text">天天低价，畅选无忧</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -37,27 +37,28 @@
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
<div class="icp">
|
|
||||||
<li v-if="config.icpCard">
|
|
||||||
<a :href='"https://tsm.miit.gov.cn/dxxzsp/xkz/xkzgl/resource/qiyesearch.jsp?num="+config.icpCard+"&type=xuke"' target="_blank">
|
|
||||||
{{config.icpCard}}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li v-if="config.icpMessage" class="footer-bottmom">
|
|
||||||
<a href="https://beian.miit.gov.cn/" target="_blank">
|
|
||||||
{{config.icpMessage}}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="information footer-bottmom">
|
|
||||||
|
|
||||||
<a class="flex " :href="config.company.href">
|
|
||||||
<img class="zhizhao" src="@/assets/images/zhizhao.jpg" mode="" />{{config.company.name}}
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="information footer-bottmom">
|
||||||
|
<div class="icp">
|
||||||
|
<li v-if="config.icpCard">
|
||||||
|
<a :href='"https://tsm.miit.gov.cn/dxxzsp/xkz/xkzgl/resource/qiyesearch.jsp?num="+config.icpCard+"&type=xuke"' target="_blank">
|
||||||
|
{{config.icpCard}}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li v-if="config.icpMessage" class="footer-bottmom">
|
||||||
|
<a href="https://beian.miit.gov.cn/" target="_blank">
|
||||||
|
{{config.icpMessage}}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
<a class="flex " :href="config.company.href">
|
||||||
|
<img class="zhizhao" src="@/assets/images/zhizhao.jpg" mode="" />{{config.company.name}}
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="clearfix"></div>
|
<div class="clearfix"></div>
|
||||||
<div class="copyright">
|
<div class="copyright">
|
||||||
<p>Copyright © {{year}} {{config.title}}</p>
|
<p>Copyright © {{year}} {{config.title}}</p>
|
||||||
|
|
@ -77,7 +78,7 @@ export default {
|
||||||
guideArr: [
|
guideArr: [
|
||||||
// 导航链接
|
// 导航链接
|
||||||
["购物指南", "购物流程", "会员介绍", "生活旅行", "常见问题"],
|
["购物指南", "购物流程", "会员介绍", "生活旅行", "常见问题"],
|
||||||
["配送方式", "上门自提", "配送服务查询", "收取标准", "物流规则"],
|
["配送方式", "上门自提", "配送查询", "收取标准", "物流规则"],
|
||||||
["支付方式", "在线支付", "公司转账", "余额支付", "积分支付"],
|
["支付方式", "在线支付", "公司转账", "余额支付", "积分支付"],
|
||||||
["售后服务", "售后政策", "退款说明", "返修/退货", "取消订单"],
|
["售后服务", "售后政策", "退款说明", "返修/退货", "取消订单"],
|
||||||
],
|
],
|
||||||
|
|
@ -101,40 +102,36 @@ export default {
|
||||||
/*****************************底 部 开 始*****************************/
|
/*****************************底 部 开 始*****************************/
|
||||||
.footer {
|
.footer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-top: 30px;
|
height: 370px;
|
||||||
|
background: #FFFFFF;
|
||||||
@include background_color($light_background_color);
|
|
||||||
}
|
}
|
||||||
.icon-row {
|
.icon-row {
|
||||||
margin: 15px auto;
|
display: flex;
|
||||||
padding-top: 8px;
|
align-items: center;
|
||||||
width: 1000px;
|
justify-content: space-between;
|
||||||
height: 64px;
|
width: 1056px;
|
||||||
|
height: 71px;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
.footer-icon {
|
.footer-icon {
|
||||||
margin-left: 17px;
|
|
||||||
margin-right: 17px;
|
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
.footer-icon-child {
|
.footer-icon-child {
|
||||||
margin-top: 10px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: absolute;
|
width: 36.4px;
|
||||||
width: 36px;
|
display: flex;
|
||||||
height: 42px;
|
align-items: center;
|
||||||
background-image: url("../../assets/images/footer/ico_service.png");
|
justify-content: center;
|
||||||
text-indent: -999px;
|
font-size: 18.2px;
|
||||||
}
|
font-weight: normal;
|
||||||
.footer-icon-child-2 {
|
color: #333;
|
||||||
background-position: 0 -43px;
|
height: 36.4px;
|
||||||
}
|
border: 1.4px solid #CECECE;
|
||||||
.footer-icon-child-3 {
|
border-radius: 50%;
|
||||||
background-position: 0 -86px;
|
|
||||||
}
|
|
||||||
.footer-icon-child-4 {
|
|
||||||
background-position: 0 -129px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.icp {
|
.icp {
|
||||||
|
margin-right: 30px !important;
|
||||||
>*{
|
>*{
|
||||||
margin: 0 4px;
|
margin: 0 4px;
|
||||||
}
|
}
|
||||||
|
|
@ -148,59 +145,69 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.footer-icon-text {
|
.footer-icon-text {
|
||||||
margin-left: 45px;
|
margin-left: 11px;
|
||||||
font-size: 18px;
|
font-size: 16px;
|
||||||
font-weight: bold;
|
|
||||||
line-height: 64px;
|
font-weight: normal;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
.service-intro {
|
.service-intro {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-top: 1px solid $border_color;
|
border-top: 1px solid $border_color;
|
||||||
}
|
}
|
||||||
.servece-type {
|
.servece-type {
|
||||||
margin: 15px auto;
|
width: 952px;
|
||||||
width: 800px;
|
margin: 22px auto 10px auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.servece-type-info{
|
||||||
|
|
||||||
|
}
|
||||||
.servece-type-info ul {
|
.servece-type-info ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.servece-type-info li {
|
.servece-type-info li {
|
||||||
font-size: 14px;
|
font-size: 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
line-height: 26px;
|
font-weight: normal;
|
||||||
}
|
line-height: 15px;
|
||||||
.servece-type-info li:hover{
|
text-align: center;
|
||||||
color:#b8b8be;
|
margin-bottom: 13px;
|
||||||
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.servece-type-info li:first-child {
|
.servece-type-info li:first-child {
|
||||||
font-size: 16px;
|
font-size: 14.82px;
|
||||||
line-height: 28px;
|
font-weight: normal;
|
||||||
font-weight: bold;
|
line-height: 18px;
|
||||||
}
|
|
||||||
.servece-type-info li:first-child:hover{
|
letter-spacing: 0px;
|
||||||
// font-size:15px;
|
margin-bottom: 17px;
|
||||||
// font-weight: bold;
|
color: #333333;
|
||||||
color:#b8b8be;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.friend-link {
|
.friend-link {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: space-between;
|
justify-content: center;
|
||||||
width: 908px;
|
width: 908px;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
margin: 0px auto;
|
margin: 0px auto;
|
||||||
border-top: 1px solid $border_color;
|
border-top: 1px solid $border_color;
|
||||||
}
|
}
|
||||||
.information {
|
.information {
|
||||||
|
margin-top: 23px;
|
||||||
|
margin-bottom: 21px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
justify-content: center;
|
||||||
> * {
|
|
||||||
margin: 2px 0;
|
}
|
||||||
}
|
a{
|
||||||
|
color: #3457FF;
|
||||||
}
|
}
|
||||||
.zhizhao {
|
.zhizhao {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
|
|
@ -213,35 +220,38 @@ export default {
|
||||||
.friend-link-item li {
|
.friend-link-item li {
|
||||||
padding: 5px 0px;
|
padding: 5px 0px;
|
||||||
float: left;
|
float: left;
|
||||||
|
margin-right: 59px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 13px;
|
||||||
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.friend-link-item li:hover{
|
|
||||||
color:#b8b8be;
|
|
||||||
margin-top:-2px;
|
|
||||||
}
|
|
||||||
.footer-bottmom:hover{
|
|
||||||
margin-top:0 !important;
|
|
||||||
}
|
|
||||||
.footer-bottmom>a:hover{
|
|
||||||
color:#e4393c;
|
|
||||||
}
|
|
||||||
.link-item {
|
.link-item {
|
||||||
padding: 0px 8px;
|
padding: 0px 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-right: 1px solid $border_color;
|
|
||||||
}
|
}
|
||||||
.link-last-item {
|
.link-last-item {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
.copyright {
|
.copyright {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
line-height: 30px;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
height:25px;
|
||||||
|
opacity: 1;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 13px;
|
||||||
|
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #959595;
|
||||||
}
|
}
|
||||||
.copyright a {
|
|
||||||
color: #232323;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
.footer-icon-text {
|
.footer-icon-text {
|
||||||
@include title_color($light_title_color);
|
@include title_color($light_title_color);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,32 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="nav">
|
<div class="nav width_1200_auto">
|
||||||
<ul class="location">
|
<ul class="location flex">
|
||||||
<li v-if="$route.path.includes('home')" style="margin-left:10px"><router-link to="/">首页</router-link></li>
|
<li v-if="$route.path.includes('home')" style="margin-left:10px">
|
||||||
|
<router-link to="/">首页</router-link>
|
||||||
|
</li>
|
||||||
|
<ul class="flex">
|
||||||
|
<li>Hi，欢迎来到{{ config.title }}</li>
|
||||||
|
<li class="first" v-show="!userInfo.username">
|
||||||
|
<router-link :to="`/signUp`" class="nav-item">
|
||||||
|
<span>立即注册</span>
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li v-show="!userInfo.username">
|
||||||
|
<router-link class="nav-item" :to="`/login?rePath=${$route.path}&query=${JSON.stringify($route.query)}`">
|
||||||
|
<span>请登录</span>
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</ul>
|
</ul>
|
||||||
<ul class="detail">
|
<ul class="detail flex">
|
||||||
<li class="first" v-show="!userInfo.username">
|
|
||||||
<router-link :to="`/signUp`">
|
|
||||||
<span style="border:none">立即注册</span>
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
<li v-show="!userInfo.username">
|
|
||||||
<router-link :to="`/login?rePath=${$route.path}&query=${JSON.stringify($route.query)}`">
|
|
||||||
<span style="border:none">请登录</span>
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
<li v-show="!!userInfo.username">
|
<li v-show="!!userInfo.username">
|
||||||
<div class="username-p">
|
<div class="username-p">
|
||||||
<div>
|
<div>
|
||||||
<Avatar class="person-icon" :src="userInfo.face" icon="person" size="small" />
|
<Avatar class="person-icon" :src="userInfo.face" icon="person" size="small"/>
|
||||||
<span class="username">{{ userInfo.nickName? userInfo.nickName : userInfo.username | secrecyMobile }}</span>
|
<span class="username">{{
|
||||||
|
userInfo.nickName ? userInfo.nickName : userInfo.username | secrecyMobile
|
||||||
|
}}</span>
|
||||||
</div>
|
</div>
|
||||||
<transition name='fade'>
|
<transition name='fade'>
|
||||||
<ul class="drop-items">
|
<ul class="drop-items">
|
||||||
|
|
@ -31,16 +38,15 @@
|
||||||
</transition>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li @click="goUserCenter('/home/MyOrder')"><span class="nav-item hover-color">我的订单</span></li>
|
<li @click="goUserCenter('/home/MyOrder')"><span class="nav-item">我的订单</span></li>
|
||||||
<li @click="goUserCenter('/home/MyTracks')"><span class="nav-item hover-color">我的足迹</span></li>
|
<li @click="goUserCenter('/home/MyTracks')"><span class="nav-item">我的足迹</span></li>
|
||||||
<li @click="goUserCenter('/home/MsgList')"><span class="nav-item hover-color">我的消息</span></li>
|
<li @click="goUserCenter('/home/MsgList')"><span class="nav-item">我的消息</span></li>
|
||||||
<li v-if="$route.name !== 'Cart'" style="position:relative;">
|
<li v-if="$route.name !== 'Cart'" style="position:relative;">
|
||||||
<i class="cart-badge" v-show="Number(cartNum)">{{cartNum < 100 ? cartNum : '99'}}</i>
|
|
||||||
<Dropdown placement="bottom-start">
|
<Dropdown placement="bottom-start">
|
||||||
<router-link to="/cart" target="_blank">
|
<router-link to="/cart" target="_blank">
|
||||||
<span @mouseenter="getCartList">
|
<span class="nav-item" @mouseenter="getCartList">
|
||||||
<Icon size="18" type="ios-cart-outline"></Icon>
|
<Icon size="18" type="ios-cart-outline"></Icon>
|
||||||
购物车
|
购物车（{{ cartNum < 100 ? cartNum : '99' }}）
|
||||||
</span>
|
</span>
|
||||||
</router-link>
|
</router-link>
|
||||||
<DropdownMenu slot="list">
|
<DropdownMenu slot="list">
|
||||||
|
|
@ -52,25 +58,25 @@
|
||||||
<div class="shopping-cart-list" v-show="shoppingCart.length > 0">
|
<div class="shopping-cart-list" v-show="shoppingCart.length > 0">
|
||||||
<div class="shopping-cart-box" v-for="(item, index) in shoppingCart" @click="goToPay" :key="index">
|
<div class="shopping-cart-box" v-for="(item, index) in shoppingCart" @click="goToPay" :key="index">
|
||||||
<div class="shopping-cart-img">
|
<div class="shopping-cart-img">
|
||||||
<img :src="item.goodsSku.thumbnail" class="hover-pointer" />
|
<img :src="item.goodsSku.thumbnail" class="hover-pointer"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="shopping-cart-info">
|
<div class="shopping-cart-info">
|
||||||
<div class="shopping-cart-title ">
|
<div class="shopping-cart-title ">
|
||||||
<p class="hover-pointer goods-title ellipsis">{{ item.goodsSku.goodsName }}</p>
|
<p class="hover-pointer goods-title ellipsis">{{ item.goodsSku.goodsName }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="shopping-cart-detail">
|
<div class="shopping-cart-detail">
|
||||||
<p>
|
<div>
|
||||||
数量:
|
数量:
|
||||||
<span class="shopping-cart-text">{{ item.num }}</span>
|
<span class="shopping-cart-text">{{ item.num }}</span>
|
||||||
价钱:
|
|
||||||
<span class="shopping-cart-text">{{ item.purchasePrice | unitPrice('￥') }}</span>
|
</div>
|
||||||
</p>
|
<div class="shopping-price">
|
||||||
|
{{ item.purchasePrice | unitPrice('￥') }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="go-to-buy">
|
|
||||||
<Button type="error" size="small" @click="goToPay">去结账</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
|
|
@ -78,6 +84,7 @@
|
||||||
<li>
|
<li>
|
||||||
<span class="nav-item" @click="shopEntry">店铺入驻</span>
|
<span class="nav-item" @click="shopEntry">店铺入驻</span>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -85,42 +92,45 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import storage from '@/plugins/storage.js';
|
import storage from '@/plugins/storage.js';
|
||||||
import { cartGoodsAll } from '@/api/cart.js';
|
import {cartGoodsAll} from '@/api/cart.js';
|
||||||
import { logout } from '@/api/account.js';
|
import {logout} from '@/api/account.js';
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'M-Header',
|
name: 'M-Header',
|
||||||
created () {
|
created() {
|
||||||
if (storage.getItem('userInfo')) {
|
if (storage.getItem('userInfo')) {
|
||||||
this.userInfo = JSON.parse(storage.getItem('userInfo'));
|
this.userInfo = JSON.parse(storage.getItem('userInfo'));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
config: require('@/config'),
|
||||||
userInfo: {}, // 用户信息
|
userInfo: {}, // 用户信息
|
||||||
shoppingCart: [] // 购物车
|
shoppingCart: [] // 购物车
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
// 购物车商品数量
|
// 购物车商品数量
|
||||||
cartNum () {
|
cartNum() {
|
||||||
return this.$store.state.cartNum;
|
return this.$store.state.cartNum;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
goToPay () { // 跳转购物车
|
goToPay() { // 跳转购物车
|
||||||
let url = this.$router.resolve({
|
let url = this.$router.resolve({
|
||||||
path: '/cart'
|
path: '/cart'
|
||||||
});
|
});
|
||||||
window.open(url.href, '_blank');
|
window.open(url.href, '_blank');
|
||||||
},
|
},
|
||||||
myInfo () { // 跳转会员中心
|
myInfo() { // 跳转会员中心
|
||||||
let url = this.$router.resolve({
|
let url = this.$router.resolve({
|
||||||
path: '/home'
|
path: '/home'
|
||||||
});
|
});
|
||||||
window.open(url.href, '_blank');
|
window.open(url.href, '_blank');
|
||||||
},
|
},
|
||||||
signOutFun () { // 退出登录
|
signOutFun() { // 退出登录
|
||||||
logout().then(res => {
|
logout().then(res => {
|
||||||
storage.removeItem('accessToken');
|
storage.removeItem('accessToken');
|
||||||
storage.removeItem('refreshToken');
|
storage.removeItem('refreshToken');
|
||||||
|
|
@ -130,10 +140,10 @@ export default {
|
||||||
this.$router.push('/login');
|
this.$router.push('/login');
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
goUserCenter (path) {
|
goUserCenter(path) {
|
||||||
// 跳转我的订单，我的足迹、收藏等
|
// 跳转我的订单，我的足迹、收藏等
|
||||||
if (this.userInfo.username) {
|
if (this.userInfo.username) {
|
||||||
this.$router.push({ path: path });
|
this.$router.push({path: path});
|
||||||
} else {
|
} else {
|
||||||
this.$Modal.confirm({
|
this.$Modal.confirm({
|
||||||
title: '请登录',
|
title: '请登录',
|
||||||
|
|
@ -152,19 +162,19 @@ export default {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
shopEntry () {
|
shopEntry() {
|
||||||
// 店铺入驻
|
// 店铺入驻
|
||||||
if (storage.getItem('accessToken')) {
|
if (storage.getItem('accessToken')) {
|
||||||
let routeUrl = this.$router.resolve({
|
let routeUrl = this.$router.resolve({
|
||||||
path: '/shopEntry',
|
path: '/shopEntry',
|
||||||
query: { id: 1 }
|
query: {id: 1}
|
||||||
});
|
});
|
||||||
window.open(routeUrl.href, '_blank');
|
window.open(routeUrl.href, '_blank');
|
||||||
} else {
|
} else {
|
||||||
this.$router.push('login');
|
this.$router.push('login');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getCartList () {
|
getCartList() {
|
||||||
// 获取购物车列表
|
// 获取购物车列表
|
||||||
if (this.userInfo.username) {
|
if (this.userInfo.username) {
|
||||||
cartGoodsAll().then((res) => {
|
cartGoodsAll().then((res) => {
|
||||||
|
|
@ -179,106 +189,88 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.shopping-cart-detail,
|
|
||||||
.shopping-cart-text,
|
|
||||||
.shopping-cart-info,
|
|
||||||
.nav a,
|
|
||||||
.location,
|
|
||||||
.first,
|
|
||||||
.username,
|
|
||||||
.shopping-cart-null span {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 12px!important;
|
font-size: 12px !important;
|
||||||
// height: 35px;
|
height: 36px;
|
||||||
@include background_color($light_white_background_color);
|
background: #333;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
margin: 0 auto;
|
|
||||||
width: 1200px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav ul {
|
.nav ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav li {
|
.nav li {
|
||||||
|
cursor: pointer;
|
||||||
float: left;
|
float: left;
|
||||||
font-size: 12px;
|
line-height: 36px;
|
||||||
line-height: 35px;
|
margin-right: 15px;
|
||||||
margin-right: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav a,
|
.nav a,
|
||||||
.nav-item {
|
.nav-item {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: normal;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
padding-left: 14px;
|
|
||||||
border-left: 1px solid #ccc;
|
|
||||||
color: #999;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.location a {
|
.location a {
|
||||||
border-left: none;
|
border-left: none;
|
||||||
}
|
}
|
||||||
.nav a:hover {
|
|
||||||
color: $theme_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
color: gray;
|
color: gray;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.first a:first-child {
|
|
||||||
padding-left: 3px;
|
|
||||||
border-left: none;
|
|
||||||
}
|
|
||||||
.city {
|
.city {
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.city-item {
|
.city-item {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.city-item:hover {
|
.city-item:hover {
|
||||||
color: $theme_color;
|
color: $theme_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.person-icon {
|
.person-icon {
|
||||||
color: $theme_color;
|
color: $theme_color;
|
||||||
background-color: #f0cdb2;
|
background-color: #f0cdb2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shopping-cart-list {
|
|
||||||
padding: 10px 15px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
max-height: 300px;
|
|
||||||
overflow: scroll;
|
|
||||||
}
|
|
||||||
.shopping-cart-box {
|
|
||||||
margin: 8px 0px;
|
|
||||||
margin-top: 15px;
|
|
||||||
padding-bottom: 15px;
|
|
||||||
height: 40px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
border-bottom: 1px #ccc dotted;
|
|
||||||
}
|
|
||||||
.shopping-cart-box:first-child {
|
|
||||||
margin-top: 8px;
|
|
||||||
}
|
|
||||||
.shopping-cart-img {
|
.shopping-cart-img {
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shopping-cart-img img {
|
.shopping-cart-img img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shopping-cart-info {
|
.shopping-cart-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -290,10 +282,7 @@ export default {
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.go-to-buy {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
.shopping-cart-null {
|
.shopping-cart-null {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -301,22 +290,28 @@ export default {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cart-null-icon {
|
.cart-null-icon {
|
||||||
font-size: 38px;
|
font-size: 38px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shopping-cart-null span {
|
.shopping-cart-null span {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.username-p {
|
.username-p {
|
||||||
position: relative;
|
position: relative;
|
||||||
div{
|
|
||||||
|
div {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
>span{
|
|
||||||
|
> span {
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.drop-items {
|
.drop-items {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -335,19 +330,21 @@ export default {
|
||||||
li {
|
li {
|
||||||
color: rgb(107, 106, 106);
|
color: rgb(107, 106, 106);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-bottom:1px solid rgb(207, 206, 206);
|
border-bottom: 1px solid rgb(207, 206, 206);
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
&:last-child{
|
|
||||||
|
&:last-child {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
&:hover{
|
|
||||||
|
&:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: $theme_color;
|
color: $theme_color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before{
|
&::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -20px;
|
top: -20px;
|
||||||
left: 30px;
|
left: 30px;
|
||||||
|
|
@ -355,10 +352,10 @@ export default {
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
border: 10px solid #999;
|
border: 10px solid #999;
|
||||||
border-color: transparent transparent #fff transparent ;
|
border-color: transparent transparent #fff transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after{
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 80px;
|
width: 80px;
|
||||||
|
|
@ -367,8 +364,9 @@ export default {
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:hover{
|
|
||||||
.drop-items{
|
&:hover {
|
||||||
|
.drop-items {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -382,11 +380,13 @@ export default {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-page a {
|
.my-page a {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-info {
|
.my-info {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
|
|
@ -394,15 +394,19 @@ export default {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-info:hover {
|
.my-info:hover {
|
||||||
box-shadow: 0px 0px 5px #ccc;
|
box-shadow: 0px 0px 5px #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-info i {
|
.my-info i {
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-info p {
|
.my-info p {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sign-out {
|
.sign-out {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
|
|
@ -410,18 +414,23 @@ export default {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sign-out:hover {
|
.sign-out:hover {
|
||||||
box-shadow: 0px 0px 5px $border_color;
|
box-shadow: 0px 0px 5px $border_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sign-out i {
|
.sign-out i {
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sign-out p {
|
.sign-out p {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.goods-title:hover {
|
.goods-title:hover {
|
||||||
color: $theme_color;
|
color: $theme_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cart-badge {
|
.cart-badge {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: -8px;
|
right: -8px;
|
||||||
|
|
@ -437,4 +446,34 @@ export default {
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
top: 3px;
|
top: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.shopping-cart-box {
|
||||||
|
padding: 8px 0;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px #ccc dotted;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shopping-cart-list {
|
||||||
|
padding: 10px 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
max-height: 300px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
color: #333;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.shopping-cart-detail {
|
||||||
|
color: #999;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.shopping-price {
|
||||||
|
color: $theme_color;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="shop-box">
|
|
||||||
<div class="shop-container">
|
|
||||||
<div class="shop-title-content">
|
|
||||||
<img class="hover-pointer" @click="linkTo(`/merchant?id=${storeDetail.storeId}`)" :src="storeDetail.storeLogo" height="40" alt="">
|
|
||||||
<p><router-link :to="`/merchant?id=${storeDetail.storeId}`">{{ storeDetail.storeName }}</router-link></p>
|
|
||||||
<div class="ml_20" v-html="storeDetail.storeDesc"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'ShopHeader',
|
|
||||||
props: {
|
|
||||||
detail: {
|
|
||||||
type: Object,
|
|
||||||
default: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
storeDetail () { // 店铺详情
|
|
||||||
return this.detail;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
/* 店铺介绍 */
|
|
||||||
.shop-box {
|
|
||||||
width: 100%;
|
|
||||||
height: 50px;
|
|
||||||
background-color: #484848;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shop-container {
|
|
||||||
width: 1200px;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0px auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shop-title-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shop-title-content p {
|
|
||||||
font-size: 20px;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
.shop-title-content a {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,22 +1,27 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="scroll-show">
|
<div class="scroll-show">
|
||||||
<div class="content clearfix">
|
<div class="content clearfix">
|
||||||
<cateNav class="cate" :hover="true" :showNavBar="false"></cateNav>
|
<cateNav class="cate" :hover="true" :showNavBar="false"
|
||||||
|
useClass="fixed-show"></cateNav>
|
||||||
<Search
|
<Search
|
||||||
class="search-con"
|
class="search-con"
|
||||||
:hover="true"
|
:hover="true"
|
||||||
|
ref="search"
|
||||||
:showLogo="false"
|
:showLogo="false"
|
||||||
:showTag="false"
|
:showTag="false"
|
||||||
|
useClass="fixed-show"
|
||||||
></Search>
|
></Search>
|
||||||
<Icon
|
<div class="flex flex-a-c cart">
|
||||||
type="ios-cart-outline"
|
<Icon
|
||||||
@click="goCartList"
|
type="ios-cart-outline"
|
||||||
class="cart-icon"
|
@click="goCartList"
|
||||||
@mouseenter.native="getCartList"
|
class="cart-icon"
|
||||||
/>
|
@mouseenter.native="getCartList"
|
||||||
<i class="cart-badge">{{ cartNum < 100 ? cartNum : "99" }}</i>
|
/>
|
||||||
|
<i class="cart-badge">{{ cartNum < 100 ? cartNum : "99" }}</i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr class="hr"/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -53,6 +58,7 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
if (storage.getItem("userInfo")) {
|
if (storage.getItem("userInfo")) {
|
||||||
this.userInfo = JSON.parse(storage.getItem("userInfo"));
|
this.userInfo = JSON.parse(storage.getItem("userInfo"));
|
||||||
}
|
}
|
||||||
|
|
@ -60,14 +66,11 @@ export default {
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.hr{
|
|
||||||
height:1px;
|
|
||||||
background:$theme_color;
|
|
||||||
}
|
|
||||||
.content {
|
.content {
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
margin: 10px auto;
|
margin: 0 auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.cate {
|
.cate {
|
||||||
|
|
@ -80,11 +83,14 @@ export default {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-top: -27px;
|
margin-top: -27px;
|
||||||
}
|
}
|
||||||
|
.cart{
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
.cart-icon {
|
.cart-icon {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
float: left;
|
float: left;
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
margin-top: 8px;
|
|
||||||
color: $theme_color;
|
color: $theme_color;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -106,6 +112,6 @@ export default {
|
||||||
line-height: 17px;
|
line-height: 17px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
top: 3px;
|
top: 10px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -81,6 +81,27 @@
|
||||||
<template v-if="element.type == 'recommend'">
|
<template v-if="element.type == 'recommend'">
|
||||||
<recommend :data="element" class="mb_20 width_1200_auto"></recommend>
|
<recommend :data="element" class="mb_20 width_1200_auto"></recommend>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<!-- 一行三列 -->
|
||||||
|
<template v-if="element.type == 'oneRowThreeColumns'">
|
||||||
|
<oneRowThreeColumns :data="element" class="mb_20 width_1200_auto"></oneRowThreeColumns>
|
||||||
|
</template>
|
||||||
|
<!-- 商品模块 -->
|
||||||
|
<template v-if="element.type == 'goodsType'">
|
||||||
|
<goodsAndType :paramData="element" class="mb_20 width_1200_auto"></goodsAndType>
|
||||||
|
</template>
|
||||||
|
<!-- 商品模块 -->
|
||||||
|
<template v-if="element.type == 'onlyGoodsModel'">
|
||||||
|
<onlyGoodsModel :data="element" class="mb_20 width_1200_auto"></onlyGoodsModel>
|
||||||
|
</template>
|
||||||
|
<!-- 混合模块 -->
|
||||||
|
<template v-if="element.type == 'mixModel'">
|
||||||
|
<mixModel :data="element" class="mb_20 width_1200_auto"></mixModel>
|
||||||
|
</template>
|
||||||
|
<!-- 混合模块 -->
|
||||||
|
<template v-if="element.type == 'forYour'">
|
||||||
|
<forYour :data="element" class="mb_20 width_1200_auto"></forYour>
|
||||||
|
</template>
|
||||||
<!-- 新品排行 -->
|
<!-- 新品排行 -->
|
||||||
<template v-if="element.type == 'newGoodsSort'">
|
<template v-if="element.type == 'newGoodsSort'">
|
||||||
<new-goods-sort
|
<new-goods-sort
|
||||||
|
|
@ -100,7 +121,7 @@
|
||||||
<div style="width: 100%; text-align: center">
|
<div style="width: 100%; text-align: center">
|
||||||
<img
|
<img
|
||||||
width="1200"
|
width="1200"
|
||||||
class="hover-pointer mb_20"
|
class="hover-pointer mb_20 bannerAd"
|
||||||
@click="linkTo(element.options.url)"
|
@click="linkTo(element.options.url)"
|
||||||
:src="element.options.img"
|
:src="element.options.img"
|
||||||
alt=""
|
alt=""
|
||||||
|
|
@ -126,6 +147,12 @@ import NewGoodsSort from "./modelList/NewGoodsSort.vue";
|
||||||
import Recommend from "./modelList/Recommend.vue";
|
import Recommend from "./modelList/Recommend.vue";
|
||||||
import NotEnough from "./modelList/NotEnough.vue";
|
import NotEnough from "./modelList/NotEnough.vue";
|
||||||
import Seckill from "./modelList/Seckill.vue";
|
import Seckill from "./modelList/Seckill.vue";
|
||||||
|
import oneRowThreeColumns from "./modelList/oneRowThreeColumns.vue";
|
||||||
|
import goodsAndType from "./modelList/goodsAndType.vue";
|
||||||
|
import onlyGoodsModel from "./modelList/onlyGoodsModel.vue";
|
||||||
|
import mixModel from "./modelList/mixModel.vue";
|
||||||
|
import forYour from "./modelList/forYour.vue";
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "modelFormItem",
|
name: "modelFormItem",
|
||||||
|
|
@ -139,6 +166,11 @@ export default {
|
||||||
FirstPageAdvert,
|
FirstPageAdvert,
|
||||||
NotEnough,
|
NotEnough,
|
||||||
Seckill,
|
Seckill,
|
||||||
|
oneRowThreeColumns,
|
||||||
|
goodsAndType,
|
||||||
|
onlyGoodsModel,
|
||||||
|
mixModel,
|
||||||
|
forYour
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -153,7 +185,11 @@ export default {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
.bannerAd{
|
||||||
|
width: 1183px;
|
||||||
|
height: 166.6px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
/** 热门广告 */
|
/** 热门广告 */
|
||||||
.advert-list {
|
.advert-list {
|
||||||
background: $theme_color;
|
background: $theme_color;
|
||||||
|
|
@ -198,9 +234,4 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.width_1200_auto {
|
|
||||||
width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -5,14 +5,13 @@
|
||||||
<div class="nav-side"></div>
|
<div class="nav-side"></div>
|
||||||
<div class="nav-content">
|
<div class="nav-content">
|
||||||
<!-- 轮播图 -->
|
<!-- 轮播图 -->
|
||||||
<Carousel autoplay>
|
<!-- autoplay autoplay-speed="10000"-->
|
||||||
|
<Carousel :height="333.9" >
|
||||||
<CarouselItem v-for="(item, index) in data.options.list" :key="index">
|
<CarouselItem v-for="(item, index) in data.options.list" :key="index">
|
||||||
<div style="overflow: hidden">
|
<div class="swiper-img" >
|
||||||
<img
|
<img
|
||||||
:src="item.img"
|
:src="item.img"
|
||||||
width="790"
|
|
||||||
@click="linkTo(item.url)"
|
@click="linkTo(item.url)"
|
||||||
height="340"
|
|
||||||
class="hover-pointer"
|
class="hover-pointer"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -20,48 +19,65 @@
|
||||||
</Carousel>
|
</Carousel>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-right">
|
<div class="nav-right">
|
||||||
<div class="person-msg">
|
<div class="person-msg" @click="entryControl({ path: 'home' })">
|
||||||
<img :src="userInfo.face" v-if="userInfo.face" alt />
|
<img class="user-face" :src="userInfo.face || defaultAvatar" alt />
|
||||||
<Avatar icon="ios-person" class="mb_10" v-else size="80" />
|
<div class="welcome">
|
||||||
<div>
|
|
||||||
Hi, {{
|
Hi, {{
|
||||||
userInfo.nickName || `欢迎来到${config.title}` | secrecyMobile
|
userInfo.nickName || `欢迎来到${config.title}` | secrecyMobile
|
||||||
}}
|
}}
|
||||||
</div>
|
</div>
|
||||||
<div v-if="userInfo.id">
|
<div v-if="userInfo.id">
|
||||||
<Button class="btns" shape="circle" @click="$router.push('home')"
|
<div class="icon-list"></div>
|
||||||
>会员中心</Button
|
<!-- #TODO 后续增加 -->
|
||||||
|
<!-- <div class="icon-list flex flex-j-sb" >
|
||||||
|
<div class="icon-item" :key="index" @click="entryControl(item)" v-for="(item,index) in recentList">
|
||||||
|
<div class="value">
|
||||||
|
{{ item.value}}
|
||||||
|
</div>
|
||||||
|
<div class="label">
|
||||||
|
{{ item.label}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
<div v-else class="flex flex-a-c ">
|
||||||
|
<div class="btns" @click="$router.push('login')" shape="circle"
|
||||||
|
>登录</div
|
||||||
|
>
|
||||||
|
<div class="btns sign-up" @click="$router.push('signUp')" shape="circle"
|
||||||
|
>注册</div
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
|
||||||
<Button class="btns" @click="$router.push('login')" shape="circle"
|
<div class="gray-line"></div>
|
||||||
>请登录</Button
|
<div class="icon-list flex flex-j-sb" >
|
||||||
>
|
<div class="icon-item" @click="entryControl(item)" :key="index" v-for="(item, index) in entranceList">
|
||||||
|
<img class="icon" :src="require(`@/assets/iconfont/${item.icon}.png`)">
|
||||||
|
<div>
|
||||||
|
{{ item.label }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="icon-list flex flex-j-sb" >
|
||||||
<div class="shop-msg">
|
<div class="icon-item" :key="index" @click="entryControl(item)" v-for="(item, index) in appendList">
|
||||||
<div>
|
<img class="icon" :src="require(`@/assets/iconfont/${item.icon}.png`)">
|
||||||
<span>常见问题</span>
|
<div>
|
||||||
<ul class="article-list">
|
{{ item.label }}
|
||||||
<li
|
</div>
|
||||||
class="ellipsis"
|
</div>
|
||||||
:alt="article.title"
|
|
||||||
v-for="(article, index) in articleList"
|
|
||||||
:key="index"
|
|
||||||
@click="goArticle(article.id)"
|
|
||||||
>
|
|
||||||
{{ article.title }}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { articleList } from "@/api/common.js";
|
|
||||||
import storage from "@/plugins/storage";
|
import storage from "@/plugins/storage";
|
||||||
export default {
|
export default {
|
||||||
name: "modelCarousel",
|
name: "modelCarousel",
|
||||||
|
|
@ -69,60 +85,251 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
config: require("@/config"),
|
config: require("@/config"),
|
||||||
|
defaultAvatar: require("@/assets/images/default.png"),
|
||||||
userInfo: {}, // 用户信息
|
userInfo: {}, // 用户信息
|
||||||
articleList: [], // 常见问题
|
entranceList: [
|
||||||
params: {
|
{
|
||||||
// 请求常见问题参数
|
icon: "collage",
|
||||||
pageNumber: 1,
|
label: "宝贝收藏",
|
||||||
pageSize: 5,
|
path: "/home/Favorites"
|
||||||
type: "ANNOUNCEMENT",
|
},
|
||||||
sort: "sort",
|
{
|
||||||
},
|
icon: "shop",
|
||||||
|
label: "收藏店铺",
|
||||||
|
path: "/home/Favorites?type=STORE"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "carts",
|
||||||
|
label: "购物车",
|
||||||
|
path: "/cart"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "story",
|
||||||
|
label: "我的足迹",
|
||||||
|
path: "/home/MyTracks"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
appendList: [
|
||||||
|
{
|
||||||
|
icon: "support",
|
||||||
|
label: "帮助中心",
|
||||||
|
path: "/article"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "feedback",
|
||||||
|
label: "我的评论",
|
||||||
|
path: "/home/CommentList"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "notice",
|
||||||
|
label: "收货地址",
|
||||||
|
path: "/home/MyAddress"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "notification",
|
||||||
|
label: "我的消息",
|
||||||
|
path: "/home/MsgList"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
recentList: [
|
||||||
|
{
|
||||||
|
value: "0",
|
||||||
|
label: "购物车"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "0",
|
||||||
|
label: "待收货"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "0",
|
||||||
|
label: "待发货"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "0",
|
||||||
|
label: "代付款"
|
||||||
|
},
|
||||||
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getArticleList() {
|
// 快捷跳转中心
|
||||||
// 获取常见问题列表
|
entryControl(val) {
|
||||||
articleList(this.params).then((res) => {
|
this.$router.push(val.path)
|
||||||
if (res.success) {
|
|
||||||
this.articleList = res.result.records;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
goArticle(id) {
|
|
||||||
// 跳转文章详情
|
|
||||||
let routeUrl = this.$router.resolve({
|
|
||||||
path: "/article",
|
|
||||||
query: { id },
|
|
||||||
});
|
|
||||||
window.open(routeUrl.href, "_blank");
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
if (storage.getItem("userInfo"))
|
if (storage.getItem("userInfo"))
|
||||||
this.userInfo = JSON.parse(storage.getItem("userInfo"));
|
this.userInfo = JSON.parse(storage.getItem("userInfo"));
|
||||||
this.getArticleList();
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.label {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 14px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-img {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 637px;
|
||||||
|
height: 329.9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-list {
|
||||||
|
width: 216px
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-list:nth-last-of-type(1) {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hot-box {
|
||||||
|
margin-top: 35px;
|
||||||
|
width: 216px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.hot-tag {
|
||||||
|
margin-right: 6px;
|
||||||
|
width: 36px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 4px;
|
||||||
|
opacity: 1;
|
||||||
|
font-size: 12px;
|
||||||
|
border: 1px solid $theme_color;
|
||||||
|
color: $theme_color;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gray-line {
|
||||||
|
width: 216px;
|
||||||
|
height: 1px;
|
||||||
|
border: 1px solid #E5E5E5;
|
||||||
|
margin-bottom: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 20px !important;
|
||||||
|
height: 20px !important;
|
||||||
|
margin-bottom: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-item {
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
>div {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 13px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
>.value {
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
line-height: 17px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
color: $theme_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
>.label {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
line-height: 14px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
color: #666666;
|
||||||
|
margin-bottom: 13px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.model-carousel {
|
.model-carousel {
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
height: 340px;
|
height: 340px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hover-pointer {
|
||||||
|
//display: block;
|
||||||
|
//width: 100%;
|
||||||
|
//height: 100%;
|
||||||
|
width: 637px;
|
||||||
|
height: 329.9px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 10px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.welcome {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 17px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hr {
|
||||||
|
width: 216px;
|
||||||
|
height: 1px;
|
||||||
|
border: 1px solid #E5E5E5;
|
||||||
|
}
|
||||||
|
|
||||||
.btns {
|
.btns {
|
||||||
background-color:#363634 ;
|
margin-top: 21px;
|
||||||
line-height:30px;
|
margin-bottom: 13px;
|
||||||
color: white !important;
|
width: 77px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 14px;
|
||||||
|
opacity: 1;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 28px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #FFFFFF;
|
||||||
|
background: $theme_color;
|
||||||
}
|
}
|
||||||
.btns:hover {
|
|
||||||
background-color: #363634;
|
.sign-up {
|
||||||
line-height:32px !important;
|
background: #F39519;
|
||||||
color: #e5d790 !important;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
margin-bottom: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-face {
|
||||||
|
|
||||||
|
margin-bottom: 12px;
|
||||||
|
width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
/* 导航主体 */
|
/* 导航主体 */
|
||||||
.nav-body {
|
.nav-body {
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
|
|
@ -131,67 +338,78 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-side {
|
.nav-side {
|
||||||
height: 100%;
|
height: 334px;
|
||||||
width: 200px;
|
width: 263.2px;
|
||||||
|
border-bottom-left-radius: 10px;
|
||||||
|
border-bottom-right-radius: 10px;
|
||||||
float: left;
|
float: left;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: #6e6568;
|
// background-color: #6e6568;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*导航内容*/
|
/*导航内容*/
|
||||||
.nav-content {
|
.nav-content {
|
||||||
width: 790px;
|
width: 637px;
|
||||||
overflow: hidden;
|
margin-left: 10.8px;
|
||||||
|
|
||||||
|
margin-top: 10px;
|
||||||
|
height: 333.9px;
|
||||||
|
|
||||||
float: left;
|
float: left;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-right {
|
.nav-right {
|
||||||
float: left;
|
float: left;
|
||||||
width: 210px;
|
margin-top: 10px;
|
||||||
|
width: 263.2px;
|
||||||
|
margin-left: 10px;
|
||||||
|
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
|
||||||
.person-msg {
|
.person-msg {
|
||||||
|
cursor: pointer;
|
||||||
|
height: 333px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin: 20px auto;
|
padding-top: 28px;
|
||||||
button {
|
padding-bottom: 25px;
|
||||||
height: 30px !important;
|
|
||||||
margin-top: 10px;
|
|
||||||
line-height: 30px;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
.ivu-btn-default {
|
|
||||||
// color: $theme_color;
|
|
||||||
// border-color: $theme_color;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.shop-msg {
|
.shop-msg {
|
||||||
div {
|
div {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 10px 27px;
|
margin: 10px 27px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
span:nth-child(1) {
|
span:nth-child(1) {
|
||||||
@include content_color($theme_color);
|
@include content_color($theme_color);
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
span:nth-child(2) {
|
span:nth-child(2) {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
span:nth-child(3):hover {
|
span:nth-child(3):hover {
|
||||||
color: $theme_color;
|
color: $theme_color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
li {
|
li {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -199,6 +417,7 @@ export default {
|
||||||
color: #999395;
|
color: #999395;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $theme_color;
|
color: $theme_color;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -65,12 +65,12 @@ export default {
|
||||||
handleScrollx(){
|
handleScrollx(){
|
||||||
// console.log('滚动高度',window.pageYOffset) // 获取滚动条的高度
|
// console.log('滚动高度',window.pageYOffset) // 获取滚动条的高度
|
||||||
// console.log(this.$refs.obtain.getBoundingClientRect().top) //获取到距离顶部的距离
|
// console.log(this.$refs.obtain.getBoundingClientRect().top) //获取到距离顶部的距离
|
||||||
this.scrollHieght = Number(window.pageYOffset);//获取到距离顶部的距离
|
// this.scrollHieght = Number(window.pageYOffset);//获取到距离顶部的距离
|
||||||
this.scrollTops = Number(this.$refs.obtain.getBoundingClientRect().top); // 获取到距离顶部的距离
|
// this.scrollTops = Number(this.$refs.obtain.getBoundingClientRect().top); // 获取到距离顶部的距离
|
||||||
this.topSearchShow = true; // 展示图钉
|
// this.topSearchShow = true; // 展示图钉
|
||||||
if(this.scrollTops < -660){ // 超过隐藏
|
// if(this.scrollTops < -660){ // 超过隐藏
|
||||||
this.topSearchShow = false;
|
// this.topSearchShow = false;
|
||||||
}
|
// }
|
||||||
},
|
},
|
||||||
toguid(path,id){
|
toguid(path,id){
|
||||||
var path =path;
|
var path =path;
|
||||||
|
|
@ -81,7 +81,7 @@ export default {
|
||||||
change(status){ //获取是否获取到图钉
|
change(status){ //获取是否获取到图钉
|
||||||
this.open = status
|
this.open = status
|
||||||
},
|
},
|
||||||
gotoDemo(){ // 跳转到demo的位置
|
gotoDemo(){ // 跳转到demo的位置
|
||||||
if(this.open){ // 获取到图钉之后在跳转当前位置
|
if(this.open){ // 获取到图钉之后在跳转当前位置
|
||||||
document.querySelector("#demo").scrollIntoView(true);
|
document.querySelector("#demo").scrollIntoView(true);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="seckill" v-if="goodsList.length">
|
<!-- v-if="goodsList.length"-->
|
||||||
|
<div class="seckill">
|
||||||
<div class="aside hover-pointer" @click="goToSeckill">
|
<div class="aside hover-pointer" @click="goToSeckill">
|
||||||
<div class="title">{{ actName }}</div>
|
<div class="title">{{ actName }}</div>
|
||||||
<div class="hour">
|
<div class="hour">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,228 @@
|
||||||
|
<template>
|
||||||
|
<div class="model" v-if="data">
|
||||||
|
<div class="for-your">{{ data.options.title }}</div>
|
||||||
|
<div class="flex card">
|
||||||
|
<div class="left">
|
||||||
|
<img :src="data.options.data.image.src" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="right flex">
|
||||||
|
<!-- 商品区 -->
|
||||||
|
<div class="goods-list">
|
||||||
|
<div
|
||||||
|
class="goods-item"
|
||||||
|
:key="index"
|
||||||
|
v-for="(item, index) in data.options.data.list"
|
||||||
|
@click="linkTo(item.url)"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div class="goods-name">{{ item.title }}</div>
|
||||||
|
<div class="goods-desc">{{ item.desc }}</div>
|
||||||
|
</div>
|
||||||
|
<img class="goods-img" :src="item.img" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 热卖区 -->
|
||||||
|
<div class="hot-list">
|
||||||
|
<div class="hot-title">{{ data.options.data.hot.title }}</div>
|
||||||
|
<div
|
||||||
|
class="hot-item flex flex-a-c"
|
||||||
|
v-for="(item, index) in data.options.data.hot.list"
|
||||||
|
:key="index"
|
||||||
|
@click="linkTo(item.url)"
|
||||||
|
>
|
||||||
|
<img :src="item.img" alt="" />
|
||||||
|
<div class="hot-goods">
|
||||||
|
<div class="hot-goods-title">{{ item.title }}</div>
|
||||||
|
<div>
|
||||||
|
<div class="hot-price">￥{{ item.price | unitPrice }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "forYour",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
current: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {},
|
||||||
|
methods: {},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.goods-list {
|
||||||
|
display: flex;
|
||||||
|
width: 558px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.goods-item {
|
||||||
|
width: 278px;
|
||||||
|
height: 277px;
|
||||||
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
cursor: pointer;
|
||||||
|
border-right: 1.4px solid #e2e2e2;
|
||||||
|
&:nth-of-type(3) {
|
||||||
|
border-top: 1.4px solid #e2e2e2;
|
||||||
|
}
|
||||||
|
&:nth-of-type(4) {
|
||||||
|
border-top: 1.4px solid #e2e2e2;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
/deep/ .goods-name {
|
||||||
|
color: $theme_color;
|
||||||
|
}
|
||||||
|
/deep/ .goods-desc {
|
||||||
|
color: $theme_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.goods-name {
|
||||||
|
margin-top: 23px;
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.goods-img {
|
||||||
|
width: 190px;
|
||||||
|
height: 156px;
|
||||||
|
margin-top: 19px;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.goods-desc {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 17px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 11px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.for-your {
|
||||||
|
font-size: 35px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 42px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card,
|
||||||
|
.right-card {
|
||||||
|
opacity: 1;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 10px;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0px 1px 13px 0px #E5E5E5;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.setup-box {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-tab-bar {
|
||||||
|
> .flex {
|
||||||
|
align-items: center;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable {
|
||||||
|
> .flex {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
width: 346px;
|
||||||
|
height: 554px;
|
||||||
|
border-radius: 9.8px 0px 0px 9.8px;
|
||||||
|
> img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
width: 839px;
|
||||||
|
height: 554px;
|
||||||
|
border-radius: 0px 9.8px 9.8px 0px;
|
||||||
|
}
|
||||||
|
.hot-list {
|
||||||
|
width: 279px;
|
||||||
|
}
|
||||||
|
.hot-title {
|
||||||
|
margin-left: 25px;
|
||||||
|
line-height: 63px;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: normal;
|
||||||
|
|
||||||
|
letter-spacing: 0px;
|
||||||
|
color: #333333;
|
||||||
|
height: 63px;
|
||||||
|
}
|
||||||
|
.hot-item {
|
||||||
|
cursor: pointer;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-top: 1.4px solid #e2e2e2;
|
||||||
|
height: 122px;
|
||||||
|
padding:0 14px;
|
||||||
|
align-items: center;
|
||||||
|
&:hover {
|
||||||
|
> .hot-goods {
|
||||||
|
> .hot-goods-title {
|
||||||
|
color: $theme_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> img {
|
||||||
|
width: 76.3px;
|
||||||
|
height: 77.7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hot-goods {
|
||||||
|
margin-left: 14px;
|
||||||
|
}
|
||||||
|
.hot-goods-title {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 16px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.hot-price {
|
||||||
|
margin-top: 10.3px;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 29px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: $theme_color;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,205 @@
|
||||||
|
<template>
|
||||||
|
<div class="goods-type-wrapper">
|
||||||
|
<div class="flex goods-type-line">
|
||||||
|
<div class="goods-type-title">{{ paramData.options.title }}</div>
|
||||||
|
<div class="flex goods-type-labels">
|
||||||
|
<div
|
||||||
|
:class="{ active: current === item.___index }"
|
||||||
|
class="goods-type-item"
|
||||||
|
v-for="(item, index) in paramData.options.labels"
|
||||||
|
:key="index"
|
||||||
|
@click="handleClickLabel(item, index)"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 商品部分 -->
|
||||||
|
<div class="only-goods-list flex-j-sb">
|
||||||
|
<div
|
||||||
|
v-if="paramData.options"
|
||||||
|
class="only-goods-list-item "
|
||||||
|
v-for="(item, index) in paramData.options.list.filter((client) => {
|
||||||
|
return client.___index == current;
|
||||||
|
})"
|
||||||
|
:key="index"
|
||||||
|
@click="linkTo(item.url)"
|
||||||
|
>
|
||||||
|
<div class="goods-img">
|
||||||
|
<img :src="item.img" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="goods-name wes-2">{{ item.title }}</div>
|
||||||
|
<div class="goods-desc">{{ item.desc }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="goods-price">
|
||||||
|
{{ item.price | unitPrice("￥") }}
|
||||||
|
</div>
|
||||||
|
<!-- 查看 -->
|
||||||
|
<div class="white-shadow">
|
||||||
|
<div class="search">去查看</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "goods",
|
||||||
|
props: {
|
||||||
|
paramData: {
|
||||||
|
type: Object,
|
||||||
|
default: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
current: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {},
|
||||||
|
mounted() {
|
||||||
|
this.current = this.paramData.options.labels[0].___index;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 筛选出当前分类下的商品
|
||||||
|
handleClickLabel(val, index) {
|
||||||
|
this.current = index;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.white-shadow {
|
||||||
|
width: 287px;
|
||||||
|
height: 122px;
|
||||||
|
border-radius: 0px 0px 10px 10px;
|
||||||
|
opacity: 1;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
opacity: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
transition: 0.35s;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(252, 252, 252, 0.58) -50%,
|
||||||
|
#ffffff 99%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
.search {
|
||||||
|
width: 143px;
|
||||||
|
height: 45px;
|
||||||
|
border-radius: 22.5px;
|
||||||
|
opacity: 1;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
line-height: 45px;
|
||||||
|
color: #ffffff;
|
||||||
|
background: $theme_color;
|
||||||
|
}
|
||||||
|
.only-goods-list{
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
}
|
||||||
|
.only-goods-list-item {
|
||||||
|
padding-top: 30px;
|
||||||
|
width: 287px;
|
||||||
|
height: 343.7px;
|
||||||
|
border-radius: 9.8px;
|
||||||
|
opacity: 1;
|
||||||
|
margin-bottom: 14.3px;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #ffffff;
|
||||||
|
transition: all 0.4s ease;
|
||||||
|
box-shadow: 0px 1px 13px 0px #e5e5e5;
|
||||||
|
position: relative;
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0px 1px 14px 0px #c5c5c5;
|
||||||
|
> .white-shadow {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
> .goods-img {
|
||||||
|
> img {
|
||||||
|
opacity: 0.8 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.goods-img {
|
||||||
|
margin-bottom: 9.8px;
|
||||||
|
text-align: center;
|
||||||
|
> img {
|
||||||
|
transition: all 0.4s ease;
|
||||||
|
width: auto;
|
||||||
|
max-height: 183px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.goods-name {
|
||||||
|
font-size: 18px;
|
||||||
|
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 22px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
width: 200px;
|
||||||
|
margin: 0 auto 12.4px auto;
|
||||||
|
color: #333333;
|
||||||
|
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||||
|
}
|
||||||
|
.goods-desc {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 17px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
margin-bottom: 12.4px;
|
||||||
|
color: #666666;
|
||||||
|
|
||||||
|
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||||
|
}
|
||||||
|
.goods-price {
|
||||||
|
font-size: 25.2px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #f31947;
|
||||||
|
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||||
|
}
|
||||||
|
.goods-type-line {
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
.goods-type-title {
|
||||||
|
font-size: 31px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 37px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
color: #f31947;
|
||||||
|
}
|
||||||
|
.goods-type-labels {
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 21px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 25px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
}
|
||||||
|
.goods-type-item {
|
||||||
|
margin-left: 28px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
<template>
|
||||||
|
<div class="mix-model">
|
||||||
|
<!-- 左侧 -->
|
||||||
|
<div class="left-card">
|
||||||
|
<left :data="data" />
|
||||||
|
</div>
|
||||||
|
<!-- 右侧 -->
|
||||||
|
<div class="right-card">
|
||||||
|
<right :data="data" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import left from './mixs/mix-goods'
|
||||||
|
import right from './mixs/mix-brand'
|
||||||
|
export default {
|
||||||
|
name: "mixModel",
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
left,
|
||||||
|
right
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.mix-model{
|
||||||
|
display: flex;
|
||||||
|
justify-content:space-between;
|
||||||
|
}
|
||||||
|
.left-card,.right-card{
|
||||||
|
width: 584px;
|
||||||
|
height: 344px;
|
||||||
|
border-radius: 10px;
|
||||||
|
opacity: 1;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0px 1px 13px 0px #E5E5E5;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,132 @@
|
||||||
|
<template>
|
||||||
|
<div class="flex" v-if="data.options.right.model == 'brand'">
|
||||||
|
<div class="left-side" @click="linkTo(data.options.right.data.image.url)">
|
||||||
|
<img :src="data.options.right.data.image.src" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="right-side">
|
||||||
|
<div class="badge-box flex">
|
||||||
|
<div class="round">
|
||||||
|
<Icon type="ios-arrow-forward" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="flex goods-list">
|
||||||
|
<div class="goods-item flex" @click="linkTo(item.url)" :key="index" v-for="(item,index) in data.options.right.data.list">
|
||||||
|
<div class="goods-thumbnail">
|
||||||
|
<img :src="item.img" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "mix-goods",
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.right-side{
|
||||||
|
width: 330px;
|
||||||
|
}
|
||||||
|
.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: $theme_color;
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-bottom:10px;
|
||||||
|
}
|
||||||
|
.goods-thumbnail{
|
||||||
|
margin-left: 7px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
>img{
|
||||||
|
width:90px;
|
||||||
|
height: 90px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.badge-box{
|
||||||
|
margin-top: 33px;
|
||||||
|
justify-content:right;
|
||||||
|
>.round{
|
||||||
|
width: 17.5px;
|
||||||
|
height: 17.5px;
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 17.5px;
|
||||||
|
border: 0.7px solid #333333;
|
||||||
|
margin-right: 17.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.goods-list{
|
||||||
|
width: 330px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content:space-between;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
.goods-item{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width:50%;
|
||||||
|
height: 85px;
|
||||||
|
border-radius: 9.8px;
|
||||||
|
opacity: 1;
|
||||||
|
transition: .35s;
|
||||||
|
background: #FFFFFF;
|
||||||
|
margin-bottom:9px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.left-side {
|
||||||
|
>img{
|
||||||
|
width: 254px;
|
||||||
|
height: 344px;
|
||||||
|
border-radius: 9.8px 0px 0px 9.8px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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>
|
||||||
|
|
@ -0,0 +1,127 @@
|
||||||
|
<template>
|
||||||
|
<div class="flex" v-if="data.options.left.model == 'goods'">
|
||||||
|
<div class="left-side" @click="linkTo(data.options.right.data.image.url)">
|
||||||
|
<img :src="data.options.left.data.image.src" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="right-side">
|
||||||
|
<div class="badge-box flex">
|
||||||
|
<div class="badge" @click="linkTo(data.options.right.data.image.url)">
|
||||||
|
{{data.options.left.data.badge.label}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex goods-list">
|
||||||
|
|
||||||
|
<div class="goods-item flex" @click="linkTo(item.url)" :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">{{item.price | unitPrice('¥')}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "mix-goods",
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.right-side{
|
||||||
|
width: 387px;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.badge-box{
|
||||||
|
|
||||||
|
justify-content:right;
|
||||||
|
}
|
||||||
|
.goods-list{
|
||||||
|
width: 387px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content:space-between;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
.goods-item{
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 173.6px;
|
||||||
|
height: 119px;
|
||||||
|
border-radius: 9.8px;
|
||||||
|
opacity: 1;
|
||||||
|
transition: .35s;
|
||||||
|
background: #FFFFFF;
|
||||||
|
margin-bottom:9px;
|
||||||
|
&:hover{
|
||||||
|
box-shadow: 0px 1px 6px 0px #E5E5E5;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.left-side {
|
||||||
|
>img{
|
||||||
|
border-radius: 10px 0px 0px 10px;
|
||||||
|
display: block;
|
||||||
|
width: 196.7px;
|
||||||
|
height: 343.7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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>
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
<template>
|
||||||
|
<div class="line flex flex-a-c flex-j-sb">
|
||||||
|
<div class="column" v-for="(item,index) in data.options.list" :key="index">
|
||||||
|
<img :src="item.img" class="three-column-img">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "oneRowThreeColumns",
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.column{
|
||||||
|
width: 385px;
|
||||||
|
height: 165px;
|
||||||
|
>img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,186 @@
|
||||||
|
<template>
|
||||||
|
<div class="goods-type-wrapper">
|
||||||
|
<!-- 商品部分 -->
|
||||||
|
<div class="only-goods-list flex" >
|
||||||
|
<div
|
||||||
|
class="only-goods-list-item"
|
||||||
|
v-for="(item, index) in data.options.list"
|
||||||
|
:key="index"
|
||||||
|
@click="handleClick(item)"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div class="goods-name wes-2">{{ item.title }}</div>
|
||||||
|
<div class="goods-desc">{{ item.desc }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="goods-img">
|
||||||
|
<img :src="item.img" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "onlyGoodsList",
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
flag:false,
|
||||||
|
tabIndex:0,
|
||||||
|
current: 0,
|
||||||
|
showModal: false,
|
||||||
|
selected: {}, // 已选数据
|
||||||
|
picModelFlag: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick(val){
|
||||||
|
this.linkTo(val.url)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
.goods-type-wrapper {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.del-btn{
|
||||||
|
margin-left:10px;
|
||||||
|
}
|
||||||
|
.tab-bar {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.draggable {
|
||||||
|
padding: 10px;
|
||||||
|
border-bottom: 1px solid #ededed;
|
||||||
|
transition: 0.35s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #ededed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column-config {
|
||||||
|
margin-left: 10px;
|
||||||
|
> * {
|
||||||
|
margin: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column-img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
.add-goods {
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.only-goods-list {
|
||||||
|
position: relative;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
&:hover {
|
||||||
|
> .setup-box {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column-goods-config {
|
||||||
|
flex: 2;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.only-goods-list-item {
|
||||||
|
padding-top: 34.8px;
|
||||||
|
margin-bottom: 14.3px;
|
||||||
|
width: 287px;
|
||||||
|
height: 343.7px;
|
||||||
|
border-radius: 9.8px;
|
||||||
|
opacity: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #ffffff;
|
||||||
|
transition: 0.35s;
|
||||||
|
box-shadow: 0px 1px 13px 0px #e5e5e5;
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0px 1px 14px 0px #c5c5c5;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.goods-img {
|
||||||
|
text-align: center;
|
||||||
|
> img {
|
||||||
|
width: auto;
|
||||||
|
max-height: 183px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.goods-name {
|
||||||
|
margin-bottom: 11.9px;
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
|
||||||
|
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||||
|
}
|
||||||
|
.goods-desc {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 19px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #666666;
|
||||||
|
|
||||||
|
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||||
|
}
|
||||||
|
.goods-price {
|
||||||
|
font-size: 25.2px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: $theme_color;
|
||||||
|
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||||
|
}
|
||||||
|
.goods-type-line {
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
.goods-type-title {
|
||||||
|
font-size: 31px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 37px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
color: $theme_color;
|
||||||
|
}
|
||||||
|
.goods-type-labels {
|
||||||
|
font-size: 21px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 25px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
}
|
||||||
|
.goods-type-item {
|
||||||
|
margin-left: 28px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,28 +1,29 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="cate-nav">
|
<div class="cate-nav width_1200_auto" :class="{'fixed-show':useClass == 'fixed-show'}">
|
||||||
<div class="nav-con">
|
<div class="nav-con" :class="{'background-white':useClass == 'background-white'}">
|
||||||
<div
|
<div
|
||||||
class="all-categories hover-pointer"
|
class="all-categories hover-pointer"
|
||||||
@mouseenter="showFirstLists"
|
@mouseenter="showFirstLists"
|
||||||
@mouseleave="showFirstList = false"
|
@mouseleave="showFirstList = false"
|
||||||
>
|
>
|
||||||
全部商品分类
|
商品分类
|
||||||
</div>
|
</div>
|
||||||
<ul class="nav-item" v-if="showNavBar">
|
<ul class="nav-item " v-if="showNavBar">
|
||||||
<li
|
<li
|
||||||
class="nav-lis"
|
class="nav-lis flex flex-a-c flex-j-c"
|
||||||
v-for="(item, index) in navList.list"
|
v-for="(item, index) in navList.list"
|
||||||
:key="index"
|
:key="index"
|
||||||
@click="linkTo(item.url)"
|
@click="linkTo(item.url)"
|
||||||
>
|
>
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
<!-- {{item}} -->
|
<div class="colum"></div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<!-- 全部商品分类 -->
|
<!-- 全部商品分类 -->
|
||||||
<div
|
<div
|
||||||
class="cate-list"
|
class="cate-list"
|
||||||
|
:style="{'top':!showNavBar ?'60px':'46px'}"
|
||||||
v-show="showAlways || showFirstList"
|
v-show="showAlways || showFirstList"
|
||||||
@mouseenter="showFirstList = true"
|
@mouseenter="showFirstList = true"
|
||||||
@mouseleave="showFirstList = false"
|
@mouseleave="showFirstList = false"
|
||||||
|
|
@ -131,6 +132,10 @@ export default {
|
||||||
default: false,
|
default: false,
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
},
|
},
|
||||||
|
useClass:{
|
||||||
|
type:null,
|
||||||
|
default:''
|
||||||
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
@ -223,46 +228,81 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.background-white{
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
.nav-lis:hover {
|
.nav-lis:hover {
|
||||||
color: $theme_color !important;
|
color: $theme_color !important;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
}
|
||||||
|
.nav-lis{
|
||||||
|
width: 103px;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.fixed-show{
|
||||||
|
margin-top: 0 !important;
|
||||||
|
>.nav-con{
|
||||||
|
>.all-categories{
|
||||||
|
align-items: center !important;
|
||||||
|
height: 60px;
|
||||||
|
display: inherit;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.colum{
|
||||||
|
height: 14.7px;
|
||||||
|
opacity: 1;
|
||||||
|
border: 0.7px solid #CBC8C8;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
}
|
}
|
||||||
.cate-nav {
|
.cate-nav {
|
||||||
width: 1200px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 auto;
|
margin: 14px auto 0 auto;
|
||||||
}
|
}
|
||||||
/** 商品分类 */
|
/** 商品分类 */
|
||||||
.nav-con {
|
.nav-con {
|
||||||
width: 1200px;
|
height: 46px;
|
||||||
height: 40px;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
.all-categories {
|
.all-categories {
|
||||||
width: 200px;
|
border-top-left-radius: 10px;
|
||||||
line-height: 40px;
|
border-top-right-radius: 10px;
|
||||||
color: #fff;
|
padding-left: 37.4px;
|
||||||
background-color: $theme_color;
|
background: #FFFFFF;
|
||||||
text-align: center;
|
width: 263.2px;
|
||||||
font-size: 16px;
|
padding-top: 15.4px;
|
||||||
|
line-height: 20px;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
font-size: 16.8px;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #333333;
|
||||||
|
letter-spacing: 0px;
|
||||||
}
|
}
|
||||||
.nav-item {
|
.nav-item {
|
||||||
width: 1000px;
|
width: 914px;
|
||||||
height: 40px;
|
height: 46px;
|
||||||
line-height: 40px;
|
border-radius: 10px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
margin-left: 10px;
|
||||||
|
line-height: 46px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
// background-color: #eee;
|
// background-color: #eee;
|
||||||
display: flex;
|
display: flex;
|
||||||
li {
|
li {
|
||||||
float: left;
|
float: left;
|
||||||
font-weight: bold;
|
font-size: 17px;
|
||||||
margin-left: 20px;
|
font-weight: normal;
|
||||||
color: rgb(129, 127, 127);
|
color: #333333;
|
||||||
font-size: 15px;
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #e1251b;
|
color: $theme_color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -271,17 +311,33 @@ export default {
|
||||||
.cate-list {
|
.cate-list {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-side {
|
.nav-side {
|
||||||
width: 200px;
|
width: 263.2px;
|
||||||
|
color: #666;
|
||||||
float: left;
|
float: left;
|
||||||
padding: 0px;
|
overflow:hidden;
|
||||||
color: #fff;
|
|
||||||
background-color: #6e6568;
|
border-bottom-left-radius: 10px;
|
||||||
height: 335px;
|
border-bottom-right-radius: 10px;
|
||||||
overflow: hidden;
|
background-color: #fff;
|
||||||
|
height: 340px;
|
||||||
|
////自动移滚动条样式
|
||||||
|
//&::-webkit-scrollbar {
|
||||||
|
// width: 1px;
|
||||||
|
// height: 5px;
|
||||||
|
//}
|
||||||
|
//&::-webkit-scrollbar-thumb {
|
||||||
|
// border-radius: 1em;
|
||||||
|
// background-color: rgba(50, 50, 50, 0.3);
|
||||||
|
//}
|
||||||
|
//&::-webkit-scrollbar-track {
|
||||||
|
// border-radius: 1em;
|
||||||
|
// background-color: rgba(50, 50, 50, 0.1);
|
||||||
|
//}
|
||||||
}
|
}
|
||||||
.large-nav {
|
.large-nav {
|
||||||
height: 470px;
|
height: 470px;
|
||||||
|
|
@ -294,22 +350,16 @@ export default {
|
||||||
}
|
}
|
||||||
.nav-side ul {
|
.nav-side ul {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0px;
|
|
||||||
padding-top: 5px;
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
.nav-side li {
|
.nav-side li {
|
||||||
padding: 7.5px 0;
|
padding: 0 0 16.2px 37.4px;
|
||||||
padding-left: 12px;
|
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
&:hover {
|
|
||||||
background: #999395;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.nav-side-item:hover {
|
.nav-side-item:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #e1251b;
|
color: $theme_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*显示商品详细信息*/
|
/*显示商品详细信息*/
|
||||||
|
|
@ -335,10 +385,11 @@ export default {
|
||||||
padding-left: 12px;
|
padding-left: 12px;
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
background-color: #6e6568;
|
color: #333;
|
||||||
}
|
}
|
||||||
.nav-detail-item span:hover {
|
.nav-detail-item span:hover {
|
||||||
background-color: #e1251b;
|
background-color: $theme_color;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
.detail-item-panel li {
|
.detail-item-panel li {
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
|
|
@ -353,7 +404,7 @@ export default {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
.detail-item-title:hover {
|
.detail-item-title:hover {
|
||||||
color: #e1251b;
|
color: $theme_color;
|
||||||
}
|
}
|
||||||
.detail-item-row {
|
.detail-item-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -373,6 +424,6 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.detail-item:hover {
|
.detail-item:hover {
|
||||||
color: #e1251b;
|
color: $theme_color;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
>)
|
>)
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Search :showTag="false" :showLogo="false"></Search>
|
|
||||||
</div>
|
</div>
|
||||||
<Divider />
|
<Divider />
|
||||||
<!-- 购物车主体 -->
|
<!-- 购物车主体 -->
|
||||||
|
|
@ -245,7 +245,7 @@
|
||||||
</div>
|
</div>
|
||||||
<Spin size="large" fix v-if="loading"></Spin>
|
<Spin size="large" fix v-if="loading"></Spin>
|
||||||
</div>
|
</div>
|
||||||
<BaseFooter></BaseFooter>
|
<BaseFooter class="footer"></BaseFooter>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -449,6 +449,9 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.footer{
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
/** logo 搜索 start **/
|
/** logo 搜索 start **/
|
||||||
.logo {
|
.logo {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
|
|
@ -781,4 +784,5 @@ export default {
|
||||||
.ivu-input-number-input {
|
.ivu-input-number-input {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,6 @@
|
||||||
<BaseHeader></BaseHeader>
|
<BaseHeader></BaseHeader>
|
||||||
<Search></Search>
|
<Search></Search>
|
||||||
<drawer></drawer>
|
<drawer></drawer>
|
||||||
<ShopHeader :detail="storeMsg"></ShopHeader>
|
|
||||||
<div class="shop-item-path">
|
<div class="shop-item-path">
|
||||||
<div class="shop-nav-container">
|
<div class="shop-nav-container">
|
||||||
<Breadcrumb>
|
<Breadcrumb>
|
||||||
|
|
@ -45,7 +44,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Search from "@/components/Search";
|
import Search from "@/components/Search";
|
||||||
import ShopHeader from "@/components/header/ShopHeader";
|
|
||||||
import ShowGoods from "@/components/goodsDetail/ShowGoods";
|
import ShowGoods from "@/components/goodsDetail/ShowGoods";
|
||||||
import empty from "@/components/empty/Main";
|
import empty from "@/components/empty/Main";
|
||||||
import ShowGoodsDetail from "@/components/goodsDetail/ShowGoodsDetail";
|
import ShowGoodsDetail from "@/components/goodsDetail/ShowGoodsDetail";
|
||||||
|
|
@ -192,7 +191,6 @@ export default {
|
||||||
watch: {},
|
watch: {},
|
||||||
components: {
|
components: {
|
||||||
Search,
|
Search,
|
||||||
ShopHeader,
|
|
||||||
ShowGoods,
|
ShowGoods,
|
||||||
ShowGoodsDetail,
|
ShowGoodsDetail,
|
||||||
empty
|
empty
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="wrapper">
|
||||||
<BaseHeader></BaseHeader>
|
<BaseHeader></BaseHeader>
|
||||||
<Search @search="handleSearch"></Search>
|
<Search @search="handleSearch"></Search>
|
||||||
<drawer></drawer>
|
<drawer></drawer>
|
||||||
<cateNav></cateNav>
|
<cateNav class="cate-nav" useClass="background-white"></cateNav>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<!-- 商品筛选栏 -->
|
<!-- 商品筛选栏 -->
|
||||||
<GoodsClassNav @getParams="getParams"></GoodsClassNav>
|
<GoodsClassNav @getParams="getParams"></GoodsClassNav>
|
||||||
|
|
@ -261,6 +261,9 @@ export default {
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@import "../assets/styles/goodsList.scss";
|
@import "../assets/styles/goodsList.scss";
|
||||||
|
.cate-nav{
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
.goods-show-info > .goods-show-seller > .goods-show-buyer {
|
.goods-show-info > .goods-show-seller > .goods-show-buyer {
|
||||||
width: 35px;
|
width: 35px;
|
||||||
height: 17px;
|
height: 17px;
|
||||||
|
|
@ -288,7 +291,7 @@ export default {
|
||||||
}
|
}
|
||||||
.container {
|
.container {
|
||||||
margin: 15px auto;
|
margin: 15px auto;
|
||||||
width: 1200px;
|
width: 1184px;
|
||||||
min-width: 1000px;
|
min-width: 1000px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
@ -299,92 +302,14 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
/* ---------------侧边广告栏开始------------------- */
|
/* ---------------侧边广告栏开始------------------- */
|
||||||
.as-box {
|
|
||||||
width: 200px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
}
|
|
||||||
.goods-show-right {
|
.goods-show-right {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.goods-show-self {
|
|
||||||
float: left;
|
|
||||||
height: 16px;
|
|
||||||
line-height: 16px;
|
|
||||||
padding: 0 3px;
|
|
||||||
margin-right: 3px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-align: center;
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 12px;
|
|
||||||
background: #e23a3a;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.goods-show-middle {
|
|
||||||
float: left;
|
|
||||||
height: 16px;
|
|
||||||
line-height: 16px;
|
|
||||||
padding: 0 3px;
|
|
||||||
margin-right: 3px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-align: center;
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 12px;
|
|
||||||
border: 1px solid rgba(112, 123, 187, 0.8);
|
|
||||||
color: rgba(112, 123, 187, 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
// .goods-show-middle:hover {
|
|
||||||
// color: rgba(2, 15, 88, 0.6);
|
|
||||||
// border: 0.2px solid rgba(0, 13, 87, 0.6);
|
|
||||||
// border-radius: 4px;
|
|
||||||
// line-height: 18px;
|
|
||||||
// }
|
|
||||||
|
|
||||||
.item-as-title {
|
|
||||||
width: 100%;
|
|
||||||
height: 36px;
|
|
||||||
color: $theme_color;
|
|
||||||
line-height: 36px;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
.item-as-title span:first-child {
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
.item-as-title span:last-child {
|
|
||||||
float: right;
|
|
||||||
margin-right: 15px;
|
|
||||||
font-size: 10px;
|
|
||||||
color: rgb(204, 204, 204);
|
|
||||||
}
|
|
||||||
.item-as {
|
|
||||||
width: 160px;
|
|
||||||
margin: 18px auto;
|
|
||||||
}
|
|
||||||
.item-as-img {
|
|
||||||
width: 160px;
|
|
||||||
height: 160px;
|
|
||||||
margin: 0px auto;
|
|
||||||
}
|
|
||||||
.item-as-price span {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
.item-as-intro {
|
|
||||||
margin-top: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.item-as-selled {
|
|
||||||
margin-top: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.item-as-selled span {
|
|
||||||
color: #005aa0;
|
|
||||||
}
|
|
||||||
/* ---------------侧边广告栏结束------------------- */
|
|
||||||
|
|
||||||
/* ---------------商品栏开始------------------- */
|
/* ---------------商品栏开始------------------- */
|
||||||
.goods-list-box {
|
.goods-list-box {
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
<Button type="error" @click="showCpmodel=false">确定</Button>
|
<Button type="error" @click="showCpmodel=false">确定</Button>
|
||||||
</template>
|
</template>
|
||||||
</Modal>
|
</Modal>
|
||||||
<drawer></drawer>
|
|
||||||
<!-- 固定头部 -->
|
<!-- 固定头部 -->
|
||||||
<hover-search class="hover-search" :class="{show: topSearchShow}"></hover-search>
|
<hover-search class="hover-search" :class="{show: topSearchShow}"></hover-search>
|
||||||
<!-- 顶部广告 -->
|
<!-- 顶部广告 -->
|
||||||
|
|
@ -37,6 +37,8 @@
|
||||||
<model-form ref="modelForm" :data="modelForm"></model-form>
|
<model-form ref="modelForm" :data="modelForm"></model-form>
|
||||||
<!-- 底部栏 -->
|
<!-- 底部栏 -->
|
||||||
<BaseFooter></BaseFooter>
|
<BaseFooter></BaseFooter>
|
||||||
|
<!-- 侧边栏 -->
|
||||||
|
<fixedBar class="fixed-bar" :class="{'show-fixed': topSearchShow}"></fixedBar>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -44,6 +46,7 @@
|
||||||
import Search from '@/components/Search';
|
import Search from '@/components/Search';
|
||||||
import ModelForm from '@/components/indexDecorate/ModelForm';
|
import ModelForm from '@/components/indexDecorate/ModelForm';
|
||||||
import HoverSearch from '@/components/header/hoverSearch';
|
import HoverSearch from '@/components/header/hoverSearch';
|
||||||
|
import fixedBar from '@/components/fixed/index';
|
||||||
import storage from "@/plugins/storage";
|
import storage from "@/plugins/storage";
|
||||||
import { indexData,getAutoCoup } from '@/api/index.js';
|
import { indexData,getAutoCoup } from '@/api/index.js';
|
||||||
import {seckillByDay} from '@/api/promotion'
|
import {seckillByDay} from '@/api/promotion'
|
||||||
|
|
@ -77,7 +80,7 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
// created(){
|
// created(){
|
||||||
|
|
||||||
// },
|
// },
|
||||||
methods: {
|
methods: {
|
||||||
// 优惠券可用范围
|
// 优惠券可用范围
|
||||||
|
|
@ -114,7 +117,7 @@ export default {
|
||||||
// window.localStorage.setItem('getTimes',datas)//存储缓存
|
// window.localStorage.setItem('getTimes',datas)//存储缓存
|
||||||
this.getcps()
|
this.getcps()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getcps(){
|
getcps(){
|
||||||
console.log(123123)
|
console.log(123123)
|
||||||
let data = new Date()
|
let data = new Date()
|
||||||
|
|
@ -139,10 +142,10 @@ export default {
|
||||||
storage.setItem('getTimes',datas)//存储缓存
|
storage.setItem('getTimes',datas)//存储缓存
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
handleReachBottom(){
|
handleReachBottom(){
|
||||||
console.log(111)
|
|
||||||
} ,
|
} ,
|
||||||
getIndexData () {
|
getIndexData () {
|
||||||
// 获取首页装修数据
|
// 获取首页装修数据
|
||||||
indexData({ clientType: 'PC' }).then(async (res) => {
|
indexData({ clientType: 'PC' }).then(async (res) => {
|
||||||
|
|
@ -181,7 +184,8 @@ export default {
|
||||||
components: {
|
components: {
|
||||||
Search,
|
Search,
|
||||||
ModelForm,
|
ModelForm,
|
||||||
HoverSearch
|
HoverSearch,
|
||||||
|
fixedBar
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -213,4 +217,55 @@ export default {
|
||||||
transform: translateZ(0);
|
transform: translateZ(0);
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
.fixed-bar{
|
||||||
|
opacity: 0 !important;
|
||||||
|
transform: translateY(-10px);
|
||||||
|
transition: .35s;
|
||||||
|
z-index: 999999;
|
||||||
|
height: 0px !important;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.show-fixed{
|
||||||
|
height: 354px !important;
|
||||||
|
opacity: 1 !important;
|
||||||
|
transform: translateY(0);
|
||||||
|
-webkit-transform: translateZ(0);
|
||||||
|
-moz-transform: translateZ(0);
|
||||||
|
-ms-transform: translateZ(0);
|
||||||
|
-o-transform: translateZ(0);
|
||||||
|
transform: translateZ(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 2K */
|
||||||
|
@media screen and (min-width: 2561px) and (max-width: 3840px) {
|
||||||
|
/* 样式 */
|
||||||
|
.fixed-bar{
|
||||||
|
position: fixed;
|
||||||
|
right:900px;
|
||||||
|
top: 500px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 1080p */
|
||||||
|
@media screen and (max-width: 2560px) {
|
||||||
|
/* 样式 */
|
||||||
|
.fixed-bar{
|
||||||
|
position: fixed;
|
||||||
|
right:300px;
|
||||||
|
top: 500px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 2025px) {
|
||||||
|
/* 样式 */
|
||||||
|
.fixed-bar{
|
||||||
|
position: fixed;
|
||||||
|
right:150px;
|
||||||
|
top: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<div>
|
<div>
|
||||||
<BaseHeader></BaseHeader>
|
<BaseHeader></BaseHeader>
|
||||||
<Search></Search>
|
<Search></Search>
|
||||||
<cateNav></cateNav>
|
|
||||||
<!-- 添加成功提示 -->
|
<!-- 添加成功提示 -->
|
||||||
<div class="add-info-box-container">
|
<div class="add-info-box-container">
|
||||||
<div class="add-info-box">
|
<div class="add-info-box">
|
||||||
|
|
|
||||||
|
|
@ -53,11 +53,12 @@ export default {
|
||||||
params: { // 请求参数
|
params: { // 请求参数
|
||||||
pageNumber: 1,
|
pageNumber: 1,
|
||||||
pageSize: 100,
|
pageSize: 100,
|
||||||
type: 'GOODS'
|
type: this.$route.query.type || 'GOODS'
|
||||||
},
|
},
|
||||||
spinShow: false // 加载状态
|
spinShow: false // 加载状态
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
getList () { // 获取收藏列表
|
getList () { // 获取收藏列表
|
||||||
this.spinShow = true
|
this.spinShow = true
|
||||||
|
|
@ -123,6 +124,7 @@ export default {
|
||||||
mounted () {
|
mounted () {
|
||||||
if (this.homePage) this.params.pageSize = 5;
|
if (this.homePage) this.params.pageSize = 5;
|
||||||
this.getList()
|
this.getList()
|
||||||
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ var BASE = {
|
||||||
common: "https://common-api.pickmall.cn",
|
common: "https://common-api.pickmall.cn",
|
||||||
buyer: "https://buyer-api.pickmall.cn",
|
buyer: "https://buyer-api.pickmall.cn",
|
||||||
seller: "https://store-api.pickmall.cn",
|
seller: "https://store-api.pickmall.cn",
|
||||||
manager: "https://admin-api.pickmall.cn"
|
manager: "http://admin-api.pickmall.cn:18889"
|
||||||
},
|
},
|
||||||
API_PROD: {
|
API_PROD: {
|
||||||
common: "https://common-api.pickmall.cn",
|
common: "https://common-api.pickmall.cn",
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
|
|
@ -66,7 +66,6 @@ export default {
|
||||||
}, []);
|
}, []);
|
||||||
this.wap.forEach((items,indexs) => {
|
this.wap.forEach((items,indexs) => {
|
||||||
if(items.title == '活动'){
|
if(items.title == '活动'){
|
||||||
console.log(32323232323232)
|
|
||||||
this.wap.splice(indexs,1)
|
this.wap.splice(indexs,1)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -117,7 +117,6 @@ export default {
|
||||||
if(urls.indexOf('/floorList/renovation') != -1){
|
if(urls.indexOf('/floorList/renovation') != -1){
|
||||||
this.linkList.forEach((items,indexs)=>{
|
this.linkList.forEach((items,indexs)=>{
|
||||||
if(items.title == '砍价'){
|
if(items.title == '砍价'){
|
||||||
console.log(12321322,indexs)
|
|
||||||
this.linkList.splice(indexs,1)
|
this.linkList.splice(indexs,1)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -136,7 +135,7 @@ export default {
|
||||||
this.linkVisible = false
|
this.linkVisible = false
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleLink(val, index) {
|
handleLink(val, index) {
|
||||||
val = { ...val, ___type: "other" };
|
val = { ...val, ___type: "other" };
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div >
|
<div>
|
||||||
<div class="tables">
|
<div class="tables">
|
||||||
<Table
|
<Table
|
||||||
border
|
border
|
||||||
|
|
@ -22,7 +22,7 @@
|
||||||
:current="params.pageNumber"
|
:current="params.pageNumber"
|
||||||
:page-size="params.pageSize"
|
:page-size="params.pageSize"
|
||||||
class="mt_10"
|
class="mt_10"
|
||||||
:total="Number(totals)"
|
:total="Number(total)"
|
||||||
size="small"
|
size="small"
|
||||||
show-elevator
|
show-elevator
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
background-color: rgba(50,50,50,.1);
|
background-color: rgba(50,50,50,.1);
|
||||||
}
|
}
|
||||||
.ivu-table table{
|
.ivu-table table{
|
||||||
width: 100%!important;
|
width: 100%!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -99,4 +99,30 @@ $theme_color: #FF5C58;
|
||||||
}
|
}
|
||||||
$bg_color: #f1f6fa;
|
$bg_color: #f1f6fa;
|
||||||
|
|
||||||
@import "./table-common.scss";
|
.wes {
|
||||||
|
/* 多出部分用省略号表示 , 用于一行 */
|
||||||
|
overflow: hidden;
|
||||||
|
word-wrap: normal;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wes-2 {
|
||||||
|
/* 适用于webkit内核和移动端 */
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wes-3 {
|
||||||
|
/* 适用于webkit内核和移动端 */
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@import "./table-common.scss";
|
||||||
|
|
|
||||||
|
|
@ -194,7 +194,7 @@ export default {
|
||||||
"Button",
|
"Button",
|
||||||
{
|
{
|
||||||
props: {
|
props: {
|
||||||
type: "success",
|
type: "primary",
|
||||||
size: "small",
|
size: "small",
|
||||||
},
|
},
|
||||||
style: {
|
style: {
|
||||||
|
|
@ -216,7 +216,7 @@ export default {
|
||||||
"Button",
|
"Button",
|
||||||
{
|
{
|
||||||
props: {
|
props: {
|
||||||
type: "primary",
|
type: "default",
|
||||||
size: "small",
|
size: "small",
|
||||||
},
|
},
|
||||||
style: {
|
style: {
|
||||||
|
|
|
||||||
|
|
@ -681,6 +681,253 @@ export const modelData = [{
|
||||||
size: '1200*自定义'
|
size: '1200*自定义'
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
type: 'oneRowThreeColumns',
|
||||||
|
name: '一行三列',
|
||||||
|
icon: 'md-image',
|
||||||
|
options: {
|
||||||
|
list:[
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate8.png'),
|
||||||
|
url:"",
|
||||||
|
size:"385*165"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate8.png'),
|
||||||
|
url:"",
|
||||||
|
size:"385*165"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: require('@/assets/nav/decorate8.png'),
|
||||||
|
url:"",
|
||||||
|
size:"385*165"
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'goodsType',
|
||||||
|
name: '商品模块',
|
||||||
|
icon: 'md-image',
|
||||||
|
options: {
|
||||||
|
title:"智能家居",
|
||||||
|
labels:[
|
||||||
|
{
|
||||||
|
label: '音箱',
|
||||||
|
___index:0,
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '门锁',
|
||||||
|
___index:1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '路由器',
|
||||||
|
___index:2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '智能设备',
|
||||||
|
___index:3
|
||||||
|
},
|
||||||
|
],
|
||||||
|
list:[
|
||||||
|
{
|
||||||
|
img: "https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||||
|
price: "120",
|
||||||
|
title:" 微软 (Microsoft) Xbox 无线控制器/手柄 湛蓝色 | 3.5mm耳机接口蓝牙连接 Xbox主机电脑平板通用",
|
||||||
|
desc:"万家宝藏好店等你来",
|
||||||
|
url:'',
|
||||||
|
___index: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'onlyGoodsModel',
|
||||||
|
name: '商品模块2',
|
||||||
|
icon: 'md-image',
|
||||||
|
options: {
|
||||||
|
list:[
|
||||||
|
{
|
||||||
|
img: "https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||||
|
price: "120",
|
||||||
|
title:" 微软 (Microsoft) Xbox 无线控制器/手柄 湛蓝色 | 3.5mm耳机接口蓝牙连接 Xbox主机电脑平板通用",
|
||||||
|
desc:"万家宝藏好店等你来",
|
||||||
|
url:'',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'mixModel',
|
||||||
|
name: '混合模块',
|
||||||
|
icon: 'md-image',
|
||||||
|
options: {
|
||||||
|
left:{
|
||||||
|
model:'goods',
|
||||||
|
//数据集合
|
||||||
|
data:{
|
||||||
|
image:{
|
||||||
|
url:"",
|
||||||
|
src:'https://lili-system.oss-cn-beijing.aliyuncs.com/mix-bg1.png',
|
||||||
|
size:"197 * 344"
|
||||||
|
},
|
||||||
|
list:[
|
||||||
|
{
|
||||||
|
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||||
|
title:"商品标题",
|
||||||
|
price:"120",
|
||||||
|
url:"",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||||
|
title:"商品标题",
|
||||||
|
price:"120",
|
||||||
|
url:"",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||||
|
title:"商品标题",
|
||||||
|
price:"120",
|
||||||
|
url:"",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||||
|
title:"商品标题",
|
||||||
|
price:"120",
|
||||||
|
url:"",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
badge:{
|
||||||
|
label:"精选",
|
||||||
|
url:""
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
right:{
|
||||||
|
model:'brand',
|
||||||
|
data:{
|
||||||
|
image:{
|
||||||
|
url:"",
|
||||||
|
src:'https://lili-system.oss-cn-beijing.aliyuncs.com/mix-bg2.png',
|
||||||
|
size:"254 * 344"
|
||||||
|
},
|
||||||
|
list:[
|
||||||
|
{
|
||||||
|
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||||
|
|
||||||
|
url:"",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||||
|
|
||||||
|
url:"",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||||
|
|
||||||
|
url:"",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||||
|
url:"",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||||
|
title:"商品标题",
|
||||||
|
price:"120",
|
||||||
|
url:"",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||||
|
title:"商品标题",
|
||||||
|
price:"120",
|
||||||
|
url:"",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
badge:"",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
type: 'forYour',
|
||||||
|
name: '为你推荐',
|
||||||
|
icon: 'md-image',
|
||||||
|
options: {
|
||||||
|
model:'goods',
|
||||||
|
title:"为你推荐",
|
||||||
|
//数据集合
|
||||||
|
data:{
|
||||||
|
image:{
|
||||||
|
url:"",
|
||||||
|
src:'https://lili-system.oss-cn-beijing.aliyuncs.com/mix-bg3.png',
|
||||||
|
size:"197 * 344"
|
||||||
|
},
|
||||||
|
list:[
|
||||||
|
{
|
||||||
|
img:"https://lili-system.oss-cn-beijing.aliyuncs.com/example1.png",
|
||||||
|
title:"标题",
|
||||||
|
desc:"精品好物等你挑",
|
||||||
|
url:"",
|
||||||
|
size:"346 * 554"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img:"https://lili-system.oss-cn-beijing.aliyuncs.com/example2.png",
|
||||||
|
title:"标题",
|
||||||
|
desc:"精品好物等你挑",
|
||||||
|
url:"",
|
||||||
|
size:"190 * 156"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img:"https://lili-system.oss-cn-beijing.aliyuncs.com/example3.png",
|
||||||
|
title:"标题",
|
||||||
|
desc:"精品好物等你挑",
|
||||||
|
url:"",
|
||||||
|
size:"190 * 156"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img:"https://lili-system.oss-cn-beijing.aliyuncs.com/example4.png",
|
||||||
|
title:"标题",
|
||||||
|
desc:"精品好物等你挑",
|
||||||
|
url:"",
|
||||||
|
size:"190 * 156"
|
||||||
|
},
|
||||||
|
],
|
||||||
|
hot:{
|
||||||
|
title:"最近热卖",
|
||||||
|
list:[
|
||||||
|
{
|
||||||
|
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||||
|
title:"商品标题",
|
||||||
|
price:"120",
|
||||||
|
url:"",
|
||||||
|
},{
|
||||||
|
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||||
|
title:"商品标题",
|
||||||
|
price:"120",
|
||||||
|
url:"",
|
||||||
|
},{
|
||||||
|
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||||
|
title:"商品标题",
|
||||||
|
price:"120",
|
||||||
|
url:"",
|
||||||
|
},{
|
||||||
|
img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||||
|
title:"商品标题",
|
||||||
|
price:"120",
|
||||||
|
url:"",
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
type: 'notEnough',
|
type: 'notEnough',
|
||||||
name: '还没逛够',
|
name: '还没逛够',
|
||||||
|
|
|
||||||
|
|
@ -56,6 +56,10 @@
|
||||||
<template v-if="element.type == 'seckill'">
|
<template v-if="element.type == 'seckill'">
|
||||||
<seckill :data="element"></seckill>
|
<seckill :data="element"></seckill>
|
||||||
</template>
|
</template>
|
||||||
|
<!-- 限时秒杀 待完善 -->
|
||||||
|
<template v-if="element.type == 'seckill-only-album'">
|
||||||
|
<seckill-only-album :data="element"></seckill-only-album>
|
||||||
|
</template>
|
||||||
<!-- 折扣广告 -->
|
<!-- 折扣广告 -->
|
||||||
<template v-if="element.type == 'discountAdvert'">
|
<template v-if="element.type == 'discountAdvert'">
|
||||||
<div
|
<div
|
||||||
|
|
@ -111,6 +115,26 @@
|
||||||
<template v-if="element.type == 'firstAdvert'">
|
<template v-if="element.type == 'firstAdvert'">
|
||||||
<first-page-advert :data="element"></first-page-advert>
|
<first-page-advert :data="element"></first-page-advert>
|
||||||
</template>
|
</template>
|
||||||
|
<!-- 商品模块 -->
|
||||||
|
<template v-if="element.type == 'goodsType'">
|
||||||
|
<goodsType :data="element" class="mb_20 width_1200_auto"></goodsType>
|
||||||
|
</template>
|
||||||
|
<!-- 商品模块2 -->
|
||||||
|
<template v-if="element.type == 'onlyGoodsModel'">
|
||||||
|
<onlyGoodsModel :data="element" class="mb_20 width_1200_auto"></onlyGoodsModel>
|
||||||
|
</template>
|
||||||
|
<!-- 混合模块 -->
|
||||||
|
<template v-if="element.type == 'mixModel'">
|
||||||
|
<mixModel :data="element" class="mb_20 width_1200_auto"></mixModel>
|
||||||
|
</template>
|
||||||
|
<!-- 为你推荐 -->
|
||||||
|
<template v-if="element.type == 'forYour'">
|
||||||
|
<forYour :data="element" class="mb_20 width_1200_auto"></forYour>
|
||||||
|
</template>
|
||||||
|
<!-- 一行三列 -->
|
||||||
|
<template v-if="element.type == 'oneRowThreeColumns'">
|
||||||
|
<oneRowThreeColumns :data="element" class="mb_20 width_1200_auto"></oneRowThreeColumns>
|
||||||
|
</template>
|
||||||
<!-- 横幅广告 -->
|
<!-- 横幅广告 -->
|
||||||
<template v-if="element.type == 'bannerAdvert'">
|
<template v-if="element.type == 'bannerAdvert'">
|
||||||
<div class="horizontal-advert setup-content">
|
<div class="horizontal-advert setup-content">
|
||||||
|
|
@ -237,8 +261,15 @@ import NewGoodsSort from "./modelList/newGoodsSort.vue";
|
||||||
import Recommend from "./modelList/recommend.vue";
|
import Recommend from "./modelList/recommend.vue";
|
||||||
import NotEnough from "./modelList/notEnough.vue";
|
import NotEnough from "./modelList/notEnough.vue";
|
||||||
import Seckill from "./modelList/seckill.vue";
|
import Seckill from "./modelList/seckill.vue";
|
||||||
|
import goodsType from "./modelList/goodsAndType.vue";
|
||||||
import ossManage from "@/views/sys/oss-manage/ossManage";
|
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||||
|
|
||||||
|
import mixModel from "./modelList/mixModel.vue";
|
||||||
|
import forYour from "./modelList/forYour.vue";
|
||||||
|
import onlyGoodsModel from "./modelList/onlyGoodsModel.vue";
|
||||||
|
|
||||||
|
import oneRowThreeColumns from "./modelList/oneRowThreeColumns.vue";
|
||||||
|
import seckillOnlyAlbum from "./modelList/seckill-only-album.vue";
|
||||||
export default {
|
export default {
|
||||||
name: "modelFormItem",
|
name: "modelFormItem",
|
||||||
props: ["element", "select", "index", "data"],
|
props: ["element", "select", "index", "data"],
|
||||||
|
|
@ -251,7 +282,13 @@ export default {
|
||||||
FirstPageAdvert,
|
FirstPageAdvert,
|
||||||
NotEnough,
|
NotEnough,
|
||||||
Seckill,
|
Seckill,
|
||||||
|
goodsType,
|
||||||
ossManage,
|
ossManage,
|
||||||
|
oneRowThreeColumns,
|
||||||
|
"seckill-only-album":seckillOnlyAlbum,
|
||||||
|
onlyGoodsModel,
|
||||||
|
mixModel,
|
||||||
|
forYour
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,444 @@
|
||||||
|
<template>
|
||||||
|
<div class="model" v-if="data">
|
||||||
|
<div class="for-your">{{ data.options.title }}</div>
|
||||||
|
|
||||||
|
<div class="flex card">
|
||||||
|
<div class="left">
|
||||||
|
<img :src="data.options.data.image.src" alt="" />
|
||||||
|
</div>
|
||||||
|
<div class="right flex">
|
||||||
|
<!-- 商品区 -->
|
||||||
|
<div class="goods-list">
|
||||||
|
<div
|
||||||
|
class="goods-item"
|
||||||
|
:key="index"
|
||||||
|
v-for="(item, index) in data.options.data.list"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div class="goods-name">{{ item.title }}</div>
|
||||||
|
<div class="goods-desc">{{ item.desc }}</div>
|
||||||
|
</div>
|
||||||
|
<img class="goods-img" :src="item.img" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 热卖区 -->
|
||||||
|
<div class="hot-list">
|
||||||
|
<div class="hot-title">{{ data.options.data.hot.title }}</div>
|
||||||
|
<div
|
||||||
|
class="hot-item flex flex-a-c"
|
||||||
|
v-for="(item, index) in data.options.data.hot.list"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<img :src="item.img" alt="" />
|
||||||
|
<div class="hot-goods">
|
||||||
|
<div class="hot-goods-title">{{ item.title }}</div>
|
||||||
|
<div>
|
||||||
|
<div class="hot-price">￥{{ item.price | unitPrice }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setup-box">
|
||||||
|
<div>
|
||||||
|
<Button size="small" @click.stop="handleSelectModel()">编辑 </Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
v-model="showModal"
|
||||||
|
title="装修"
|
||||||
|
draggable
|
||||||
|
width="800"
|
||||||
|
:z-index="100"
|
||||||
|
:mask-closable="false"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div class="modal-tab-bar">
|
||||||
|
<div>
|
||||||
|
主标题:
|
||||||
|
<Input style="width: 200px" v-model="data.options.title"></Input>
|
||||||
|
</div>
|
||||||
|
<Divider>左侧商品部分</Divider>
|
||||||
|
<div class="flex">
|
||||||
|
<div>图片 :</div>
|
||||||
|
<div>
|
||||||
|
<img class="image" :src="data.options.data.image.src" alt="" />
|
||||||
|
<div>
|
||||||
|
<div>推荐尺寸：{{ data.options.data.image.size }}</div>
|
||||||
|
<div class="link-src">
|
||||||
|
链接地址：
|
||||||
|
<Input
|
||||||
|
style="width: 200px"
|
||||||
|
v-model="data.options.data.image.url"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
type="primary"
|
||||||
|
@click="handleSelectImg('image')"
|
||||||
|
>选择图片
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
class="ml_10"
|
||||||
|
type="primary"
|
||||||
|
@click="handleSelectLink('image')"
|
||||||
|
>选择链接
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Divider>中间商品部分</Divider>
|
||||||
|
<div class="flex column-list">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in data.options.data.list"
|
||||||
|
:key="index"
|
||||||
|
class="draggable"
|
||||||
|
>
|
||||||
|
<div class="flex">
|
||||||
|
<img :src="item.img" class="column-img" />
|
||||||
|
<div class="column-goods-list">
|
||||||
|
<div><Input v-model="item.title"></Input></div>
|
||||||
|
<div><Input v-model="item.desc"></Input></div>
|
||||||
|
<div><Input disabled v-model="item.url"></Input></div>
|
||||||
|
<div>{{ item.size }}</div>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
class="ml_10"
|
||||||
|
type="primary"
|
||||||
|
@click="handleSelectLink('list', index)"
|
||||||
|
>选择链接
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
class="ml_10"
|
||||||
|
type="primary"
|
||||||
|
@click="handleSelectImg('list', index)"
|
||||||
|
>选择图片
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Divider>右侧商品部分</Divider>
|
||||||
|
<div class="flex">
|
||||||
|
<div>右侧标题 :</div>
|
||||||
|
<Input
|
||||||
|
style="width: 200px"
|
||||||
|
v-model="data.options.data.hot.title"
|
||||||
|
></Input>
|
||||||
|
</div>
|
||||||
|
<div class="flex column-list">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in data.options.data.hot.list"
|
||||||
|
:key="index"
|
||||||
|
class="draggable"
|
||||||
|
>
|
||||||
|
<div class="flex">
|
||||||
|
<img :src="item.img" class="column-img" />
|
||||||
|
<div class="column-goods-list">
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
class="ml_10"
|
||||||
|
type="primary"
|
||||||
|
@click="handleSelectGoods('hot', index)"
|
||||||
|
>选择商品
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<!-- 选择商品。链接 -->
|
||||||
|
<liliDialog
|
||||||
|
ref="liliDialog"
|
||||||
|
@selectedLink="selectedLink"
|
||||||
|
@selectedGoodsData="selectedGoodsData"
|
||||||
|
></liliDialog>
|
||||||
|
|
||||||
|
<!-- 选择图片 -->
|
||||||
|
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||||
|
<ossManage
|
||||||
|
@callback="callbackSelected"
|
||||||
|
:isComponent="true"
|
||||||
|
ref="ossManage"
|
||||||
|
/>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ossManage from "@/views/sys/oss-manage/ossManage.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "forYour",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showModal: false,
|
||||||
|
|
||||||
|
picModelFlag: false,
|
||||||
|
selectedData: "", //选中的数据
|
||||||
|
goodsIndex: 0, // 商品索引
|
||||||
|
align: "",
|
||||||
|
defaultCallbackImageType: "",
|
||||||
|
current: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
ossManage,
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleSelectImg(type, index) {
|
||||||
|
this.defaultCallbackImageType = type;
|
||||||
|
this.goodsIndex = index;
|
||||||
|
// 选择图片
|
||||||
|
this.$refs.ossManage.selectImage = true;
|
||||||
|
this.picModelFlag = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSelectGoods(val, index) {
|
||||||
|
this.$refs.liliDialog.open("goods");
|
||||||
|
this.$refs.liliDialog.singleGoods();
|
||||||
|
this.selectedData = val;
|
||||||
|
this.goodsIndex = index;
|
||||||
|
},
|
||||||
|
handleSelectLink(val, index) {
|
||||||
|
// 调起选择链接弹窗
|
||||||
|
this.$refs.liliDialog.open("link");
|
||||||
|
this.selectedData = val;
|
||||||
|
|
||||||
|
this.goodsIndex = index;
|
||||||
|
},
|
||||||
|
// 回显图片
|
||||||
|
callbackSelected(val) {
|
||||||
|
this.picModelFlag = false;
|
||||||
|
if (this.defaultCallbackImageType == "image") {
|
||||||
|
this.data.options.data.image.src = val.url;
|
||||||
|
} else {
|
||||||
|
this.data.options.data[this.defaultCallbackImageType][
|
||||||
|
this.goodsIndex
|
||||||
|
].img = val.url;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 选择商品回调
|
||||||
|
selectedGoodsData(val) {
|
||||||
|
this.data.options.data.hot.list[this.goodsIndex].img = val[0].thumbnail;
|
||||||
|
this.data.options.data.hot.list[this.goodsIndex].title = val[0].goodsName;
|
||||||
|
this.data.options.data.hot.list[this.goodsIndex].price = val[0].price;
|
||||||
|
this.data.options.data.hot.list[this.goodsIndex].url =
|
||||||
|
this.$options.filters.formatLinkType(val[0]);
|
||||||
|
|
||||||
|
console.log(val, this.selectedData, this.goodsIndex);
|
||||||
|
},
|
||||||
|
// 选择链接回调
|
||||||
|
selectedLink(val) {
|
||||||
|
console.log(val,this.selectedData)
|
||||||
|
if (this.selectedData == "image") {
|
||||||
|
this.data.options.data.image.url =
|
||||||
|
this.$options.filters.formatLinkType(val);
|
||||||
|
} else {
|
||||||
|
console.log(this.data.options.data.list,this.goodsIndex)
|
||||||
|
this.data.options.data.list[
|
||||||
|
this.goodsIndex
|
||||||
|
].url = this.$options.filters.formatLinkType(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/*
|
||||||
|
* 点击不同模块进行编辑
|
||||||
|
* 判断也很简单，就是第一个第二个模块进行判断
|
||||||
|
*
|
||||||
|
* */
|
||||||
|
handleSelectModel() {
|
||||||
|
this.showModal = true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import "./setup-box.scss";
|
||||||
|
.goods-list {
|
||||||
|
display: flex;
|
||||||
|
width: 558px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.goods-item {
|
||||||
|
width: 278px;
|
||||||
|
height: 277px;
|
||||||
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-right: 1.4px solid #e2e2e2;
|
||||||
|
&:nth-of-type(3) {
|
||||||
|
border-top: 1.4px solid #e2e2e2;
|
||||||
|
}
|
||||||
|
&:nth-of-type(4) {
|
||||||
|
border-top: 1.4px solid #e2e2e2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
color: #f31947;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods-name {
|
||||||
|
margin-top: 23px;
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.goods-img {
|
||||||
|
width: 190px;
|
||||||
|
height: 156px;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-top: 19px;
|
||||||
|
}
|
||||||
|
.goods-desc {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 17px;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 11px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.for-your {
|
||||||
|
font-size: 35px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 42px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.column-goods-list {
|
||||||
|
> div {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.link-src {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card,
|
||||||
|
.right-card {
|
||||||
|
opacity: 1;
|
||||||
|
background: #ffffff;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.setup-box {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-list {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
max-width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-tab-bar {
|
||||||
|
> .flex {
|
||||||
|
align-items: center;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable {
|
||||||
|
margin: 10px 0;
|
||||||
|
> .flex {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
width: 346px;
|
||||||
|
height: 554px;
|
||||||
|
border-radius: 9.8px 0px 0px 9.8px;
|
||||||
|
> img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
width: 839px;
|
||||||
|
height: 554px;
|
||||||
|
border-radius: 0px 9.8px 9.8px 0px;
|
||||||
|
}
|
||||||
|
.hot-list {
|
||||||
|
width: 279px;
|
||||||
|
}
|
||||||
|
.hot-title {
|
||||||
|
margin-left: 25px;
|
||||||
|
line-height: 63px;
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: normal;
|
||||||
|
|
||||||
|
letter-spacing: 0px;
|
||||||
|
color: #333333;
|
||||||
|
height: 63px;
|
||||||
|
}
|
||||||
|
.hot-item {
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-top: 1.4px solid #e2e2e2;
|
||||||
|
height: 122px;
|
||||||
|
padding-left: 14px;
|
||||||
|
align-items: center;
|
||||||
|
> img {
|
||||||
|
width: 76.3px;
|
||||||
|
height: 77.7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.hot-goods {
|
||||||
|
margin-left: 14px;
|
||||||
|
}
|
||||||
|
.hot-goods-title {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 16px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.hot-price {
|
||||||
|
margin-top: 10.3px;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 29px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #f31947;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,367 @@
|
||||||
|
<template>
|
||||||
|
<div class="goods-type-wrapper">
|
||||||
|
<div class="flex goods-type-line">
|
||||||
|
<div class="goods-type-title">{{ data.options.title }}</div>
|
||||||
|
<div class="flex goods-type-labels">
|
||||||
|
<div
|
||||||
|
@click="tabCurrentlyIndex = index"
|
||||||
|
:class="{ active: tabCurrentlyIndex === index }"
|
||||||
|
class="goods-type-item"
|
||||||
|
v-for="(item, index) in data.options.labels"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
{{ item.label }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 商品部分 -->
|
||||||
|
<div class="goods-list flex">
|
||||||
|
<div
|
||||||
|
class="goods-list-item"
|
||||||
|
v-for="(item, index) in data.options.list.filter((subset) => {
|
||||||
|
return subset.___index == tabCurrentlyIndex;
|
||||||
|
})"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<div class="goods-img">
|
||||||
|
<img :src="item.img" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="goods-name wes-2">{{ item.title }}</div>
|
||||||
|
<div class="goods-desc">{{ item.desc }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="goods-price">
|
||||||
|
{{ item.price | unitPrice("￥") }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setup-box">
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
@click.stop="handleSelectModel(data.options.list)"
|
||||||
|
>编辑</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
v-model="showModal"
|
||||||
|
title="装修"
|
||||||
|
draggable
|
||||||
|
width="800"
|
||||||
|
:z-index="100"
|
||||||
|
:mask-closable="false"
|
||||||
|
>
|
||||||
|
<div class="modal-tab-bar">
|
||||||
|
<div class="tab-bar">
|
||||||
|
标题
|
||||||
|
<Input style="width: 300px" v-model="data.options.title"></Input>
|
||||||
|
</div>
|
||||||
|
<div class="tab-bar" v-if="data.options.labels[tabCurrentlyIndex]">
|
||||||
|
标签
|
||||||
|
<Input
|
||||||
|
style="width: 300px"
|
||||||
|
v-model="data.options.labels[tabCurrentlyIndex].label"
|
||||||
|
></Input>
|
||||||
|
</div>
|
||||||
|
<Tabs
|
||||||
|
type="card"
|
||||||
|
@on-click="handleClickTab"
|
||||||
|
:value="tabIndex"
|
||||||
|
:draggable="true"
|
||||||
|
|
||||||
|
>
|
||||||
|
<Button @click="handleTabsAdd" size="small" slot="extra">增加</Button>
|
||||||
|
<TabPane
|
||||||
|
v-for="(tab,tabIndex) in data.options.labels"
|
||||||
|
:key="tabIndex"
|
||||||
|
:label="tab.label"
|
||||||
|
:name="tab.___index + ''"
|
||||||
|
>
|
||||||
|
<div class="flex flex-a-c">
|
||||||
|
<Button class="del-btn" type="primary" @click="handleContextMenuDelete(tab,tabIndex)">删除当前标签</Button>
|
||||||
|
<Button class="add-goods" @click="addCurrentGoods">
|
||||||
|
添加商品
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in data.options.list.filter((subset) => {
|
||||||
|
return subset.___index == tabCurrentlyIndex;
|
||||||
|
})"
|
||||||
|
:key="index"
|
||||||
|
class="draggable"
|
||||||
|
>
|
||||||
|
<div class="flex">
|
||||||
|
<img :src="item.img" class="column-img" />
|
||||||
|
<div class="flex column-goods-config">
|
||||||
|
<div class="column-config">
|
||||||
|
<div>
|
||||||
|
标题：
|
||||||
|
<Input v-model="item.title"></Input>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
描述：
|
||||||
|
<Input v-model="item.desc"></Input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button @click="delGoods(item)">删除</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabPane>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<!-- 选择商品。链接 -->
|
||||||
|
<liliDialog
|
||||||
|
ref="liliDialog"
|
||||||
|
@selectedLink="selectedLink"
|
||||||
|
@selectedGoodsData="selectedGoodsData"
|
||||||
|
></liliDialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "goods",
|
||||||
|
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabIndex:0,
|
||||||
|
current: 0,
|
||||||
|
showModal: false,
|
||||||
|
selected: {}, // 已选数据
|
||||||
|
picModelFlag: false,
|
||||||
|
tabCurrentlyIndex: 0, // 选项卡索引
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.tabIndex = this.data.options.labels[0].___index
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 算出最大的index 然后索引叠加
|
||||||
|
*/
|
||||||
|
handleTabsAdd() {
|
||||||
|
let findAllIndex = this.data.options.labels.map((item) => {
|
||||||
|
return item.___index;
|
||||||
|
});
|
||||||
|
let max = Math.max.apply(null, findAllIndex);
|
||||||
|
|
||||||
|
this.data.options.labels.push({
|
||||||
|
label: "标签" + (max + 1),
|
||||||
|
___index: max + 1,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 删除标签
|
||||||
|
handleContextMenuDelete(item,index) {
|
||||||
|
// 删除标签下关联的商品
|
||||||
|
this.data.options.list.forEach((lab,currently)=>{
|
||||||
|
if(lab.___index == item.___index){
|
||||||
|
this.data.options.list.splice(currently,1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
// 删除当前标签
|
||||||
|
this.data.options.labels.splice(index,1)
|
||||||
|
},
|
||||||
|
// 删除商品
|
||||||
|
delGoods(val) {
|
||||||
|
this.data.options.list.forEach((item, i) => {
|
||||||
|
if (
|
||||||
|
item.title == val.title &&
|
||||||
|
item.___index == this.tabCurrentlyIndex
|
||||||
|
) {
|
||||||
|
this.data.options.list.splice(i, 1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 切换选项卡
|
||||||
|
handleClickTab(name) {
|
||||||
|
console.log(name)
|
||||||
|
this.tabCurrentlyIndex = name;
|
||||||
|
},
|
||||||
|
// 添加当前选项卡中的商品
|
||||||
|
addCurrentGoods() {
|
||||||
|
|
||||||
|
this.$refs.liliDialog.clearGoodsSelected();
|
||||||
|
this.$refs.liliDialog.open("goods");
|
||||||
|
},
|
||||||
|
// 编辑模块
|
||||||
|
handleSelectModel(item) {
|
||||||
|
console.log(item);
|
||||||
|
this.selected = item;
|
||||||
|
this.showModal = true;
|
||||||
|
},
|
||||||
|
// 选择商品回调
|
||||||
|
selectedGoodsData(val) {
|
||||||
|
if (val.length) {
|
||||||
|
val.forEach((item) => {
|
||||||
|
const pushGoodsDetail = {
|
||||||
|
img: item.thumbnail,
|
||||||
|
price: item.price,
|
||||||
|
title: item.goodsName,
|
||||||
|
desc: "",
|
||||||
|
url: `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`,
|
||||||
|
___index: this.tabCurrentlyIndex,
|
||||||
|
};
|
||||||
|
this.data.options.list.push(pushGoodsDetail);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 选择链接回调
|
||||||
|
selectedLink(val) {
|
||||||
|
this.selected[this.current].url =
|
||||||
|
this.$options.filters.formatLinkType(val);
|
||||||
|
this.selected[this.current].type =
|
||||||
|
val.___type === "other" && val.url === "" ? "link" : "other";
|
||||||
|
|
||||||
|
console.log(this.selected[this.current]);
|
||||||
|
},
|
||||||
|
handleSelectLink(index) {
|
||||||
|
// 调起选择链接弹窗
|
||||||
|
this.$refs.liliDialog.open("link");
|
||||||
|
this.current = index;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import "./setup-box.scss";
|
||||||
|
.goods-type-wrapper {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.del-btn{
|
||||||
|
margin-left:10px;
|
||||||
|
}
|
||||||
|
.tab-bar {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.draggable {
|
||||||
|
padding: 10px;
|
||||||
|
border-bottom: 1px solid #ededed;
|
||||||
|
transition: 0.35s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #ededed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column-config {
|
||||||
|
margin-left: 10px;
|
||||||
|
> * {
|
||||||
|
margin: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column-img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
.add-goods {
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.goods-list {
|
||||||
|
position: relative;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
&:hover {
|
||||||
|
> .setup-box {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column-goods-config {
|
||||||
|
flex: 2;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.goods-list-item {
|
||||||
|
margin-bottom: 14.3px;
|
||||||
|
width: 287px;
|
||||||
|
height: 343.7px;
|
||||||
|
border-radius: 9.8px;
|
||||||
|
opacity: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #ffffff;
|
||||||
|
transition: 0.35s;
|
||||||
|
box-shadow: 0px 1px 13px 0px #e5e5e5;
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0px 1px 14px 0px #c5c5c5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.goods-img {
|
||||||
|
text-align: center;
|
||||||
|
> img {
|
||||||
|
width: auto;
|
||||||
|
max-height: 183px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.goods-name {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 22px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
width: 200px;
|
||||||
|
margin: 0 auto 12.4px auto;
|
||||||
|
color: #333333;
|
||||||
|
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||||
|
}
|
||||||
|
.goods-desc {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 17px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
margin-bottom: 12.4px;
|
||||||
|
color: #666666;
|
||||||
|
|
||||||
|
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||||
|
}
|
||||||
|
.goods-price {
|
||||||
|
font-size: 25.2px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #f31947;
|
||||||
|
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||||
|
}
|
||||||
|
.goods-type-line {
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
.goods-type-title {
|
||||||
|
font-size: 31px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 37px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
color: #f31947;
|
||||||
|
}
|
||||||
|
.goods-type-labels {
|
||||||
|
font-size: 21px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 25px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
}
|
||||||
|
.goods-type-item {
|
||||||
|
margin-left: 28px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,325 @@
|
||||||
|
<template>
|
||||||
|
<div class="mix-model">
|
||||||
|
<!-- 左侧 -->
|
||||||
|
<div class="left-card">
|
||||||
|
<left :data="data" />
|
||||||
|
<div class="setup-box">
|
||||||
|
<div>
|
||||||
|
<Button size="small" @click.stop="handleSelectModel('left')"
|
||||||
|
>编辑
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 右侧 -->
|
||||||
|
<div class="right-card">
|
||||||
|
<right :data="data" />
|
||||||
|
<div class="setup-box">
|
||||||
|
<div>
|
||||||
|
<Button size="small" @click.stop="handleSelectModel('right')"
|
||||||
|
>编辑
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Modal
|
||||||
|
v-model="showModal"
|
||||||
|
title="装修"
|
||||||
|
draggable
|
||||||
|
width="800"
|
||||||
|
:z-index="100"
|
||||||
|
:mask-closable="false"
|
||||||
|
>
|
||||||
|
<div v-if="current">
|
||||||
|
<div class="modal-tab-bar">
|
||||||
|
<div>
|
||||||
|
当前模块 :
|
||||||
|
<ButtonGroup>
|
||||||
|
<Button :type="current.model == 'goods' ? 'primary' : 'default'"
|
||||||
|
>商品</Button
|
||||||
|
>
|
||||||
|
<Button :type="current.model == 'brand' ? 'primary' : 'default'"
|
||||||
|
>品牌</Button
|
||||||
|
>
|
||||||
|
</ButtonGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex">
|
||||||
|
<div>图片 :</div>
|
||||||
|
<div>
|
||||||
|
<img class="image" :src="current.data.image.src" alt="" />
|
||||||
|
<div>
|
||||||
|
<div>推荐尺寸：{{ current.data.image.size }}</div>
|
||||||
|
<div class="link-src">
|
||||||
|
链接地址：
|
||||||
|
<Input
|
||||||
|
style="width: 200px"
|
||||||
|
v-model="current.data.image.url"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
type="primary"
|
||||||
|
@click="handleSelectImg('default')"
|
||||||
|
>选择图片
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
class="ml_10"
|
||||||
|
type="primary"
|
||||||
|
@click="handleSelectLink('image')"
|
||||||
|
>选择链接
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex" v-if="current.model == 'goods'">
|
||||||
|
<div>标签 :</div>
|
||||||
|
<Input
|
||||||
|
style="width: 200px"
|
||||||
|
type="text"
|
||||||
|
v-model="current.data.badge.label"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
style="width: 100px; margin-left: 10px"
|
||||||
|
disabled
|
||||||
|
type="text"
|
||||||
|
v-model="current.data.badge.url"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
class="ml_10"
|
||||||
|
type="primary"
|
||||||
|
@click="handleSelectLink('badge')"
|
||||||
|
>选择链接
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div class="flex column-list">
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in current.data.list"
|
||||||
|
:key="index"
|
||||||
|
class="draggable"
|
||||||
|
>
|
||||||
|
<div class="flex">
|
||||||
|
<img :src="item.img" class="column-img" />
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
class="ml_10"
|
||||||
|
type="primary"
|
||||||
|
v-if="current.model == 'goods'"
|
||||||
|
@click="handleSelectGoods('list', index)"
|
||||||
|
>选择商品
|
||||||
|
</Button>
|
||||||
|
<div>
|
||||||
|
<div v-if="current.model == 'brand'" style="margin-bottom: 10px">
|
||||||
|
<Input disabled v-model="item.url" />
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
class="ml_10"
|
||||||
|
type="primary"
|
||||||
|
v-if="current.model == 'brand'"
|
||||||
|
@click="handleSelectLink('list', index)"
|
||||||
|
>
|
||||||
|
选择链接
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
class="ml_10"
|
||||||
|
type="primary"
|
||||||
|
v-if="current.model == 'brand'"
|
||||||
|
@click="handleSelectImg('list', index)"
|
||||||
|
>选择图片
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<!-- 选择商品。链接 -->
|
||||||
|
<liliDialog
|
||||||
|
ref="liliDialog"
|
||||||
|
@selectedLink="selectedLink"
|
||||||
|
@selectedGoodsData="selectedGoodsData"
|
||||||
|
></liliDialog>
|
||||||
|
|
||||||
|
<!-- 选择图片 -->
|
||||||
|
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||||
|
<ossManage
|
||||||
|
@callback="callbackSelected"
|
||||||
|
:isComponent="true"
|
||||||
|
ref="ossManage"
|
||||||
|
/>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import left from "./mixs/mix-goods";
|
||||||
|
import right from "./mixs/mix-brand";
|
||||||
|
import ossManage from "@/views/sys/oss-manage/ossManage.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "mixModel",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showModal: false,
|
||||||
|
current: "", //当前选择的模块
|
||||||
|
picModelFlag: false,
|
||||||
|
selectedData: "", //选中的数据
|
||||||
|
goodsIndex: 0, // 商品索引
|
||||||
|
align: "",
|
||||||
|
defaultCallbackImageType: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
left,
|
||||||
|
right,
|
||||||
|
ossManage,
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
handleSelectImg(type, index) {
|
||||||
|
this.defaultCallbackImageType = type;
|
||||||
|
this.goodsIndex = index;
|
||||||
|
// 选择图片
|
||||||
|
this.$refs.ossManage.selectImage = true;
|
||||||
|
this.picModelFlag = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSelectGoods(val, index) {
|
||||||
|
this.$refs.liliDialog.open("goods");
|
||||||
|
this.$refs.liliDialog.singleGoods();
|
||||||
|
this.selectedData = val;
|
||||||
|
this.goodsIndex = index;
|
||||||
|
},
|
||||||
|
handleSelectLink(val, index) {
|
||||||
|
// 调起选择链接弹窗
|
||||||
|
this.$refs.liliDialog.open("link");
|
||||||
|
this.selectedData = val;
|
||||||
|
this.goodsIndex = index;
|
||||||
|
},
|
||||||
|
// 回显图片
|
||||||
|
callbackSelected(val) {
|
||||||
|
this.picModelFlag = false;
|
||||||
|
if (this.defaultCallbackImageType == "default") {
|
||||||
|
console.log(this.current.data.image);
|
||||||
|
this.current.data.image.src = val.url;
|
||||||
|
} else {
|
||||||
|
console.log(this.goodsIndex, this.data.options[this.align].data.list);
|
||||||
|
this.data.options[this.align].data.list[this.goodsIndex].img = val.url;
|
||||||
|
|
||||||
|
// this.data.options[this.align].data[this.selectedData][this.goodsIndex].url = val.img
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 选择商品回调
|
||||||
|
selectedGoodsData(val) {
|
||||||
|
console.log(val);
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.data.options[this.align].data.list[this.goodsIndex].img =
|
||||||
|
val[0].thumbnail;
|
||||||
|
this.data.options[this.align].data.list[this.goodsIndex].title =
|
||||||
|
val[0].goodsName;
|
||||||
|
this.data.options[this.align].data.list[this.goodsIndex].price =
|
||||||
|
val[0].price;
|
||||||
|
this.data.options[this.align].data.list[this.goodsIndex].url =
|
||||||
|
val[0].url;
|
||||||
|
});
|
||||||
|
console.log(this.data.options[this.align].data.list[this.goodsIndex]);
|
||||||
|
this.$forceUpdate();
|
||||||
|
},
|
||||||
|
// 选择链接回调
|
||||||
|
selectedLink(val) {
|
||||||
|
if (this.selectedData != "list") {
|
||||||
|
this.data.options[this.align].data[this.selectedData].url = this.$options.filters.formatLinkType(val);
|
||||||
|
console.log(this.data.options[this.align].data[this.selectedData])
|
||||||
|
}
|
||||||
|
if (this.selectedData == "list") {
|
||||||
|
this.data.options[this.align].data[this.selectedData][this.goodsIndex]
|
||||||
|
.url = this.$options.filters.formatLinkType(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/*
|
||||||
|
* 点击不同模块进行编辑
|
||||||
|
* 判断也很简单，就是第一个第二个模块进行判断
|
||||||
|
*
|
||||||
|
* */
|
||||||
|
handleSelectModel(align) {
|
||||||
|
this.align = align;
|
||||||
|
this.current = this.data.options[align];
|
||||||
|
console.log(this.data.options[align]);
|
||||||
|
this.showModal = true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import "./setup-box.scss";
|
||||||
|
|
||||||
|
.link-src {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mix-model {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-card,
|
||||||
|
.right-card {
|
||||||
|
width: 584px;
|
||||||
|
height: 344px;
|
||||||
|
border-radius: 10px;
|
||||||
|
opacity: 1;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0px 1px 13px 0px #e5e5e5;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.setup-box {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-list {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
max-width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-tab-bar {
|
||||||
|
> .flex {
|
||||||
|
align-items: center;
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.draggable {
|
||||||
|
> .flex {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,131 @@
|
||||||
|
<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>
|
||||||
|
<div>
|
||||||
|
<div class="badge-box flex">
|
||||||
|
<div class="round">
|
||||||
|
<Icon type="ios-arrow-forward" />
|
||||||
|
</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-thumbnail">
|
||||||
|
<img :src="item.img" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "mix-goods",
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.goods-detail{
|
||||||
|
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.badge-box{
|
||||||
|
margin-top: 33px;
|
||||||
|
justify-content:right;
|
||||||
|
>.round{
|
||||||
|
width: 17.5px;
|
||||||
|
height: 17.5px;
|
||||||
|
opacity: 1;
|
||||||
|
border-radius: 50%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 17.5px;
|
||||||
|
border: 0.7px solid #333333;
|
||||||
|
margin-right: 17.5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.goods-list{
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content:space-between;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
.goods-item{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width:50%;
|
||||||
|
height: 85px;
|
||||||
|
border-radius: 9.8px;
|
||||||
|
opacity: 1;
|
||||||
|
transition: .35s;
|
||||||
|
background: #FFFFFF;
|
||||||
|
margin-bottom:9px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
.left-side {
|
||||||
|
>img{
|
||||||
|
width: 254px;
|
||||||
|
height: 344px;
|
||||||
|
border-radius: 9.8px 0px 0px 9.8px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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>
|
||||||
|
|
@ -0,0 +1,124 @@
|
||||||
|
<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>
|
||||||
|
<div>
|
||||||
|
<div class="badge-box flex">
|
||||||
|
<div class="badge">
|
||||||
|
{{data.options.left.data.badge.label}}
|
||||||
|
</div>
|
||||||
|
</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">{{item.price | unitPrice('¥')}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "mix-goods",
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.goods-detail{
|
||||||
|
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.badge-box{
|
||||||
|
|
||||||
|
justify-content:right;
|
||||||
|
}
|
||||||
|
.goods-list{
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content:space-between;
|
||||||
|
padding: 0 16px;
|
||||||
|
}
|
||||||
|
.goods-item{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 173.6px;
|
||||||
|
height: 119px;
|
||||||
|
border-radius: 9.8px;
|
||||||
|
opacity: 1;
|
||||||
|
transition: .35s;
|
||||||
|
background: #FFFFFF;
|
||||||
|
margin-bottom:9px;
|
||||||
|
&:hover{
|
||||||
|
box-shadow: 0px 1px 6px 0px #E5E5E5;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.left-side {
|
||||||
|
>img{
|
||||||
|
border-radius: 10px 0px 0px 10px;
|
||||||
|
display: block;
|
||||||
|
width: 196.7px;
|
||||||
|
height: 343.7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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>
|
||||||
|
|
@ -0,0 +1,154 @@
|
||||||
|
<template>
|
||||||
|
<div class="line flex flex-j-sb">
|
||||||
|
<div class="column" v-for="(item,index) in data.options.list" :key="index">
|
||||||
|
<div v-if="!item.img" class="placeholder">占位符</div>
|
||||||
|
<img v-else :src="item.img" class="three-column-img">
|
||||||
|
</div>
|
||||||
|
<div class="setup-box">
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
@click.stop="handleSelectModel(data.options.list)"
|
||||||
|
>编辑</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Modal
|
||||||
|
v-model="showModal"
|
||||||
|
title="装修"
|
||||||
|
draggable
|
||||||
|
width="800"
|
||||||
|
:z-index="100"
|
||||||
|
:mask-closable="false"
|
||||||
|
>
|
||||||
|
<div class="modal-tab-bar">
|
||||||
|
<div v-for="(item,index) in data.options.list" :key="index">
|
||||||
|
<img :src="item.img" class="three-column-img">
|
||||||
|
<div>推荐尺寸：{{item.size}}</div>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
class="ml_10"
|
||||||
|
type="primary"
|
||||||
|
@click="handleSelectImg(index)"
|
||||||
|
>选择图片</Button
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
class="ml_10"
|
||||||
|
type="primary"
|
||||||
|
@click="handleSelectLink(index)"
|
||||||
|
>选择链接</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
<!-- 选择商品。链接 -->
|
||||||
|
<liliDialog
|
||||||
|
ref="liliDialog"
|
||||||
|
@selectedLink="selectedLink"
|
||||||
|
@selectedGoodsData="selectedGoodsData"
|
||||||
|
></liliDialog>
|
||||||
|
<!-- 选择图片 -->
|
||||||
|
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||||
|
<ossManage
|
||||||
|
@callback="callbackSelected"
|
||||||
|
:isComponent="true"
|
||||||
|
ref="ossManage"
|
||||||
|
/>
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||||
|
export default {
|
||||||
|
name: "oneRowThreeColumns",
|
||||||
|
components:{ossManage},
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
showModal:false,
|
||||||
|
selected: {}, // 已选数据
|
||||||
|
picModelFlag:false,
|
||||||
|
current:0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 回显图片
|
||||||
|
callbackSelected(val) {
|
||||||
|
this.picModelFlag = false;
|
||||||
|
this.selected[this.current].img = val.url;
|
||||||
|
console.log(this.selected)
|
||||||
|
},
|
||||||
|
// 编辑模块
|
||||||
|
handleSelectModel(item) {
|
||||||
|
this.selected = item;
|
||||||
|
this.showModal = true;
|
||||||
|
|
||||||
|
},
|
||||||
|
// 选择商品回调
|
||||||
|
selectedGoodsData(val) {
|
||||||
|
console.log(val);
|
||||||
|
let goods = val[0];
|
||||||
|
this.selected.img = goods.thumbnail;
|
||||||
|
this.selected.price = goods.price;
|
||||||
|
this.selected.name = goods.goodsName;
|
||||||
|
this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
|
||||||
|
},
|
||||||
|
// 选择链接回调
|
||||||
|
selectedLink(val) {
|
||||||
|
this.selected.url = this.$options.filters.formatLinkType(val);
|
||||||
|
this.selected.type =
|
||||||
|
val.___type === "other" && val.url === "" ? "link" : "other";
|
||||||
|
},
|
||||||
|
handleSelectLink(index) {
|
||||||
|
// 调起选择链接弹窗
|
||||||
|
this.$refs.liliDialog.open("link");
|
||||||
|
this.current = index;
|
||||||
|
},
|
||||||
|
handleSelectImg(index){
|
||||||
|
// 选择图片
|
||||||
|
this.$refs.ossManage.selectImage = true;
|
||||||
|
this.picModelFlag = true;
|
||||||
|
this.current = index;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import "./setup-box.scss";
|
||||||
|
.three-column-img{
|
||||||
|
width:385px;
|
||||||
|
height: 165px
|
||||||
|
}
|
||||||
|
.line:hover{
|
||||||
|
>.setup-box{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.placeholder{
|
||||||
|
background: #666;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.line{
|
||||||
|
position: relative;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.column{
|
||||||
|
width: 385px;
|
||||||
|
height: 165px;
|
||||||
|
|
||||||
|
>img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,280 @@
|
||||||
|
<template>
|
||||||
|
<div class="goods-type-wrapper">
|
||||||
|
<!-- 商品部分 -->
|
||||||
|
<div class="goods-list flex">
|
||||||
|
<div
|
||||||
|
class="goods-list-item"
|
||||||
|
v-for="(item, index) in data.options.list"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<div class="goods-name wes-2">{{ item.title }}</div>
|
||||||
|
<div class="goods-desc">{{ item.desc }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="goods-img">
|
||||||
|
<img :src="item.img" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="setup-box">
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
@click.stop="handleSelectModel(data.options.list)"
|
||||||
|
>编辑</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Modal
|
||||||
|
v-model="showModal"
|
||||||
|
title="装修"
|
||||||
|
draggable
|
||||||
|
width="800"
|
||||||
|
:z-index="100"
|
||||||
|
:mask-closable="false"
|
||||||
|
>
|
||||||
|
<div class="modal-tab-bar">
|
||||||
|
<div class="flex flex-a-c">
|
||||||
|
<Button class="add-goods" @click="addCurrentGoods">
|
||||||
|
添加商品
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-for="(item, index) in data.options.list"
|
||||||
|
:key="index"
|
||||||
|
class="draggable"
|
||||||
|
>
|
||||||
|
<div class="flex">
|
||||||
|
<img :src="item.img" class="column-img" />
|
||||||
|
<div class="flex column-goods-config">
|
||||||
|
<div class="column-config">
|
||||||
|
<div>
|
||||||
|
标题：
|
||||||
|
<Input v-model="item.title"></Input>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
描述：
|
||||||
|
<Input v-model="item.desc"></Input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button @click="delGoods(item,index)">删除</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
|
<!-- 选择商品。链接 -->
|
||||||
|
<liliDialog
|
||||||
|
ref="liliDialog"
|
||||||
|
@selectedLink="selectedLink"
|
||||||
|
@selectedGoodsData="selectedGoodsData"
|
||||||
|
></liliDialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "onlyGoodsList",
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
flag:false,
|
||||||
|
tabIndex:0,
|
||||||
|
current: 0,
|
||||||
|
showModal: false,
|
||||||
|
selected: {}, // 已选数据
|
||||||
|
picModelFlag: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 删除商品
|
||||||
|
delGoods(val,i) {
|
||||||
|
this.data.options.list.splice(i, 1);
|
||||||
|
},
|
||||||
|
// 添加当前选项卡中的商品
|
||||||
|
addCurrentGoods() {
|
||||||
|
this.$refs.liliDialog.open("goods");
|
||||||
|
},
|
||||||
|
// 编辑模块
|
||||||
|
handleSelectModel(item) {
|
||||||
|
console.log(item);
|
||||||
|
this.selected = item;
|
||||||
|
this.showModal = true;
|
||||||
|
},
|
||||||
|
// 选择商品回调
|
||||||
|
selectedGoodsData(val) {
|
||||||
|
if (val.length) {
|
||||||
|
val.forEach((item) => {
|
||||||
|
const pushGoodsDetail = {
|
||||||
|
img: item.thumbnail,
|
||||||
|
price: item.price,
|
||||||
|
title: item.goodsName,
|
||||||
|
desc: "",
|
||||||
|
url: `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`,
|
||||||
|
};
|
||||||
|
this.data.options.list.push(pushGoodsDetail);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 选择链接回调
|
||||||
|
selectedLink(val) {
|
||||||
|
this.selected[this.current].url =
|
||||||
|
this.$options.filters.formatLinkType(val);
|
||||||
|
this.selected[this.current].type =
|
||||||
|
val.___type === "other" && val.url === "" ? "link" : "other";
|
||||||
|
|
||||||
|
console.log(this.selected[this.current]);
|
||||||
|
},
|
||||||
|
handleSelectLink(index) {
|
||||||
|
// 调起选择链接弹窗
|
||||||
|
this.$refs.liliDialog.open("link");
|
||||||
|
this.current = index;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
@import "./setup-box.scss";
|
||||||
|
.goods-type-wrapper {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.del-btn{
|
||||||
|
margin-left:10px;
|
||||||
|
}
|
||||||
|
.tab-bar {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.draggable {
|
||||||
|
padding: 10px;
|
||||||
|
border-bottom: 1px solid #ededed;
|
||||||
|
transition: 0.35s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #ededed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column-config {
|
||||||
|
margin-left: 10px;
|
||||||
|
> * {
|
||||||
|
margin: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column-img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
.add-goods {
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.goods-list {
|
||||||
|
position: relative;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
&:hover {
|
||||||
|
> .setup-box {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.column-goods-config {
|
||||||
|
flex: 2;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.goods-list-item {
|
||||||
|
padding-top: 34.8px;
|
||||||
|
margin-bottom: 14.3px;
|
||||||
|
width: 287px;
|
||||||
|
height: 343.7px;
|
||||||
|
border-radius: 9.8px;
|
||||||
|
opacity: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #ffffff;
|
||||||
|
transition: 0.35s;
|
||||||
|
box-shadow: 0px 1px 13px 0px #e5e5e5;
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0px 1px 14px 0px #c5c5c5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.goods-img {
|
||||||
|
text-align: center;
|
||||||
|
> img {
|
||||||
|
width: auto;
|
||||||
|
max-height: 183px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.goods-name {
|
||||||
|
margin-bottom: 11.9px;
|
||||||
|
font-size: 25px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
|
||||||
|
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||||
|
}
|
||||||
|
.goods-desc {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 19px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #666666;
|
||||||
|
|
||||||
|
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||||
|
}
|
||||||
|
.goods-price {
|
||||||
|
font-size: 25.2px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #f31947;
|
||||||
|
-webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
|
||||||
|
}
|
||||||
|
.goods-type-line {
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
.goods-type-title {
|
||||||
|
font-size: 31px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 37px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
color: #f31947;
|
||||||
|
}
|
||||||
|
.goods-type-labels {
|
||||||
|
font-size: 21px;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 25px;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
}
|
||||||
|
.goods-type-item {
|
||||||
|
margin-left: 28px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,291 @@
|
||||||
|
<template>
|
||||||
|
<div class="seckill">
|
||||||
|
<div class="desc">秒杀商品需要在促销活动中添加商品，有商品时才会在首页展示</div>
|
||||||
|
<div class="aside">
|
||||||
|
<div class="title">{{ actName }}</div>
|
||||||
|
<div class="hour">
|
||||||
|
<span>{{ currHour }}:00</span>点场 倒计时
|
||||||
|
</div>
|
||||||
|
<div class="count-down" v-if="actStatus === 1">
|
||||||
|
<span>{{ hours }}</span
|
||||||
|
><span>{{ minutes }}</span
|
||||||
|
><span>{{ seconds }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="act-status" v-else>
|
||||||
|
{{ actStatus == 0 ? "未开始" : "已结束" }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="section">
|
||||||
|
<swiper ref="mySwiper" :options="swiperOptions">
|
||||||
|
<swiper-slide
|
||||||
|
v-for="(item, index) in options.list[0].goodsList"
|
||||||
|
:key="index"
|
||||||
|
>
|
||||||
|
<div class="content">
|
||||||
|
<img :src="item.img" width="140" height="140" :alt="item.name" />
|
||||||
|
<div class="ellipsis">{{ item.name }}</div>
|
||||||
|
<div>
|
||||||
|
<span>{{ item.price | unitPrice("￥") }}</span>
|
||||||
|
<span>{{ item.originalPrice | unitPrice("￥") }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</swiper-slide>
|
||||||
|
</swiper>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
|
||||||
|
import "swiper/swiper-bundle.css";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
Swiper,
|
||||||
|
SwiperSlide,
|
||||||
|
},
|
||||||
|
directives: {
|
||||||
|
swiper: directive,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
options: this.data.options, // 当前数据
|
||||||
|
actStatus: 0, // 0 未开始 1 进行中 2 已结束
|
||||||
|
actName: "限时秒杀",
|
||||||
|
currHour: "00", // 当前秒杀场
|
||||||
|
diffSeconds: 0, // 倒地时
|
||||||
|
hours: "00", // 小时
|
||||||
|
minutes: "00", // 分钟
|
||||||
|
seconds: "00", // 秒
|
||||||
|
interval: undefined, // 定时器
|
||||||
|
swiperOptions: {
|
||||||
|
// 轮播图参数
|
||||||
|
slidesPerView: 5,
|
||||||
|
autoplay: true,
|
||||||
|
loop: true,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
diffSeconds(val) {
|
||||||
|
const hours = Math.floor(val / 3600);
|
||||||
|
// 当前秒数 / 60，向下取整
|
||||||
|
// 获取到所有分钟数 3600 / 60 = 60分钟
|
||||||
|
// 对60取模，超过小时数的分钟数
|
||||||
|
const minutes = Math.floor(val / 60) % 60;
|
||||||
|
// 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
|
||||||
|
const seconds = val % 60;
|
||||||
|
this.hours = hours < 10 ? "0" + hours : hours;
|
||||||
|
this.minutes = minutes < 10 ? "0" + minutes : minutes;
|
||||||
|
this.seconds = seconds < 10 ? "0" + seconds : seconds;
|
||||||
|
|
||||||
|
if (val === 0) {
|
||||||
|
clearInterval(this.interval);
|
||||||
|
this.hours = 0;
|
||||||
|
this.minutes = 0;
|
||||||
|
this.seconds = 0;
|
||||||
|
this.countDown(this.options.list);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.countDown(this.options.list);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
clearInterval(this.interval);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 倒计时
|
||||||
|
countDown(list) {
|
||||||
|
/**
|
||||||
|
* 默认倒计时两小时
|
||||||
|
* 如果没有开始，则显示未开始
|
||||||
|
* 进行中显示倒计时
|
||||||
|
* 今天的秒杀结束则显示已结束
|
||||||
|
*/
|
||||||
|
let nowHour = new Date().getHours();
|
||||||
|
if (nowHour < Number(list[0].time)) {
|
||||||
|
// 活动未开始
|
||||||
|
this.currHour = list[0].time;
|
||||||
|
this.actStatus = 0;
|
||||||
|
} else if (nowHour >= Number(list[list.length - 1].time + 2)) {
|
||||||
|
// 活动已结束
|
||||||
|
this.actStatus = 2;
|
||||||
|
this.currHour = list[list.length - 1].time;
|
||||||
|
} else {
|
||||||
|
// 活动进行中
|
||||||
|
this.actStatus = 1;
|
||||||
|
for (let i = 0; i < list.length; i++) {
|
||||||
|
if (nowHour == Number(list[i].time)) {
|
||||||
|
this.currHour = list[i].time;
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
nowHour > Number(list[i].time) &&
|
||||||
|
nowHour < Number(list[i].time + 2)
|
||||||
|
) {
|
||||||
|
this.currHour = list[i].time;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 当前0点时间戳
|
||||||
|
let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
|
||||||
|
// 活动倒计时
|
||||||
|
this.diffSeconds = Math.floor(
|
||||||
|
(zeroTime +
|
||||||
|
3600 * 1000 * (this.currHour + 2) -
|
||||||
|
new Date().getTime()) /
|
||||||
|
1000
|
||||||
|
);
|
||||||
|
const that = this;
|
||||||
|
this.interval = setInterval(() => {
|
||||||
|
this.diffSeconds--;
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.seckill {
|
||||||
|
width: 100%;
|
||||||
|
height: 260px;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
.desc{
|
||||||
|
position: absolute;
|
||||||
|
color: $theme_color;
|
||||||
|
left: 200px;
|
||||||
|
top: 5px;
|
||||||
|
}
|
||||||
|
.aside {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 190px;
|
||||||
|
height: 100%;
|
||||||
|
color: #fff;
|
||||||
|
background-image: url("../../../assets/seckillBg.png");
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 28px;
|
||||||
|
margin-top: 31px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hour {
|
||||||
|
margin-top: 90px;
|
||||||
|
text-align: center;
|
||||||
|
span {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.count-down {
|
||||||
|
margin: 10px 0 0 30px;
|
||||||
|
> span {
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #2f3430;
|
||||||
|
margin-right: 20px;
|
||||||
|
color: white;
|
||||||
|
font-size: 20px;
|
||||||
|
&::after {
|
||||||
|
content: ":";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
right: -20px;
|
||||||
|
font-weight: bolder;
|
||||||
|
font-size: 18px;
|
||||||
|
width: 20px;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
> span:last-child::after {
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.act-status {
|
||||||
|
margin: 10px 0 0 65px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
width: 1000px;
|
||||||
|
// background: #efefef;
|
||||||
|
.swiper-slide {
|
||||||
|
height: 260px;
|
||||||
|
.content {
|
||||||
|
width: 200px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
width: 1px;
|
||||||
|
height: 200px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
background: linear-gradient(180deg, white, #eeeeee, white);
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
> div {
|
||||||
|
width: 160px;
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
> div:nth-of-type(1):hover {
|
||||||
|
color: $theme_color;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
> div:nth-of-type(2) {
|
||||||
|
border: 1px solid $theme_color;
|
||||||
|
line-height: 24px;
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
span:nth-child(1) {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
width: 92px;
|
||||||
|
background-color: $theme_color;
|
||||||
|
position: relative;
|
||||||
|
&::before {
|
||||||
|
content: " ";
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-color: transparent white transparent transparent;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 24px 8px 0 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 84px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span:nth-child(2) {
|
||||||
|
color: #999;
|
||||||
|
width: 66px;
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -49,7 +49,7 @@ export default {
|
||||||
// 提交模板
|
// 提交模板
|
||||||
submitTemplate(pageShow) {
|
submitTemplate(pageShow) {
|
||||||
this.submitLoading = true
|
this.submitLoading = true
|
||||||
const modelForm = JSON.parse(JSON.stringify(this.modelForm))
|
const modelForm = JSON.parse(JSON.stringify(this.modelForm))
|
||||||
modelForm.list.unshift(this.$refs.modelForm.navList);
|
modelForm.list.unshift(this.$refs.modelForm.navList);
|
||||||
modelForm.list.unshift(this.$refs.modelForm.topAdvert);
|
modelForm.list.unshift(this.$refs.modelForm.topAdvert);
|
||||||
const data = {
|
const data = {
|
||||||
|
|
@ -107,8 +107,9 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
.model-list {
|
.model-list {
|
||||||
width: 120px;
|
width: 130px;
|
||||||
height: auto;
|
height: 620px;
|
||||||
|
overflow-y: auto;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
margin-top: 60px;
|
margin-top: 60px;
|
||||||
|
|
@ -121,17 +122,21 @@ export default {
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
}
|
}
|
||||||
.model-item {
|
.model-item {
|
||||||
width: 100px;
|
width: 110px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
background: #eee;
|
background: #eee;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #999;
|
color: #999;
|
||||||
|
transition:0.15s;
|
||||||
|
border-radius: 4px;
|
||||||
&:hover {
|
&:hover {
|
||||||
border: 1px dashed #409eff;
|
|
||||||
color: #409eff;
|
background: $theme_color;
|
||||||
cursor: move;
|
cursor: move;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ghost::after {
|
.ghost::after {
|
||||||
|
|
|
||||||
|
|
@ -149,7 +149,7 @@ import {
|
||||||
import Editor from "@tinymce/tinymce-vue";
|
import Editor from "@tinymce/tinymce-vue";
|
||||||
import { initEditor } from "@/components/editor/config";
|
import { initEditor } from "@/components/editor/config";
|
||||||
export default {
|
export default {
|
||||||
name: "article",
|
|
||||||
components: {
|
components: {
|
||||||
editor: Editor,
|
editor: Editor,
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -128,7 +128,7 @@ li {
|
||||||
$success_color: #68cabe;
|
$success_color: #68cabe;
|
||||||
$warning_color: #fa6419;
|
$warning_color: #fa6419;
|
||||||
$error_color: #ff3c2a;
|
$error_color: #ff3c2a;
|
||||||
$theme_color: #FF5C58;
|
$theme_color: #F31947;
|
||||||
.theme_color {
|
.theme_color {
|
||||||
color: $theme_color !important;
|
color: $theme_color !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
@import "~view-design/src/styles/index.less";
|
@import "~view-design/src/styles/index.less";
|
||||||
// iview 自定义样式
|
// iview 自定义样式
|
||||||
|
|
||||||
@primary-color: #ff5c58;
|
@primary-color: #F31947;
|
||||||
@info-color: #fa6419;
|
@info-color: #fa6419;
|
||||||
@success-color: #68cabe;
|
@success-color: #68cabe;
|
||||||
@error-color: #ff3c2a;
|
@error-color: #ff3c2a;
|
||||||
@table-thead-bg: #f8f8f9;
|
@table-thead-bg: #f8f8f9;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue