|
|
@@ -1,61 +1,469 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
+ <view class="u-wrap">
|
|
|
+
|
|
|
<view class="top-box">
|
|
|
- <view class="top-item" v-for="item of tabList" @click="handlerSelectTopItem(item,index)">
|
|
|
- {{ item.name }}
|
|
|
+ <view class="switch-box">
|
|
|
+ <u-tabs :list="list1" lineWidth="30" lineColor="$uni-bg-color-primary" @click='handlerChangeTab' :activeStyle="{
|
|
|
+ color: '#000',
|
|
|
+ fontSize: '28rpx',
|
|
|
+ transform: 'scale(1.05)',
|
|
|
+ marginBottom: '15rpx',
|
|
|
+ }" :inactiveStyle="{
|
|
|
+ color: '#333',
|
|
|
+ fontSize: '30rpx',
|
|
|
+ transform: 'scale(1)',
|
|
|
+ marginBottom: '15rpx',
|
|
|
+ }" itemStyle="width:50%;padding:0;margin:5px 0;"></u-tabs>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <!-- 在售中 -->
|
|
|
+ <view class="u-menu-wrap" >
|
|
|
+ <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
|
|
|
+ :scroll-into-view="itemId">
|
|
|
+ <view v-for="(item,index) in tabbar" :key="index" class="u-tab-item"
|
|
|
+ :class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
|
|
|
+ <text class="u-line-1">{{item.name}}</text>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
|
|
|
+ <view class="page-view">
|
|
|
+ <view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
|
|
|
+ <view class="item-title">
|
|
|
+ <text>{{item.name}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-box" v-for="itm of item.foods" :key="idx">
|
|
|
+ <view class="item-l">
|
|
|
+ <img class="l-img" src="@/static/QR57a.jpg" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="item-r">
|
|
|
+ <p class='p1'>yizhiyang的鲜花{{itm.name}}11111111111111</p>
|
|
|
+ <p class='p2'>月售100</p>
|
|
|
+ <p class='p2'>库存90</p>
|
|
|
+ <p class='p3'>￥100起</p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
<button class="btn" @click="handlerSkipNext">下一步</button>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default{
|
|
|
- data(){
|
|
|
- return{
|
|
|
- tabList:[
|
|
|
- {name:'主营业务',id:0},
|
|
|
- {name:'辅盈业务(选填)',id:1}
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ scrollTop: 0, //tab标题的滚动条位置
|
|
|
+ oldScrollTop: 0, // tab标题的滚动条旧位置
|
|
|
+ current: 0, // 预设当前项的值
|
|
|
+ menuHeight: 0, // 左边菜单的高度
|
|
|
+ menuItemHeight: 0, // 左边菜单item的高度
|
|
|
+ itemId: '', // 栏目右边scroll-view用于滚动的id
|
|
|
+ arr: [], // 储存距离顶部高度的数组
|
|
|
+ scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
|
|
|
+ timer: null, // 定时器
|
|
|
+ tabbar: [{
|
|
|
+ "name": "蔬菜水果",
|
|
|
+ "foods": [{
|
|
|
+ "cat": 383,
|
|
|
+ "name": "蔬菜",
|
|
|
+ "icon": "http://nq348.com/uploads/category/20220315/1aeed6fa43b54cd68cce0c4883160f91.png",
|
|
|
+ "key": "蔬菜"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "cat": 384,
|
|
|
+ "name": "食用菌",
|
|
|
+ "icon": "http://nq348.com/uploads/category/20220418/09839c618b35b510d50151f9a17793ee.png",
|
|
|
+ "key": "食用菌"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "cat": 385,
|
|
|
+ "name": "水果",
|
|
|
+ "icon": "http://nq348.com/uploads/category/20220418/5294ad2fc7effc9629cbfdb8baf41773.png",
|
|
|
+ "key": "水果"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "name": "其他",
|
|
|
+ "foods": [{
|
|
|
+ "cat": 434,
|
|
|
+ "name": "包装",
|
|
|
+ "icon": "http://nq348.com/uploads/category/20220418/ebdfd326333344825adbe81dbd89e2c9.png",
|
|
|
+ "key": "包装"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "cat": 435,
|
|
|
+ "name": "安全溯源",
|
|
|
+ "icon": "http://nq348.com/uploads/category/20220418/03230c63f066f46005abf5f576df0ed1.png",
|
|
|
+ "key": "安全溯源"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "cat": 436,
|
|
|
+ "name": "农用百货",
|
|
|
+ "icon": "http://nq348.com/uploads/category/20220418/93393f2df3264faba86bb449a0c10a79.png",
|
|
|
+ "key": "农用百货"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ "cat": 437,
|
|
|
+ "name": "仓储物流",
|
|
|
+ "icon": "http://nq348.com/uploads/category/20220418/f553505ebabbcb1bf762b288716cf1e7.png",
|
|
|
+ "key": "仓储物流"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
],
|
|
|
- current:0
|
|
|
+ list1: [{
|
|
|
+ name: '在售中',
|
|
|
+ }, {
|
|
|
+ name: '已下架',
|
|
|
+ }],
|
|
|
}
|
|
|
},
|
|
|
- methods:{
|
|
|
- // 顶部选择
|
|
|
- handlerSelectTopItem(item,index){
|
|
|
- console.log('item',item);
|
|
|
+ /**
|
|
|
+ * 获取一个目标元素的高度
|
|
|
+ * @elClass 元素的类名
|
|
|
+ * @dataVal 储存高度的对象
|
|
|
+ */
|
|
|
+ onReady() {
|
|
|
+ this.getMenuItemTop()
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ delete_type(newValue) {
|
|
|
+ this.scrollRightTop = 0
|
|
|
+ this.current = 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getElRect(elClass, dataVal) {
|
|
|
+ new Promise((resolve, reject) => {
|
|
|
+ const query = uni.createSelectorQuery().in(this);
|
|
|
+ query.select('.' + elClass).fields({
|
|
|
+ size: true
|
|
|
+ }, res => {
|
|
|
+ // 如果节点尚未生成，res值为null，循环调用执行
|
|
|
+ if (!res) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getElRect(elClass);
|
|
|
+ }, 10);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this[dataVal] = res.height;
|
|
|
+ resolve();
|
|
|
+ }).exec();
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ getMenuItemTop() {
|
|
|
+ new Promise(resolve => {
|
|
|
+ let selectorQuery = uni.createSelectorQuery();
|
|
|
+ selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
|
|
|
+ // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
|
|
|
+ if (!rects.length) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getMenuItemTop();
|
|
|
+ }, 10);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ rects.forEach((rect) => {
|
|
|
+ // 视情况而定，这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
|
|
|
+ this.arr.push(rect.top - rects[0].top);
|
|
|
+ // this.arr.push(rect.top)
|
|
|
+ resolve();
|
|
|
+ })
|
|
|
+ }).exec()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 观测元素相交状态
|
|
|
+ * 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
|
|
|
+ * 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
|
|
|
+ */
|
|
|
+ async observer() {
|
|
|
+ this.tabbar.map((val, index) => {
|
|
|
+ let observer = uni.createIntersectionObserver(this);
|
|
|
+ observer.relativeTo('.right-box', {
|
|
|
+ top: 0
|
|
|
+ }).observe('#item' + index, res => {
|
|
|
+ if (res.intersectionRatio > 0) {
|
|
|
+ let id = res.id.substring(4);
|
|
|
+ this.leftMenuStatus(id);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 设置左边菜单的滚动状态
|
|
|
+ * @index 传入的 ID
|
|
|
+ */
|
|
|
+ async leftMenuStatus(index) {
|
|
|
+ this.current = index;
|
|
|
+ // 如果为0，意味着尚未初始化
|
|
|
+ if (this.menuHeight == 0 || this.menuItemHeight == 0) {
|
|
|
+ await this.getElRect('menu-scroll-view', 'menuHeight');
|
|
|
+ await this.getElRect('u-tab-item', 'menuItemHeight');
|
|
|
+ }
|
|
|
+ // 将菜单活动item垂直居中
|
|
|
+ this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 点击左边的栏目切换
|
|
|
+ * @index 传入的 ID
|
|
|
+ */
|
|
|
+ async swichMenu(index) {
|
|
|
+ if (this.arr.length == 0) {
|
|
|
+ await this.getMenuItemTop();
|
|
|
+ }
|
|
|
+ if (index == this.current) return;
|
|
|
+ this.scrollRightTop = this.oldScrollTop;
|
|
|
+ this.$nextTick(function() {
|
|
|
+ this.scrollRightTop = this.arr[index];
|
|
|
+ this.current = index;
|
|
|
+ this.leftMenuStatus(index);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 右边菜单滚动
|
|
|
+ * 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
|
|
|
+ */
|
|
|
+ async rightScroll(e) {
|
|
|
+ this.oldScrollTop = e.detail.scrollTop;
|
|
|
+ if (this.arr.length == 0) {
|
|
|
+ await this.getMenuItemTop();
|
|
|
+ }
|
|
|
+ if (this.timer) return;
|
|
|
+ if (!this.menuHeight) {
|
|
|
+ await this.getElRect('menu-scroll-view', 'menuHeight');
|
|
|
+ }
|
|
|
+ setTimeout(() => { // 节流
|
|
|
+ this.timer = null;
|
|
|
+ // scrollHeight为右边菜单垂直中点位置
|
|
|
+ // let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
|
|
|
+ // scrollHeight为右边菜单头部位置
|
|
|
+ let scrollHeight = e.detail.scrollTop + 20;
|
|
|
+ for (let i = 0; i < this.arr.length; i++) {
|
|
|
+ let height1 = this.arr[i];
|
|
|
+ let height2 = this.arr[i + 1];
|
|
|
+ if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
|
|
|
+ this.leftMenuStatus(i);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, 10)
|
|
|
},
|
|
|
|
|
|
- // 点击跳转到下一步
|
|
|
+ // 搜索按钮
|
|
|
+ handlerSearchBtn() {
|
|
|
+ console.log('search', this.search);
|
|
|
+ },
|
|
|
+ // 切换tab
|
|
|
+ handlerChangeTab(e) {
|
|
|
+ if (e.index == 1) {
|
|
|
+ this.delete_type = true
|
|
|
+ } else {
|
|
|
+ this.delete_type = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 跳转到下一步
|
|
|
handlerSkipNext(){
|
|
|
uni.navigateTo({
|
|
|
- url:'/pages/tabbar/mine/openStore/storeInformation'
|
|
|
+ url:'pages/tabbar/mine/openStore/storeInformation'
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .container{
|
|
|
- .top-box{
|
|
|
+ .top-box {
|
|
|
+ padding: 0 0 20rpx;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .switch-box {
|
|
|
width: 100%;
|
|
|
- padding: 20rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-box {
|
|
|
display: flex;
|
|
|
justify-content: space-around;
|
|
|
- .top-item{
|
|
|
- width: 30%;
|
|
|
+ width: 90%;
|
|
|
+ margin: 20rpx auto 0;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ background-color: #5992BB;
|
|
|
+ color: #fff;
|
|
|
text-align: center;
|
|
|
+ line-height: 70rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-wrap {
|
|
|
+ /* #ifdef H5 */
|
|
|
+ height: calc(100vh - var(--window-top));
|
|
|
+ /* #endif */
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #FAFAFA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-search-box {
|
|
|
+ padding: 18rpx 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-menu-wrap {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-tab-view {
|
|
|
+ width: 200rpx;
|
|
|
+ background-color: #f6f6f6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-tab-item {
|
|
|
+ height: 110rpx;
|
|
|
+ background: #f6f6f6;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #444;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 1;
|
|
|
+ padding: 16rpx 0;
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
- .btn{
|
|
|
- background-color: #5992BB !important;
|
|
|
- color: #fff;
|
|
|
- font-size:32rpx;
|
|
|
- border-radius: 40rpx;
|
|
|
- margin-top: 40rpx;
|
|
|
- width: 95%;
|
|
|
+ .u-tab-item-active {
|
|
|
+ position: relative;
|
|
|
+ color: #5F96BE;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ background: #FFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-tab-item-active::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ border-left: 4px solid #5F96BE;
|
|
|
+ height: 52rpx;
|
|
|
+ left: 0;
|
|
|
+ top: 29rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-tab-view {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-box {
|
|
|
+ background-color: rgb(250, 250, 250);
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-view {
|
|
|
+ padding: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .class-item,
|
|
|
+ .class-item2 {
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 16rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .class-item2 {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ font-size: 26rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #5F96BE;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-box {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+
|
|
|
+ .item-l {
|
|
|
+ border: 2rpx solid #EEF0F0;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+
|
|
|
+ .l-img {
|
|
|
+ width: 140rpx;
|
|
|
+ height: 130rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
+ .item-r {
|
|
|
+
|
|
|
+ .p1,
|
|
|
+ .type_p1 {
|
|
|
+ width: 350rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #000;
|
|
|
+ margin-bottom: 5rpx;
|
|
|
+ overflow-x: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .type_p1 {
|
|
|
+ width: 480rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .p2 {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #A4A5AD;
|
|
|
+ }
|
|
|
+
|
|
|
+ .p3 {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #D6534D;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-box {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ border-top: 2rpx solid #F7F7F7;
|
|
|
+ box-shadow: 0px 7px 10px 7px rgba(0, 0, 0, 0.1);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ line-height: 100rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ background-color: #5992BB !important;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 32rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ margin-top: 40rpx;
|
|
|
+ width: 95%;
|
|
|
+ }
|
|
|
+ ::v-deep .u-input--radius.data-v-fdbb9fe6,
|
|
|
+ .u-input--square.data-v-fdbb9fe6 {
|
|
|
+ background-color: #F7F7F7 !important;
|
|
|
+ padding: 40rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
}
|
|
|
</style>
|
