mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2025-12-18 00:15:54 +08:00
commit message
This commit is contained in:
Chopper
342
pages/navigation/point/point-mall.vue
Normal file
342
pages/navigation/point/point-mall.vue
Normal file
@@ -0,0 +1,342 @@
|
||||
<template>
|
||||
<view class="index">
|
||||
<user-point />
|
||||
<view class="index-head">
|
||||
<scroll-view scroll-x class="list-scroll-content" :scroll-left="currentLeft" scroll-with-animation>
|
||||
<view class="index-head-navs">
|
||||
<view class="index-head-nav" v-for="(ele, index) in categoryIndexData" :key="index" :class="{ 'index-head-nav-active': tabIndex == index }" @click="setCat(index)">
|
||||
{{ ele.name }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<swiper :current="tabIndex" class="swiper-box" @change="ontabchange" duration="300">
|
||||
|
||||
<swiper-item v-for="(nav, index) in categoryIndexData" :key="index" class="swiper-item">
|
||||
|
||||
<scroll-view class="scroll-v" enableBackToTop="true" scroll-with-animation scroll-y @scrolltolower="loadMore">
|
||||
<view class="index-items">
|
||||
<view class="index-item" v-for="(item, key) in nav.goods" :key="key" @click="toGoods(item)">
|
||||
<view class="index-item-img">
|
||||
<u-image :src="item.goodsSku.thumbnail" mode="aspectFill">
|
||||
<u-loading slot="loading"></u-loading>
|
||||
</u-image>
|
||||
<view class="index-item-title">{{ item.goodsSku.goodsName }}</view>
|
||||
<view class="index-item-price">
|
||||
|
||||
{{ item.points | unitPrice }}积分
|
||||
<span class="tipsMkt">¥{{ item.goodsSku.price | unitPrice }}</span>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more :status="nav.loadStatus"></uni-load-more>
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPointsCategory, getPointsGoods } from "@/api/promotions.js";
|
||||
import userPoint from "./user";
|
||||
export default {
|
||||
components: {
|
||||
"user-point": userPoint,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
headOffSetTop: "0",
|
||||
tabIndex: 0,
|
||||
categoryIndexData: [
|
||||
{
|
||||
categoryId: 0,
|
||||
name: "全部",
|
||||
loadStatus: "more",
|
||||
goods: [],
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
pointsGoodsCategoryId: "",
|
||||
},
|
||||
},
|
||||
],
|
||||
currentLeft: 0,
|
||||
pageParams: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
pointsGoodsCategoryId: 0,
|
||||
},
|
||||
flag: true,
|
||||
};
|
||||
},
|
||||
onLoad() {},
|
||||
async onPullDownRefresh() {
|
||||
this.categoryIndexData[this.tabIndex].goods = [];
|
||||
this.categoryIndexData[this.tabIndex].params.pageNumber = 1;
|
||||
this.categoryIndexData[this.tabIndex].loadStatus = "more";
|
||||
this.loadGoods();
|
||||
},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop < -40 && this.flag) {
|
||||
this.flag = false;
|
||||
this.categoryIndexData[this.tabIndex].goods = [];
|
||||
this.categoryIndexData[this.tabIndex].params.pageNumber = 1;
|
||||
this.categoryIndexData[this.tabIndex].loadStatus = "more";
|
||||
uni.startPullDownRefresh();
|
||||
this.loadGoods();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
tabIndex(val) {
|
||||
if (
|
||||
this.categoryIndexData[this.tabIndex].goods.length == 0 &&
|
||||
this.categoryIndexData[this.tabIndex].params.pageNumber == 1
|
||||
) {
|
||||
this.loadGoods();
|
||||
}
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
//获取顶级分类
|
||||
let response = await getPointsCategory();
|
||||
if (response.data.success) {
|
||||
let navData = response.data.result.records;
|
||||
navData.forEach((item) => {
|
||||
this.categoryIndexData.push({
|
||||
categoryId: item.id,
|
||||
goods: [],
|
||||
loadStatus: "more",
|
||||
name: item.name,
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
pointsGoodsCategoryId: item.id,
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
this.loadGoods();
|
||||
},
|
||||
methods: {
|
||||
// 跳转
|
||||
navigateTo(url) {
|
||||
uni.navigateTo({
|
||||
url,
|
||||
});
|
||||
},
|
||||
|
||||
toGoods(item) {
|
||||
//跳转详情
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.id}&whetherPoint=1`,
|
||||
});
|
||||
},
|
||||
|
||||
async loadGoods() {
|
||||
let index = this.tabIndex;
|
||||
|
||||
//获取商品数据
|
||||
let response = await getPointsGoods(this.categoryIndexData[index].params);
|
||||
if (response.data.success) {
|
||||
this.categoryIndexData[index].goods.push(
|
||||
...response.data.result.records
|
||||
);
|
||||
if (response.data.result.records.length < 10) {
|
||||
this.categoryIndexData[index].loadStatus = "noMore";
|
||||
}
|
||||
let _this = this;
|
||||
setTimeout(function () {
|
||||
_this.flag = true;
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
uni.stopPullDownRefresh();
|
||||
},
|
||||
setCat(type) {
|
||||
this.tabIndex = type;
|
||||
},
|
||||
ontabchange(e) {
|
||||
this.tabIndex = e.detail.current;
|
||||
if (e.detail.current > 3) {
|
||||
this.currentLeft = (e.detail.current - 3) * 70;
|
||||
} else {
|
||||
this.currentLeft = 0;
|
||||
}
|
||||
},
|
||||
loadMore() {
|
||||
if (this.categoryIndexData[this.tabIndex].loadStatus == "more") {
|
||||
this.categoryIndexData[this.tabIndex].params.pageNumber++;
|
||||
this.loadGoods();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
.tipsMkt {
|
||||
float: right;
|
||||
color: #c0c4cc;
|
||||
font-size: 24rpx;
|
||||
text-decoration: line-through;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: $light-color;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
height: 80rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
font-size: 34rpx;
|
||||
|
||||
.left,
|
||||
.right {
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
height: max-content;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 20rpx;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.index {
|
||||
height: 100vh;
|
||||
// #ifdef H5
|
||||
height: calc(100vh - 44px);
|
||||
// #endif
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.index-head {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.list-scroll-content {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.index-head-navs {
|
||||
width: 100%;
|
||||
height: 92rpx;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.index-head-nav {
|
||||
width: 100rpx;
|
||||
padding-bottom: 8rpx;
|
||||
margin: 20rpx;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&-active {
|
||||
border-bottom: 4rpx solid $light-color;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
// #ifdef H5
|
||||
height: calc(100vh - 294px);
|
||||
// #endif
|
||||
|
||||
// #ifndef H5
|
||||
|
||||
height: calc(100vh - 200px);
|
||||
// #endif
|
||||
|
||||
.scroll-v {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.index-items {
|
||||
padding-top: 10rpx;
|
||||
margin-top: 20rpx;
|
||||
|
||||
padding-left: 20rpx;
|
||||
background-color: #f7f7f7;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.index-item {
|
||||
width: 346rpx;
|
||||
// height: 2100rpx;
|
||||
background-color: #fff;
|
||||
margin: 0 18rpx 20rpx 0;
|
||||
border-radius: 16rpx;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.index-item-img {
|
||||
/deep/ .u-image {
|
||||
width: 346rpx !important;
|
||||
height: 320rpx !important;
|
||||
border-radius: 10rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.index-item-title {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
padding: 0 20rpx;
|
||||
height: 80rpx;
|
||||
box-sizing: border-box;
|
||||
max-height: 3em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.index-item-title-desc {
|
||||
font-size: 25rpx;
|
||||
color: #999999;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.index-item-price {
|
||||
font-size: 28rpx;
|
||||
color: #ff5a10;
|
||||
padding: 20rpx 0 0 20rpx;
|
||||
}
|
||||
</style>
|
||||
54
pages/navigation/point/user.vue
Normal file
54
pages/navigation/point/user.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div class="user-point">
|
||||
<div class="point-rule">积分规则</div>
|
||||
<div class="point-wrapper">
|
||||
<u-image shape="circle" :lazy-load="true" width="100" height="100" :src="userInfo.face || '/static/missing-face.png'"></u-image>
|
||||
<div class="whether-point">
|
||||
<div>你的可用积分：<span class="point">{{userInfo.point || 0}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userInfo: this.$options.filters.isLogin() || {},
|
||||
};
|
||||
},
|
||||
mounted (){
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
console.log(this.$options.filters.isLogin());
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.user-point {
|
||||
padding: 0 20rpx;
|
||||
height: 300rpx;
|
||||
background: url("/static/point-bg.png") no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.point{
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.point-rule {
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
.point-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
.whether-point {
|
||||
color: #fff;
|
||||
margin-left: 30rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
666
pages/navigation/search/search.scss
Normal file
666
pages/navigation/search/search.scss
Normal file
@@ -0,0 +1,666 @@
|
||||
.sort-active {
|
||||
border: 1px solid $light-color;
|
||||
color: $light-color;
|
||||
background: $jd-light-color !important;
|
||||
}
|
||||
|
||||
.oldKeyList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 20rpx 3%;
|
||||
> .oldKeyItem {
|
||||
padding: 4rpx 24rpx;
|
||||
background: #f0f2f5;
|
||||
margin-right: 20rpx;
|
||||
max-width: 200rpx;
|
||||
border-radius: 100px;
|
||||
font-size: 24rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.promotion {
|
||||
margin-top: 4rpx;
|
||||
display: flex;
|
||||
div {
|
||||
span {
|
||||
font-size: 24rpx;
|
||||
color: $light-color;
|
||||
margin-right: 10rpx;
|
||||
padding: 0 4rpx;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .u-row {
|
||||
// #ifdef MP-WEIXIN
|
||||
padding: 0 5%;
|
||||
// #endif
|
||||
}
|
||||
|
||||
.status_bar {
|
||||
height: var(--status-bar-height);
|
||||
background: #fff !important;
|
||||
width: 100%;
|
||||
}
|
||||
page {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
.sort-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
background: #f7f7f7;
|
||||
.sort-list {
|
||||
margin: 20rpx 0;
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 30rpx;
|
||||
> .sort-item {
|
||||
> .sort-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.null-view {
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
.sort-btn {
|
||||
display: flex;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
border-top: 1px solid #f7f7f7;
|
||||
height: 100rpx;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
align-items: center;
|
||||
> view {
|
||||
width: 50%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
margin: 0 20rpx;
|
||||
border-radius: 1000px;
|
||||
}
|
||||
> .sort-btn-repick {
|
||||
border: 1px solid #ededed;
|
||||
}
|
||||
> .sort-btn-confim {
|
||||
color: #fff;
|
||||
background-image: linear-gradient(90deg, #ff6b35, #ff9f28, #ffcc03);
|
||||
}
|
||||
}
|
||||
.uinput {
|
||||
width: 50% !important;
|
||||
> .sort-radius {
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
/deep/ .uni-input-input {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
.sort-radius {
|
||||
margin: 0 12rpx;
|
||||
background: #f7f7f7;
|
||||
height: 65rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 1000px;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.flex {
|
||||
margin: 30rpx 0;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
> .sort-brand-item {
|
||||
width: 33%;
|
||||
text-align: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
}
|
||||
.scoll-page {
|
||||
overflow: auto;
|
||||
}
|
||||
.content {
|
||||
background-color: $bg-color;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.storeSellerBox {
|
||||
// #ifndef MP-WEIXIN
|
||||
padding: 16rpx !important;
|
||||
|
||||
// #endif
|
||||
}
|
||||
.goodsClass {
|
||||
padding: 0 20rpx;
|
||||
|
||||
/deep/ .u-row {
|
||||
}
|
||||
}
|
||||
|
||||
.index-nav-arrow:last-child {
|
||||
margin-top: -22rpx;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
.goodsRow {
|
||||
/deep/ .u-row {
|
||||
// #ifdef MP-WEIXIN
|
||||
padding: 0%;
|
||||
background: #fff;
|
||||
// padding: 16rpx;
|
||||
border-radius: 0.4em;
|
||||
margin: 0 !important;
|
||||
|
||||
// #endif
|
||||
}
|
||||
|
||||
background: #fff;
|
||||
border-radius: 0.4em;
|
||||
margin: 20rpx 0;
|
||||
// #ifdef MP-WEIXIN
|
||||
margin: 10rpx 0;
|
||||
// #endif
|
||||
padding: 0 16rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.add1 {
|
||||
background: #fff;
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
|
||||
.oldKeyRow {
|
||||
background: #fff;
|
||||
padding: 34rpx 3%;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
}
|
||||
|
||||
.logimg {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.clamp3 {
|
||||
padding-top: 30rpx;
|
||||
margin-bottom: 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: #333333;
|
||||
|
||||
font-weight: 400;
|
||||
display: -webkit-box;
|
||||
line-height: 40rpx;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
-webkit-line-clamp: 2 !important;
|
||||
|
||||
overflow: hidden;
|
||||
> span {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.switchType1 {
|
||||
width: 50%;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
|
||||
> .img {
|
||||
width: 182rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
}
|
||||
.imgGoods {
|
||||
width: 182rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
view {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.storeSellerName {
|
||||
color: #666;
|
||||
overflow: hidden;
|
||||
|
||||
> div {
|
||||
float: left;
|
||||
}
|
||||
|
||||
> span {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.countConfig {
|
||||
padding: 10rpx 0;
|
||||
color: #666;
|
||||
display: flex;
|
||||
font-size: 24rpx;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
background: $light-color;
|
||||
padding: 20rpx 2.5%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.search-box .mSearch-input-box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-box .input-box {
|
||||
width: 85%;
|
||||
flex-shrink: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-box .search-btn {
|
||||
width: 15%;
|
||||
margin: 0 0 0 2%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
background: linear-gradient(to right, #ff9801, #ff570a);
|
||||
border-radius: 60rpx;
|
||||
}
|
||||
|
||||
.search-box .input-box > input {
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
font-size: 32rpx;
|
||||
border: 0;
|
||||
border-radius: 60rpx;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
padding: 0 3%;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.uni-scroll-view-content {
|
||||
background: #ededed !important;
|
||||
}
|
||||
|
||||
.placeholder-class {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
|
||||
.search-keyword {
|
||||
width: 100%;
|
||||
background-color: #ededed;
|
||||
}
|
||||
|
||||
.keyword-list-box {
|
||||
height: calc(100vh - 110rpx);
|
||||
padding-top: 10rpx;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.keyword-entry-tap {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.keyword-entry {
|
||||
width: 94%;
|
||||
height: 80rpx;
|
||||
margin: 0 3%;
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: solid 1rpx #e7e7e7;
|
||||
}
|
||||
|
||||
.keyword-entry image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
.keyword-entry .keyword-text,
|
||||
.keyword-entry .keyword-img {
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.keyword-entry .keyword-text {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.keyword-entry .keyword-img {
|
||||
width: 10%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.keyword-box {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.keyword-box .keyword-block {
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.keyword-box .keyword-block .keyword-list-header {
|
||||
width: 100%;
|
||||
padding: 20rpx 3%;
|
||||
font-size: 27rpx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.keyword-box .keyword-block .keyword-list-header image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.keyword-box .keyword-block .keyword > view {
|
||||
width: 50%;
|
||||
line-height: 1.75;
|
||||
overflow: hidden;
|
||||
padding: 0 3% 0 3% !important;
|
||||
}
|
||||
|
||||
.u-tips {
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.keyword {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.keyword-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.clear {
|
||||
color: #666666;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: 100rpx;
|
||||
line-height: 100rpx;
|
||||
font-size: 28rpx;
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.keyword-box .keyword-block .hide-hot-tis {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
color: #6b6b6b;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background: #fff;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
|
||||
z-index: 10;
|
||||
// position: fixed;
|
||||
// left: 0;
|
||||
// top: var(--status-bar-height);
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
font-size: 30rpx;
|
||||
color: $font-color-dark;
|
||||
position: relative;
|
||||
}
|
||||
.current {
|
||||
color: $light-color;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
width: 40rpx;
|
||||
height: 0;
|
||||
border-bottom: 4rpx solid $light-color;
|
||||
}
|
||||
}
|
||||
.p-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.yticon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30rpx;
|
||||
height: 14rpx;
|
||||
line-height: 1;
|
||||
margin-left: 4rpx;
|
||||
font-size: 26rpx;
|
||||
color: #888;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.xia {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
}
|
||||
|
||||
.cate-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 80rpx;
|
||||
position: relative;
|
||||
font-size: 44rpx;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-left: 1px solid #ddd;
|
||||
width: 0;
|
||||
height: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 分类 */
|
||||
.cate-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: var(--window-top);
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
z-index: 95;
|
||||
transition: 0.3s;
|
||||
|
||||
.cate-content {
|
||||
width: 630rpx;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
float: right;
|
||||
transform: translateX(100%);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
&.none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.show {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
|
||||
.cate-content {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cate-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.cate-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 90rpx;
|
||||
padding-left: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #555;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.two {
|
||||
height: 64rpx;
|
||||
color: #303133;
|
||||
font-size: 30rpx;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
}
|
||||
.price-box {
|
||||
margin-top: 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-right: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: $font-color-light;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
color: $main-color;
|
||||
font-weight: bold;
|
||||
/deep/ span:nth-of-type(1) {
|
||||
font-size: 38rpx;
|
||||
}
|
||||
}
|
||||
/* 商品列表 */
|
||||
.goods-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 10rpx 20rpx 284rpx;
|
||||
|
||||
|
||||
// background: #fff;
|
||||
width: 100%;
|
||||
.goods-item {
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
border-radius: 16rpx;
|
||||
flex-direction: column;
|
||||
width: calc(50% - 30rpx);
|
||||
margin-bottom: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
&:nth-child(2n + 1) {
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.goods-detail {
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
width: 100%;
|
||||
height: 330rpx;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
border-radius: 16rpx 16rpx 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: $font-base;
|
||||
color: $font-color-dark;
|
||||
line-height: 1.5;
|
||||
height: 84rpx;
|
||||
padding: 10rpx 0 0;
|
||||
display: -webkit-box;
|
||||
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
-webkit-line-clamp: 2;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.countConfig,
|
||||
.storeSellerName {
|
||||
font-size: $font-sm;
|
||||
}
|
||||
|
||||
.textHidden {
|
||||
overflow: hidden;
|
||||
|
||||
text-overflow: ellipsis;
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.status_bar {
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
background: $light-color;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding-top: 300rpx;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
/deep/ .u-image {
|
||||
width: 346rpx;
|
||||
height: 304rpx;
|
||||
}
|
||||
}
|
||||
740
pages/navigation/search/searchPage.vue
Normal file
740
pages/navigation/search/searchPage.vue
Normal file
@@ -0,0 +1,740 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<u-navbar :background="navObj" :is-back="false">
|
||||
<!-- mSearch组件 如果使用原样式，删除组件元素-->
|
||||
<mSearch ref="mSearch" class="mSearch-input-box" @clickLeft="back" :mode="2" :placeholder="defaultKeyword" @search="doSearch(false)" @input="inputChange" @confirm="doSearch(false)"
|
||||
@SwitchType="doSearchSwitch()" v-model="keyword" :isFocusVal="!isShowSeachGoods"></mSearch>
|
||||
</u-navbar>
|
||||
|
||||
<view class="search-keyword" v-if="!isShowSeachGoods">
|
||||
<scroll-view class="keyword-list-box" v-show="isShowKeywordList" scroll-y>
|
||||
<block v-for="(row, index) in keywordList" :key="index">
|
||||
<view class="keyword-entry" hover-class="keyword-entry-tap">
|
||||
<view class="keyword-text" @tap.stop="doSearch(keywordList[index].words)">
|
||||
<rich-text :nodes="row.words"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
<div class="keyword-box" v-show="!isShowKeywordList">
|
||||
<view class="keyword-block add1">
|
||||
<view class="keyword-list-header">
|
||||
<view class="u-tips">热门搜索</view>
|
||||
</view>
|
||||
<view class="keyword keywordBox">
|
||||
<view class="wes" v-for="(keyword, index) in hotKeywordList" @tap="doSearch(keyword)" :key="index">{{ keyword }}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="keyword-block" v-if="oldKeywordList.length > 0">
|
||||
<view class="keyword-list-header">
|
||||
<view class="u-tips">搜索历史</view>
|
||||
|
||||
</view>
|
||||
<div class="oldKeyList">
|
||||
|
||||
<div class="oldKeyItem" v-if="keyword" v-for="(keyword, index) in oldKeywordList" :key="index" @click="doSearch(keyword)">
|
||||
<span>{{ keyword }} </span>
|
||||
</div>
|
||||
|
||||
<div @click="showMore" v-if=" oldKeywordIndex > loadIndex" class="oldKeyItem">展示更多</div>
|
||||
</div>
|
||||
</view>
|
||||
|
||||
<div class="clear mp-iphonex-bottom" @tap="oldDelete">清空搜索历史</div>
|
||||
</div>
|
||||
</view>
|
||||
<!-- 搜索 -->
|
||||
<view class="goods-content" v-if="isShowSeachGoods">
|
||||
<view class="navbar">
|
||||
<view class="nav-item" :class="{ current: filterIndex === 0 }" @click="tabClick(0)">综合排序</view>
|
||||
<view class="nav-item" :class="{ current: filterIndex === 3 }" @click="tabClick(3, 'buyCount')">
|
||||
<text>销量</text>
|
||||
<view class="p-box">
|
||||
<view class="index-nav-arrow">
|
||||
<image class="img" src="/static/index/arrow-up-1.png" v-if="params.sort === 'buyCount' && params.order === 'asc'" mode="aspectFit"></image>
|
||||
<image class="img" src="/static/index/arrow-up.png" v-else mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="index-nav-arrow">
|
||||
<image class="img" src="/static/index/arrow-down.png" v-if="params.sort === 'buyCount' && params.order === 'desc'" mode="aspectFit"></image>
|
||||
<image class="img" src="/static/index/arrow-down-1.png" v-else mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nav-item" :class="{ current: filterIndex === 4 }" @click="tabClick(4, 'price')">
|
||||
<text>价格</text>
|
||||
<view class="p-box">
|
||||
<view class="index-nav-arrow">
|
||||
<image class="img" src="/static/index/arrow-up-1.png" v-if="params.sort === 'price' && params.order === 'asc'" mode="aspectFit"></image>
|
||||
<image class="img" src="/static/index/arrow-up.png" v-else mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="index-nav-arrow">
|
||||
<image class="img" src="/static/index/arrow-down.png" v-if="params.sort === 'price' && params.order === 'desc'" mode="aspectFit"></image>
|
||||
<image class="img" src="/static/index/arrow-down-1.png" v-else mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nav-item" @click="sortGoods">筛选</view>
|
||||
</view>
|
||||
<!-- 一行一个商品展示 -->
|
||||
<div v-if="isSWitch">
|
||||
<scroll-view :style="{ height: goodsHeight }" enableBackToTop="true" lower-threshold="250" @scrolltolower="loadmore()" scroll-with-animation scroll-y class="scoll-page">
|
||||
<div class="goodsClass">
|
||||
<u-row v-for="(item, index) in goodsList" :key="index" class="goodsRow">
|
||||
<u-col :span="4" @click.native="navigateToDetailPage(item)" class="switchType1">
|
||||
<u-image width="182rpx" height="200rpx" class="imgGoods" :src="item.thumbnail">
|
||||
<u-loading slot="loading"></u-loading>
|
||||
</u-image>
|
||||
</u-col>
|
||||
<u-col :span="8" @click.native="navigateToDetailPage(item)" class="switchType2">
|
||||
<div class="title clamp3" style="">{{ item.goodsName }}</div>
|
||||
<view class="price-box">
|
||||
<div class="price" v-if="item.price!=undefined">
|
||||
¥<span>{{ Fixed(item.price )[0] }} </span>.{{
|
||||
Fixed(item.price )[1]
|
||||
}}
|
||||
</div>
|
||||
</view>
|
||||
<div class="promotion">
|
||||
<div v-for="(promotionItem,promotionIndex) in getPromotion(item)" :key="promotionIndex">
|
||||
|
||||
<span v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
|
||||
<span v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
|
||||
<span v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="overflow: hidden" class="countConfig">
|
||||
<span style="float: left; font-size: 22rpx">已售 {{ item.buyCount || '0' }}</span>
|
||||
<span style="float: right; font-size: 22rpx">{{ item.commentNum || '0' }}条评论</span>
|
||||
</div>
|
||||
</u-col>
|
||||
<u-col :span="12" class="storeSellerBox">
|
||||
<div class="storeSellerName" @click="clickTostore()">
|
||||
<div class="textHidden">
|
||||
<u-tag style="margin-right: 10rpx" size="mini" mode="dark" v-if="item.selfOperated" text="自营" type="error" />
|
||||
|
||||
<span style="
|
||||
color: #333333;
|
||||
font-size: 28rpx;
|
||||
padding-left: 17rpx;
|
||||
">{{ item.storeName }}</span>
|
||||
</div>
|
||||
<span>
|
||||
<u-icon name="arrow-right" color="#c5c5c5"></u-icon>
|
||||
</span>
|
||||
</div>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</div>
|
||||
<uni-load-more :status="loadingType" @loadmore="loadmore()"></uni-load-more>
|
||||
</scroll-view>
|
||||
</div>
|
||||
<div class="empty" v-if="goodsList == [] || goodsList == '' || goodsList == null">
|
||||
<view>
|
||||
<image style="width: 320rpx; height: 240rpx" src="/static/nodata.png">
|
||||
|
||||
</image>
|
||||
</view>
|
||||
<view>
|
||||
<p>没有找到相关的商品信息</p>
|
||||
<p>请换一个关键词试试吧</p>
|
||||
</view>
|
||||
</div>
|
||||
|
||||
<!-- 一行两个商品展示 -->
|
||||
<div v-if="
|
||||
!isSWitch &&
|
||||
!(goodsList == [] || goodsList == '' || goodsList == null)
|
||||
">
|
||||
<scroll-view :style="{ height: goodsHeight }" scroll-anchoring enableBackToTop="true" @scrolltolower="loadmore()" scroll-with-animation scroll-y lower-threshold="250" class="scoll-page">
|
||||
<view class="goods-list">
|
||||
<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navigateToDetailPage(item)">
|
||||
<view class="image-wrapper">
|
||||
<image :src="item.thumbnail" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="goods-detail">
|
||||
<div class="title clamp">{{ item.goodsName }}</div>
|
||||
<view class="price-box">
|
||||
<div class="price" v-if="item.price!=undefined">
|
||||
|
||||
¥<span>{{ Fixed(item.price )[0] }} </span>.{{
|
||||
Fixed(item.price )[1]
|
||||
}}
|
||||
</div>
|
||||
</view>
|
||||
|
||||
<div class="promotion">
|
||||
<div v-for="(promotionItem,promotionIndex) in getPromotion(item)" :key="promotionIndex">
|
||||
|
||||
<span v-if="promotionItem.indexOf('COUPON') != -1">劵</span>
|
||||
<span v-if="promotionItem.indexOf('FULL_DISCOUNT') != -1">满减</span>
|
||||
<span v-if="promotionItem.indexOf('SECKILL') != -1">秒杀</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="countConfig">
|
||||
<span>已售 {{ item.buyCount || "0" }}</span>
|
||||
<span>{{ item.commentNum || "0" }}条评论</span>
|
||||
</div>
|
||||
<div class="storeSellerName">
|
||||
<div class="textHidden">
|
||||
<u-tag style="margin-right: 10rpx" size="mini" mode="dark" v-if="item.selfOperated == 1" text="自营" type="error" />
|
||||
<span>{{ item.storeName || "暂无" }}</span>
|
||||
</div>
|
||||
<span>
|
||||
<u-icon name="arrow-right"></u-icon>
|
||||
</span>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more :status="loadingType"></uni-load-more>
|
||||
</scroll-view>
|
||||
</div>
|
||||
</view>
|
||||
|
||||
<u-popup border-radius="20" mode="right" width="90%" v-model="sortPopup">
|
||||
<view class="status_bar"></view>
|
||||
<view class="sort-box ">
|
||||
<view class="sort-list">
|
||||
<view class="sort-item">
|
||||
<view class="sort-title"> 品牌 </view>
|
||||
<view class="flex" v-if="sortData.brands">
|
||||
<view class="sort-brand-item" :key="brandsIndex" v-for="(brand, brandsIndex) in sortData.brands" @click="handleSort(brand, brandsIndex, 'brand')">
|
||||
<view class="sort-radius" :class="{
|
||||
'sort-active': brand.__selected,
|
||||
}">
|
||||
{{ brand.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <u-empty v-else text="暂无品牌" mode="list"></u-empty> -->
|
||||
</view>
|
||||
<view class="sort-item">
|
||||
<view class="sort-title"> 全部分类 </view>
|
||||
<view class="flex" style="flex-wrap: wrap;" v-if="sortData.categories">
|
||||
<view class="sort-brand-item" :key="categoriesIndex" v-for="(categoryId, categoriesIndex) in sortData.categories" @click="handleSort(categoryId, categoriesIndex, 'categoryId')">
|
||||
<view class="sort-radius" :class="{
|
||||
'sort-active': categoryId.__selected,
|
||||
}">
|
||||
{{ categoryId.name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <u-empty v-else text="暂无分类" mode="list"></u-empty> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="sort-list">
|
||||
<view class="sort-item">
|
||||
<view class="sort-title"> 价格区间 </view>
|
||||
<view style="display:flex; margin-top:20rpx; align-items: center;">
|
||||
<view class="sort-brand-item uinput">
|
||||
<view class="sort-radius">
|
||||
<u-input v-model="minPrice" type="number" placeholder="最低价" input-align="center" />
|
||||
</view>
|
||||
</view>
|
||||
<view>-</view>
|
||||
<view class="sort-brand-item uinput">
|
||||
<view class="sort-radius">
|
||||
<u-input v-model="maxPrice" type="number" placeholder="最高价" input-align="center" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="sort-list" v-if="sortData.paramOptions">
|
||||
<view class="sort-item" :key="paramIndex" v-for="(param, paramIndex) in sortData.paramOptions">
|
||||
<view class="sort-title"> {{ param.key }} </view>
|
||||
<view class="flex" style="flex-warp:warp" v-if="param.values">
|
||||
<view class="sort-brand-item" :key="i" v-for="(value, i) in param.values" @click="handleSort(value, i, 'prop', param)">
|
||||
<view class="sort-radius" :class="{
|
||||
'sort-active': value.__selected,
|
||||
}">
|
||||
{{ value.title }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<div class="null-view"></div>
|
||||
<view class="sort-btn mp-iphonex-bottom">
|
||||
<view class="sort-btn-repick" @click="repick">重置</view>
|
||||
<view class="sort-btn-confim" @click="sortConfim">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getGoodsList, getGoodsRelated } from "@/api/goods.js";
|
||||
|
||||
import { getHotKeywords } from "@/api/home.js";
|
||||
import mSearch from "@/components/m-search-revision/m-search-revision.vue";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loadIndex: 10,
|
||||
oldKeywordIndex: "",
|
||||
selectedWay: {
|
||||
brand: [],
|
||||
categoryId: [],
|
||||
prop: [],
|
||||
},
|
||||
|
||||
sortPopup: false, //筛选的开关
|
||||
navObj: {
|
||||
background: "#fff",
|
||||
},
|
||||
typeSortData: {
|
||||
type: "",
|
||||
index: "",
|
||||
},
|
||||
goodsHeight: "",
|
||||
defaultKeyword: "",
|
||||
keyword: "",
|
||||
oldKeywordList: [],
|
||||
hotKeywordList: [],
|
||||
keywordList: [],
|
||||
goodsList: [],
|
||||
|
||||
cateMaskState: 0, //分类面板展开状态
|
||||
loadingType: "more", //加载更多状态
|
||||
filterIndex: 0,
|
||||
cateId: 0, //已选三级分类id
|
||||
priceOrder: 0, //1 价格从低到高 2价格从高到低
|
||||
cateList: [],
|
||||
isShowSeachGoods: false,
|
||||
isShowKeywordList: false,
|
||||
sortData: "",
|
||||
isSWitch: false,
|
||||
|
||||
params: {
|
||||
pageNumber: 0,
|
||||
pageSize: 10,
|
||||
// sort: 'grade_asc',
|
||||
sort: "releaseTime",
|
||||
order: "desc",
|
||||
keyword: "",
|
||||
},
|
||||
minPrice: "",
|
||||
maxPrice: "",
|
||||
sortParams: {
|
||||
pageNumber: 0,
|
||||
pageSize: 10,
|
||||
|
||||
// price: "", //价格,示例值(10_30)
|
||||
// prop: "", //属性:参数名_参数值@参数名_参数值,示例值(屏幕类型_LED@屏幕尺寸_15英寸)
|
||||
// brandId:"", //品牌,可以多选 品牌Id@品牌Id@品牌Id
|
||||
categoryId: "",
|
||||
},
|
||||
|
||||
routerVal: "",
|
||||
};
|
||||
},
|
||||
onLoad(val) {
|
||||
// return false
|
||||
this.init();
|
||||
this.initSortGoods();
|
||||
// 接收分类的数据
|
||||
|
||||
this.routerVal = val;
|
||||
|
||||
// 有值
|
||||
if (this.routerVal.category) {
|
||||
this.params.categoryId = this.routerVal.category;
|
||||
this.isShowSeachGoods = true;
|
||||
}
|
||||
if (this.routerVal.keyword) {
|
||||
this.params.keyword = this.routerVal.keyword;
|
||||
this.isShowSeachGoods = true;
|
||||
}
|
||||
if (this.routerVal.storeId) {
|
||||
this.params.storeId = this.routerVal.storeId;
|
||||
this.isShowSeachGoods = true;
|
||||
}
|
||||
this.loadData();
|
||||
},
|
||||
components: {
|
||||
//引用mSearch组件，如不需要删除即可
|
||||
mSearch,
|
||||
},
|
||||
|
||||
onReachBottom() {
|
||||
this.params.pageNumber++;
|
||||
this.loadData();
|
||||
},
|
||||
|
||||
mounted() {
|
||||
const { windowWidth, windowHeight } = uni.getSystemInfoSync();
|
||||
|
||||
let topHeight = 0;
|
||||
let navHeight = 0;
|
||||
|
||||
uni.getSystemInfo({
|
||||
success: function (res) {
|
||||
// res - 各种参数
|
||||
|
||||
let top = uni.createSelectorQuery().select(".u-navbar");
|
||||
top
|
||||
.boundingClientRect(function (data) {
|
||||
if (data && data.height) {
|
||||
//data - 各种参数
|
||||
topHeight = data.height; // 获取元素宽度
|
||||
}
|
||||
})
|
||||
.exec();
|
||||
let nav = uni.createSelectorQuery().select(".navbar");
|
||||
nav
|
||||
.boundingClientRect(function (data) {
|
||||
if (data && data.height) {
|
||||
//data - 各种参数
|
||||
navHeight = data.height; // 获取元素宽度
|
||||
}
|
||||
})
|
||||
.exec();
|
||||
},
|
||||
});
|
||||
this.goodsHeight = windowHeight - navHeight - topHeight;
|
||||
// #ifdef APP-PLUS
|
||||
this.goodsHeight = this.goodsHeight - 100;
|
||||
// #endif
|
||||
this.goodsHeight += "px";
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 数据去重一下 只显示一次 减免 劵 什么的
|
||||
getPromotion(item) {
|
||||
if (item.promotionMap) {
|
||||
let array = [];
|
||||
Object.keys(item.promotionMap).forEach((child) => {
|
||||
if (!array.includes(child.split("-")[0])) {
|
||||
array.push(child.split("-")[0]);
|
||||
}
|
||||
});
|
||||
|
||||
return array;
|
||||
}
|
||||
},
|
||||
|
||||
// 格式化金钱 1999 --> [1999,00]
|
||||
Fixed(val) {
|
||||
if (typeof val == "undefined") {
|
||||
return val;
|
||||
}
|
||||
return val.toFixed(2).split(".");
|
||||
},
|
||||
|
||||
// 展示更多数据
|
||||
showMore() {
|
||||
this.loadOldKeyword(this.oldKeywordIndex);
|
||||
},
|
||||
|
||||
// 点击确定进行筛选
|
||||
sortConfim() {
|
||||
// 处理品牌（多选
|
||||
this.params.brandId = [];
|
||||
this.selectedWay["brand"].forEach((item) => {
|
||||
if (item.__selected) {
|
||||
this.params.brandId.push(item.value);
|
||||
}
|
||||
});
|
||||
this.params.brandId = this.params.brandId.join("@");
|
||||
// 处理分类 (单选)
|
||||
if (this.selectedWay["categoryId"][0]) {
|
||||
this.params.categoryId = this.selectedWay["categoryId"][0].value;
|
||||
}
|
||||
// 处理属性
|
||||
this.params.prop = [];
|
||||
this.selectedWay["prop"].forEach((item) => {
|
||||
if (item.__selected) {
|
||||
this.params.prop.push(`${item.parent}_${item.title}`);
|
||||
}
|
||||
});
|
||||
this.params.prop = this.params.prop.join("@");
|
||||
// 处理价格
|
||||
if (this.minPrice || this.maxPrice) {
|
||||
this.params.price = `${this.minPrice}_${this.maxPrice}`;
|
||||
} else {
|
||||
this.params.price = 0;
|
||||
}
|
||||
|
||||
this.goodsList = [];
|
||||
this.loadData();
|
||||
this.sortPopup = false;
|
||||
},
|
||||
|
||||
// 重置
|
||||
repick() {
|
||||
this.initSortGoods();
|
||||
this.minPrice = "";
|
||||
this.maxPrice = "";
|
||||
this.params = {
|
||||
pageNumber: 0,
|
||||
pageSize: 10,
|
||||
};
|
||||
this.loadData();
|
||||
},
|
||||
|
||||
// 点击筛选的内容
|
||||
handleSort(val, index, type, parent) {
|
||||
if (type == "prop") {
|
||||
val.parent = parent.key;
|
||||
}
|
||||
this.selectedWay[type].push(val);
|
||||
if (type == "categoryId") {
|
||||
this.sortData.categories.forEach((item) => {
|
||||
item.__selected = false;
|
||||
});
|
||||
val.__selected = true;
|
||||
} else {
|
||||
val.__selected ? (val.__selected = false) : (val.__selected = true);
|
||||
}
|
||||
},
|
||||
|
||||
init() {
|
||||
this.loadDefaultKeyword();
|
||||
this.loadOldKeyword(this.loadIndex);
|
||||
this.loadHotKeyword();
|
||||
},
|
||||
blur() {
|
||||
uni.hideKeyboard();
|
||||
},
|
||||
back() {
|
||||
uni.navigateBack({
|
||||
delta: 1,
|
||||
});
|
||||
},
|
||||
navigateToDetailPage(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/product/goods?id=${item.id}&goodsId=${item.goodsId}`,
|
||||
});
|
||||
},
|
||||
loadmore() {
|
||||
this.params.pageNumber++;
|
||||
this.loadData();
|
||||
},
|
||||
initSortGoods() {
|
||||
getGoodsRelated(this.sortParams).then((res) => {
|
||||
if (res.data.success) {
|
||||
for (let item of Object.keys(res.data.result)) {
|
||||
res.data.result[item].forEach((child) => {
|
||||
child.__selected = false;
|
||||
|
||||
// 循环出和品牌分类一样的数据格式
|
||||
if (child.values) {
|
||||
child.values = child.values.map((item) => ({
|
||||
title: item,
|
||||
__selected: false,
|
||||
}));
|
||||
}
|
||||
});
|
||||
}
|
||||
this.sortData = res.data.result;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 筛选商品
|
||||
sortGoods() {
|
||||
this.sortPopup = true;
|
||||
},
|
||||
|
||||
tabClick(index, type) {
|
||||
this.params.pageNumber = 0;
|
||||
this.params.pageSize = 10;
|
||||
// this.params.order = "desc";
|
||||
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);
|
||||
}
|
||||
|
||||
if (index == 0) {
|
||||
this.params.sort = "releaseTime";
|
||||
this.params.order = "desc";
|
||||
}
|
||||
|
||||
this.filterIndex = index;
|
||||
|
||||
uni.pageScrollTo({
|
||||
duration: 300,
|
||||
scrollTop: 0,
|
||||
});
|
||||
this.loadData("refresh", 1);
|
||||
uni.showLoading({
|
||||
title: "正在加载",
|
||||
});
|
||||
},
|
||||
//加载默认搜索关键字
|
||||
loadDefaultKeyword() {
|
||||
//定义默认搜索关键字，可以自己实现ajax请求数据再赋值,用户未输入时，以水印方式显示在输入框，直接不输入内容搜索会搜索默认关键字
|
||||
this.defaultKeyword = "请输入搜索商品";
|
||||
},
|
||||
//加载历史搜索,自动读取本地Storage
|
||||
loadOldKeyword(index) {
|
||||
this.oldKeywordList = [];
|
||||
uni.getStorage({
|
||||
key: "OldKeys",
|
||||
success: (res) => {
|
||||
var OldKeys = JSON.parse(res.data);
|
||||
this.oldKeywordIndex = res.data.length;
|
||||
for (let i = 0; i < index; i++) {
|
||||
this.oldKeywordList.push(OldKeys[i]);
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
//加载热门搜索
|
||||
async loadHotKeyword() {
|
||||
this.hotKeywordList = [];
|
||||
let res = await getHotKeywords();
|
||||
let keywords = res.data.result;
|
||||
|
||||
keywords.forEach((item) => {
|
||||
this.hotKeywordList.push(item);
|
||||
});
|
||||
},
|
||||
//加载商品 ，带下拉刷新和上滑加载
|
||||
async loadData(type, loading) {
|
||||
this.loadingType = "loading";
|
||||
if (type == "refresh") {
|
||||
this.goodsList = [];
|
||||
}
|
||||
//没有更多直接返回
|
||||
let goodsList = await getGoodsList(this.params);
|
||||
console.log(goodsList);
|
||||
if (goodsList.data.result.content.length < 10) {
|
||||
this.loadingType = "noMore";
|
||||
}
|
||||
this.goodsList.push(...goodsList.data.result.content);
|
||||
this.initSortGoods();
|
||||
uni.hideLoading();
|
||||
},
|
||||
//监听输入
|
||||
inputChange(event) {
|
||||
//兼容引入组件时传入参数情况
|
||||
var keyword = event.detail ? event.detail.value : event;
|
||||
if (!keyword) {
|
||||
this.keywordList = [];
|
||||
this.isShowKeywordList = false;
|
||||
return;
|
||||
}
|
||||
this.isShowKeywordList = true;
|
||||
|
||||
this.getKeywordNumFun(keyword);
|
||||
},
|
||||
//高亮关键字
|
||||
drawCorrelativeKeyword(keywords, keyword) {
|
||||
var len = keywords.length,
|
||||
keywordArr = [];
|
||||
for (var i = 0; i < len; i++) {
|
||||
var row = keywords[i];
|
||||
//定义高亮#9f9f9f
|
||||
var html = row[0].replace(
|
||||
keyword,
|
||||
"<span style='color: #9f9f9f;'>" + keyword + "</span>"
|
||||
);
|
||||
html = "<div>" + html + "</div>";
|
||||
var tmpObj = {
|
||||
keyword: row[0],
|
||||
htmlStr: html,
|
||||
};
|
||||
keywordArr.push(tmpObj);
|
||||
}
|
||||
return keywordArr;
|
||||
},
|
||||
//顶置关键字
|
||||
setKeyword(index) {
|
||||
this.keyword = this.keywordList[index].keyword;
|
||||
},
|
||||
//清除历史搜索
|
||||
oldDelete() {
|
||||
uni.showModal({
|
||||
content: "确定清除历史搜索记录？",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
console.log("用户点击确定");
|
||||
this.oldKeywordList = [];
|
||||
uni.removeStorage({
|
||||
key: "OldKeys",
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// 样式修改布局
|
||||
doSearchSwitch(val) {
|
||||
this.isSWitch = !this.isSWitch;
|
||||
this.isShowSeachGoods = true;
|
||||
},
|
||||
|
||||
//执行搜索
|
||||
doSearch(keyword) {
|
||||
keyword = keyword === false ? this.keyword : keyword;
|
||||
this.keyword = keyword;
|
||||
this.saveKeyword(keyword); //保存为历史
|
||||
this.isShowSeachGoods = true;
|
||||
this.$refs.mSearch.isShowSeachGoods = true;
|
||||
this.params.keyword = keyword;
|
||||
this.params.pageNumber = 0;
|
||||
this.$set(this.sortParams, "keyword", keyword);
|
||||
|
||||
this.loadData("refresh", 1);
|
||||
},
|
||||
//保存关键字到历史记录
|
||||
saveKeyword(keyword) {
|
||||
console.log(keyword);
|
||||
if (!keyword) return false;
|
||||
uni.getStorage({
|
||||
key: "OldKeys",
|
||||
success: (res) => {
|
||||
var OldKeys = JSON.parse(res.data);
|
||||
var findIndex = OldKeys.indexOf(keyword);
|
||||
if (findIndex == -1) {
|
||||
OldKeys.unshift(keyword);
|
||||
} else {
|
||||
OldKeys.splice(findIndex, 1);
|
||||
OldKeys.unshift(keyword);
|
||||
}
|
||||
//最多10个纪录
|
||||
OldKeys.length > 10 && OldKeys.pop();
|
||||
|
||||
uni.setStorage({
|
||||
key: "OldKeys",
|
||||
data: JSON.stringify(OldKeys),
|
||||
});
|
||||
this.oldKeywordList = OldKeys; //更新历史搜索
|
||||
console.log(this.oldKeywordList);
|
||||
},
|
||||
fail: (e) => {
|
||||
var OldKeys = [keyword];
|
||||
uni.setStorage({
|
||||
key: "OldKeys",
|
||||
data: JSON.stringify(OldKeys),
|
||||
});
|
||||
this.oldKeywordList = OldKeys; //更新历史搜索
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// 搜索关键字
|
||||
getKeywordNumFun(keywords) {
|
||||
this.params.keyword = keywords;
|
||||
this.$set(this.sortParams, "keyword", keywords);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./search.scss";
|
||||
</style>
|
||||
325
pages/navigation/selectShops.vue
Normal file
325
pages/navigation/selectShops.vue
Normal file
@@ -0,0 +1,325 @@
|
||||
<template>
|
||||
<view class="selected-store">
|
||||
<!-- 点击搜索出现搜索框 -->
|
||||
<!-- <div v-show="searchHandle" class="searchBox">
|
||||
<u-search placeholder="请输入关键字" :clearabled="true" :show-action="false" v-model="pageParams.name" @blur="searchStore()" @clear="clearSearch()" @confirm="searchStore()" ></u-search>
|
||||
</div> -->
|
||||
<div>
|
||||
<empty v-if="nomsg"></empty>
|
||||
<div class="swiper-item">
|
||||
<scroll-view class="scroll-v" enableBackToTop="true" scroll-with-animation scroll-y>
|
||||
<view class="index-item" v-for="(store,storeIndex) in stores" :key="storeIndex" @click.prevent="storeDetail(store.id)">
|
||||
<div class="item-goods">
|
||||
<u-image width="51px" height="51px" class="item-title-img" :src="store.storeLogo || noLogo">
|
||||
<u-loading slot="loading"></u-loading>
|
||||
</u-image>
|
||||
<view class="item-content">
|
||||
<view>
|
||||
<span>{{ store.storeName }}</span><span class="self-store" v-if="store.selfOperated">自营</span>
|
||||
</view>
|
||||
<view>
|
||||
<u-rate size="24" :count="5" :disabled="true" v-model="store.descriptionScore"></u-rate>
|
||||
</view>
|
||||
<view>{{ store.store_collect }} 关注</view>
|
||||
<button v-if="store.is_connect==0" @click.stop="collectstore(store.id)" class="collect btn-mini">
|
||||
<u-icon name="plus"></u-icon>关注
|
||||
</button>
|
||||
<button v-if="store.is_connect==1" @click.stop="collectstore(store.id)" class="collect btn-mini"></u-icon>已关注</button>
|
||||
</view>
|
||||
<view class="store-num">
|
||||
<!-- <view> {{store.goods_num}}</view> -->
|
||||
<view>进店逛逛</view>
|
||||
</view>
|
||||
|
||||
</div>
|
||||
</view>
|
||||
<uni-load-more :status="loadStatus"></uni-load-more>
|
||||
</scroll-view>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { collectionStore } from "@/api/members.js";
|
||||
import { getstoreList } from "@/api/store.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabIndex: 0,
|
||||
currentLeft: 0,
|
||||
stores: [],
|
||||
pageParams: {
|
||||
pageNumber: 1, //页码
|
||||
pageSize: 10, //分页大小
|
||||
category_id: 0, //分类
|
||||
key_words: "", //搜索关键字
|
||||
name: "", //店铺名字
|
||||
},
|
||||
loadStatus: "more",
|
||||
nomsg: false,
|
||||
noLogo: require("@/static/logo.png"),
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.searchStore();
|
||||
},
|
||||
watch: {
|
||||
tabIndex(val) {
|
||||
this.pageParams.pageNumber = 1;
|
||||
this.stores = [];
|
||||
this.loadStatus = "more";
|
||||
this.searchStore();
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
|
||||
this.pageParams.pageNumber++;
|
||||
this.searchStore();
|
||||
},
|
||||
methods: {
|
||||
// 清空店铺
|
||||
clearSearch() {
|
||||
(this.pageParams = {
|
||||
pageNumber: 1, //页码
|
||||
pageSize: 10, //分页大小
|
||||
category_id: 0, //分类
|
||||
key_words: "", //搜索关键字
|
||||
name: "", //店铺名字
|
||||
}),
|
||||
this.searchStore();
|
||||
},
|
||||
|
||||
async searchStore() {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
|
||||
//获取商品数据
|
||||
let response = await getstoreList(this.pageParams);
|
||||
uni.hideLoading();
|
||||
if (this.pageParams.name) {
|
||||
this.stores = [];
|
||||
}
|
||||
|
||||
this.stores = this.stores.concat(response.data.result.records);
|
||||
uni.hideLoading();
|
||||
if (
|
||||
response.data.result.total <=
|
||||
response.data.result.current * response.data.result.size
|
||||
) {
|
||||
this.loadStatus = "noMore";
|
||||
} else {
|
||||
this.loadStatus = "loadmore";
|
||||
}
|
||||
if (this.stores.length == 0) {
|
||||
this.nomsg = true;
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
collectstore(id) {
|
||||
//收藏店铺
|
||||
collectionStore(id).then((res) => {
|
||||
if (res.statusCode == 200) {
|
||||
this.$api.msg("收藏成功");
|
||||
this.pageParams.pageNumber = 1;
|
||||
this.stores = [];
|
||||
this.searchStore();
|
||||
}
|
||||
});
|
||||
},
|
||||
storeDetail(id) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/product/shopPage?id=" + id,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.searchBox {
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.selected-store {
|
||||
height: 100%;
|
||||
|
||||
.list-scroll-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
|
||||
.tab-item {
|
||||
width: 160rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.active {
|
||||
border-bottom: 2px solid #ffffff;
|
||||
broder-width: 60rpx;
|
||||
font-size: 30rpx;
|
||||
padding-bottom: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: calc(100% - 80rpx);
|
||||
|
||||
.scroll-v {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.index-item {
|
||||
// height: 535rpx;
|
||||
margin: 20rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 14rpx;
|
||||
|
||||
.item-goods {
|
||||
height: 170rpx;
|
||||
margin: 0 20rpx;
|
||||
padding: 30rpx 0;
|
||||
// border-bottom: 1px solid #eeeeee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 102rpx;
|
||||
height: 102rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.item-title-img {
|
||||
width: 102rpx !important;
|
||||
height: 102rpx !important;
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
flex: 1;
|
||||
line-height: 2em;
|
||||
font-size: $font-sm;
|
||||
position: relative;
|
||||
.collect {
|
||||
position: absolute;
|
||||
width: 100rpx;
|
||||
height: 40rpx;
|
||||
font-size: 26rpx;
|
||||
bottom: 20rpx;
|
||||
right: 30rpx;
|
||||
padding: 0;
|
||||
line-height: 40rpx;
|
||||
text-align: right;
|
||||
padding-right: 14rpx;
|
||||
.u-icon {
|
||||
font-size: 26rpx;
|
||||
position: absolute;
|
||||
top: 7rpx;
|
||||
left: 10rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
}
|
||||
> view:first-child {
|
||||
font-size: $font-base;
|
||||
color: #333333;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
|
||||
span:nth-child(2) {
|
||||
position: absolute;
|
||||
font-weight: 400;
|
||||
top: 12rpx;
|
||||
font-size: 18rpx;
|
||||
margin-left: 20rpx;
|
||||
height: 26rpx;
|
||||
width: 50rpx;
|
||||
line-height: 26rpx;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
background-color: #ff6262;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
color: #999;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.store-num {
|
||||
width: 150rpx;
|
||||
text-align: center;
|
||||
border-left: 1px solid #eeeeee;
|
||||
|
||||
:nth-child(1) {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
:nth-child(2) {
|
||||
font-size: 18rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-in-store {
|
||||
height: 364rpx;
|
||||
white-space: nowrap;
|
||||
padding: 20rpx 0 20rpx 20rpx;
|
||||
|
||||
.goods-item {
|
||||
width: 195rpx;
|
||||
display: inline-block;
|
||||
white-space: normal;
|
||||
margin-right: 20rpx;
|
||||
font-size: $font-sm;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
image {
|
||||
width: 195rpx;
|
||||
height: 195rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
> view {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.goods-item-img {
|
||||
width: 195rpx !important;
|
||||
height: 195rpx !important;
|
||||
border-radius: 8rpx !important;
|
||||
}
|
||||
|
||||
> view:nth-child(2) {
|
||||
color: #ff5a10;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user