498 lines
12 KiB
Vue
498 lines
12 KiB
Vue
<template>
|
|
<view class="productList">
|
|
<form @submit.prevent="submitForm">
|
|
<view class="search search-wrap acea-row row-between-wrapper">
|
|
<view class="input acea-row row-between-wrapper">
|
|
<view class="search-type-wrap" @click="toggleSearchType(true)">
|
|
{{ searchType === 'good' ? '商品' : '店铺' }}
|
|
<text class="d3"></text>
|
|
</view>
|
|
<input
|
|
v-model="query.keyword"
|
|
placeholder="请输入"
|
|
confirm-type="search"
|
|
class="inp"
|
|
@confirm="submitForm"
|
|
/>
|
|
<text class="iconfont icon-sousuo"></text>
|
|
</view>
|
|
</view>
|
|
</form>
|
|
<view v-if="showSearchTypeLayer" class="search-type-layer">
|
|
<view class="layer" @click="toggleSearchType(false)" />
|
|
<view class="content">
|
|
<view
|
|
v-for="(item, index) in searchTypeList"
|
|
:key="index"
|
|
:class="item.value === searchType ? 'on' : ''"
|
|
class="item"
|
|
@click="searchTypeItemClick(item)"
|
|
>
|
|
{{ item.text }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="nav acea-row row-middle">
|
|
<view class="item">
|
|
<text class="tag">
|
|
综合
|
|
</text>
|
|
</view>
|
|
<view class="item" @click="setQuery('priceOrder')">
|
|
价格
|
|
<image v-if="!query.priceOrder" src="@/static/images/horn.png" />
|
|
<image v-if="query.priceOrder === 'asc'" src="@/static/images/up.png" />
|
|
<image v-if="query.priceOrder === 'desc'" src="@/static/images/down.png" />
|
|
</view>
|
|
<view class="item" @click="setQuery('salesOrder')">
|
|
销量
|
|
<image v-if="!query.salesOrder" src="@/static/images/horn.png" />
|
|
<image v-if="query.salesOrder === 'asc'" src="@/static/images/up.png" />
|
|
<image v-if="query.salesOrder === 'desc'" src="@/static/images/down.png" />
|
|
</view>
|
|
</view>
|
|
<view v-if="searchType === 'good'" class="list acea-row row-between-wrapper">
|
|
<goo-skeleton
|
|
v-if="loading"
|
|
:show-avatar="false"
|
|
/>
|
|
<view
|
|
v-for="(item, listIndex) in list"
|
|
:key="listIndex"
|
|
class="item"
|
|
@click="goGoodsCon(item.id)"
|
|
>
|
|
<view class="pictrue">
|
|
<image :src="item.image"/>
|
|
</view>
|
|
<view class="text">
|
|
<view class="name more-t">{{ item.storeName }}</view>
|
|
<view class="vip acea-row row-between-wrapper">
|
|
<view class="flex ai-end">
|
|
<view class="money">
|
|
￥
|
|
<text class="num" v-if="item.vipPrice && item.vipPrice > 0">{{ force2Decimal(item.vipPrice) }}</text>
|
|
<text class="num" v-else>{{ force2Decimal(item.price) }}</text>
|
|
</view>
|
|
<view class="vip-money">￥{{ force2Decimal(item.otPrice) }}</view>
|
|
</view>
|
|
<view class="sale">已售{{ item.sales }}件</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-loadmore
|
|
v-if="loadend"
|
|
:line="true"
|
|
status="nomore"
|
|
nomore-text="到底了"
|
|
/>
|
|
</view>
|
|
<view v-else class="list">
|
|
<view class="hotel-wrap">
|
|
<goo-skeleton
|
|
v-if="loading"
|
|
/>
|
|
<view
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
class="hotel-item"
|
|
>
|
|
<view class="hotel-item-main" @click="hotelItemClick(item)">
|
|
<image :src="item.logo" class="logo" />
|
|
<view class="info">
|
|
<view class="name one-t">
|
|
{{ item.name }}
|
|
</view>
|
|
<view class="type">
|
|
<view v-if="item.typeName" class="type-tag">
|
|
{{ item.typeName }}
|
|
</view>
|
|
<view v-else> </view>
|
|
</view>
|
|
<view class="desc">
|
|
<view class="tip one-t">
|
|
{{ item.tips || ' ' }}
|
|
</view>
|
|
<view class="btn">进店</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="item.products" class="good-list">
|
|
<view
|
|
v-for="(good) in item.products"
|
|
:key="good.productId"
|
|
class="good-item"
|
|
@click="goGoodsCon(good.productId)"
|
|
>
|
|
<image :src="good.productImage" class="img" />
|
|
<view class="price">
|
|
<text class="txt">￥</text>
|
|
{{ force2Decimal(good.productPrice) }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-loadmore
|
|
v-if="loadend"
|
|
:line="true"
|
|
status="nomore"
|
|
nomore-text="到底了"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<no-good-data v-if="list.length === 0 && query.page > 1" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getProducts, getHotels } from '@/api/store'
|
|
import { mapGetters } from 'vuex'
|
|
import NP from 'number-precision'
|
|
import NoGoodData from '@/components/good/NoData'
|
|
|
|
export default {
|
|
name: 'GoodsList',
|
|
components: {
|
|
NoGoodData
|
|
},
|
|
data: function () {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
list: [],
|
|
query: {
|
|
page: 1,
|
|
limit: 10,
|
|
keyword: '',
|
|
priceOrder: '',
|
|
salesOrder: ''
|
|
},
|
|
loading: false,
|
|
loadend: false,
|
|
searchTypeList: Object.freeze([
|
|
{ text: '商品', value: 'good' },
|
|
{ text: '店铺', value: 'hotel' }
|
|
]),
|
|
searchType: 'good',
|
|
showSearchTypeLayer: false
|
|
}
|
|
},
|
|
computed: mapGetters(['userInfo']),
|
|
onLoad(e) {
|
|
const { s = '' } = this.$yroute.query
|
|
this.query.keyword = s
|
|
this.getList()
|
|
},
|
|
onReachBottom() {
|
|
!this.loading && this.getList()
|
|
},
|
|
methods: {
|
|
toggleSearchType(value) {
|
|
this.showSearchTypeLayer = value
|
|
},
|
|
searchTypeItemClick(item) {
|
|
if (item.value === this.searchType) {
|
|
return
|
|
}
|
|
this.searchType = item.value
|
|
this.toggleSearchType(false)
|
|
this.submitForm()
|
|
},
|
|
force2Decimal(price) {
|
|
return this.$force2Decimal(price);
|
|
},
|
|
goGoodsCon(id) {
|
|
this.$yrouter.push({
|
|
path: '/pages/shop/GoodsCon/index',
|
|
query: { id }
|
|
})
|
|
},
|
|
hotelItemClick(item) {
|
|
this.$yrouter.push({
|
|
path: '/pagesInn/inn/innHome',
|
|
query: {
|
|
id: item.id
|
|
}
|
|
})
|
|
},
|
|
getList() {
|
|
if (this.loading || this.loadend) {
|
|
return
|
|
}
|
|
let reqFn = null
|
|
if (this.searchType === 'good') {
|
|
reqFn = getProducts
|
|
} else {
|
|
reqFn = getHotels
|
|
}
|
|
this.loading = true
|
|
reqFn(this.query).then(res => {
|
|
const { success, data } = res
|
|
if (success) {
|
|
this.loading = false
|
|
this.list.push.apply(this.list, data.map((item) => {
|
|
if (this.searchType === 'good') {
|
|
// 如果已经登录获取用户信息
|
|
if (this.$store.getters.token && this.userInfo) {
|
|
const p = NP.times(item.price, NP.divide(parseFloat(this.userInfo.discount), 100))
|
|
item.vipPrice = p
|
|
}
|
|
}
|
|
return item
|
|
}))
|
|
// 判断所有数据是否加载完成
|
|
this.loadend = data.length < this.query.limit
|
|
this.query.page++
|
|
}
|
|
}).catch(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
submitForm() {
|
|
this.$set(this, 'list', [])
|
|
this.query.page = 1
|
|
this.loadend = false
|
|
this.loading = false
|
|
this.getList()
|
|
},
|
|
setQuery(key) {
|
|
const value = this.query[key]
|
|
if (!value) {
|
|
this.query[key] = 'asc'
|
|
} else if (value === 'asc') {
|
|
this.query[key] = 'desc'
|
|
} else {
|
|
this.query[key] = ''
|
|
}
|
|
if (key === 'priceOrder') {
|
|
this.query.salesOrder = ''
|
|
}
|
|
if (key === 'salesOrder') {
|
|
this.query.priceOrder = ''
|
|
}
|
|
this.submitForm()
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.noCommodity {
|
|
display: flex;
|
|
justify-content: center;
|
|
border-top: 3px solid #f5f5f5;
|
|
padding-bottom: 1px;
|
|
}
|
|
|
|
.list {
|
|
.item {
|
|
.pictrue {
|
|
image {
|
|
border-radius: 8rpx;
|
|
}
|
|
}
|
|
|
|
.name {
|
|
color: #333;
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.money {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
line-height: 36rpx;
|
|
color: #DA0000;
|
|
}
|
|
|
|
.vip-money {
|
|
font-size: 22rpx !important;
|
|
color: #999 !important;
|
|
}
|
|
|
|
.sale {
|
|
font-size: 22rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
.search-type-layer {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 9999;
|
|
.layer {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 2;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
.content {
|
|
position: absolute;
|
|
top: 80rpx;
|
|
left: 23rpx;
|
|
z-index: 5;
|
|
width: 120px;
|
|
padding: 10rpx;
|
|
border-radius: 4px;
|
|
background-color: #fff;
|
|
.item + .item {
|
|
border-top: 1px solid #707070;
|
|
}
|
|
.item {
|
|
text-align: center;
|
|
line-height: 40px;
|
|
font-size: 16px;
|
|
color: #333;
|
|
&.on {
|
|
color: #E92727;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.search-wrap {
|
|
background-color: #fff;
|
|
.input {
|
|
height: 36px;
|
|
border-radius: 18px;
|
|
margin: 0;
|
|
background-color: #f6f6f6;
|
|
.search-type-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20rpx 0 0;
|
|
border-right: 1px solid #ddd;
|
|
color: #999;
|
|
font-size: 26rpx;
|
|
.d3 {
|
|
width: 0;
|
|
height: 0;
|
|
margin: 0 0 -6px 4px;
|
|
border-width: 5px;
|
|
border-style: solid;
|
|
border-color: #999 transparent transparent transparent;
|
|
}
|
|
}
|
|
.inp {
|
|
flex: 1;
|
|
padding: 0 0 0 20rpx;
|
|
}
|
|
.iconfont {
|
|
color: #E92727;
|
|
}
|
|
}
|
|
}
|
|
.nav {
|
|
.item {
|
|
width: 33.3333%;
|
|
.tag {
|
|
display: inline-block;
|
|
width: 72px;
|
|
height: 28px;
|
|
border-radius: 15px;
|
|
border: 1px solid #E92727;
|
|
color: #E92727;
|
|
text-align: center;
|
|
line-height: 28px;
|
|
}
|
|
}
|
|
}
|
|
.hotel-wrap {
|
|
padding: 23rpx 0;
|
|
}
|
|
.hotel-item {
|
|
padding: 15rpx;
|
|
margin: 0 0 23rpx;
|
|
border-radius: 4px;
|
|
background-color: #fff;
|
|
box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
|
|
.hotel-item-main {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.logo {
|
|
display: block;
|
|
width: 136rpx;
|
|
height: 136rpx;
|
|
border-radius: 6px;
|
|
}
|
|
.info {
|
|
width: calc(100% - 160rpx);
|
|
padding: 0 0 0 20rpx;
|
|
.name {
|
|
font-size: 16px;
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
.type {
|
|
display: flex;
|
|
margin: 10rpx 0 0 0;
|
|
.type-tag {
|
|
padding: 4px 8px;
|
|
border-radius: 3px;
|
|
font-size: 12px;
|
|
color: #946300;
|
|
background: linear-gradient(to bottom, #FDF8B9, #E3A72C);
|
|
}
|
|
}
|
|
.desc {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
.tip {
|
|
flex: 1;
|
|
width: calc(100% - 120rpx);
|
|
color: #999;
|
|
}
|
|
.btn {
|
|
padding: 0 15px;
|
|
height: 28px;
|
|
border-radius: 14px;
|
|
color: #fff;
|
|
line-height: 28px;
|
|
background-color: #C51919;
|
|
}
|
|
}
|
|
}
|
|
.good-list {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: nowrap;
|
|
padding: 23rpx 0 0 0;
|
|
overflow-x: auto;
|
|
.good-item + .good-item {
|
|
margin: 0 0 0 15rpx;
|
|
}
|
|
.good-item {
|
|
position: relative;
|
|
.img {
|
|
display: block;
|
|
width: 210rpx;
|
|
height: 210rpx;
|
|
border-radius: 6px;
|
|
}
|
|
.price {
|
|
position: absolute;
|
|
bottom: 20rpx;
|
|
left: 50%;
|
|
padding: 8rpx 20rpx;
|
|
border-radius: 23rpx;
|
|
line-height: 30rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
background-color: #fff;
|
|
transform: translateX(-50%);
|
|
.txt {
|
|
font-size: 22rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|