|
|
@@ -2,26 +2,33 @@
|
|
|
<view class="content">
|
|
|
<view class="scroll-top flex_item">
|
|
|
<scroll-view class="scroll-list" scroll-x>
|
|
|
- <view class="scoll-box" v-for="ls in flist" :class="{ active: ls.id === currentId }" @click="tabtap(ls.id)">
|
|
|
- <view class="scoll-img"><image :src="ls.pic"></image></view>
|
|
|
+ <view class="scoll-box" v-for="ls in flist" :class="{ active: ls.id === currentId }"
|
|
|
+ @click="tabtap(ls.id)">
|
|
|
+ <view class="scoll-img">
|
|
|
+ <image :src="ls.pic"></image>
|
|
|
+ </view>
|
|
|
<view class="scoll-name">{{ ls.cate_name }}</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
<view class="search-box" @click="Toseach">
|
|
|
- <view class="search"><image src="../../static/image/img22.png" mode="scaleToFill"></image></view>
|
|
|
+ <view class="search">
|
|
|
+ <image src="../../static/image/img22.png" mode="scaleToFill"></image>
|
|
|
+ </view>
|
|
|
<view>搜索</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="scroll-view flex-tpl" :style="{ height: pageHeight + 'px' }">
|
|
|
<scroll-view scroll-y class="left-aside">
|
|
|
- <view v-for="item in slist" class="f-item" :class="{ active_top: item.id === erjiid }" @click="changeSlist(item)">{{ item.cate_name }}</view>
|
|
|
+ <view v-for="(item,ind) in slist" class="f-item" :class="{ active_top: item.id === erjiid }"
|
|
|
+ @click="changeSlist(item,ind)">{{ item.cate_name }}</view>
|
|
|
</scroll-view>
|
|
|
- <scroll-view :scroll-with-animation="scrollAnimation" scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
|
|
|
- <view class="tlist-box" v-for="ls in slist" :id="'main-' + ls.id">
|
|
|
- <view class="tlistname" v-if="ls.list">{{ ls.name }}</view>
|
|
|
- <view class="tlist-list flex_item" v-if="ls.goods" v-for="item in ls.goods" @click="ToDetail(item)">
|
|
|
+ <scroll-view :scroll-with-animation="scrollAnimation" scroll-y class="right-aside"
|
|
|
+ :scroll-top="tabScrollTop">
|
|
|
+ <view class="tlist-box" v-if="slist.length>0">
|
|
|
+ <view class="tlist-list flex_item" v-if="slist[indexAction].goods"
|
|
|
+ v-for="item in slist[indexAction].goods" @click="ToDetail(item)">
|
|
|
<view class="tlist-img">
|
|
|
- <image class="img" :src="item.image" :lazy-load="true" mode="scaleToFill"></image>
|
|
|
+ <image class="img" :src="item.image" :lazy-load="true" mode="scaleToFill"></image>
|
|
|
</view>
|
|
|
<view class="sell-out" v-if="item.stock == 0"><text>已售罄</text></view>
|
|
|
<view class="tlist-info">
|
|
|
@@ -29,7 +36,7 @@
|
|
|
<!-- <view class="info clamp">{{ item.store_info }}</view> -->
|
|
|
<view class="tipBox">
|
|
|
<view class="tip clamp" v-if="item.keyword != ''">
|
|
|
- <text >{{ item.keyword }}</text>
|
|
|
+ <text>{{ item.keyword }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="tlist-price flex">
|
|
|
@@ -43,7 +50,8 @@
|
|
|
<text class="fen">/{{item.unit_name}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="gocar position-relative" v-if="item.is_barrel==0" @click.stop="Addcar(item)">
|
|
|
+ <view class="gocar position-relative" v-if="item.is_barrel==0"
|
|
|
+ @click.stop="Addcar(item)">
|
|
|
<image src="/static/image/img21.png" mode="scaleToFill"></image>
|
|
|
<view class="corner" v-if="item.cart_num > 0">
|
|
|
<text>{{ item.cart_num }}</text>
|
|
|
@@ -59,568 +67,626 @@
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { mapState, mapMutations } from 'vuex';
|
|
|
-import { category_layer,category_goods } from '@/api/water.js';
|
|
|
-import { cartAdd } from '@/api/product.js';
|
|
|
-import { saveUrl } from '@/utils/loginUtils';
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- sizeCalcState: false,
|
|
|
- tabScrollTop: 0,
|
|
|
- currentId: '', //一级选择id，
|
|
|
- erjiid: '', //二级选择id
|
|
|
- flist: [], //一级分类列表
|
|
|
- slist: [], //二级分类列表
|
|
|
- yijishow: true, //一级界面显示
|
|
|
- sanjishow: false, //三级界面隐藏
|
|
|
- bili: 1, //设置页面比例
|
|
|
- pageHeight: 0, //保存滚轮页面高度
|
|
|
- CategoryID: '',
|
|
|
- userInfo: '',
|
|
|
- onload: true, //保存数据判断是否是第一次打开页面
|
|
|
- scrollAnimation: true //是否开启动画
|
|
|
- };
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- if (option.spread) {
|
|
|
- uni.setStorageSync('spread', option.spread);
|
|
|
- }
|
|
|
- saveUrl();
|
|
|
- uni.showLoading({
|
|
|
- title: '加载中'
|
|
|
- });
|
|
|
- this.loadData();
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- let obj = this;
|
|
|
- const categoryId = uni.getStorageSync('categoryId') || '';
|
|
|
- if (obj.currentId != categoryId && categoryId != '' && !obj.onload) {
|
|
|
- obj.tabtap(categoryId);
|
|
|
- }
|
|
|
- // 初次数据加载完毕
|
|
|
- obj.onload = false;
|
|
|
- },
|
|
|
- onReady() {
|
|
|
- // 初始化获取页面宽度
|
|
|
- uni.createSelectorQuery()
|
|
|
- .select('.content')
|
|
|
- .fields(
|
|
|
- {
|
|
|
- size: true
|
|
|
- },
|
|
|
- data => {
|
|
|
- // 获取页面百分比
|
|
|
- this.bili = data.width / 750;
|
|
|
- console.log(data, 2);
|
|
|
- this.pageHeight = data.height - 185 * this.bili;
|
|
|
- console.log(this.pageHeight, 33);
|
|
|
- }
|
|
|
- )
|
|
|
- .exec();
|
|
|
- },
|
|
|
- // #ifndef MP
|
|
|
- // 监听导航栏输入框点击事件
|
|
|
- onNavigationBarSearchInputClicked(e) {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/product/search'
|
|
|
- });
|
|
|
- },
|
|
|
- // #endif
|
|
|
- //下拉刷新
|
|
|
- onPullDownRefresh() {
|
|
|
- let obj = this;
|
|
|
- //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
|
|
|
- setTimeout(function() {
|
|
|
- obj.loadData();
|
|
|
- uni.stopPullDownRefresh(); //停止下拉刷新动画
|
|
|
- }, 1000);
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['GetInfo']),
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 载入数据
|
|
|
- async loadData() {
|
|
|
- let obj = this;
|
|
|
- obj.loading = true;
|
|
|
- category_layer({})
|
|
|
- .then(({ data }) => {
|
|
|
- obj.flist = data.list;
|
|
|
- obj.currentId = data.first;
|
|
|
- obj.erji();
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- console.log(err);
|
|
|
- });
|
|
|
- },
|
|
|
- // 二级数据加载
|
|
|
- erji() {
|
|
|
- let obj = this;
|
|
|
- category_goods({
|
|
|
- pid: obj.currentId
|
|
|
- })
|
|
|
- .then(({ data }) => {
|
|
|
- obj.slist = data.slist.map(function(s) {
|
|
|
- return s;
|
|
|
- });
|
|
|
- obj.erjiid = obj.slist[0].id;
|
|
|
- obj.$nextTick(e => {
|
|
|
- // 重新开启动画效果
|
|
|
- uni.hideLoading();
|
|
|
- // 数据加载完成后重新计算高度
|
|
|
- obj.calcSize()
|
|
|
- obj.scrollAnimation = true;
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- uni.hideLoading();
|
|
|
- console.log(err);
|
|
|
- });
|
|
|
- },
|
|
|
- //分享
|
|
|
- // #ifdef MP
|
|
|
- onShareAppMessage: function(res) {
|
|
|
- let userInfo = uni.getStorageSync('userInfo');
|
|
|
- // 来自页面内分享按钮
|
|
|
- let pages = getCurrentPages();
|
|
|
- // 获取当前页面
|
|
|
- let page = pages[pages.length - 1];
|
|
|
- let path = '/pages/category/category?';
|
|
|
- // 保存邀请人
|
|
|
- path += 'spread=' + userInfo.uid;
|
|
|
- let data = {
|
|
|
- path: path,
|
|
|
- imageUrl: this.GetInfo.img,
|
|
|
- title: this.GetInfo.title
|
|
|
+ import {
|
|
|
+ mapState,
|
|
|
+ mapMutations
|
|
|
+ } from 'vuex';
|
|
|
+ import {
|
|
|
+ category_layer,
|
|
|
+ category_goods
|
|
|
+ } from '@/api/water.js';
|
|
|
+ import {
|
|
|
+ cartAdd
|
|
|
+ } from '@/api/product.js';
|
|
|
+ import {
|
|
|
+ saveUrl
|
|
|
+ } from '@/utils/loginUtils';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ indexAction: 0, //当前选中的二级
|
|
|
+ sizeCalcState: false,
|
|
|
+ tabScrollTop: 0,
|
|
|
+ currentId: '', //一级选择id，
|
|
|
+ erjiid: '', //二级选择id
|
|
|
+ flist: [], //一级分类列表
|
|
|
+ slist: [], //二级分类列表
|
|
|
+ yijishow: true, //一级界面显示
|
|
|
+ sanjishow: false, //三级界面隐藏
|
|
|
+ bili: 1, //设置页面比例
|
|
|
+ pageHeight: 0, //保存滚轮页面高度
|
|
|
+ CategoryID: '',
|
|
|
+ userInfo: '',
|
|
|
+ onload: true, //保存数据判断是否是第一次打开页面
|
|
|
+ scrollAnimation: true //是否开启动画
|
|
|
};
|
|
|
- console.log(data)
|
|
|
- return data;
|
|
|
- },
|
|
|
- // #endif
|
|
|
- //加入购物车
|
|
|
- Addcar(item) {
|
|
|
- let obj = this;
|
|
|
- cartAdd({
|
|
|
- cartNum: '1', //商品数量
|
|
|
- uniqueId: '', //商品标签
|
|
|
- new: 0, //商品是否新增加到购物车1为不加入0为加入
|
|
|
- mer_id: '',
|
|
|
- productId: item.id //商品编号
|
|
|
- })
|
|
|
- .then(function(e) {
|
|
|
- uni.showToast({
|
|
|
- title: '成功加入购物车',
|
|
|
- type: 'top',
|
|
|
- duration: 500,
|
|
|
- icon: 'none'
|
|
|
- });
|
|
|
- obj.erji();
|
|
|
- })
|
|
|
- .catch(e => {
|
|
|
- console.log(e);
|
|
|
- });
|
|
|
},
|
|
|
- //一级分类点击
|
|
|
- tabtap(item) {
|
|
|
+ onLoad(option) {
|
|
|
+ if (option.spread) {
|
|
|
+ uni.setStorageSync('spread', option.spread);
|
|
|
+ }
|
|
|
+ saveUrl();
|
|
|
uni.showLoading({
|
|
|
title: '加载中'
|
|
|
});
|
|
|
- let obj = this;
|
|
|
- // 关闭动画效果
|
|
|
- obj.scrollAnimation = false;
|
|
|
- // 设置顶部高度为0
|
|
|
- obj.$nextTick(function(){
|
|
|
- // 等待渲染完毕在执行高度修改否则动画效果依然存在
|
|
|
- obj.tabScrollTop = 0;
|
|
|
- })
|
|
|
- // 获取当前点击的id
|
|
|
- obj.currentId = item;
|
|
|
- // 二级分类分类保存id
|
|
|
- obj.erjiid = item;
|
|
|
- uni.setStorageSync('categoryId', item);
|
|
|
- // 重置分类滚轮绑定高度
|
|
|
- obj.sizeCalcState = false;
|
|
|
- // 加载二级方法
|
|
|
- setTimeout(function() {
|
|
|
- obj.erji();
|
|
|
- });
|
|
|
},
|
|
|
- //二级点击
|
|
|
- changeSlist(item) {
|
|
|
+ onShow() {
|
|
|
let obj = this;
|
|
|
- // 判断有没有初始化页面高度对象数据
|
|
|
- console.log(obj.sizeCalcState)
|
|
|
- if (!obj.sizeCalcState) {
|
|
|
- obj.calcSize();
|
|
|
+ const categoryId = uni.getStorageSync('categoryId') || '';
|
|
|
+ if (obj.currentId != categoryId && categoryId != '' && !obj.onload) {
|
|
|
+ obj.tabtap(categoryId);
|
|
|
}
|
|
|
- // 获取当前点击的id
|
|
|
- obj.erjiid = item.id;
|
|
|
- let index = obj.slist.findIndex(sitem => sitem.id === item.id);
|
|
|
- setTimeout(function() {
|
|
|
- obj.tabScrollTop = obj.slist[index].top;
|
|
|
- }, 10);
|
|
|
+ // 初次数据加载完毕
|
|
|
+ obj.onload = false;
|
|
|
+ this.loadData();
|
|
|
},
|
|
|
- // 商品详情页
|
|
|
- ToDetail(item) {
|
|
|
- if (item.stock < 1) {
|
|
|
- this.$api.msg('该商品已售罄');
|
|
|
- } else {
|
|
|
- uni.navigateTo({
|
|
|
- url: `/pages/product/product?id=` + item.id
|
|
|
- });
|
|
|
- }
|
|
|
+ onReady() {
|
|
|
+ // 初始化获取页面宽度
|
|
|
+ uni.createSelectorQuery()
|
|
|
+ .select('.content')
|
|
|
+ .fields({
|
|
|
+ size: true
|
|
|
+ },
|
|
|
+ data => {
|
|
|
+ // 获取页面百分比
|
|
|
+ this.bili = data.width / 750;
|
|
|
+ console.log(data, 2);
|
|
|
+ this.pageHeight = data.height - 185 * this.bili;
|
|
|
+ console.log(this.pageHeight, 33);
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .exec();
|
|
|
},
|
|
|
- Toseach() {
|
|
|
+ // #ifndef MP
|
|
|
+ // 监听导航栏输入框点击事件
|
|
|
+ onNavigationBarSearchInputClicked(e) {
|
|
|
uni.navigateTo({
|
|
|
- url: `/pages/product/search`
|
|
|
+ url: '/pages/product/search'
|
|
|
});
|
|
|
},
|
|
|
- //右侧栏滚动
|
|
|
- asideScroll(e) {
|
|
|
- // 判断有没有初始化页面高度对象数据
|
|
|
- if (!this.sizeCalcState) {
|
|
|
- this.calcSize();
|
|
|
- }
|
|
|
- let scrollTop = e.detail.scrollTop;
|
|
|
- let box = 0; //列表包裹框高度初始化
|
|
|
- let bottom = 10; //距离页面底部多少像素左侧列表切换到最后一个一级分类
|
|
|
- // 查询当前页面对象
|
|
|
- let view = uni.createSelectorQuery().select('.right-aside');
|
|
|
- view.fields(
|
|
|
- {
|
|
|
- id: true,
|
|
|
- dataset: true,
|
|
|
- rect: true,
|
|
|
- size: true,
|
|
|
- scrollOffset: true
|
|
|
- },
|
|
|
- function(e) {
|
|
|
- // 保存包裹框高度
|
|
|
- box = e.height;
|
|
|
- }
|
|
|
- ).exec();
|
|
|
- // 获取所有距离顶部大于滚轮距离页面高度的所有分类
|
|
|
- let tabs = this.slist.filter(item => item.top <= scrollTop).reverse();
|
|
|
- if (tabs.length > 0) {
|
|
|
- // 判断是否已经到达滚轮底部
|
|
|
- if (box + scrollTop + bottom >= e.detail.scrollHeight) {
|
|
|
- this.erjiid = this.slist[this.slist.length - 1].id;
|
|
|
+ // #endif
|
|
|
+ //下拉刷新
|
|
|
+ onPullDownRefresh() {
|
|
|
+ let obj = this;
|
|
|
+ //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
|
|
|
+ setTimeout(function() {
|
|
|
+ obj.loadData();
|
|
|
+ uni.stopPullDownRefresh(); //停止下拉刷新动画
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['GetInfo']),
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 载入数据
|
|
|
+ async loadData() {
|
|
|
+ let obj = this;
|
|
|
+ obj.loading = true;
|
|
|
+ category_layer({})
|
|
|
+ .then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ obj.flist = data.list;
|
|
|
+ obj.currentId = data.first;
|
|
|
+ obj.erji();
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 二级数据加载
|
|
|
+ erji() {
|
|
|
+ let obj = this;
|
|
|
+ category_goods({
|
|
|
+ pid: obj.currentId
|
|
|
+ })
|
|
|
+ .then(({
|
|
|
+ data
|
|
|
+ }) => {
|
|
|
+ obj.slist = data.slist.map(function(s) {
|
|
|
+ return s;
|
|
|
+ });
|
|
|
+ obj.erjiid = obj.slist[0].id;
|
|
|
+ obj.$nextTick(e => {
|
|
|
+ // 重新开启动画效果
|
|
|
+ uni.hideLoading();
|
|
|
+ // 数据加载完成后重新计算高度
|
|
|
+ // obj.calcSize()
|
|
|
+ obj.scrollAnimation = true;
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ uni.hideLoading();
|
|
|
+ console.log(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //分享
|
|
|
+ // #ifdef MP
|
|
|
+ onShareAppMessage: function(res) {
|
|
|
+ let userInfo = uni.getStorageSync('userInfo');
|
|
|
+ // 来自页面内分享按钮
|
|
|
+ let pages = getCurrentPages();
|
|
|
+ // 获取当前页面
|
|
|
+ let page = pages[pages.length - 1];
|
|
|
+ let path = '/pages/category/category?';
|
|
|
+ // 保存邀请人
|
|
|
+ path += 'spread=' + userInfo.uid;
|
|
|
+ let data = {
|
|
|
+ path: path,
|
|
|
+ imageUrl: this.GetInfo.img,
|
|
|
+ title: this.GetInfo.title
|
|
|
+ };
|
|
|
+ console.log(data)
|
|
|
+ return data;
|
|
|
+ },
|
|
|
+ // #endif
|
|
|
+ //加入购物车
|
|
|
+ Addcar(item) {
|
|
|
+ let obj = this;
|
|
|
+ cartAdd({
|
|
|
+ cartNum: '1', //商品数量
|
|
|
+ uniqueId: '', //商品标签
|
|
|
+ new: 0, //商品是否新增加到购物车1为不加入0为加入
|
|
|
+ mer_id: '',
|
|
|
+ productId: item.id //商品编号
|
|
|
+ })
|
|
|
+ .then(function(e) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '成功加入购物车',
|
|
|
+ type: 'top',
|
|
|
+ duration: 500,
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ obj.erji();
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //一级分类点击
|
|
|
+ tabtap(item) {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ let obj = this;
|
|
|
+ // 关闭动画效果
|
|
|
+ obj.scrollAnimation = false;
|
|
|
+ // 设置顶部高度为0
|
|
|
+ obj.$nextTick(function() {
|
|
|
+ // 等待渲染完毕在执行高度修改否则动画效果依然存在
|
|
|
+ obj.tabScrollTop = 0;
|
|
|
+ })
|
|
|
+ // 获取当前点击的id
|
|
|
+ obj.currentId = item;
|
|
|
+ // 二级分类分类保存id
|
|
|
+ obj.erjiid = item;
|
|
|
+ uni.setStorageSync('categoryId', item);
|
|
|
+ // 重置分类滚轮绑定高度
|
|
|
+ obj.sizeCalcState = false;
|
|
|
+ // 加载二级方法
|
|
|
+ setTimeout(function() {
|
|
|
+ obj.erji();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //二级点击
|
|
|
+ changeSlist(item, ind) {
|
|
|
+ let obj = this;
|
|
|
+ // 获取当前点击的id
|
|
|
+ // if (!obj.sizeCalcState) {
|
|
|
+ // obj.calcSize();
|
|
|
+ // }
|
|
|
+ // // 获取当前点击的id
|
|
|
+ obj.erjiid = item.id;
|
|
|
+ // let index = obj.slist.findIndex(sitem => sitem.id === item.id);
|
|
|
+ // setTimeout(function() {
|
|
|
+ // obj.tabScrollTop = obj.slist[index].top;
|
|
|
+ // }, 10);
|
|
|
+ obj.indexAction = ind;
|
|
|
+ },
|
|
|
+ // 商品详情页
|
|
|
+ ToDetail(item) {
|
|
|
+ if (item.stock < 1) {
|
|
|
+ this.$api.msg('该商品已售罄');
|
|
|
} else {
|
|
|
- this.erjiid = tabs[0].id;
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/product/product?id=` + item.id
|
|
|
+ });
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- //计算右侧栏每个tab的高度等信息
|
|
|
- calcSize() {
|
|
|
- let h = this.bili * 215;
|
|
|
- this.slist.forEach(item => {
|
|
|
- let view = uni.createSelectorQuery().select('#main-' + item.id);
|
|
|
- view.fields(
|
|
|
- {
|
|
|
- size: true
|
|
|
- },
|
|
|
- data => {
|
|
|
- item.top = Math.ceil(h);
|
|
|
- h += data.height;
|
|
|
- item.bottom = Math.ceil(h);
|
|
|
- }
|
|
|
- ).exec();
|
|
|
- });
|
|
|
- this.sizeCalcState = true;
|
|
|
+ },
|
|
|
+ Toseach() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/product/search`
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //右侧栏滚动
|
|
|
+ // asideScroll(e) {
|
|
|
+ // // 判断有没有初始化页面高度对象数据
|
|
|
+ // if (!this.sizeCalcState) {
|
|
|
+ // this.calcSize();
|
|
|
+ // }
|
|
|
+ // let scrollTop = e.detail.scrollTop;
|
|
|
+ // let box = 0; //列表包裹框高度初始化
|
|
|
+ // let bottom = 10; //距离页面底部多少像素左侧列表切换到最后一个一级分类
|
|
|
+ // // 查询当前页面对象
|
|
|
+ // let view = uni.createSelectorQuery().select('.right-aside');
|
|
|
+ // view.fields(
|
|
|
+ // {
|
|
|
+ // id: true,
|
|
|
+ // dataset: true,
|
|
|
+ // rect: true,
|
|
|
+ // size: true,
|
|
|
+ // scrollOffset: true
|
|
|
+ // },
|
|
|
+ // function(e) {
|
|
|
+ // // 保存包裹框高度
|
|
|
+ // box = e.height;
|
|
|
+ // }
|
|
|
+ // ).exec();
|
|
|
+ // // 获取所有距离顶部大于滚轮距离页面高度的所有分类
|
|
|
+ // let tabs = this.slist.filter(item => item.top <= scrollTop).reverse();
|
|
|
+ // if (tabs.length > 0) {
|
|
|
+ // // 判断是否已经到达滚轮底部
|
|
|
+ // if (box + scrollTop + bottom >= e.detail.scrollHeight) {
|
|
|
+ // this.erjiid = this.slist[this.slist.length - 1].id;
|
|
|
+ // } else {
|
|
|
+ // this.erjiid = tabs[0].id;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ //计算右侧栏每个tab的高度等信息
|
|
|
+ // calcSize() {
|
|
|
+ // let h = this.bili * 215;
|
|
|
+ // this.slist.forEach(item => {
|
|
|
+ // let view = uni.createSelectorQuery().select('#main-' + item.id);
|
|
|
+ // view.fields(
|
|
|
+ // {
|
|
|
+ // size: true
|
|
|
+ // },
|
|
|
+ // data => {
|
|
|
+ // item.top = Math.ceil(h);
|
|
|
+ // h += data.height;
|
|
|
+ // item.bottom = Math.ceil(h);
|
|
|
+ // }
|
|
|
+ // ).exec();
|
|
|
+ // });
|
|
|
+ // this.sizeCalcState = true;
|
|
|
+ // }
|
|
|
}
|
|
|
- }
|
|
|
-};
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-page {
|
|
|
- background-color: #ffffff;
|
|
|
- height: 100%;
|
|
|
- .content {
|
|
|
+ page {
|
|
|
background-color: #ffffff;
|
|
|
height: 100%;
|
|
|
+
|
|
|
+ .content {
|
|
|
+ background-color: #ffffff;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-//顶部分类
|
|
|
-.scroll-top {
|
|
|
- width: 100%;
|
|
|
- font-size: 24rpx;
|
|
|
- height: 170rpx;
|
|
|
- padding: 0px 25rpx;
|
|
|
- box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
|
|
|
- .scroll-list {
|
|
|
- width: 80%;
|
|
|
- overflow: hidden;
|
|
|
- white-space: nowrap;
|
|
|
- .scoll-box {
|
|
|
- margin-right: 15rpx;
|
|
|
+
|
|
|
+ //顶部分类
|
|
|
+ .scroll-top {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 24rpx;
|
|
|
+ height: 170rpx;
|
|
|
+ padding: 0px 25rpx;
|
|
|
+ box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
|
|
|
+
|
|
|
+ .scroll-list {
|
|
|
+ width: 80%;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+
|
|
|
+ .scoll-box {
|
|
|
+ margin-right: 15rpx;
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+
|
|
|
+ .scoll-img {
|
|
|
+ width: 130rpx;
|
|
|
+ height: 85rpx;
|
|
|
+ border-radius: 100%;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 85rpx;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .scoll-name {
|
|
|
+ padding-top: 15rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: $base-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-box {
|
|
|
text-align: center;
|
|
|
- display: inline-block;
|
|
|
- .scoll-img {
|
|
|
- width: 130rpx;
|
|
|
+ margin-left: 50rpx;
|
|
|
+
|
|
|
+ .search {
|
|
|
+ width: 85rpx;
|
|
|
height: 85rpx;
|
|
|
border-radius: 100%;
|
|
|
+ margin-bottom: 15rpx;
|
|
|
+
|
|
|
image {
|
|
|
- width: 85rpx;
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
|
border-radius: 100%;
|
|
|
}
|
|
|
}
|
|
|
- .scoll-name {
|
|
|
- padding-top: 15rpx;
|
|
|
- }
|
|
|
- &.active {
|
|
|
- color: $base-color;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
- .search-box {
|
|
|
- text-align: center;
|
|
|
- margin-left: 50rpx;
|
|
|
- .search {
|
|
|
- width: 85rpx;
|
|
|
- height: 85rpx;
|
|
|
- border-radius: 100%;
|
|
|
- margin-bottom: 15rpx;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 100%;
|
|
|
+
|
|
|
+ .flex-tpl {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-view {
|
|
|
+ margin-top: 15rpx;
|
|
|
+
|
|
|
+ .left-aside {
|
|
|
+ width: 190rpx;
|
|
|
+ background-color: rgba(245, 246, 248, 1);
|
|
|
+ overflow: hidden;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ overflow-y: scroll;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .f-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: $font-color-base;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &.active_top {
|
|
|
+ background: #ffffff;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+
|
|
|
+ &:before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ height: 36rpx;
|
|
|
+ width: 8rpx;
|
|
|
+ background-color: $base-color;
|
|
|
+ border-radius: 0 4px 4px 0;
|
|
|
+ opacity: 0.8;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-.flex-tpl {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-}
|
|
|
-.scroll-view {
|
|
|
- margin-top: 15rpx;
|
|
|
- .left-aside {
|
|
|
- width: 190rpx;
|
|
|
- background-color: rgba(245, 246, 248, 1);
|
|
|
+
|
|
|
+ .right-aside {
|
|
|
overflow: hidden;
|
|
|
+ padding: 0rpx 20rpx;
|
|
|
height: 100%;
|
|
|
display: block;
|
|
|
overflow-y: scroll;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.f-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- width: 100%;
|
|
|
- height: 100rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: $font-color-base;
|
|
|
- position: relative;
|
|
|
- &.active_top {
|
|
|
- background: #ffffff;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 500;
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- &:before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- height: 36rpx;
|
|
|
- width: 8rpx;
|
|
|
- background-color: $base-color;
|
|
|
- border-radius: 0 4px 4px 0;
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.right-aside {
|
|
|
- overflow: hidden;
|
|
|
- padding: 0rpx 20rpx;
|
|
|
- height: 100%;
|
|
|
- display: block;
|
|
|
- overflow-y: scroll;
|
|
|
- width: 100%;
|
|
|
- .image {
|
|
|
width: 100%;
|
|
|
- padding-bottom: 15rpx;
|
|
|
- .imageLV {
|
|
|
+
|
|
|
+ .image {
|
|
|
width: 100%;
|
|
|
- height: 200rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .tlist-box {
|
|
|
- .tlistname {
|
|
|
- font-size: 24rpx;
|
|
|
- padding: 25rpx 25rpx;
|
|
|
- border-top: 2rpx solid rgba(238, 238, 238, 1);
|
|
|
- border-bottom: 2rpx solid rgba(238, 238, 238, 1);
|
|
|
- }
|
|
|
- .tlist-list.flex_item {
|
|
|
- height: 0;
|
|
|
- min-height: 240rpx;
|
|
|
- align-items: stretch;
|
|
|
+ padding-bottom: 15rpx;
|
|
|
+
|
|
|
+ .imageLV {
|
|
|
+ width: 100%;
|
|
|
+ height: 200rpx;
|
|
|
+ }
|
|
|
}
|
|
|
- .tlist-list {
|
|
|
- padding: 25rpx 0rpx;
|
|
|
- position: relative;
|
|
|
- .tlist-img {
|
|
|
- width: 190rpx;
|
|
|
- position: relative;
|
|
|
- .img {
|
|
|
- width: 190rpx;
|
|
|
- height: 190rpx;
|
|
|
- }
|
|
|
+
|
|
|
+ .tlist-box {
|
|
|
+ .tlistname {
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 25rpx 25rpx;
|
|
|
+ border-top: 2rpx solid rgba(238, 238, 238, 1);
|
|
|
+ border-bottom: 2rpx solid rgba(238, 238, 238, 1);
|
|
|
}
|
|
|
- .sell-out {
|
|
|
- position: absolute;
|
|
|
- width: 190rpx;
|
|
|
- height: 190rpx;
|
|
|
- background: rgba(255, 255, 255, 0.4);
|
|
|
- text-align: center;
|
|
|
- text {
|
|
|
- line-height: 190rpx;
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
- color: #ffffff;
|
|
|
- padding: 10rpx 25rpx;
|
|
|
- border-radius: 25rpx;
|
|
|
- font-size: 20rpx;
|
|
|
- }
|
|
|
+
|
|
|
+ .tlist-list.flex_item {
|
|
|
+ height: 0;
|
|
|
+ min-height: 240rpx;
|
|
|
+ align-items: stretch;
|
|
|
}
|
|
|
- .tlist-info {
|
|
|
- font-size: 24rpx;
|
|
|
- width: 0;
|
|
|
- flex-grow: 1;
|
|
|
- padding-left: 25rpx;
|
|
|
- padding-right: 25rpx;
|
|
|
- height: 100%;
|
|
|
+
|
|
|
+ .tlist-list {
|
|
|
+ padding: 25rpx 0rpx;
|
|
|
position: relative;
|
|
|
- line-height: 1;
|
|
|
- .bottom_border {
|
|
|
- position: absolute;
|
|
|
- border-bottom: 1px solid #eeeeee;
|
|
|
- left: 25rpx;
|
|
|
- bottom: 0;
|
|
|
- height: 2rpx;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .name {
|
|
|
- color: #141821;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 26rpx;
|
|
|
- line-height: 1.2;
|
|
|
- }
|
|
|
- .info {
|
|
|
- margin: 10rpx 0rpx;
|
|
|
- height: 30rpx;
|
|
|
- color: #979797;
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
- .tipBox {
|
|
|
- height: 50rpx;
|
|
|
- margin: 10rpx 0;
|
|
|
- .tip {
|
|
|
- padding: 10rpx 0rpx;
|
|
|
- text {
|
|
|
- border: 2rpx solid #ff1a27;
|
|
|
- color: #ff1a27;
|
|
|
- border-radius: 5rpx;
|
|
|
- font-size: 18rpx;
|
|
|
- padding: 5rpx 10rpx;
|
|
|
- margin-right: 15rpx;
|
|
|
- }
|
|
|
+
|
|
|
+ .tlist-img {
|
|
|
+ width: 190rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 190rpx;
|
|
|
+ height: 190rpx;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
-
|
|
|
- .tlist-price {
|
|
|
+
|
|
|
+ .sell-out {
|
|
|
position: absolute;
|
|
|
- left: 0rpx;
|
|
|
+ width: 190rpx;
|
|
|
+ height: 190rpx;
|
|
|
+ background: rgba(255, 255, 255, 0.4);
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ text {
|
|
|
+ line-height: 190rpx;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 10rpx 25rpx;
|
|
|
+ border-radius: 25rpx;
|
|
|
+ font-size: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tlist-info {
|
|
|
+ font-size: 24rpx;
|
|
|
+ width: 0;
|
|
|
+ flex-grow: 1;
|
|
|
padding-left: 25rpx;
|
|
|
padding-right: 25rpx;
|
|
|
- bottom: 10rpx;
|
|
|
- width: 100%;
|
|
|
- .stock {
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ line-height: 1;
|
|
|
+
|
|
|
+ .bottom_border {
|
|
|
+ position: absolute;
|
|
|
+ border-bottom: 1px solid #eeeeee;
|
|
|
+ left: 25rpx;
|
|
|
+ bottom: 0;
|
|
|
+ height: 2rpx;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ color: #141821;
|
|
|
+ font-weight: 500;
|
|
|
font-size: 26rpx;
|
|
|
- color: $font-color-light;
|
|
|
- .stock-num {
|
|
|
- padding-left: 7rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- border-radius: 5rpx;
|
|
|
- height: 32rpx;
|
|
|
- line-height: 32rpx;
|
|
|
+ line-height: 1.2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ margin: 10rpx 0rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ color: #979797;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tipBox {
|
|
|
+ height: 50rpx;
|
|
|
+ margin: 10rpx 0;
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ padding: 10rpx 0rpx;
|
|
|
+
|
|
|
+ text {
|
|
|
+ border: 2rpx solid #ff1a27;
|
|
|
+ color: #ff1a27;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ font-size: 18rpx;
|
|
|
+ padding: 5rpx 10rpx;
|
|
|
+ margin-right: 15rpx;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
- .price-box {
|
|
|
- .price {
|
|
|
- color: #ff1a27;
|
|
|
- .blod {
|
|
|
- font-size: 35rpx;
|
|
|
- font-weight: bold;
|
|
|
+
|
|
|
+ .tlist-price {
|
|
|
+ position: absolute;
|
|
|
+ left: 0rpx;
|
|
|
+ padding-left: 25rpx;
|
|
|
+ padding-right: 25rpx;
|
|
|
+ bottom: 10rpx;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .stock {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: $font-color-light;
|
|
|
+
|
|
|
+ .stock-num {
|
|
|
+ padding-left: 7rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ border-radius: 5rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
}
|
|
|
- .fen {
|
|
|
- color: #838691;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price-box {
|
|
|
+ .price {
|
|
|
+ color: #ff1a27;
|
|
|
+
|
|
|
+ .blod {
|
|
|
+ font-size: 35rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fen {
|
|
|
+ color: #838691;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .gocar {
|
|
|
- width: 50rpx;
|
|
|
- height: 50rpx;
|
|
|
- align-self: flex-end;
|
|
|
- image {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+
|
|
|
+ .gocar {
|
|
|
+ width: 50rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ align-self: flex-end;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .tlist {
|
|
|
- .cate {
|
|
|
- padding: 25rpx 0rpx;
|
|
|
- color: #666666;
|
|
|
- font-size: 24rpx;
|
|
|
+
|
|
|
+ .tlist {
|
|
|
+ .cate {
|
|
|
+ padding: 25rpx 0rpx;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-.s-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 70rpx;
|
|
|
- padding-top: 8rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: $font-color-dark;
|
|
|
-}
|
|
|
-.t-list {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- border-radius: 15rpx;
|
|
|
- width: 100%;
|
|
|
- background: #fff;
|
|
|
- padding-top: 12rpx;
|
|
|
- &:after {
|
|
|
- content: '';
|
|
|
- flex: 99;
|
|
|
- height: 0;
|
|
|
+
|
|
|
+ .s-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 70rpx;
|
|
|
+ padding-top: 8rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
}
|
|
|
-}
|
|
|
-.t-item {
|
|
|
- flex-shrink: 0;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- flex-direction: column;
|
|
|
- width: 171rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- color: #666;
|
|
|
- padding-bottom: 20rpx;
|
|
|
-
|
|
|
- image {
|
|
|
- width: 140rpx;
|
|
|
- height: 140rpx;
|
|
|
+
|
|
|
+ .t-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ border-radius: 15rpx;
|
|
|
+ width: 100%;
|
|
|
+ background: #fff;
|
|
|
+ padding-top: 12rpx;
|
|
|
+
|
|
|
+ &:after {
|
|
|
+ content: '';
|
|
|
+ flex: 99;
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-item {
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 171rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #666;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 140rpx;
|
|
|
+ height: 140rpx;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-</style>
|
|
|
+</style>
|
