code-image-backup-public/lilishop-ui
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git synced 2025-12-21 18:35:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

积分商品，搜索热词为null问题

Browse Source
This commit is contained in:
mabo
2021-08-05 11:19:12 +08:00
parent 0387ac510a
commit 35881e30e0
7 changed files with 219 additions and 907 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
buyer/src/pages/promotion/PointGoodsDetail.vue Normal file
View File

@@ -0,0 +1,189 @@
<template>
<div style="background:#fff;">
<BaseHeader></BaseHeader>
<Search></Search>
<!-- <drawer></drawer> -->
<div class="base-width cate-container">
<Breadcrumb>
<BreadcrumbItem to="/">首页</BreadcrumbItem>
<BreadcrumbItem v-for="(item, index) in categoryBar" :to="goGoodsList(index)" target="_blank" :key="index">{{item.name}}</BreadcrumbItem>
</Breadcrumb>
</div>
<!-- 商品信息展示 -->
<div class="item-detail-show">
<!-- 详情左侧展示数据、图片，收藏、举报 -->
<div class="item-detail-left">
<!-- 大图、放大镜 -->
<div class="item-detail-big-img">
<pic-zoom :url="imgList[imgIndex].url" :scale="2"></pic-zoom>
</div>
<div class="item-detail-img-row">
<div
class="item-detail-img-small"
@mouseover="imgIndex = index"
v-for="(item, index) in imgList"
:key="index"
>
<img :src="item.url" />
</div>
</div>
<div class="goodsConfig mt_10">
<span @click="collect" ><Icon type="ios-heart" :color="isCollected ? '#ed3f14' : '#666'" />{{isCollected?'已收藏':'收藏'}}</span>
</div>
</div>
<!-- 右侧商品信息、活动信息、操作展示 -->
<div class="item-detail-right">
<div class="item-detail-title">
<p>
{{ skuDetail.goodsName }}
</p>
</div>
<div class="sell-point">
{{skuDetail.sellingPoint}}
</div>
<!-- 商品详细 价格、优惠券、促销 -->
<div class="item-detail-price-row">
<div class="item-price-left">
<!-- 商品原价 -->
<div class="item-price-row" v-if="!skuDetail.promotionPrice">
<p>
<span class="item-price-title">价 &nbsp;&nbsp;&nbsp;&nbsp;格</span>
<span class="item-price">{{skuDetail.price | unitPrice("￥")}}</span>
</p>
</div>
</div>
<!-- 选择规格 -->
<div class="item-select" v-for="(sku, index) in formatList" :key="sku.name">
<div class="item-select-title">
<p>{{ sku.name }}</p>
</div>
<div class="item-select-column">
<div class="item-select-row" v-for="(item) in sku.values" :key="item.value">
<div class="item-select-box" @click="select(index, item.value)"
:class="{ 'item-select-box-active': item.value === currentSelceted[index] }"
>
<div class="item-select-intro">
<p>{{ item.value }}</p>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="add-buy-car-box">
<div class="item-select">
<div class="item-select-title">
<p>数量</p>
</div>
<div class="item-select-row">
<InputNumber :min="1" :disabled="skuDetail.quantity === 0" v-model="count"></InputNumber>
<span class="inventory"> 库存{{skuDetail.quantity}}</span>
</div>
</div>
<div class="item-select" v-if="skuDetail.goodsType !== 'VIRTUAL_GOODS' && skuDetail.weight !== 0">
<div class="item-select-title">
<p>重量</p>
</div>
<div class="item-select-row">
<span class="inventory"> {{skuDetail.weight}}kg</span>
</div>
</div>
</div>
</div>
</div>
<!-- 商品详情 -->
<div class="base-width item-intro" ref="itemIntroGoods">
<div>商品介绍</div>
<div v-html="goodsSku.intro" v-if="goodsSku.intro"></div>
<div v-else style="margin:20px;">暂无商品介绍</div>
</div>
<Spin size="large" fix v-if="isLoading"></Spin>
<BaseFooter></BaseFooter>
</div>
</template>
<script>
import Search from '@/components/Search';
import PicZoom from 'vue-piczoom';
import { pointGoodsDetail } from '@/api/promotion';
export default {
name: 'PointGoodsDetail',
beforeRouteEnter (to, from, next) {
window.scrollTo(0, 0);
next();
},
created () {
this.getGoodsDetail();
},
mounted () {
window.addEventListener('scroll', this.handleScroll)
},
data () {
return {
goodsMsg: {}, // 商品信息
goodsSku: {}, // 商品sku
isLoading: false, // 加载状态
categoryBar: [], // 分类
onceFlag: true // 只调用一次
};
},
methods: {
// 获取积分商品详情
getGoodsDetail () {
this.isLoading = true;
pointGoodsDetail(this.$route.query.id).then((res) => {
this.isLoading = false;
if (res.success) {
this.goodsMsg = res.result;
this.goodsSku = res.result.goodsSku
} else {
this.$Message.error(res.message)
// this.$router.push('/')
}
}).catch(() => {
// this.$router.push('/')
});
},
goGoodsList (currIndex) { // 跳转商品列表
const arr = []
this.categoryBar.forEach((e, index) => {
if (index <= currIndex) {
arr.push(e.id)
}
})
return location.origin + '/goodsList?categoryId=' + arr.toString()
},
handleScroll () { // 监听页面滚动
if (this.onceFlag) {
this.$nextTick(() => {
this.changeHeight('itemIntroGoods')
});
this.onceFlag = false
}
}
},
components: {
Search, PicZoom
}
};
</script>
<style scoped lang="scss">
.base-width{
width: 1200px;
margin: 0 auto;
position: relative;
}
.cate-container {
}
.item-intro {
margin-top: 10px;
>div:nth-child(1) {
height: 40px;
line-height: 40px;
background-color: #eee;
padding-left: 20px;
}
}
</style>

