<template>
<view class="content">
<view class="navbar" :style="{position:headerPosition}">
<view class="search-content">
<uni-icons color="#212121" class="search-icon-arrowleft" @click="backHome" size="24" type="arrowleft" />
<view class="search-input_box" @click="searchClick">
<view class="search-input_val">{{searchVal}}</view>
<uni-icons color="#999999" class="uni-searchbar__box-icon-search" size="20" type="search" />
</view>
</view>
<view class="search-condition">
<view class="search-condition_item" :class="{current: param.label === 'default'}" @click="tabClick('default')">
<text>综合排序</text>
<view class="icon_tips">
<text :class="{active: param.order === 'asc' && param.label === 'default'}" class="yticon"></text>
<text :class="{active: param.order === 'desc' && param.label === 'default'}" class="yticon"></text>
</view>
</view>
<view class="search-condition_item" :class="{current: param.label === 'sales'}" @click="tabClick('sales')">
<text>销量排序</text>
<view class="icon_tips">
<text :class="{active: param.order === 'asc' && param.label === 'sales'}" class="yticon xia"></text>
<text :class="{active: param.order === 'desc' && param.label === 'sales'}" class="yticon"></text>
</view>
</view>
<view class="search-condition_item" :class="{current: param.label === 'price'}" @click="tabClick('price')">
<text>价格排序</text>
<view class="icon_tips">
<text :class="{active: param.order === 'asc' && param.label === 'price'}" class="yticon xia"></text>
<text :class="{active: param.order === 'desc' && param.label === 'price'}" class="yticon"></text>
</view>
</view>
<view class="search-condition_item" :class="{current: param.label === 'add_time'}" @click="tabClick('add_time')">
<text>新品排序</text>
<view class="icon_tips">
<text :class="{active: param.order === 'asc' && param.label === 'add_time'}" class="yticon xia"></text>
<text :class="{active: param.order === 'desc' && param.label === 'add_time'}" class="yticon"></text>
</view>
</view>
</view>
</view>
<!-- 空白页 -->
<empty v-if="goods_list.length === 0" title=''></empty>
<!-- 商品列表 -->
<view class="goods-list" v-if="goods_list.length > 0">
<view class="goods-item" v-for="(item,index) in goods_list" :key="index">
<countDown v-if="item._source.is_pro === 1" :time="item._source.end_time"></countDown>
<view class="image-outer" @click="jumpPhpPage(`app=goods&id=${item._source.goods_id}`, item._source.equipment_id, item._source.is_show)">
<image class="goods_image" :src="item._source.default_image || $noGoodsImg" lazy-load @error="$__reloadResource(item)" mode="aspectFit"></image>
<image v-if="item._source.equipment_id && item._source.is_show == 1" src="https://dbc-static.oss-cn-beijing.aliyuncs.com/static/WechatIMG5.png" class="equipment_logo" mode="aspectFill"></image>
</view>
<view class="title">{{item._source.brand ? `【${item._source.brand}】` : ''}}{{item._source.goods_name}}</view>
<!-- <view class="sub-title">{{item._source.goods_subname}}</view> -->
<view v-if="isLogin">
<view v-if="item._source.is_pro === 1">
<view class="price"><text class="price-tips">￥</text>{{item._source.pro_price.toFixed(2)}}
<text class="discount">{{(item._source.pro_price*10/Number(item._source.price)).toFixed(1)}}折</text>
</view>
<view class="origin_price">¥{{item._source.price}}</view>
</view>
<view v-if="item._source.is_pro === 0">
<view class="price"><text class="price-tips">￥</text>{{item._source.price}}</view>
</view>
</view>
<view v-if="!isLogin" class="unlogin_price">登录显示价格</view>
<!-- <view class="old-price"><text class="price-tips">￥</text>30.00</view> -->
<text class="cart-icon eosfont" @click="addCart(item._source.default_spec, 1)"></text>
</view>
</view>
<uni-load-more :status="loadingType"></uni-load-more>
<BottomBar />
</view>
</template>
<script>
import uniIcons from "@/components/uni-icons/uni-icons.vue";
import countDown from "@/components/countDown.vue";
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
import BottomBar from "@/components/BottomBar/BottomBar.vue";
import empty from '@/components/empty.vue';
import service from '@/components/service.vue';
import { php, go } from '../../common/host.js';
export default {
components: {
uniIcons,
empty,
uniLoadMore,
countDown
},
data() {
return {
goods_list: [],
searchVal: '',
loadingType: 'more', //加载更多状态
headerPosition: "fixed",
headerTop: "0px",
isLogin: false,
param: {
keyword: '',
pageSize: 20,
current: 1,
label: 'default',
order: 'desc'
}
};
},
onLoad(option){
// var pages = getCurrentPages(); // 当前页面
// var beforePage = pages[pages.length - 2];
// #ifdef H5
//默认请求微信分享
if (this.$wechat && this.$wechat.isWechat()) {
this.$wechat.share({titie: this.$getNavigationBarTitle()});
}
this.postData();
// #endif
this.param = {...this.param, ...option};
this.searchVal = option.keyword;
this.getData();
},
onPageScroll(e){
//兼容iOS端下拉时顶部漂移
if(e.scrollTop>=0){
this.headerPosition = "fixed";
}else{
this.headerPosition = "absolute";
}
},
//下拉刷新
onPullDownRefresh(){
this.getData('refresh');
},
//加载更多
onReachBottom(){
this.getData();
},
methods: {
backHome(){
uni.reLaunch({
url: '/pages/home/home'
})
},
// 向小程序发送数据
postData(){
jWeixin.miniProgram.getEnv(function (res) {
//获取当前环境
if(res.miniprogram){
// this.$wechat.postData('谛宝多多商城-首页');
const postData = {
link: window.location.href,
title: '谛宝多多商城'
}
jWeixin.miniProgram.postMessage({ data: JSON.stringify(postData) });
}
});
},
// 加入购物车
addCart(spec_id, quantity) {
this.$addCart(spec_id, quantity, this.isLogin);
},
// 搜索框点击
searchClick() {
const keyword = this.searchVal || '';
uni.navigateTo({
url: `/pages/searchhistory/searchhistory?keyword=${keyword}`
})
},
// 跳转商品详情页
jumpPhpPage(url, id, is_show) {
let link = url ? `${php}${url}` : php;
if(id && is_show == 1){
link = window.location.origin + `/uni/pages/installment/installmentinfo?id=${id}`;
}
window.location.href = link;
},
// 获取数据
getData(type = 'add', loading) {
if(type === 'add'){
if(this.loadingType === 'nomore'){
return;
}
// 区分是不是首次加载
if(this.goods_list.length > 0){
this.param.current += 1;
}
this.loadingType = 'loading';
}else{
this.param.current = 1;
this.loadingType = 'more'
}
uni.request({
url: '/uni/api/search_goods/search_goods_list',
method: 'POST',
data: this.param,
dataType: 'json',
success: (res) => {
const { data } = res;
if(data.code == 0){
if(type === 'refresh'){
this.goods_list = [];
}
this.goods_list = this.goods_list.concat(data.data || []);
this.goods_list.map((item, key) => {
let end_time = item._source.end_time.replace(/-/g, '/');
if(item._source.is_pro === 1 && new Date(end_time).getTime() < new Date().getTime()){
item._source.is_pro = 0;
}
});
this.isLogin = data.login_flg === 1;
const {total, page_size, current} = data.page;
this.param.current = current;
//判断是否还有下一页，有是more,没有是nomore
this.loadingType = this.goods_list.length >= total ? 'nomore' : 'more';
if(type === 'refresh'){
if(loading == 1){
uni.hideLoading();
}else{
uni.stopPullDownRefresh();
}
}
}
}
});
},
// tab搜索条件
tabClick(name) {
if(this.param.label !== name){
this.param.order = 'desc';
}else{
this.param.order = this.param.order === 'desc' ? 'asc': 'desc';
}
this.param.label = name;
uni.pageScrollTo({
duration: 100,
scrollTop: 0
})
this.getData('refresh', 1);
uni.showLoading({
title: '正在加载'
})
}
}
}
</script>
<style lang="less">
.content{
padding-top: 168rpx;
padding-bottom:100rpx;
}
.navbar{
left: 0;
width: 100%;
z-index: 999;
background-color: #fff;
box-shadow: 0 2upx 10upx rgba(0,0,0,.06);
// top: var(--window-top);
top: 0;
}
.search-content{
display: flex;
justify-content: flex-start;
align-items: center;
height: 88rpx;
padding: 0 20rpx;
.search-icon-arrowleft{
margin-right: 20rpx;
width: 40rpx;
}
.search-input_box{
flex: 1;
height: 60rpx;
line-height: 60rpx;
position: relative;
background-color: #F8F8F8;
border-radius: 60rpx;
display: flex;
justify-content: flex-start;
align-items: center;
.search-input_val{
position: absolute;
font-size: 26rpx;
color: #212121;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
box-sizing: border-box;
padding-left: 70rpx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 100%;
}
.uni-searchbar__box-icon-search{
width: 56rpx;
height: 56rpx;
position: absolute;
top: 0rpx;
left: 10rpx;
}
.search-input{
height: 60rpx;
line-height: 60rpx;
flex: 1;
padding-left: 75rpx;
padding-right: 25px;
font-size: 26rpx;
color: #212121;
}
.search-close{
position: absolute;
right: 20rpx;
top: 0rpx;
}
}
.active{
border: 3rpx solid #FFCD00;
}
.cancel-button{
height: 40rpx;
line-height: 40rpx;
padding-left: 20rpx;
font-size: 28rpx;
color: #212121;
}
}
.search-condition{
display: flex;
justify-content: center;
align-items: center;
height: 80rpx;
border-bottom: 2rpx solid #ececec;
.search-condition_item{
flex: 1;
font-size: 26rpx;
color: #7c7c7c;
font-weight: 400;
text-align: center;
height: 100%;
line-height: 80rpx;
.icon_tips{
display: inline-block;
.yticon{
display: block;
width: 20rpx;
height: 20rpx;
background: url(data:image;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAAKlBMVEUAAAAAAAAqKioeHh4jIyMkJCQjIyMkJCQjIyMfHx8jIyMiIiIhISEjIyMLPgjcAAAADnRSTlMAAQwRJCssMjNJUGFjZnUvgGkAAAA6SURBVAjXY2CgLmDtAIIAMJPlLhA4QITn3r17E6pC++7dTVAm2927CVAm49pbAjAzbA7DjWMvoMAtAFI2ESM4e3ZZAAAAAElFTkSuQmCC) no-repeat;
background-size: cover;
margin-left: 4rpx;
display: none;
&.active{
display: block;
width: 20rpx;
height: 20rpx;
background: url(data:image;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAAKlBMVEUAAAAAAAAhISEkJCQiIiIhISEgICAhISEgICAgICAhISEhISEhISEhISFyXSx2AAAADXRSTlMAAh8rW2tufH+2x/P5faSp4gAAADpJREFUCNdjYKAuYO0AggAwk+UuEDhAhOfevXsTqkL77t1NUCbb3bsJUCbj2lsCMDNsDsONYy+gwC0AUjYRIzh7dlkAAAAASUVORK5CYII=) no-repeat;
background-size: cover;
.xia{
display: block;
transform: scaleY(-1);
}
}
}
.xia{
display: none;
transform: scaleY(-1);
}
}
&.current{
color: #212121;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
}
}
}
.goods-list{
display:flex;
flex-wrap:wrap;
padding: 20rpx 0;
background: #fff;
.goods-item{
width: 374rpx;
height: 576rpx;
box-sizing: border-box;
padding: 40rpx 27rpx 24rpx 27rpx;
position: relative;
&:nth-child(2n+1){
margin-right: 2rpx;
}
.image-outer{
width: 320rpx;
height: 320rpx;
position: relative;
.goods_image{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
}
.equipment_logo{
position: absolute;
left: 0;
top: 0;
width: 125rpx;
height: 45rpx;
}
}
.title{
height: 76rpx;
line-height: 38rpx;
font-size: 26rpx;
color: #212121;
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin-top: 20rpx;
margin-bottom: 4rpx;
}
.sub-title{
height: 38rpx;
line-height: 38rpx;
font-size: 26rpx;
color: #7C7C7C;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.price{
height: 44rpx;
line-height: 44rpx;
font-size: 32rpx;
color: #AE8A57;
.price-tips{
font-size: 26rpx;
}
.discount {
display: inline-block;
padding: 0 14rpx;
height: 28rpx;
line-height: 28rpx;
text-align: center;
background:rgba(254,244,232,1);
color: #AE8A57;
font-size: 20rpx;
margin-left: 8px;
position: relative;
top: -4rpx;
}
}
.origin_price {
color: #aeaeae;
font-size: 24rpx;
line-height: 34rpx;
text-decoration: line-through;
}
.old-price{
height: 34rpx;
line-height: 34rpx;
text-align: left;
font-size: 24rpx;
color: #AEAEAE;
text-decoration: line-through;
.price-tips{
font-size: 24rpx;
}
}
.cart-icon{
position: absolute;
right: 24rpx;
bottom: 72rpx;
color: #7C7C7C;
}
}
}
.unlogin_price{
font-size: 30rpx;
}
</style>