yangjie
/
high-mini
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.增加商品列表页面

Browse Source
yj-dev
杨杰 3 years ago
parent fa2371bdf4
commit a50e938d73
6 changed files with 139 additions and 116 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      pages.json
  2. 244
      pages/goods/goods-list/goods-list.vue
  3. 10
      pages/tabBar/home/home.vue
  4. BIN
      static/img/fqhed.png
  5. BIN
      static/img/headzq.png
  6. BIN
      static/img/jbhed.png

1
pages.json
Unescape View File

@ -137,7 +137,6 @@
{
"path": "pages/goods/goods-list/goods-list",
"style": {
"navigationBarTitleText": "",
"navigationBarBackgroundColor": "#0083f5",
"backgroundColorTop": "#0083f5",
"navigationBarTextStyle": "white",

244
pages/goods/goods-list/goods-list.vue
Unescape View File

@ -1,28 +1,6 @@
<template>
<view>
<!-- 商品数据 -->
<!-- <view class="header" :style="{position:headerPosition,top:headerTop}">
<view class="target" v-for="(target,index) in orderbyList" @tap="select(index)" :key="index" :class="[target.selected?'on':'']">
{{target.text}}
<view v-if="target.orderbyicon" class="icon" :class="target.orderbyicon[target.orderby]"></view>
</view>
</view> -->
<!-- 占位 -->
<view class="place"></view>
<!-- 商品列表 -->
<view class="goods-list">
<view class="product-list">
<view class="product" v-for="(goods) in goodsList" :key="goods.goods_id" @tap="toGoods(goods)">
<image mode="widthFix" :src="goods.img"></image>
<view class="name">{{goods.name}}</view>
<view class="info">
<view class="price">{{goods.price}}</view>
<view class="slogan">{{goods.slogan}}</view>
</view>
</view>
</view>
<view class="loading-text">{{loadingText}}</view>
</view>
</view>
</template>
@ -30,128 +8,158 @@
export default {
data() {
return {
goodsList:[
{ goods_id: 0, img: '/static/img/goods/p1.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
{ goods_id: 1, img: '/static/img/goods/p2.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
{ goods_id: 2, img: '/static/img/goods/p3.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
{ goods_id: 3, img: '/static/img/goods/p4.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
{ goods_id: 4, img: '/static/img/goods/p5.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
{ goods_id: 5, img: '/static/img/goods/p6.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
{ goods_id: 6, img: '/static/img/goods/p7.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
{ goods_id: 7, img: '/static/img/goods/p8.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
{ goods_id: 8, img: '/static/img/goods/p9.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' },
{ goods_id: 9, img: '/static/img/goods/p10.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' }
],
loadingText:"正在加载...",
headerTop:"0px",
headerPosition:"fixed",
orderbyList:[
{text:"销量",selected:true,orderbyicon:false,orderby:0},
{text:"价格",selected:false,orderbyicon:['sheng','jiang'],orderby:0},
{text:"好评",selected:false,orderbyicon:false,orderby:0}
goodsList: [],
loadingText: "正在加载...",
headerTop: "0px",
headerPosition: "fixed",
orderbyList: [{
text: "销量",
selected: true,
orderbyicon: false,
orderby: 0
},
{
text: "价格",
selected: false,
orderbyicon: ['sheng', 'jiang'],
orderby: 0
},
{
text: "好评",
selected: false,
orderbyicon: false,
orderby: 0
}
],
orderby:"sheng"
orderby: "sheng"
};
},
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
console.log(option.cid); //打印出上个页面传递的参数。
uni.setNavigationBarTitle({
title: option.name
});
if (option.id == 1) {
uni.setNavigationBarTitle({
title: '商品列表'
});
}
if (option.id == 2) {
uni.setNavigationBarTitle({
title: '金币列表'
});
}
//兼容H5下排序栏位置
// #ifdef H5
//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
let Timer = setInterval(()=>{
let uniHead = document.getElementsByTagName('uni-page-head');
if(uniHead.length>0){
this.headerTop = uniHead[0].offsetHeight+'px';
clearInterval(Timer);//清除定时器
}
},1);
//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
let Timer = setInterval(() => {
let uniHead = document.getElementsByTagName('uni-page-head');
if (uniHead.length > 0) {
this.headerTop = uniHead[0].offsetHeight + 'px';
clearInterval(Timer); //清除定时器
}
}, 1);
// #endif
},
onPageScroll(e){
onPageScroll(e) {
//兼容iOS端下拉时顶部漂移
if(e.scrollTop>=0){
if (e.scrollTop >= 0) {
this.headerPosition = "fixed";
}else{
} else {
this.headerPosition = "absolute";
}
},
//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
onPullDownRefresh() {
setTimeout(()=>{
setTimeout(() => {
this.reload();
uni.stopPullDownRefresh();
}, 1000);
uni.stopPullDownRefresh();
}, 1000);
},
//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
onReachBottom(){
uni.showToast({title: '触发上拉加载'});
onReachBottom() {
uni.showToast({
title: '触发上拉加载'
});
let len = this.goodsList.length;
if(len>=40){
this.loadingText="到底了";
if (len >= 40) {
this.loadingText = "到底了";
return false;
}else{
this.loadingText="正在加载...";
} else {
this.loadingText = "正在加载...";
}
let end_goods_id = this.goodsList[len-1].goods_id;
for(let i=1;i<=10;i++){
let goods_id = end_goods_id+i;
let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' };
let end_goods_id = this.goodsList[len - 1].goods_id;
for (let i = 1; i <= 10; i++) {
let goods_id = end_goods_id + i;
let p = {
goods_id: goods_id,
img: '/static/img/goods/p' + (goods_id % 10 == 0 ? 10 : goods_id % 10) + '.jpg',
name: '商品名称商品名称商品名称商品名称商品名称',
price: '￥168',
slogan: '1235人付款'
};
this.goodsList.push(p);
}
},
methods:{
reload(){
methods: {
reload() {
console.log("reload");
let tmpArr = []
this.goodsList = [];
let end_goods_id = 0;
for(let i=1;i<=10;i++){
let goods_id = end_goods_id+i;
let p = { goods_id: goods_id, img: '/static/img/goods/p'+(goods_id%10==0?10:goods_id%10)+'.jpg', name: '商品名称商品名称商品名称商品名称商品名称', price: '￥168', slogan:'1235人付款' };
for (let i = 1; i <= 10; i++) {
let goods_id = end_goods_id + i;
let p = {
goods_id: goods_id,
img: '/static/img/goods/p' + (goods_id % 10 == 0 ? 10 : goods_id % 10) + '.jpg',
name: '商品名称商品名称商品名称商品名称商品名称',
price: '￥168',
slogan: '1235人付款'
};
this.goodsList.push(p);
}
},
//商品跳转
toGoods(e){
uni.showToast({title: '商品'+e.goods_id,icon:"none"});
toGoods(e) {
uni.showToast({
title: '商品' + e.goods_id,
icon: "none"
});
uni.navigateTo({
url: '../goods'
url: '../goods'
});
},
//排序类型
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;
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
tmpTis += type
}
this.orderbyList[index].selected = true;
let len = this.orderbyList.length;
for(let i=0;i<len;i++){
if(i!=index){
for (let i = 0; i < len; i++) {
if (i != index) {
this.orderbyList[i].selected = false;
}
}
uni.showToast({title:tmpTis,icon:"none"});
uni.showToast({
title: tmpTis,
icon: "none"
});
}
}
}
</script>
<style lang="scss">
.icon {
font-size:26upx;
font-size: 26upx;
}
.header{
.header {
width: 92%;
padding: 0 4%;
height: 79upx;
@ -163,7 +171,8 @@
z-index: 10;
background-color: #fff;
border-bottom: solid 1upx #eee;
.target{
.target {
width: 20%;
height: 60upx;
display: flex;
@ -172,24 +181,27 @@
font-size: 28upx;
margin-bottom: -2upx;
color: #aaa;
&.on{
&.on {
color: #555;
border-bottom: 4upx solid #0083f5;
font-weight: 600;
font-size: 30upx;
}
}
}
.place{
.place {
background-color: #ffffff;
height: 100upx;
}
.goods-list{
.loading-text{
.goods-list {
.loading-text {
width: 100%;
display: flex;
justify-content: center;
@ -198,23 +210,27 @@
color: #979797;
font-size: 24upx;
}
.product-list{
.product-list {
width: 92%;
padding: 0 4% 3vw 4%;
padding: 0 4% 3vw 4%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.product{
.product {
width: 48%;
border-radius: 20upx;
background-color: #fff;
margin: 0 0 15upx 0;
box-shadow: 0upx 5upx 25upx rgba(0,0,0,0.1);
image{
box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);
image {
width: 100%;
border-radius: 20upx 20upx 0 0;
}
.name{
.name {
width: 92%;
padding: 8upx 4%;
display: -webkit-box;
@ -224,25 +240,27 @@
overflow: hidden;
font-size: 30upx;
}
.info{
.info {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 92%;
padding: 10upx 4% 10upx 4%;
.price{
.price {
color: #e65339;
font-size: 30upx;
font-weight: 600;
}
.slogan{
.slogan {
color: #807c87;
font-size: 24upx;
}
}
}
}
}
</style>

10
pages/tabBar/home/home.vue
Unescape View File

@ -55,7 +55,7 @@
</view>
</view>
<!-- 赠券 -->
<view style="width: 91%;margin-left: 5%;">
<view style="width: 91%;margin-left: 5%;" @click="goGoodsList(1)">
<image class="mart30 width100" mode="widthFix" src="../../../static/img/headzq.png"></image>
</view>
<swiper class="orange-content" style="border: 2px solid #ff5836;" :display-multiple-items="productListleg">
@ -70,7 +70,7 @@
</swiper>
<!-- 金币 -->
<view style="width: 90%;margin-left: 5%;">
<view style="width: 90%;margin-left: 5%;" @click="goGoodsList(2)">
<image class="mart30 width100" mode="widthFix" src="../../../static/img/jbhed.png"></image>
</view>
<!-- v-if="goldproductList&&goldproductList.length>0" -->
@ -420,6 +420,12 @@
console.log(err);
});
},
//调整商品列表
goGoodsList(item){
uni.navigateTo({
url:'../../goods/goods-list/goods-list?id='+item
})
},
//搜索跳转
toSearch() {
uni.navigateTo({

BIN
static/img/fqhed.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
static/img/headzq.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.8 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
static/img/jbhed.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

Write Preview
Loading…
Cancel
Save