You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
334 lines
8.8 KiB
334 lines
8.8 KiB
<template>
|
|
<div class="content">
|
|
<header>
|
|
<div class="header">
|
|
<div class="target" v-for="(target, index) in orderbyList" :key="index" @click="select(index)" :class="[target.selected ? 'target-on' : 'target-on1']">
|
|
<text class="target-text" :class="[target.selected ? 'target-text-on' : '']">{{ target.text }}</text>
|
|
<text v-if="target.orderbyicon" class="target-icon" :class="[target.selected ? 'target-text-on' : '']">{{ target.orderbyicon[target.orderby] }}</text>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="place"></div>
|
|
<waterfall class="goods-list" column-count="2" column-width="auto">
|
|
<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
|
|
<text class="refresh-indicator-text">{{ refreshText }}</text>
|
|
<loading-indicator class="refresh-indicator"></loading-indicator>
|
|
</refresh>
|
|
<cell v-for="goods in goodsList" :key="goods.goods_id">
|
|
<view class="product" @tap="toGoods(goods)">
|
|
<image class="product-image" mode="widthFix" :src="goods.img"></image>
|
|
<text class="product-name">{{ goods.name }}</text>
|
|
<view class="product-info">
|
|
<text class="product-info-price">{{ goods.price }}</text>
|
|
<text class="product-info-slogan">{{ goods.slogan }}</text>
|
|
</view>
|
|
</view>
|
|
</cell>
|
|
<loading class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
|
|
<text class="loading-indicator-text">{{loadingText}}</text>
|
|
<loading-indicator class="loading-indicator"></loading-indicator>
|
|
</loading>
|
|
</waterfall>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
refreshText: '下拉刷新',
|
|
refreshing: false,
|
|
loadinging: false,
|
|
loadingText:'上拉加载',
|
|
orderbyList: [
|
|
{ text: '销量', selected: true, orderbyicon: false, orderby: 0 },
|
|
{ text: '价格', selected: false, orderbyicon: ['\ue737', '\ue736'], orderby: 0 },
|
|
{ text: '好评', selected: false, orderbyicon: false, orderby: 0 }
|
|
],
|
|
goodsList: [
|
|
{
|
|
goods_id: 0,
|
|
img: 'https://ae01.alicdn.com/kf/HTB1JC1fe.CF3KVjSZJnq6znHFXaG.jpg',
|
|
name: '商品名称商品名称商品名称商品名称商品名称',
|
|
price: '￥168',
|
|
slogan: '1235人付款'
|
|
},
|
|
{
|
|
goods_id: 1,
|
|
img: 'https://ae01.alicdn.com/kf/HTB1GSqoeWWs3KVjSZFxq6yWUXXav.jpg',
|
|
name: '商品名称商品名称商品名称商品名称商品名称',
|
|
price: '￥168',
|
|
slogan: '1235人付款'
|
|
},
|
|
{
|
|
goods_id: 2,
|
|
img: 'https://ae01.alicdn.com/kf/HTB16wepeW5s3KVjSZFNq6AD3FXaJ.jpg',
|
|
name: '商品名称商品名称商品名称商品名称商品名称',
|
|
price: '￥168',
|
|
slogan: '1235人付款'
|
|
},
|
|
{
|
|
goods_id: 3,
|
|
img: 'https://ae01.alicdn.com/kf/HTB1duHtcfBj_uVjSZFpq6A0SXXaJ.jpg',
|
|
name: '商品名称商品名称商品名称商品名称商品名称',
|
|
price: '￥168',
|
|
slogan: '1235人付款'
|
|
},
|
|
{
|
|
goods_id: 4,
|
|
img: 'https://ae01.alicdn.com/kf/HTB173epeW5s3KVjSZFNq6AD3FXai.jpg',
|
|
name: '商品名称商品名称商品名称商品名称商品名称',
|
|
price: '￥168',
|
|
slogan: '1235人付款'
|
|
},
|
|
{
|
|
goods_id: 5,
|
|
img: 'https://ae01.alicdn.com/kf/HTB1_Mefe3aH3KVjSZFjq6AFWpXaJ.jpg',
|
|
name: '商品名称商品名称商品名称商品名称商品名称',
|
|
price: '￥168',
|
|
slogan: '1235人付款'
|
|
},
|
|
{
|
|
goods_id: 6,
|
|
img: 'https://ae01.alicdn.com/kf/HTB1Lu1pe8Cw3KVjSZFuq6AAOpXaI.jpg',
|
|
name: '商品名称商品名称商品名称商品名称商品名称',
|
|
price: '￥168',
|
|
slogan: '1235人付款'
|
|
},
|
|
{
|
|
goods_id: 7,
|
|
img: 'https://ae01.alicdn.com/kf/HTB1iMife3aH3KVjSZFjq6AFWpXaA.jpg',
|
|
name: '商品名称商品名称商品名称商品名称商品名称',
|
|
price: '￥168',
|
|
slogan: '1235人付款'
|
|
},
|
|
{
|
|
goods_id: 8,
|
|
img: 'https://ae01.alicdn.com/kf/HTB1D6Sfe4iH3KVjSZPfq6xBiVXaG.jpg',
|
|
name: '商品名称商品名称商品名称商品名称商品名称',
|
|
price: '￥168',
|
|
slogan: '1235人付款'
|
|
},
|
|
{
|
|
goods_id: 9,
|
|
img: 'https://ae01.alicdn.com/kf/HTB1IjSfe4iH3KVjSZPfq6xBiVXa4.jpg',
|
|
name: '商品名称商品名称商品名称商品名称商品名称',
|
|
price: '￥168',
|
|
slogan: '1235人付款'
|
|
}
|
|
]
|
|
};
|
|
},
|
|
beforeCreate() {
|
|
const domModule = weex.requireModule('dom');
|
|
domModule.addRule('fontFace', {
|
|
fontFamily: 'iconfont',
|
|
src: "url('https://at.alicdn.com/t/font_1087442_fe5vigfwr5m.ttf')"
|
|
});
|
|
},
|
|
mounted(){
|
|
// nvue页面下，关闭下拉刷新，用waterfall实现下拉和上拉刷新。
|
|
const currentWebview = getCurrentPages()[getCurrentPages().length - 1].$getAppWebview();
|
|
currentWebview.setStyle({
|
|
pullToRefresh: {
|
|
support: false
|
|
},
|
|
});
|
|
this.init();
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.setTitle();
|
|
},
|
|
setTitle() {
|
|
//设置标题
|
|
let catName = uni.getStorageSync('catName');
|
|
console.log('catName: ' + catName);
|
|
uni.setNavigationBarTitle({
|
|
title: catName
|
|
});
|
|
},
|
|
select(index) {
|
|
let tmpTis = this.orderbyList[index].text + '排序 ';
|
|
if (this.orderbyList[index].orderbyicon) {
|
|
let type = this.orderbyList[index].orderby == 0 ? '升序' : '降序';
|
|
if (this.orderbyList[index].selected) {
|
|
type = this.orderbyList[index].orderby == 0 ? '降序' : '升序';
|
|
this.orderbyList[index].orderby = this.orderbyList[index].orderby == 0 ? 1 : 0;
|
|
}
|
|
tmpTis += type;
|
|
}
|
|
this.orderbyList[index].selected = true;
|
|
let len = this.orderbyList.length;
|
|
for (let i = 0; i < len; i++) {
|
|
if (i != index) {
|
|
this.orderbyList[i].selected = false;
|
|
}
|
|
}
|
|
uni.showToast({ title: tmpTis, icon: 'none' });
|
|
},
|
|
onrefresh(event) {
|
|
this.refreshText = '正在刷新';
|
|
this.refreshing = true;
|
|
setTimeout(() => {
|
|
this.refreshText = '下载刷新';
|
|
this.refreshing = false;
|
|
}, 2000);
|
|
},
|
|
onpullingdown(event) {
|
|
if (event.pullingDistance <= -200) {
|
|
this.refreshText = '放开刷新';
|
|
}
|
|
},
|
|
onloading(event) {
|
|
this.loadinging = true;
|
|
setTimeout(() => {
|
|
let len = this.goodsList.length;
|
|
if(len>=40){
|
|
uni.showToast({title:'没有更多了',icon:'none'});
|
|
this.loadinging = false;
|
|
return false;
|
|
}else{
|
|
this.loadingText="正在加载...";
|
|
}
|
|
let tmpList = JSON.parse(JSON.stringify(this.goodsList));
|
|
let end_goods_id = this.goodsList[len-1].goods_id;
|
|
for(let i=1;i<=10;i++){
|
|
let row = tmpList[i-1];
|
|
row.goods_id = end_goods_id+i;
|
|
this.goodsList.push(row);
|
|
}
|
|
this.loadinging = false;
|
|
}, 1000);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.content {
|
|
flex-direction: column;
|
|
}
|
|
.header {
|
|
width: 750px;
|
|
height: 79px;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
align-items: flex-end;
|
|
position: fixed;
|
|
z-index: 99;
|
|
background-color: #fff;
|
|
top: 0;
|
|
z-index: 10;
|
|
border-bottom-width: 1px;
|
|
border-bottom-style: solid;
|
|
border-bottom-color: #eee;
|
|
}
|
|
.target {
|
|
width: 150px;
|
|
height: 60px;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: -2px;
|
|
border-bottom-color: #fff;
|
|
}
|
|
.target-on {
|
|
border-bottom-width: 4px;
|
|
border-bottom-style: solid;
|
|
border-bottom-color: #f06c7a;
|
|
}
|
|
.target-text {
|
|
color: #aaa;
|
|
font-size: 30px;
|
|
}
|
|
.target-text-on,
|
|
.target-icon-on {
|
|
color: #555;
|
|
font-weight: 600;
|
|
}
|
|
.target-icon {
|
|
color: #aaa;
|
|
font-family: iconfont;
|
|
}
|
|
.place {
|
|
background-color: #ffffff;
|
|
height: 80px;
|
|
}
|
|
.goods-list {
|
|
width: 750px;
|
|
padding: 0 30px 30px 30px;
|
|
background-color: #ffffff;
|
|
}
|
|
.product {
|
|
width: 335px;
|
|
border-radius: 20px;
|
|
background-color: #fff;
|
|
margin: 20px 0 0 0;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.product-image {
|
|
width: 335px;
|
|
height: 335px;
|
|
border-top-left-radius: 20px;
|
|
border-top-right-radius: 20px;
|
|
}
|
|
.product-name {
|
|
width: 335px;
|
|
padding: 10px 13px;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
font-size: 30px;
|
|
}
|
|
.product-info {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
width: 335px%;
|
|
padding: 10px 13px;
|
|
}
|
|
.product-info-price {
|
|
color: #e65339;
|
|
font-size: 30px;
|
|
font-weight: 600;
|
|
}
|
|
.product-info-slogan {
|
|
color: #807c87;
|
|
font-size: 24px;
|
|
}
|
|
.refresh {
|
|
width: 690;
|
|
height: 150;
|
|
margin-top: -50;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.refresh-indicator-text {
|
|
color: #888888;
|
|
font-size: 30px;
|
|
text-align: center;
|
|
}
|
|
.refresh-indicator {
|
|
height: 60px;
|
|
width: 60px;
|
|
color: #000;
|
|
}
|
|
.loading {
|
|
width: 690;
|
|
height: 120;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.loading-indicator-text {
|
|
color: #888888;
|
|
font-size: 30px;
|
|
text-align: center;
|
|
}
|
|
.loading-indicator {
|
|
height: 60px;
|
|
width: 60px;
|
|
color: #000;
|
|
}
|
|
</style>
|
|
|