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
272
pages/product/shopPage.vue
Normal file
272
pages/product/shopPage.vue
Normal file
@@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<view class="store-page">
|
||||
<view class="status_bar">
|
||||
<!-- 这里是状态栏 -->
|
||||
</view>
|
||||
|
||||
<view class="header">
|
||||
<div class="search">
|
||||
|
||||
<u-icon @click="back" style="margin:0 10rpx 0;" name="arrow-left" size="40" color="#fff"></u-icon>
|
||||
|
||||
<u-search :show-action="false" border-color="#fff" bg-color="#fff" v-model="keyword" @search="search" placeholder="请输入搜索" />
|
||||
<!-- <input /> -->
|
||||
|
||||
<u-icon @click="shareChange()" style="margin:0 10rpx 0;" name="share-fill" size="40" color="#fff"></u-icon>
|
||||
|
||||
</div>
|
||||
<view class="tab-header">
|
||||
<text :class="{ cur: tabIndex == 0 }" @click="setCat(0)">首页</text>
|
||||
<text :class="{ cur: tabIndex == 1 }" @click="setCat(1)">商品</text>
|
||||
<!-- <text :class="{ cur: tabIndex == 2 }" @click="setCat(2)">上新</text> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<swiper :current="tabIndex" class="swiper-box" @change="ontabchange">
|
||||
<swiper-item class="swiper-item" v-for="(item, index) in indexCats" :key="index">
|
||||
<scroll-view class="scroll-v" scroll-anchoring enableBackToTop="true" scroll-y @refresherrefresh="refresh()" @scroll="pageScroll">
|
||||
<storePageMain :load="load" :storeId="storeId" v-if="index == 0"></storePageMain>
|
||||
<storePageGoods :load="load" :pageChange="pageChange" :categoryId="item" :storeId="storeId" v-if="index == 1"></storePageGoods>
|
||||
|
||||
</scroll-view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<!-- 分享 -->
|
||||
<shares type="shops" :link="'/pages/product/shopPage?id='+ this.storeId" v-if="shareFlage" @close="shareFlage = false" />
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import shares from "@/components/m-share/index"; //分享
|
||||
|
||||
import storePageMain from "./shopPageMain.vue";
|
||||
import storePageGoods from "./shopPageGoods.vue";
|
||||
|
||||
import { getstoreBaseInfo } from "@/api/store.js";
|
||||
export default {
|
||||
components: {
|
||||
shares,
|
||||
storePageMain,
|
||||
storePageGoods,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
shareFlage: false,
|
||||
tabIndex: 0,
|
||||
keyword: "",
|
||||
load: false,
|
||||
storeId: undefined,
|
||||
indexCats: [0, 1],
|
||||
scrollHeight: "",
|
||||
loadIndex: 1, //加载的距离
|
||||
pageChange: "",
|
||||
storeInfo: {},
|
||||
};
|
||||
},
|
||||
async onLoad(options) {
|
||||
this.storeId = options.id;
|
||||
console.log(this.storeId);
|
||||
getstoreBaseInfo(this.storeId).then((res) => {
|
||||
this.storeInfo = res.data;
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
const { windowWidth, windowHeight } = uni.getSystemInfoSync();
|
||||
let tabHeader = 0;
|
||||
|
||||
let topHeight = 0;
|
||||
uni.getSystemInfo({
|
||||
success: function (res) {
|
||||
// res - 各种参数
|
||||
let search = uni.createSelectorQuery().select(".header");
|
||||
search
|
||||
.boundingClientRect(function (data) {
|
||||
//data - 各种参数
|
||||
topHeight = data.height; // 获取元素宽度
|
||||
})
|
||||
.exec();
|
||||
let nav = uni.createSelectorQuery().select(".tab-header");
|
||||
nav
|
||||
.boundingClientRect(function (data) {
|
||||
//data - 各种参数
|
||||
tabHeader = data.height; // 获取元素宽度
|
||||
})
|
||||
.exec();
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 点击分享
|
||||
async shareChange() {
|
||||
this.shareFlage = true;
|
||||
},
|
||||
search() {
|
||||
uni.navigateTo({
|
||||
url: `/pages/navigation/search/searchPage?storeId=${this.storeId}&keyword=${this.keyword}`,
|
||||
});
|
||||
},
|
||||
pageScroll(e) {
|
||||
if (e.detail.scrollTop > 300 * this.loadIndex) {
|
||||
this.loadIndex++;
|
||||
this.load = this.loadIndex;
|
||||
}
|
||||
// this.load = false;
|
||||
},
|
||||
|
||||
back() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
setCat(type) {
|
||||
this.tabIndex = type;
|
||||
},
|
||||
ontabchange(e) {
|
||||
this.tabIndex = e.detail.current;
|
||||
this.setCat(this.tabIndex);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
page {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
// #ifdef MP-WEIXIN
|
||||
@import "./mp-shopPage.scss";
|
||||
// #endif
|
||||
input[type="search"] {
|
||||
-webkit-appearance: none;
|
||||
// 也可以去除加上border: 0;之类的 根据设计图来
|
||||
}
|
||||
|
||||
input::-webkit-search-cancel-button {
|
||||
display: none;
|
||||
}
|
||||
// 关闭的按钮
|
||||
|
||||
.storeScrollBox {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.store-page {
|
||||
height: 100%;
|
||||
// background: #fff;
|
||||
overflow: auto;
|
||||
|
||||
.tab-header {
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
z-index: 9999;
|
||||
|
||||
text {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
&.cur {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 30rpx;
|
||||
border: 1px solid #fff;
|
||||
bottom: -6rpx;
|
||||
left: 50%;
|
||||
margin-left: -15rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-line {
|
||||
height: 1px;
|
||||
background: #f2f2f2;
|
||||
position: fixed;
|
||||
top: 170rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
width: 750rpx;
|
||||
|
||||
height: calc(
|
||||
100% - var(--status-bar-height) - var(--window-top) - var(--window-bottom) -
|
||||
(160rpx) - 16rpx - 28rpx
|
||||
);
|
||||
|
||||
// #ifdef H5
|
||||
height: calc(
|
||||
100% - var(--status-bar-height) - var(--window-top) - var(--window-bottom) -
|
||||
(160rpx)
|
||||
);
|
||||
// #endif
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.scroll-v {
|
||||
width: 750rpx;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.status_bar {
|
||||
height: calc(var(--status-bar-height) + 160rpx);
|
||||
width: 100%;
|
||||
background-image: linear-gradient(
|
||||
25deg,
|
||||
$main-color,
|
||||
$light-color,
|
||||
$aider-light-color
|
||||
);
|
||||
}
|
||||
.header {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: var(--status-bar-height);
|
||||
|
||||
padding: 16rpx 0 0;
|
||||
font-size: 30rpx;
|
||||
z-index: 9999;
|
||||
> .search {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.back {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
background: $light-color;
|
||||
width: 600rpx;
|
||||
height: 58rpx;
|
||||
padding: 10rpx 30rpx 10rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
border-radius: 50rpx;
|
||||
position: relative;
|
||||
border: 1px solid $light-color;
|
||||
|
||||
input {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user