初始上传
This commit is contained in:
337
addon/pc/source/os/pages/promotion/groupbuy/index.vue
Executable file
337
addon/pc/source/os/pages/promotion/groupbuy/index.vue
Executable file
@@ -0,0 +1,337 @@
|
||||
<template>
|
||||
<div class="ns-groupbuy">
|
||||
<div class="ns-groupbuy-head">
|
||||
<el-carousel height="420px" v-loading="loadingAd" v-if="adList.length">
|
||||
<el-carousel-item v-for="item in adList" :key="item.adv_id">
|
||||
<el-image :src="$img(item.adv_image)" fit="cover" @click="$util.pushToTab(item.adv_url.url)" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<div class="ns-groupbuy-box" v-loading="loading">
|
||||
<div class="ns-groupbuy-title" v-if="goodsList.length">
|
||||
<span class="groupbuy-title-left">团购专区</span>
|
||||
</div>
|
||||
|
||||
<div class="goods-list" v-if="goodsList.length">
|
||||
<div class="goods" v-for="(item,index) in goodsList" :key="item.groupbuy_id" @click="$router.push('/promotion/groupbuy/' + item.groupbuy_id)">
|
||||
<!-- 商品图片区 -->
|
||||
<div class="img">
|
||||
<el-image fit="scale-down" :src="$img(item.goods_image, { size: 'mid' })" lazy @error="imageError(index)"/>
|
||||
</div>
|
||||
|
||||
<!-- 商品名称 -->
|
||||
<div class="name">
|
||||
<p :title="item.goods_name">{{ item.goods_name }}</p>
|
||||
</div>
|
||||
|
||||
<!-- 价格展示区 -->
|
||||
<div class="price">
|
||||
<div class="curr-price">
|
||||
<span>团购价</span>
|
||||
<span>￥</span>
|
||||
<span class="main_price">{{ item.groupbuy_price }}</span>
|
||||
</div>
|
||||
<span class="primary_price">￥{{ item.price }}</span>
|
||||
</div>
|
||||
<el-button>立即拼购</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="!loading" class="empty-wrap">
|
||||
<img src="~assets/images/goods_empty.png">
|
||||
<span>暂无正在进行团购的商品，<router-link to="/" class="ns-text-color">去首页</router-link>看看吧</span>
|
||||
</div>
|
||||
|
||||
<div class="pager">
|
||||
<el-pagination
|
||||
background
|
||||
:pager-count="5"
|
||||
:total="total"
|
||||
prev-text="上一页"
|
||||
next-text="下一页"
|
||||
:current-page.sync="currentPage"
|
||||
:page-size.sync="pageSize"
|
||||
@size-change="handlePageSizeChange"
|
||||
@current-change="handleCurrentPageChange"
|
||||
hide-on-single-page
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {goodsPage} from '@/api/groupbuy';
|
||||
import {mapGetters} from 'vuex';
|
||||
import {adList} from '@/api/website';
|
||||
|
||||
export default {
|
||||
name: 'groupbuy',
|
||||
data: () => {
|
||||
return {
|
||||
loading: true,
|
||||
goodsList: [],
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 25,
|
||||
loadingAd: true,
|
||||
adList: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if (this.addonIsExit && this.addonIsExit.groupbuy != 1) {
|
||||
this.$message({
|
||||
message: '团购插件未安装',
|
||||
type: 'warning',
|
||||
duration: 2000,
|
||||
onClose: () => {
|
||||
this.$route.push('/');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.getAdList();
|
||||
this.getGoodsList();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['defaultGoodsImage', 'addonIsExit'])
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: '团购专区-' + this.$store.state.site.siteInfo.site_name,
|
||||
meta: [{
|
||||
name: 'description',
|
||||
content: this.$store.state.site.siteInfo.seo_description
|
||||
}, {
|
||||
name: 'keyword',
|
||||
content: this.$store.state.site.siteInfo.seo_keywords
|
||||
}]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
addonIsExit() {
|
||||
if (this.addonIsExit.groupbuy != 1) {
|
||||
this.$message({
|
||||
message: '团购插件未安装',
|
||||
type: 'warning',
|
||||
duration: 2000,
|
||||
onClose: () => {
|
||||
this.$route.push('/');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getAdList() {
|
||||
adList({keyword: 'NS_PC_GROUPBUY'}).then(res => {
|
||||
this.adList = res.data.adv_list;
|
||||
for (let i = 0; i < this.adList.length; i++) {
|
||||
if (this.adList[i].adv_url) this.adList[i].adv_url = JSON.parse(this.adList[i].adv_url);
|
||||
}
|
||||
this.loadingAd = false;
|
||||
}).catch(err => {
|
||||
this.loadingAd = false;
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 团购商品
|
||||
*/
|
||||
getGoodsList() {
|
||||
goodsPage({
|
||||
page_size: this.pageSize,
|
||||
page: this.currentPage
|
||||
}).then(res => {
|
||||
this.goodsList = res.data.list;
|
||||
this.total = res.data.count;
|
||||
this.loading = false;
|
||||
}).catch(err => {
|
||||
this.loading = false;
|
||||
this.$message.error(err.message);
|
||||
});
|
||||
},
|
||||
handlePageSizeChange(size) {
|
||||
this.pageSize = size;
|
||||
this.refresh();
|
||||
},
|
||||
handleCurrentPageChange(page) {
|
||||
this.currentPage = page;
|
||||
this.refresh();
|
||||
},
|
||||
refresh() {
|
||||
this.loading = true;
|
||||
this.getGoodsList();
|
||||
},
|
||||
/**
|
||||
* 图片加载失败
|
||||
*/
|
||||
imageError(index) {
|
||||
this.goodsList[index].goods_image = this.defaultGoodsImage;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.ns-groupbuy {
|
||||
.ns-groupbuy-box {
|
||||
padding: 48px 0;
|
||||
width: $width;
|
||||
margin: 0 auto;
|
||||
|
||||
.ns-groupbuy-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
|
||||
.groupbuy-title-left {
|
||||
font-size: 30px;
|
||||
color: #333;
|
||||
border-bottom: 4px solid #F42424;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-list {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
margin-top: 32px;
|
||||
|
||||
.goods {
|
||||
margin-right: 17px;
|
||||
margin-bottom: 18px;
|
||||
width: 228px;
|
||||
background-color: #ffffff;
|
||||
overflow: hidden;
|
||||
color: #303133;
|
||||
transition: 0.3s;
|
||||
padding: 18px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
|
||||
&:nth-child(5n+5) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 192px;
|
||||
height: 192px;
|
||||
|
||||
.el-image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
.curr-price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
height: 24px;
|
||||
font-weight: bold;
|
||||
color: $base-color;
|
||||
|
||||
span:first-child {
|
||||
font-size: 14px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.main_price {
|
||||
color: $base-color;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.primary_price {
|
||||
text-decoration: line-through;
|
||||
color: $base-color-info;
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: $base-color;
|
||||
color: #ffffff;
|
||||
margin-top: 10px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 5px;
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
|
||||
p {
|
||||
line-height: 24px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-wrap {
|
||||
padding: 50px 0 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
img {
|
||||
width: 400px;
|
||||
height: 244px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #4A4A4A;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.ns-groupbuy {
|
||||
.ns-groupbuy-head {
|
||||
width: $width;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.el-carousel {
|
||||
.el-image {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.el-image__inner {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.el-carousel__arrow--right {
|
||||
right: 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user