165
buyer/src/pages/promotion/PointMall.vue Normal file
View File

@@ -0,0 +1,165 @@
<template>
<div class="point-mall">
<BaseHeader></BaseHeader>
<Search></Search>
<cateNav></cateNav>
<h3 class="promotion-decorate">积分商品</h3>
<Select @on-select="selectCate" size="small" class="cate-select-con" v-model="cateId">
<Option v-for="(cate, index) in cateList" :value="cate.id" :key="index">{{cate.name}}</Option>
</Select>
<!-- 列表 -->
<div class="goods-list">
<empty v-if="goodsList.length === 0" />
<div
v-else
class="goods-show-info"
v-for="(item, index) in goodsList"
:key="index"
@click="goGoodsDetail(item.id)"
>
<div class="goods-show-img">
<img width="220" height="220" :src="item.goodsSku.thumbnail" />
</div>
<div class="goods-show-price">
<span>
<span class="seckill-price text-danger">{{
item.settlementPrice | unitPrice("￥")
}} + {{item.points}}积分</span>
</span>
</div>
<div class="goods-show-detail">
<span>{{ item.goodsSku.goodsName }}</span>
</div>
<div class="goods-show-num">
已有<span>{{ item.commentNum || 0 }}</span
>人评价
</div>
<div class="goods-show-seller">
<span>{{ item.storeName }}</span>
</div>
</div>
</div>
<div class="page-size">
<Page :total="total" @on-change="changePageNum"
@on-page-size-change="changePageSize"
:page-size="params.pageSize"
show-total
show-sizer>
</Page>
</div>
<BaseFooter></BaseFooter>
</div>
</template>
<script>
import {pointGoods, pointGoodsCategory} from '@/api/promotion.js'
export default {
data () {
return {
goodsList: [], // 积分商品列表
cateList: [{ // 商品分类
name: '全部分类',
id: 0
}], // 积分分类列表
params: { // 商品列表请求参数
pageNumber: 1,
pageSize: 20,
pointsGoodsCategoryId: ''
},
total: 0, // 商品总数
cateId: '' // 店铺分类id
}
},
mounted () {
this.params.pointsGoodsCategoryId = this.$route.query.categoryId || ''
this.cateId = this.$route.query.categoryId || 0
this.getList()
this.getCate()
},
methods: {
getList () { // 获取列表
pointGoods(this.params).then(res => {
if (res.success) {
this.goodsList = res.result.records
this.total = res.result.total
}
})
},
getCate () { // 获取分类
pointGoodsCategory(this.params).then(res => {
if (res.success) {
this.cateList.push(...res.result.records)
}
})
},
selectCate (item) { // 选择商品分类
let cateId = item.value === 0 ? '' : item.value
this.params.pointsGoodsCategoryId = cateId
this.getList()
this.$router.push({query: {categoryId: cateId}})
},
goGoodsDetail (id) { // 跳转商品详情
this.$router.push({path: '/pointGoodsDetail', query: {id}})
// let routerUrl = this.$router.resolve({
// path: '/pointGoodsDetail',
// query: {id}
// })
// window.open(routerUrl.href, '_blank')
},
changePageNum (val) { // 修改页码
this.params.pageNumber = val;
this.getList()
},
changePageSize (val) { // 修改页数
this.params.pageNumber = 1;
this.params.pageSize = val;
this.getList()
}
}
}
</script>
<style lang="scss" scoped>
@import '../../assets/styles/goodsList.scss';
.seckill-price {
font-size: 18px;
}
.point-mall{
position: relative;
}
.category {
width: 1200px;
margin: 0 auto;
display: flex;
height: 30px;
line-height: 30px;
background-color:#005aa0;
color: #fff;
li{
margin: 0 10px;
&:hover{
cursor: pointer;
color: $theme_color;
}
}
.selected-cate{
color: $theme_color;
}
}
.page-size {
width: 1200px;
margin: 10px auto;
display: flex;
justify-content: flex-end;
}
.promotion-decorate::before,.promotion-decorate::after{
background-image: url('../../../static/sprite@2x.png');
}
.cate-select-con{
display: block;
margin: 0 auto;
position: relative;
top: -60px;
left: 200px;
width: 100px;
}
</style>