mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2025-12-20 09:25:54 +08:00
优化部分代码，修改店铺ui以及功能
This commit is contained in:
lemon橪
@@ -1,340 +1,124 @@
|
||||
<template>
|
||||
<view class="index-content">
|
||||
<!-- 搜索板块 -->
|
||||
<view class="index-navs">
|
||||
<view class="index-nav" :class="{ 'index-nav-active': nav == 1 }" @click="tabClick(1)">精选</view>
|
||||
<view class="index-nav-divider"></view>
|
||||
<div>
|
||||
<u-navbar :title="title"></u-navbar>
|
||||
<!-- 商品 -->
|
||||
<div class="contant">
|
||||
<view v-if="!goodsList.length" class="empty">暂无商品信息</view>
|
||||
<view v-else class="item" v-for="(item,index) in goodsList" :key="index" @click="navigateToGoodsDetail(item)">
|
||||
<u-image width="100%" height="324rpx" :src="item.thumbnail">
|
||||
<u-loading slot="loading"></u-loading>
|
||||
</u-image>
|
||||
<div class="name">{{ item.goodsName }}</div>
|
||||
<div class="price">
|
||||
<div>￥{{ item.price | unitPrice }}</div>
|
||||
</div>
|
||||
<view class="buyCount">
|
||||
<div>已售 {{ item.buyCount || "0" }}</div>
|
||||
</view>
|
||||
</view>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<view class="index-nav" :class="{ 'index-nav-active': nav == 2}" @click="tabClick(2,'buyCount')">
|
||||
销量
|
||||
<view class="index-nav-arrows">
|
||||
<view class="index-nav-arrow">
|
||||
<image src="/static/index/arrow-up-1.png" v-if="params.sort === 'buyCount' && params.order === 'asc'" mode="aspectFit"></image>
|
||||
<image src="/static/index/arrow-up.png" v-else mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="index-nav-arrow">
|
||||
<image src="/static/index/arrow-down.png" v-if="params.sort === 'buyCount' && params.order === 'desc'" mode="aspectFit"></image>
|
||||
<image src="/static/index/arrow-down-1.png" v-else mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="index-nav-divider"></view>
|
||||
<view class="index-nav" :class="{ 'index-nav-active': nav == 3}" @click="tabClick(3,'price')">
|
||||
价格
|
||||
<view class="index-nav-arrows">
|
||||
<view class="index-nav-arrow">
|
||||
<image src="/static/index/arrow-up-1.png" v-if="params.sort === 'price' && params.order === 'asc'" mode="aspectFit"></image>
|
||||
<image src="/static/index/arrow-up.png" v-else mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="index-nav-arrow">
|
||||
<image src="/static/index/arrow-down.png" v-if="params.sort === 'price' && params.order === 'desc'" mode="aspectFit"></image>
|
||||
<image src="/static/index/arrow-down-1.png" v-else mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-with-animation scroll-y class="scoll-page" @scroll="pageScroll">
|
||||
<view class="index-items">
|
||||
<view class="index-item" v-for="(goods, index) in goodsList" :key="index" @click="toGoodsDetail(goods)">
|
||||
<view class="index-item-img">
|
||||
<u-image mode="aspectFit" height="160px" width="173px" class="index-item-store-img" :src="goods.thumbnail">
|
||||
<u-loading slot="loading"></u-loading>
|
||||
</u-image>
|
||||
<view class="index-item-title">
|
||||
<div> {{ goods.goodsName }}</div>
|
||||
<view class="index-item-title-desc" v-if="goods.sellingPoint ">{{ goods.sellingPoint }}</view>
|
||||
</view>
|
||||
<view class="index-item-price">
|
||||
<div class="price">￥{{ goods.price | unitPrice }}</div>
|
||||
<view class="index-item-sale">
|
||||
已售 {{ goods.buyCount || "0" }}
|
||||
<!-- 好评90% -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore bg-color="#f6f6f6" @loadmore="loadMore" :status="loadStatus" />
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getGoodsList } from "@/api/goods.js";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
storeId: {
|
||||
value: Number,
|
||||
},
|
||||
categoryId: {
|
||||
value: Number,
|
||||
default: 0,
|
||||
},
|
||||
load: {
|
||||
value: Number,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loadStatus: "loadmore", //加载更多状态
|
||||
nav: 1,
|
||||
// 默认双列显示
|
||||
goodsListTemplate: 2,
|
||||
// 过滤参数
|
||||
curCateFid: "",
|
||||
title: "",
|
||||
routerVal: "",
|
||||
goodsList: [],
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
storeId: this.storeId,
|
||||
},
|
||||
goodsList: [],
|
||||
cateList: [
|
||||
{ name: "综合", value: "100001" },
|
||||
{ name: "推荐", value: "100002" },
|
||||
{ name: "信用", value: "100003" },
|
||||
],
|
||||
|
||||
typeSort1: true,
|
||||
typeSort2: false,
|
||||
order: "desc",
|
||||
keyword: "",
|
||||
storeCatId: "",
|
||||
storeId: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
load(val) {
|
||||
this.params.pageNumber = val;
|
||||
this.loadMore();
|
||||
},
|
||||
onLoad(options) {
|
||||
this.routerVal = options;
|
||||
this.params.storeId = options.storeId;
|
||||
this.params.storeCatId = options.id;
|
||||
this.title = options.title;
|
||||
},
|
||||
onReachBottom() {
|
||||
|
||||
this.loadMore();
|
||||
},
|
||||
mounted() {
|
||||
this.initGoodsInfo();
|
||||
onShow() {
|
||||
this.goodsList =[]
|
||||
this.params.pageNumber = 1;
|
||||
this.getGoodsData();
|
||||
},
|
||||
methods: {
|
||||
pageScroll(e) {},
|
||||
loadMore() {
|
||||
this.initGoodsInfo();
|
||||
},
|
||||
tabClick(index, type) {
|
||||
this.goodsList = [];
|
||||
this.params.pageNumber = 0;
|
||||
this.params.pageSize = 10;
|
||||
|
||||
this.nav = index;
|
||||
if (this.params.sort == type) {
|
||||
this.params.order == "asc"
|
||||
? (this.params.order = "desc")
|
||||
: (this.params.order = "asc");
|
||||
this.$set(this.params, "sort", type);
|
||||
} else {
|
||||
this.params.order = "desc";
|
||||
this.$set(this.params, "sort", type);
|
||||
}
|
||||
|
||||
this.initGoodsInfo();
|
||||
},
|
||||
toGoodsDetail(val) {
|
||||
/**
|
||||
* 跳转到商品详情
|
||||
*/
|
||||
navigateToGoodsDetail(val) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${val.id}&goodsId=${val.goodsId}`,
|
||||
});
|
||||
},
|
||||
initGoodsInfo() {
|
||||
this.params.storeId = this.storeId;
|
||||
getGoodsList(this.params).then((res) => {
|
||||
if (
|
||||
res.data.result.totalElements <=
|
||||
res.data.result.number * res.data.result.size
|
||||
) {
|
||||
|
||||
this.loadStatus = "noMore";
|
||||
} else {
|
||||
|
||||
this.loadStatus = "loadmore";
|
||||
}
|
||||
this.goodsList.push(...res.data.result.content);
|
||||
});
|
||||
},
|
||||
// 点击了右侧的模板选择按钮：即单列还是双列展示商品
|
||||
goodsTemplateChanged(templateValue) {
|
||||
this.goodsListTemplate = templateValue;
|
||||
|
||||
async getGoodsData() {
|
||||
let goodsList = await getGoodsList(this.params);
|
||||
if (goodsList.data.success) {
|
||||
this.goodsList.push(...goodsList.data.result.content);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.scoll-page {
|
||||
height: 100%;
|
||||
}
|
||||
.store-items {
|
||||
padding-top: 20rpx;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
.contant {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.store-item {
|
||||
width: 710rpx;
|
||||
height: 226rpx;
|
||||
padding-left: 20rpx;
|
||||
margin-bottom: 10rpx;
|
||||
border-radius: 12rpx;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.store-item-img {
|
||||
margin-right: 20rpx;
|
||||
image {
|
||||
width: 186rpx;
|
||||
height: 186rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.store-item-title {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
.store-item-title-desc {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
.store-item-price {
|
||||
font-size: 110rpx;
|
||||
color: #ff5a10;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
.store-item-sale {
|
||||
font-size: 25rpx;
|
||||
color: #999;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
.index-navs {
|
||||
height: 120rpx;
|
||||
margin-top: -10rpx;
|
||||
padding: 0 52rpx;
|
||||
background-color: #f7f7f7;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.index-item-store-img {
|
||||
width: 346rpx !important;
|
||||
height: 320rpx !important;
|
||||
}
|
||||
.index-nav {
|
||||
font-size: 30rpx;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&-active {
|
||||
color: $aider-light-color;
|
||||
font-weight: 700;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 30rpx;
|
||||
border: 1px solid $aider-light-color;
|
||||
bottom: -6rpx;
|
||||
left: 96rpx;
|
||||
> .empty {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
.item {
|
||||
overflow: hidden;
|
||||
|
||||
background: #fff;
|
||||
width: 49%;
|
||||
height: 484rpx;
|
||||
font-size: 26rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #f8f8f8;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.name {
|
||||
text-align: left !important;
|
||||
color: #333;
|
||||
padding: 0 20rpx;
|
||||
margin-top: 20rpx;
|
||||
line-height: 1.4em;
|
||||
max-height: 2.8em; //height是line-height的整数倍，防止文字显示不全
|
||||
overflow: hidden;
|
||||
}
|
||||
.price {
|
||||
font-weight: 500;
|
||||
color: $main-color;
|
||||
font-size: 30rpx;
|
||||
padding: 0 20rpx;
|
||||
margin-top: 20rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.buyCount {
|
||||
display: flex;
|
||||
padding: 0 20rpx;
|
||||
font-size: 24upx;
|
||||
justify-content: space-between;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.index-nav-desc {
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.index-nav-divider {
|
||||
height: 64rpx;
|
||||
border-left: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
.index-nav-arrows {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.index-nav-arrow {
|
||||
image {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
}
|
||||
.index-nav-arrow:last-child {
|
||||
margin-top: -26rpx;
|
||||
}
|
||||
|
||||
.index-items {
|
||||
padding-left: 20rpx;
|
||||
background-color: #f7f7f7;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.index-item {
|
||||
width: 346rpx;
|
||||
padding-bottom: 10rpx;
|
||||
background-color: #fff;
|
||||
margin: 0 18rpx 20rpx 0;
|
||||
border-radius: 16rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
.index-item-img {
|
||||
image {
|
||||
width: 346rpx;
|
||||
height: 320rpx;
|
||||
}
|
||||
}
|
||||
.index-item-title {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
padding: 0 0 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.index-item-title-desc {
|
||||
font-size: 25rpx;
|
||||
color: #999999;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.index-item-price {
|
||||
padding: 0 20rpx;
|
||||
> .price {
|
||||
font-weight: 500;
|
||||
color: $main-color;
|
||||
font-size: 30rpx;
|
||||
|
||||
margin-top: 20rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
> .index-item-sale {
|
||||
font-size: 24upx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user