文件名大小写修改
mabo
parent
2792d24e98
commit
ad17d8b743
|
|
@ -7,7 +7,7 @@ import FixedTopPage from '@/components/advertising/FixedTop'; // 顶部广告
|
|||
import Footer from '@/components/footer/Footer'; // 底部栏
|
||||
import Search from '@/components/Search' // 搜索框
|
||||
import card from '@/components/card' // 个人中心 卡片
|
||||
import cateNav from '@/components/nav/cateNav' // 个人中心 卡片
|
||||
import cateNav from '@/components/nav/CateNav' // 个人中心 卡片
|
||||
|
||||
empty.install = function (Vue) {
|
||||
Vue.component('empty', empty);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<div class="model-form">
|
||||
<div class="model-content">
|
||||
<template v-for="(element, index) in data.list">
|
||||
<model-form-item
|
||||
v-if="element && element.key"
|
||||
:key="element.key"
|
||||
:element="element"
|
||||
:index="index"
|
||||
:data="data"
|
||||
></model-form-item>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ModelFormItem from './ModelFormItem.vue';
|
||||
export default {
|
||||
name: 'modelForm',
|
||||
components: {
|
||||
ModelFormItem
|
||||
},
|
||||
props: ['data']
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.model-content {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
// background: #fff;
|
||||
min-height: 1200px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,283 @@
|
|||
<template>
|
||||
<div class="model-item" v-if="element && element.key">
|
||||
<!-- 轮播图模块，包括个人信息，快捷导航模块 -->
|
||||
<template v-if="element.type == 'carousel'">
|
||||
<model-carousel :data="element" class="mb_20"></model-carousel>
|
||||
</template>
|
||||
<!-- 热门广告 -->
|
||||
<template v-if="element.type == 'hotAdvert'">
|
||||
<div class="mb_20">
|
||||
<img
|
||||
style="display: block"
|
||||
class="hover-pointer"
|
||||
:src="element.options.list[0].img"
|
||||
@click="linkTo(element.options.list[0].url)"
|
||||
width="1200"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<ul class="advert-list">
|
||||
<template v-for="(item, index) in element.options.list">
|
||||
<li
|
||||
v-if="index !== 0"
|
||||
@click="linkTo(item.url)"
|
||||
class="hover-pointer"
|
||||
:key="index"
|
||||
>
|
||||
<img :src="item.img" width="230" height="190" alt="" />
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</template>
|
||||
<!-- 限时秒杀 待完善 -->
|
||||
<!-- <template v-if="element.type == 'seckill'">
|
||||
<seckill class="mb_20"></seckill>
|
||||
</template> -->
|
||||
<!-- 折扣广告 -->
|
||||
<template v-if="element.type == 'discountAdvert'">
|
||||
<div
|
||||
class="discountAdvert mb_20"
|
||||
:style="{'backgroundImage' :'url(' + require('@/assets/images/decorate.png')+')'}"
|
||||
>
|
||||
<img
|
||||
@click="linkTo(item.url)"
|
||||
class="hover-pointer"
|
||||
v-for="(item, index) in element.options.classification"
|
||||
:key="index"
|
||||
:src="item.img"
|
||||
width="190"
|
||||
height="210"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
@click="linkTo(item.url)"
|
||||
class="hover-pointer"
|
||||
v-for="(item, index) in element.options.brandList"
|
||||
:key="'discount' + index"
|
||||
:src="item.img"
|
||||
width="240"
|
||||
height="105"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 好货推荐 -->
|
||||
<template v-if="element.type == 'recommend'">
|
||||
<recommend :data="element" class="mb_20"></recommend>
|
||||
</template>
|
||||
<!-- 新品排行 -->
|
||||
<template v-if="element.type == 'newGoodsSort'">
|
||||
<new-goods-sort :data="element" class="mb_20"></new-goods-sort>
|
||||
</template>
|
||||
<!-- 首页广告 -->
|
||||
<template v-if="element.type == 'firstAdvert'">
|
||||
<first-page-advert :data="element" class="mb_20"></first-page-advert>
|
||||
</template>
|
||||
<!-- 横幅广告 -->
|
||||
<template v-if="element.type == 'bannerAdvert'">
|
||||
<img
|
||||
width="1200"
|
||||
class="hover-pointer mb_20"
|
||||
@click="linkTo(element.options.url)"
|
||||
:src="element.options.img"
|
||||
alt=""
|
||||
/>
|
||||
</template>
|
||||
<template v-if="element.type == 'notEnough'">
|
||||
<not-enough :data="element" class="mb_20"></not-enough>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModelCarousel from './modelList/Carousel.vue';
|
||||
import FirstPageAdvert from './modelList/FirstPageAdvert.vue';
|
||||
import NewGoodsSort from './modelList/NewGoodsSort.vue';
|
||||
import Recommend from './modelList/Recommend.vue';
|
||||
import NotEnough from './modelList/NotEnough.vue';
|
||||
import Seckill from './modelList/Seckill.vue';
|
||||
|
||||
export default {
|
||||
name: 'modelFormItem',
|
||||
props: ['element', 'select', 'index', 'data'],
|
||||
components: {
|
||||
ModelCarousel,
|
||||
Recommend,
|
||||
NewGoodsSort,
|
||||
FirstPageAdvert,
|
||||
NotEnough,
|
||||
Seckill
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showModal: false, // 控制模态框显隐
|
||||
selected: {} // 已选数据
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.model-item {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/** 热门广告 */
|
||||
.advert-list {
|
||||
background: $theme_color;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 3px 10px;
|
||||
> li {
|
||||
img {
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
transition: all 150ms ease-in-out;
|
||||
&:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 20px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/** 限时秒杀 */
|
||||
.limit-img {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
img {
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
/** 折扣广告 */
|
||||
.discountAdvert {
|
||||
height: 566px;
|
||||
background-repeat: no-repeat;
|
||||
margin-left: -97px;
|
||||
position: relative;
|
||||
padding-left: 295px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: start;
|
||||
img {
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
transition: all 150ms ease-in-out;
|
||||
&:hover {
|
||||
box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.4);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
/** 首页品牌 */
|
||||
.brand {
|
||||
.brand-view {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
.brand-view-content {
|
||||
width: 470px;
|
||||
margin-left: 10px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 316px;
|
||||
}
|
||||
.brand-view-title {
|
||||
height: 50px;
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.brand-view-content:first-child {
|
||||
width: 240px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.brand-list {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
li {
|
||||
width: 121px;
|
||||
height: 112px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid #f5f5f5;
|
||||
margin: -1px -1px 0 0;
|
||||
&:hover {
|
||||
.brand-mash {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.brand-img {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
img {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.brand-mash {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
.ivu-icon {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
div:last-child {
|
||||
background-color: $theme_color;
|
||||
border-radius: 9px;
|
||||
padding: 0 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.refresh {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.ivu-icon {
|
||||
font-size: 18px;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $theme_color;
|
||||
color: #fff;
|
||||
.ivu-icon {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 装修模态框 内部样式start */
|
||||
.modal-top-advert {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
> * {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ModelFormItem from './modelFormItem.vue';
|
||||
import ModelFormItem from './ModelFormItem.vue';
|
||||
export default {
|
||||
name: 'modelForm',
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -91,12 +91,12 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import ModelCarousel from './modelList/carousel.vue';
|
||||
import FirstPageAdvert from './modelList/firstPageAdvert.vue';
|
||||
import NewGoodsSort from './modelList/newGoodsSort.vue';
|
||||
import Recommend from './modelList/recommend.vue';
|
||||
import NotEnough from './modelList/notEnough.vue';
|
||||
import Seckill from './modelList/seckill.vue';
|
||||
import ModelCarousel from './modelList/Carousel.vue';
|
||||
import FirstPageAdvert from './modelList/FirstPageAdvert.vue';
|
||||
import NewGoodsSort from './modelList/NewGoodsSort.vue';
|
||||
import Recommend from './modelList/Recommend.vue';
|
||||
import NotEnough from './modelList/NotEnough.vue';
|
||||
import Seckill from './modelList/Seckill.vue';
|
||||
|
||||
export default {
|
||||
name: 'modelFormItem',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,180 @@
|
|||
<template>
|
||||
<div class="model-carousel">
|
||||
<div class="nav-body clearfix">
|
||||
<!-- 侧边导航占位 -->
|
||||
<div class="nav-side"></div>
|
||||
<div class="nav-content">
|
||||
<!-- 轮播图 -->
|
||||
<Carousel autoplay>
|
||||
<CarouselItem v-for="(item, index) in data.options.list" :key="index">
|
||||
<div style="overflow: hidden">
|
||||
<img
|
||||
:src="item.img"
|
||||
width="790"
|
||||
@click="linkTo(item.url)"
|
||||
height="340"
|
||||
class="hover-pointer"
|
||||
/>
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</Carousel>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<div class="person-msg">
|
||||
<img :src="userInfo.face" v-if="userInfo.face" alt />
|
||||
<Avatar icon="ios-person" class="mb_10" v-else size="80" />
|
||||
<div>Hi，{{ userInfo.nickName || "欢迎来到LiLi Shop" | secrecyMobile }}</div>
|
||||
<div v-if="userInfo.id">
|
||||
<Button type="error" shape="circle" @click="$router.push('home')">会员中心</Button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<Button type="error" @click="$router.push('login')" shape="circle"
|
||||
>请登录</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shop-msg">
|
||||
<div>
|
||||
<span>常见问题</span>
|
||||
<ul class="article-list">
|
||||
<li class="ellipsis" :alt="article.title" v-for="(article, index) in articleList" :key="index" @click="goArticle(article.id)">
|
||||
{{article.title}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {articleList} from '@/api/common.js'
|
||||
import storage from '@/plugins/storage';
|
||||
export default {
|
||||
name: 'modelCarousel',
|
||||
props: ['data'],
|
||||
data () {
|
||||
return {
|
||||
userInfo: {}, // 用户信息
|
||||
articleList: [], // 常见问题
|
||||
params: { // 请求常见问题参数
|
||||
pageNumber: 1,
|
||||
pageSize: 5,
|
||||
type: 'ANNOUNCEMENT',
|
||||
sort: 'sort'
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getArticleList () { // 获取常见问题列表
|
||||
articleList(this.params).then(res => {
|
||||
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 () {
|
||||
if (storage.getItem('userInfo')) this.userInfo = JSON.parse(storage.getItem('userInfo'));
|
||||
this.getArticleList()
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.model-carousel {
|
||||
width: 1200px;
|
||||
height: 340px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 导航主体 */
|
||||
.nav-body {
|
||||
width: 1200px;
|
||||
height: 340px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
.nav-side {
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
float: left;
|
||||
padding: 0px;
|
||||
color: #fff;
|
||||
background-color: #6e6568;
|
||||
}
|
||||
|
||||
/*导航内容*/
|
||||
.nav-content {
|
||||
width: 790px;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
.nav-right {
|
||||
float: left;
|
||||
width: 210px;
|
||||
.person-msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin: 20px auto;
|
||||
button {
|
||||
height: 25px !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.ivu-btn-default {
|
||||
color: $theme_color;
|
||||
border-color: $theme_color;
|
||||
}
|
||||
img {
|
||||
margin-bottom: 10px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.shop-msg {
|
||||
div {
|
||||
width: 100%;
|
||||
margin: 10px 27px;
|
||||
span {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
}
|
||||
span:nth-child(1) {
|
||||
@include content_color($theme_color);
|
||||
margin-left: 0;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-weight: normal;
|
||||
}
|
||||
span:nth-child(3):hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
cursor: pointer;
|
||||
margin: 5px 0;
|
||||
color: #999395;
|
||||
width: 150px;
|
||||
font-size: 12px;
|
||||
&:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<div class="first-page-advert">
|
||||
<div
|
||||
class="item hover-pointer"
|
||||
@click="linkTo(item.url)"
|
||||
:style="{
|
||||
backgroundImage: `linear-gradient(to right, ${item.fromColor}, ${item.toColor})`,
|
||||
}"
|
||||
v-for="(item, index) in options.list"
|
||||
:key="index"
|
||||
>
|
||||
<div>
|
||||
<span class="line top-line"></span>
|
||||
<p>{{ item.name }}</p>
|
||||
<span class="line btm-line"></span>
|
||||
<p>{{ item.describe }}</p>
|
||||
</div>
|
||||
<img :src="item.img" width="170" height="170" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
options: this.data.options // 装修数据
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.first-page-advert {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
// margin-top: -10px;
|
||||
.item {
|
||||
width: 393px;
|
||||
height: 170px;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
margin-left: 20px;
|
||||
transition: transform 0.5s, -webkit-transform 0.5s, -moz-transform 0.5s;
|
||||
&:hover {
|
||||
transform: translateX(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-of-type(1),
|
||||
&:nth-of-type(2),
|
||||
&:nth-of-type(3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
p:nth-of-type(1) {
|
||||
margin: 3px 0;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
p:nth-of-type(2) {
|
||||
margin-top: 3px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 2px;
|
||||
background: url(../../../assets/images/festival_icon.png);
|
||||
z-index: 1;
|
||||
}
|
||||
.top-line {
|
||||
width: 78px;
|
||||
background-position: -1px -3px;
|
||||
}
|
||||
.btm-line {
|
||||
background-position: 0 -11px;
|
||||
width: 154px;
|
||||
}
|
||||
}
|
||||
.modal-top-advert {
|
||||
align-items: start;
|
||||
padding: 0 30px;
|
||||
.exhibition {
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,234 @@
|
|||
<template>
|
||||
<div class="new-goods">
|
||||
<div class="left">
|
||||
<div class="top-header" :style="{ background: options.left.bgColor }">
|
||||
<span>{{ options.left.title }}</span>
|
||||
<span @click="linkTo(options.left.url)" class="hover-pointer"
|
||||
>{{ options.left.secondTitle }} ></span
|
||||
>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div
|
||||
class="con-item hover-pointer"
|
||||
v-for="(item, index) in options.left.list"
|
||||
:key="index"
|
||||
@click="linkTo(item.url)"
|
||||
>
|
||||
<div>
|
||||
<p>{{ item.name }}</p>
|
||||
<p class="describe">{{ item.describe }}</p>
|
||||
</div>
|
||||
<img :src="item.img" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="middle">
|
||||
<div class="top-header" :style="{ background: options.middle.bgColor }">
|
||||
<span>{{ options.middle.title }}</span>
|
||||
<span class="hover-pointer" @click="linkTo(options.middle.url)"
|
||||
>{{ options.middle.secondTitle }} ></span
|
||||
>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div
|
||||
class="con-item hover-pointer"
|
||||
v-for="(item, index) in options.middle.list"
|
||||
:key="index"
|
||||
@click="linkTo(item.url)"
|
||||
>
|
||||
<div>
|
||||
<p>{{ item.name }}</p>
|
||||
<p class="describe">{{ item.describe }}</p>
|
||||
</div>
|
||||
<img :src="item.img" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<div class="top-header" :style="{ background: options.right.bgColor }">
|
||||
<span>{{ options.right.title }}</span>
|
||||
<span @click="linkTo(options.right.url)" class="hover-pointer"
|
||||
>{{ options.right.secondTitle }} ></span
|
||||
>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div
|
||||
v-for="(item, index) in options.right.list"
|
||||
:key="index"
|
||||
class="hover-pointer"
|
||||
@click="linkTo(item.url)"
|
||||
>
|
||||
<img :src="item.img" alt="" />
|
||||
<p>{{ item.name }}</p>
|
||||
<p>{{ item.price | unitPrice("￥") }}</p>
|
||||
<div class="jiaobiao" :class="'jiaobiao' + (index + 1)">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
options: this.data.options // 装修数据
|
||||
};
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.new-goods {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
> div {
|
||||
width: 393px;
|
||||
height: 440px;
|
||||
}
|
||||
|
||||
.left > .content {
|
||||
> div:nth-child(1) {
|
||||
height: 240px;
|
||||
flex-direction: column;
|
||||
border: 1px solid #eee;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
justify-content: space-between;
|
||||
img {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
.describe {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
> div:nth-child(3),
|
||||
> div:nth-child(4) {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.middle > .content {
|
||||
> div {
|
||||
border-style: solid;
|
||||
border-color: #eee;
|
||||
border-width: 0;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
> div:nth-child(1),
|
||||
> div:nth-child(2),
|
||||
> div:nth-child(3) {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
> div:nth-child(6),
|
||||
> div:nth-child(3) {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.right > .content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
font-size: 12px;
|
||||
> div {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
padding: 5px 10px 0 10px;
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
border-bottom: 1px solid #eee;
|
||||
:nth-child(2) {
|
||||
height: 38px;
|
||||
overflow: hidden;
|
||||
}
|
||||
:nth-child(3) {
|
||||
color: $theme_color;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.jiaobiao {
|
||||
position: absolute;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
top: 10px;
|
||||
right: 16px;
|
||||
background: url(../../../assets/images/festival_icon.png);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.jiaobiao1,
|
||||
.jiaobiao4 {
|
||||
background-position: -2px -30px;
|
||||
}
|
||||
.jiaobiao2,
|
||||
.jiaobiao5 {
|
||||
background-position: -31px -30px;
|
||||
}
|
||||
.jiaobiao3,
|
||||
.jiaobiao6 {
|
||||
background-position: -60px -30px;
|
||||
}
|
||||
}
|
||||
> div:nth-child(4),
|
||||
> div:nth-child(5),
|
||||
> div:nth-child(6) {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.top-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 50px;
|
||||
padding: 0 10px;
|
||||
background: #c43d7e;
|
||||
color: #fff;
|
||||
span:nth-child(1) {
|
||||
font-size: 20px;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
padding: 10px 12px 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
height: 370px;
|
||||
}
|
||||
.con-item {
|
||||
width: 185px;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
padding-left: 10px;
|
||||
padding-top: 10px;
|
||||
img {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.describe {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<div class="not-enough">
|
||||
<ul class="nav-bar">
|
||||
<li
|
||||
v-for="(item, index) in conData.options.navList"
|
||||
:class="currentIndex === index ? 'curr' : ''"
|
||||
@click="changeCurr(index)"
|
||||
:key="index"
|
||||
>
|
||||
<p>{{ item.title }}</p>
|
||||
<p>{{ item.desc }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="content" v-if="showContent">
|
||||
<div
|
||||
v-for="(item, index) in conData.options.list[currentIndex]"
|
||||
:key="index"
|
||||
class="hover-pointer"
|
||||
@click="linkTo(item.url)"
|
||||
>
|
||||
<img :src="item.img" width="210" height="210" :alt="item.name" />
|
||||
<p>{{ item.name }}</p>
|
||||
<p>
|
||||
<span>{{ Number(item.price) | unitPrice("￥") }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
currentIndex: 0, // 当前分类下标
|
||||
conData: this.data, // 装修数据
|
||||
showContent: true // 是否展示内容
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
data: function (val) {
|
||||
this.conData = val;
|
||||
},
|
||||
conData: function (val) {
|
||||
this.$emit('content', val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeCurr (index) { // 选择分类
|
||||
this.currentIndex = index;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
background-color: rgb(218, 217, 217);
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
li {
|
||||
padding: 0 30px;
|
||||
text-align: center;
|
||||
p:nth-child(1) {
|
||||
font-size: 16px;
|
||||
border-radius: 50px;
|
||||
padding: 0 7px;
|
||||
}
|
||||
|
||||
p:nth-child(2) {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
p {
|
||||
color: $theme_color;
|
||||
}
|
||||
cursor: pointer;
|
||||
}
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
li:last-of-type {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.curr {
|
||||
p:nth-child(1) {
|
||||
background-color: $theme_color;
|
||||
|
||||
color: #fff;
|
||||
}
|
||||
p:nth-child(2) {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
> div {
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #eee;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:hover {
|
||||
border-color: $theme_color;
|
||||
color: $theme_color;
|
||||
}
|
||||
|
||||
p:nth-of-type(1) {
|
||||
overflow: hidden;
|
||||
width: 210px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin: 10px 0 5px 0;
|
||||
}
|
||||
p:nth-of-type(2) {
|
||||
color: $theme_color;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
span:nth-child(2) {
|
||||
text-decoration: line-through;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,217 @@
|
|||
<template>
|
||||
<div class="recommend">
|
||||
<div class="recommend-left">
|
||||
<div class="head-recommend" :style="{ background: msgLeft.bgColor }">
|
||||
<span>{{ msgLeft.title }}</span>
|
||||
<span class="hover-pointer" @click="linkTo(msgLeft.url)">{{ msgLeft.secondTitle }}></span>
|
||||
</div>
|
||||
<div class="content-left">
|
||||
<div>
|
||||
<img class="hover-pointer" @click="linkTo(msgLeft.list[0].url)" :src="msgLeft.list[0].img" width="160" height="160" alt="" />
|
||||
<div class="margin-left">{{ msgLeft.list[0].name }}</div>
|
||||
<div class="margin-left">{{ msgLeft.list[0].describe }}</div>
|
||||
<Button
|
||||
size="small"
|
||||
:style="{ background: msgLeft.bgColor }"
|
||||
@click="linkTo(msgLeft.list[0].url)"
|
||||
class="fz_12 view-btn"
|
||||
>点击查看</Button
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<template v-for="(item, index) in msgLeft.list">
|
||||
<div v-if="index != 0" :key="index" @click="linkTo(item.url)" class="hover-pointer">
|
||||
<img :src="item.img" width="80" height="80" alt="" />
|
||||
<div>
|
||||
<div>{{ item.name }}</div>
|
||||
<div>{{ item.describe }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="recommend-right">
|
||||
<div class="head-recommend" :style="{ background: msgRight.bgColor }">
|
||||
<span>{{ msgRight.title }}</span>
|
||||
<span @click="linkTo(msgRight.url)" class="hover-pointer"
|
||||
>{{ msgRight.secondTitle }}></span
|
||||
>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div
|
||||
v-for="(item, index) in msgRight.list"
|
||||
:key="index"
|
||||
@click="linkTo(item.url)" class="hover-pointer"
|
||||
>
|
||||
<div class="right-item" :style="{'border': index===2 || index===3 ?'none': ''}">
|
||||
<div>
|
||||
<span :style="{ background: msgRight.bgColor }">{{item.name}}</span>
|
||||
<span>{{ item.describe }}</span>
|
||||
</div>
|
||||
<div class="right-img">
|
||||
<img :src="item.img" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
msgLeft: this.data.options.contentLeft, // 左侧数据
|
||||
msgRight: this.data.options.contentRight // 右侧数据
|
||||
};
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.recommend {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.recommend-left {
|
||||
width: 595px;
|
||||
.content-left {
|
||||
display: flex;
|
||||
padding-top: 10px;
|
||||
font-size: 12px;
|
||||
> div:nth-child(1) {
|
||||
width: 189px;
|
||||
border-right: 1px solid #eee;
|
||||
height: 360px;
|
||||
img {
|
||||
margin: 40px 0 0 15px;
|
||||
}
|
||||
.margin-left {
|
||||
margin-left: 15px;
|
||||
width: 145px;
|
||||
}
|
||||
div:nth-of-type(1) {
|
||||
font-weight: bold;
|
||||
border-top: 1px solid #eee;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
div:nth-of-type(2) {
|
||||
color: #999;
|
||||
}
|
||||
.view-btn {
|
||||
margin-left: 15px;
|
||||
margin-top: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
width: 405px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
img {
|
||||
margin: 0 10px;
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
:nth-child(2) {
|
||||
color: #449dae;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recommend-right {
|
||||
width: 595px;
|
||||
height: 360px;
|
||||
.head-recommend {
|
||||
background: #a25684;
|
||||
}
|
||||
.content-right {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
> div {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
height: 180px;
|
||||
padding-top: 10px;
|
||||
.right-item {
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
margin-top: 30px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
height: 150px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
>div:nth-child(1) {
|
||||
width: 130px;
|
||||
margin-top: 30px;
|
||||
span:nth-child(1){
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 0 5px;
|
||||
background-color: #a25684;
|
||||
display: block;
|
||||
width: 120px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.right-img {
|
||||
width: 100;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
img{
|
||||
max-height: 100px;
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> div:nth-child(n + 1) {
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.head-recommend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 50px;
|
||||
padding: 0 10px;
|
||||
background: #449dae;
|
||||
color: #fff;
|
||||
span:nth-child(1) {
|
||||
font-size: 20px;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,196 @@
|
|||
<template>
|
||||
<div class="seckill">
|
||||
<div class="aside hover-pointer" @click="goPromotion">
|
||||
<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>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
list: [], // 秒杀商品
|
||||
actStatus: 0, // 0 未开始 1 进行中 2 已结束
|
||||
actName: '限时秒杀', // 活动名称
|
||||
currHour: '00', // 当前秒杀场
|
||||
diffSeconds: 0, // 倒计时秒数
|
||||
days: 0, // 天
|
||||
hours: 0, // 小时
|
||||
minutes: 0, // 分钟
|
||||
seconds: 0, // 秒
|
||||
interval: null, // 定时器
|
||||
swiperOptions: { // 轮播图参数
|
||||
// slidesPerView: 5,
|
||||
// autoplay: true,
|
||||
// loop: true
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
methods: {
|
||||
goPromotion () { // 跳转秒杀页面
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/seckill'
|
||||
});
|
||||
window.open(routeUrl.href, '_blank');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.seckill {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
display: flex;
|
||||
.aside {
|
||||
overflow: hidden;
|
||||
width: 190px;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
background-image: url("../../../assets/images/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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -231,4 +231,4 @@ export default {
|
|||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,295 @@
|
|||
<template>
|
||||
<div class="cate-nav">
|
||||
<div class="nav-con">
|
||||
<div class="all-categories hover-pointer" @mouseenter="showFirstList = true" @mouseleave="showFirstList = false">全部商品分类</div>
|
||||
<ul class="nav-item" v-if="showNavBar">
|
||||
<li
|
||||
class="hover-color"
|
||||
v-for="(item, index) in navList.list"
|
||||
:key="index"
|
||||
@click="linkTo(item.url)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 全部商品分类 -->
|
||||
<div class="cate-list" v-show="showAlways || showFirstList" @mouseenter="showFirstList = true" @mouseleave="showFirstList = false">
|
||||
<!-- 第一级分类 -->
|
||||
<div class="nav-side" @mouseleave="panel = false">
|
||||
<ul>
|
||||
<li v-for="(item, index) in cateList" :key="index" @mouseenter="showDetail(index)" >
|
||||
<span class="nav-side-item" @click="goGoodsList(item.id)">{{item.name}}</span>
|
||||
<span v-for="(second, secIndex) in item.children" :key="secIndex">
|
||||
<span v-if="secIndex < 2" > / </span>
|
||||
<span @click="goGoodsList(second.id, second.parentId)" class="nav-side-item" v-if="secIndex < 2">{{second.name}}</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 展开分类 -->
|
||||
<div
|
||||
class="detail-item-panel"
|
||||
v-show="panel"
|
||||
@mouseenter="panel = true"
|
||||
@mouseleave="panel = false"
|
||||
>
|
||||
<div class="nav-detail-item">
|
||||
<template v-for="(item, index) in panelData">
|
||||
<span @click="goGoodsList(item.id, item.parentId)" v-if="index < 8" :key="index">{{ item.name }}<Icon type="ios-arrow-forward" /></span>
|
||||
</template>
|
||||
</div>
|
||||
<ul>
|
||||
<li
|
||||
v-for="(items, index) in panelData"
|
||||
:key="index"
|
||||
class="detail-item-row"
|
||||
>
|
||||
<span class="detail-item-title" @click="goGoodsList(items.id,items.parentId)">
|
||||
{{ items.name }} <Icon type="ios-arrow-forward" />
|
||||
<span class="glyphicon glyphicon-menu-right"></span>
|
||||
</span>
|
||||
<div>
|
||||
<span v-for="(item, subIndex) in items.children" @click="goGoodsList(item.id,items.id,items.parentId)"
|
||||
:key="subIndex" class="detail-item">{{ item.name }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCategory } from '@/api/goods';
|
||||
import storage from '@/plugins/storage.js'
|
||||
export default {
|
||||
name: 'GoodsListNav',
|
||||
props: {
|
||||
showAlways: { // 总是显示下拉分类
|
||||
default: false,
|
||||
type: Boolean
|
||||
},
|
||||
showNavBar: { // 显示全部商品分类右侧导航条
|
||||
default: true,
|
||||
type: Boolean
|
||||
},
|
||||
hover: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
cateList: [], // 分类数据
|
||||
panel: false, // 二级分类展示
|
||||
panelData: [], // 二级分类数据
|
||||
showFirstList: false // 始终展示一级列表
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
navList () { // 导航列表
|
||||
return JSON.parse(storage.getItem('navList')) || []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCate () { // 获取分类数据
|
||||
if (this.hover) return false;
|
||||
getCategory(0).then(res => {
|
||||
if (res.success) {
|
||||
this.cateList = res.result;
|
||||
// 过期时间
|
||||
var expirationTime = new Date().setHours(new Date().getHours() + 1);
|
||||
// 存放过期时间
|
||||
localStorage.setItem('category_expiration_time', expirationTime);
|
||||
// 存放分类信息
|
||||
localStorage.setItem('category', JSON.stringify(res.result))
|
||||
}
|
||||
});
|
||||
},
|
||||
showDetail (index) { // 展示全部分类
|
||||
this.panel = true
|
||||
this.panelData = this.cateList[index].children
|
||||
},
|
||||
goGoodsList (id, secondId, firstId) { // 分类共有三级，传全部分类过去
|
||||
const arr = [firstId, secondId, id]
|
||||
if (!arr[1]) {
|
||||
arr.splice(0, 2)
|
||||
}
|
||||
if (!arr[0]) {
|
||||
arr.shift()
|
||||
}
|
||||
let routerUrl = this.$router.resolve({
|
||||
path: '/goodsList',
|
||||
query: {categoryId: arr.toString()}
|
||||
})
|
||||
window.open(routerUrl.href, '_blank')
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (localStorage.getItem('category') && localStorage.getItem('category_expiration_time')) {
|
||||
// 如果缓存过期，则获取最新的信息
|
||||
if (new Date() > localStorage.getItem('category_expiration_time')) {
|
||||
this.getCate();
|
||||
return;
|
||||
}
|
||||
this.cateList = JSON.parse(localStorage.getItem('category'))
|
||||
} else {
|
||||
this.getCate()
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.cate-nav{
|
||||
width: 1200px;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
/** 商品分类 */
|
||||
.nav-con {
|
||||
width: 1200px;
|
||||
height: 40px;
|
||||
// background: #eee;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
.all-categories {
|
||||
width: 200px;
|
||||
line-height: 40px;
|
||||
color: #fff;
|
||||
background-color: $theme_color;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
.nav-item {
|
||||
width: 1000px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
background-color: #eee;
|
||||
display: flex;
|
||||
li {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-left: 20px;
|
||||
color: rgb(89, 88, 88);
|
||||
font-size: 15px;
|
||||
&:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cate-list{
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
}
|
||||
.nav-item li {
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.nav-item a {
|
||||
text-decoration: none;
|
||||
color: #555555;
|
||||
}
|
||||
.nav-item a:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
|
||||
.nav-side {
|
||||
width: 200px;
|
||||
float: left;
|
||||
padding: 0px;
|
||||
color: #fff;
|
||||
background-color: #6e6568;
|
||||
height: 335px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nav-side ul {
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
padding-top: 5px;
|
||||
list-style: none;
|
||||
}
|
||||
.nav-side li {
|
||||
padding: 7.5px 0;
|
||||
padding-left: 12px;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.nav-side li:hover {
|
||||
background: #999395;
|
||||
}
|
||||
.nav-side-item:hover {
|
||||
cursor: pointer;
|
||||
color: $theme_color;
|
||||
}
|
||||
|
||||
/*显示商品详细信息*/
|
||||
.detail-item-panel {
|
||||
width: 815px;
|
||||
min-height: 340px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 0px 15px #ccc;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 200px;
|
||||
z-index: 1000;
|
||||
padding: 15px;
|
||||
}
|
||||
.nav-detail-item {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 15px;
|
||||
cursor: pointer;
|
||||
color: #eee;
|
||||
}
|
||||
.nav-detail-item span {
|
||||
padding: 6px;
|
||||
padding-left: 12px;
|
||||
margin-right: 15px;
|
||||
font-size: 12px;
|
||||
background-color: #6e6568;
|
||||
}
|
||||
.nav-detail-item span:hover {
|
||||
background-color: $theme_color;
|
||||
}
|
||||
.detail-item-panel li {
|
||||
line-height: 30px;
|
||||
// margin-left: 40px;
|
||||
}
|
||||
.detail-item-title {
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
color: #555555;
|
||||
padding-right: 10px;
|
||||
width: 81px;
|
||||
text-align: right;
|
||||
}
|
||||
.detail-item-title:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
.detail-item-row {
|
||||
display: flex;
|
||||
>div{flex: 1;}
|
||||
}
|
||||
.detail-item {
|
||||
font-size: 12px;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
cursor: pointer;
|
||||
border-left: 1px solid #ccc;
|
||||
&:first-child{
|
||||
border: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.detail-item:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
<template>
|
||||
<div class="coupon-center">
|
||||
<BaseHeader></BaseHeader>
|
||||
<div class="content">
|
||||
<div>
|
||||
<div class="coupon-title">
|
||||
<router-link to="/">
|
||||
<img src="../assets/images/logo.png" width="120" alt="">
|
||||
</router-link>
|
||||
<p>领券中心</p>
|
||||
<Input search style="width:400px" @on-search='search' enter-button="搜索" placeholder="搜索优惠券" />
|
||||
</div>
|
||||
|
||||
<div class="fontsize_18 recommend">推荐好券</div>
|
||||
|
||||
<empty v-if="list.length===0" />
|
||||
<ul class="coupon-list" v-else>
|
||||
<li v-for="(item, index) in list" class="coupon-item" :key="index">
|
||||
<div class="c-left">
|
||||
<div>
|
||||
<span v-if="item.couponType === 'PRICE'" class="fontsize_12 global_color">￥<span class="price">{{item.price | unitPrice}}</span></span>
|
||||
<span v-if="item.couponType === 'DISCOUNT'" class="fontsize_12 global_color"><span class="price">{{item.couponDiscount}}</span>折</span>
|
||||
<span class="describe">满{{item.consumeThreshold}}元可用</span>
|
||||
</div>
|
||||
<p>使用范围：{{useScope(item.scopeType, item.storeName)}}</p>
|
||||
<p>有效期：{{item.endTime}}</p>
|
||||
</div>
|
||||
<b></b>
|
||||
<a class="c-right" @click="receive(item)">立即领取</a>
|
||||
<i class="circle-top"></i>
|
||||
<i class="circle-bottom"></i>
|
||||
</li>
|
||||
</ul>
|
||||
<Page :total="total" @on-change="changePageNum"
|
||||
class="pageration"
|
||||
@on-page-size-change="changePageSize"
|
||||
:page-size="params.pageSize"
|
||||
show-total
|
||||
show-sizer>
|
||||
</Page>
|
||||
</div>
|
||||
</div>
|
||||
<BaseFooter></BaseFooter>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {couponList, receiveCoupon} from '@/api/member.js'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
list: [], // 优惠券列表
|
||||
total: 0, // 优惠券总数
|
||||
params: { // 请求参数
|
||||
pageNumber: 1,
|
||||
pageSize: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 搜索优惠券
|
||||
search (item) {
|
||||
this.params.couponName = item
|
||||
this.params.pageNumber = 1
|
||||
this.getList()
|
||||
},
|
||||
// 获取优惠券列表
|
||||
getList () {
|
||||
this.$Spin.show()
|
||||
couponList(this.params).then(res => {
|
||||
this.$Spin.hide()
|
||||
this.loading = false
|
||||
if (res.success) {
|
||||
this.list = res.result.records
|
||||
this.total = res.result.total
|
||||
}
|
||||
}).catch(() => { this.$Spin.hide() })
|
||||
},
|
||||
// 分页 改变页码
|
||||
changePageNum (val) {
|
||||
this.params.pageNumber = val;
|
||||
this.getList()
|
||||
},
|
||||
// 分页 改变每页数
|
||||
changePageSize (val) {
|
||||
this.params.pageNumber = 1;
|
||||
this.params.pageSize = val;
|
||||
this.getList()
|
||||
},
|
||||
// 领取优惠券
|
||||
receive (item) {
|
||||
receiveCoupon(item.id).then(res => {
|
||||
if (res.success) {
|
||||
this.$Modal.confirm({
|
||||
title: '领取优惠券',
|
||||
content: '<p>优惠券领取成功，可到我的优惠券页面查看</p>',
|
||||
okText: '我的优惠券',
|
||||
cancelText: '立即使用',
|
||||
onOk: () => {
|
||||
this.$router.push('/home/Coupons')
|
||||
},
|
||||
onCancel: () => {
|
||||
if (item.storeId !== 'platform') {
|
||||
this.$router.push({path: '/merchant', query: {id: item.storeId}})
|
||||
} else {
|
||||
if (item.scopeType === 'PORTION_GOODS_CATEGORY') {
|
||||
this.$router.push({path: '/goodsList', query: {categoryId: item.scopeId}})
|
||||
} else {
|
||||
this.$router.push({path: '/goodsList'})
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
// 优惠券可用范围
|
||||
useScope (type, storeName) {
|
||||
let shop = '平台';
|
||||
let goods = '全部商品'
|
||||
if (storeName !== 'platform') shop = storeName
|
||||
switch (type) {
|
||||
case 'ALL':
|
||||
goods = '全部商品'
|
||||
break;
|
||||
case 'PORTION_GOODS':
|
||||
goods = '部分商品'
|
||||
break;
|
||||
case 'PORTION_GOODS_CATEGORY':
|
||||
goods = '部分分类商品'
|
||||
break;
|
||||
}
|
||||
return `${shop}${goods}可用`
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '../assets/styles/coupon.scss';
|
||||
.content{
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
|
||||
> div {
|
||||
margin: 10px auto;
|
||||
width: 1200px;
|
||||
}
|
||||
}
|
||||
.coupon-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
p{
|
||||
font-size: 18px;
|
||||
margin-right: 500px;
|
||||
}
|
||||
border-bottom: 2px solid $theme_color;
|
||||
}
|
||||
.recommend {
|
||||
margin: 20px auto;
|
||||
font-weight: bold;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
}
|
||||
.coupon-item {
|
||||
b{
|
||||
background: url('../assets/images/small-circle.png') top left repeat-y;
|
||||
}
|
||||
}
|
||||
.pageration {
|
||||
text-align: right;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,330 @@
|
|||
<template>
|
||||
<div class="forget-password" @click='$refs.verify.show = false'>
|
||||
<div style="height:50px;"></div>
|
||||
<!-- 顶部logo -->
|
||||
<div class="logo-box">
|
||||
<img
|
||||
:src="$store.state.logoImg" width='150'
|
||||
@click="$router.push('/')"
|
||||
/>
|
||||
<div>修改密码</div>
|
||||
</div>
|
||||
<div class="login-container">
|
||||
<!-- 验证手机号 -->
|
||||
<Form
|
||||
ref="formFirst"
|
||||
:model="formFirst"
|
||||
:rules="ruleInline"
|
||||
style="width:300px;"
|
||||
v-show="step === 0"
|
||||
>
|
||||
<FormItem prop="mobile">
|
||||
<i-input
|
||||
type="text"
|
||||
v-model="formFirst.mobile"
|
||||
clearable
|
||||
placeholder="手机号"
|
||||
>
|
||||
<Icon type="md-phone-portrait" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem prop="code">
|
||||
<i-input
|
||||
type="text"
|
||||
v-model="formFirst.code"
|
||||
clearable
|
||||
placeholder="手机验证码"
|
||||
>
|
||||
<Icon
|
||||
type="ios-text-outline"
|
||||
style="font-weight: bold"
|
||||
slot="prepend"
|
||||
/>
|
||||
<Button slot="append" @click="sendCode">{{ codeMsg }}</Button>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button @click="verifyBtnClick" long :type="verifyStatus?'success':'default'">{{verifyStatus?'验证通过':'点击完成安全验证'}}</Button>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="error" @click="next" :loading="loading" long>下一步</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<Form
|
||||
ref="form"
|
||||
:model="form"
|
||||
:rules="ruleInline"
|
||||
style="width:300px;"
|
||||
v-show="step === 1"
|
||||
>
|
||||
<FormItem prop="password">
|
||||
<i-input
|
||||
type="password"
|
||||
v-model="form.password"
|
||||
clearable
|
||||
placeholder="请输入至少六位密码"
|
||||
>
|
||||
<Icon type="md-lock" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem prop="password">
|
||||
<i-input
|
||||
type="password"
|
||||
v-model="form.oncePasd"
|
||||
clearable
|
||||
placeholder="请再次输入密码"
|
||||
>
|
||||
<Icon type="md-lock" slot="prepend"></Icon>
|
||||
</i-input>
|
||||
</FormItem>
|
||||
<FormItem>
|
||||
<Button type="error" size="large" @click="handleSubmit" :loading="loading1" long>提交</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
<!-- 拼图验证码 -->
|
||||
<Verify
|
||||
ref="verify"
|
||||
class="verify-con"
|
||||
:verifyType="verifyType"
|
||||
@change="verifyChange"
|
||||
></Verify>
|
||||
<div class="login-btn"><a @click="$router.push('login')">前往登录</a></div>
|
||||
</div>
|
||||
<div class="foot">
|
||||
<Row type="flex" justify="space-around" class="help">
|
||||
<a class="item" href="https://pickmall.cn/" target="_blank">帮助</a>
|
||||
<a class="item" href="https://pickmall.cn/" target="_blank">隐私</a>
|
||||
<a class="item" href="https://pickmall.cn/" target="_blank">条款</a>
|
||||
</Row>
|
||||
<Row type="flex" justify="center" class="copyright">
|
||||
Copyright © {{year}} - Present
|
||||
<a href="https://pickmall.cn/" target="_blank" style="margin: 0 5px"
|
||||
>lili-shop</a
|
||||
>
|
||||
版权所有
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as RegExp from '@/plugins/RegExp.js';
|
||||
import { md5 } from '@/plugins/md5.js';
|
||||
import * as apiLogin from '@/api/login.js';
|
||||
import { sendSms } from '@/api/common.js';
|
||||
import Verify from '@/components/verify';
|
||||
export default {
|
||||
name: 'ForgetPassword',
|
||||
components: { Verify },
|
||||
data () {
|
||||
return {
|
||||
loading: false, // 加载状态
|
||||
loading1: false, // 第二步加载状态
|
||||
formFirst: { // 手机验证码表单
|
||||
// 注册表单
|
||||
mobile: '',
|
||||
code: ''
|
||||
},
|
||||
form: { // 密码
|
||||
password: '',
|
||||
oncePasd: ''
|
||||
},
|
||||
year: new Date().getFullYear(), // 当前年份
|
||||
step: 0, // 步骤
|
||||
ruleInline: {
|
||||
// 验证规则
|
||||
mobile: [
|
||||
{ required: true, message: '请输入手机号码' },
|
||||
{
|
||||
pattern: RegExp.mobile,
|
||||
trigger: 'blur',
|
||||
message: '请输入正确的手机号'
|
||||
}
|
||||
],
|
||||
code: [{ required: true, message: '请输入手机验证码' }],
|
||||
password: [{required: true, message: '密码不能为空'}, {pattern: RegExp.password, message: '密码不能少于6位'}]
|
||||
},
|
||||
verifyStatus: false, // 图片验证状态
|
||||
verifyType: 'FIND_USER', // 图片验证类型
|
||||
codeMsg: '发送验证码', // 验证码文字
|
||||
interval: '', // 定时器
|
||||
time: 60 // 倒计时时间
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 提交短信验证码，修改密码
|
||||
next () {
|
||||
this.$refs.formFirst.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
let data = JSON.parse(JSON.stringify(this.formFirst));
|
||||
apiLogin.validateCode(data).then((res) => {
|
||||
this.loading = false;
|
||||
if (res.success) {
|
||||
// this.$Message.success('');
|
||||
this.step = 1;
|
||||
} else {
|
||||
this.$Message.warning(res.message);
|
||||
}
|
||||
}).catch(() => { this.loading = false; });
|
||||
} else {}
|
||||
});
|
||||
},
|
||||
handleSubmit () { // 提交密码
|
||||
this.$refs.form.validate(valid => {
|
||||
if (valid) {
|
||||
let params = JSON.parse(JSON.stringify(this.form));
|
||||
if (params.password !== params.oncePasd) {
|
||||
this.$Message.warning('两次输入密码不一致');
|
||||
return;
|
||||
};
|
||||
params.mobile = this.formFirst.mobile;
|
||||
params.password = md5(params.password);
|
||||
delete params.oncePasd;
|
||||
this.loading1 = true;
|
||||
|
||||
apiLogin.resetPassword(params).then(res => {
|
||||
this.loading1 = false;
|
||||
console.log(res);
|
||||
if (res.success) {
|
||||
this.$Message.success('修改密码成功');
|
||||
this.$router.push('login');
|
||||
}
|
||||
}).catch(() => { this.loading = false; });
|
||||
};
|
||||
});
|
||||
},
|
||||
sendCode () { // 发送验证码
|
||||
if (this.time === 60) {
|
||||
if (this.formFirst.mobile === '') {
|
||||
this.$Message.warning('请先填写手机号');
|
||||
return;
|
||||
}
|
||||
if (!this.verifyStatus) {
|
||||
this.$Message.warning('请先完成安全验证');
|
||||
return;
|
||||
}
|
||||
let params = {
|
||||
mobile: this.formFirst.mobile,
|
||||
verificationEnums: 'FIND_USER'
|
||||
};
|
||||
sendSms(params).then(res => {
|
||||
if (res.success) {
|
||||
this.$Message.success('验证码发送成功');
|
||||
let that = this;
|
||||
this.interval = setInterval(() => {
|
||||
that.time--;
|
||||
if (that.time === 0) {
|
||||
that.time = 60;
|
||||
that.codeMsg = '重新发送';
|
||||
that.verifyStatus = false;
|
||||
clearInterval(that.interval);
|
||||
} else {
|
||||
that.codeMsg = that.time;
|
||||
}
|
||||
}, 1000);
|
||||
} else {
|
||||
this.$Message.warning(res.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
verifyChange (con) { // 验证通过
|
||||
if (!con.status) return;
|
||||
this.$refs.verify.show = false;
|
||||
this.verifyStatus = true;
|
||||
},
|
||||
verifyBtnClick () {
|
||||
if (!this.verifyStatus) {
|
||||
this.$refs.verify.init();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
document.querySelector('.forget-password').style.height = window.innerHeight + 'px'
|
||||
this.$refs.formFirst.resetFields();
|
||||
},
|
||||
watch: {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.forget-password{
|
||||
min-height: 700px;
|
||||
}
|
||||
.logo-box {
|
||||
width: 600px;
|
||||
height: 80px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 150px;
|
||||
cursor: pointer;
|
||||
}
|
||||
div {
|
||||
font-size: 20px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-container {
|
||||
border-top: 2px solid $theme_color;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 600px;
|
||||
background-color: #fff;
|
||||
padding: 20px 150px;
|
||||
.login-btn{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: -45px;
|
||||
}
|
||||
}
|
||||
|
||||
.verify-con{
|
||||
position: absolute;
|
||||
left: 140px;
|
||||
top: -30px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.other-login {
|
||||
margin: 0 auto;
|
||||
.ivu-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
.regist {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: -10px;
|
||||
span {
|
||||
margin-left: 10px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.foot {
|
||||
position: fixed;
|
||||
bottom: 4vh;
|
||||
width: 368px;
|
||||
left: calc(50% - 184px);
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 14px;
|
||||
.help {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1vh;
|
||||
width: 60%;
|
||||
.item {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
:hover {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
<script>
|
||||
import Search from '@/components/Search';
|
||||
import ModelForm from '@/components/indexDecorate/modelForm';
|
||||
import ModelForm from '@/components/indexDecorate/ModelForm';
|
||||
import HoverSearch from '@/components/header/hoverSearch';
|
||||
import storage from '@/plugins/storage';
|
||||
import { indexData } from '@/api/index.js';
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ import * as apiLogin from '@/api/login.js';
|
|||
import { sendSms } from '@/api/common.js';
|
||||
import Verify from '@/components/verify';
|
||||
export default {
|
||||
name: 'Login',
|
||||
name: 'SignUp',
|
||||
components: { Verify },
|
||||
data () {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@ import * as apiLogin from '@/api/login.js';
|
|||
import { sendSms } from '@/api/common.js';
|
||||
import Verify from '@/components/verify';
|
||||
export default {
|
||||
name: 'Login',
|
||||
name: 'ForgetPassword',
|
||||
components: { Verify },
|
||||
data () {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,154 @@
|
|||
<template>
|
||||
<div class="wrapper">
|
||||
<BaseHeader></BaseHeader>
|
||||
<div class="wrapper-head">
|
||||
<div class="head-left">
|
||||
<div class="left-tips">订单提交成功，请尽快付款！</div>
|
||||
<div class="left-tips-time">请您尽快完成支付，否则订单会被自动取消</div>
|
||||
</div>
|
||||
<div class="head-right">
|
||||
<div>应付金额 <span class="price">{{$route.query.price | unitPrice}}</span>元</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="pay-way">{{params.paymentMethod === 'ALIPAY' ? '支付宝支付' : '微信支付'}}</div>
|
||||
<div class="qrcode">
|
||||
<div style="width:200px;height:200px;border:1px solid #eee;">
|
||||
<vue-qr :text="qrcode" :margin="0" colorDark="#000" colorLight="#fff" :size="200"></vue-qr>
|
||||
</div>
|
||||
<div class="intro">
|
||||
<Icon type="md-qr-scanner" /> 请使用{{params.paymentMethod === 'ALIPAY' ? '支付宝' : '微信'}}扫码付款
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-div">
|
||||
<p class="mb_10">支付成功后自动跳转，如未跳转请点击按钮手动跳转。。。</p>
|
||||
<div>
|
||||
<Button @click="handlePay">重新支付</Button>
|
||||
<Button type="success" @click="$router.push('/payDone')">支付成功</Button>
|
||||
</div>
|
||||
</div>
|
||||
<a @click="$router.back()">选择其他支付方式></a>
|
||||
</div>
|
||||
<BaseFooter></BaseFooter>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import vueQr from 'vue-qr';
|
||||
import { payCallback, pay } from '@/api/pay.js';
|
||||
export default {
|
||||
components: { vueQr },
|
||||
data () {
|
||||
return {
|
||||
qrcode: '', // 二维码
|
||||
params: this.$route.query, // 参数
|
||||
interval: null, // 定时器
|
||||
num: 0 // 商品数
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 获取支付二维码
|
||||
handlePay () {
|
||||
const params = this.$route.query;
|
||||
pay(params).then(res => {
|
||||
if (res.success) {
|
||||
this.qrcode = res.result;
|
||||
this.num = 0;
|
||||
this.interval = setInterval(this.callback, 5000);
|
||||
} else {
|
||||
this.$Message.error(res.message)
|
||||
}
|
||||
});
|
||||
},
|
||||
callback () { // 支付回调接口
|
||||
this.num++;
|
||||
if (this.num >= 7) {
|
||||
clearInterval(this.interval);
|
||||
this.interval = null;
|
||||
}
|
||||
let params = JSON.parse(JSON.stringify(this.$route.query));
|
||||
delete params.paymentMethod;
|
||||
delete params.paymentClient;
|
||||
payCallback(params).then(res => {
|
||||
if (res.result) {
|
||||
clearInterval(this.interval);
|
||||
this.interval = null;
|
||||
this.$router.push({path: '/payDone', query: {orderType: this.$route.query.orderType}});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.handlePay();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.head-left {
|
||||
font-weight: bold;
|
||||
}
|
||||
.left-tips {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.left-tips-time {
|
||||
font-size: 16px;
|
||||
}
|
||||
.wrapper-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.wrapper-head,
|
||||
.content {
|
||||
padding: 20px 40px;
|
||||
width: 1000px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.content {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 6px 10px #ddd;
|
||||
position: relative;
|
||||
display: flex;
|
||||
.pay-way {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.qrcode {
|
||||
margin: 30px 0 0 70px;
|
||||
}
|
||||
|
||||
.intro {
|
||||
background-color: #ff7674;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin-top: 10px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-div {
|
||||
margin:120px 0 0 30px;
|
||||
}
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
.price {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: $theme_color;
|
||||
}
|
||||
.head-right {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -39,9 +39,9 @@
|
|||
</template>
|
||||
<script>
|
||||
import { agreement, applyStatus } from '@/api/shopentry';
|
||||
import firstApply from './first-apply';
|
||||
import secondApply from './second-apply';
|
||||
import thirdApply from './third-apply';
|
||||
import firstApply from './FirstApply';
|
||||
import secondApply from './SecondApply';
|
||||
import thirdApply from './ThirdApply';
|
||||
export default {
|
||||
components: {
|
||||
firstApply,
|
||||
|
|
@ -3,7 +3,7 @@ import Router from 'vue-router';
|
|||
import Index from '@/pages/Index';
|
||||
const Login = resolve => require(['@/pages/Login'], resolve);
|
||||
const SignUp = resolve => require(['@/pages/SignUp'], resolve);
|
||||
const ForgetPassword = resolve => require(['@/pages/forgetPassword'], resolve);
|
||||
const ForgetPassword = resolve => require(['@/pages/ForgetPassword'], resolve);
|
||||
const GoodsList = resolve => require(['@/pages/GoodsList'], resolve);
|
||||
const GoodsDetail = resolve => require(['@/pages/GoodsDetail'], resolve);
|
||||
const ShoppingCart = resolve => require(['@/pages/ShoppingCart'], resolve);
|
||||
|
|
@ -11,8 +11,8 @@ const Cart = resolve => require(['@/pages/Cart'], resolve);
|
|||
const Pay = resolve => require(['@/pages/payment/Pay'], resolve);
|
||||
const PayDone = resolve => require(['@/pages/payment/PayDone'], resolve);
|
||||
const PayMent = resolve => require(['@/pages/payment/PayMent'], resolve);
|
||||
const ThirdPay = resolve => require(['@/pages/payment/thirdPay'], resolve);
|
||||
const Coupon = resolve => require(['@/pages/couponCenter'], resolve);
|
||||
const ThirdPay = resolve => require(['@/pages/payment/ThirdPay'], resolve);
|
||||
const Coupon = resolve => require(['@/pages/CouponCenter'], resolve);
|
||||
const seckill = resolve => require(['@/pages/promotion/seckill'], resolve);
|
||||
const article = resolve => require(['@/pages/article/index'], resolve);
|
||||
const PointMall = resolve => require(['@/pages/PointMall'], resolve);
|
||||
|
|
@ -63,7 +63,7 @@ const UserMain = resolve => require(['@/pages/home/Main'], resolve);
|
|||
/**
|
||||
* 店铺入驻
|
||||
*/
|
||||
const ShopEntry = resolve => require(['@/pages/shopEntry/shop-entry'], resolve);
|
||||
const ShopEntry = resolve => require(['@/pages/shopEntry/ShopEntry'], resolve);
|
||||
|
||||
Vue.use(Router);
|
||||
|
||||
|
|
@ -76,7 +76,7 @@ export default new Router({
|
|||
},
|
||||
{
|
||||
path: '/login', // 登陆
|
||||
name: 'Login',
|
||||
name: 'login',
|
||||
component: Login,
|
||||
meta: {
|
||||
title: 'LiLi 登录'
|
||||
|
|
|
|||
Loading…
Reference in New Issue