deming/pageB/search/out.vue
2020-08-10 17:38:54 +08:00

296 lines
8.3 KiB
Vue
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="classify-goods">
<view class="tab-container">
<view class="salenum" :class="{ 'current' : current == 0 }" @click="switchCurrent(0)">店铺</view>
<view class="price" :class="{ 'current' : current == 1 }" @click="switchCurrent(1)">
达人
</view>
<view class="evaluation" :class="{ 'current' : current == 2 }" @click="switchCurrent(2)">社区</view>
</view>
<scroll-view scroll-y class="goods-container" :style="{ height: scrollHeight }" @scrolltolower="loadMore" v-show="current == 0">
<view v-for="goods in goodsList" :key="goods.store_id" class="goods-item" @click="toDetailsPage(goods.store_id)">
<image :src="goods.store_avatar"></image>
<view class="right">
<view class="name u-line-1">{{ goods.store_name }}</view>
<view class="briefing u-line-2">{{ goods.store_description }}</view>
</view>
</view>
<u-loadmore :status="loadStatus" bgColor="#FFFFFF" margin-top="20" margin-bottom="20" v-if="goodsList.length >= pageSize"></u-loadmore>
<u-empty mode="list" v-if="!goodsList.length"></u-empty>
</scroll-view>
<scroll-view style="width:100%;" :style="{ height: scrollHeight }" scroll-y="true" @scrolltolower="loadMore" v-if=" current == 2 ">
<view class="box" style="padding: 0 30rpx;">
<view style="display:flex">
<view>
<videoItem v-for="(item,id) in goodsList.filter((_, index) => !(index&1))" :key="id" :item="item"
@getArticlelist="getArticlelist"></videoItem>
</view>
<view style="margin-left:20rpx">
<videoItem v-for="(item,id) in goodsList.filter((_, index) => index&1)" :key="id" :item="item"
@getArticlelist="getArticlelist"></videoItem>
</view>
</view>
</view>
<u-loadmore :status="loadStatus" bgColor="#FFFFFF" margin-top="20" margin-bottom="20" v-if="goodsList.length >= pageSize"></u-loadmore>
<u-empty mode="list" v-if="!goodsList.length"></u-empty>
</scroll-view>
<scroll-view style="width:100%;padding: 20rpx 30rpx;margin-right:23rpx;" :style="{ height: scrollHeight }" scroll-y="true" @scrolltolower="loadMore" v-if=" current == 1 ">
<view class="list" >
<darenItem style="margin-top:20rpx;margin-right:23rpx;box-shadow:0px 3rpx 7rpx 0px rgba(153, 153, 153, 0.35);" v-for="item in goodsList" :key="item.id" :info="item" v-on:pChangeType="changeType"></darenItem>
</view>
<u-loadmore :status="loadStatus" bgColor="#FFFFFF" margin-top="20" margin-bottom="20" v-if="goodsList.length >= pageSize"></u-loadmore>
<u-empty mode="list" v-if="!goodsList.length"></u-empty>
</scroll-view>
</view>
</template>
<script>
import videoItem from "@/components/index/video-item/index"
import darenItem from "@/components/index/daren-item/index"
export default {
data() {
return {
pageSize: 12,
cid: '',
page: 1,
current: 0,
priceOrderAsc: true, // 是否升序
goodsList: [],
scrollHeight: '',
loadStatus: 'loadmore',
timer: true, // 防止上拉加载短时间内多次调用,
value:""
}
},
components:{
videoItem,
darenItem
},
watch: {
current(value) {
this.page = 1;
this.ShopSearch({ laod: 'reload' });
},
priceOrderAsc(value) {
this.page = 1;
this.ShopSearch({ laod: 'reload' });
}
},
onLoad(option) {
this.value = option.value;
this.setViewHeight();
this.ShopSearch()
this.setNavSearchInput(this.value);
},
onNavigationBarSearchInputConfirmed(value) {
this.value = value.text
// console.log(this.value)
this.ShopSearch()
},
methods: {
// 动态设置导航栏搜索框内容
setNavSearchInput(keyword) {
// #ifdef APP-PLUS
let webView = this.$mp.page.$getAppWebview();
webView.setTitleNViewSearchInputText(keyword);
// #endif
// #ifdef H5
let inputSearch=document.querySelector('.uni-input-input[type=search]');
var evt = new InputEvent('input', {
inputType: 'insertText',
data: keyword,
dataTransfer: null,
isComposing: false
});
if(inputSearch){
inputSearch.value = keyword;
inputSearch.dispatchEvent(evt);
}
// #endif
},
changeType(member_id){
console.log(member_id);
this.$emit("pChangeType")
this.$u.api.attentionMember({
member_id: member_id
}).then((res)=>{
console.log(res)
for(let i in this.goodsList){
if(this.goodsList[i].member_id == member_id){
this.goodsList[i].is_attention = res.message == "已取消关注!" ? 0 : 1
}
}
})
},
setOrderSort() {
let sort = '';
if(this.current == 0) {
sort = 'goods_salenum';
} else if (this.current == 1) {
if(this.priceOrderAsc) sort = 'goods_price_asc';
else sort = 'goods_price_desc';
} else if (this.current == 2) {
sort = 'evaluation_count';
}
return sort;
},
// 排序方式 goods_salenum销量 evaluation_count评价 goods_price_asc价格从低到高 goods_price_desc价格从高到低
async ShopSearch({ load = 'reload' } = {}) {
// const res = await this.$u.api.ShopSearch({
// keyword: this.value,
// page: this.page,
// order: sort,
// })
console.log(this.value)
let res = {}
if(this.current == 0) {
res = await this.$u.api.storeList({
name_search: this.value,
page: this.page
})
this.timer = true;
if(res.errCode == 0) {
if(load == 'reload') this.goodsList = res.data.list.data;
else if(load == 'loadmore') this.goodsList.push(...res.data.list.data);
}
console.log(this.goodsList)
return res.data.list.data.length;
} else if (this.current == 1) {
res = await this.$u.api.getExpertList({
like_nickname: this.value,
page: this.page
})
this.timer = true;
if(res.errCode == 0) {
if(load == 'reload') this.goodsList = res.data.list;
else if(load == 'loadmore') this.goodsList.push(...res.data.list);
}
console.log(this.goodsList)
return res.data.list.length;
} else if (this.current == 2) {
res = await this.$u.api.getArticlelist({
value: this.value,
page: this.page
})
this.timer = true;
if(res.errCode == 0) {
if(load == 'reload') this.goodsList = res.data.list;
else if(load == 'loadmore') this.goodsList.push(...res.data.list);
}
console.log(this.goodsList)
return res.data.list.length;
}
},
loadMore() {
if(this.goodsList.length < this.pageSize) return false;
if(!this.timer) return false;
this.loadStatus = "loading";
this.page++;
this.ShopSearch({ load: 'loadmore' }).then(length => {
if(length == 0) {
this.page--;
this.loadStatus = 'nomore';
} else {
this.loadStatus = 'loading';
}
}).catch(() => {
this.loadStatus = "nomore";
this.page--;
})
},
switchCurrent(current) {
// if(current == 1 && this.current == 1) this.priceOrderAsc = !this.priceOrderAsc;
this.current = current;
this.goodsList = []
this.ShopSearch()
},
setViewHeight() {
const res = uni.getSystemInfoSync();
this.scrollHeight = res.windowHeight - res.windowWidth / 750 * 90 + 'px';
},
toDetailsPage(id) {
this.$u.route('/pageC/merchant/index', {
id: id
});
}
}
};
</script>
<style lang="scss" scoped>
.list{
display: flex;
flex-wrap: wrap;
width: calc(100% + 23rpx);
margin-right: -23rpx;
}
.classify-goods {
.tab-container {
box-sizing: border-box;
padding: 30rpx 40rpx;
display: flex;
margin-bottom: 30rpx;
> view {
height: 30rpx;
line-height: 30rpx;
flex: 1;
font-size: 32rpx;
color: rgba(51,51,51,1);
}
.salenum {
text-align: left;
}
.price {
display: flex;
align-items: center;
justify-content: center;
.text {
margin-right: 5rpx;
}
.icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
.evaluation {
text-align: right;
}
.current {
color: rgba(255,120,15,1);
}
}
.goods-container {
.goods-item {
margin: 0 auto;
width: 690rpx;
display: flex;
background-color: #F5F5F5;
margin-bottom: 30rpx;
align-items: center;
> image {
width: 220rpx;
height: 200rpx;
flex-shrink: 0;
margin-right: 30rpx;
}
.right {
width: 418rpx;
.name {
font-size: 30rpx;
color: rgba(51,51,51,1);
margin-bottom: 20rpx;
}
.briefing {
font-size: 28rpx;
color: rgba(102,102,102,1);
line-height: 42rpx;
}
}
}
}
}
</style>